/* ---- Sistemul de mișcare — SINGURA definiție -------------------------------
   Duratele și curbele animațiilor consolei, ca tokeni: o singură scară, ca
   mișcarea să se simtă un singur sistem. Consumatorii sunt CSS-ul —
   `t-line-in` (mai jos, în fișierul ăsta), `inbox-pulse` (styles-inbox.css)
   și mișcarea stivei de acțiuni (styles-action-stack.css).
   Blocul a stat în styles-wrapup.css; a venit aici când rezumatul de apel a
   fost retras (decizia proprietarului, 2026-08-31) — tokenii pe :root nu depind
   de poziția în cascadă, doar de a exista o singură dată.
     fast   — dispariții, hover, redus;
     base   — intrări/ieșiri de conținut (ease-out puternic: pornește iute);
     slow   — intrarea unei suprafețe întregi (arc mic, cu depășire);
     pulse  — pulsul insignei (aceeași bătaie ca inbox-pulse). */
:root {
  --motion-dur-fast: 150ms;
  --motion-dur-base: 240ms;
  --motion-dur-slow: 360ms;
  --motion-dur-pulse: 420ms;
  --motion-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Tabloul principal ---------------------------------------------------- */
/* `min-height: max-content` e regula care ține tabloul cinstit pe un ecran scund:
   fără ea grila e strânsă la înălțimea disponibilă, iar cardurile cu conținut fix
   (tastatura, cele două butoane de apel) ies din cartonul lor și se suprapun cu
   cardul de dedesubt. Cu ea, grila cere cât îi trebuie și pagina derulează —
   un pupitru care derulează e mai bun decât unul în care tastatura intră peste
   „Ultimele numere". */
.workspace-grid {
  display: grid;
  /* Trei coloane EGALE, un singur rând care umple pagina: cardurile au aceeași
     mărime și acoperă tot spațiul (cerința ownerului, 2026-08-20) — ce nu
     încape derulează ÎN card (liste cu overflow), nu pagina. */
  /* Dreapta puțin mai îngustă decât cele două carduri de lucru (owner), și
     LĂȚIMEA E CEA A DESIGNULUI: 267px ficși, nu o fracțiune
     (`scanexpert-Centrala-2/index.html:419`, `1fr 1fr 267px`). Cu `0.72fr` rândul
     din dreapta creștea odată cu fereastra și lua din cele două carduri de lucru,
     deci pe un ecran lat cardurile ieșeau mai înguste decât în prototip; o coloană
     fixă păstrează amândouă cerințele deodată. */
  grid-template-columns: 1fr 1fr 267px;
  grid-template-rows: minmax(0, 1fr);
  gap: var(--se-space-16);
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}
@media (max-width: 1150px) {
  .workspace-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  /* Pe o coloană, „umple pagina" nu mai are sens: fiecare card primește o
     înălțime rezonabilă și pagina derulează. */
  .workspace-grid > .stack > .card-outer {
    min-height: 260px;
  }
  .workspace-grid .stt-card {
    min-height: 320px;
  }
}
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-16);
  min-height: 0;
}
.stack > .card-outer.fill {
  flex: 1 1 auto;
}
.linii-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--se-space-16);
  align-items: start;
}

/* Tastatura. Cifra e mono, literele rămân dedesubt — recepția încă dictează
   după ele. */
.dialpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--se-space-8);
  margin-bottom: var(--se-space-16);
}
.dialpad button {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--se-color-text-title);
  transition:
    transform 0.05s,
    background 0.15s;
}
.dialpad button:hover {
  background: var(--se-color-bg-console);
}
.dialpad button:active {
  transform: scale(0.97);
}
.dialpad button b {
  font-family: var(--mono);
  font-size: var(--se-type-titlelgreg-size);
  line-height: var(--se-type-titlelgreg-line);
  font-weight: var(--se-type-bodymed-weight);
}
.dialpad button small {
  font-family: var(--mono);
  font-size: var(--se-type-microreg-size);
  line-height: 1;
  color: var(--se-color-text-muted);
  letter-spacing: 0.1em;
  min-height: 12px;
}

/* Liniile softphone-ului. Chenarul poartă starea apelului — singurul loc unde
   culoarea are voie să iasă în față: verde vorbește, roz sună. */
/* Plafon pe lista de linii: cu patru apeluri deschise ar împinge singură cardul
   peste tot restul coloanei, iar tastatura ar ieși din ecran. */
.lines {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  min-height: 0;
  max-height: 320px;
  overflow-y: auto;
}
.line {
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-left: 3px solid var(--se-color-border-strong);
  border-radius: var(--se-radius-md);
  padding: 10px var(--se-space-12);
}
.line.active {
  border-left-color: var(--se-color-status-success);
}
.line.ringing {
  border-left-color: var(--se-color-accent-pink);
}
.line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
}
.line-peer {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-captionmed-size);
  line-height: var(--se-type-captionmed-line);
  font-weight: var(--se-type-captionmed-weight);
  color: var(--se-color-text-title);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-peer.named {
  font-family: var(--se-font-family);
  font-size: var(--se-type-bodymed-size);
}
.line-meta {
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  color: var(--se-color-text-muted);
  white-space: nowrap;
}
.line-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
  margin-top: 4px;
}
.line-sub small {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  color: var(--se-color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-ctrls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--se-space-8);
}
.line-ctrls:empty {
  display: none;
}
.line-xfer {
  display: flex;
  gap: 6px;
  margin-top: var(--se-space-8);
  width: 100%;
}
.line-xfer input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px var(--se-space-12);
  min-height: 32px;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  font-size: var(--se-type-captionreg-size);
}

/* ---- Fișa pacientului (cardul din tablou) --------------------------------- */
.fisa-name {
  font-size: var(--se-type-titlelgsb-size);
  line-height: var(--se-type-titlelgsb-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.fisa-sub {
  font-size: var(--se-type-bodylgmed-size);
  line-height: var(--se-type-bodylgmed-line);
  font-weight: 400;
  color: var(--se-color-text-description);
  font-variant-numeric: tabular-nums;
}
.fisa-age {
  margin-top: var(--se-space-12);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
}
.fisa-warn {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  margin-bottom: 10px;
}
.fisa-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
  padding: 9px 0;
  border-top: 1px solid var(--se-color-border-default);
}
.fisa-match-row:first-of-type {
  border-top: none;
}
.fisa-programare {
  margin-top: var(--se-space-14);
  padding: var(--se-space-12);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-lg);
}
.fisa-programare-tip {
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
  margin-bottom: var(--se-space-8);
}
.fisa-programare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  margin-bottom: 4px;
}
.fisa-programare-row > span:first-child {
  color: var(--se-color-text-description);
}
.fisa-programare-row > span:last-child {
  color: var(--se-color-text-title);
  font-weight: var(--se-type-captionmed-weight);
}
.fisa-programare-actions {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin-top: 10px;
}
.fisa-primary-btn {
  flex: 1;
}
.empty-state {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--se-space-16);
  padding: var(--se-space-12) 4px;
}
.empty-state img {
  width: 77px;
  height: 80px;
}
.empty-state h3 {
  font-size: var(--se-type-bodymed-size);
  line-height: var(--se-type-bodymed-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.empty-state p {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-description);
  margin-top: 4px;
}
.fisa-empty-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.none-caller-illustration {
  position: relative;
  width: 105px;
  height: 120px;
  margin: 0 auto;
}
.none-illustration-main {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 101px;
  height: 101px;
}
.none-illustration-badge {
  position: absolute;
  left: 35px;
  top: 81px;
  width: 37px;
  height: 37px;
}
.fisa-actions {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-16);
  width: 100%;
}
.fisa-actions .btn-primary,
.fisa-actions .btn-secondary {
  margin-top: 0;
}

/* Fără căutare în fișe („customer_lookup” lipsă sau oprit pe server — adică fără
   bază de date) dispare tot ce depinde de ea: coloana panoului de acțiuni din
   tablou (#workspaceActionColumn — banda de identitate și formularul citesc fișele;
   partials/page-workspace.html), secțiunea Pacient din rail și scurtătura către ea.
   Nu ascunse pe jumătate: o secțiune oferită care răspunde „niciun rezultat” la
   orice se citește ca o defecțiune, iar consola trebuie să arate exact cum arăta
   înainte ca fișele să existe. Grila trece pe DOUĂ coloane odată cu ea. */
/* Cele trei pagini adăugate pentru paritatea cu handover-ul (Listă de așteptare,
   Medici trimițători, Notificări) citesc TOATE baza noastră și nimic altceva,
   deci fără ea nu au ce arăta — și dispar din rail pe același argument, nu pe
   unul nou. `switchPage` le refuză și el, ca un `data-goto` rămas într-un card
   să nu ducă pe o pagină care nu se poate umple. */
body.no-client #workspaceActionColumn,
body.no-client .nav-item[data-page="pacient"],
body.no-client .nav-item[data-page="lista-asteptare"],
body.no-client .nav-item[data-page="medici"],
body.no-client .nav-item[data-page="notificari"],
body.no-client [data-goto="pacient"] {
  display: none;
}
body.no-client .workspace-grid {
  grid-template-columns: 1.3fr 1fr;
}

/* ---- Transcrierea live ---------------------------------------------------- */
/* Cardul Conversație se desenează ÎNTOTDEAUNA (prototipul v2): fără
   transcriere configurată, starea goală spune de ce — un card care dispare se
   citește ca o consolă stricată. (.no-stt rămâne pe <body> pentru comutator.) */
/* Cardul Conversație umple coloana lui; dialogul derulează înăuntru. Plafonul
   de 42% era al benzii de sub tablou și a murit cu ea. */
.stt-card {
  min-height: 0;
}
.stt-card #sttList {
  flex: 1 1 auto;
  min-height: 0;
}
.stt-text {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  flex: 1 1 auto;
}
.stt-drafts-sub {
  margin: var(--se-space-8) 0 4px;
}
/* Dialogul ca bule — sincronizat cu Figma (2026-08, Centrala-2): bula
   apelantului a trecut de pe roz pe GRI, avatarul lui pe navy plin, iar bula
   recepției pe alb cu bordură. Clasele rămân agent/caller, canalele reale ale
   consolei. Fiecare replică e UN BLOC (.t-message): bula și legenda ei animate
   împreună — separate arătau sacadat, și exact asta a corectat prototipul. */
.t-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--se-space-16);
}
/* Ritmul și curba din sistemul de mișcare (tokenii --motion-* din capul acestui
   fișier): ease-out puternic — replica pornește iute și se așază. */
.t-appear {
  animation: t-line-in var(--motion-dur-base) var(--motion-ease-out);
}
@keyframes t-line-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.t-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.t-row.agent {
  flex-direction: row-reverse;
}
.t-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-avatar .ph {
  width: 20px;
  height: 20px;
}
.t-row.agent .t-avatar {
  background: var(--se-color-bg-surface);
  color: var(--se-color-primary-60);
  border: 1px solid var(--se-color-border-default);
}
.t-row.caller .t-avatar {
  background: var(--se-color-primary-60);
  color: var(--se-color-text-on-dark);
}
.t-bubble {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  padding: 10px var(--se-space-12);
  max-width: 80%;
  min-width: 0;
  flex: 0 1 auto;
  overflow-wrap: anywhere;
}
.t-row.agent .t-bubble {
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
  border: 1px solid var(--se-color-border-default);
  border-radius: 16px 4px 16px 16px;
}
.t-row.caller .t-bubble {
  background: var(--se-color-primary-10);
  color: var(--se-color-text-title);
  border: 1px solid var(--se-color-primary-30);
  border-radius: 4px 16px 16px 16px;
}
.t-caption {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-muted);
}
/* 40px = avatarul de 32 + golul de 8 — se schimbă împreună cu avatarul. */
.t-caption.agent {
  text-align: right;
  margin-right: 40px;
}
.t-caption.caller {
  margin-left: 40px;
}
.t-caption .at {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
/* Controlul per-apel de pe cardul Conversație (stt-control.js): starea scrisă
   lângă buton. `.mini` pune display:inline-flex, care ar bate atributul
   [hidden] — aceeași capcană ca `.card-outer[hidden]` (styles-tables.css) —
   deci regula de ascundere e scrisă pe nume. */
.stt-call-state {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.stt-call-state[hidden],
.section-tools .mini[hidden] {
  display: none;
}
/* Bordura de sub titlul „Conversație" apare NUMAI după derulare — pe o
   conversație scurtă cardul stă fără linie, ca în Figma. */
.stt-card .section-header {
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.stt-card.scrolled .section-header {
  border-bottom-color: var(--se-color-border-default);
}
/* Pista scrollbar-ului din Figma așteaptă tokenul bătut în repo-ul de design
   (DESIGN-05 poartă hexul); până atunci rămâne scrollbar-ul subțire al consolei. */
/* Legenda vie: ce se aude ACUM, nefinalizat. Se rescrie singură și nu se
   salvează nicăieri, deci nu are voie să se citească la fel de sigur ca o
   frază care nu se mai schimbă. */
.stt-partial {
  flex: 0 0 auto;
  margin: 0;
  padding: var(--se-space-8);
  min-height: 24px;
  font-style: italic;
  color: var(--se-color-text-muted);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  border-top: 1px dashed var(--se-color-border-default);
}
.stt-partial:empty {
  display: none;
}
/* Rândul „completarea automată nu răspunde": galbenul de AȘTEPTARE, niciodată
   roșul de eroare — nu s-a stricat nimic din ce a făcut operatorul și nu are ce
   repara. Discret, o singură linie, deasupra propunerilor; `hidden` cât nu are
   ce spune (transcript-render.js). */
.stt-extract-note {
  flex: 0 0 auto;
  margin: 0 0 var(--se-space-8);
  padding: 6px var(--se-space-8);
  border-radius: var(--se-radius-sm);
  background: var(--se-color-status-warning-bg);
  color: var(--se-color-status-warning);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}
/* Propunerea în chenarul .intent-actions al prototipului: roz-pal cu contur
   punctat, în banda transcrierii. Conținutul rămâne al consolei — câmpuri,
   încredere, dovadă, blocaj — fiindcă propunerile vin din extractoarele reale,
   nu dintr-un scenariu. */
.draft {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--se-space-12);
  margin-bottom: var(--se-space-8);
  background: var(--se-color-secondary-20);
  border: 1px dashed var(--se-color-accent-pink);
  border-radius: var(--se-radius-lg);
}
.draft-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--se-space-8);
}
.draft-kind {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--se-color-text-title);
}
.draft-fields {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.draft-field {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-title);
  font-variant-numeric: tabular-nums;
}
.draft-field span {
  color: var(--se-color-text-muted);
}
.draft-evidence {
  font-style: italic;
  color: var(--se-color-text-description);
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-captionreg-line);
  border-left: 2px solid var(--se-color-border-strong);
  padding-left: var(--se-space-8);
  overflow-wrap: anywhere;
}
/* De ce nu se poate salva încă. Un buton stins fără explicație se citește ca o
   defecțiune; propoziția e ce-l face o stare a sistemului. */
.draft-blocked {
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-status-warning);
}
.draft-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
/* Rândul compact al fișei/programării (H): cardul lor de formular din stivă
   poartă câmpurile și proveniența, deci banda arată doar auditul pe UN rând —
   fel, „aplicat automat", încredere, Renunță; dovada stă în bula data-tip. */
.draft-line {
  flex-direction: row;
  align-items: center;
  gap: var(--se-space-8);
  padding: var(--se-space-8) var(--se-space-12);
}
.draft-line .draft-kind {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Reapelarea apelurilor ratate -----------------------------------------
   Fără funcția asta pe server panoul nu există, la fel ca fișele și transcrierea:
   un card gol de „Apeluri ratate” s-ar citi ca „niciun apel ratat”, adică exact
   pe dos. */
body.no-callback #panelCallback {
  display: none;
}

/* Numărătoarea inversă: cartonaș alb ca orice altă suprafață de aici, ridicat de
   umbra sistemului, cu muchia navy a acțiunii pe stânga. Nu e o eroare și nu e
   colorată ca una — e consola care spune ce urmează să facă și lasă timp să fie
   oprită. Sus și la mijloc fiindcă acolo se uită cineva după ce a închis un apel;
   toastul are talpa ecranului și cele două nu se calcă. */
.callback-banner {
  position: fixed;
  top: var(--se-space-12);
  left: 50%;
  transform: translateX(-50%);
  z-index: 480;
  display: flex;
  align-items: center;
  gap: var(--se-space-16);
  width: max-content;
  max-width: min(760px, calc(100vw - 2 * var(--se-space-16)));
  padding: var(--se-space-12) var(--se-space-16);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-left: 3px solid var(--se-color-primary-60);
  border-radius: var(--se-radius-lg);
  box-shadow: var(--shadow-float);
}
.callback-banner[hidden] {
  display: none;
}
.cb-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cb-line {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-title);
  overflow-wrap: anywhere;
}
/* „apelare automată în 7s” nu se rupe niciodată: secundele lăsate singure pe
   rândul următor sunt exact cifra pentru care se uită cineva la banner. Numele și
   numărul de dinaintea ei au voie să treacă pe rândul al doilea. */
.cb-tail {
  white-space: nowrap;
}
/* Secundele sunt cifra care se schimbă sub ochi: mono și tabular, ca să nu-și
   miște vecinii la fiecare tic. */
.cb-left {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-primary-60);
}
.cb-sub {
  font-size: var(--se-type-microreg-size);
  line-height: var(--se-type-microreg-line);
  color: var(--se-color-text-muted);
}
.cb-sub:empty {
  display: none;
}
.cb-acts {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .callback-banner {
    flex-direction: column;
    align-items: stretch;
  }
  .cb-acts {
    justify-content: flex-end;
  }
}

/* ---- Ecranele corpului panoului de acțiuni (identify.js) -----------------------
   Deciziile deschise de dispoziția apelului cu fișa confirmată: „pentru
   dumneavoastră?", programarea activă, anularea, rezultatele, ridicarea.
   Vocabularul de rânduri (.row-item) și insignele (.badge) vin din components. */
.ident-step {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
}
.ident-center {
  text-align: center;
}
.ident-center-block {
  align-items: center;
  text-align: center;
}
.ident-ask {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  color: var(--se-color-text-secondary);
  text-align: center;
  margin: var(--se-space-8) 0 var(--se-space-4);
}
.ident-pills {
  display: flex;
  justify-content: center;
  gap: var(--se-space-8);
}
.ident-pills.wrap {
  flex-wrap: wrap;
}
.ident-hint {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  text-align: center;
}
.ident-gap {
  margin-top: var(--se-space-8);
}
/* „‹ Înapoi la rezultate" al ecranelor de rezultate/ridicare (identify-results.js):
   pe toată lățimea pasului și centrat. E forma pe care butonul-verigă o avea în
   BAZĂ, unde se lipea de fiecare folosire în rând; aici e a ecranului care o cere
   — singurul din consolă — deci o cere pe nume. */
.ident-step > .link-btn {
  display: block;
  width: 100%;
  text-align: center;
}
/* Lista programărilor viitoare (identify-steps.js renderExisting): rânduri
   .row-item apăsabile, cel ales cu chenarul și fondul accentuate. */
.ident-appts {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-4);
  width: 100%;
}
.ident-appts .row-item {
  margin-bottom: 0;
  width: 100%;
  text-align: left;
  font: inherit;
}
.ident-appts .row-item.is-selected {
  border-color: var(--se-color-primary-30);
  background: var(--se-color-badge-blue-100);
}
.ident-form-title {
  font-size: var(--se-type-h3sb-size);
  line-height: var(--se-type-h3sb-line);
  font-weight: var(--se-type-h3sb-weight);
  color: var(--se-color-text-title);
}
/* Butonul-verigă. O SINGURĂ declarație — până pe 2026-09-13 erau DOUĂ, iar cea
   de deasupra (`display:block; width:100%`) supraviețuia aici, fiindcă regula de
   jos nu rescria nici lățimea, nici afișarea. Într-un rând flex un element
   `display:inline` se BLOCHIFICĂ, deci `width:100%` devenea baza lui de flex și
   butonul mânca tot rândul: „Schimbă" lua 272px din banda de identitate, numele
   rămânea cu 43, iar telefonul de sub el se desena peste „Fișa" / „Rezultate".
   Forma lată și centrată nu e a butonului — e a ECRANELOR care o cer, deci stă
   pe ele (`.ident-step > .link-btn`, mai sus), niciodată aici. */
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-primary-60);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  align-self: center;
}
/* În rând, lângă text sau lângă alte butoane: cât îi trebuie, nu cât e rândul.
   `flex: 0 0 auto` NU se pune aici — `.wa-ident-name` (whatsapp-identity.js) e un
   `.link-btn.inline` care TREBUIE să se strângă ca să-și taie numele cu „…";
   rândul benzii îl ține pe al lui nemicșorat prin regula lui, nu prin asta. */
.link-btn.inline {
  display: inline;
}

/* Nota de auto-completare din transcript (RECEPTION-21): sugestia mașinii se
   spune pe față, lângă câmpul pe care l-a umplut. */
.ident-auto-note {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-primary-60);
}

/* ---- Modul de simulare (RECEPTION_DEMO, demo.js) ------------------------------
   Gardul vizual: cardul de scenarii + insigna cât timp unul rulează, și banda
   de conversație desenată chiar fără transcriere configurată — replicile
   jucate au nevoie de ea. */
.demo-card {
  border-style: dashed;
  border-color: var(--se-color-accent-pink);
}
/* Bara de simulare de deasupra tabloului: un rând subțire, fără chenar —
   insigna „SIMULARE ÎN CURS" e gardul vizual, nu conturul (owner, 2026-08-20). */
.demo-bar {
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--se-space-12);
  padding: var(--se-space-8) var(--se-space-16);
  margin-bottom: var(--se-space-16);
}
.demo-bar .demo-title {
  font-size: var(--se-type-bodysb-size);
  line-height: var(--se-type-bodysb-line);
  font-weight: var(--se-type-bodysb-weight);
  color: var(--se-color-text-title);
}
.demo-bar select {
  flex: 0 1 420px;
}
.demo-bar .switch {
  margin-left: auto;
}
.demo-flag {
  font-size: var(--se-type-micromed-size);
  line-height: var(--se-type-micromed-line);
  font-weight: var(--se-type-micromed-weight);
  padding: 2px 10px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-accent-pink);
  color: var(--se-color-text-on-dark);
  white-space: nowrap;
}
body.demo-live .stt-card {
  display: flex;
}

/* Starea goală a Conversației: cele două ilustrații suprapuse din prototip. */
.t-empty-illustration {
  position: relative;
  width: 119px;
  height: 120px;
}
.t-empty-back {
  position: absolute;
  inset: 2px 2px 3px 2px;
  width: auto;
  height: auto;
}
.t-empty-front {
  position: absolute;
  inset: 8px 5px 15px 5px;
  width: auto;
  height: auto;
}

/* Cardul de lucru al unei coloane umple coloana; ce nu încape derulează ÎN el.
   `:not(.card-accent)` NU e o scutire, e regula designului: „Acțiuni rapide" e un
   card COMPACT — titlu, linia „4 liberi · 3 în convorbire", iconița de trimitere
   și trei butoane, și se termină acolo (prototip :2853-2865, unde `.stack` e doar
   `flex-direction:column; gap:16px` și cardul își ia înălțimea lui). Cu `flex: 1 1 0`
   pe el se întindea pe toată coloana, iar asta strica DOUĂ lucruri, nu unul:
   cardul arăta de două ori mai înalt decât în design, și împingea `#inboxDock` la
   fundul coloanei — de unde `maxHeight` (inbox-window.js) mai găsea vreo sută de
   pixeli pentru un panou deschis, care atunci nu mai avea încotro să crească și
   scotea o bară de derulare peste starea lui goală. */
.workspace-grid > .stack > .card-outer:not(.card-accent) {
  flex: 1 1 0;
  min-height: 0;
}
.workspace-grid > .stack > .card-accent {
  flex: 0 0 auto;
}
/* Cele trei acțiuni rapide stau la 8px una de alta, ca-n prototip
   (`margin-bottom:8px` pe fiecare buton, :2863-2865). `.card-outer` e un flex fără
   `gap`, deci fără regula asta se lipeau una de alta. */
.card-accent > .btn-quiet.wide + .btn-quiet.wide {
  margin-top: var(--se-space-8);
}
.workspace-grid .card-inner.grow {
  max-height: none;
}

/* Ștampila „aplicat automat" a completării live (P2): propunerea a deschis sau
   a completat singură un formular; cardul rămâne suprafața de audit, iar
   „Renunță" golește câmpurile ei încă neatinse. */
.draft-applied {
  background: var(--se-color-badge-green-100);
  color: var(--se-color-badge-green-600);
}