/* Nexus Chat — UMA superfície: a conversa. Lê como WhatsApp: painel com fundo próprio, balões (recebido à
   esquerda em papel, enviado à direita com fundo verde-claro), hora pequena no canto, cabeçalho com nome e
   estado, caixa de texto em baixo com microfone e enviar. Mobile-first 390×844, tema claro/escuro, contraste
   AA, toques ≥44px. Sem framework, sem CDN. */
:root {
  --verde: #0b3d2e; --verde-2: #146c4d; --acento: #1f9d6a; --acento-txt: #ffffff;
  /* fundo do PAINEL da conversa (o "papel de parede" do WhatsApp, aqui liso e discreto) */
  --fundo: #ece5dd; --papel: #ffffff; --texto: #101614; --texto-2: #4b5651; --linha: #d9dedc;
  --meu: #d8fdd2; --meu-txt: #0d2a1f; --deles: #ffffff; --cod-bg: #eef1ef; --erro: #b3261e; --aviso: #7a4b00; --aviso-bg: #fff3d6;
  --raio: 14px; --sombra: 0 1px 1px rgba(0,0,0,.13);
  /* pílula do composer — no claro, os tons de papel deste front; no escuro, os LITERAIS do Atlas 2 */
  --pill-bg: #f2f4f3; --pill-borda: #d9dedc; --pill-ico: #5f6c66; --pill-ph: #808d87;
  --circ-bg: #e9edeb; --circ-ico: #3c4a44;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0b1410; --papel: #1f2c26; --texto: #e8ede9; --texto-2: #9fb0a8; --linha: #2a352f;
    --meu: #124d33; --meu-txt: #e8f7ef; --deles: #1f2c26; --cod-bg: #27342d; --aviso-bg: #3a2a08; --aviso: #ffd48a;
    --verde: #10201a; --sombra: 0 1px 1px rgba(0,0,0,.5);
    --pill-bg: #1f2730; --pill-borda: #2a323d; --pill-ico: #8b97a6; --pill-ph: #6b7480;
    --circ-bg: #252f39; --circ-ico: #cdd6e0;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }
.salto { position: absolute; left: -999px; top: 0; background: var(--papel); padding: 8px; }
.salto:focus { left: 8px; z-index: 10; }

.ecra { min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
#chat { height: 100dvh; background: var(--fundo); }

/* ─ cabeçalho: avatar, nome, estado ─ */
/* A faixa respira em cima e em baixo (curador 2026-09-09b: «o logo é retangular e está colado ao topo»).
   14px de padding + 40px de marca = 68px de faixa; a 390x844 sobram 776px de conversa e nada corta.
   O respiro é o MESMO nos dois temas: mora aqui, não num bloco de tema. `padding-top` soma o inset do
   ecrã com entalhe (safe-area) para o notch não voltar a comer a faixa. */
.topo { display: flex; align-items: center; gap: 12px; min-height: 68px;
  padding: 14px 14px; padding-top: calc(14px + env(safe-area-inset-top, 0px));
  background: var(--verde); color: #fff; box-shadow: var(--sombra); position: sticky; top: 0; z-index: 2; }
/* a marca é um WORDMARK retangular: altura fixa, largura pela PROPORÇÃO (nunca esticada), à esquerda */
.topo .topo-marca { flex: 0 0 auto; height: 40px; width: auto; max-width: 46vw; background: #fff;
  border-radius: 10px; padding: 4px 8px; object-fit: contain; }
.topo-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topo-txt strong { font-size: 1.02rem; }
.estado { font-size: .76rem; opacity: .85; }
.estado.off { color: #ffd48a; }
.aviso { background: var(--aviso-bg); color: var(--aviso); padding: 8px 14px; text-align: center; font-size: .9rem; }

/* ─ conversa e balões ─ */
.conversa { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px 6px; display: flex; flex-direction: column; gap: 4px; scroll-behavior: smooth; }
.balao { max-width: 82%; padding: 6px 9px 5px 10px; border-radius: var(--raio); box-shadow: var(--sombra); animation: entra .18s ease-out; word-wrap: break-word; white-space: pre-wrap; position: relative; }
.balao.meu { align-self: flex-end; background: var(--meu); color: var(--meu-txt); border-top-right-radius: 4px; }
.balao.deles { align-self: flex-start; background: var(--deles); border-top-left-radius: 4px; }
/* rodapé de cada mensagem = o `.kb-th-foot` do Atlas 2 (console.css 6079-6086): hora + acções pequenas,
   sempre visível (a régua de TOQUE não tem hover — a divergência já está declarada lá). Aqui a acção é
   OUVIR, e vive no balão da assistente, não no cabeçalho (curador 2026-09-09). */
.balao .rodape { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin: 2px 0 -1px; }
.balao .hora { font-size: .68rem; color: var(--texto-2); line-height: 1; }
.balao.meu .hora { color: var(--meu-txt); opacity: .55; }
/* botão «ouvir» — geometria do `.kb-th-copy` do Atlas 2 (console.css 6089-6101), alvo de toque 44px
   garantido pelo ::before (o quadrado visível fica 24px, como lá). */
.balao .ouvir { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 8px; background: transparent; border: 0;
  color: var(--texto-2); padding: 0; transition: color .15s, background-color .15s; }
.balao .ouvir::before { content: ""; position: absolute; inset: -10px; }      /* alvo de toque ≥44px */
.balao .ouvir:hover { background: var(--fundo); color: var(--texto); }
.balao .ouvir[aria-pressed=true] { color: var(--acento); }
/* SFV-1884 (curador, hom 2026-09-09: «fica travado, ao invés de claramente mostrar se está a carregar e a
   gerar»). O XTTS leva ~1 s numa frase curta e até ~7 s em 294 chars — o botão TEM de dizer que está a
   trabalhar. A roda anima por CSS (o JS só troca a fase), e em `prefers-reduced-motion` deixa de girar mas
   continua a ler-se como ocupada pela opacidade + o aria-busy. */
.balao .ouvir.a-carregar { color: var(--acento); cursor: progress; }
.balao .ouvir.a-carregar svg { animation: ouvir-roda .9s linear infinite; transform-origin: 50% 50%; }
.balao .ouvir.em-erro { color: #ff6b6b; }
.balao .ouvir:disabled { cursor: progress; }
@keyframes ouvir-roda { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .balao .ouvir.a-carregar svg { animation: none; opacity: .55; }
}
.balao .ouvir svg { width: 15px; height: 15px; }
/* estado do SISTEMA — a linha cinzenta ao centro; nunca a voz do assistente */
.balao.sistema { align-self: center; background: transparent; box-shadow: none; color: var(--texto-2); font-size: .82rem; text-align: center; max-width: 92%; }
.balao.falhou { outline: 2px solid var(--erro); }
.a-escrever { display: flex; gap: 4px; align-items: center; padding: 10px 14px; align-self: flex-start; margin: 0 10px 4px; background: var(--deles); border-radius: var(--raio); border-top-left-radius: 4px; box-shadow: var(--sombra); }
.a-escrever span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-2); animation: pulsa 1.2s infinite ease-in-out; }
.a-escrever span:nth-child(2) { animation-delay: .2s; } .a-escrever span:nth-child(3) { animation-delay: .4s; }

/* ─ botões do motor ([BOTOES: …]) como chips DENTRO da conversa ─
   UMA POR LINHA (correcção do curador 2026-09-09: «os balões melhor deixar enfileirados verticalmente»).
   Saíam lado a lado e um título de 20 chars partia o texto ao meio no ecrã de 390px. É também o que o
   WhatsApp faz com listas de opções: cada opção ocupa a largura do balão, empilhada, toque ≥44px. */
.chips { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 4px 4px 6px 2px;
  align-self: flex-start; width: min(82%, 340px); }
.chip { display: block; width: 100%; text-align: center; min-height: 44px; padding: 10px 16px; border-radius: 22px; border: 1.5px solid var(--acento); background: var(--papel); color: var(--verde-2); font-weight: 600; animation: chip .28s cubic-bezier(.2,.8,.2,1) both; transition: background .15s, transform .08s; }
@media (prefers-color-scheme: dark) { .chip { color: #8fd9b8; } }
.chip:nth-child(2) { animation-delay: .06s; } .chip:nth-child(3) { animation-delay: .12s; }
.chip:active { transform: scale(.96); }
.chip:disabled { opacity: .5; }
.chip.escolhido { background: var(--acento); color: var(--acento-txt); }

/* ─ cartão de consulta (o do documento vive no fim, com o anexo) ─ */
.cartao { align-self: flex-start; max-width: 92%; width: 340px; background: var(--papel); border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; animation: entra .22s ease-out; border-left: 5px solid var(--acento); }
.cartao-titulo { margin: 0; padding: 12px 14px 6px; font-size: 1rem; }
.cartao dl { margin: 0; padding: 0 14px 8px; display: grid; grid-template-columns: 1fr; gap: 6px; }
.cartao dl div { display: flex; flex-direction: column; }
.cartao dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-2); }
.cartao dd { margin: 0; font-weight: 600; }
.cartao-acoes { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 14px 14px; }
.cartao-acoes .chip { width: 100%; text-align: center; }

/* ─ faixa dispensável (passkey) — discreta, acima da caixa, nunca modal ─ */
.faixa { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--papel); border-top: 1px solid var(--linha); font-size: .86rem; color: var(--texto-2); }
.faixa span { flex: 1; }
.faixa button { min-height: 36px; border-radius: 18px; border: 0; padding: 6px 14px; font-weight: 600; }
.faixa-sim { background: var(--acento); color: var(--acento-txt); }
.faixa-nao { background: transparent; color: var(--texto-2); text-decoration: underline; padding: 6px 4px; }

/* ═══════════ caixa de digitação = A DO ATLAS 2 (não inventar — curador 2026-09-09) ═══════════
   Copiado de golden-kernel/front/atlas-console/www2/assets/css/console.css (bloco «WhatsApp-dark-mode input
   row», linhas 276-294 + .vtimer 630-634/651 + @supports field-sizing 654 + .att-chips 1424-1437) e da
   estrutura de assets/js/input.js (MInputBar/AttChips/VTimer). As DECLARAÇÕES de geometria são as de lá,
   byte a byte; só as CORES passam por token, porque este front tem tema claro E escuro e o Atlas 2 só tem
   escuro — os valores literais do Atlas 2 (#1f2730 · #2a323d · #8b97a6 · #252f39 · #cdd6e0 · #6b7480) são
   exactamente os que o bloco `prefers-color-scheme: dark` repõe mais abaixo. */
.composer { display: flex; flex-direction: column; gap: 8px; padding: 8px 10px calc(8px + var(--safe-b)); background: var(--papel); border-top: 1px solid var(--linha); }
.m-warow { display: flex; align-items: center; gap: 7px; }   /* center → o círculo mic/enviar fica centrado enquanto a pílula cresce */
.m-wapill { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 2px; background: var(--pill-bg);
  border: 1px solid var(--pill-borda); border-radius: 23px; padding: 3px 5px; min-height: 47px; }
.m-waico { flex: 0 0 auto; width: 39px; height: 39px; border-radius: 50%; border: 0; background: transparent; color: var(--pill-ico);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.m-waico:active { background: var(--pill-borda); color: var(--texto); } .m-waico[disabled] { opacity: .5; }
/* textarea que cresce sozinha: `field-sizing: content` no browser que o tem, e o fallback autoGrow por
   scrollHeight no que não tem (o MESMO par do Atlas 2). 16px = zero zoom no iOS. Tecto por max-height. */
.m-wain { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: none; color: var(--texto);
  font-size: 16px; padding: 9px 4px; line-height: 1.35; resize: none; overflow-y: auto; max-height: 140px; scrollbar-width: thin;
  font-family: inherit; display: block; height: 40px; }
.m-wain::placeholder { color: var(--pill-ph); }
.m-wacircle { flex: 0 0 auto; width: 47px; height: 47px; border-radius: 50%; border: 1px solid var(--pill-borda); background: var(--circ-bg);
  color: var(--circ-ico); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.m-wacircle:active { filter: brightness(1.25); }
.m-wacircle.send { background: var(--acento); border-color: var(--acento); color: var(--acento-txt); }   /* há texto → enviar */
.m-wacircle.rec { background: #2a1414; border-color: #5a3a3a; color: #ff6b6b; animation: mrec 1.1s infinite; }
.m-wacircle[disabled] { opacity: .55; }
/* SFV-1884 — o microfone NASCE bloqueado (curador 2026-09-09: só enviar até sair o protocolo de atendimento).
   Continua visível e no lugar (o composer não salta quando desbloqueia), mas lê-se como desactivado: sem
   hover, sem cursor de acção, e o `title`/`aria-label` dizem porquê. A trava real é a rota — isto é o reflexo. */
.m-wacircle.bloqueado { opacity: .38; cursor: default; }
.m-wacircle.bloqueado:hover, .m-wacircle.bloqueado:active { filter: none; background: var(--circ-bg); }
@keyframes mrec { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,80,.55); } 70% { box-shadow: 0 0 0 7px rgba(255,80,80,0); } }
/* fix 2026-07-05d do Atlas 2: a textarea auto-dimensiona NATIVO — zero layout forçado por tecla */
@supports (field-sizing: content) { .m-wain { field-sizing: content; height: auto !important; } }

/* nota inline do microfone (permissão/erros) + a linha de gravação — console.css .m-vnote */
.m-vnote { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--texto-2); padding: 1px 4px 0; }
.m-vnote.rec { color: var(--erro); } .m-vnote.bad { color: var(--erro); }
.m-vnote .rdot { width: 8px; height: 8px; border-radius: 50%; background: #ff5d5d; animation: pulsa 1s infinite; }
.m-vnote .retry { margin-left: 6px; border: 1px solid var(--linha); background: var(--fundo); color: var(--texto); border-radius: 7px;
  padding: 3px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
/* timer da gravação (teto 5:00 VISÍVEL) — console.css .vtimer */
.vtimer { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: 700; }
.vtimer .vlim { color: var(--texto-2); font-weight: 500; }
.vtimer .vbar { display: inline-block; width: 90px; height: 5px; border-radius: 99px; background: var(--linha); overflow: hidden; }
.vtimer .vbar i { display: block; height: 100%; background: var(--acento); transition: width 1s linear; }
.vtimer.warn { color: var(--aviso); } .vtimer.warn .vbar i { background: var(--aviso); }
.vtimer .vparts { color: var(--acento); font-size: 10.5px; font-weight: 600; margin-left: 4px; }

/* chips de ANEXO pendente — console.css .att-chips/.att-chip/.att-file (KER-1208/KER-1214) */
.att-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 6px 10px 0; }
.att-chip { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--linha); background: var(--fundo); flex: none; }
.att-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-chip .att-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.7); color: #fff; border: 0; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.att-chip.att-file { width: auto; height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 26px 0 8px; background: var(--fundo); }
.att-chip.att-file .att-fic { font-size: 15px; }
.att-chip.att-file .att-fext { font-size: 10px; font-weight: 700; color: var(--verde-2); text-transform: uppercase; background: rgba(31,157,106,.14); padding: 1px 5px; border-radius: 5px; }
.att-chip.att-file .att-fname { font-size: 11.5px; color: var(--texto-2); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip.att-file .att-x { top: 50%; transform: translateY(-50%); }

@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes chip { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes pulsa { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media (min-width: 600px) { #chat { border-left: 1px solid var(--linha); border-right: 1px solid var(--linha); } }

/* ─ markdown das mensagens do motor (dialecto WhatsApp) — o md() portado do Atlas 2 (core.js) emite estas tags ─ */
.balao.deles .md { white-space: normal; }
.md p { margin: 0 0 .45em; } .md p:last-child { margin-bottom: 0; }
.md b { font-weight: 700; } .md i { font-style: italic; } .md s { text-decoration: line-through; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--fundo); border-radius: 4px; padding: 1px 4px; }
.md pre { margin: .4em 0; padding: 8px 10px; background: var(--fundo); border-radius: 8px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md ul, .md ol { margin: .3em 0; padding-left: 1.25em; } .md li { margin: .1em 0; }
.md h1, .md h2, .md h3, .md h4 { margin: .4em 0 .25em; font-size: 1em; font-weight: 700; }
.md hr { border: 0; border-top: 1px solid var(--linha); margin: .5em 0; }
.md blockquote { margin: .3em 0; padding-left: .6em; border-left: 3px solid var(--linha); color: var(--texto-2); }
.md a { color: var(--verde-2); }
.md table.mdt { border-collapse: collapse; margin: .4em 0; font-size: .9em; display: block; overflow-x: auto; }
.md .mdt th, .md .mdt td { border: 1px solid var(--linha); padding: 3px 7px; text-align: left; }
.md .mdimg { max-width: 100%; border-radius: 8px; }

/* ─ CÓDIGO COPIÁVEL (PIX copia-e-cola / linha digitável do boleto) — curador 2026-09-09: «manter a parte
   do copiar boleto (clipboard) que nem WhatsApp». O texto do motor NÃO é alterado; o bloco é só realce.

   CORRECÇÃO 2026-09-09b: «menos cara de código». Tinha borda dura, uma barra separadora e a paleta do
   papel de parede — lia-se como um <pre> de editor dentro de uma conversa. Agora é a PELE DO BALÃO: o
   mesmo fundo, um degrau mais escuro (--cod-bg), raio de 10px (a escala do .doc-cartao/.doc-img deste
   ficheiro), zero borda. Monoespaçado fica SÓ o código; o «Copiar» é texto normal, discreto, à direita.
   Sem scroll horizontal: quebra por caractere (o payload não tem onde quebrar por palavra). ─ */
.cpy { display: block; margin: .5em 0; padding: 8px 10px 4px; border-radius: 10px; background: var(--cod-bg); }
.cpy-cod { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78em;
  line-height: 1.5; letter-spacing: .01em; background: none; padding: 0; color: var(--texto);
  overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; user-select: all; -webkit-user-select: all; }
.cpy-btn { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%;
  min-height: 44px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--verde-2);
  font-family: inherit; font-size: .82rem; font-weight: 600; transition: color .15s, opacity .15s; }
.cpy-btn:active { opacity: .6; }
.cpy-btn svg { width: 14px; height: 14px; }
.cpy-btn[data-copiado] { color: var(--acento); }
@media (prefers-color-scheme: dark) { .cpy-btn { color: #8fd9b8; } }

/* ─ anexo recebido: foto abre grande, PDF baixa ao toque (curador 2026-09-09: um clique, um download) ─ */
.doc { display: grid; gap: 8px; margin: 6px 0 4px; }
.doc-img { max-width: min(320px, 100%); max-height: 240px; border-radius: 10px; display: block; border: 1px solid var(--linha); cursor: zoom-in; }
.doc-cartao { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; background: var(--fundo); color: inherit; text-decoration: none; min-height: 44px; }
.doc-cartao .doc-ico { font-size: 22px; line-height: 1; }
.doc-cartao .doc-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-cartao .doc-meta { font-size: .74rem; color: var(--texto-2); }
.doc-cartao .doc-baixar { flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--verde-2); }
.doc-fora { color: var(--texto-2); font-size: .82rem; }
/* lightbox da foto: abre em tamanho grande sem sair da conversa */
.lightbox { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.86); display: flex; align-items: center; justify-content: center; padding: 12px; border: 0; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }