/* ============================================================
   Seiva IA - interface de chat clinico (tela do assistente)
   ------------------------------------------------------------
   Substitui o bloco "Seiva IA - interface de chat" que vivia no fim
   de style.css (linhas ~766-865). Carregue DEPOIS de nutria-tokens.css:

     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='nutria-tokens.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='seiva-ia.css') }}">

   Regras da casa respeitadas aqui:
     - classes em portugues;
     - cor SEMPRE por token --nt-* (o unico literal com alfa e o realce
       dourado da dose, que precisa de transparencia e nao tem token);
     - tema claro e escuro vem de graca dos tokens;
     - nada aqui depende de JavaScript.
   ============================================================ */

/* ---------- 1. casca da tela ---------- */
.chat { display: flex; flex-direction: column; min-height: calc(100vh - 190px); max-width: 960px; }
.chat-cabeca { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.chat-cabeca h1 { margin-bottom: 4px; }
/* a marca da tela (com a estrela quando a IA esta disponivel — rebranding 2026-09-05) */
.chat-cabeca h1 .marca-ia { width: 28px; height: 28px; border-radius: 8px; vertical-align: -5px; margin-right: 8px; }
.chat-espera .estrela-ia { width: 16px; height: 16px; margin-right: 2px; }
.chat-cabeca > div { flex: 1 1 320px; min-width: 0; }
.chat-cabeca form { flex: 0 0 auto; }
.chat-cabeca .sub em { font-family: Spectral, Georgia, serif; font-style: italic; color: var(--nt-body); }

/* leitor de tela: rotulo que existe para a acessibilidade, invisivel na tela */
.sr-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* apoio recolhido (base de diretrizes + como funciona) — virou fila de pilulas */
.chat-apoio { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 16px 0 4px; }
.chat-apoio details { flex: 0 1 auto; }
.chat-apoio details[open] { flex-basis: 100%; }
.chat-apoio > details > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 13px; border: 1px solid var(--nt-line); border-radius: 20px;
  background: var(--nt-panel); font-size: 12px; font-weight: 700; color: var(--nt-brand-text);
}
.chat-apoio > details > summary::-webkit-details-marker { display: none; }
.chat-apoio > details > summary:hover { border-color: var(--nt-brand); }
.chat-apoio .lista-fichas { max-height: 260px; overflow-y: auto; }
.chat-apoio details[open] > summary { margin-bottom: 8px; }

/* ---------- 2. o fio da conversa ---------- */
.chat-fio { display: flex; flex-direction: column; gap: 22px; padding: 20px 0 22px; flex: 1 1 auto; }
.chat-fio .chat-aviso { align-self: stretch; margin: 0; }

/* --- pergunta: continua bolha (curta, marca onde voce perguntou) --- */
.bolha { max-width: 84%; padding: 12px 16px 13px; border: 1px solid var(--nt-line); border-radius: 16px; background: var(--nt-panel); }
.bolha .autor { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--nt-muted); margin-bottom: 5px; }
.bolha .texto { white-space: pre-wrap; font-size: 14px; line-height: 1.55; color: var(--nt-body); overflow-wrap: anywhere; }
.bolha-eu { align-self: flex-end; max-width: 74%; background: var(--nt-brand-soft); border-color: var(--nt-brand-soft-line); border-bottom-right-radius: 5px; }
.bolha-eu .autor { color: var(--nt-brand-deep); }
.bolha-eu .texto { color: var(--nt-brand-deep); font-weight: 600; }

/* caso anexado: chip com ponto verde + a palavra "anonimizado" (regra do sistema) */
.chat-caso {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 9px;
  padding: 4px 10px 5px; border: 1px solid var(--nt-brand-soft-line); border-radius: 20px;
  background: var(--nt-panel); font-size: 12px; font-weight: 700; color: var(--nt-brand-deep);
}
.chat-caso::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nt-brand); flex: none; }
.chat-caso .anonimo { font-weight: 600; color: var(--nt-muted); letter-spacing: .04em; }

/* ---------- 3. resposta: cartao de largura inteira (era .bolha-seiva) ---------- */
.cartao-resposta {
  background: var(--nt-panel); border: 1px solid var(--nt-line);
  border-left: 3px solid var(--nt-brand); border-radius: var(--nt-r-lg);
  box-shadow: var(--nt-shadow); padding: 16px 20px 14px;
}
.cartao-cabeca { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.cartao-cabeca .glifo { flex: none; width: 17px; height: 17px; }
/* a estrela depois de "Seiva IA": um pouco menor que o glifo e colada ao rotulo */
.cartao-cabeca .estrela-ia { width: 12px; height: 12px; margin-left: -3px; }
.cartao-resposta .autor {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--nt-muted);
}
.cartao-cabeca .selo-caso {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 20px;
  background: var(--nt-brand-soft); color: var(--nt-brand-deep); font-size: 12px; font-weight: 700;
}

/* ---------- 4. TIPOGRAFIA DO CORPO CLINICO (.resposta) ---------- */
.resposta { font-size: 14.5px; line-height: 1.68; color: var(--nt-body); text-wrap: pretty; overflow-wrap: anywhere; }
.resposta > *:first-child { margin-top: 0; }
.resposta > *:last-child { margin-bottom: 0; }
.resposta p { margin: 0 0 10px; }

/* o PRIMEIRO "## ..." da resposta vira destaque: e o que o medico le em 3s */
.resposta-curta {
  background: var(--nt-brand-soft); border: 1px solid var(--nt-brand-soft-line);
  border-radius: var(--nt-r); padding: 13px 16px 14px; margin: 0 0 6px;
}
.resposta-curta > .rotulo-curta {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nt-brand-deep); margin-bottom: 6px;
}
.resposta-curta p { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.6; color: var(--nt-ink); }
.resposta-curta p + p { margin-top: 8px; }
/* dentro do destaque a dose salta em dourado (nao em verde, para nao sumir no fundo verde) */
.resposta-curta .dose { font-weight: 800; background-image: linear-gradient(to top, rgba(225, 166, 63, .35) 0 42%, transparent 42%); }

/* titulos de secao seguintes ("## ...") */
.resp-secao {
  display: flex; align-items: center; gap: 11px; margin: 22px 0 11px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nt-brand-text);
}
.resp-secao > span { white-space: nowrap; }
.resp-secao::after { content: ""; flex: 1; height: 1px; background: var(--nt-line); }
/* "###" nao cria um 4o nivel: e uma linha forte dentro da secao */
.resp-subsecao { margin: 14px 0 7px; font-size: 13.5px; font-weight: 700; color: var(--nt-ink); }

/* enfase e doses: o numero precisa saltar */
.resposta strong { font-weight: 700; color: var(--nt-ink); }
.resposta em { font-family: Spectral, Georgia, serif; font-style: italic; }
.resposta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; color: var(--nt-brand-deep); background: var(--nt-panel2); padding: 1px 5px; border-radius: 5px; }
.dose {
  font-weight: 700; color: var(--nt-ink); font-variant-numeric: tabular-nums;
  background-image: linear-gradient(to top, var(--nt-brand-soft) 0 42%, transparent 42%);
  padding: 0 2px; border-radius: 2px;
}

/* citacao inline: curta, clicavel, leva ao trecho no rodape */
.citacao {
  font-size: 12px; font-weight: 700; color: var(--nt-brand-text); text-decoration: none;
  border-bottom: 1px dotted var(--nt-brand); white-space: nowrap; padding: 0 1px; border-radius: 3px;
}
.citacao:hover { background: var(--nt-brand-soft); color: var(--nt-brand-deep); }
/* sem ficha correspondente na lista: continua citacao, mas nao e link */
span.citacao { border-bottom-style: dotted; cursor: default; }

/* listas */
/* Marcador POSICIONADO, nao flex: o <li> precisa aceitar texto solto + uma <ul>
   aninhada como irmaos (e o que o renderizador produz). Com display:flex no li,
   o texto e a sub-lista virariam duas colunas lado a lado. */
.resp-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.resp-lista > li { position: relative; padding-left: 16px; }
.resp-lista > li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  border-radius: 1px; background: var(--nt-brand); transform: rotate(45deg);
}
.resp-lista .resp-sublista { margin: 7px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.resp-lista .resp-sublista > li {
  position: relative; padding-left: 19px; font-size: 13.5px; color: var(--nt-muted);
}
.resp-lista .resp-sublista > li::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 9px; height: 1px;
  background: var(--nt-line); border-radius: 0; transform: none;
}
.resp-lista .resp-sublista strong { color: var(--nt-body); }

/* tabela: rola DENTRO do cartao; o corpo da pagina nunca rola na horizontal */
.rolo-tabela {
  overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0;
  border: 1px solid var(--nt-line); border-radius: var(--nt-r); background: var(--nt-panel2);
  margin: 0;
}
.tabela-resposta { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 13.5px; line-height: 1.5; }
.tabela-resposta th {
  text-align: left; padding: 10px 13px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--nt-muted);
  border-bottom: 1px solid var(--nt-line); white-space: nowrap; background: var(--nt-panel2);
}
.tabela-resposta td { padding: 11px 13px; border-bottom: 1px solid var(--nt-line2); color: var(--nt-body); vertical-align: top; }
.tabela-resposta tr:last-child td { border-bottom: 0; }
.tabela-resposta td:first-child { color: var(--nt-ink); font-weight: 700; white-space: nowrap; background: var(--nt-panel2); }
/* numero nunca quebra no meio ("20 kcal/kg" some se quebrar); prosa pode quebrar */
.tabela-resposta td strong, .tabela-resposta .dose {
  font-variant-numeric: tabular-nums; background-image: none; white-space: nowrap;
}
.tabela-resposta tr.linha-atencao td { background: var(--nt-gold-soft); }

/* ressalva do modelo ("faltam dados do caso") */
.resposta-ressalva {
  margin: 18px 0 0; padding: 11px 14px; border-left: 3px solid var(--nt-gold);
  border-radius: 0 var(--nt-r) var(--nt-r) 0; background: var(--nt-gold-soft);
  font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--nt-alert);
}

/* ---------- 5. faixa de metadados: fontes + acoes ---------- */
.meta-turno {
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 11px; border-top: 1px dashed var(--nt-line);
}
.fontes-turno { flex: 1 1 240px; min-width: 0; }
.fontes-turno[open] { flex-basis: 100%; }
.fontes-turno > summary {
  cursor: pointer; list-style: none; user-select: none; width: fit-content;
  font-size: 12px; font-weight: 700; color: var(--nt-brand-text);
}
.fontes-turno > summary::-webkit-details-marker { display: none; }
.fontes-turno > summary::before { content: "\25B8  "; }
.fontes-turno[open] > summary { margin-bottom: 11px; }
.fontes-turno[open] > summary::before { content: "\25BE  "; }
.lista-fontes { display: flex; flex-direction: column; gap: 9px; }
.fonte-item {
  border: 1px solid var(--nt-line); border-left: 3px solid var(--nt-line);
  border-radius: var(--nt-r); background: var(--nt-panel2); padding: 11px 13px;
  scroll-margin-top: 90px;
}
.fonte-rotulo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.fonte-rotulo strong { font-size: 12.5px; font-weight: 700; color: var(--nt-ink); }
.fonte-rotulo .sub { font-size: 12px; font-weight: 600; color: var(--nt-muted); }
.fonte-item .esboco {
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: Spectral, Georgia, serif; font-size: 12.5px; line-height: 1.6; color: var(--nt-body);
}
/* --- "O que saiu da maquina": a prova do envio, por resposta (2026-08-30) ---
   Reusa .fontes-turno (mesmo triangulo, mesmo peso discreto) para nao inventar
   um segundo tipo de "abre e fecha" na mesma faixa. So o encaixe muda: este
   fechado ocupa a largura do proprio rotulo, para caber ao lado das fontes. */
.saiu-da-maquina { flex: 0 1 auto; }
.saiu-itens { display: flex; flex-direction: column; gap: 11px; }
.saiu-item {
  border: 1px solid var(--nt-line); border-left: 3px solid var(--nt-brand-soft-line);
  border-radius: var(--nt-r); background: var(--nt-panel2); padding: 11px 13px;
}
.saiu-rotulo {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--nt-ink);
}
.saiu-rotulo .selo-anonimo {
  padding: 2px 8px; border-radius: 20px; background: var(--nt-ok-soft);
  color: var(--nt-ok); font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.saiu-item .esboco { color: var(--nt-body); }
.saiu-nota { margin: 0; font-size: 12px; font-weight: 600; color: var(--nt-muted); }

/* fonte alcancada por um marcador inline (o JS marca; :target cobre o sem-JS) */
.fonte-item.fonte-alvo, .fonte-item:target {
  border-color: var(--nt-brand-soft-line); border-left-color: var(--nt-brand);
  background: var(--nt-brand-soft);
}
.fonte-item.fonte-alvo .fonte-rotulo .sub, .fonte-item:target .fonte-rotulo .sub { color: var(--nt-brand-deep); }
/* acoes por resposta: discretas, aparecem no hover, 44px no celular */
.acoes-turno { display: flex; align-items: center; gap: 2px; flex: none; }
.acao {
  border: 1px solid transparent; border-radius: 9px; background: transparent;
  color: var(--nt-muted); font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 10px; cursor: pointer; box-shadow: none; transition: color .15s, background .15s, border-color .15s;
}
.acao:hover { color: var(--nt-brand-text); background: var(--nt-hover); border-color: var(--nt-line); transform: none; filter: none; }
.acao[aria-pressed="true"] { color: var(--nt-ok); border-color: var(--nt-ok-soft); background: var(--nt-ok-soft); }
/* "Usar na evolucao" e um <form> de verdade (funciona sem JavaScript). Sem
   isto ele viraria um item flex com margem de formulario e o botao de dentro
   nao herdaria a largura no celular. */
.acao-usar { display: flex; margin: 0; padding: 0; border: 0; background: none; }
/* Confirmacao depois de guardar: fica NA PROPRIA resposta, com o caminho de
   volta ate a internacao — ninguem e tirado do meio da conversa. */
.acao-guardada {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid var(--nt-ok-soft); border-radius: 9px;
  background: var(--nt-ok-soft);
  font-size: 12px; font-weight: 600; color: var(--nt-brand-deep);
}
.acao-guardada a { color: var(--nt-brand-text); }
.acao-guardada.acao-recusada {
  color: var(--nt-body); background: var(--nt-hover); border-color: var(--nt-line);
}

/* ---------- 6. estado vazio: abertura ---------- */
.chat-vazio[hidden] { display: none; }
.chat-abertura { padding: 30px 0 8px; }
.abertura-topo { display: flex; align-items: flex-start; gap: 16px; max-width: 640px; }
.abertura-glifo {
  flex: none; width: 44px; height: 44px; border-radius: 13px; background: var(--nt-brand-soft);
  border: 1px solid var(--nt-brand-soft-line); display: grid; place-items: center;
}
.abertura-ola {
  margin: 0 0 8px; font-family: Spectral, Georgia, serif; font-size: 27px; font-weight: 400;
  line-height: 1.2; letter-spacing: -.01em; color: var(--nt-ink);
}
.abertura-ola em { font-style: italic; color: var(--nt-brand-deep); }
/* a estrela depois de "Seiva" cresce com a fonte da saudacao (27 px -> ~17 px);
   "Seiva ✦." anda junto — sem isso o ponto final caia sozinho na linha de baixo
   no celular */
.abertura-ola .nome-seiva { white-space: nowrap; }
.abertura-ola .estrela-ia { width: .62em; height: .62em; vertical-align: -.04em; margin-left: .06em; }
.abertura-texto { margin: 0; max-width: 52ch; font-size: 14.5px; line-height: 1.65; color: var(--nt-body); text-wrap: pretty; }
.abertura-rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--nt-muted); margin: 30px 0 12px;
}
.sugestoes-chat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sugestoes-chat .sugestao {
  text-align: left; display: flex; flex-direction: column; gap: 7px; min-height: 44px;
  padding: 15px 16px; border: 1px solid var(--nt-line); border-radius: 14px;
  background: var(--nt-panel); cursor: pointer; font-family: inherit; box-shadow: none;
}
.sugestoes-chat .sugestao:hover {
  background: var(--nt-hover); border-color: var(--nt-brand); filter: none; transform: none;
}
.sugestao .area { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--nt-brand-text); }
.sugestao .pergunta { font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--nt-ink); }
.chat-base {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 16px; border-top: 1px solid var(--nt-line);
  font-size: 12px; color: var(--nt-muted);
}
.chat-base strong { font-weight: 600; color: var(--nt-muted); }
.chat-base .risca { width: 1px; height: 13px; background: var(--nt-line); }

/* ---------- 7. espera: "Seiva esta pensando" ---------- */
.cartao-espera { align-self: stretch; }
.chat-espera { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.chat-espera .rotulo { font-size: 12.5px; font-weight: 700; color: var(--nt-brand-text); }
.chat-espera .cronometro { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--nt-muted); font-variant-numeric: tabular-nums; }
.nt-pontos { display: inline-flex; gap: 4px; align-items: center; color: var(--nt-brand-text); }
.nt-pontos i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; animation: ntpontinhos 1.2s ease-in-out infinite; }
.nt-pontos i:nth-child(2) { animation-delay: .15s; }
.nt-pontos i:nth-child(3) { animation-delay: .3s; }
@keyframes ntpontinhos { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.espera-passos { margin: 0 0 15px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.espera-passos .passo { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: var(--nt-muted); }
.espera-passos .passo::before {
  content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--nt-line);
}
/* EXCECAO ao piso tipografico do S6: glifo unico (✓) dentro do circulo de
   15 px do passo — icone, nao texto. O rotulo do passo, ao lado, tem 12,5. */
.espera-passos .passo-feito::before {
  content: "\2713"; border-color: transparent; background: var(--nt-ok-soft); color: var(--nt-ok);
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}
.espera-passos .passo-agora { font-weight: 700; color: var(--nt-ink); }
/* A lista cresce conforme o servidor avisa cada etapa (NDJSON): num plantao
   longo ela nao pode empurrar o campo de perguntar para fora da tela. */
.espera-passos { max-height: 160px; overflow-y: auto; }
.espera-passos .passo-agora::before {
  border-color: var(--nt-brand);
  background: radial-gradient(circle, var(--nt-brand) 0 3px, transparent 3px);
  animation: ntpulso 1.4s ease-in-out infinite;
}
@keyframes ntpulso { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* A resposta CHEGANDO: texto cru, com um cursor piscando no fim para deixar
   claro que ainda esta escrevendo. Vira o HTML do servidor no evento 'fim'. */
.resposta-escrevendo::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--nt-brand); animation: ntpulso 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .resposta-escrevendo::after { animation: none; }
}

.esqueleto { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.esqueleto span {
  height: 9px; border-radius: 5px;
  background: linear-gradient(90deg, var(--nt-line2) 0%, var(--nt-hover) 40%, var(--nt-line2) 80%);
  background-size: 320px 100%; animation: ntfolha 1.9s linear infinite;
}
.esqueleto span:nth-child(1) { width: 96%; }
.esqueleto span:nth-child(2) { width: 88%; animation-delay: .2s; }
.esqueleto span:nth-child(3) { width: 62%; animation-delay: .4s; }
@keyframes ntfolha { 0% { background-position: -320px 0; } 100% { background-position: 520px 0; } }

.espera-rodape {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px dashed var(--nt-line);
  font-size: 12px; line-height: 1.5; color: var(--nt-muted);
}
.espera-rodape .cancelar {
  flex: none; min-height: 34px; padding: 0 12px; border: 1px solid var(--nt-line);
  border-radius: 9px; background: transparent; color: var(--nt-muted);
  font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.espera-rodape .cancelar:hover { border-color: var(--nt-risk); color: var(--nt-risk); background: transparent; filter: none; transform: none; }

/* ---------- 8. sem base carregada (nao e bolha, e aviso honesto) ---------- */
.resposta-sem-base {
  align-self: stretch; background: var(--nt-gold-soft); border: 1px solid var(--nt-gold);
  border-left: 3px solid var(--nt-gold); border-radius: var(--nt-r-lg);
  padding: 15px 18px 16px; box-shadow: none;
}
.resposta-sem-base .cartao-cabeca { margin-bottom: 9px; }
.resposta-sem-base .autor { color: var(--nt-alert); }
.selo-atencao {
  flex: none; width: 17px; height: 17px; border-radius: 50%; background: var(--nt-gold);
  color: var(--nt-gold-soft); display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.resposta-sem-base .texto-sem-base {
  margin: 0 0 12px; font-size: 14.5px; font-weight: 500; line-height: 1.6;
  color: var(--nt-alert); text-wrap: pretty;
}
.resposta-sem-base .rotulo-saidas {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nt-alert); margin-bottom: 9px;
}
.saidas-sem-base { display: flex; flex-wrap: wrap; gap: 8px; }
.saidas-sem-base .sugestao, .saidas-sem-base a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px;
  border: 1px solid var(--nt-gold); border-radius: 20px; background: transparent;
  color: var(--nt-alert); font-family: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; box-shadow: none; text-decoration: none;
}
.saidas-sem-base .sugestao:hover, .saidas-sem-base a:hover { background: var(--nt-alert-soft); border-color: var(--nt-gold); filter: brightness(.98); transform: none; }
.resposta-sem-base .nota { margin: 13px 0 0; font-size: 12px; line-height: 1.5; color: var(--nt-alert); }

/* ---------- 9. erro em PT-BR, com a pergunta preservada ---------- */
.chat-erro {
  align-self: stretch; background: var(--nt-risk-soft); border: 1px solid var(--nt-risk);
  border-radius: var(--nt-r-lg); padding: 15px 18px 16px;
}
.chat-erro .cartao-cabeca { margin-bottom: 9px; }
.chat-erro .autor, .chat-erro .titulo { color: var(--nt-risk); }
.chat-erro .selo-atencao { background: var(--nt-risk); color: var(--nt-panel); }
.chat-erro .titulo { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.chat-erro .explica { margin: 0 0 13px; font-size: 13.5px; line-height: 1.6; color: var(--nt-risk); text-wrap: pretty; }
.chat-erro .explica a { color: var(--nt-risk); font-weight: 700; }
.pergunta-preservada {
  border: 1px solid var(--nt-line); border-radius: var(--nt-r); background: var(--nt-panel);
  padding: 11px 13px; margin-bottom: 13px;
}
.pergunta-preservada .rotulo {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nt-muted); margin-bottom: 5px;
}
.pergunta-preservada .texto { font-size: 13.5px; font-weight: 500; line-height: 1.55; color: var(--nt-ink); white-space: pre-wrap; }
.chat-erro .acoes-erro { display: flex; gap: 9px; flex-wrap: wrap; }
.chat-erro .acoes-erro button, .chat-erro .acoes-erro .botao { min-height: 40px; padding: 0 15px; }

/* ---------- 10. IA desligada / sem chave ---------- */
/* "Apagado" = sem chave de IA configurada. Ate 2026-09-04 isto era
   `opacity:.55`, e a opacidade derrubava a saudacao a 2,5:1 no claro e o
   texto de abertura a 3,77 no escuro — ilegivel justamente para quem ainda
   nao configurou a chave e precisa LER o que a tela diz. O tom final vem do
   token (regra da casa desde o P0-1b): quem apaga e a COR, nunca a
   opacidade. O que a tela esta desligada quem explica e a caixa
   .chat-desligado logo abaixo. */
.chat-apagado { pointer-events: none; }
.chat-apagado .abertura-ola,
.chat-apagado .abertura-ola em,
.chat-apagado .abertura-texto { color: var(--nt-muted); }
.chat-apagado .abertura-glifo { background: var(--nt-hover); border-color: var(--nt-line); }
.chat-desligado {
  margin-top: 4px; padding: 17px; border: 1px dashed var(--nt-line);
  border-radius: var(--nt-r-lg); background: var(--nt-panel2);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 13px; font-weight: 600; color: var(--nt-muted);
}
.chat-desligado .botao { margin-left: auto; min-height: 40px; }

/* ---------- 11. campo de escrever ---------- */
.chat-compor {
  position: sticky; bottom: 0; z-index: 30; margin-top: auto; padding: 12px 0 16px;
  background: var(--nt-bg); border-top: 1px solid var(--nt-line);
}
.chat-campo { display: flex; align-items: flex-end; gap: 10px; }
.chat-campo textarea {
  flex: 1; min-height: 46px; max-height: 180px; padding: 13px 14px; border-radius: 12px;
  font-family: inherit; font-size: 14px; line-height: 1.5; resize: none; overflow-y: auto;
}
.chat-campo button { flex: 0 0 auto; min-height: 46px; padding: 0 20px; border-radius: 12px; }
.chat-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 9px; }
.chat-rodape .chat-caso-sel { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; margin: 0; }
.chat-rodape select { min-height: 36px; padding: 5px 9px; font-size: 12.5px; max-width: 320px; }
.chat-rodape .sub { font-size: 12px; margin: 0; }

/* O chip "Sem caso · trocar" é peça SÓ do celular e SÓ com JavaScript (item
   P2-F1, 2026-09-04): quem o revela é a media query lá embaixo, e só quando
   o seiva-prontuario.js marcou o compositor com `caso-recolhivel`. No
   computador o seletor cabe inteiro e não há nada a recolher. */
.chat-caso-chip { display: none; }

/* ---------- 12. celular (<= 640px) ---------- */
@media (max-width: 640px) {
  .chat { min-height: 0; }
  .chat-fio { gap: 16px; padding-bottom: 176px; }   /* o campo fixo nao cobre a resposta */
  .bolha { max-width: 94%; }
  .bolha-eu { max-width: 94%; }

  .cartao-resposta { padding: 13px 14px 12px; box-shadow: none; }
  .resposta { font-size: 14px; }
  .resposta-curta { padding: 11px 13px 12px; }
  .resposta-curta p { font-size: 14.5px; }
  .resp-secao { margin: 18px 0 9px; font-size: 11px; }

  /* tabela: rola dentro do cartao, 1a coluna fixa */
  .tabela-resposta { min-width: 430px; font-size: 12.5px; }
  .tabela-resposta th, .tabela-resposta td { padding: 9px 11px; }
  .tabela-resposta th:first-child, .tabela-resposta td:first-child {
    position: sticky; left: 0; background: var(--nt-panel2); border-right: 1px solid var(--nt-line);
  }
  .tabela-resposta tr.linha-atencao td:first-child { background: var(--nt-gold-soft); }

  /* metadados empilham; acoes viram botoes de 44px */
  .meta-turno { flex-direction: column; gap: 10px; }
  .fontes-turno { flex: 1 1 100%; }
  .acoes-turno { display: flex; gap: 6px; width: 100%; }
  .acao {
    flex: 1; min-height: 44px; border: 1px solid var(--nt-line); border-radius: 11px;
    background: var(--nt-panel); color: var(--nt-brand-deep);
  }
  .acao.acao-icone { flex: none; width: 44px; color: var(--nt-muted); font-size: 14px; }
  .acao-usar { flex: 1; }
  .acao-guardada { width: 100%; }

  /* abertura em coluna unica */
  .chat-abertura { padding: 20px 0 4px; }
  .abertura-ola { font-size: 24px; }
  .sugestoes-chat { grid-template-columns: 1fr; }

  /* campo fixo embaixo + seletor de caso como chip alcancavel pelo polegar

     COMPOSITOR EM 120 px (item P2-F1, 2026-09-04). Ele media 162,5 px de
     844 — 19 % da tela sempre ocupados por um seletor que quase nunca se
     usa. Agora a primeira linha e um CHIP ("Sem caso · trocar") e o <select>
     so aparece ao toque; a conta fica em 8 + 44 + 6 + 46 + 10 = 114 px. */
  .chat-compor {
    position: fixed; left: 0; right: 0; bottom: 0; padding: 8px 14px 10px;
    box-shadow: 0 -10px 24px -20px rgba(33, 42, 34, .5);
  }
  /* o campo cresce ate QUATRO linhas e para (o seiva-ia.js pede ate 180 px;
     o teto do celular e este, e `max-height` vence a altura em linha):
     4 x 21 de linha + 26 de respiro + 2 de borda = 112.
     `margin-top:0` porque a regra geral de <input>/<textarea> punha 6 px de
     margem ali — 6 px que o compositor fixo cobrava do fio da conversa. */
  .chat-campo textarea {
    min-height: 46px; max-height: 112px; margin-top: 0; border-radius: 14px;
  }
  .chat-campo button { width: 48px; min-height: 48px; padding: 0; border-radius: 14px; font-size: 0; }
  .chat-campo button::after { content: "\2191"; font-size: 17px; }
  .chat-rodape { margin: 0 0 6px; order: -1; }
  .chat-rodape .sub { display: none; }         /* a dica de teclado nao serve no celular */
  .chat-rodape .chat-caso-sel {
    display: inline-flex; min-height: 44px; padding: 0 13px; border-radius: 22px;
    border: 1px solid var(--nt-line); background: var(--nt-panel); font-size: 12.5px;
  }
  .chat-rodape .chat-caso-sel.com-caso { border-color: var(--nt-brand-soft-line); background: var(--nt-brand-soft); color: var(--nt-brand-deep); }
  .chat-rodape select { max-width: 100%; flex: 1 1 160px; min-height: 40px; border: 0; background: transparent; }

  /* Com JavaScript o chip toma o lugar do seletor, e o seletor so volta
     enquanto `caso-aberto` estiver posto. Sem JavaScript nada disto vale:
     `caso-recolhivel` e escrita pelo seiva-prontuario.js. */
  .caso-recolhivel .chat-caso-chip {
    display: inline-flex; align-items: center; gap: 5px;
    max-width: 100%; min-height: 44px; padding: 0 15px;
    border: 1px solid var(--nt-line); border-radius: 22px;
    background: var(--nt-panel); color: var(--nt-brand-deep);
    font-size: 12.5px; font-weight: 700; box-shadow: none;
  }
  .caso-recolhivel .chat-caso-chip .caso-atual {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .caso-recolhivel .chat-caso-chip .caso-trocar { flex: 0 0 auto; color: var(--nt-muted); font-weight: 600; }
  .caso-recolhivel .chat-caso-chip:hover { background: var(--nt-panel); border-color: var(--nt-brand); filter: none; transform: none; }
  .caso-recolhivel:not(.caso-aberto) .chat-caso-sel { display: none; }
  .caso-recolhivel.caso-aberto .chat-caso-chip { display: none; }
  .caso-recolhivel.caso-aberto .chat-caso-sel { flex: 1 1 100%; }

  /* o fio deixa de reservar 176 px embaixo: o compositor encolheu */
  .chat-fio { padding-bottom: 132px; }
}

/* ---------- 13. acessibilidade ---------- */
:focus-visible { outline: 2px solid var(--nt-brand); outline-offset: 2px; }
.acao:focus-visible, .citacao:focus-visible { outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  /* versao estatica da espera: nada se move, o texto carrega o significado */
  .nt-pontos i, .esqueleto span, .espera-passos .passo-agora::before { animation: none; }
  .nt-pontos i { opacity: 1; }
  .esqueleto span { background: var(--nt-line2); }
  .espera-passos .passo-agora::before { background: var(--nt-brand); border-color: var(--nt-brand); opacity: 1; }
}