/* Cardul SMS al docului (planul 25, valul 4, #3308; mockup A „Canal în dock", decizia
   `mockup-desk-sms-channel`). Rândurile sunt bulele docului (`.inbox-item.is-bubble`,
   styles-whatsapp.css) iar cutia e `.inbox-reply` (styles-inbox-rows.css): aici stă doar
   ce e al SMS-ului — sigla, linia zilei, contorul, previzualizarea, starea.
   Foaie proprie, legată după cele ale celorlalte canale. Nimic nou în culori: doar
   tokenii kitului, ca în rest. */

/* `.inbox-card { display: flex }` bate atributul `hidden`, ca la `.card-outer[hidden]`:
   cardul oprit de comutator trebuie să dispară de tot. */
.inbox-card[hidden] {
  display: none;
}

.sms-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--se-color-primary-60);
}
.sms-logo .ph {
  width: 32px;
  height: 32px;
}

/* Textul unui singur ochi pentru cititorul de ecran: eticheta cutiei. */
.sms-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sms-row {
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
}
.sms-day {
  align-self: center;
  padding: 2px 0;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
}
.sms-more,
.sms-loading {
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--se-space-8);
  margin: 0;
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
}

/* Un flux automat nu are text de arătat: felul lui, înclinat, ca „text care lipsește". */
.sms-kind {
  font-style: italic;
  color: var(--se-color-text-description);
}
.sms-flow {
  font-weight: 500;
  color: var(--se-color-text-title);
}
.sms-msg .inbox-item-meta {
  flex-wrap: wrap;
}
.sms-msg .at {
  white-space: nowrap;
}
.sms-msg .r-main {
  overflow-wrap: anywhere;
}

.sms-count {
  padding: 0 var(--se-space-4);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-muted);
  white-space: nowrap;
}
.sms-count.over {
  color: var(--se-color-status-error);
  font-weight: 600;
}

.sms-prev {
  min-height: 1.2em;
  margin: 0;
  font-size: var(--se-type-captionreg-size);
  line-height: var(--se-type-captionreg-line);
  color: var(--se-color-text-description);
  overflow-wrap: anywhere;
}

/* Starea trimiterii: gol când n-are ce spune; o propoziție cu o siglă când are. */
.sms-st {
  display: flex;
  align-items: center;
  gap: var(--se-space-4);
  min-height: 1.4em;
  margin: 0;
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-description);
}
.sms-st:empty {
  display: none;
}
.sms-st .ph {
  width: 16px;
  height: 16px;
  flex: none;
}
.sms-st.is-ok {
  color: var(--se-color-status-success);
}
.sms-st.is-err {
  color: var(--se-color-status-error);
}

/* Fișa are mai multe numere: câte un buton pe număr, fără numărul însuși. */
.sms-choose {
  display: flex;
  flex-wrap: wrap;
  gap: var(--se-space-4);
}
.sms-choose[hidden] {
  display: none;
}

#smsSend {
  padding: 7px var(--se-space-16);
}
#smsSend:hover:not(:disabled) {
  background: var(--se-color-status-success-bg);
}
.inbox-reply-row:focus-within #smsSend:not(:disabled) {
  background: var(--se-color-status-success);
  color: var(--se-color-text-on-dark);
}
.inbox-reply-row input[aria-invalid="true"] {
  color: var(--se-color-status-error);
}
.inbox-reply-row input:disabled {
  cursor: not-allowed;
}

/* Alegerea pacientului (#3423, mockup A): câmpul de căutare sus în card, lista de
   rezultate care se așază peste cronologie și pastila pacientului ales. Doar tokenii kitului. */
.sms-find {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--se-space-8);
  padding: var(--se-space-12) var(--se-space-12) var(--se-space-8);
  flex: 0 0 auto;
}
/* `input.sms-find-q`: `input[type="search"]` (styles-components.css) pesează 0,1,1 și ar lăsa câmpul
   monospațiat; căutarea e mai ales după NUME, deci scrisul e cel al consolei. */
input.sms-find-q {
  font-family: var(--se-font-family);
  letter-spacing: normal;
  text-overflow: ellipsis;
  width: 100%;
  min-height: 36px;
  padding: 0 var(--se-space-12);
  border: 1px solid var(--se-color-border-divider);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-title);
}
input.sms-find-q:focus,
input.sms-find-q:focus-visible {
  outline: none;
  border-color: var(--se-color-primary-60);
  box-shadow: 0 0 0 3px var(--se-color-focus-ring);
}
/* Lista stă ÎN fluxul câmpului, nu peste card: un strat absolut era tăiat de card (pe cardul
   mic se vedeau 4 rezultate din 5). Înălțime maximă și derulare proprie; împinge cronologia. */
/* Lista deschisă ia locul cronologiei (doar cât e deschisă): primește tot ce a rămas din
   panou și derulează în interior, oricât de mic e cardul. */
.sms-find:has(> .sms-find-list:not([hidden])) {
  flex: 1 1 0;
  min-height: 0;
}
.sms-find:has(> .sms-find-list:not([hidden])) ~ .inbox-body,
.sms-find:has(> .sms-find-list:not([hidden])) ~ .sms-compose {
  display: none;
}
.sms-find-list {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding: var(--se-space-4);
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
  border-radius: var(--se-radius-lg);
  background: var(--se-color-bg-surface);
  box-shadow: var(--shadow-float);
}
.sms-find-list[hidden] {
  display: none;
}
.sms-find-hit,
.sms-find-note {
  display: flex;
  justify-content: space-between;
  gap: var(--se-space-8);
  padding: var(--se-space-8) var(--se-space-12);
  border-radius: var(--se-radius-md);
  font-size: var(--se-type-bodyreg-size);
}
.sms-find-hit {
  cursor: pointer;
}
.sms-find-hit[aria-selected="true"],
.sms-find-hit:hover {
  background: var(--se-color-bg-console);
  box-shadow: inset 2px 0 var(--se-color-primary-60);
}
.sms-find-name {
  font-weight: 500;
  color: var(--se-color-text-title);
  overflow-wrap: anywhere;
}
.sms-find-meta {
  font-family: var(--mono);
  font-size: var(--se-type-captionreg-size);
  color: var(--se-color-text-muted);
  white-space: nowrap;
}
.sms-find-note {
  color: var(--se-color-text-description);
}

/* Pacientul ales: pastila cu numele și ✕, care întoarce cardul la fișa deschisă. */
.sms-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--se-space-8);
  max-width: 100%;
  padding: 3px 6px 3px var(--se-space-12);
  border-radius: var(--se-radius-pill);
  background: var(--se-color-accent-pink-light);
  color: var(--se-color-text-title);
}
.sms-chip[hidden] {
  display: none;
}
.sms-chip-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sms-chip > button {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--se-color-bg-surface);
  color: var(--se-color-text-description);
  line-height: 1;
  cursor: pointer;
}
.sms-chip > button:hover {
  color: var(--se-color-status-error);
}