/* CED Office — visual "Grafite com onda" (28/09/2026), sobre a estrutura do
 * "Elevado" de 12/08.
 *
 * A identidade continua INTERINA: o CED ainda não passou logo, paleta nem
 * tipografia oficiais.
 *
 * O que mudou em 28/09: o fundo saiu do azul-marinho para o GRAFITE (cinza
 * quase neutro), a navegação saiu das abas no alto para uma BARRA LATERAL
 * agrupada, e a assinatura passou a ser a ONDA: uma linha fina que troca de cor
 * de uma ponta à outra, na marca e no alto de cada tela. Estado se lê em
 * PÍLULAS (texto e ponto na cor do estado, fundo da mesma cor bem diluído).
 *
 * O que não mudou: a ELEVAÇÃO continua sendo o assunto. São quatro níveis
 * (fundo, lista, campo, flutuante), separados por luz na aresta de cima mais
 * sombra embaixo, e não por borda desenhada.
 *
 * TROCAR PELA MARCA OFICIAL = MEXER SÓ NO BLOCO :root. Nenhuma cor aparece
 * solta no resto do arquivo, e os tokens têm nome de PAPEL, não de cor.
 *
 * Contraste medido por `node prova-contraste.mjs` (portão, exige 4.5:1 em
 * texto). Ele compõe as camadas com alfa antes de medir.
 */

:root {
  /* escada de elevação, em grafite */
  --fundo: #111316;                /* nível 0: a página */
  --superficie: #181a1e;           /* nível 1: barra, lista, cartão, balão */
  --superficie-alta: #202328;      /* nível 2: campo, composer */
  --superficie-flutuante: #2a2e35; /* nível 3: o que flutua sobre o resto */
  --borda: #353a43;
  --luz-aresta: rgba(255, 255, 255, .06);

  /* texto */
  --texto: #eceef2;
  --texto-suave: #a9b0bc;
  --texto-fraco: #9199a6;

  /* acento único, e o gradiente que mora dentro dele */
  --acento: #4d8dff;
  --acento-forte: #7aa9ff;
  --acento-fundo: rgba(77, 141, 255, .12);
  --acento-texto: #06101f;
  /* A faixa do gradiente foi medida em 12/08: a tinta escura passa nas duas
     pontas (4,77:1 embaixo). Não alargar sem rodar o portão. */
  --gradiente: linear-gradient(125deg, #6fa3ff, #457be8);
  --aurora: radial-gradient(closest-side, rgba(77, 141, 255, .22), rgba(77, 141, 255, .08) 55%, transparent 82%);

  /* a onda: verde-água numa ponta, azul na outra */
  --onda-a: #3fcfb3;
  --onda-b: #7d8dff;

  /* movimento (28/09): o brilho que acompanha a elevação no hover, o reflexo
     que corre no esqueleto de carregamento, e o véu atrás da peça ampliada */
  --brilho: rgba(77, 141, 255, .3);
  --reflexo: rgba(255, 255, 255, .045);
  --veu: rgba(8, 9, 11, .84);

  /* balões */
  --balao-agente: #181a1e;
  --balao-usuario: #1f2b3b;

  /* estado (texto e ponto das pílulas) e o fundo diluído de cada um */
  --ok: #4fd18b;
  --aviso: #f0b85c;
  --erro: #ff7b6f;
  --ok-fundo: rgba(79, 209, 139, .13);
  --aviso-fundo: rgba(240, 184, 92, .13);
  --erro-fundo: rgba(255, 123, 111, .13);

  --codigo-fundo: #0c0d0f;

  /* elevação: luz na aresta de cima, sombra longa embaixo */
  --luz: inset 0 1px 0 var(--luz-aresta);
  --elev1: 0 1px 2px rgba(0, 0, 0, .45);
  --elev2: 0 6px 18px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .45);
  --elev3: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .45);

  --raio: 16px;
  --raio-p: 11px;

  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

  --lateral: 244px;
  /* O que fica acima do conteúdo na coluna da direita (a faixa da onda). O
     atividade.css desconta isto da altura das colunas do quadro. */
  --topo-altura: 48px;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ casco */

/* Barra à esquerda, tela à direita. A barra é `sticky` com a altura da janela:
   a tela rola, a barra fica. */
.casco {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr);
  min-height: 100vh;
}
.casco.sem-lateral { display: block; }
.palco { min-width: 0; position: relative; }

/* A conversa não rola a página: rola a lista de mensagens, e o campo de
   escrever fica preso embaixo. Por isso a coluna da direita tem a altura
   exata da janela nesta tela. */
body.tela-conversa { height: 100%; overflow: hidden; }
body.tela-conversa .casco { height: 100vh; min-height: 0; }
body.tela-conversa .palco { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
body.tela-conversa .faixa-onda { flex: 0 0 auto; }

/* ----------------------------------------------------------- barra lateral */

/* A barra continua se chamando `.topo` porque o portão `prova-topo.mjs` guarda
   a mesma premissa de antes: `overflow: hidden` na barra, e, na telinha, barra
   e menu quebrando linha em vez de cortar item. Quem rola, quando os itens não
   cabem na altura, é o `.menu`, não a barra. */
.topo {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  box-shadow: inset -1px 0 0 var(--luz-aresta);
  padding: 18px 12px 12px;
}

/* A aurora continua atrás da marca: é o único lugar do portal em que o acento
   aparece em massa. */
.topo::before {
  content: "";
  position: absolute;
  left: -160px; top: -200px;
  width: 520px; height: 360px;
  background: var(--aurora);
  pointer-events: none;
}

.topo-cabeca { position: relative; display: flex; align-items: center; gap: 10px; padding: 0 6px; }

.marca { position: relative; display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.marca-logo { display: block; height: 30px; width: auto; max-width: 130px; }
.marca-texto { display: flex; flex-direction: column; }
.marca-texto strong { font-size: 17px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; color: var(--texto); }
.marca-texto small {
  font-family: var(--mono); font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--texto-suave); margin-top: 3px;
}

/* A onda. As duas cores moram no :root; aqui só se diz onde cada uma entra. */
.onda { display: block; width: 100%; }
.onda stop:first-child { stop-color: var(--onda-a); }
.onda stop:last-child { stop-color: var(--onda-b); }
.onda-marca { position: relative; height: 16px; margin: 12px 0 10px; opacity: .9; }
/* O traço passa um pouco do viewBox quando a onda agita: melhor vazar um pixel
   que cortar o pico. O eco é o segundo caminho, fraco, correndo atrás. */
.onda { overflow: visible; }
.onda .onda-eco { opacity: .35; }
/* Com o movimento.js no ar, a onda viva é um <canvas> com as mesmas classes,
   posto logo depois do SVG; o SVG fica só para quem está sem JavaScript. */
.onda.onda-substituida { display: none; }
.faixa-onda { padding: 22px 36px 0; }
.onda-palco { height: 26px; opacity: .75; }

.abre-menu {
  display: none;
  margin: 0 0 0 auto; padding: 8px; width: 40px; height: 40px;
  background: var(--superficie-alta); color: var(--texto);
  border-radius: 12px; box-shadow: var(--luz);
}
.abre-menu:hover { transform: none; filter: none; box-shadow: var(--luz); background: var(--superficie-flutuante); }
.abre-menu svg { width: 22px; height: 22px; display: block; }

.menu {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--superficie-flutuante) transparent;
}

.grupo-rotulo {
  margin: 16px 10px 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-suave);
}

.menu .item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 11px;
  color: var(--texto-suave); text-decoration: none;
  padding: 8px 10px; border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}
.menu .item:hover { background: var(--superficie-alta); color: var(--texto); }
.menu .item .icone { transition: transform .22s cubic-bezier(.3, .8, .3, 1), color .18s ease; }
.menu .item:hover .icone, .menu .item:focus-visible .icone { transform: translateX(2px); color: var(--acento-forte); }

/* O realce do item aberto é UM elemento que desliza de um item para o outro
   (publico/movimento.js). Com ele no lugar, o item deixa de pintar o próprio
   fundo, senão o realce apareceria duas vezes. Sem JavaScript, o item pinta. */
.menu-indicador {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: var(--h, 0px);
  transform: translateY(var(--y, 0px));
  border-radius: 10px;
  background: var(--acento-fundo);
  box-shadow: var(--luz), 0 0 22px -10px var(--brilho);
  transition: transform .44s cubic-bezier(.3, .85, .25, 1), height .44s cubic-bezier(.3, .85, .25, 1);
  pointer-events: none;
}
.menu-indicador::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px;
  background: linear-gradient(var(--onda-a), var(--onda-b));
}
.menu-indicador.sem-transicao { transition: none; }
.menu.com-indicador .item.ativo { background: transparent; box-shadow: none; }
.menu .item.ativo { background: var(--acento-fundo); color: var(--texto); box-shadow: var(--luz); }
.menu .item:focus-visible { outline: 2px solid var(--acento-forte); outline-offset: 1px; }
.icone { width: 18px; height: 18px; flex: 0 0 auto; }
.item-rotulo { flex: 1 1 auto; min-width: 0; }

/* Contador na barra ("3 esperando você"). Pílula de aviso, a mesma do resto. */
.contador {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 999px;
  color: var(--aviso); background: var(--aviso-fundo);
}
.contador[hidden] { display: none; }

/* Número que mudou dá um pulo curto (o Movimento.conta anima a contagem). */
.conta-mudou { animation: conta-pula .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes conta-pula { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* Item que acabou de chegar numa lista ao vivo: desliza e pisca uma vez. */
.acabou-de-chegar { animation: chega .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes chega {
  0% { opacity: 0; transform: translateX(-10px); background-color: var(--acento-fundo); }
  30% { opacity: 1; transform: none; background-color: var(--acento-fundo); }
}

/* A esfera do Brunão (publico/movimento.js desenha no canvas). Grande no
   Início, pequena no cabeçalho da Conversa. É enfeite: `aria-hidden`, e o
   estado dele está escrito ao lado. */
canvas.esfera { display: block; flex: 0 0 auto; }
.esfera-grande { width: 120px; height: 120px; }
.esfera-mini { width: 30px; height: 30px; }

/* Esqueleto: o lugar do que ainda está carregando, com um reflexo correndo.
   O reflexo anda por transform, que o navegador faz sem repintar. */
.esqueleto-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 18px; }
.esqueleto {
  position: relative; overflow: hidden; min-height: 112px;
  background: var(--superficie); border-radius: var(--raio);
  box-shadow: var(--elev1), var(--luz);
}
.esqueleto::before {
  content: ""; position: absolute; left: 16px; right: 40%; top: 18px; height: 12px; border-radius: 6px;
  background: var(--superficie-alta); box-shadow: 0 24px 0 var(--superficie-alta), 0 44px 0 var(--superficie-alta);
}
.esqueleto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, var(--reflexo) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: reflexo 1.5s ease-in-out infinite;
}
@keyframes reflexo { to { transform: translateX(100%); } }

/* A tela que chega entra subindo de leve. Entre uma tela e outra o navegador
   ainda cruza as duas (view transition), onde houver suporte. */
.palco > main { animation: pagina-entra .38s cubic-bezier(.2, .7, .3, 1) backwards; }
@keyframes pagina-entra { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }

.menu-pe {
  margin-top: auto;
  padding: 14px 10px 4px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px;
  box-shadow: inset 0 1px 0 var(--luz-aresta);
}
.menu .quem { color: var(--texto); font-size: 13.5px; font-weight: 600; flex: 1 1 100%; }
.menu .papel { color: var(--texto-suave); font-size: 12px; }
.menu form { margin: 0 0 0 auto; display: flex; }

.linkzinho {
  background: none; border: 0; color: var(--texto-suave);
  cursor: pointer; font: inherit; font-size: 13.5px;
  padding: 6px 12px; border-radius: 999px; margin: 0; box-shadow: none;
}
.linkzinho:hover { background: var(--superficie-alta); color: var(--texto); filter: none; transform: none; box-shadow: none; }

/* A tela de entrar: a marca solta no alto, sem barra. */
.topo-solto {
  position: relative; height: auto; flex-direction: row; align-items: center;
  padding: 18px 28px; box-shadow: var(--luz);
}

/* ----------------------------------------------------------------- pílulas */

/* Estado se lê em pílula: texto e ponto na cor do estado, fundo da mesma cor
   bem diluído. O ponto repete a informação para ela não depender só de cor, e
   a palavra dentro da pílula é o que conta para leitor de tela. */
.pilula {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--texto-suave); background: var(--superficie-alta);
}
.pilula::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pilula.ok { color: var(--ok); background: var(--ok-fundo); }
.pilula.aviso { color: var(--aviso); background: var(--aviso-fundo); }
/* `.erro` sozinho é a mensagem de erro do formulário (14px, margem de cima):
   a pílula de erro redefine tamanho e margem para não herdar aquilo. */
.pilula.erro { color: var(--erro); background: var(--erro-fundo); font-size: 12px; margin: 0; }
.pilula.vivo { color: var(--acento-forte); background: var(--acento-fundo); }
/* O ponto respira pela variável `--respira`, que o movimento.js escreve a 20
   quadros por segundo, e não por animação de CSS: uma animação infinita aqui
   custava 11% de CPU com a aba parada (medido em 28/09). Sem o motor, aceso. */
.pilula.vivo::before { box-shadow: 0 0 8px currentColor; opacity: var(--respira, 1); }

/* ---------------------------------------------------------- páginas comuns */

main { max-width: 880px; margin: 0 auto; padding: 40px 20px 60px; width: 100%; }

h1 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 4px; }
.sub { margin: 0 0 24px; color: var(--texto-suave); font-size: 14.5px; }

.cartao {
  background: var(--superficie);
  border-radius: var(--raio);
  padding: 28px 30px 32px;
  box-shadow: var(--elev2), var(--luz);
}
.entrada { max-width: 390px; margin: 48px auto 0; box-shadow: var(--elev3), var(--luz); }
.entrada h1 { font-size: 24px; }

.formulario { display: flex; flex-direction: column; }
.formulario label { font-size: 13px; color: var(--texto-suave); margin: 18px 0 4px; }

input, textarea {
  font: inherit;
  font-size: 15.5px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  background: var(--superficie-alta);
  color: var(--texto);
  box-shadow: var(--luz);
}
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, textarea:focus {
  outline: none;
  background: var(--superficie-flutuante);
  border-color: var(--acento);
  box-shadow: var(--luz), 0 0 0 4px var(--acento-fundo);
}

/* O botão é o gradiente, e o gradiente é a assinatura. A tinta em cima dele é
   ESCURA, não branca como no cartaz de referência: branco sobre o topo claro
   do gradiente (#6fa3ff) mede 2,45:1, e o portão de contraste reprova. Tinta
   escura sobre azul vivo passa com folga e não desmancha o desenho. */
button {
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; margin-top: 20px;
  background: var(--gradiente); color: var(--acento-texto);
  box-shadow: var(--elev2), var(--luz);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
button:hover { filter: brightness(1.1); box-shadow: var(--elev3), var(--luz); transform: translateY(-1px); }
button:active { transform: translateY(0); }
button[disabled] {
  background: var(--superficie-alta); color: var(--texto-fraco);
  box-shadow: none; cursor: default; transform: none; filter: none;
}
button.secundario {
  background: var(--superficie-alta); color: var(--texto);
  box-shadow: var(--elev1), var(--luz);
}
button.secundario:hover { background: var(--superficie-flutuante); filter: none; }
button:focus-visible { outline: 2px solid var(--acento-forte); outline-offset: 3px; }

.formulario button { width: 100%; margin-top: 28px; }

.erro { color: var(--erro); font-size: 14px; margin: 10px 0 0; }

/* --------------------------------------------------------------- conversa */

main.chat {
  flex: 1 1 auto;
  min-height: 0;          /* sem isto o flex nao deixa a lista rolar */
  display: flex;
  flex-direction: column;
  max-width: 880px;
  padding: 0;
}

.rolagem {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 24px 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--superficie-flutuante) transparent;
}

.mensagens { display: flex; flex-direction: column; gap: 12px; }

.separador { text-align: center; margin: 4px 0 18px; }
.separador span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--texto-suave); background: var(--superficie);
  border-radius: 999px; padding: 5px 14px;
  box-shadow: var(--elev1), var(--luz);
}

.fala { display: flex; gap: 12px; align-items: flex-end; max-width: 74%; }
.fala.dele { align-self: flex-start; }
.fala.minha { align-self: flex-end; flex-direction: row-reverse; }
.fala.emenda { margin-top: -6px; }

/* Avatar quadrado de canto largo, não círculo: acompanha o raio das camadas. */
.avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  user-select: none;
}
.avatar.agente { background: var(--gradiente); color: var(--acento-texto); box-shadow: var(--elev2); }
.avatar.usuario { background: var(--superficie-alta); color: var(--texto-suave); box-shadow: var(--luz); }
.fala.emenda .avatar { visibility: hidden; }

.bolha {
  position: relative;
  background: var(--balao-agente);
  border-radius: var(--raio);
  border-bottom-left-radius: 6px;
  padding: 11px 16px 8px;
  box-shadow: var(--elev2), var(--luz);
  min-width: 0;
}
/* A barrinha de gradiente na aresta do balão do agente: é o que diz de quem é
   a fala antes de qualquer palavra ser lida. */
.fala.dele .bolha::before {
  content: "";
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 2px; border-radius: 2px; background: var(--gradiente);
}
.fala.minha .bolha {
  background: var(--balao-usuario);
  border-bottom-left-radius: var(--raio);
  border-bottom-right-radius: 6px;
}
.fala.emenda.dele .bolha { border-top-left-radius: 6px; }
.fala.emenda.minha .bolha { border-top-right-radius: 6px; }

.cabecalho { margin-bottom: 3px; }
.nome { font-size: 12.5px; font-weight: 600; color: var(--acento-forte); }
.fala.minha .nome { color: var(--texto-suave); }

.corpo { font-size: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
.corpo.cru { white-space: pre-wrap; }
.corpo p { margin: 0 0 8px; }
.corpo p:last-child { margin-bottom: 0; }
.corpo ul, .corpo ol { margin: 7px 0; padding-left: 20px; }
.corpo li { margin: 3px 0; }
.corpo a { color: var(--acento-forte); text-decoration: underline; text-underline-offset: 3px; }
.corpo a:hover { color: var(--texto); }
.corpo code {
  font-family: var(--mono); font-size: .85em;
  background: var(--superficie-alta); border-radius: 6px; padding: 2px 6px;
  box-shadow: var(--luz);
}
.corpo .bloco-codigo {
  background: var(--codigo-fundo); color: var(--texto);
  border-radius: var(--raio-p); padding: 13px 15px; overflow-x: auto; margin: 8px 0;
  box-shadow: var(--luz);
}
.corpo .bloco-codigo code { background: none; box-shadow: none; padding: 0; font-size: .86em; }
.corpo blockquote {
  margin: 7px 0; padding: 2px 0 2px 12px;
  border-left: 2px solid var(--acento); color: var(--texto-suave);
}
.corpo .md-titulo { font-size: 15px; font-weight: 700; letter-spacing: -.02em; margin: 7px 0 4px; }
.corpo strong { font-weight: 700; }

.horario {
  display: block; text-align: right; margin-top: 4px;
  font-family: var(--mono); font-size: 10.5px;
  font-variant-numeric: tabular-nums; color: var(--texto-fraco);
}

/* O link do Treino embaixo de cada resposta do agente: discreto, só aparece
   forte quando o mouse passa, para não competir com a própria resposta. */
.corrigir {
  display: inline-block; margin-top: 2px;
  font-size: 12px; color: var(--texto-suave); text-decoration: none;
}
.corrigir:hover, .corrigir:focus-visible { color: var(--acento-forte); text-decoration: underline; text-underline-offset: 3px; }

.vazio {
  color: var(--texto-suave); font-size: 15px;
  background: var(--superficie); border-radius: var(--raio);
  padding: 20px 22px; margin: 8px 0;
  box-shadow: var(--elev1), var(--luz);
}

.chegando { animation: entra .18s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* digitando */

.digitando { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-bottom: 4px; }
.digitando.escondido { display: none; }
.digitando-texto { font-size: 14px; color: var(--texto-suave); }
.bolhinhas {
  display: inline-flex; gap: 5px; align-items: center;
  background: var(--superficie); border-radius: var(--raio); border-bottom-left-radius: 6px;
  padding: 13px 15px; box-shadow: var(--elev2), var(--luz);
}
.bolhinhas i { width: 6px; height: 6px; border-radius: 50%; background: var(--acento); animation: pulsa 1.2s infinite ease-in-out; }
.bolhinhas i:nth-child(2) { animation-delay: .16s; background: #5f97ff; }
.bolhinhas i:nth-child(3) { animation-delay: .32s; background: var(--acento-forte); }
@keyframes pulsa { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }

/* composer: o nível que flutua sobre a conversa, e parece mesmo mais alto */

.composer {
  flex: 0 0 auto;
  padding: 8px 24px 22px;
  /* `transparent` e nao a cor do fundo em rgba(): repetir o valor do --fundo
     aqui faria a troca de marca deixar uma faixa da cor velha atras do campo
     de escrever, e ninguem procuraria o defeito num gradiente. */
  background: linear-gradient(to bottom, transparent, var(--fundo) 40%);
}

.composer-caixa {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--superficie-alta);
  border-radius: 24px;
  padding: 6px 6px 6px 20px;
  box-shadow: var(--elev3), var(--luz);
}
.composer-caixa:focus-within { box-shadow: var(--elev3), var(--luz), 0 0 0 4px var(--acento-fundo); }

.composer textarea {
  flex: 1; border: 0; padding: 10px 0; background: none;
  resize: none; max-height: 200px; line-height: 1.5;
  box-shadow: none; border-radius: 0;
}
.composer textarea:focus { outline: none; background: none; box-shadow: none; }

.composer button {
  margin: 0; flex: 0 0 auto;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--elev2);
}
.composer button:hover { transform: none; box-shadow: var(--elev2); }
.composer button svg { width: 18px; height: 18px; }

.dica { text-align: center; font-size: 12px; color: var(--texto-fraco); margin: 12px 0 0; }

/* ------------------------------------------------- sinal do canal, no topo */

/* Aparece em todas as telas e para todos os papéis. Discreto de propósito: é
   informação de fundo, não chamada para ação. Quem é admin recebe o mesmo
   sinal como link para a tela de reconexão. */
.sinal {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--texto-suave); text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
  background: var(--superficie-alta); box-shadow: var(--luz);
  margin: 0 0 4px;
}
a.sinal:hover { background: var(--superficie-flutuante); color: var(--texto); }

.sinal .ponto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--texto-fraco); flex: 0 0 auto;
}
.sinal.conectado .ponto { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
/* Os nomes seguem o contrato publico GET /api/status/whatsapp
   (conectado, conectando, aguardando_qr, desconectado), com o underline
   virando hifen, que e a convencao em CSS. */
.sinal.conectando .ponto,
.sinal.aguardando-qr .ponto { background: var(--acento); box-shadow: 0 0 8px var(--acento); opacity: var(--respira, 1); }
.sinal.desconectado .ponto { background: var(--erro); box-shadow: 0 0 8px var(--erro); }
.sinal.medindo .ponto { background: var(--texto-fraco); }

@keyframes respira { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* --------------------------------------------------------------- whatsapp */

/* Painel de estado: a primeira coisa que a pessoa lê ao abrir a tela, porque é
   a pergunta que ela veio fazer. */
.painel-estado {
  display: flex; align-items: center; gap: 14px;
  background: var(--superficie-alta); border-radius: var(--raio-p);
  padding: 16px 20px; margin: 0 0 22px;
  box-shadow: var(--elev1), var(--luz);
}
.painel-estado strong { display: block; font-size: 17px; letter-spacing: -.02em; }
.painel-estado .estado-detalhe { display: block; font-size: 14px; color: var(--texto-suave); margin-top: 2px; }

.ponto-grande {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: var(--texto-fraco);
}
[data-estado="conectado"] .ponto-grande { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
[data-estado="conectando"] .ponto-grande,
[data-estado="aguardando-qr"] .ponto-grande { background: var(--acento); box-shadow: 0 0 12px var(--acento); opacity: var(--respira, 1); }
[data-estado="fora-do-ar"] .ponto-grande { background: var(--erro); box-shadow: 0 0 12px var(--erro); }

/* Área do QR: instruções à esquerda, código à direita. Na telinha vira uma
   coluna só, com as instruções antes do código (que é a ordem em que a pessoa
   precisa delas). */
.area-qr {
  display: grid; grid-template-columns: 1fr 380px; gap: 28px;
  align-items: start; margin-top: 24px;
}
.area-qr.escondido { display: none; }

.passos h2 { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 0 0 10px; }
.passos ol { margin: 0 0 16px; padding-left: 20px; font-size: 15px; }
.passos li { margin: 6px 0; }

.alerta-qr {
  background: var(--superficie-alta); border-left: 2px solid var(--erro);
  border-radius: var(--raio-p); padding: 12px 16px; font-size: 14px; margin: 0 0 12px;
  box-shadow: var(--luz);
}
.prazo { font-size: 13px; color: var(--texto-suave); margin: 0; font-variant-numeric: tabular-nums; }

.estado { border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }
.estado th { text-align: left; color: var(--texto-suave); font-weight: 500; padding: 6px 24px 6px 0; }
.estado td { padding: 6px 0; }

/* Selo de estado, do vocabulário da referência: a cor diz o estado e o ponto
   aceso repete a informação, para não depender só de cor. */
.selo {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  padding: 5px 12px; border-radius: 999px;
  background: var(--superficie-alta); color: var(--texto-suave);
  box-shadow: var(--luz);
}
.selo i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.selo.ativo { color: var(--ok); }
.selo.parado { color: var(--texto-suave); }

.atencao {
  background: var(--superficie-alta);
  border-radius: var(--raio-p);
  padding: 16px 20px; font-size: 14.5px; margin-bottom: 20px;
  color: var(--texto);
  box-shadow: var(--elev1), var(--luz);
  border-left: 2px solid var(--acento);
}

#acoes { display: flex; gap: 10px; }
#acoes button { margin-top: 0; }
.recado { font-size: 14px; color: var(--texto-suave); min-height: 20px; margin: 18px 0 0; }
.escondido { display: none; }

/* O pareador serve a propria pagina, clara: o fundo branco fica dentro da
   moldura e nao briga com o portal escuro em volta. */
.molduraqr iframe {
  width: 100%; height: 620px; border: 0; border-radius: var(--raio);
  background: #fff; box-shadow: var(--elev3);
}

/* ---------------------------------------------------------------- telinha */

@media (max-width: 900px) {
  .area-qr { grid-template-columns: 1fr; }
  :root { --lateral: 220px; }
  .faixa-onda { padding: 18px 20px 0; }
}

@media (max-width: 640px) {
  /* Na telinha a barra deixa de ser coluna e vira uma faixa no alto: a marca e
     o botão do menu numa fila, o menu inteiro embaixo quando aberto.
     Portão `prova-topo.mjs`: a barra (`.topo`) tem `overflow: hidden`, então
     item que não cabe não vira rolagem, vira item CORTADO (foi assim que o
     "Sair" do admin sumiu em 12/08). Por isso barra e menu QUEBRAM LINHA aqui,
     e o menu ocupa a fila inteira: tela nova empurra item para baixo, nunca
     para fora. */
  .casco { display: block; }
  .topo {
    position: sticky; z-index: 5; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 10px 14px; gap: 6px;
    box-shadow: 0 1px 0 var(--luz-aresta);
  }
  .topo-cabeca { flex: 1 1 100%; padding: 0; }
  .abre-menu { display: block; }
  .onda-marca { display: none; }
  .menu-indicador { display: none; }
  .menu.com-indicador .item.ativo { background: var(--acento-fundo); box-shadow: var(--luz); }
  .menu {
    display: none; width: 100%; flex-direction: row; flex-wrap: wrap;
    gap: 4px; overflow: visible; padding: 6px 0 4px;
  }
  .topo.aberto .menu { display: flex; }
  .grupo-rotulo { flex: 1 1 100%; margin: 10px 4px 2px; }
  .menu .item { flex: 1 1 46%; padding: 9px 10px; }
  .menu-pe { flex: 1 1 100%; }
  .marca-texto small { display: none; }
  /* O sinal vira só o ponto na faixa estreita. O texto continua no leitor de
     tela. */
  .sinal { flex: 1 1 100%; }
  body.tela-conversa .casco { height: auto; }
  body.tela-conversa .palco { height: calc(100vh - 64px); }
  .faixa-onda { padding: 10px 14px 0; }
  .onda-palco { height: 18px; }
  .fala { max-width: 92%; }
  .rolagem { padding: 18px 12px 4px; }
  .composer { padding: 8px 12px 16px; }
  main { padding: 20px 14px 48px; }
}

/* Aba escondida: toda animação de CSS para no quadro em que estava (o laço do
   movimento.js para sozinho; aqui é o que é CSS). */
.aba-oculta *, .aba-oculta *::before, .aba-oculta *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  .chegando { animation: none; }
  .bolhinhas i { animation: none; opacity: .7; }
  button { transition: none; }
  /* A trava geral: quem pediu menos movimento não recebe animação nem
     transição, em tela nenhuma. O que o movimento.js desenha fica parado. */
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}