/* ============================================================================
   WHATSAPP: CINE SCRIE, ȘI CEREREA BILETULUI (W10 · W11 · W12)

   Tăiat ca fișier propriu, nu lipit în styles-inbox.css, pentru plafonul de 600 de
   rânduri — care e și motivul pentru care fiecare foaie de aici a fost tăiată din
   predecesoarea ei. Legată în index.html IMEDIAT DUPĂ styles-inbox.css: ordinea
   legăturilor E ordinea cascadei (CLAUDE.md, „Serving invariants"), iar banda de
   identitate stă peste regulile docului, unde îi e locul.

   Ține DOUĂ jumătăți, și asta e deliberat: banda de identitate a firului
   (whatsapp-identity.js) și apăsarea „Cere biletul pe WhatsApp" din blocul biletului
   (booking-bilet.js). A doua e o regulă de FORMULAR, deci ar fi mers în
   styles-booking.css — care e deja peste plafon. Clasele ei sunt noi și nu se ciocnesc
   cu nimic, deci locul lor în cascadă nu schimbă nimic; ce le ține împreună e
   funcția, care e una singură.
   ============================================================================ */

/* ---- banda de identitate a firului deschis ---------------------------------- */
/* Frate al corpului, nu rând în el (overlays.html spune de ce), deci se poartă ca
   `.inbox-reply`: nu se întinde, nu derulează, și își desparte zona cu o linie —
   numai că a ei e DEDESUBT, fiindcă banda stă deasupra mesajelor. */
.inbox-identity {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  padding: var(--se-space-8) var(--se-space-12);
  border-bottom: 1px solid var(--se-color-border-divider);
  flex: 0 0 auto;
}
.inbox-identity[hidden] {
  display: none;
}

.wa-ident-row,
.wa-ident-line,
.wa-ident-suggest {
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  min-width: 0;
}
.wa-ident-row .r-main,
.wa-ident-line .r-main,
.wa-ident-suggest .r-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-ident-suggest {
  justify-content: space-between;
}
.wa-ident-suggest .r-main {
  flex: 1 1 auto;
}

/* Bifa fișei confirmate e aceeași ca a benzii de identitate a apelului
   (`.ident-strip-check`) — o fișă legată arată la fel oriunde e desenată. */
.wa-ident-check {
  color: var(--se-color-input-success);
  font-weight: 700;
  flex: 0 0 auto;
}
.wa-ident-name {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wa-ident-row .link-btn:last-child,
.wa-ident-line .link-btn:last-child {
  margin-left: auto;
  flex: 0 0 auto;
}

/* „Fișă necunoscută" nu e o eroare — e o întrebare. Culoare de atenție, niciodată
   de eroare: un fir de familie (BR-22) e starea NORMALĂ a unui telefon împărțit. */
.wa-ident-line.is-unknown .r-main {
  color: var(--se-color-badge-orange-600);
  font-weight: 600;
}
.wa-ident-line .r-sub,
.wa-ident-hit .r-sub {
  color: var(--se-color-text-description);
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}

/* Un rând ales cu o apăsare — o fișă găsită prin căutare, o programare pe care se
   pune documentul. Același obiect în amândouă locurile, fiindcă e aceeași întrebare:
   „care dintre astea?" */
.wa-ident-hit {
  display: flex;
  align-items: baseline;
  gap: var(--se-space-8);
  width: 100%;
  text-align: left;
  padding: 7px var(--se-space-8);
  background: var(--se-color-bg-surface);
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  cursor: pointer;
}
.wa-ident-hit:hover {
  border-color: var(--se-color-primary-30);
}
.wa-ident-hit .r-main {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wa-ident-search {
  display: flex;
  gap: var(--se-space-8);
}
.wa-ident-q {
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- „Cere biletul pe WhatsApp" (W12), în blocul biletului ------------------- */
/* Apăsarea stă sub propoziția BR-08, adică exact acolo unde se citește că biletul
   lipsește. `is-proposed` e evidențierea când transcriptul a auzit canalul: un inel,
   nu o culoare de buton — butonul rămâne același, doar se vede că e actul propus.
   Culoare de atenție, niciodată de eroare, ca la lampa extractorului. */
.bilet-ask {
  align-self: flex-start;
}
.bilet-ask.is-proposed {
  box-shadow: 0 0 0 2px var(--se-color-badge-orange-600);
}
.bilet-ask-note {
  margin-top: 4px;
}

/* ---- W13: biletul de pe WhatsApp în blocul biletului, și previzualizarea ------- */
/* Oferta: rândul sosit pe numărul apelului cât cardul e în lucru (booking-bilet.js
   `offerHTML`). Chenar de ATENȚIE — același inel ca `.bilet-ask.is-proposed` —
   niciodată de eroare: e o propunere a mașinii, omul decide cu o apăsare. */
.bilet-wa-offer {
  display: flex;
  align-items: flex-start;
  gap: var(--se-space-12);
  padding: var(--se-space-12);
  border: 1px solid var(--se-color-badge-orange-600);
  border-radius: var(--se-radius-md);
  background: var(--se-color-bg-surface);
}
.bilet-wa-offer-body {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-4);
  min-width: 0;
  flex: 1 1 auto;
}
.bilet-wa-offer-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-8);
  margin-top: var(--se-space-4);
}

/* Miniatura: pătrat fix, ca rândul să nu sară când poza vine lată sau înaltă
   (aceeași regulă ca `.inbox-item-photo`). E un BUTON când fotografia se poate
   deschide, un chenar cu agrafă cât fișierul încă se aduce (`is-pending`) sau când
   rândul e un document fără previzualizare. */
.bilet-wa-thumb {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--se-color-border-default);
  border-radius: var(--se-radius-md);
  background: var(--se-color-bg-surface);
  cursor: zoom-in;
}
.bilet-wa-thumb.is-pending,
span.bilet-wa-thumb {
  cursor: default;
}
.bilet-wa-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bilet-wa-thumb .ph {
  width: var(--se-size-icon-functional);
  height: var(--se-size-icon-functional);
  color: var(--se-color-text-description);
}
/* Cardul acceptat poartă miniatura în locul agrafei (booking-bilet.js `cardHTML`
   `thumb`), la mărimea unui rând de card. */
.bilet-card.whatsapp .bilet-wa-thumb {
  width: 40px;
  height: 40px;
}

/* Miniatura din rândul docului (inbox-render.js): un buton fără ramă, fiindcă
   fotografia E butonul. Inelul de focus e al consolei, pe culoarea primară. */
.inbox-item-photo-btn {
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  flex: 0 0 auto;
  cursor: zoom-in;
  border-radius: var(--se-radius-sm);
}
.inbox-item-photo-btn:focus-visible {
  outline: 2px solid var(--se-color-primary-50);
  outline-offset: 2px;
}

/* Previzualizarea (`#waPreview`, overlays.html): fundalul e al `.overlay`
   (styles-overlays.css), cardul e imaginea la cât încape pe ecran, butonul de
   închidere stă peste colțul ei. */
.wa-preview-card {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}
.wa-preview-img {
  display: block;
  max-width: 90vw;
  max-height: 88dvh;
  object-fit: contain;
  border-radius: var(--se-radius-lg);
  background: var(--se-color-bg-surface);
  box-shadow: var(--shadow-float);
}
.wa-preview-close {
  position: absolute;
  top: var(--se-space-8);
  right: var(--se-space-8);
}

/* ---- W14: rândul citirii biletului (booking-bilet-read.js) ------------------------
   Sub cardurile de bilet, lângă frații lui de W12/W13 de mai sus (același bloc al
   formularului; styles-booking.css e peste plafon și nu mai crește): ce se citește,
   ce a propus citirea, lampa modelului — galben (W15 `name-mismatch`: verifică
   înainte să salvezi) — sau, roșu, refuzul ușii și avertismentul CNP. Tonul îl
   decide stt-health.js planBiletNote. Fără rol/aria-live: e o stare, nu o alarmă
   (ca #sttExtractNote). */
.bilet-read {
  margin: 0;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
}
.bilet-read.is-info {
  color: var(--se-color-text-description);
}
.bilet-read.is-caution {
  color: var(--se-color-status-warning);
}
.bilet-read.is-warn {
  color: var(--se-color-status-error);
}
.bilet-read[hidden] {
  display: none;
}