/* CED Office — visual "Elevado" (fusão 1, aprovada pelo Allan em 12/08/2026).
 *
 * A identidade continua INTERINA: o CED ainda não passou logo, paleta nem
 * tipografia oficiais. O que mudou aqui não é a cor, é a ESTRUTURA.
 *
 * O assunto do desenho é a ELEVAÇÃO. São quatro níveis bem separados (fundo,
 * lista, campo, flutuante) e o que sustenta cada um não é uma borda desenhada,
 * é luz na aresta de cima mais sombra embaixo, como acontece com objeto real.
 * Por isso a borda quase some do arquivo: quem separa as camadas agora é
 * --luz + --elev*, e não `border: 1px solid`.
 *
 * O azul aparece em MASSA uma vez só, na aurora atrás do wordmark. O gradiente
 * nunca sai da família do azul (claro em cima, profundo embaixo) e só vive em
 * três lugares: botão, avatar do agente e a barrinha na aresta do balão dele.
 *
 * 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, porque a aurora fica
 * ATRÁS do wordmark e muda o fundo real dele.
 */

:root {
  /* escada de elevação */
  --fundo: #12151a;                /* nível 0: a página */
  --superficie: #1b1f26;           /* nível 1: lista, cartão, balão */
  --superficie-alta: #232833;      /* nível 2: campo, composer */
  --superficie-flutuante: #2c3342; /* nível 3: o que flutua sobre o resto */
  --borda: #3a4150;
  --luz-aresta: rgba(255, 255, 255, .06);

  /* texto */
  --texto: #e9ecf1;
  /* Um pouco mais claro que o cinza que veio do cartaz de referência (#9ba5b4),
     porque este é o tom que aparece SOBRE A AURORA (linha de apoio do wordmark
     e menu, que na telinha ficam dentro dela). A aurora clareia o topo para
     #2a4067, e ali o cinza antigo media 4,16:1, abaixo do mínimo. Continua
     nitidamente secundário: 7,29:1 contra os 13,96:1 do texto principal. */
  --texto-suave: #a3adbc;
  --texto-fraco: #8f9aa9;

  /* acento único, e o gradiente que mora dentro dele */
  --acento: #4d8dff;
  --acento-forte: #7aa9ff;
  --acento-fundo: rgba(77, 141, 255, .12);
  --acento-texto: #06101f;
  /* O gradiente da referência ia de #6fa3ff a #2b5fd9, e essa faixa é larga
     demais para QUALQUER tinta única: medido, a tinta escura passa em cima
     (7,59:1) e reprova embaixo (3,40:1), e a branca faz o inverso (2,45:1 em
     cima, 5,61:1 embaixo). Como o texto atravessa o botão inteiro, vale sempre
     a ponta pior. A ponta profunda foi temperada até onde a tinta escura passa
     nas duas (4,77:1 embaixo): continua claro em cima e profundo embaixo,
     dentro da mesma família de azul, só com o percurso mais curto. */
  --gradiente: linear-gradient(125deg, #6fa3ff, #457be8);
  --aurora: radial-gradient(closest-side, rgba(77, 141, 255, .30), rgba(77, 141, 255, .10) 55%, transparent 82%);

  /* balões */
  --balao-agente: #1b1f26;
  --balao-usuario: #223247;

  /* estado */
  --ok: #4fd18b;
  --erro: #ff7b6f;

  --codigo-fundo: #0d1016;

  /* 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: 18px;
  --raio-p: 12px;

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

  --topo-altura: 68px;

  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;
}

body.tela-conversa {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------------- topo */

/* A ASSINATURA DO DESENHO: a aurora azul atrás do wordmark. É o único lugar
   da tela onde o acento aparece em massa, e é ela que dá a leitura de camada
   iluminada por cima, que deixa o resto da tela quieto. */
.topo {
  position: relative;
  overflow: hidden;
  background: var(--superficie);
  box-shadow: var(--luz);
  padding: 0 28px;
  min-height: var(--topo-altura);
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

.topo::before {
  content: "";
  position: absolute;
  left: -180px; top: -260px;
  width: 760px; height: 460px;
  background: var(--aurora);
  pointer-events: none;
}

.topo::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(77, 141, 255, .6), rgba(77, 141, 255, .2) 45%, transparent 80%);
}

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

.menu { position: relative; margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.menu a { color: var(--texto-suave); text-decoration: none; padding: 7px 14px; border-radius: 999px; }
.menu a:hover { background: var(--superficie-alta); color: var(--texto); }
.menu a.ativo { background: var(--acento-fundo); color: var(--texto); box-shadow: var(--luz); }
.menu .quem { color: var(--texto-suave); font-size: 13.5px; padding-left: 8px; }
.menu form { margin: 0; display: flex; }

.linkzinho {
  background: none; border: 0; color: var(--texto-suave);
  cursor: pointer; font: inherit; font-size: 14px;
  padding: 7px 14px; border-radius: 999px; margin: 0;
}
.linkzinho:hover { background: var(--superficie-alta); color: var(--texto); }

/* ---------------------------------------------------------- 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);
}

.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-right: 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); animation: respira 1.6s infinite ease-in-out; }
.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); animation: respira 1.6s infinite ease-in-out; }
[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) {
  /* Na telinha o sinal vira só o ponto: a legenda inteira empurraria o menu
     para fora da tela, e o ponto sozinho já responde "posso contar com o
     WhatsApp agora?". O texto continua no title e no leitor de tela. */
  .sinal .sinal-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sinal { padding: 7px; }
  .area-qr { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topo { padding: 0 14px; gap: 12px; }
  .marca-texto small { display: none; }
  .menu { gap: 2px; font-size: 13px; }
  .menu a, .linkzinho { padding: 6px 10px; }
  .menu .quem { display: none; }
  .fala { max-width: 92%; }
  .rolagem { padding: 18px 12px 4px; }
  .composer { padding: 8px 12px 16px; }
  main { padding: 24px 14px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .chegando { animation: none; }
  .bolhinhas i { animation: none; opacity: .7; }
  button { transition: none; }
}