/* DOCUL DE MESAJE — CE E ÎNĂUNTRUL CARDULUI: firele, rândurile și cutia de răspuns.

   Tăiat din styles-inbox.css pe plafonul de 600 de rânduri, pe cusătura pe care
   fișierul o avea deja: dincolo rămâne FEREASTRA (stiva, cardul, antetul,
   mânerele, locul rezervat, pulsul de sosire), aici vine CE SE VEDE ÎNĂUNTRUL ei.
   Legată în index.html IMEDIAT DUPĂ styles-inbox.css și ÎNAINTEA lui
   styles-whatsapp.css — ordinea legăturilor E ordinea cascadei (CLAUDE.md), iar
   `.inbox-card.expanded .inbox-body:has(> .inbox-empty)` a rămas dincolo, deci
   regulile stării goale trebuie să vină după ea.

   RÂNDURILE SUNT FĂRĂ CHENAR de pe 2026-09-20 (cererea proprietarului). Un fir e
   un rând dintr-o listă, nu un card: douăzeci de dreptunghiuri desenate unul sub
   altul se citesc ca un tabel, iar docul are 434px lățime, unde fiecare linie de
   1px mănâncă din numele pacientului. Separarea o fac acum umplutura de la hover
   și spațiul dintre rânduri; STAREA rămâne purtată de două lucruri, niciodată
   numai de culoare (scanexpert-docs /docs/the-reception-console/rules-a-redesign-must-not-undo,
   „Colour still carries state") — bara de accent ȘI îngroșarea, punctul ȘI
   eticheta lui. Chenarul supraviețuiește exact acolo unde CHIAR e o stare, nu o
   ramă: rândul orfan, punctat dinadins.

   MIȘCAREA VINE DIN TOKENII `--motion-*` (definiți o singură dată, în
   styles-workspace.css) și e de fiecare dată SCURTĂ ȘI O SINGURĂ DATĂ — aceeași
   regulă ca a pulsului cardului: o cerere de atenție care se repetă încetează să
   mai fie una, deci punctul de necitit nu pulsează la nesfârșit, ci înflorește o
   dată, la sosire. Tot ce mișcă se oprește în blocul `prefers-reduced-motion` de
   la sfârșitul fișierului. */

/* ---- intrarea unui rând ---------------------------------------------------- */
/* `reconcileRows` (inbox-render.js) construiește un nod NOU când semnătura
   rândului s-a schimbat, deci animația asta pornește exact când rândul chiar are
   ceva nou de spus — la sosirea unui fir, la un mesaj care mută firul în capul
   listei, la o bifă care se schimbă. Un rând neatins nu e redesenat, deci nu
   clipește. */
@keyframes inbox-row-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Halo-ul punctului de necitit: o singură înflorire, la sosire. */
@keyframes inbox-dot-bloom {
  from {
    box-shadow: 0 0 0 0 rgba(239, 66, 110, 0.45);
  }
  to {
    box-shadow: 0 0 0 7px rgba(239, 66, 110, 0);
  }
}

/* NICIO CONVERSAȚIE PE CANAL. Aceeași ilustrație și aceeași compoziție ca restul
   stărilor goale din consolă — de-aia poartă `.empty-state`, vocabularul care
   desenează deja golul din Conversație și din fișă, în loc de un al doilea fel de
   stare goală pe același ecran.

   NU ESTE ACELAȘI LUCRU CU LINIA DIN ANTET, ȘI CELE DOUĂ TREBUIE SĂ RĂMÂNĂ DOUĂ.
   „0 mesaje noi" din antet spune că n-a scris nimeni; textul de aici e al
   designului, cuvânt cu cuvânt, și e despre conversații. Canalul Aplicație își
   aduce propoziția lui (app-accounts.js, prin `emptyHTML(text)`) — aceeași
   ilustrație, alt subiect: conturile din aplicație, nu mesajele. Vezi CLAUDE.md,
   „Docul de mesaje: canalele goale rămân". */
.inbox-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--se-space-16);
  background: var(--se-color-bg-console);
}
.inbox-empty p {
  max-width: 280px;
}

/* ---- ecranul din spate: firele, adică NUMERELE care au scris ---------------- */
/* Rândul e un buton fără ramă și fără fundal propriu: pe cardul alb, ce-l desparte
   de vecin e spațiul, iar ce-l scoate în față e umplutura de sub mouse. Bara de
   accent din stânga (`::before`) crește din nimic la hover și stă întreagă cât
   firul e necitit — e a doua purtătoare a stării, lângă îngroșare. */
.inbox-thread {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--se-space-8);
  width: 100%;
  padding: 11px var(--se-space-12);
  background: none;
  border: 0;
  border-radius: var(--se-radius-md);
  text-align: left;
  flex: 0 0 auto;
  animation: inbox-row-in var(--motion-dur-base) var(--motion-ease-out) both;
  transition:
    background var(--motion-dur-fast) var(--motion-ease-out),
    transform var(--motion-dur-fast) var(--motion-ease-out);
}
.inbox-thread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 3px;
  height: 0;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-accent-pink);
  transform: translateY(-50%);
  transition:
    height var(--motion-dur-base) var(--motion-ease-out),
    opacity var(--motion-dur-fast) var(--motion-ease-out);
  opacity: 0;
}
.inbox-thread:hover {
  background: var(--se-color-fill-hover);
  transform: translateX(2px);
}
.inbox-thread:hover::before {
  height: 18px;
  opacity: 0.5;
}
/* Necitit poartă un punct, o îngroșare ȘI bara — culoarea nu e niciodată singurul
   purtător (scanexpert-docs /docs/the-reception-console/rules-a-redesign-must-not-undo,
   „Colour still carries state"). Fundalul lui e treapta de consolă, nu cea de
   hover, ca un fir necitit să se vadă ca atare și cu mouse-ul în altă parte. */
.inbox-thread.is-unread {
  background: var(--se-color-bg-console);
}
.inbox-thread.is-unread::before {
  height: 22px;
  opacity: 1;
}
.inbox-thread.is-unread .r-main {
  font-weight: var(--se-type-bodysb-weight);
}
.inbox-thread-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Amândouă liniile se taie cu „…". Cât rândul avea chenar, marginea lui arăta
   unde se termină locul; fără el, o previzualizare lungă curgea pe sub punctul de
   necitit și se oprea unde tăia cardul, adică nicăieri anume. */
.inbox-thread .r-main,
.inbox-thread .r-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-thread .r-main {
  font-size: var(--se-type-bodyreg-size);
  line-height: var(--se-type-bodyreg-line);
  font-weight: var(--se-type-bodymed-weight);
  color: var(--se-color-text-title);
}
.inbox-thread .r-sub {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.inbox-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-accent-pink);
  flex: 0 0 auto;
  animation: inbox-dot-bloom var(--motion-dur-slow) var(--motion-ease-out) both;
}

/* ---- rândul unui mesaj ------------------------------------------------------ */
/* Fără chenar, ca firul: o umplutură discretă îl desparte de cardul alb. Bulele
   firului WhatsApp îl rescriu întreg în styles-whatsapp.css (`.is-bubble`). */
.inbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px var(--se-space-12);
  background: var(--se-color-bg-console);
  border: 0;
  border-radius: var(--se-radius-md);
  flex: 0 0 auto;
  animation: inbox-row-in var(--motion-dur-base) var(--motion-ease-out) both;
  transition: background var(--motion-dur-fast) var(--motion-ease-out);
}
.inbox-item[data-open-customer] {
  cursor: pointer;
}
.inbox-item[data-open-customer]:hover {
  background: var(--se-color-fill-neutral);
}
.inbox-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.inbox-item-ic {
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  color: var(--se-color-primary-60);
  flex: 0 0 auto;
}
/* O sosire fără număr nu se poate deschide: regula firului spune că fără număr
   n-avem cui atașa conversația. Se vede retrasă, nu ascunsă — și ăsta e singurul
   loc din listă unde a rămas un chenar, fiindcă punctat el E starea, nu o ramă. */
.inbox-item.is-orphan {
  background: none;
  border: 1px dashed var(--se-color-border-default);
}
.inbox-item.is-orphan .inbox-item-ic {
  color: var(--se-color-text-muted);
}

/* O fotografie STAGED (W5, whatsapp.js) — locul iconiței de agrafă, doar când
   mesajul chiar poartă una. `object-fit: cover` peste o dimensiune fixă, ca
   rândul să nu sară în înălțime când o poză vine lată sau înaltă. */
.inbox-item-photo {
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  border-radius: var(--se-radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
}

/* Un mesaj vocal (W7) — în locul aceleiași agrafe, dar un player nu e o iconiță:
   îi trebuie lățime ca să aibă butoane, așa că ia rândul, nu casetă pătrată.
   `max-width` ca docul redimensionat îngust să nu-l împingă afară. */
.inbox-item-audio {
  height: var(--se-size-icon-functional);
  max-width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}

/* Starea unui mesaj TRIMIS (W9, whatsapp-events-plan.js `failure`), după ora lui:
   „…" în coadă, „✓" plecat, „✓✓" livrat, „✓✓" colorat citit. Culoarea nu e
   singurul purtător — fiecare bifă are eticheta ei (title/aria-label). */
.inbox-item-status {
  margin-left: var(--se-space-8);
  color: var(--se-color-text-muted);
  white-space: nowrap;
  transition: color var(--motion-dur-base) var(--motion-ease-out);
}
.inbox-item-status[data-status="read"] {
  color: var(--se-color-primary-60);
}
/* Un mesaj netrimis: propoziția lui Meta și, când pagina mai are ce trimite,
   butonul „Reîncearcă" lângă ea, pe aceeași linie cât încape. */
.inbox-item-failed {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--se-space-8);
}
/* Un fișier ȘTERS la cererea pacientului (decizia proprietarului 2026-11-09):
   propoziția stă în locul atașamentului, sub textul mesajului, mută — nu agrafa,
   care ar promite un fișier. Aceeași treaptă și culoare ca ora din bulă. */
.inbox-item-erased {
  margin-top: 2px;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-muted);
}

/* ---- cutia de răspuns ------------------------------------------------------- */
/* Răspunsul (W5, whatsapp.js) — ÎN AFARA #inboxBody-whatsapp dinadins, vezi
   inbox-stack.html: acela e adus la zi rând cu rând (inbox-render.js), iar cutia
   nu e un rând. Arătată/ascunsă numai de whatsapp.js, cât un fir WhatsApp e
   deschis, și e SINGURA cutie de scris a docului — de-aia cele două butoane ale
   ei se numesc aici pe id (`#waReplyAttach`, `#waReplySend`, inbox-stack.html) în
   loc să-și primească fiecare o clasă care n-ar avea un al doilea purtător.

   Rândul ÎNTREG e câmpul: o pastilă umplută care ține agrafa, textul și
   „Trimite", fără niciun chenar. Inelul de focus e al PASTILEI, nu al
   `<input>`-ului dinăuntru (de-aia inputul și-l stinge pe-al lui) — altfel s-ar
   desena două contururi, unul într-altul. Cât se scrie, „Trimite" se aprinde:
   afordanța e a stării, nu o culoare permanentă. */
.inbox-reply {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  padding: var(--se-space-12);
  border-top: 1px solid var(--se-color-border-divider);
  flex: 0 0 auto;
}
.inbox-reply[hidden] {
  display: none;
}
.inbox-reply-status {
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  min-height: 1em;
}
.inbox-reply-row {
  display: flex;
  align-items: center;
  gap: var(--se-space-4);
  padding: 4px;
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-console);
  transition:
    background var(--motion-dur-base) var(--motion-ease-out),
    box-shadow var(--motion-dur-base) var(--motion-ease-out);
}
.inbox-reply-row:focus-within {
  background: var(--se-color-bg-surface);
  box-shadow:
    0 0 0 2px var(--se-color-primary-60),
    0 0 0 6px var(--se-color-focus-ring);
}
.inbox-reply-row input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 36px;
  padding: 0 var(--se-space-8);
  border: 0;
  background: none;
  color: var(--se-color-text-title);
}
.inbox-reply-row input:focus,
.inbox-reply-row input:focus-visible {
  outline: none;
  box-shadow: none;
}
.inbox-reply-row > .mini {
  background: none;
  border-color: transparent;
  transition:
    background var(--motion-dur-fast) var(--motion-ease-out),
    color var(--motion-dur-fast) var(--motion-ease-out),
    transform var(--motion-dur-fast) var(--motion-ease-spring);
}
.inbox-reply-row > .mini:active {
  transform: scale(0.94);
}
#waReplyAttach {
  width: 36px;
  height: 36px;
  padding: 0;
  flex: 0 0 auto;
  color: var(--se-color-text-muted);
}
#waReplyAttach .ph {
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  transition: transform var(--motion-dur-base) var(--motion-ease-spring);
}
#waReplyAttach:hover {
  background: var(--se-color-fill-neutral);
  color: var(--se-color-primary-60);
}
#waReplyAttach:hover .ph {
  transform: rotate(-12deg);
}
#waReplySend {
  padding: 7px var(--se-space-16);
}
#waReplySend:hover {
  background: var(--se-color-status-success-bg);
}
.inbox-reply-row:focus-within #waReplySend {
  background: var(--se-color-status-success);
  color: var(--se-color-text-on-dark);
}

/* ---- cardul ScanExpert: CONTURILE DIN APLICAȚIE ------------------------------ */
/* NU MAI E AICI: rândurile, capul listei cu numărătorile și căutarea cardului
   stau în styles-app-accounts.css, legat imediat după foaia asta. Cardul a crescut
   de la un apelant la o tură întreagă (2026-09-26) și ar fi trecut foaia de
   plafonul de 600 de rânduri; cusătura e canalul, ca la styles-whatsapp.css. */

/* ---- Lat și Mare: lista și firul alăturate --------------------------------
   Sub antet stă despărțitura: lista de conversații în stânga (`#inboxList-whatsapp`,
   ascunsă pe Mic) și panoul cu banda de identitate, corpul și cutia de răspuns.
   Strânsă, nu există. Linia dintre antet și conținut e a ei, nu a corpului: pe Lat
   corpul începe la mijlocul panoului. */
.inbox-split {
  display: none;
}
.inbox-card.expanded .inbox-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  border-top: 1px solid var(--se-color-border-divider);
}
.inbox-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}
.inbox-list {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  flex: 0 0 clamp(240px, 36%, 340px);
  min-height: 0;
  overflow-y: auto;
  padding: var(--se-space-12);
  border-right: 1px solid var(--se-color-border-default);
}
.inbox-list[hidden] {
  display: none;
}
/* Firul deschis, marcat în listă. Umplutura roz deschis e a selecției în tot kitul;
   bara de accent rămâne a necititului. */
.inbox-thread.is-selected {
  background: var(--se-color-accent-pink-light);
}
/* Panoul din dreapta cât niciun fir nu e deschis. */
.inbox-pick {
  margin: auto;
  padding: var(--se-space-24);
  text-align: center;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}

/* Mișcarea e ornament peste o consolă care trebuie să rămână citibilă fără ea:
   rândurile apar, nu se târăsc, iar stările se pun instantaneu. */
@media (prefers-reduced-motion: reduce) {
  .inbox-thread,
  .inbox-item,
  .inbox-dot {
    animation: none;
  }
  .inbox-thread,
  .inbox-thread::before,
  .inbox-item,
  .inbox-item-status,
  .inbox-reply-row,
  .inbox-reply-row > .mini,
  #waReplyAttach .ph {
    transition: none;
  }
  .inbox-thread:hover {
    transform: none;
  }
}