/* EMISSARIO — a identidade da casa: paleta escura com acento em cobre, a mesma
   do GUARDIÃO, do SENTINELA, do INTENDENTE e do ARAUTO. Ethnocentric na marca,
   servida do disco. Sem sublinhado, sem emoji, sem nada de fora da máquina.

   O formato é o de uma caixa de entrada no jeito do WhatsApp Web (reformulação
   de 28/10/2026, a pedido do dono do produto): avatar na lista, balão com
   cauda, papel de parede na conversa, compositor em cápsula e cabeçalhos em
   faixa. O que é da CAAD continua sendo da CAAD: o cobre no lugar do verde, o
   semáforo da casa no atraso e na janela, e a Ethnocentric na marca. */
@font-face {
  font-family: "Ethnocentric";
  src: local("Ethnocentric"), url("/estatico/fontes/Ethnocentric-Regular.otf") format("opentype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0e0e0e;
  --rail: #151515;
  --card: #1a1a1a;
  --alto: #212121;
  --line: #2c2c2c;
  --line-forte: #3a3a3a;
  --text: #f2f2f2;
  --muted: #9a9a9a;
  --fraco: #6d6d6d;
  --ok: #4da36f;
  --no: #d06d52;
  --aviso: #c9a227;
  --laranja: #d9822b;
  --azul: #5b8fc9;
  --brand: #ff6b00;
  --accent: #a05526;
  --accent-forte: #bf6832;
  /* As faixas do WhatsApp, no cinza da casa: cabeçalho, fundo da conversa e balões. */
  --faixa: #181818;
  --fundo-conversa: #0b0b0b;
  --balao-entrada: #1f1f1f;
  --balao-saida: #3a2414;
  --balao-sombra: 0 1px 1px rgba(0,0,0,.4);
  --cobre-claro: rgba(191,104,50,.16);
  --sans: "Ubuntu Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, "Noto Sans", sans-serif;
  --mono: "Noto Sans Mono", "Ubuntu Sans Mono", "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --marca: "Ethnocentric", "Eurostile", var(--sans);
  --raio: 8px;
  --raio-balao: 10px;
  --troca: .15s ease;
}

* { box-sizing: border-box; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--fraco); }
::-webkit-scrollbar-track { background: transparent; }
/* O Firefox ignora os pseudo-elementos acima e, sem isto, pinta a barra clara
   dentro do teclado de emoji e das mensagens. A regra só vale onde o seletor
   webkit não existe, para o Chromium continuar com o desenho de cima. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: #3d3d3d transparent; }
}

html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 14px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-forte); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: var(--text); }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent-forte); outline-offset: 1px; }

/* --------------------------------------------------------------- marca -- */
.marca-lockup { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca-logo { width: 54px; height: 54px; object-fit: contain; flex: 0 0 auto; }
/* O logo alinha com a PALAVRA, não com o bloco palavra+subtítulo — é o padrão do
   INTENDENTE. O subtítulo sai do fluxo e fica pendurado abaixo do nome; dentro do
   fluxo ele puxaria o centro do bloco para baixo e o nome ficaria alto em relação
   ao círculo, que foi o desalinho visto pelo dono do produto em 02/09/2026. */
.marca-texto { display: flex; flex-direction: column; line-height: 1; position: relative; min-width: 0; }
.marca {
  font-family: var(--marca); font-size: 30px; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--accent-forte); margin: 0; line-height: 1.1;
}
.marca-sub {
  font-size: 12.5px; color: var(--fraco); letter-spacing: .4px;
  position: absolute; top: calc(100% + 3px); left: 0; white-space: nowrap;
}

/* Na rail a marca encolhe junto: "EMISSÁRIO" na Ethnocentric a 30px não cabe nos
   316px úteis ao lado do logo, e encostar na borda é o mesmo defeito por outro
   caminho. O cartão de entrar, que tem espaço, fica com o tamanho da casa. */
.lista-topo .marca-logo { width: 46px; height: 46px; }
.lista-topo .marca { font-size: 25px; letter-spacing: 1.1px; }
.lista-topo .marca-sub { font-size: 11.5px; }
/* Na lista o nome fica no centro exato da coluna, na horizontal e na vertical,
   e a logo encostada à esquerda sem empurrá-lo (pedido do dono do produto,
   29/10/2026). Como a coluna se arrasta, o nome encolhe junto para nunca
   encostar na logo: a largura útil é a da coluna menos a logo dos dois lados. */
.lista-topo { container-type: inline-size; }
.lista-topo .marca-lockup { position: relative; justify-content: center; min-height: 46px; }
.lista-topo .marca-logo { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.lista-topo .marca-lockup .marca { font-size: min(25px, calc((100cqi - 124px) / 8.4)); white-space: nowrap; }

/* ------------------------------------------------------------- layout -- */
/* Três faixas de largura, e a tela é a mesma nas três:
   - larga (1280+): as três colunas, como o WhatsApp Web; as laterais crescem
     com a tela dentro de um limite, para o meio nunca ficar espremido;
   - média (768 a 1279): lista e conversa; a ficha do cliente vira gaveta que
     abre pelo botão no topo da conversa — antes ela simplesmente sumia, e com
     ela o apelido, o atribuir e as contas;
   - estreita (até 767, celular): uma coluna só, lista OU conversa, com o
     botão de voltar no topo. A gaveta do cliente continua a mesma.
   A altura é `dvh` onde existe: no celular, `100%` ficava atrás da barra do
   navegador e o compositor saía da tela. */
.app {
  display: grid; grid-template-columns: var(--lista, clamp(300px, 25vw, 380px)) minmax(0, 1fr) clamp(280px, 22vw, 340px);
  height: 100%; height: 100dvh; overflow: hidden;
}
.lista { background: var(--rail); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; position: relative; }
/* A alça é uma faixa invisível sobre a borda; acende em cobre no passar e no arrasto. */
.alca-lista {
  position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; z-index: 5;
  cursor: col-resize; touch-action: none; transition: background-color var(--troca);
}
.alca-lista:hover, .app.arrastando .alca-lista { background: linear-gradient(to right, transparent 3px, var(--accent) 3px, var(--accent) 5px, transparent 5px); }
.app.arrastando { cursor: col-resize; user-select: none; }
.conversa { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--fundo-conversa); }
.lado { background: var(--rail); border-left: 1px solid var(--line); overflow-y: auto; min-height: 0; }
.lado-topo { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 16px; background: var(--faixa); border-bottom: 1px solid var(--line); }
.lado-fundo { position: fixed; inset: 0; z-index: 69; background: rgba(0,0,0,.55); }
/* `.icone` vem depois e diz `inline-flex`; o seletor duplo ganha dele. */
.so-estreito, .so-medio, .icone.so-estreito, .icone.so-medio { display: none; }

@media (max-width: 1279px) {
  .app { grid-template-columns: var(--lista, clamp(280px, 32vw, 360px)) minmax(0, 1fr); }
  .so-medio, .icone.so-medio { display: inline-flex; }
  /* As etiquetas saem do topo e ficam só na gaveta: com elas ali, o nome
     encolhia a "D..." e a chapa de etiquetas passava por cima do relógio da
     janela (captura de 04/09/2026). Na lista elas continuam aparecendo. */
  .conversa-quem .marcadores { display: none; }
  .lado {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: min(380px, 92vw);
    transform: translateX(100%); transition: transform .22s ease; box-shadow: -12px 0 32px rgba(0,0,0,.5);
  }
  .lado.aberto { transform: none; }
}

@media (max-width: 767px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .so-estreito, .icone.so-estreito { display: inline-flex; }
  .app.conversa-aberta .lista { display: none; }
  .app:not(.conversa-aberta) .conversa { display: none; }
  .lista { border-right: 0; }
  .alca-lista { display: none; }
  .conversa-topo { gap: 8px; padding: 6px 8px; }
  .conversa-quem { gap: 6px; }
  /* O nome é o que importa no topo; linha e estado ficam na ficha do cliente
     e no ponto colorido da lista. */
  .conversa-quem .etiqueta { display: none; }
  .conversa-nome { font-size: 15px; }
  .conversa-acoes { gap: 2px; }
  .conversa-acoes .botao { padding: 6px 9px; font-size: 12.5px; }
  .icone { width: 38px; height: 38px; }
  /* Seis ícones, a caixa e o enviar não cabem em 420 px: a caixa passa a
     ocupar a linha inteira e os botões ficam embaixo dela. Espremer o
     `textarea` cortava o próprio texto que o atendente estava escrevendo. */
  .linha-texto { gap: 2px; flex-wrap: wrap; }
  /* Seletor duplo de novo: a seção "conversa" declara `.resposta textarea`
     depois desta media query e venceria no empate — foi o que deixou a caixa
     espremida entre os ícones mesmo com a quebra ligada (04/09/2026). */
  .resposta .linha-texto textarea { padding: 10px 14px; flex: 1 0 100%; order: -1; margin-bottom: 4px; }
  .linha-texto .empurra { flex: 1; }
  .mensagens { padding: 12px 4% 16px; }
  .balao { max-width: 88%; }
  .resposta { padding: 8px 8px; }
  .visor { padding: 10px; }
  .visor-caixa { min-width: 0; width: 100%; }
  .menu-balao { min-width: 170px; }
}

/* Dedo no lugar do mouse: não há "passar por cima", então a seta de ações do
   balão fica sempre visível, discreta, e os alvos de toque crescem. */
@media (hover: none) {
  .balao .seta { opacity: .55; }
  .balao.tem-seta { padding-right: 30px; }
  .item { padding-top: 12px; padding-bottom: 12px; }
  .filtros button { padding: 7px 12px; }
}

/* Tela baixa (notebook pequeno, celular deitado): o que é acessório encolhe
   para a conversa e o compositor continuarem visíveis. */
@media (max-height: 640px) {
  .teclado-grade { max-height: 96px; }
  .balao img.foto { max-height: 200px; }
  .resposta textarea { max-height: 100px; }
  .lista-topo .marca-logo { width: 36px; height: 36px; }
  .atalhos-rapidos { display: none; }
}

/* ------------------------------------------------------------- avatar -- */
/* A bolinha com as iniciais, como o WhatsApp — nas cores da casa, escolhidas
   pelo número do cliente, para a mesma pessoa ter sempre a mesma cor. */
.avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 15.5px; letter-spacing: .3px; user-select: none;
  background: #333; color: #d6d6d6; position: relative;
}
.avatar.av-0 { background: #5a3219; color: #f1c7a5; }
.avatar.av-1 { background: #22412d; color: #a8dcb9; }
.avatar.av-2 { background: #213750; color: #abc9ec; }
.avatar.av-3 { background: #4a3e1d; color: #ead68f; }
.avatar.av-4 { background: #532e1d; color: #f3b58b; }
.avatar.av-5 { background: #33302d; color: #d8d1c9; }
.avatar.av-6 { background: #3f2534; color: #e6b5cf; }
.avatar.av-7 { background: #1f3f3d; color: #9fdad3; }
.avatar svg { width: 55%; height: 55%; }
.avatar.avatar-topo { width: 40px; height: 40px; font-size: 14px; }
.avatar.avatar-grande { width: 96px; height: 96px; font-size: 32px; }
.avatar.avatar-eu { width: 34px; height: 34px; font-size: 12.5px; }

/* -------------------------------------------------------------- lista -- */
.lista-topo { padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 12px; background: var(--rail); }
.busca-caixa {
  display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 10px;
  padding: 0 12px; height: 38px; border: 1px solid transparent; transition: border-color var(--troca);
}
.busca-caixa svg { color: var(--fraco); flex: 0 0 auto; }
.busca-caixa:focus-within { border-color: var(--accent); }
.busca-caixa:focus-within svg { color: var(--accent-forte); }
.busca-caixa kbd {
  font-family: var(--mono); font-size: 10.5px; color: var(--fraco); border: 1px solid var(--line-forte);
  border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.busca { width: 100%; background: transparent; border: 0; padding: 8px 0; outline: none; min-width: 0; }
.busca:focus-visible { outline: none; }
.busca::-webkit-search-cancel-button { filter: grayscale(1) brightness(.7); }
/* Os filtros viram as pílulas do WhatsApp, e a ativa acende em cobre. Quebram
   linha em vez de rolar de lado: rolando, a última ("Encerradas") ficava
   cortada na borda sem nada dizer que havia mais (captura de 29/10/2026). */
.filtros { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 2px; }
.filtros::-webkit-scrollbar { display: none; }
.filtros button {
  background: var(--card); border: 1px solid transparent; border-radius: 999px; white-space: nowrap;
  color: var(--muted); padding: 5px 12px; font-size: 13px;
  transition: background-color var(--troca), color var(--troca), border-color var(--troca);
}
.filtros button:hover { background: var(--alto); color: var(--text); }
.filtros button.ativo { color: #f6dccb; background: var(--cobre-claro); border-color: var(--accent); }
.filtros-extra { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--line-forte);
  border-radius: 999px; color: var(--muted); padding: 3px 10px; font-size: 12px;
  transition: color var(--troca), border-color var(--troca), background-color var(--troca);
}
.chip-filtro .ponto-fin { width: 7px; height: 7px; border-radius: 50%; background: var(--no); }
.chip-filtro:hover { color: var(--text); border-color: var(--fraco); }
.chip-filtro.ativo { color: var(--text); border-style: solid; border-color: var(--no); background: rgba(208,109,82,.12); }

.conversas { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; border-top: 1px solid var(--line); }
.item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center;
  padding: 10px 14px 10px 12px; cursor: pointer; position: relative;
  transition: background-color var(--troca);
}
.item::after { content: ""; position: absolute; left: 70px; right: 0; bottom: 0; border-bottom: 1px solid var(--line); }
.item:hover { background: var(--card); }
.item.atual { background: var(--alto); }
.item.atual::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-forte); }
/* Duas linhas que não disputam largura: o nome só divide espaço com a hora, e
   os selos da segunda linha (atraso, espera, não lidas) só com a prévia. */
.item-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item-linha1, .item-linha2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.item-nome { font-weight: 500; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.item-hora { color: var(--fraco); font-size: 12px; flex: 0 0 auto; }
.item.nao-lida .item-nome { font-weight: 700; }
.item.nao-lida .item-hora { color: var(--accent-forte); font-weight: 600; }
.item-previa { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; min-width: 0; flex: 1; }
.item-previa .marcadores { display: inline-flex; margin-left: 6px; vertical-align: middle; flex-wrap: nowrap; }
.item-previa .marcador { font-size: 10.5px; padding: 0 6px; }
.item.nao-lida .item-previa { color: var(--text); }
.item-previa.saida::before { content: "Você: "; color: var(--fraco); }
.item-lado { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
.badge { background: var(--accent-forte); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
/* Deixada para depois: não há número a mostrar, só a marca de que alguém a
   quer de volta na frente. */
.badge.so-ponto { min-width: 12px; width: 12px; height: 12px; padding: 0; }
.ponto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--fraco); }
.ponto.nova { background: var(--accent-forte); }
.ponto.atendimento { background: var(--ok); }
.ponto.aguardando { background: var(--aviso); }
.ponto.encerrada { background: var(--fraco); }
.item-linha { font-size: 11px; color: var(--fraco); margin-left: 6px; font-weight: 400; }
/* A situação financeira na lista: quem está em atraso aparece antes de abrir. */
.item-situacao {
  font-size: 11px; font-family: var(--mono); border-radius: 4px; padding: 0 5px; line-height: 17px;
  border: 1px solid currentColor; white-space: nowrap;
}
.item-situacao.amarelo { color: var(--aviso); }
.item-situacao.laranja { color: var(--laranja); }
.item-situacao.vermelho { color: var(--no); }
.item-situacao.verde { color: var(--ok); }
.item-situacao.bloqueado { color: var(--no); border-style: dashed; }
.lista-vazia { color: var(--fraco); text-align: center; padding: 40px 20px; font-size: 13px; }

.lista-rodape { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--line); background: var(--faixa); }
.eu-sou { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.eu-sou strong { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-sou span { color: var(--fraco); font-size: 11.5px; }
.rele { width: 9px; height: 9px; border-radius: 50%; background: var(--fraco); flex: 0 0 auto; }
.rele.ok { background: var(--ok); }
.rele.erro { background: var(--no); }

/* ----------------------------------------------------------- conversa -- */
/* O vazio é a tela de boas-vindas do WhatsApp Web, com a marca da casa. */
.vazio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--fraco); text-align: center; padding: 24px; border-bottom: 4px solid var(--accent); background: var(--rail); }
.vazio img { width: 88px; height: 88px; opacity: .9; }
.vazio-titulo { font-family: var(--marca); color: var(--muted); font-size: 20px; letter-spacing: 1px; text-transform: uppercase; }
.vazio-texto { max-width: 440px; font-size: 13.5px; line-height: 1.55; margin: 0; }
.vazio-atalhos { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: 12px; }
.vazio-atalhos kbd { font-family: var(--mono); border: 1px solid var(--line-forte); border-radius: 4px; padding: 1px 6px; color: var(--muted); margin-right: 4px; }
.painel { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.conversa-topo {
  display: flex; align-items: center; gap: 12px;
  height: 60px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); background: var(--faixa);
  flex: 0 0 auto;
}
.conversa-identidade { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; border-radius: var(--raio); }
/* `overflow: hidden` aqui é o que impede a chapa de etiquetas de passar por
   cima do relógio da janela quando a coluna do meio aperta: sem ele, os
   marcadores empurram o bloco inteiro e os dois se sobrepõem (04/09/2026). */
.conversa-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.conversa-quem { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.conversa-quem .marcadores { flex-wrap: nowrap; overflow: hidden; }
.conversa-nome { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-sub { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.conversa-sub .sub-texto { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.conversa-sub .marcadores { flex-wrap: nowrap; flex: 0 0 auto; }
.etiqueta { font-size: 11px; color: var(--muted); border: 1px solid var(--line-forte); border-radius: 4px; padding: 0 6px; white-space: nowrap; line-height: 17px; }
.etiqueta-estado.nova { color: var(--accent-forte); border-color: var(--accent); }
.etiqueta-estado.atendimento { color: var(--ok); border-color: var(--ok); }
.etiqueta-estado.aguardando { color: var(--aviso); border-color: var(--aviso); }
/* As fichas financeiras do topo: o que o atendente da cobrança precisa saber
   antes de escrever a primeira palavra. */
.chip-fin {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; border-radius: 999px;
  padding: 0 8px; line-height: 18px; border: 1px solid currentColor; white-space: nowrap;
}
.chip-fin::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-fin.verde { color: var(--ok); }
.chip-fin.amarelo { color: var(--aviso); }
.chip-fin.laranja { color: var(--laranja); }
.chip-fin.vermelho { color: var(--no); }
.conversa-janela {
  display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px 4px 8px; white-space: nowrap;
}
.semaforo { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.semaforo.verde { background: var(--ok); box-shadow: 0 0 0 3px rgba(77,163,111,.18); }
.semaforo.amarelo { background: var(--aviso); box-shadow: 0 0 0 3px rgba(201,162,39,.18); }
.semaforo.laranja { background: var(--laranja); box-shadow: 0 0 0 3px rgba(217,130,43,.2); }
.semaforo.vermelho { background: var(--no); box-shadow: 0 0 0 3px rgba(208,109,82,.18); }
.conversa-acoes { display: flex; gap: 4px; align-items: center; }

/* A busca dentro da conversa: a faixa que desce do cabeçalho, como no WhatsApp. */
.busca-conversa { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: var(--faixa); border-bottom: 1px solid var(--line); }
.busca-conversa .busca-caixa { flex: 1; height: 34px; }
.busca-conta { color: var(--fraco); font-size: 12px; font-family: var(--mono); min-width: 52px; text-align: right; }

.mensagens-area { flex: 1; min-height: 0; position: relative; display: flex; }
.mensagens {
  flex: 1; min-height: 0; overflow-y: auto; padding: 14px 7% 18px; display: flex; flex-direction: column; gap: 2px;
  background-color: var(--fundo-conversa);
  background-image: url("/estatico/fundo.svg");
  background-size: 240px 240px;
}
/* O separador do dia é a pílula que gruda no topo enquanto se rola. */
.dia {
  align-self: center; position: sticky; top: 4px; z-index: 2;
  color: var(--muted); font-size: 12px; margin: 10px 0 8px;
  background: var(--alto); border-radius: 8px; padding: 5px 12px; box-shadow: var(--balao-sombra);
}
.divisor-novas {
  align-self: stretch; text-align: center; margin: 10px -7%; padding: 5px 0;
  background: rgba(0,0,0,.35); color: var(--accent-forte); font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.balao {
  max-width: min(65%, 640px); padding: 6px 9px 8px; border-radius: var(--raio-balao); position: relative;
  white-space: pre-wrap; word-wrap: break-word; font-size: 14.2px; line-height: 1.38;
  box-shadow: var(--balao-sombra); margin-top: 2px;
}
.balao.entrada { align-self: flex-start; background: var(--balao-entrada); }
.balao.saida { align-self: flex-end; background: var(--balao-saida); }
/* A cauda só no primeiro balão de uma sequência do mesmo lado, como no
   WhatsApp: os seguidos ficam colados e sem ponta. */
.balao.cauda { margin-top: 10px; }
.balao.cauda.entrada { border-top-left-radius: 0; }
.balao.cauda.saida { border-top-right-radius: 0; }
.balao.cauda::before {
  content: ""; position: absolute; top: 0; width: 8px; height: 13px;
}
.balao.cauda.entrada::before { left: -8px; background: linear-gradient(to bottom left, var(--balao-entrada) 50%, transparent 50%); }
.balao.cauda.saida::before { right: -8px; background: linear-gradient(to bottom right, var(--balao-saida) 50%, transparent 50%); }
/* A hora e o visto ficam no canto de baixo, dentro do balão; o espaço reservado
   no fim do texto é o que impede a última palavra de passar por baixo deles. */
.balao .rodape {
  position: absolute; right: 8px; bottom: 4px; display: flex; gap: 4px; align-items: center;
  font-size: 11px; color: rgba(242,242,242,.55); white-space: nowrap; line-height: 1;
}
.balao .espaco-hora { display: inline-block; width: 52px; height: 1px; }
.balao.saida .espaco-hora { width: 72px; }
.balao.com-autor .espaco-hora { width: 130px; }
.balao .autor { color: rgba(242,242,242,.5); font-size: 11px; font-family: var(--sans); max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.balao .tipo { color: var(--muted); font-style: italic; }
.balao .citacao {
  border-left: 4px solid var(--accent-forte); background: rgba(0,0,0,.25); padding: 5px 9px; border-radius: 6px;
  margin: 1px -3px 6px; font-size: 13px; color: var(--muted); white-space: pre-wrap; max-height: 80px; overflow: hidden;
  cursor: pointer;
}
.balao.saida .citacao { border-left-color: #e8a074; }
.balao .erro { color: #f0a08b; font-size: 12px; margin-top: 4px; white-space: normal; }
/* O "visto" é desenhado em CSS, não em glifo: a casa não usa emoji nem enfeite tipográfico. */
.visto { display: inline-flex; align-items: center; height: 10px; }
.visto i { display: inline-block; width: 5px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 1px; }
.visto i + i { margin-left: -4px; }
.visto.aceito, .visto.sent { color: rgba(242,242,242,.45); }
.visto.delivered { color: rgba(242,242,242,.7); }
.visto.read { color: #ff9a5c; }
.visto.failed { color: var(--no); letter-spacing: 0; }
/* O balão achado pela busca da conversa, e o atual entre os achados. */
.balao.achado { box-shadow: 0 0 0 1px var(--aviso); }
.balao.achado-atual { box-shadow: 0 0 0 2px var(--aviso), 0 0 18px rgba(201,162,39,.35); }
.balao.piscando { animation: piscar 1.2s ease; }
@keyframes piscar { 0%, 100% { filter: none; } 30% { filter: brightness(1.6); } }

/* O possível comprovante: foto, PDF ou "já paguei" do cliente ganham o selo,
   para quem atende o financeiro não deixar passar. */
.selo-comprovante {
  display: flex; width: fit-content; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .2px;
  color: var(--ok); background: rgba(77,163,111,.12); border: 1px solid rgba(77,163,111,.45);
  border-radius: 999px; padding: 0 8px; margin: 1px 0 5px; line-height: 18px; white-space: nowrap;
}
.selo-comprovante svg { flex: 0 0 auto; }

/* O botão de descer: aparece quando o atendente subiu para ler o histórico. */
.descer {
  position: absolute; right: 18px; bottom: 16px; z-index: 5; width: 42px; height: 42px; border-radius: 50%;
  background: var(--alto); border: 1px solid var(--line-forte); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transition: background-color var(--troca), color var(--troca);
}
.descer:hover { background: var(--line); color: var(--text); }
.descer .badge { position: absolute; top: -6px; right: -4px; }

/* Sem conversa aberta, a coluna do cliente não ocupa lugar na tela larga. */
@media (min-width: 1280px) {
  .app.sem-lado { grid-template-columns: var(--lista, clamp(300px, 25vw, 380px)) minmax(0, 1fr); }
}
/* A faixa estreita de novo, para o que é declarado nesta seção: no bloco do
   layout lá em cima estas regras perderiam para as de cá, que vêm depois na
   folha — foi o que pôs a pílula da janela por cima do avatar no celular. */
@media (max-width: 767px) {
  .conversa-topo .conversa-janela { display: none; }
  .conversa-topo .avatar.avatar-topo { width: 36px; height: 36px; font-size: 13px; }
  .conversa-sub .chip-fin { display: none; }
  .conversa-sub .chip-fin.principal { display: inline-flex; }
  .conversa-sub .sub-texto { display: none; }
  /* Assumir, encerrar e reabrir vão para o menu de três pontos: no celular o
     botão de texto espremia o nome do cliente a "Marco...". */
  .conversa-acoes .botao { display: none; }
  .balao .selo-comprovante { font-size: 10.5px; }
}

/* ---------------------------------------------------------- compositor -- */
.resposta { background: var(--faixa); padding: 8px 14px 10px; border-top: 1px solid var(--line); flex: 0 0 auto; }
.resposta-aberta { display: flex; flex-direction: column; gap: 8px; }
.linha-texto { display: flex; gap: 4px; align-items: flex-end; }
.resposta textarea {
  flex: 1; resize: none; background: var(--alto); border: 1px solid transparent; border-radius: 22px;
  padding: 10px 16px; outline: none; min-height: 44px; max-height: 160px; line-height: 1.4;
  transition: border-color var(--troca), background-color var(--troca);
}
.resposta textarea:focus-visible { outline: none; }
.icone {
  background: none; border: 0; color: var(--muted); width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  transition: background-color var(--troca), color var(--troca);
}
.icone:hover, .icone.ativo { background: var(--alto); color: var(--text); }
.icone.apagado { color: var(--fraco); }
.icone.ativo { color: var(--accent-forte); }
.icone.pequeno { width: 28px; height: 28px; }
.icone:disabled { opacity: .5; cursor: default; }
/* Enviar e gravar dividem o mesmo lugar, como no WhatsApp: com a caixa vazia
   aparece o microfone; com texto, o avião de papel. */
.redondo {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; transition: background-color var(--troca), transform var(--troca);
}
.redondo:hover { background: var(--accent-forte); }
.redondo:active { transform: scale(.94); }
.redondo:disabled { opacity: .5; cursor: default; }
.icone.redondo { background: var(--accent); color: #fff; }
.icone.redondo:hover { background: var(--accent-forte); color: #fff; }
.icone.redondo.apagado { background: var(--alto); color: var(--fraco); }
.linha-texto.vazia .botao-enviar { display: none; }
.linha-texto:not(.vazia) #bGravar { display: none; }

/* As respostas rápidas mais usadas, à mão em cima da caixa — o que o WhatsApp
   Business chama de resposta rápida, sem precisar lembrar o atalho. */
.atalhos-rapidos { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.atalhos-rapidos::-webkit-scrollbar { display: none; }
.atalhos-rapidos button {
  flex: 0 0 auto; background: var(--card); border: 1px solid var(--line-forte); border-radius: 999px;
  padding: 4px 11px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
  transition: color var(--troca), border-color var(--troca);
}
.atalhos-rapidos button:hover { color: var(--text); border-color: var(--accent); }
.atalhos-rapidos .atalho { color: var(--accent-forte); font-family: var(--mono); margin-right: 5px; font-size: 12px; }

/* A assinatura: o atendente sabe, antes de enviar, com que nome o cliente lê. */
.assinando { font-size: 12px; color: var(--fraco); padding: 0 6px; }
.assinando strong { color: var(--accent-forte); font-weight: 600; }
.previa-assinatura { margin: 2px 0 0; max-width: 340px; }
/* A formatação do WhatsApp dentro do balão: o mesmo que o cliente vê. */
.balao strong { font-weight: 700; }
.balao s { opacity: .75; }

/* A citação: o que o atendente está respondendo, com o cancelar desenhado em CSS. */
.citando { display: flex; align-items: center; gap: 8px; background: var(--card); border-left: 4px solid var(--accent-forte); border-radius: 8px; padding: 7px 8px 7px 12px; }
.citando-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; color: var(--muted); }
.citando-corpo span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.citando-rotulo { color: var(--accent-forte); font-size: 11.5px; font-weight: 600; }
.fechar { position: relative; width: 28px; height: 28px; border: 0; background: none; border-radius: 50%; flex: 0 0 auto; }
.fechar::before, .fechar::after { content: ""; position: absolute; left: 8px; top: 13px; width: 12px; height: 2px; background: var(--muted); transform: rotate(45deg); }
.fechar::after { transform: rotate(-45deg); }
.fechar:hover { background: var(--alto); }

/* A seta de ações do balão: some até o mouse chegar, e nasce DENTRO do balão —
   fora dele a área de rolagem recortava os botões e o resultado ficava estranho. */
.balao .seta {
  position: absolute; top: 2px; right: 3px; width: 24px; height: 20px; padding: 0;
  border: 0; background: none; color: rgba(242,242,242,.6); border-radius: 6px;
  opacity: 0; transition: opacity var(--troca), background-color var(--troca), color var(--troca);
}
.balao:hover .seta, .balao .seta.aberta { opacity: 1; }
.balao .seta:hover, .balao .seta.aberta { background: rgba(0,0,0,.3); color: var(--text); }
.balao.tem-seta { padding-right: 26px; }

/* O menu vive no corpo da página, em posição fixa: dentro do balão ele seria
   recortado pela área que rola. */
.menu-balao {
  position: fixed; z-index: 60; min-width: 180px; padding: 6px 0;
  background: var(--alto); border: 1px solid var(--line-forte); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.55); display: flex; flex-direction: column;
}
.menu-balao button {
  background: none; border: 0; text-align: left; color: var(--text);
  padding: 9px 16px; font-size: 13.5px;
  display: flex; align-items: center; gap: 12px;
}
.menu-balao button:hover { background: var(--line); }
.menu-balao button svg { color: var(--muted); flex: 0 0 auto; }

/* O visor da foto: a imagem em tamanho grande, sobre o painel. */
.visor {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
/* A caixa acompanha a largura da imagem: barra e legenda coladas nela, e não
   esticadas de ponta a ponta da tela. */
.visor-caixa {
  display: flex; flex-direction: column; gap: 10px;
  width: fit-content; max-width: min(1100px, 100%); min-width: 320px;
}
.visor-topo { display: flex; align-items: center; gap: 12px; }
.visor-titulo { flex: 1; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor img { display: block; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 8px; }
.visor-legenda { color: var(--text); margin: 0; text-align: center; }
.fechar-claro::before, .fechar-claro::after { background: var(--text); }

/* Mídia dentro do balão. */
.balao img.foto { display: block; max-width: 100%; max-height: 360px; border-radius: 7px; margin: 0 -5px 4px; max-width: calc(100% + 10px); }
.balao img.figurinha { display: block; width: 130px; height: 130px; object-fit: contain; }
.balao audio { display: block; width: 280px; max-width: 100%; height: 38px; margin: 2px 0; }
.balao video { border-radius: 7px; }
.balao .documento { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.22); border-radius: 7px; padding: 9px 11px; color: var(--text); margin-bottom: 3px; }
.balao .documento:hover { background: rgba(0,0,0,.32); }
.balao .documento svg { color: var(--accent-forte); flex: 0 0 auto; }
.balao .pendente { color: var(--muted); font-style: italic; font-size: 12.5px; }

/* O teclado de emoji. */
.teclado { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.teclado-abas { display: flex; gap: 2px; margin-bottom: 6px; overflow-x: auto; }
.teclado-abas button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 4px 9px; font-size: 12px; white-space: nowrap; }
.teclado-abas button.ativo { color: var(--text); border-bottom-color: var(--accent-forte); }
.teclado-grade { display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 2px; max-height: 160px; overflow-y: auto; }
.teclado-grade button { background: none; border: 0; font-size: 22px; width: 36px; height: 36px; border-radius: 8px; line-height: 1; }
.teclado-grade button:hover { background: var(--alto); }

/* Gravação de áudio. */
.gravando { display: flex; align-items: center; gap: 10px; background: var(--alto); border-radius: 22px; padding: 5px 6px 5px 16px; }
.gravando-ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--no); animation: pulsar 1s infinite; }
.gravando-texto { flex: 1; color: var(--muted); }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.resposta textarea:focus { border-color: var(--accent); }
.resposta.invalido textarea { border-color: var(--no); }
.resposta-fechada { color: var(--muted); padding: 6px 4px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.resposta-fechada::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--no); flex: 0 0 auto; }

/* --------------------------------------------------------------- lado -- */
/* A gaveta do cliente é o "dados do contato" do WhatsApp: o rosto em cima e
   cartões embaixo — com a ficha do rastreamento, que é o que só a CAAD tem. */
.lado-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--fraco); margin: 0 0 10px; font-weight: 600; }
.lado-topo .lado-titulo { margin: 0; font-size: 13px; letter-spacing: .6px; color: var(--muted); }
.perfil { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; text-align: center; background: var(--rail); border-bottom: 8px solid var(--bg); }
.perfil-nome { font-size: 19px; font-weight: 500; margin-top: 6px; overflow-wrap: anywhere; }
.perfil-numero { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; }
.perfil-resumo { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.lado-cartao { padding: 14px 16px; border-bottom: 8px solid var(--bg); }
.lado-cartao:last-child { border-bottom: 0; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.ficha dt { color: var(--fraco); font-size: 12px; }
.ficha dd { margin: 0; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.entrada-inline { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 2px 0; outline: none; }
.entrada-inline:focus { border-bottom-color: var(--accent-forte); }
.anuncio { border: 1px solid var(--line); border-radius: var(--raio); padding: 8px 10px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.anuncio strong { color: var(--text); display: block; margin-bottom: 2px; }
.atribuir { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.atribuir .campo { flex: 1; }

/* ---------------------------------------------------------- marcadores -- */
/* A etiqueta de conversa: o mesmo semáforo da casa, agora como marcação que o
   atendente escolhe. Cor livre viraria hexadecimal digitado no formulário — o
   CSS conhece estas classes e mais nenhuma, e é isso que segura a identidade. */
.marcadores { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; min-width: 0; }
.marcador {
  font-size: 11.5px; border-radius: 999px; padding: 1px 8px; white-space: nowrap;
  border: 1px solid var(--line-forte); color: var(--muted); background: transparent;
}
.marcador.cobre { color: var(--accent-forte); border-color: var(--accent); }
.marcador.verde { color: var(--ok); border-color: var(--ok); }
.marcador.amarelo { color: var(--aviso); border-color: var(--aviso); }
.marcador.laranja { color: var(--laranja); border-color: var(--laranja); }
.marcador.vermelho { color: var(--no); border-color: var(--no); }
.marcador.azul { color: var(--azul); border-color: var(--azul); }
.marcador.cinza { color: var(--muted); border-color: var(--line-forte); }
/* Na gaveta, o marcador é botão: apagado enquanto não está na conversa. */
.marcadores-escolha .marcador { opacity: .42; transition: opacity var(--troca), background-color var(--troca); }
.marcadores-escolha .marcador:hover { opacity: .8; }
.marcadores-escolha .marcador.posta { opacity: 1; background: rgba(255,255,255,.05); }
.filtro-etiquetas { display: flex; gap: 5px; flex-wrap: wrap; }
.filtro-etiquetas .marcador { opacity: .55; }
.filtro-etiquetas .marcador.ativo { opacity: 1; background: rgba(255,255,255,.06); }
.lado-secao { margin: 0; }
.lado-nada { color: var(--fraco); font-size: 12px; margin: 6px 0 0; }
.item-alfinete { color: var(--fraco); display: inline-flex; }

/* A nota interna no fio da conversa: nem entrada nem saída — centrada, com a
   borda de aviso, para ninguém confundir com o que o cliente recebeu. */
.nota-fio {
  align-self: center; max-width: min(76%, 620px); background: rgba(40,33,10,.92);
  border: 1px dashed var(--aviso); border-radius: 10px; padding: 7px 12px; margin: 8px 0;
  font-size: 13px; color: var(--text); white-space: pre-wrap; word-wrap: break-word; box-shadow: var(--balao-sombra);
}
.nota-fio .nota-topo { display: flex; gap: 8px; align-items: center; color: var(--aviso); font-size: 11px; margin-bottom: 2px; font-weight: 600; }
.nota-fio .nota-hora { color: var(--fraco); margin-left: auto; font-weight: 400; }

/* O compositor em modo nota: a caixa muda de cor, para não sair recado por
   engano no lugar de resposta ao cliente. */
.resposta.modo-nota textarea { border-color: var(--aviso); background: rgba(201,162,39,.08); }
.resposta.modo-nota .botao-enviar { background: var(--aviso); color: #1a1a1a; }
.icone.ativo-nota { color: var(--aviso); background: var(--alto); }

/* As respostas rápidas que aparecem ao digitar `/atalho`. */
.sugestoes { background: var(--card); border: 1px solid var(--line); border-radius: 12px; max-height: 210px; overflow-y: auto; box-shadow: 0 -6px 18px rgba(0,0,0,.3); }
.sugestoes button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.sugestoes button:last-child { border-bottom: 0; }
.sugestoes button:hover, .sugestoes button.marcada { background: var(--alto); }
.sugestoes .atalho { color: var(--accent-forte); font-family: var(--mono); font-size: 12.5px; margin-right: 8px; }
.sugestoes .titulo { color: var(--text); font-size: 12.5px; }
.sugestoes .trecho { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* -------------------------------------------------- ficha do cliente -- */
/* Quem é quem escreve: cadastro no Nibo, dívida pelo INTENDENTE e veículo na
   Fulltrack. É espelho — a tela diz de quando ele é, e nunca consulta ao vivo. */
.ficha-cliente { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ficha-cliente .linha { display: flex; gap: 8px; align-items: baseline; }
.ficha-cliente .rotulo { color: var(--fraco); font-size: 12px; min-width: 78px; }
.ficha-cliente .valor { color: var(--text); overflow-wrap: anywhere; }
.ficha-cliente .divida { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.ficha-cliente .divida.verde { color: var(--ok); }
.ficha-cliente .divida.amarelo { color: var(--aviso); }
.ficha-cliente .divida.laranja { color: var(--laranja); }
.ficha-cliente .divida.vermelho { color: var(--no); }
.ficha-cliente .placa {
  font-family: var(--mono); border: 1px solid var(--line-forte); border-radius: 4px; padding: 1px 7px;
  margin: 0 4px 4px 0; font-size: 12px; background: var(--card); color: var(--text); display: inline-block;
  cursor: copy; transition: border-color var(--troca);
}
.ficha-cliente .placa:hover { border-color: var(--accent); }
.ficha-cliente .app-bloqueado { color: var(--no); }
.ficha-cliente .app-liberado { color: var(--ok); }
.ficha-cliente .inativo { color: var(--fraco); }
.ficha-cliente .por-nome { color: var(--aviso); font-size: 11.5px; }

/* ------------------------------------------------------- retomada -- */
/* A janela de 24 h fechada deixa de ser beco sem saída: ao lado do aviso vem o
   modelo aprovado, que é a única via oficial de reabrir. */
.resposta-fechada .botao { margin-left: auto; }
.janela-estreita { width: min(520px, 100%); }
.previa {
  background: var(--balao-saida); border-radius: 10px; border-top-right-radius: 0;
  padding: 9px 12px; white-space: pre-wrap; font-size: 13.5px; color: var(--text); box-shadow: var(--balao-sombra);
}
.previa-rotulo { display: block; color: rgba(242,242,242,.55); font-size: 11.5px; margin-bottom: 3px; }
.lista-agenda { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lista-agenda li { border: 1px solid var(--line); border-radius: var(--raio); padding: 7px 9px; font-size: 12.5px; }
.lista-agenda .quando { color: var(--accent-forte); font-family: var(--mono); font-size: 12px; }
.lista-agenda .trecho { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-agenda .falhou { color: var(--no); }
.lista-agenda button { background: none; border: 0; color: var(--muted); font-size: 12px; padding: 2px 0; }
.lista-agenda button:hover { color: var(--no); }
.lista-modelos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lista-modelos li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-modelos .nome { font-family: var(--mono); color: var(--accent-forte); }
.lista-modelos .trecho { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form.form-modelo { grid-template-columns: 1fr .5fr auto; }
.campo-largo { grid-column: 1 / -1; }
/* O balão de modelo se distingue do texto livre: foi a casa que iniciou. */
.balao.saida.template { border-left: 3px solid var(--accent-forte); }

/* ------------------------------------------------------------ gestão -- */
/* A medição do atendimento: cartões com o número grande, a fila de quem espera,
   e a barra por dia — sem biblioteca de gráfico, que não entraria na LAN. */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.cartao { background: var(--alto); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.cartao .numero { font-family: var(--mono); font-size: 22px; color: var(--text); display: block; margin: 2px 0; }
.cartao .rotulo { color: var(--fraco); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; }
.cartao .apoio { color: var(--muted); font-size: 12px; }
.cartao .numero.amarelo { color: var(--aviso); }
.cartao .numero.laranja { color: var(--laranja); }
.cartao .numero.vermelho { color: var(--no); }
.lista-paradas, .lista-atendentes, .lista-setores { list-style: none; padding: 0; margin: 0 0 14px; }
.lista-paradas li, .lista-atendentes li, .lista-setores li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px;
}
.lista-paradas button { background: var(--alto); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); padding: 3px 10px; font-size: 12px; }
.lista-paradas button:hover { color: var(--text); }
.lista-paradas .espera { font-family: var(--mono); color: var(--laranja); }
.lista-atendentes .conta { font-family: var(--mono); color: var(--muted); }
.lista-setores .conta { color: var(--fraco); font-size: 12px; }
/* Uma semana de barras, ou um dia só: a coluna tem teto de largura e a fila
   começa na esquerda — sem isso, um único dia virava dois retângulos gigantes
   ocupando a janela inteira (04/09/2026). */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: 6px; justify-content: flex-start; }
.barras .dia-barra { flex: 0 1 56px; max-width: 56px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; height: 100%; }
.barras .par { display: flex; gap: 2px; align-items: flex-end; width: 100%; height: 100%; justify-content: center; }
.barras .entrada, .barras .saida { width: 40%; border-radius: 3px 3px 0 0; min-height: 2px; }
.barras .entrada { background: var(--line-forte); }
.barras .saida { background: var(--accent); }
.barras .rotulo-dia { color: var(--fraco); font-size: 10.5px; font-family: var(--mono); }
.form.form-setor { grid-template-columns: 1fr auto; }
/* A conversa parada acende na lista: é o cliente que está esperando. */
.item-espera { color: var(--laranja); font-size: 11px; font-family: var(--mono); }

/* ---------------------------------------------------------- registro -- */
/* A aba Registro: tabela só de leitura, do gestor. Quatro vistas (ações,
   acessos, entrada do webhook, falhas) sobre quatro tabelas do banco. */
.registro-topo { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.abas-registro { flex: 0 0 auto; }
.busca-registro { flex: 1; min-width: 160px; padding: 6px 10px; font-size: 12.5px; background: var(--alto); border: 1px solid var(--line); border-radius: 8px; }
.cartoes-registro { margin-bottom: 10px; }
.avisos-registro { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.avisos-registro li { color: var(--aviso); font-size: 12.5px; padding-left: 14px; position: relative; }
.avisos-registro li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--aviso); }
.tabela-rolagem { overflow: auto; max-height: 52vh; border: 1px solid var(--line); border-radius: var(--raio); }
.tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tabela th { text-align: left; color: var(--fraco); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; padding: 7px 9px; border-bottom: 1px solid var(--line-forte); background: var(--card); position: sticky; top: 0; }
.tabela td { padding: 6px 9px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.tabela tr:hover td { background: var(--alto); }
.tabela .quando, .tabela .ip, .tabela .mono { font-family: var(--mono); white-space: nowrap; color: var(--muted); font-size: 12px; }
.tabela .ok { color: var(--ok); }
.tabela .ruim { color: var(--no); }
.tabela .morno { color: var(--aviso); }
.tabela .fraco { color: var(--fraco); }
/* Apagar o recado: discreto, ao lado da hora, só para quem pode. */
.nota-fio .nota-apagar { background: none; border: 0; color: var(--fraco); font-size: 11px; padding: 0 0 0 8px; }
.nota-fio .nota-apagar:hover { color: var(--no); }

/* ------------------------------------------------------------ ajustes -- */
/* A janela de ajustes: minha conta, usuários e configurações — no padrão da
   casa, uma janela isolada sobre a tela, e não uma página. */
.janela {
  position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.7);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: surgir .15s ease;
}
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.janela-caixa {
  width: min(780px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto;
  background: var(--card); border: 1px solid var(--line-forte); border-radius: 14px;
  padding: 16px 22px 22px; box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.janela-topo { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.janela-titulo { font-weight: 600; font-size: 16px; }
.abas { display: flex; gap: 2px; flex: 1; overflow-x: auto; }
.abas button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.abas button:hover { color: var(--text); }
.abas button.ativo { color: var(--text); border-bottom-color: var(--accent-forte); }
.aviso { color: var(--aviso); margin: 0 0 12px; font-size: 13px; }
.ok-texto { color: var(--ok); font-size: 12.5px; }
.form-estreito { max-width: 400px; }
/* `.form` (flex em coluna) vem depois na folha; o seletor duplo garante a grade. */
.form.form-linha { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto auto; gap: 10px; align-items: end; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.form-linha .campo-erro { grid-column: 1 / -1; }
.acoes-form { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.lista-contas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lista-contas li { display: grid; grid-template-columns: 1.4fr 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-contas li.inativo .conta-nome, .lista-contas li.inativo .conta-login { color: var(--fraco); }
.conta-nome { font-weight: 600; }
.conta-login { color: var(--muted); font-family: var(--mono); font-size: 12.5px; }
.conta-etiquetas { display: flex; gap: 6px; flex-wrap: wrap; }
.etiqueta-prov { color: var(--aviso); border-color: var(--aviso); }
.etiqueta-inativo { color: var(--fraco); }
.conta-acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.conta-acoes button, .conta-acoes select { background: var(--alto); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); padding: 3px 9px; font-size: 12px; }
.conta-acoes button:hover { color: var(--text); background: var(--line); }
.redefinir { display: flex; gap: 6px; align-items: center; grid-column: 1 / -1; }
.redefinir input { flex: 0 1 200px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12.5px; }
.lista-respostas, .lista-etiquetas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.lista-respostas li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-respostas .atalho { color: var(--accent-forte); font-family: var(--mono); }
.lista-respostas .trecho { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-etiquetas li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lista-etiquetas .quantas { color: var(--fraco); font-size: 12px; }
.form.form-respostas { grid-template-columns: .7fr 1fr 2fr auto; }
.form.form-etiqueta { grid-template-columns: 1.6fr .8fr auto; }
.form-respostas textarea, .campo textarea {
  background: var(--alto); border: 1px solid var(--line); border-radius: var(--raio);
  padding: 8px 10px; outline: none; width: 100%; resize: vertical; font: inherit;
}
.form-respostas textarea:focus, .campo textarea:focus { border-color: var(--accent-forte); }
.campo-config { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.campo-config > span { font-size: 13px; }
.campo-config small { grid-column: 1; color: var(--fraco); font-size: 11.5px; }
/* Texto que o cliente vai ler ocupa a linha inteira: em 90px ninguém revisa
   uma saudação. */
.campo-config-largo { grid-template-columns: 1fr; }
.campo-config textarea {
  grid-column: 1; width: 100%; background: var(--alto); border: 1px solid var(--line);
  border-radius: var(--raio); padding: 8px 10px; outline: none; resize: vertical; font: inherit;
}
.campo-config textarea:focus { border-color: var(--accent-forte); }
.campo-config input[type="time"] { background: var(--alto); border: 1px solid var(--line); border-radius: var(--raio); padding: 6px 8px; outline: none; }
.campo-config input[type="number"] { width: 90px; background: var(--alto); border: 1px solid var(--line); border-radius: var(--raio); padding: 6px 8px; text-align: right; outline: none; }
.campo-config input:focus { border-color: var(--accent-forte); }
.campo-config input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent-forte); justify-self: end; }
.campo-config.campo-invalido input { border-color: var(--no); }
.preferencias { margin-top: 22px; max-width: 520px; }
.espaco-topo { margin-top: 18px; }
.entrar-rodape.espaco-topo { margin-top: 18px; }
.atalhos-teclado { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12.5px; color: var(--muted); margin: 0; }
.atalhos-teclado dt kbd { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line-forte); border-radius: 4px; padding: 1px 6px; color: var(--text); white-space: nowrap; }
.atalhos-teclado dd { margin: 0; }
@media (max-width: 767px) {
  .janela { padding: 0; align-items: stretch; }
  .janela-caixa { max-height: none; height: 100%; border-radius: 0; border: 0; padding: 12px 14px; }
  .form.form-linha, .lista-contas li { grid-template-columns: 1fr 1fr; }
  .lista-contas li .conta-acoes { grid-column: 1 / -1; justify-content: flex-start; }
}

/* -------------------------------------------------------- componentes -- */
.form { display: flex; flex-direction: column; gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo > span { color: var(--fraco); font-size: 12px; }
.campo input, .campo select {
  background: var(--alto); border: 1px solid var(--line); border-radius: var(--raio); padding: 8px 10px; outline: none; width: 100%;
}
.campo input:focus, .campo select:focus { border-color: var(--accent-forte); }
.campo-invalido input { border-color: var(--no); }
.campo-erro { color: var(--no); font-size: 12.5px; margin: 2px 0 0; }
.botao {
  background: var(--alto); border: 1px solid var(--line-forte); border-radius: var(--raio);
  padding: 6px 13px; color: var(--text); transition: background-color var(--troca), border-color var(--troca);
  white-space: nowrap;
}
.botao:hover { background: var(--line); }
.botao:disabled { opacity: .5; cursor: default; }
.botao-primario { background: var(--accent); border-color: var(--accent-forte); color: #fff; }
.botao-primario:hover { background: var(--accent-forte); }
.botao-leve { background: transparent; }

/* O aviso que some sozinho: "número copiado", "notificações ligadas". */
.recado {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100;
  background: var(--alto); color: var(--text); border: 1px solid var(--line-forte); border-radius: 10px;
  padding: 9px 16px; font-size: 13px; box-shadow: 0 10px 28px rgba(0,0,0,.5); animation: surgir .15s ease;
}

/* ------------------------------------------------------------- entrar -- */
/* A tela de entrar ganha o fundo da conversa e a faixa de cobre no topo, como
   a abertura do WhatsApp Web — o cartão continua sendo o da casa. */
.tela-entrar {
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background-color: var(--fundo-conversa); background-image: url("/estatico/fundo.svg"); background-size: 240px 240px;
  position: relative;
}
.tela-entrar::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 200px; background: linear-gradient(var(--accent), rgba(160,85,38,0)); opacity: .35; pointer-events: none; }
/* A caixa de entrar respira: a 340px o lockup da casa (logo 54px + EMISSÁRIO a
   30px) encostava nas duas bordas. Aqui ele cabe com folga, e os campos ficam
   no tamanho de quem digita de pé, no balcão. */
.cartao-entrar {
  width: 100%; max-width: 420px; position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 36px 32px; display: flex; flex-direction: column; gap: 26px;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.cartao-entrar .marca-lockup { gap: 14px; }
.cartao-entrar .form { gap: 16px; }
.cartao-entrar .campo > span { font-size: 12.5px; }
.cartao-entrar .campo input { padding: 11px 13px; font-size: 14.5px; border-radius: 9px; }
.cartao-entrar .botao { padding: 11px 14px; font-size: 14.5px; border-radius: 9px; }

/* ---------------------------------------------------------- documento -- */
/* A política de privacidade: a única página pública, e a única com texto
   corrido de verdade. Fora dela a regra da casa continua sendo rótulo curto —
   aqui o documento é jurídico e precisa estar inteiro. Sem sublinhado e sem
   nada de fora da máquina, como o resto. */
.tela-documento { display: block; height: auto; }
.documento {
  max-width: 820px; margin: 0 auto; padding: 40px 24px 64px;
  font-size: 14px; line-height: 1.62;
}
.documento-topo { border-bottom: 1px solid var(--line); padding-bottom: 22px; margin-bottom: 8px; }
.documento-topo h1 {
  font-family: var(--marca); font-size: 23px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text); margin: 26px 0 6px; line-height: 1.25;
}
.documento-data { color: var(--fraco); margin: 0; font-size: 12.5px; }
/* O índice é uma faixa de atalhos, não uma coluna: a página é lida de cima a
   baixo, inclusive pelo revisor da Meta. */
.documento-indice {
  display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 22px 0 6px;
  padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--raio);
}
.documento-indice a {
  padding: 3px 9px; border: 1px solid var(--line-forte); border-radius: 999px;
  font-size: 12.5px; color: var(--muted); transition: color var(--troca), border-color var(--troca);
}
.documento-indice a:hover { color: var(--accent-forte); border-color: var(--accent); }
.documento section { margin-top: 34px; scroll-margin-top: 18px; }
.documento h2 {
  font-size: 16.5px; color: var(--accent-forte); margin: 0 0 12px;
  letter-spacing: .2px; font-weight: 600;
}
.documento h3 { font-size: 14px; color: var(--text); margin: 20px 0 6px; font-weight: 600; }
.documento p { margin: 0 0 12px; color: var(--muted); }
.documento strong { color: var(--text); font-weight: 600; }
.documento em { font-style: italic; }
.documento ul, .documento ol { margin: 0 0 12px; padding-left: 20px; color: var(--muted); }
.documento li { margin-bottom: 7px; }
/* Ficha do controlador e do encarregado: rótulo apagado, valor legível. */
.documento-dados { list-style: none; padding: 0; }
.documento-dados li {
  display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line); color: var(--text);
}
.documento-dados li > span:first-child {
  flex: 0 0 168px; color: var(--fraco); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px;
}
/* O que falta preencher antes de mandar à Meta fica gritando na tela, não num
   comentário que ninguém abre. */
.pendencia {
  background: transparent; color: var(--aviso); border: 1px dashed var(--aviso);
  border-radius: 4px; padding: 1px 7px; font-size: 12.5px;
}
.documento-tabela { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 13px; }
.documento-tabela th {
  text-align: left; color: var(--fraco); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 600; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-forte);
}
.documento-tabela td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); vertical-align: top; }
.documento-tabela tr > *:last-child { padding-right: 0; }
.documento-rodape {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--fraco); font-size: 12.5px;
}
.documento-rodape p { margin: 0; color: inherit; }
/* No celular o rótulo da ficha vira linha própria e a tabela não estoura. */
@media (max-width: 560px) {
  .documento { padding: 26px 16px 48px; }
  .documento-dados li > span:first-child { flex: 1 0 100%; }
  .documento-tabela, .documento-tabela tbody, .documento-tabela tr, .documento-tabela td { display: block; width: 100%; }
  .documento-tabela thead { display: none; }
  .documento-tabela tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .documento-tabela td { border: 0; padding: 2px 0; }
  .documento-tabela td:first-child { color: var(--text); }
}

/* O rodapé do cartão de entrar: é por ele que se chega à política sem ter conta. */
.entrar-rodape { margin: -8px 0 0; text-align: center; font-size: 12.5px; color: var(--fraco); }

/* ------------------------------------------------------------ ligação -- */
/* 29/10/2026: a ligação do WhatsApp toca na tela de quem está nela. O cartão
   fica no alto, por cima de tudo, até alguém atender, recusar ou o cliente
   desistir; a barra de baixo é de quem está falando. */
.toque {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 95;
  width: min(680px, calc(100vw - 32px)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--ok); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.6), 0 0 0 4px rgba(77,163,111,.12);
  animation: surgir .15s ease;
}
.toque-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 200px; }
.toque-texto strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toque-rotulo { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; color: var(--ok); font-size: 12px; letter-spacing: .3px; }
.toque-pulso { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); animation: pulsar 1s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.toque-sub { color: var(--muted); font-size: 12.5px; }
.toque-acoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.toque-direcionar { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.toque-direcionar select { background: var(--alto); border: 1px solid var(--line-forte); border-radius: var(--raio); padding: 5px 8px; max-width: 160px; }
.botao-atender { background: var(--ok); border-color: var(--ok); color: #08130c; font-weight: 600; }
.botao-atender:hover { background: #5cb57e; }
.botao-recusar { background: transparent; border-color: var(--no); color: var(--no); }
.botao-recusar:hover { background: rgba(208,109,82,.14); }
.em-ligacao {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 94;
  display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--ok);
  border-radius: 999px; padding: 8px 10px 8px 16px; box-shadow: 0 12px 32px rgba(0,0,0,.55);
  max-width: calc(100vw - 32px);
}
.em-ligacao-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.em-ligacao.conectando .em-ligacao-ponto { background: var(--aviso); animation: pulsar 1s ease-in-out infinite; }
.em-ligacao-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.em-ligacao-tempo { color: var(--muted); font-size: 13px; }
#bMudo.ativo { color: var(--aviso); border-color: var(--aviso); }
.balao.chamada { font-style: italic; }
.balao.chamada audio { display: block; margin-bottom: 4px; }
.em-ligacao-gravando { display: inline-flex; align-items: center; gap: 5px; color: var(--no); font-size: 12px; }
.em-ligacao-gravando::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--no); animation: pulsar 1.4s ease-in-out infinite; }
.balao.chamada .icone-chamada { display: inline-block; margin-right: 6px; vertical-align: -2px; color: var(--ok); font-style: normal; }
.etiqueta-sem-marketing { color: var(--aviso); border-color: var(--aviso); }

/* ------------------------------------------------------------- avisos -- */
.sino { position: relative; }
.sino-badge { position: absolute; top: -4px; right: -6px; background: var(--no); }
.sino.grave { color: var(--no); }
.janela-espaco { flex: 1; }
.lista-avisos { list-style: none; margin: 12px 0 0; padding: 0; }
.lista-avisos li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.lista-avisos .nivel { grid-row: span 2; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: var(--fraco); }
.lista-avisos .nivel.grave { background: var(--no); }
.lista-avisos .nivel.atencao { background: var(--aviso); }
.lista-avisos .nivel.info { background: var(--ok); }
.lista-avisos .quando { color: var(--fraco); font-size: 12px; }
.lista-avisos li.novo .resumo { font-weight: 600; }
.lista-avisos .vazio-avisos { display: block; color: var(--muted); padding: 16px 0; }
@media (max-width: 767px) {
  .toque { top: 8px; }
  .toque-acoes { width: 100%; justify-content: flex-end; }
  .toque-direcionar { flex: 1 1 100%; }
  .toque-direcionar select { flex: 1; max-width: none; }
}

/* -------------------------------------------------------- aprendizado -- */
/* O manual que a análise das conversas escreve (29/10/2026), para o gestor ler. */
.apr-manual h3 { font-size: 13px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px; }
.apr-manual p { margin: 0 0 8px; line-height: 1.5; }
.apr-manual ul { margin: 0 0 8px; padding-left: 18px; line-height: 1.5; }
.apr-tema { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--alto); }
.apr-tema-topo { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.apr-tema-topo strong { font-size: 14.5px; }
.apr-vezes { color: var(--fraco); font-size: 12px; white-space: nowrap; }
.apr-tema .rotulo { color: var(--muted); font-size: 12px; margin-top: 8px; display: block; }
.apr-resposta { border-left: 3px solid var(--accent); padding: 6px 10px; margin: 6px 0; background: var(--card); border-radius: 0 6px 6px 0; white-space: pre-wrap; }
.apr-humano { color: var(--aviso); font-size: 13px; margin-top: 8px; }
.apr-faq dt { font-weight: 600; margin-top: 10px; }
.apr-faq dd { margin: 4px 0 0; color: var(--muted); }
.apr-rodada { border-bottom: 1px solid var(--line); padding: 12px 0; }
.apr-rodada-topo { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.apr-rodada .estado-ok { color: var(--ok); }
.apr-rodada .estado-erro { color: var(--no); }
.apr-rodada .estado-sem_novidade, .apr-rodada .estado-rodando { color: var(--fraco); }
.apr-numeros { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 12.5px; margin: 6px 0; }
.apr-vazio { color: var(--muted); padding: 18px 0; }
.apr-rodada .rotulo { color: var(--muted); font-size: 12px; display: block; margin-top: 6px; }

/* A transcrição do áudio e da ligação, recolhida embaixo do tocador. */
.transcricao { margin: 4px 0 2px; font-size: 13px; font-style: normal; }
.transcricao summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.transcricao p { margin: 4px 0 0; line-height: 1.45; white-space: pre-wrap; }
.transcricao .fala.cliente strong { color: var(--azul); }
.transcricao .fala.atendente strong { color: var(--accent-forte); }