/* Anycast Lite — identidade visual do produto.
   Como o modelo só entrega dados, todo o visual é decidido aqui.

   TEMA ESCURO POR TOKENS. Nenhuma cor literal fora do bloco :root — é a
   única forma de um tema escuro não vazar um `#fff` esquecido no meio de
   uma superfície preta. Se precisar de uma cor nova, crie um token.

   PROFUNDIDADE EM DOIS EIXOS. No claro, a hierarquia vem da sombra. No
   escuro a sombra some contra o fundo, então a hierarquia vem de:
     1. luminosidade  — cada camada acima é um pouco mais clara
     2. borda de 1px  — separa superfícies que estão quase no mesmo tom
   Empilhar sombra pesada num tema escuro só suja a tela. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* `hidden` VENCE QUALQUER `display`. O atributo esconde através de uma regra
   de agente de usuário (`[hidden] { display: none }`), que perde para
   qualquer seletor do autor — então um `#algo { display: flex }` deixa o
   elemento visível com `hidden` ainda posto, e o JS que faz `el.hidden =
   true` não surte efeito nenhum. Foi o que aconteceu com a barra de citação:
   o × chamava `limparResposta()`, o atributo era posto, e a barra continuava
   lá. Cada elemento escondível tinha a sua regra de par; faltou uma.
   Esta regra tira o problema da lista de coisas para lembrar. */
[hidden] { display: none !important; }

:root {
  /* Superfícies, da mais funda para a mais próxima. A escada de
     luminosidade é curta de propósito: no escuro, saltos grandes viram
     listras: o olho lê "faixa cinza", não "camada". */
  --bg:      #080b11;   /* lateral, fundo de código */
  --sup:     #0c1017;   /* área de trabalho */
  --card:    #121824;   /* cartões, balões, barra de topo */
  --card2:   #18202f;   /* hover e elevação */

  /* Bordas. `--linha` separa; `--linha2` destaca. */
  --linha:   #1e2634;
  --linha2:  #2c374b;

  /* Texto em três pesos. Contraste conferido sobre --card:
     --texto 14.8:1, --suave 6.1:1, --fraco 3.4:1 — o último só para
     rótulo e metadado, nunca para conteúdo. */
  --texto:   #e8ecf3;
  --suave:   #8a94a9;
  --fraco:   #5a6478;

  /* Um acento só, e as semânticas. Tons dessaturados de propósito: cor
     pura sobre preto vibra e cansa em tela cheia. */
  --azul:    #6183fc;
  --azul2:   #8ba3ff;
  --sobre-acento: #fff;   /* texto sobre superfície de acento */
  --linha3:  #3b4860;     /* scrollbar sob o cursor */

  /* Rodapé de arquivos gerados: altura FIXA de 3 linhas, o resto rola.
     `--pa-linha` é a altura real de um item (medida, não chutada); se o
     padding do item mudar, é este número que acompanha. */
  --pa-linha: 34px;
  --pa-visiveis: 3;
  --verde:   #34d399;
  --vermelho:#f87171;
  --vermelho2:#ef4444;  /* hover do botão destrutivo */
  --amarelo: #fbbf24;
  --roxo:    #a78bfa;

  /* O navegador desenha scrollbar, seleção e controles nativos a partir
     disto. Sem ele, um <select> aparece branco no meio do tema escuro. */
  color-scheme: dark;
}

body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--sup); color: var(--texto);
  display: flex; height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Números de métrica alinhados em coluna. Sem isto, "1.204" e "998" dançam
   um em cima do outro quando o painel atualiza ao vivo. */
.kpi-v, .legenda b, .prog-val, td, .barra-v { font-variant-numeric: tabular-nums; }

::selection { background: rgba(97, 131, 252, .32); }

/* Scrollbar discreta: no escuro, a barra clara do sistema vira um risco
   branco atravessando a tela. */
* { scrollbar-width: thin; scrollbar-color: var(--linha2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linha2); border-radius: 99px;
  border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--linha3); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------- lateral ---------- */
#lateral {
  width: 268px; flex-shrink: 0; background: var(--bg); color: var(--suave);
  border-right: 1px solid var(--linha);
  padding: 18px 14px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
#lateral-cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 16px;
}
/* A MARCA É IMAGEM, não texto.
   `height` fixa e `width:auto` para o logo escalar pela altura — a barra
   muda de largura na animação de recolher, e largura fixa espremeria o
   desenho no meio do caminho. */
.marca { height: 26px; width: auto; display: block; }
.marca-mini { height: 26px; width: auto; display: none; }
#recolher-lateral {
  flex-shrink: 0; border: 1px solid var(--linha); background: var(--card);
  color: var(--fraco); cursor: pointer; width: 26px; height: 26px;
  border-radius: 7px; font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .28s ease;
}
#recolher-lateral:hover { background: var(--card2); color: var(--texto); }

/* RECOLHIDA VIRA TRILHO, não some.
   Esconder a lateral por completo tira junto o botão que a traria de volta —
   e aí o único caminho é recarregar a página. O trilho de 52px mantém o
   controle sempre visível. */
body.lateral-recolhida #lateral {
  width: 52px; padding-left: 8px; padding-right: 8px; overflow: visible;
}
body.lateral-recolhida #lateral > *:not(#lateral-cab):not(#canais-rail) { display: none; }
/* Recolhida, o símbolo entra no lugar do logo — e o botão continua ali,
   embaixo, porque é o único caminho de volta. Em 52px os dois não cabem lado
   a lado, então a coluna empilha. */
body.lateral-recolhida #lateral-cab {
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 14px;
}
body.lateral-recolhida .marca { display: none; }
body.lateral-recolhida .marca-mini { display: block; height: 28px; }
body.lateral-recolhida #recolher-lateral { transform: rotate(180deg); }

/* Trilho recolhido: canais viram ícones circulares, como Slack/Discord.
   Tooltip via ::after — só aparece quando recolhido, sem JS. */
#canais-rail { display: none; }
#canais-rail[hidden] { display: none !important; }
body.lateral-recolhida #canais-rail {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; list-style: none; margin: 0; padding: 0;
}
#canais-rail button {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--linha); background: var(--card); color: var(--suave);
  cursor: pointer; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
  position: relative;
}
#canais-rail button svg { width: 16px; height: 16px; }
#canais-rail button:hover { border-color: var(--azul); color: var(--azul); transform: scale(1.06); }
#canais-rail button.ativo {
  border-color: var(--azul); background: var(--azul); color: #fff;
}
#canais-rail button[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%);
  background: var(--card2); color: var(--texto); border: 1px solid var(--linha2);
  padding: 5px 9px; border-radius: 7px; font-size: 12px; font-weight: 500;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .12s; z-index: 80;
}
#canais-rail button:hover[data-tooltip]::after { opacity: 1; }
#lateral { transition: width .28s ease, padding .28s ease; }
.campo { display: block; margin-bottom: 10px; }
.campo span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--fraco); font-weight: 600;
}
.campo input {
  width: 100%; margin-top: 5px; padding: 8px 9px; border-radius: 8px;
  border: 1px solid var(--linha); background: var(--card); color: var(--texto);
  font-size: 13px; transition: border-color .15s;
}
.campo input:hover { border-color: var(--linha2); }

/* Dropdown de workspace — visual premium, sem select nativo. */
.ws-dropdown { position: relative; }
.ws-btn {
  width: 100%; margin-top: 5px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--linha); background: var(--card); color: var(--texto);
  font-size: 13px; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ws-btn:hover { border-color: var(--linha2); background: var(--card2); }
.ws-btn:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.ws-btn[aria-expanded="true"] {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(97, 131, 252, .14);
}
.ws-btn svg { margin-left: auto; flex-shrink: 0; color: var(--fraco); transition: transform .2s ease; }
.ws-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ws-lista {
  position: absolute; top: calc(100% + 5px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--linha2); border-radius: 11px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
  max-height: 248px; overflow-y: auto;
  opacity: 0; transform: translateY(-5px) scale(.985);
  transform-origin: top;
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}
.ws-lista.aberto { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.ws-lista li {
  padding: 8px 10px; border-radius: 7px; cursor: pointer;
  font-size: 13px; color: var(--texto);
  display: flex; align-items: center; gap: 8px; line-height: 1.3;
  transition: background .12s;
}
.ws-lista li:hover, .ws-lista li.foco { background: var(--card2); }
.ws-lista li.ativo { font-weight: 600; }
.ws-lista li.ativo svg { flex-shrink: 0; color: var(--azul); }
.ws-lista li small { color: var(--fraco); font-weight: 400; font-size: 11.5px; }
.ws-lista li.ws-novo {
  border-top: 1px solid var(--linha2); margin-top: 3px;
  color: var(--azul); font-weight: 500; border-radius: 0 0 7px 7px;
}
.ws-lista li.ws-novo svg { flex-shrink: 0; color: var(--azul); }

.secao-lat {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--fraco); margin: 18px 0 6px; font-weight: 700;
}
#canais, #agendamentos { list-style: none; }
#canais li {
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--suave);
  transition: background .13s, color .13s;
}
#canais li:hover { background: var(--card); color: var(--texto); }
#canais li.ativo {
  background: var(--azul); color: var(--sobre-acento); font-weight: 600;
  box-shadow: 0 2px 12px rgba(97, 131, 252, .3);
}
#canais li.sub { padding-left: 20px; font-size: 13px; }
.can-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#canais li i {
  display: inline-flex; align-items: center; margin-left: auto;
  color: var(--azul); opacity: .75; cursor: default;
}
#canais li i + b { margin-left: 0; }
#canais li b { margin-left: auto; font-size: 11px; opacity: .55; font-weight: 500; }
/* SINAL DE NÃO LIDAS. Ponto azul + nome destacado no canal; no trilho
   recolhido, ponto no canto do círculo. */
.ponto-novo {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul); margin-left: auto;
  box-shadow: 0 0 0 3px rgba(97, 131, 252, .18);
}
#canais li .ponto-novo + b { margin-left: 0; }
#canais li.nao-lido .can-nome { color: var(--texto); font-weight: 600; }
#canais-rail button { position: relative; }
#canais-rail button .ponto-rail {
  position: absolute; top: -3px; right: -3px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--azul); border: 2px solid var(--bg);
}

/* Ações do canal (`+` novo subcanal, `✕` apagar) — surgem no hover.
   Escondidas por `opacity`, e não `display:none`, para o contador de
   mensagens não pular de posição quando o mouse entra: o espaço já está
   reservado. */
.acoes-canal {
  display: flex; gap: 1px; flex-shrink: 0; margin: -3px -4px -3px 0;
  opacity: 0; transition: opacity .13s;
}
#canais li:hover .acoes-canal, #canais li:focus-within .acoes-canal { opacity: 1; }
/* Em toque não existe hover: sem isto os botões seriam inalcançáveis. */
@media (hover: none) { .acoes-canal { opacity: 1; } }
.acoes-canal:empty { display: none; }

.add-sub, .del-canal {
  width: 20px; height: 20px; border: 0; border-radius: 6px;
  background: transparent; color: var(--fraco); cursor: pointer;
  font-size: 14px; line-height: 1; display: flex;
  align-items: center; justify-content: center;
  transition: background .13s, color .13s;
}
.add-sub { font-size: 15px; }
.add-sub:hover { background: var(--linha2); color: var(--texto); }
/* Vermelho só no hover: destrutivo não pode gritar antes da intenção, mas
   precisa avisar no instante em que o dedo chega. */
.del-canal:hover { background: rgba(248, 113, 113, .16); color: var(--vermelho); }

#canais li.ativo .add-sub, #canais li.ativo .del-canal {
  color: rgba(255, 255, 255, .75);
}
#canais li.ativo .add-sub:hover {
  background: rgba(255, 255, 255, .2); color: var(--sobre-acento);
}
#canais li.ativo .del-canal:hover {
  background: rgba(248, 113, 113, .85); color: var(--sobre-acento);
}

/* Botão de ação destrutiva no modal. */
#modal-ok.perigo { background: var(--vermelho); box-shadow: none; }
#modal-ok.perigo:hover { background: var(--vermelho2); }
#modal-form label[hidden] { display: none; }
#modal-form #modal-cancelar[hidden] { display: none; }
#modal-texto code {
  background: var(--card2); color: var(--suave);
  padding: 1px 5px; border-radius: 4px; font-size: 11.5px;
}
.btn-sec {
  background: none; border: 1px dashed var(--linha2); color: var(--fraco);
  padding: 7px; border-radius: 8px; cursor: pointer; font-size: 12px;
  margin-top: 4px; transition: border-color .15s, color .15s;
}
.btn-sec:hover { border-color: var(--azul); color: var(--azul2); }

.ag {
  padding: 9px 10px; border-radius: 8px; background: var(--card);
  border: 1px solid var(--linha); margin-bottom: 6px; font-size: 12.5px;
  color: var(--texto);
}
.ag .meta { display: block; color: var(--fraco); font-size: 11px; margin: 3px 0 6px; }
.ag button {
  background: var(--card2); border: 1px solid var(--linha2); color: var(--suave);
  padding: 4px 9px; border-radius: 6px; cursor: pointer; font-size: 11px;
  transition: background .15s, color .15s;
}
.ag button:hover { background: var(--linha2); color: var(--texto); }
.tag {
  font-size: 9.5px; padding: 2px 7px; border-radius: 99px;
  font-weight: 700; margin-left: 5px; letter-spacing: .3px;
}
.tag.v { background: rgba(52, 211, 153, .14); color: var(--verde); }   /* script: barato */
.tag.a { background: rgba(251, 191, 36, .14); color: var(--amarelo); } /* agente: custa LLM */
.vazio-lat { color: var(--fraco); font-size: 12px; padding: 4px 9px; }
/* RODAPÉ DA LATERAL — a CONTA.
   Antes eram três links soltos empilhados (`administração`, `configurações`,
   `sair`), sem dizer a quem pertenciam. Agora é um chip de identidade na
   base: foto/iniciais, nome, e-mail — e o menu que sobe dele reúne o que diz
   respeito à conta. */
.rodape-lateral { margin-top: auto; display: flex; flex-direction: column; }

#usuario { position: relative; margin-top: 8px; }
#usuario-chip {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: 0; border-radius: 8px;
  background: transparent; color: var(--texto); cursor: pointer;
  font: inherit; text-align: left;
  transition: background .15s;
}
#usuario-chip:hover, #usuario-chip[aria-expanded="true"] {
  background: var(--card);
}
.avatar, #usuario-foto {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover;
}
.avatar {
  display: grid; place-items: center;
  background: var(--azul); color: var(--sobre-acento);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.quem { min-width: 0; flex: 1; display: flex; flex-direction: column;
        line-height: 1.25; }
.quem b { font-size: 13px; font-weight: 600;
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem small { font-size: 11px; color: var(--fraco);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#usuario-chip > svg { color: var(--fraco); flex-shrink: 0; }

/* O menu SOBE do chip (a base da lateral não tem chão embaixo). */
#menu-usuario {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);
  z-index: 30; padding: 5px;
  background: var(--card); border: 1px solid var(--linha);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column;
}
#menu-usuario a {
  padding: 8px 10px; border-radius: 7px; text-decoration: none;
  font-size: 12.5px; color: var(--suave);
  transition: background .15s, color .15s;
}
#menu-usuario a:hover { background: var(--card2); color: var(--texto); }

.saude {
  margin-top: 10px; padding-top: 14px; font-size: 11.5px; color: var(--fraco);
  border-top: 1px solid var(--linha);
}
.saude .ok { color: var(--verde); }
.saude .alerta { color: var(--amarelo); }

/* ---------- primeiro acesso ---------- */
#boas-vindas {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(97, 131, 252, .12), transparent 70%),
    var(--bg);
}
#boas-vindas[hidden] { display: none; }
#form-ws {
  background: var(--card); border: 1px solid var(--linha); border-radius: 16px;
  padding: 32px 30px; width: 100%; max-width: 410px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
#bv-marca { height: 34px; width: auto; display: block; margin-bottom: 14px; }
#form-ws p { color: var(--suave); font-size: 13.5px; margin-bottom: 20px; }
#form-ws label span, #modal-rotulo {
  display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--fraco); margin-bottom: 6px; font-weight: 600;
}
#form-ws input, #modal-campo {
  width: 100%; padding: 11px 13px; border-radius: 9px; font-size: 14px;
  border: 1px solid var(--linha2); background: var(--sup); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
#form-ws input::placeholder, #modal-campo::placeholder { color: var(--fraco); }
#form-ws input:focus, #modal-campo:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(97, 131, 252, .18);
}
#form-ws small, #modal-form small {
  display: block; color: var(--fraco); font-size: 11.5px;
  line-height: 1.55; margin: 9px 0 0;
}
#form-ws small code, #modal-form small code {
  background: var(--card2); color: var(--suave); padding: 1px 5px;
  border-radius: 4px; font-size: 11px;
}
.bv-erro {
  color: var(--vermelho); background: rgba(248, 113, 113, .11);
  border: 1px solid rgba(248, 113, 113, .24);
  border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin: 12px 0 0;
}
.bv-erro[hidden] { display: none; }
#form-ws button {
  width: 100%; margin-top: 18px; padding: 12px; border: 0; border-radius: 9px;
  background: var(--azul); color: var(--sobre-acento); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(97, 131, 252, .28);
}
#form-ws button:hover { background: var(--azul2); }
#form-ws button:disabled { opacity: .5; cursor: progress; box-shadow: none; }

/* ---------- modal ---------- */
/* Mesmo vocabulário do primeiro acesso: é o mesmo tipo de momento — a
   interface para e pede uma coisa só. */
#modal {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 6, 10, .72); backdrop-filter: blur(3px);
  animation: modal-fundo .14s ease-out;
}
#modal[hidden] { display: none; }
@keyframes modal-fundo { from { opacity: 0; } }
#modal-form {
  background: var(--card); border: 1px solid var(--linha2); border-radius: 15px;
  padding: 26px 26px 22px; width: 100%; max-width: 430px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
}
@keyframes modal-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
#modal-form h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.2px; }
#modal-form > p { color: var(--suave); font-size: 13px; margin-bottom: 18px; line-height: 1.55; }
#modal-form > p[hidden] { display: none; }
#modal-form small[hidden] { display: none; }
.modal-acoes { display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px; }
.modal-acoes button {
  padding: 9px 18px; border: 0; border-radius: 8px; font-size: 13.5px;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
#modal-ok { background: var(--azul); color: var(--sobre-acento); box-shadow: 0 3px 14px rgba(97,131,252,.26); }
#modal-ok:hover { background: var(--azul2); }
#modal-ok:disabled { opacity: .5; cursor: progress; box-shadow: none; }
.btn-fraco { background: var(--card2); color: var(--suave); border: 1px solid var(--linha) !important; }
.btn-fraco:hover { background: var(--linha); color: var(--texto); }

/* ---------- principal ---------- */
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#corpo { flex: 1; display: flex; min-height: 0; }
#topo {
  background: var(--card); border-bottom: 1px solid var(--linha);
  padding: 13px 20px; display: flex;
  justify-content: space-between; align-items: center;
}
#topo b { letter-spacing: -.2px; }
.acoes button {
  background: var(--card2); border: 1px solid var(--linha2); color: var(--suave);
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: background .15s, color .15s;
  display: inline-flex; align-items: center; gap: 7px;
}
.acoes button svg { flex-shrink: 0; }
.acoes button:hover { background: var(--linha); color: var(--texto); }

/* ---------- chat ---------- */
#chat { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; position: relative; }
#mensagens { flex: 1; overflow-y: auto; padding: 22px 20px; }
.msg { display: flex; margin-bottom: 14px; }
.msg.user { justify-content: flex-end; }
.bolha {
  max-width: 74%; padding: 12px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--linha);
  font-size: 14.5px; overflow-wrap: anywhere; color: var(--texto);
}
.msg.user .bolha {
  background: var(--azul); border-color: transparent; color: var(--sobre-acento);
  border-bottom-right-radius: 6px;
  box-shadow: 0 3px 16px rgba(97, 131, 252, .22);
}
.msg.assistant .bolha { border-bottom-left-radius: 6px; }
.msg.erro .bolha {
  background: rgba(248, 113, 113, .1); color: var(--vermelho);
  border-color: rgba(248, 113, 113, .25);
}
.msg.pensando .bolha { color: var(--suave); animation: pulso 1.2s infinite; }
@keyframes pulso { 50% { opacity: .4; } }

/* --- selo de dia --------------------------------------------------------- */

/* PÍLULA, e não linha com rótulo. A linha é o vocabulário do divisor de
   novas mensagens, que INTERROMPE; o dia apenas organiza, e repetir a mesma
   forma nos dois faria o olho parar nas duas com o mesmo peso — numa
   conversa de duas semanas, treze paradas iguais e nenhuma hierarquia.
   Sem régua atravessando, a pílula se lê como etiqueta e sai do caminho. */
.selo-dia { display: flex; justify-content: center; margin: 14px 0 16px; }
.selo-dia span {
  background: var(--card2); border: 1px solid var(--linha);
  color: var(--suave); border-radius: 999px;
  padding: 3px 12px; font-size: 11.5px; font-weight: 600;
}

/* --- divisor de novas mensagens ----------------------------------------- */

/* VERMELHO, e não o azul do produto. Esta linha não é conteúdo: é um
   marcador de posição que precisa ser achado ao rolar uma conversa longa. O
   azul é a cor das MINHAS mensagens — a linha sumiria no meio delas.

   A régua é o próprio ::before esticado atrás do rótulo, e não um border no
   container: com border, o texto teria de ganhar fundo opaco para "furar" a
   linha, e esse fundo é o da superfície — que muda conforme o que está
   atrás. Assim a linha simplesmente não passa por baixo do rótulo. */
.divisor-novas {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 18px;
  /* `offsetTop` do scroll depende deste elemento ter posição conhecida
     dentro de #mensagens. Ver `carregarHistorico`. */
  position: relative;
}
.divisor-novas::before,
.divisor-novas::after {
  content: ''; flex: 1; height: 1px; background: var(--vermelho2);
}
.divisor-novas span {
  flex-shrink: 0;
  color: var(--vermelho); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
/* O scroll até o divisor usa `offsetTop`, que é medido a partir do ancestral
   POSICIONADO mais próximo. Sem isto, o ancestral seria algum elemento mais
   acima na árvore e o número viria deslocado — a rolagem pararia no lugar
   errado, ou no topo, dependendo do layout. */
#mensagens { position: relative; }

.bolha pre {
  background: var(--bg); color: var(--texto); padding: 12px; border-radius: 9px;
  overflow-x: auto; font-size: 12.5px; margin: 8px 0;
}
.bolha code {
  background: rgba(255, 255, 255, .07); padding: 1.5px 5px;
  border-radius: 4px; font-size: 13px; color: var(--azul2);
}
.msg.user .bolha code { background: rgba(255, 255, 255, .18); color: var(--sobre-acento); }
.bolha h1, .bolha h2, .bolha h3, .bolha h4 { margin: 12px 0 5px; line-height: 1.35; }
.bolha h1 { font-size: 17px; } .bolha h2, .bolha h3 { font-size: 15px; } .bolha h4 { font-size: 14px; }
.bolha ul, .bolha ol { margin: 6px 0; padding-left: 22px; }
.bolha li { margin: 3px 0; }
.bolha li > ul, .bolha li > ol { margin: 3px 0; }
.bolha a { color: var(--azul2); text-decoration: underline; word-break: break-word; }
.bolha.anexo { display: inline-flex; align-items: center; gap: 8px; }
.bolha.anexo svg { flex-shrink: 0; color: var(--azul2); }
.msg.user .bolha a { color: var(--sobre-acento); }
.bolha blockquote {
  margin: 8px 0; padding: 3px 13px; color: var(--suave);
  border-left: 3px solid var(--azul); background: rgba(97, 131, 252, .07);
  border-radius: 0 7px 7px 0;
}
/* Citação dentro da PRÓPRIA bolha. O molde padrão nasce para superfície
   escura: nele a borda e o fundo são DO azul do acento — sobre a bolha
   azul, somem, e o cinza --suave não tem contraste. Sobre o acento, a
   citação vira camada branca translúcida. */
.msg.user .bolha blockquote.citada {
  background: rgba(255, 255, 255, .16);
  border-left-color: rgba(255, 255, 255, .65);
  color: rgba(255, 255, 255, .88);
}
.msg.user .bolha blockquote.citada b { color: #fff; }
.bolha hr { border: 0; border-top: 1px solid var(--linha2); margin: 12px 0; }
.bolha table {
  border-collapse: collapse; margin: 9px 0; font-size: 13px; width: 100%;
  display: block; overflow-x: auto; max-width: 100%;
}
.bolha th, .bolha td { border: 1px solid var(--linha2); padding: 6px 9px; text-align: left; }
.bolha th { background: var(--card2); font-weight: 600; color: var(--suave); }
.bolha input[type=checkbox] { margin-right: 5px; vertical-align: -2px; accent-color: var(--azul); }
.bolha del { opacity: .55; }

/* code block com cabeçalho (linguagem + copiar) */
.codigo {
  margin: 9px 0; border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--linha2);
}
.codigo-topo {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 11px; background: var(--card2); color: var(--fraco);
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border-bottom: 1px solid var(--linha);
}
.copiar-codigo {
  border: 0; background: transparent; color: var(--fraco); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 3px 7px; border-radius: 5px;
  transition: background .15s, color .15s;
}
.copiar-codigo:hover { background: rgba(255, 255, 255, .08); color: var(--texto); }
.codigo pre { margin: 0; border-radius: 0; background: transparent; padding: 12px; }

.passos { display: block; margin-top: 8px; font-size: 11px; color: var(--fraco); }
.hora {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  text-align: right;
  color: var(--fraco);
}
.msg.user .bolha .hora { color: rgba(255, 255, 255, .65); }
.anexo a { color: var(--azul2); font-weight: 600; }

#entrada {
  display: flex; flex-direction: column; gap: 9px; padding: 14px 20px;
  background: var(--card); border-top: 1px solid var(--linha);
}
.linha-entrada { display: flex; gap: 10px; align-items: flex-end; }

/* ---------- anexos ---------- */
#anexar {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 11px;
  border: 1px solid var(--linha2); background: var(--sup); color: var(--suave);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
#anexar:hover { background: var(--card2); color: var(--azul2); border-color: var(--azul); }

#anexos { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
#anexos:empty { display: none; }
.anexo-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--sup); border: 1px solid var(--linha2);
  border-radius: 9px; padding: 6px 8px 6px 11px; font-size: 12.5px;
  max-width: 320px; animation: chip-entra .16s ease-out;
}
@keyframes chip-entra { from { opacity: 0; transform: translateY(4px); } }
.anexo-chip.falhou { border-color: rgba(248, 113, 113, .35); }
.anexo-chip.falhou .an-meta { color: var(--vermelho); }
.an-nome {
  color: var(--texto); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-meta { color: var(--fraco); font-size: 11px; flex-shrink: 0; }
.anexo-chip button {
  border: 0; background: none; color: var(--fraco); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 3px 4px; border-radius: 5px;
  flex-shrink: 0; transition: background .15s, color .15s;
}
.anexo-chip button:hover { background: var(--linha); color: var(--texto); }

/* Alvo de "arraste um arquivo para cá". Cobre o chat inteiro porque um
   alvo pequeno obriga a mirar — e ninguém mira arrastando. */
#soltar-aqui {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(97, 131, 252, .1); backdrop-filter: blur(2px);
  border: 2px dashed var(--azul); border-radius: 14px; margin: 10px;
  pointer-events: none;   /* senão o próprio overlay engole o `drop` */
}
#soltar-aqui[hidden] { display: none; }
#soltar-aqui span {
  background: var(--card); border: 1px solid var(--azul);
  color: var(--texto); font-weight: 600; font-size: 14px;
  padding: 11px 20px; border-radius: 11px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
}
#texto {
  flex: 1; resize: none; padding: 9px 14px;
  border: 1px solid var(--linha2); border-radius: 12px;
  font: inherit; font-size: 14.5px; outline: none;
  background: var(--sup); color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
#texto::placeholder { color: var(--fraco); }
#texto:focus { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(97, 131, 252, .16); }
#enviar {
  flex-shrink: 0; white-space: nowrap; height: 42px;
  background: var(--azul); color: var(--sobre-acento); border: 0; padding: 0 24px;
  border-radius: 12px; cursor: pointer; font-weight: 600;
  transition: background .15s;
  box-shadow: 0 3px 14px rgba(97, 131, 252, .26);
}
#enviar:hover { background: var(--azul2); }
#enviar:disabled { opacity: .45; cursor: wait; box-shadow: none; }

/* ---------- painel (sidebar à direita, colapsável) ---------- */
#painel {
  display: flex; flex-direction: column; min-width: 0;
  width: var(--painel-largura, 400px); flex-shrink: 0;
  border-left: 1px solid var(--linha); background: var(--sup);
  transition: width .28s ease, padding .28s ease, border-color .28s ease;
}
#painel[hidden] { display: none !important; }
#painel.recolhido { width: 0; padding: 0; overflow: hidden; border-left-color: transparent; }
/* Durante o arrasto a transição de width fica OFF: senão cada mousemove
   reinicia um ease de 280ms e o painel persegue o cursor com atraso —
   o resize parece "amarrado" no mouse. A animação de recolher/expandir
   continua valendo quando não há arrasto. */
body.arrastando-painel #painel { transition: none; }
#painel-cab {
  flex-shrink: 0; display: flex; justify-content: flex-start; gap: 6px;
  padding: 8px 10px; border-bottom: 1px solid var(--linha); background: var(--card);
}
#recolher-painel {
  border: 1px solid var(--linha2); background: var(--card2); color: var(--suave);
  cursor: pointer; line-height: 1;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
#recolher-painel:hover { background: var(--linha); color: var(--texto); }
#recolher-painel svg { flex-shrink: 0; }
#abrir-painel {
  border: 1px solid var(--linha2); background: var(--card2); color: var(--suave);
  cursor: pointer; line-height: 1;
  width: 30px; height: 30px; padding: 0; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s;
}
#abrir-painel:hover { background: var(--linha); color: var(--texto); border-color: var(--azul); }
#abrir-painel svg { flex-shrink: 0; }
#painel-conteudo { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; }

/* ---------- painel: arquivos gerados (rodapé) ---------- */
/* A altura vem da LISTA, não de uma fração do painel.
   Com `max-height: 42%` o rodapé chegava a 530px numa tela cheia — quase
   metade do painel ocupada por nomes de arquivo, sobrando pouco para o que
   se quer de fato ver. Agora ele mostra três e rola. */
#painel-arquivos {
  flex-shrink: 0; display: flex; flex-direction: column; min-height: 0;
  border-top: 1px solid var(--linha); background: var(--sup);
}
#painel-arquivos[hidden] { display: none; }
#pa-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--linha);
}
#pa-titulo {
  font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--suave); white-space: nowrap;
}
#pa-busca {
  flex: 1; min-width: 0; height: 28px; padding: 0 10px;
  background: var(--card2); border: 1px solid var(--linha2);
  border-radius: 7px; color: var(--texto); font-size: 12.5px;
  outline: none; transition: border-color .15s;
}
#pa-busca::placeholder { color: var(--fraco); }
#pa-busca:focus { border-color: var(--azul); }
#pa-lista {
  min-height: 0; overflow-y: auto; margin: 0;
  padding: 6px 8px; list-style: none;
  /* 3 linhas + o padding vertical da própria lista. Com menos de três
     arquivos a altura acompanha o conteúdo — nada de espaço vazio. */
  max-height: calc(var(--pa-linha) * var(--pa-visiveis) + 12px);
}
#pa-lista li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 7px;
}
#pa-lista li:hover { background: var(--card); }
#pa-lista .pa-pin {
  flex-shrink: 0; width: 24px; height: 24px; padding: 0;
  border: 0; background: none; border-radius: 6px;
  color: var(--fraco); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
#pa-lista .pa-pin:hover { background: var(--card2); color: var(--texto); }
#pa-lista .pa-pin.fixado { color: var(--azul); }
#pa-lista .pa-pin.fixado:hover { background: var(--card2); }
#pa-lista .pa-nome {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--texto); text-decoration: none;
  font-size: 13px;
}
#pa-lista .pa-nome:hover { color: var(--azul2); text-decoration: underline; }
#pa-lista .pa-tam { flex-shrink: 0; font-size: 11px; color: var(--fraco); }

/* DE ONDE VEIO O ARQUIVO.
   A lista passou a juntar duas pastas — `outbox/` (entrega, vale em todo
   canal) e `channels/<canal>/files/` (deste canal). Sem marcar, dois
   arquivos de mesmo nome e origens diferentes ficam indistinguíveis na
   tela, e "qual é o meu?" vira tentativa e erro.
   Discreto de propósito: é procedência, não estado — não compete com o
   nome do arquivo, que é o que se procura. */
#pa-lista .pa-origem {
  flex-shrink: 0; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px 5px; border-radius: 3px;
  color: var(--fraco); border: 1px solid var(--linha);
}
#pa-lista .pa-origem.entrega { color: var(--azul); border-color: var(--azul); opacity: .75; }
#pa-lista .pa-vazio { color: var(--fraco); font-size: 12.5px; justify-content: center; padding: 14px 6px; }
#pa-lista .pa-vazio:hover { background: none; }
#divisor-painel {
  width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent;
  transition: background .15s, width .28s ease, opacity .28s ease;
}
#divisor-painel.recolhido { width: 0; opacity: 0; }
#divisor-painel:hover, #divisor-painel.arrastando { background: var(--azul); }

@media (max-width: 900px) {
  #corpo { position: relative; }
  #divisor-painel { display: none; }
  #painel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(var(--painel-largura, 400px), 88vw); z-index: 10;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .5);
  }
  #lateral { display: none; }
  .cartao.half, .cartao.third { width: 100%; }
}

/* ---------- painel: estrutura ---------- */
.dash { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 15px; }
.dash-head { width: 100%; }
.dash-head h1 { font-size: 24px; font-weight: 800; letter-spacing: -.6px; }
.dash-head p { color: var(--suave); font-size: 13.5px; margin-top: 4px; }
.cartao {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 19px; overflow: hidden;
}
.cartao.full { width: 100%; }
.cartao.half { width: calc(50% - 7.5px); }
.cartao.third { width: calc(33.333% - 10px); }
.cartao.nu { background: none; border: 0; padding: 0; }
.cartao h2 {
  font-size: 12.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .6px; color: var(--suave); margin-bottom: 16px;
}
.cartao h2 small {
  float: right; text-transform: none; letter-spacing: 0;
  color: var(--fraco); font-weight: 600;
}
.clicavel { cursor: pointer; transition: transform .12s, border-color .12s; }
.clicavel:hover { transform: translateY(-2px); border-color: var(--linha2); }
.vazio { color: var(--fraco); font-size: 13px; }
.vazio-painel { text-align: center; padding: 70px 20px; color: var(--suave); }
.vazio-painel h2 { font-size: 17px; margin-bottom: 8px; color: var(--texto); }
.vazio-painel code { background: var(--card2); padding: 2px 6px; border-radius: 5px; font-size: 12px; }
.rolagem { max-height: 430px; overflow-y: auto; }

/* kpis */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 13px; }
.kpi {
  background: var(--card); border: 1px solid var(--linha); border-radius: 14px;
  padding: 16px; border-left: 4px solid var(--c);
}
.kpi-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--fraco); font-weight: 700;
}
.kpi-v { font-size: 28px; font-weight: 800; margin: 5px 0 2px; letter-spacing: -1.2px; }
.kpi-s { font-size: 12px; color: var(--suave); }
.kpi-d { font-size: 11.5px; font-weight: 700; margin-top: 4px; }
.kpi-d.up { color: var(--verde); }
.kpi-d.down { color: var(--vermelho); }

/* tabela */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--fraco); padding: 8px 9px; border-bottom: 1px solid var(--linha2);
  position: sticky; top: 0; background: var(--card); font-weight: 700;
}
td { padding: 9px; border-bottom: 1px solid var(--linha); color: var(--texto); }
tbody tr:hover { background: var(--card2); }

/* progresso */
.prog { margin-bottom: 15px; }
.prog-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.prog-val { color: var(--fraco); font-weight: 500; }
.prog-val b { color: var(--texto); }
.trilha { height: 9px; background: var(--card2); border-radius: 99px; overflow: hidden; }
.trilha i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }

/* prazos */
.prazos { list-style: none; }
.prazo {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--linha);
}
.prazo:last-child { border-bottom: 0; }
.prazo .ponto { width: 8px; height: 8px; border-radius: 99px; flex-shrink: 0; }
.prazo.urgente .ponto { background: var(--vermelho); box-shadow: 0 0 8px rgba(248,113,113,.6); }
.prazo.breve .ponto { background: var(--amarelo); }
.prazo.ok .ponto { background: var(--verde); }
.prazo b { font-size: 13.5px; }
.prazo .meta { display: block; font-size: 11.5px; color: var(--fraco); }
.prazo time { margin-left: auto; font-size: 11.5px; color: var(--fraco); white-space: nowrap; }
.prazo.urgente time { color: var(--vermelho); font-weight: 700; }

/* funil */
.funil { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.funil-b {
  display: flex; justify-content: space-between; align-items: center; color: var(--sobre-acento);
  padding: 10px 13px; border-radius: 8px; font-size: 13px; font-weight: 600; min-width: 110px;
}
.queda { font-size: 11.5px; color: var(--vermelho); font-weight: 700; }

/* atividade */
.atividade { list-style: none; }
.atividade li { display: flex; gap: 12px; padding: 7px 0; font-size: 13px; }
.atividade time { color: var(--fraco); font-size: 11.5px; min-width: 46px; }

/* gráficos */
.barras { display: flex; align-items: flex-end; gap: 9px; height: 210px; padding-top: 20px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.barra { width: 100%; border-radius: 5px 5px 0 0; min-height: 3px; transition: height .4s; }
.barra-v { font-size: 10.5px; font-weight: 700; color: var(--suave); margin-bottom: 4px; }
.barra-l { font-size: 10.5px; color: var(--fraco); margin-top: 7px; text-align: center; overflow-wrap: anywhere; }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 190px; height: 190px; flex-shrink: 0; }
.d-c1 { text-anchor: middle; font-size: 19px; font-weight: 800; fill: var(--texto); }
.d-c2 { text-anchor: middle; font-size: 11px; fill: var(--fraco); }
.legenda { list-style: none; flex: 1; min-width: 175px; }
.legenda li {
  display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  padding: 6px 0; border-bottom: 1px solid var(--linha);
}
.legenda li:last-child { border-bottom: 0; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.legenda b { margin-left: auto; }
.legenda span { color: var(--fraco); font-size: 11px; width: 34px; text-align: right; }
.linha { width: 100%; height: auto; }
.grade { stroke: var(--linha); stroke-width: 1; }
.eixo { font-size: 11px; fill: var(--fraco); text-anchor: end; }
.eixo.meio { text-anchor: middle; }
.pt-v { font-size: 10.5px; fill: var(--suave); text-anchor: middle; font-weight: 700; }
.md { font-size: 13.5px; line-height: 1.65; color: var(--texto); }

/* ---------- sinal de trabalho em curso ---------- */

/* TRÊS PONTOS SUBINDO, um desenho só para os três lugares (balão, topo,
   lateral). O atraso escalonado é o que faz a coisa parecer viva: os três
   pulsando juntos leem como um bloco piscando, que é o vocabulário de
   ALERTA — e isto não é alerta, é sinal de vida. */
.pontinhos { display: inline-flex; align-items: center; gap: 3px; }
.pontinhos i {
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .35;
  animation: pontinho 1.2s ease-in-out infinite;
}
.pontinhos i:nth-child(2) { animation-delay: .18s; }
.pontinhos i:nth-child(3) { animation-delay: .36s; }
@keyframes pontinho {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}
/* Quem pediu para não ver movimento não vê. Os pontos continuam lá, e a
   opacidade fixa ainda distingue "trabalhando" de "parado". */
@media (prefers-reduced-motion: reduce) {
  .pontinhos i { animation: none; opacity: .7; }
}

/* Na lateral só aparece no canal ocupado — e continua aparecendo depois que
   você sai dele, que é a única razão de existir deste. */
#canais .pontinhos { display: none; color: var(--azul); }
#canais li.trabalhando .pontinhos { display: inline-flex; }
/* O canal ABERTO tem fundo azul. Sem isto os pontos ficam azul sobre azul e
   somem justamente no canal que está trabalhando na sua frente. */
#canais li.ativo .pontinhos { color: var(--sobre-acento); }

/* No topo, segunda linha sob o nome do canal. */
#canal-trabalhando {
  display: flex; align-items: center; gap: 6px;
  margin-top: 1px; font-size: 11.5px; color: var(--azul);
}

/* ---------- streaming ---------- */
.cursor {
  display: inline-block; width: 8px; height: 15px; background: var(--azul);
  vertical-align: text-bottom; animation: piscar .9s steps(2) infinite;
  margin-left: 2px; border-radius: 1px;
}
@keyframes piscar { 50% { opacity: 0; } }
.passos-vivo:not(:empty) {
  margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--linha);
}
.passo {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: var(--fraco); padding: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.passo.feito { color: var(--verde); }
/* Ferramenta que voltou com erro. O laço já informa o modelo; aqui o
   usuário precisa ver que aquele passo não deu certo, senão o ✓ verde
   mente sobre o que aconteceu. */
.passo.falhou { color: var(--vermelho); }
.spin {
  width: 10px; height: 10px; border: 2px solid var(--linha2);
  border-top-color: var(--azul); border-radius: 99px;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.texto-vivo { display: inline; }

/* ---------- projeção ---------- */
/* `confiavel: false` obriga um aviso — a validação rejeita projeção fraca
   sem alerta, e aqui ele precisa saltar aos olhos. */
.aviso-prev {
  margin-top: 11px; padding: 10px 12px;
  background: rgba(251, 191, 36, .1); color: var(--amarelo);
  border: 1px solid rgba(251, 191, 36, .22);
  border-radius: 9px; font-size: 12.5px; font-weight: 600;
}
.ok-prev { margin-top: 10px; font-size: 11.5px; color: var(--fraco); }

/* ---------- estado vazio ---------- */
.vazio-chat {
  text-align: center; padding: 70px 24px; color: var(--suave);
  max-width: 520px; margin: 0 auto;
}
.vazio-chat h2 {
  font-size: 22px; color: var(--texto); margin-bottom: 10px;
  font-weight: 800; letter-spacing: -.4px;
}
.vazio-chat p { font-size: 14.5px; line-height: 1.65; }
.sugestoes { display: flex; flex-direction: column; gap: 9px; margin-top: 26px; }
.sugestoes button {
  background: var(--card); border: 1px solid var(--linha); padding: 13px 16px;
  border-radius: 11px; cursor: pointer; font-size: 14px; text-align: left;
  color: var(--texto); transition: border-color .15s, background .15s, transform .12s;
  display: inline-flex; align-items: center; gap: 10px;
}
.sugestoes button svg { flex-shrink: 0; color: var(--azul); opacity: .9; }
.sugestoes button:hover {
  border-color: var(--azul); background: var(--card2); transform: translateY(-1px);
}

/* ---------- prévia de arquivo ---------- */
/* OCUPA O LUGAR DO DASHBOARD, não a tela inteira do painel.
   A primeira versão era um overlay `position:absolute; inset:0` — e cobria
   junto a lista de arquivos gerados, que é justamente de onde se troca de
   arquivo. Você abria um relatório e perdia o caminho para o próximo.
   Aqui a prévia entra no mesmo slot flexível do `#painel-conteudo`: o
   cabeçalho fica, o rodapé de arquivos fica, só o miolo troca. */
#previa {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--sup);
}
#previa[hidden] { display: none; }
#previa-cab {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--card);
  border-bottom: 1px solid var(--linha);
}
#previa-nome {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  color: var(--texto); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* Só ícone: o nome do arquivo ao lado já é longo, e três rótulos de texto
   competiam com ele pela largura de um painel que pode estar em 380px.
   O `title`/`aria-label` carrega o significado para o cursor e o leitor
   de tela. */
.previa-btn {
  flex-shrink: 0; width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linha2); background: var(--card2);
  color: var(--suave); cursor: pointer; text-decoration: none;
  border-radius: 7px; transition: background .15s, color .15s;
}
.previa-btn:hover { background: var(--linha2); color: var(--texto); }
#previa-fechar:hover { background: rgba(248, 113, 113, .16); color: var(--vermelho); }
#previa-quadro {
  flex: 1; width: 100%; border: 0; min-height: 0;
  /* O documento de dentro tem fundo próprio; um relatório claro sobre o
     tema escuro fica melhor com base branca do que transparente. */
  background: var(--sobre-acento);
}
.pa-nome { cursor: pointer; }

/* O arquivo que está aberto fica marcado na lista — sem isso, com cinco
   relatórios parecidos, não dá para saber qual deles está na tela. */
#pa-lista li.vendo { background: var(--card2); }
#pa-lista li.vendo .pa-nome { color: var(--azul2); font-weight: 600; }

/* Caixa opcional do modal de confirmação.

   As regras do campo de texto acima são escopadas em `#modal-campo`, e não
   em `#modal-form input`. Com o seletor genérico, este checkbox herdava
   `width:100%` e virava um retângulo do tamanho do modal; o `<span>` ao
   lado herdava `display:block; text-transform:uppercase` da regra de
   rótulo e escorria para fora. Seletor amplo demais não dá erro — dá um
   layout quebrado no dia em que alguém acrescenta um segundo campo. */
#modal-caixa {
  display: flex; align-items: flex-start; gap: 9px; margin-top: 16px;
  padding: 10px 12px; border: 1px solid var(--linha2); border-radius: 9px;
  background: var(--sup); cursor: pointer; font-size: 13px;
  color: var(--suave); line-height: 1.45;
}
#modal-caixa[hidden] { display: none; }
#modal-caixa:hover { border-color: var(--vermelho); }
#modal-caixa input { accent-color: var(--vermelho); margin-top: 2px; flex-shrink: 0; }
#modal-caixa b { color: var(--texto); }


/* --- canal multiusuário ------------------------------------------------ */

/* Mensagem de OUTRA pessoa alinha à esquerda, como a do assistente.
   A direita é "eu": num canal de equipe, o lado da tela é o primeiro
   sinal de quem falou, antes de qualquer nome. */
.msg.user.outro { justify-content: flex-start; }
.msg.user.outro .bolha {
  background: var(--superficie-2, #232634);
  color: var(--texto);
  border-bottom-left-radius: 6px;
}
.msg.user.outro .bolha code { background: rgba(255, 255, 255, .10); color: inherit; }
.msg.user.outro .bolha a { color: var(--azul); }

/* O nome só aparece na TROCA de pessoa — ver o render. */
.msg { flex-wrap: wrap; }
.autor {
  width: 100%;
  font-size: 12px;
  font-weight: 600;
  color: var(--suave);
  margin: 2px 0 3px 4px;
}
.nao-verificado {
  font-weight: 400;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 176, 32, .15);
  color: #e0a53a;
  cursor: help;
}

/* Citação dentro da bolha. */
blockquote.citada {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--azul);
  background: rgba(255, 255, 255, .06);
  border-radius: 4px;
  font-size: 13px;
  color: var(--suave);
}
blockquote.citada b { display: block; color: var(--texto); font-size: 12px; }

/* O botão de responder só aparece no hover: um por mensagem, visível
   sempre, viraria uma coluna de ruído ao lado da conversa. */
.bolha { position: relative; }
.citar {
  position: absolute;
  top: 4px; right: 6px;
  opacity: 0;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: var(--sobre-acento, #fff);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .12s, background .12s;
}
.citar:hover { background: rgba(0, 0, 0, .55); }
.msg:hover .citar, .citar:focus { opacity: 1; }

/* Barra "respondendo a", acima do campo de texto. */
#respondendo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 6px;
  padding: 7px 10px;
  border-left: 3px solid var(--azul);
  background: rgba(255, 255, 255, .05);
  border-radius: 6px;
  font-size: 13px;
  color: var(--suave);
}
#respondendo b { color: var(--texto); }
#cancelar-resposta {
  border: 0; background: transparent; color: var(--suave);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
#cancelar-resposta:hover { color: var(--texto); }


/* --- cartão de aprovação ------------------------------------------------ */

/* Cor de alerta, e não a de acento: isto INTERROMPE. Um cartão que parece
   parte da conversa é um cartão que passa despercebido, e o agente fica
   parado três minutos esperando um clique que ninguém viu. */
.cartao-aprovacao {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid #e0a53a;
  border-left-width: 3px;
  border-radius: 8px;
  background: rgba(255, 176, 32, .08);
  font-size: 14px;
}
.cartao-aprovacao .cabeca { color: var(--texto); margin-bottom: 6px; }
.cartao-aprovacao .ha { float: right; font-size: 12px; color: var(--suave); }

/* O comando aparece INTEIRO e monoespaçado. Resumo truncado num pedido de
   aprovação é o mesmo que não mostrar: a pessoa aprova o que não leu. */
.cartao-aprovacao .resumo {
  display: block;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, .30);
  border-radius: 5px;
  font-size: 13px;
  word-break: break-all;
  white-space: pre-wrap;
}
.cartao-aprovacao .porque { margin: 0 0 10px; color: var(--suave); font-size: 13px; }
/* DE ONDE veio o pedido. A variante `arquivo` é a única com cor de alerta:
   o resto é informação, essa é decisão. */
.cartao-aprovacao .origem {
  margin: -4px 0 10px; font-size: 12.5px; line-height: 1.45;
  color: var(--suave);
}
.cartao-aprovacao .origem.arquivo {
  color: #f3c563; background: rgba(224,165,58,.10);
  border-left: 2px solid #e0a53a; padding: 6px 10px; border-radius: 4px;
}
.cartao-aprovacao .botoes { display: flex; gap: 8px; justify-content: flex-end; }
.cartao-aprovacao button {
  border: 0; border-radius: 6px; padding: 6px 16px;
  font-size: 13px; cursor: pointer;
}
.cartao-aprovacao button:disabled { opacity: .5; cursor: default; }

/* "Não" é o botão neutro e "Aprovar" é o colorido — mas NÃO é o primário da
   interface. Aprovar ação irreversível não deve ter a mesma aparência de
   "enviar mensagem": o gesto precisa custar um instante de atenção. */
.cartao-aprovacao .negar { background: rgba(255,255,255,.10); color: var(--texto); }
.cartao-aprovacao .aprovar { background: #e0a53a; color: #1a1a1a; font-weight: 600; }


/* Modo de trabalho longo. Discreto de propósito: é exceção, não o normal —
   e um controle chamativo convida a ligar sempre, que é como um teto vira
   decoração.

   Pílula e não caixinha solta: um checkbox nu encostado na borda esquerda
   não parece um controle do produto, parece sobra de formulário. A pílula
   tem estado visível de longe — apagada é exceção desligada, acesa avisa
   que ESTE turno vai ter tetos diferentes, que é exatamente o que se quer
   saber antes de apertar Enviar. */
#modo-longo {
  display: inline-flex; align-items: center; gap: 7px; width: fit-content;
  margin: 0 0 8px 2px; padding: 4px 11px 4px 8px;
  border: 1px solid var(--linha); border-radius: 999px;
  background: var(--card);
  font-size: 12px; color: var(--suave); cursor: pointer; user-select: none;
  transition: color .15s, border-color .15s, background .15s;
}
#modo-longo:hover { color: var(--texto); border-color: var(--linha2); }
/* `:has()` e não uma classe posta pelo JS: o estado JÁ existe no checkbox, e
   espelhá-lo numa classe cria uma segunda fonte da mesma verdade — que é
   exatamente o tipo de par que sai de sincronia quando alguém mexe no
   controle por outro caminho. Aqui o CSS lê o estado real. */
#modo-longo:has(input:checked) {
  color: var(--azul2); border-color: var(--azul);
  background: rgba(97, 131, 252, .12);
}
/* `accent-color` apontava para `--acento`, um token que NUNCA existiu. A
   declaração era inválida e o navegador caía no cinza padrão dele — o
   controle destoava do tema inteiro e parecia coisa de outro site. */
#modo-longo input {
  accent-color: var(--azul); cursor: pointer;
  margin: 0; width: 13px; height: 13px; flex-shrink: 0;
}