/* Chat educacional. Saude, tom calmo: ciano sobrio com acento verde-esmeralda escuro.
 * Sem fontes, imagens ou recursos externos (CSP: style-src 'self'). Nenhum estilo inline: tudo aqui, por classe.
 * Cores so como tokens semanticos: tema claro em :root, tema escuro (variantes dessaturadas, nao invertidas) em
 * prefers-color-scheme. Os pares de contraste sao conferidos por codigo em tests/design.test.js.
 * Tamanhos de texto e de caixas em rem/em (escalam com o texto do visitante); alturas em px so onde ha alvo de toque. */

:root {
  color-scheme: light;

  /* Superficies e texto */
  --bg: #e6f0f3;
  --canvas: #f3f9fa;
  --surface: #ffffff;
  --surface-2: #eef5f7;
  --ink: #0f2a33;
  --ink-soft: #3e5762;
  --line: #d3e2e6;
  --control-border: #6b8791;

  /* Marca */
  --primary: #0e7490;
  --on-primary: #ffffff;
  --link: #0b5f77;
  --focus: #0b5f77;
  --accent: #047857;
  --accent-soft: #ddf1e7;

  /* Mensagens */
  --bot-bg: #ffffff;
  --bot-border: #d3e2e6;
  --visitor-bg: #0e7490;
  --visitor-ink: #ffffff;

  /* Avisos: seguranca (informativo), info, atencao e erro. Sempre com icone e texto, nunca so cor. */
  --notice-bg: #e7f1fb;
  --notice-border: #b9d3ec;
  --notice-icon: #1558a8;
  --info-bg: #e7f1fb;
  --info-border: #9fc0e3;
  --info-ink: #0c3b66;
  --info-icon: #1558a8;
  --warn-bg: #fff3d1;
  --warn-border: #e0b34d;
  --warn-ink: #4d3200;
  --warn-icon: #8a5700;
  --error-bg: #fdecea;
  --error-border: #e3a199;
  --error-ink: #7a1c12;
  --error-icon: #b42318;

  /* Estados */
  --disabled-bg: #dfe9ec;
  --disabled-ink: #5a727d;
  --layer-neutral: #0f2a33;
  --layer-on-primary: #000000;
  --layer-hover: 0.08;
  --layer-press: 0.16;

  /* Elevacao: dois niveis */
  --shadow-1: 0 1px 2px rgba(15, 42, 51, 0.08);
  --shadow-2: 0 12px 32px rgba(15, 42, 51, 0.12);

  /* Tipografia: pilha do sistema que lembra Figtree/Noto Sans (fonte externa e proibida pela CSP) */
  --font: ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;

  /* Espacamento (4/8), raios e alvo de toque */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --r-xs: 6px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;
  --target: 44px;
  --gutter: 16px;
  --dur: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #060d0f;
    --canvas: #0a1316;
    --surface: #0f1b1f;
    --surface-2: #172a30;
    --ink: #e3f0f3;
    --ink-soft: #a9c1c8;
    --line: #223a41;
    --control-border: #6e8f99;

    --primary: #5cc8df;
    --on-primary: #04222a;
    --link: #7dd3e8;
    --focus: #7dd3e8;
    --accent: #3fb68b;
    --accent-soft: #123a30;

    --bot-bg: #14262b;
    --bot-border: #223a41;
    --visitor-bg: #0e5a6e;
    --visitor-ink: #eaf8fb;

    --notice-bg: #10263a;
    --notice-border: #1f3f5c;
    --notice-icon: #7db7ee;
    --info-bg: #10263a;
    --info-border: #2a557d;
    --info-ink: #cfe5f8;
    --info-icon: #7db7ee;
    --warn-bg: #2a2108;
    --warn-border: #6b5416;
    --warn-ink: #f5e0a5;
    --warn-icon: #e5b84a;
    --error-bg: #2e1513;
    --error-border: #77322c;
    --error-ink: #f8cfc9;
    --error-icon: #f08a80;

    --disabled-bg: #1a2c32;
    --disabled-ink: #7f9aa3;
    --layer-neutral: #e3f0f3;
    --layer-on-primary: #000000;
    /* No escuro a camada e um pouco mais forte (o limite e o contraste do rotulo sob ela, medido nos testes) */
    --layer-hover: 0.12;
    --layer-press: 0.18;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
html.pending .app { visibility: hidden; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-16);
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Icones: um unico conjunto de linha, traco constante, tamanhos 16, 20 e 24 */
.icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Foco: 3px com respiro, contraste de pelo menos 3:1 sobre qualquer superficie */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.log:focus-visible, .notice-summary:focus-visible { outline-offset: -3px; }

.skip {
  position: absolute;
  top: var(--s2);
  left: var(--s2);
  z-index: 100;
  padding: var(--s3) var(--s4);
  border: 2px solid var(--primary);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  box-shadow: var(--shadow-2);
  transform: translateY(-300%);
}
.skip:focus { transform: none; }

/* Estrutura: coluna de 100dvh (cabecalho, aviso, conversa com o campo de mensagem, rodape). O campo e o ultimo item
 * da coluna, nunca sobrepoe o historico. A area da conversa tem altura minima em rem: quando o cromo ocupa tudo
 * (celular deitado, teclado aberto, texto aumentado) a pagina rola em vez de espremer a conversa. */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 880px;
  margin: 0 auto;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line);
}

/* Botoes: camada de estado (hover/pressionado) so em opacity, o rotulo fica por cima e mantem o contraste.
 * A camada cobre a caixa da borda (inset -1px), sem deixar aro. */
.btn, .lang-btn, .chip, .card, .notice-summary {
  position: relative;
  isolation: isolate;
  --layer: var(--layer-neutral);
}
.btn::before, .lang-btn::before, .chip::before, .card::before, .notice-summary::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--layer);
  opacity: 0;
  pointer-events: none;
}
.notice-summary::before { inset: 0; }
@media (hover: hover) {
  .btn:hover:not(:disabled):not([aria-disabled='true'])::before, .lang-btn:hover::before, .chip:hover::before, .card:hover::before, .notice-summary:hover::before { opacity: var(--layer-hover); }
}
.btn:active:not(:disabled):not([aria-disabled='true'])::before, .lang-btn:active::before, .chip:active::before, .card:active::before, .notice-summary:active::before { opacity: var(--layer-press); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: var(--target);
  min-height: var(--target);
  padding: 0 var(--s4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:disabled, .btn[aria-disabled='true'] { cursor: not-allowed; }

/* Unico botao primario da tela: enviar. Na espera fica aria-disabled (e nao disabled): continua com o foco do teclado. */
.send {
  flex: none;
  width: var(--target);
  height: var(--target);
  padding: 0;
  background: var(--primary);
  color: var(--on-primary);
  --layer: var(--layer-on-primary);
}
.send .icon { width: 24px; height: 24px; }
.send[aria-disabled='true'] { background: var(--disabled-bg); color: var(--disabled-ink); }

.ghost {
  border-color: var(--control-border);
  background: var(--surface);
}
.ghost.is-confirming { border-color: var(--warn-icon); background: var(--warn-bg); color: var(--warn-ink); --layer: var(--warn-ink); }
.ghost:disabled { border-color: var(--line); background: var(--disabled-bg); color: var(--disabled-ink); }

/* Cabecalho: marca, titulo e subtitulo; idioma e nova conversa na mesma barra de ferramentas */
.top {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s4);
  padding: var(--s2) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--s3); flex: 1 1 100%; min-width: 0; }
.brand-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--primary);
  color: var(--on-primary);
}
.brand-mark .icon { width: 24px; height: 24px; }
.brand-text { min-width: 0; }
.brand-title { margin: 0; font-size: var(--fs-18); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.brand-sub { margin: 0; color: var(--ink-soft); font-size: var(--fs-14); line-height: 1.4; }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex: 1 1 100%; min-width: 0; }

/* Seletor de idioma segmentado: dois alvos de 44px com 8px entre eles */
.lang { display: inline-flex; flex: none; gap: var(--s2); padding: 2px; border-radius: var(--r-pill); background: var(--surface-2); }
.lang-btn {
  min-width: var(--target);
  min-height: var(--target);
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}
.lang-btn[aria-pressed='true'] { border-color: var(--primary); background: var(--surface); color: var(--link); font-weight: 600; }

/* Escondida por visibility (nao por display): continua ocupando o lugar e o cabecalho nao salta quando ela aparece. */
.chat-tools { min-width: 0; }
.chat-tools.is-off { visibility: hidden; }
.chat-tools .btn-label { min-width: 0; overflow-wrap: anywhere; }

/* Aviso de seguranca: informativo (azul sobrio), sempre visivel; o detalhe recolhe, a frase de emergencia fica */
.notice { flex: none; border-bottom: 1px solid var(--notice-border); background: var(--notice-bg); color: var(--ink); }
.notice-summary {
  display: block;
  min-height: var(--target);
  padding: var(--s2) var(--gutter);
  font-size: var(--fs-14);
  line-height: 1.45;
  list-style: none;
  cursor: pointer;
}
.notice-summary::-webkit-details-marker { display: none; }
.notice-row { display: flex; align-items: flex-start; gap: var(--s2); }
.notice-chevron { color: var(--ink-soft); }
.notice-icon { display: inline-block; margin: 0 6px 0 0; vertical-align: top; color: var(--notice-icon); }
.notice-text { flex: 1; min-width: 0; text-wrap: pretty; }
.notice-emergency { font-weight: 600; }
.notice-box[open] .notice-chevron { transform: rotate(180deg); }
.notice-more { margin: 0; padding: 0 var(--gutter) var(--s3) calc(var(--gutter) + 26px); color: var(--ink-soft); font-size: var(--fs-14); line-height: 1.5; }

/* Area da conversa. O historico tem altura minima em rem (flex-basis 0px + height 0 + min-height: so o minimo conta
 * no tamanho intrinseco) e o resto da pilha (.stage e .chat, com overflow visivel) nunca encolhe abaixo de
 * "minimo do historico + campo de mensagem + avisos": quando isso nao cabe na tela, a PAGINA rola, e o campo
 * nunca fica cortado nem preso numa rolagem interna. */
.stage { flex: 1 1 0px; display: flex; flex-direction: column; background: var(--canvas); }
.chat { flex: 1 1 0px; display: flex; flex-direction: column; }

.log {
  flex: 1 1 0px;
  height: 0;
  min-height: 7rem;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) var(--gutter);
  overflow-y: auto;
  position: relative; /* contem os rotulos sr-only das mensagens: sem isso eles escapam do rolo e esticam a pagina */
  overscroll-behavior: contain;
  scroll-padding: var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--control-border) transparent;
  background: var(--canvas);
}
.log > * { flex: none; }

/* Mensagens */
.msg { display: flex; align-items: flex-start; gap: var(--s2); max-width: 100%; scroll-margin: var(--s4); }
.msg.visitor { justify-content: flex-end; }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.avatar .icon { width: 16px; height: 16px; }
.msg-body { display: flex; flex-direction: column; min-width: 0; max-width: min(85%, 60ch); }
.msg.bot .msg-body { align-items: flex-start; }
.msg.visitor .msg-body { align-items: flex-end; }
.bubble {
  max-width: 100%;
  padding: var(--s3) var(--s4);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: var(--fs-16);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.bot .bubble { border-color: var(--bot-border); border-top-left-radius: var(--r-xs); background: var(--bot-bg); color: var(--ink); box-shadow: var(--shadow-1); }
.visitor .bubble { border-top-right-radius: var(--r-xs); background: var(--visitor-bg); color: var(--visitor-ink); }
.bubble > * { margin: 0; }
.bubble > * + * { margin-top: var(--s2); }
.bubble p { text-wrap: pretty; }
.bubble p.plain { white-space: pre-wrap; }
.bubble ul, .bubble ol { padding-left: var(--s6); }
.bubble li + li { margin-top: var(--s1); }
.bubble strong { font-weight: 600; }
.bubble a { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.bot .bubble a { color: var(--link); }
@media (hover: hover) {
  .bubble a:hover { text-decoration-thickness: 2.5px; }
}
.when { margin: var(--s1) var(--s1) 0; color: var(--ink-soft); font-size: var(--fs-12); line-height: 1.3; font-variant-numeric: tabular-nums; }

/* Indicador de digitando: tres pontos; com movimento reduzido vira o texto estatico */
.typing .bubble { display: inline-flex; align-items: center; gap: var(--s2); min-height: 52px; padding-top: var(--s3); padding-bottom: var(--s3); }
.typing-dots { display: inline-flex; align-items: center; gap: 5px; }
.typing-dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-soft); opacity: 0.7; }
.typing-label { display: none; color: var(--ink-soft); font-size: var(--fs-14); }
.typing-note { color: var(--ink-soft); font-size: var(--fs-14); }

/* Sugestoes (estado vazio): cartoes por publico e perguntas comuns. No celular os cartoes sao compactos para
 * aparecerem sem rolar muito. */
.suggest { display: flex; flex-direction: column; gap: var(--s3); }
.suggest-intro { margin: var(--s2) 0 0; color: var(--ink-soft); font-size: var(--fs-14); font-weight: 600; }
.cards { display: grid; grid-template-columns: 1fr; gap: var(--s2); }
.card {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  width: 100%;
  min-height: var(--target);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  touch-action: manipulation;
}
.card-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
.card-icon .icon { width: 20px; height: 20px; }
.card-text { display: flex; flex-direction: column; min-width: 0; }
.card-title { color: var(--link); font-size: var(--fs-14); font-weight: 600; line-height: 1.4; }
.card-q { font-size: var(--fs-16); line-height: 1.5; overflow-wrap: anywhere; }
.common-label { margin: var(--s2) 0 calc(var(--s1) * -1); color: var(--ink-soft); font-size: var(--fs-14); font-weight: 600; }
.common { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  min-height: var(--target);
  padding: var(--s2) var(--s4);
  border: 1px solid var(--control-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.chip-lang {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.6;
}

/* Base do campo de mensagem: alerta, campo e dicas */
.dock {
  flex: none;
  padding: var(--s3) var(--gutter) 0;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

/* Avisos: um componente so, com icone + texto + acao; o tom (erro, atencao, info) muda cor e icone.
 * O anuncio para leitor de tela vai em regioes permanentes (#live-alert, #live-status), nao neste bloco. */
.alert {
  display: flex;
  gap: var(--s3);
  margin: 0 0 var(--s3);
  padding: var(--s3);
  border: 1px solid var(--error-border);
  border-radius: var(--r-md);
  background: var(--error-bg);
  color: var(--error-ink);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.alert-icon { margin-top: 1px; color: var(--error-icon); }
.alert-main { display: flex; flex-direction: column; align-items: flex-start; flex: 1; gap: var(--s2); min-width: 0; }
.alert-text { margin: 0; overflow-wrap: anywhere; }
.alert-action { border-color: currentColor; color: inherit; --layer: currentColor; text-align: left; }
.alert[data-tone='warning'] { border-color: var(--warn-border); background: var(--warn-bg); color: var(--warn-ink); }
.alert[data-tone='warning'] .alert-icon { color: var(--warn-icon); }
/* Estados informativos (conversa encerrada ou vencida): azul, nao vermelho de erro. */
.alert[data-tone='info'] { border-color: var(--info-border); background: var(--info-bg); color: var(--info-ink); }
.alert[data-tone='info'] .alert-icon { color: var(--info-icon); }

.composer-row { display: flex; align-items: flex-end; gap: var(--s2); }
.composer textarea {
  display: block;
  flex: 1;
  min-width: 0;
  min-height: var(--target);
  padding: 9px var(--s3);
  border: 1px solid var(--control-border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-16);
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.composer textarea:disabled { border-style: dashed; background: var(--disabled-bg); color: var(--disabled-ink); cursor: not-allowed; }

/* Linha de dicas: sempre uma linha reservada (nada salta). Mostra o lembrete de privacidade (e, com teclado fisico, a
 * dica do Enter); o aviso passageiro e o contador usam o mesmo lugar. */
.hintbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--s3);
  min-height: 1.5rem;
  margin-top: var(--s1);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.5;
}
.hint { margin: 0; color: var(--ink); }
.hint:empty { display: none; }
.privacy-hint, .kbd-hint { margin: 0; }
.kbd-hint { display: none; }
.hintbar.has-hint .privacy-hint, .hintbar.has-hint .kbd-hint { display: none; }
.count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (min-width: 640px) {
  .kbd-hint { display: block; }
}
@media (max-width: 479px) {
  .hintbar.has-count .privacy-hint { display: none; }
}

.fine {
  flex: none;
  margin: 0;
  padding: var(--s1) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--fs-14);
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}

/* Sem JavaScript: mensagem bilingue com a emergencia no topo da pagina */
.noscript { margin: var(--s4); padding: var(--s3); border: 1px solid var(--warn-border); border-radius: var(--r-md); background: var(--warn-bg); color: var(--warn-ink); font-size: var(--fs-16); }

/* Telas estreitas */
@media (max-width: 359px) {
  :root { --gutter: 12px; }
}

/* Lado a lado a partir de 640px: marca a esquerda, ferramentas a direita */
@media (min-width: 640px) {
  .top { padding-top: var(--s3); padding-bottom: var(--s3); }
  .brand { flex: 1 1 auto; }
  .toolbar { flex: 0 0 auto; }
}

/* Cartoes em tres colunas quando ha espaco; as perguntas comuns saem do celular (os cartoes bastam) */
@media (min-width: 760px) {
  .cards { grid-template-columns: repeat(3, 1fr); }
  .card { flex-direction: column; padding: var(--s3) var(--s4); }
  .card-icon { width: 40px; height: 40px; }
  .card-icon .icon { width: 24px; height: 24px; }
  .card-text { gap: var(--s1); }
}
@media (max-width: 599px) {
  .common-label, .common { display: none; }
}
/* Celular de altura comum: o rotulo acima dos cartoes sai para os cartoes aparecerem mais na primeira tela */
@media (max-width: 599px) and (max-height: 44em) {
  .suggest-intro { display: none; }
}

/* Em desktop a coluna vira um cartao flutuante (so quando ha folga; as bordas arredondadas vao no cabecalho e no
 * rodape, e nada e cortado se o texto estiver ampliado). */
@media (min-width: 56em) and (min-height: 40em) {
  body { padding: var(--s6) var(--s4); }
  .app {
    height: calc(100dvh - 2 * var(--s6));
    margin: 0 auto;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
  }
  .top { border-top-left-radius: var(--r-xl); border-top-right-radius: var(--r-xl); }
  .fine { padding-bottom: var(--s3); border-bottom-left-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl); }
}

/* Tela baixa (teclado aberto, celular deitado, texto ampliado): menos folga, mas nenhum texto some. Em em, para
 * acompanhar o tamanho de texto do navegador. */
@media (max-height: 35em) {
  .top { padding-top: var(--s2); padding-bottom: var(--s2); }
  .brand-mark { width: 32px; height: 32px; }
  .brand-mark .icon { width: 20px; height: 20px; }
  .suggest-intro { display: none; }
  .log { padding-top: var(--s3); padding-bottom: var(--s3); }
  .dock { padding-top: var(--s2); }
  .alert { margin-bottom: var(--s2); padding: var(--s2) var(--s3); }
}

/* Movimento: so transform e opacity, de 150 a 250 ms. Com movimento reduzido nada anima (a regra abaixo troca os pontos pelo texto estatico). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .lang-btn, .chip, .card { transition: transform var(--dur) ease; }
  .btn:active:not([aria-disabled='true']), .lang-btn:active, .chip:active { transform: scale(0.97); }
  .card:active { transform: scale(0.99); }
  .btn::before, .lang-btn::before, .chip::before, .card::before, .notice-summary::before { transition: opacity var(--dur) ease; }
  .notice-chevron { transition: transform var(--dur) ease; }
  .typing-dots i { animation: dot 1.3s ease-in-out infinite; }
  .typing-dots i:nth-child(2) { animation-delay: 0.18s; }
  .typing-dots i:nth-child(3) { animation-delay: 0.36s; }
  @keyframes dot {
    0%, 70%, 100% { opacity: 0.7; transform: translateY(0); }
    35% { opacity: 1; transform: translateY(-3px); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots { display: none; }
  .typing-label { display: inline; }
}

/* Alto contraste do sistema: bordas reais nos componentes */
@media (forced-colors: active) {
  .bubble, .card, .chip, .btn, .lang-btn, .alert, .notice { border: 1px solid CanvasText; }
  .send { border-color: ButtonText; }
  .lang-btn[aria-pressed='true'] { border-color: Highlight; }
}