/* ============================================================================
   melhorias.css — camada de correção de layout/UX/acessibilidade do painel
   Atendimento Elaine. Carregada DEPOIS do bundle, sobrescrevendo por token
   sempre que possível (a base é um design system Fibonacci já bem montado).

   Cada bloco cita o número do achado em MELHORIAS-UX.md.
   Evidência: auditoria automatizada em 360/480/768/1440px (CDP), 2026-08-06.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   [1..6] TIPOGRAFIA — a raiz de metade dos problemas
   --fs-caption estava em .7rem (11,2px) e aparecia em horário, badge, estado
   da linha e título do rail. Abaixo de 12,5px o texto fica ilegível em tela
   pequena e derruba o contraste efetivo (WCAG 1.4.4 / 1.4.3).
   -------------------------------------------------------------------------*/
:root {
  --fs-caption: .8125rem;   /* [1] 11,2px -> 13px */
  --fs-sm: .9rem;           /* [2] 13,6px -> 14,4px */
  --lh-normal: 1.55;        /* [3] respiro de leitura em blocos longos */

  /* [4..6] CONTRASTE — tons apagados demais sobre o trilho escuro e sobre o
     painel claro. Valores novos medidos para >= 4.5:1 em texto normal. */
  --c-text-soft: #52606d;   /* [4] era #667781 (3,2:1 no horário da conversa) */
  --c-text-mute: #a8b6c1;   /* [5] era #8696a0 (3,2:1 sobre o trilho escuro) */
  --c-unread: #1fbe5a;      /* [6] badge: fundo mais escuro p/ o número preto */

  /* [8] Alvo de toque mínimo (WCAG 2.2 – 2.5.8 / Material 48px). */
  --alvo-min: 44px;
}

/* [7] Trilho de médicos mais largo: 8rem truncava TODOS os nomes
   ("Dr. Vi...", "L'ATE..."). 11rem cabe nome real sem virar coluna gorda.
   ATENÇÃO: só a partir de 601px. Como esta folha carrega depois do bundle,
   um :root solto venceria até as regras de celular dele (que estreitam o
   trilho para 64px) e espremeria a conversa no telefone. */
@media (min-width: 901px) {
  :root { --w-rail: 11rem; }
}

/* [9] Contraste reforçado também no modo escuro do sistema. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-text-soft: #b3c0cc;
    --c-text-mute: #a8b6c1;
  }
}

/* ---------------------------------------------------------------------------
   [10..17] ALVOS DE TOQUE — Lei de Fitts / WCAG 2.5.8
   Medidos abaixo do mínimo: .doc-tab 32px, .btn 32px, .disc-btn 25px,
   .search 32px, .mobile-back 32px, textarea do composer 40px.
   -------------------------------------------------------------------------*/
.doc-tab {                                    /* [10] item de médico */
  min-height: var(--alvo-min);
  padding-block: var(--fib-2);
}
.rail .btn,                                    /* [11] Conectar / Sair */
.rail-add {
  min-height: var(--alvo-min);
}
.disc-btn {                                    /* [12] era 25px de altura */
  min-height: 36px;
  padding: var(--fib-2) var(--fib-3);
  font-size: var(--fs-sm);
}
.search,                                       /* [13] busca de conversa */
input.search {
  min-height: var(--alvo-min);
}
.composer textarea {                           /* [14] campo de mensagem */
  min-height: var(--alvo-min);
  font-size: 1rem;                             /* [15] evita zoom no iOS (<16px) */
  line-height: 1.45;
}
.mobile-back,                                  /* [16] voltar no celular */
.icon-btn {
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
}
.chat-item {                                   /* [17] linha da conversa */
  min-height: 60px;
}

/* ---------------------------------------------------------------------------
   [18..22] TRILHO DE MÉDICOS — reconhecimento em vez de memória (Nielsen #6)
   Em 360/480/768 o trilho virava só bolinhas coloridas: impossível saber
   qual médico está selecionado sem decorar a cor.
   -------------------------------------------------------------------------*/
.doc-name {                                    /* [18] nome em 2 linhas, sem "..." */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-title {                                  /* [19] título legível */
  font-size: var(--fs-caption);
  color: var(--c-text-mute);
  letter-spacing: .06em;
}
.doc-tab[aria-selected="true"],                /* [20] seleção não depende só de cor */
.doc-tab.active {
  background: var(--c-rail-active);
  border-left-width: 4px;
  border-left-color: var(--c-primary);
  font-weight: var(--fw-semibold);
}
.doc-state {                                   /* [21] estado da linha legível */
  font-size: var(--fs-caption);
  color: var(--c-text-mute);
}
.badge {                                       /* [22] contador de não lidas */
  min-width: 22px;
  height: 22px;
  font-size: var(--fs-caption);
  color: #04160c;
  background: var(--c-unread);
}

/* ---------------------------------------------------------------------------
   [23..27] CABEÇALHO DA CONVERSA — hierarquia e truncamento
   Em 768px o nome virava "Ana Paula Rib..." e o subtítulo ocupava 2 linhas
   com telefone + "via Dr. Fulano", empurrando a conversa para baixo.
   -------------------------------------------------------------------------*/
.thread-head {
  gap: var(--fib-2);
  padding-block: var(--fib-2);
  align-items: center;
}
.thread-head .name,                            /* [23] nome com prioridade */
.thread-title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  min-width: 0;
}
.thread-head .sub {                            /* [24] subtítulo em 1 linha só */
  font-size: var(--fs-sm);
  color: var(--c-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 600px) {
  .thread-head .sub { display: none; }         /* [25] no celular, nome basta */
  .thread-head .name,
  .thread-title { font-size: var(--fs-body); }
}
.pill,                                         /* [26] "online" com contraste real */
.thread-head .pill {
  font-size: var(--fs-caption);
  padding: var(--fib-1) var(--fib-2);
}
.thread-head .avatar { flex: 0 0 auto; }       /* [27] avatar não encolhe */

/* ---------------------------------------------------------------------------
   [28..31] BUG DE SOBREPOSIÇÃO — o chip de data "Hoje" renderizava POR CIMA
   da primeira mensagem em 360 e 768px (evidência nos screenshots).
   Causa: divisor sticky sem fundo próprio e sem espaço reservado.
   -------------------------------------------------------------------------*/
/* O .day-sep É o próprio chip (align-self:center, sticky). O bug era o
   z-index: var(--z-base) = 1, que perdia para as bolhas, somado a um fundo
   semitransparente com blur — daí o texto da mensagem aparecer por baixo. */
.day-sep {
  z-index: var(--z-sticky);                    /* [28] acima das bolhas */
  margin-block: var(--fib-5);                  /* [29] respiro que faltava */
  background: var(--c-panel);                  /* [30] fundo opaco = legível */
  color: var(--c-text-soft);
  box-shadow: var(--shadow-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (prefers-color-scheme: dark) {
  .day-sep { background: #202c33; }
}
.messages {
  padding-top: var(--fib-5);                   /* [31] 1ª mensagem não cola no topo */
  scroll-padding-top: var(--fib-13);
}

/* ---------------------------------------------------------------------------
   [32..36] BOLHAS E LEITURA
   -------------------------------------------------------------------------*/
.bubble {
  max-width: min(72ch, 78%);                   /* [32] linha legível (~66-75 car.) */
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;                     /* [33] link/telefone longo não estoura */
}
@media (max-width: 600px) {
  .bubble { max-width: 88%; }                  /* [34] aproveita a tela estreita */
}
.bubble .time,
.time {
  font-size: var(--fs-caption);                /* [35] era 9,92px (3,73:1) */
  color: var(--c-text-soft);
  opacity: 1;
}
.bubble.out .time { color: #3d6b4f; }          /* [36] contraste sobre a bolha verde */

/* ---------------------------------------------------------------------------
   [37..40] LISTA DE CONVERSAS
   -------------------------------------------------------------------------*/
.chat-time {
  font-size: var(--fs-caption);                /* [37] era 10,88px / 3,21:1 */
  color: var(--c-text-soft);
}
.chat-phone {
  font-size: var(--fs-caption);                /* [38] telefone é dado secundário */
  color: var(--c-text-soft);
}
.chat-name {
  font-size: var(--fs-body);                   /* [39] o nome é o que se procura */
  font-weight: var(--fw-semibold);
}
.chat-item:hover { background: var(--c-panel-2); }  /* [40] alvo evidente */

/* ---------------------------------------------------------------------------
   [41..44] COMPOSER (escrever mensagem)
   Em 360px o campo tinha 96px de largura útil — cabia "Digite".
   -------------------------------------------------------------------------*/
.composer { gap: var(--fib-2); padding: var(--fib-2) var(--fib-3); }
.composer textarea { flex: 1 1 auto; min-width: 0; }        /* [41] ocupa o vão */
@media (max-width: 600px) {
  .composer { padding: var(--fib-2); }
  .composer .icon-btn { flex: 0 0 auto; }                    /* [42] anexo não some */

  /* Com a conversa aberta no celular, o trilho de médicos comia 128px dos
     360 disponíveis e sobrava ~100px para escrever. Some enquanto se conversa;
     o botão ← devolve a lista (e o trilho) — mesmo modelo do WhatsApp. */
  .app.show-thread { grid-template-columns: 1fr; }
  .app.show-thread .rail { display: none; }
  .app.show-thread .thread { grid-column: 1; }
}
.composer .send,                                             /* [43] enviar destacado */
.composer button[type="submit"] {
  min-width: var(--alvo-min);
  min-height: var(--alvo-min);
}
.composer textarea::placeholder { color: var(--c-text-soft); } /* [44] dica legível */

/* ---------------------------------------------------------------------------
   [45..48] FOCO, MOVIMENTO E ESTADOS — WCAG 2.4.7 / 2.3.3
   A auditoria detectou regra removendo outline em :focus.
   -------------------------------------------------------------------------*/
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--c-primary);         /* [45] foco sempre visível */
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.skip-link {                                   /* [46] pular direto para a conversa */
  position: absolute;
  left: -9999px;
  z-index: var(--z-tooltip);
  padding: var(--fib-2) var(--fib-3);
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-md);
}
.skip-link:focus { left: var(--fib-3); top: var(--fib-3); }
@media (prefers-reduced-motion: reduce) {      /* [47] respeita quem enjoa de animação */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
[aria-busy="true"] { cursor: progress; }       /* [48] feedback de sistema (Nielsen #1) */

/* ---------------------------------------------------------------------------
   [49..50] LAYOUT EM TELA GRANDE E TABLET
   Em 1440px+ a conversa esticava até 1000px (linha longa demais);
   em 768px as 3 colunas ficavam espremidas (thread com ~300px).
   -------------------------------------------------------------------------*/
/* [49] Em telas largas a coluna de mensagens esticava até ~1000px. Limitamos a
   COLUNA (padding no contêiner), nunca os balões: centralizar cada balão
   destruiria o esquerda/direita que diferencia recebido de enviado. */
@media (min-width: 1440px) {
  .messages {
    padding-inline: max(var(--fib-5), calc((100% - 68rem) / 2));
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  :root { --w-rail: 4.25rem; --w-chatlist: 16rem; }  /* [50] devolve espaço à conversa */
  .doc-name { display: none; }
  .doc-tab { justify-content: center; padding-inline: var(--fib-1); }
  .rail-title { text-align: center; font-size: 0; }
  .rail-title::after {
    content: "👩‍⚕️";
    font-size: 1rem;
  }
  /* refino de [11]/[12]: no tablet os botões do trilho ficavam 43px de largura */
  .rail .btn, .rail-add { min-width: var(--alvo-min); }
  .disc-btn { min-height: var(--alvo-min); }
}

/* ---------------------------------------------------------------------------
   REFINOS medidos na 2ª rodada da auditoria (contraste que sobrou).
   Superfícies com o verde da marca (#10a37f) não sustentam texto branco:
   3,2:1 — abaixo do mínimo de 4,5:1. Trocamos por um verde profundo.
   -------------------------------------------------------------------------*/
:root { --c-primary-forte: #075e54; }          /* branco sobre este: ~7:1 */

.badge {                                        /* refino de [22] */
  background: var(--c-primary-forte);
  color: #fff;
}
.skip-link {                                    /* refino de [46] */
  background: var(--c-primary-forte);
  color: #fff;
  min-height: var(--alvo-min);
  display: inline-flex;
  align-items: center;
}
.composer .icon-btn.send,                       /* refino de [43]: botão enviar */
.composer button[type="submit"],
.composer .send {
  background: var(--c-primary-forte);
  color: #fff;
}

/* Horário dentro da bolha enviada: no tema escuro a bolha é verde-escura,
   então o tom claro de [36] invertia o problema (1,58:1). Escopo por tema. */
@media (prefers-color-scheme: light) {
  .bubble.out .time { color: #2f5c43; }
}
@media (prefers-color-scheme: dark) {
  .bubble.out .time,
  .bubble .time { color: #cfe9d8; }             /* claro sobre bolha escura */
  .pill { color: #7ee3c4; }                     /* era 4,32:1 */
  .badge { background: #1fbe5a; color: #04160c; }
}

/* Chip de data: a regra anterior mirava o filho; o texto está no próprio nó. */
.day-sep,
.day-divider {
  font-size: var(--fs-caption);                 /* refino de [30]: era 10,56px */
}

/* ---------------------------------------------------------------------------
   3ª rodada: o tema escuro do bundle redefine estas regras com especificidade
   maior que a nossa. Repetimos a classe (.badge.badge) para vencer sem
   recorrer a !important, que quebraria futuras manutenções.
   -------------------------------------------------------------------------*/
.badge.badge {
  background: #075e54;
  color: #fff;
}
@media (prefers-color-scheme: light) {
  .badge.badge { background: #0a7d6b; color: #fff; }
}
.pill.pill.online { color: #0b6b3a; background: #25d36640; }
@media (prefers-color-scheme: dark) {
  .pill.pill.online { color: #8ff0c8; background: #25d3661f; }
}
.composer .icon-btn.icon-btn,                   /* botão enviar (➤) */
.sender .icon-btn.icon-btn {
  background: #075e54;
  color: #fff;
}
.disc-btn.disc-btn {                            /* 37px -> alvo mínimo em toda largura */
  min-height: var(--alvo-min);
  font-size: var(--fs-sm);
}