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

/* A PALETA NÃO MORA MAIS AQUI. Os dois temas, o acento, os sinais de estado,
   a forma e a densidade vivem em web/tokens.css, que é carregado antes deste
   arquivo e é lido também pelo /admin e pelo /config. Foi o que acabou com o
   produto ter duas caras: mudar uma cor aqui não mudava a tela de Consumo.

   (Havia aqui `--pa-linha` e `--pa-visiveis`, que limitavam a lista de
   arquivos a três linhas. Morreram com o rodapé: a lista virou aba e usa a
   altura que tiver.) */

/* Refinamentos visuais específicos para o modo claro */
body[data-tema="claro"] .cartao,
body[data-tema="claro"] .kpi,
body[data-tema="claro"] .rec-card-moderno,
body[data-tema="claro"] .rec-ficha-card,
body[data-tema="claro"] .rec-ficha-bloco-longo {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
}
body[data-tema="claro"] #modal-form,
body[data-tema="claro"] #ajuda-caixa,
body[data-tema="claro"] #novidades-caixa,
body[data-tema="claro"] #config-janela {
  box-shadow: 0 20px 50px rgba(15, 23, 42, .12);
}
body[data-tema="claro"] #lateral-fundo {
  background: rgba(15, 23, 42, .35);
}
body[data-tema="claro"] .msg.user .bolha {
  box-shadow: 0 2px 8px rgba(2, 32, 52, .18);
}
body[data-tema="claro"] .bolha code {
  background: rgba(15, 23, 42, .06);
  color: var(--azul2);
}
body[data-tema="claro"] .bolha pre {
  background: #f8fafc;
  border: 1px solid var(--linha);
}
body[data-tema="claro"] .marca,
:root[data-tema="claro"] .marca {
  content: url('/web/staffly-dark.svg');
}
body[data-tema="claro"] .marca-mini img,
:root[data-tema="claro"] .marca-mini img {
  content: url('/web/staffly-logo-dark.svg');
}
body[data-tema="claro"] #bv-marca,
:root[data-tema="claro"] #bv-marca {
  content: url('/web/staffly-dark.svg');
}
body[data-tema="escuro"] .marca {
  content: url('/web/staffly-white.svg');
}
body[data-tema="escuro"] .marca-mini img {
  content: url('/web/staffly-logo-white.svg');
}
body[data-tema="escuro"] #bv-marca {
  content: url('/web/staffly-white.svg');
}

@media (prefers-color-scheme: light) {
  body:not([data-tema="escuro"]) .cartao,
  body:not([data-tema="escuro"]) .kpi,
  body:not([data-tema="escuro"]) .rec-card-moderno {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .03);
  }
  body:not([data-tema="escuro"]) .marca {
    content: url('/web/staffly-dark.svg');
  }
  body:not([data-tema="escuro"]) .marca-mini img {
    content: url('/web/staffly-logo-dark.svg');
  }
  body:not([data-tema="escuro"]) #bv-marca {
    content: url('/web/staffly-dark.svg');
  }
  body:not([data-tema="escuro"]) .bolha code {
    background: rgba(15, 23, 42, .06);
    color: var(--azul2);
  }
  body:not([data-tema="escuro"]) .bolha pre {
    background: #f8fafc;
    border: 1px solid var(--linha);
  }
}

body {
  font: 15px/1.55 var(--sans);
  background: var(--sup); color: var(--texto);
  display: flex;
  /* `100dvh` encolhe quando o teclado do celular abre; `100vh` não, e por
     isso o input caía atrás do teclado. A primeira linha é o piso para quem
     não conhece `dvh`; a segunda vence onde existe. O JS ainda afina isso
     pela VisualViewport, que é a única medida exata em todo navegador. */
  height: 100vh; height: 100dvh;
  -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(14, 211, 136, .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;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.marca-mini img { height: 26px; width: auto; display: block; }
.marca-mini:hover { opacity: .8; }

/* O CHEVRON QUE FECHA. Vive no estado aberto, onde o símbolo está escondido:
   sem ele, recolher a lateral virou uma porta só de saída, que abria e nunca
   fechava.
   Discreto em repouso, pela mesma regra dos botões do painel: em repouso é
   só o ícone, a superfície aparece no hover e no foco. */
#recolher-lateral {
  flex-shrink: 0; width: var(--alt-ctrl); height: var(--alt-ctrl); padding: 0;
  border: 0; background: none; border-radius: var(--raio-ctrl);
  color: var(--fraco); cursor: pointer; opacity: .6;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s, opacity .15s;
}
#recolher-lateral:hover,
#recolher-lateral:focus-visible {
  opacity: 1; background: var(--card2); color: var(--texto);
}
body.lateral-recolhida #recolher-lateral { display: none; }

/* 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 (agora botão) entra no lugar do logo — clicá-lo é
   o caminho de volta. Em 52px não há linha para dois elementos, 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 .marca-mini img { height: 28px; }

/* 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: var(--sobre-acento);
}
#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(14, 211, 136, .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;
}
/* CABEÇALHO DOBRÁVEL da seção de tarefas.
   Herda `.secao-lat` para ficar idêntico aos outros títulos da lateral: a
   dobra é um comportamento novo, não um estilo novo. O que se acrescenta é
   a seta e a área de clique. */
.secao-dobra {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  text-align: left; font: inherit;
  /* `.secao-lat` já traz cor, caixa e espaçamento; só o `font` do botão
     precisa ser devolvido, porque o navegador o substitui. */
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--fraco); font-weight: 700;
}
.secao-dobra:hover { color: var(--suave); }
.dobra-seta { display: inline-block; transition: transform .15s; font-size: 13px; }
.secao-dobra.aberta .dobra-seta { transform: rotate(90deg); }
/* A contagem some quando é zero — "Tarefas agendadas 0" ocupa espaço para
   dizer que não há nada, o que a própria ausência já diz. */
.secao-dobra .aba-conta { margin-left: auto; }

/* AÇÕES DA TAREFA. "excluir" fica à direita, separado do "rodar agora": os
   dois são de um clique e um deles não tem volta. */
.ag-acoes { display: flex; gap: 6px; align-items: center; }
.ag button.ag-excluir { margin-left: auto; color: var(--fraco); }
.ag button.ag-excluir:hover {
  background: rgba(248, 113, 113, .12); border-color: var(--vermelho);
  color: var(--vermelho);
}

#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.ativo {
  background: var(--azul-ativo); color: var(--sobre-acento); font-weight: 600;
  box-shadow: 0 2px 12px rgba(14, 211, 136, .3);
}
#canais li.sub {
  margin-left: 15px;
  padding-left: 12px;
  border-left: 2px solid var(--linha2);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  color: var(--texto);  /* conteúdo na cor cheia; hierarquia fica no recuo — cinza em 13px some */
}
#canais li.sub:hover {
  border-left-color: var(--azul);
}
#canais li.sub.ativo {
  border-left-color: var(--sobre-acento);
}
/* COLAPSO DE SUBCANAIS. O pai com filhos ganha um caret: virar o caret
   expande/recolhe sem sair do lugar; clicar na linha segue abrindo o canal.
   Recolhido, os filhos nem entram no DOM — o contador no pai diz quanto
   está guardado. */
#canais li.tem-filhos .caret-canal {
  flex: none; width: 14px; height: 14px; padding: 0; margin-left: -2px;
  border: 0; background: none; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1; opacity: .7;
  transition: transform .15s ease;
}
#canais li.tem-filhos .caret-canal:hover { opacity: 1; }
#canais li.tem-filhos.recolhido .caret-canal svg { transform: rotate(-90deg); }
#canais li.tem-filhos.recolhido {
  color: var(--suave);
}
#canais li.tem-filhos .contador-filhos {
  margin-left: auto; margin-right: 2px;
  font-size: 10.5px; font-weight: 600; color: var(--suave);
  background: var(--card); border-radius: 999px; padding: 1px 6px;
}
#canais li.tem-filhos.ativo .contador-filhos {
  color: var(--sobre-acento); background: rgba(255, 255, 255, .18);
}
/* REORDENAÇÃO DE CANAIS (DRAG & DROP) */
#canais li[draggable="true"] {
  cursor: pointer;
  user-select: none;
}
#canais li.arrastando {
  opacity: 0.35;
  background: var(--card);
}
#canais li.drop-acima {
  border-top: 2px solid var(--azul) !important;
}
#canais li.drop-abaixo {
  border-bottom: 2px solid var(--azul) !important;
}
.can-drag-handle {
  display: inline-flex;
  align-items: center;
  color: var(--fraco);
  opacity: 0;
  cursor: grab;
  font-size: 11px;
  letter-spacing: -1px;
  margin-right: 3px;
  transition: opacity .12s ease;
  user-select: none;
}
#canais li:hover .can-drag-handle {
  opacity: 0.65;
}
#canais li .can-drag-handle:active {
  cursor: grabbing;
}
.can-ic-zap {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}
#canais li.canal-fixado-zap {
  margin-top: 10px;
  border-top: 1px solid var(--linha);
  padding-top: 7px;
}
/* O NOME OCUPA A SOBRA. `flex: 1` aqui não é estética: sem ele, o `.ponto-novo`
   e o `.acoes-canal` ficavam ambos com `margin-left: auto`, e duas margens
   automáticas DIVIDEM o espaço livre em vez de empurrar tudo para a direita —
   o ponto de "mensagem nova" acabava boiando no meio da linha, a 50px do nome
   e a 50px dos botões, parecendo enfeite solto. Com o nome crescendo, não
   sobra espaço para as margens automáticas repartirem, e a ordem fica
   determinística: nome, ponto, ícone, ações — todos encostados à direita. */
.can-nome {
  flex: 1; min-width: 0;
  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;
}
/* SINAL DE NÃO LIDAS — o único indicador da lista. Ponto azul + nome
   destacado no canal; no trilho recolhido, ponto no canto do círculo.
   As regras do `<b>` que ficava aqui saíram junto com ele: era o TOTAL
   histórico de mensagens, que competia com este ponto e não respondia a
   pergunta que a lista faz ("onde eu preciso olhar?"). */
.ponto-novo {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%;
  background: var(--azul);
  box-shadow: 0 0 0 3px rgba(14, 211, 136, .18);
}
/* PRESENÇA — quem está com o canal aberto agora. Verde porque é o
   vocabulário universal de "online", e distinto do azul que já significa
   "novidade" e do sinal de trabalho do agente. */
#canal-presenca {
  font-size: 10.5px; color: var(--verde);
  display: flex; align-items: center; gap: 4px; margin-top: 1px;
}
.ponto-online {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--verde); box-shadow: 0 0 0 3px rgba(52, 199, 89, .16);
}

#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 {
  /* ESPAÇO ENTRE CRIAR E EXCLUIR. Era `gap: 1px`: o "+" de novo subcanal e o
     "✕" de apagar ficavam encostados, e errar o alvo por um pixel apagava um
     canal em vez de criar um. Ação destrutiva não pode ser vizinha de porta
     da construtiva — o `gap` maior dá ao dedo uma margem de erro, e o
     `margin-left` empurra o par para a borda direita, longe do nome que a
     pessoa clica para navegar. */
  display: flex; gap: 6px; flex-shrink: 0;
  margin: -3px 0 -3px auto; padding-left: 8px;
  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; }
/* O EXCLUIR é o último e o mais afastado: some folga extra à esquerda dele,
   para que o gesto de apagar exija ir um pouco mais longe que o de criar. */
.del-canal { margin-left: 2px; }
.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; }

/* BADGE DO PLANO
   ------------------------------------------------------------------
   Três estados, e a cor é o alarme: neutro até 80%, âmbar na reta
   final, vermelho depois de estourar. O salto para âmbar acontece
   ANTES do limite de propósito — avisar quando já passou não é aviso,
   é constatação.

   `--pct` é escrito pelo JS e governa só a largura da barra; a cor sai
   das classes. Assim a barra anima sem o JS tocar em cor nenhuma. */
.badge-plano {
  display: flex; flex-direction: column; gap: 5px;
  margin: 8px 0 2px; padding: 8px 9px;
  border: 1px solid var(--linha); border-radius: 8px;
  background: transparent; text-decoration: none; color: inherit;
  transition: background .12s, border-color .12s;
}
.badge-plano:hover { background: var(--card2); border-color: var(--linha2); }
.badge-plano .bp-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
}
.badge-plano .bp-rotulo {
  font-size: 11px; color: var(--fraco); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.badge-plano .bp-num {
  font-size: 12px; font-weight: 600; color: var(--suave);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.badge-plano .bp-barra {
  height: 4px; border-radius: 3px; background: var(--linha);
  overflow: hidden;
}
.badge-plano .bp-barra i {
  display: block; height: 100%; border-radius: 3px;
  width: var(--pct, 0%); background: var(--suave);
  transition: width .3s ease, background .2s;
}
.badge-plano.atencao .bp-num,
.badge-plano.atencao .bp-barra i { background: var(--amarelo); }
.badge-plano.atencao .bp-num { background: none; color: var(--amarelo); }
.badge-plano.excedido .bp-num { color: var(--vermelho); }
.badge-plano.excedido .bp-barra i { background: var(--vermelho); }
.badge-plano.excedido { border-color: color-mix(in srgb, var(--vermelho) 34%, var(--linha)); }
/* SEM TETO (on demand): não há denominador, então não há porcentagem nem
   barra. Mostrar uma barra vazia sugeriria "quase nada usado" quando o
   certo é "não se mede assim". */
.badge-plano.sem-teto .bp-barra { display: none; }

/* Lateral recolhida: sobra a barra, que ainda comunica cor e proporção. */
body.lateral-recolhida .badge-plano { padding: 6px 4px; }
body.lateral-recolhida .badge-plano .bp-rotulo { display: none; }
body.lateral-recolhida .badge-plano .bp-num { font-size: 10px; margin: 0 auto; }

/* VERSÃO NO RODAPÉ LATERAL */
.versao-app-rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 6px; font-size: 11px;
}
.versao-app-rodape .v-num {
  color: var(--fraco); font-family: monospace; font-weight: 600;
}
.versao-app-rodape .btn-ver-novidades {
  border: 0; background: transparent; color: var(--azul2);
  font-size: 11px; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 2px;
}
.versao-app-rodape .btn-ver-novidades:hover { color: var(--texto); }
body.lateral-recolhida .versao-app-rodape { display: none; }

#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). */
/* 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% + 8px);
  z-index: 30; padding: 6px;
  background: var(--card); border: 1px solid var(--linha2);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 220px;
}
#menu-usuario a, #menu-usuario button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 500; color: var(--suave);
  background: transparent; border: 0; cursor: pointer;
  transition: background .13s, color .13s;
  text-align: left;
}
#menu-usuario a:hover, #menu-usuario button:hover {
  background: var(--card2); color: var(--texto);
}
#menu-usuario svg {
  flex-shrink: 0; color: var(--fraco);
  transition: color .13s;
}
#menu-usuario a:hover svg, #menu-usuario button:hover svg {
  color: var(--azul2);
}
#menu-usuario .menu-rotulo {
  flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#menu-usuario .menu-tag-status {
  font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 99px;
  background: var(--card2); color: var(--fraco); letter-spacing: .02em;
  margin-left: auto;
}
#menu-usuario .menu-tag-status.ativo {
  background: rgba(52, 211, 153, .14); color: var(--verde);
}

/* Bloco do seletor de tema no menu da conta */
.menu-tema-bloco {
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-tema-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fraco);
  padding: 2px 2px 0;
}
.menu-tema-rotulo svg {
  flex-shrink: 0;
  color: var(--fraco);
}
.seletor-tema {
  display: flex;
  align-items: center;
  background: var(--card2);
  border: 1px solid var(--linha2);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.btn-tema {
  flex: 1;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 5px 6px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--suave) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: all .12s ease;
  text-align: center !important;
}
.btn-tema:hover {
  color: var(--texto) !important;
}
.btn-tema.ativo {
  background: var(--card) !important;
  color: var(--texto) !important;
  font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2) !important;
}
.btn-tema svg {
  flex-shrink: 0;
  color: inherit !important;
}
.menu-divisor {
  height: 1px; background: var(--linha); border: 0; margin: 4px 6px;
}
#menu-usuario .menu-item-perigo {
  color: var(--suave);
}
#menu-usuario .menu-item-perigo:hover {
  background: rgba(248, 113, 113, .10); color: var(--vermelho);
}
#menu-usuario .menu-item-perigo svg {
  color: var(--fraco);
}
#menu-usuario .menu-item-perigo:hover svg {
  color: var(--vermelho);
}

.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(14, 211, 136, .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(14, 211, 136, .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; }
#bv-bloqueado {
  color: var(--suave); font-size: 14px; line-height: 1.55; margin-top: 8px;
}
#bv-bloqueado[hidden], #bv-criar[hidden] { display: none; }
#bv-bloqueado .bv-sair {
  display: inline-block; margin-top: 16px; color: var(--azul2);
  text-decoration: none; font-size: 13.5px;
}
#bv-bloqueado .bv-sair:hover { text-decoration: underline; }
/* `#bv-cancelar` fica FORA de `#bv-bloqueado`/`#bv-criar` (ver o HTML):
   precisa funcionar com qualquer um dos dois em tela. Seletor por
   `[type=submit]` no botão principal, de propósito — um `#form-ws button`
   genérico pintaria o Cancelar de azul também, já que os dois são
   `<button>` dentro do mesmo formulário. */
#bv-cancelar[hidden] { display: none; }
#bv-cancelar {
  width: 100%; margin-top: 12px; padding: 12px; border-radius: 9px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
#form-ws button[type="submit"] {
  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(14, 211, 136, .28);
}
#form-ws button[type="submit"]:hover { background: var(--azul2); }
#form-ws button[type="submit"]: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ó. */
/* z-index 76, ACIMA do `#modal-config` (75): o `pedirTexto` de "Novo canal"
   abre DE DENTRO da aba Canais — com 70 nascia atrás do config, invisível.
   Abaixo do `.criando` (80, primeiro acesso). Escala cheia um dia merece
   um gerenciador de pilha; hoje são estes três números. */
#modal {
  position: fixed; inset: 0; z-index: 76; 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(14, 211, 136,.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); }

/* LINK PÚBLICO DE ARQUIVO. O modal é o mesmo tipo de momento do `#modal` —
   a interface para e pede uma coisa só — então herda o mesmo invólucro e o
   mesmo botão primário; o que muda é o campo readonly em vez de editável. */
#modal-compartilhar {
  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-compartilhar[hidden] { display: none; }
#compartilhar-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);
}
#compartilhar-form h2 { font-size: 18px; font-weight: 800; margin-bottom: 6px; letter-spacing: -.2px; }
#compartilhar-form > p { color: var(--suave); font-size: 13px; margin-bottom: 18px; line-height: 1.55; }
#compartilhar-form > p[hidden] { display: none; }
#compartilhar-form label { display: block; font-size: 12px; color: var(--fraco); }
#compartilhar-form small[hidden] { display: none; }
#compartilhar-link {
  width: 100%; margin-top: 6px; padding: 10px 12px; box-sizing: border-box;
  border: 1px solid var(--linha2); border-radius: 9px;
  background: var(--card2); color: var(--texto); font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
#compartilhar-copiar { background: var(--azul); color: var(--sobre-acento); box-shadow: 0 3px 14px rgba(14, 211, 136,.26); }
#compartilhar-copiar:hover { background: var(--azul2); }
#compartilhar-revogar:hover { background: var(--vermelho); color: var(--sobre-acento); }

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

/* TOPO: avatar do workspace + nome em destaque, canal ao lado, e a presença
   na segunda linha. O nome do ESPAÇO é o contexto maior — é ele que o olho
   procura ao voltar para a aba; o canal é o endereço dentro dele. */
.topo-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
/* O avatar do workspace é o mesmo círculo do da conta, só que um pouco maior
   para ser a marca do espaço, não o retrato de quem fala. */
.topo-info .ws-avatar { width: 36px; height: 36px; font-size: 13px; }
.topo-canais {
  display: flex; flex-direction: column; min-width: 0; line-height: 1.3;
}
/* Bloco (não flex) de propósito: é o único jeito de `text-overflow: ellipsis`
   cortar o título inteiro quando workspace + canal não couberem — com filhos
   flex o conteúdo vaza em vez de truncar. Os filhos são inline. */
.topo-titulo {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-ws-nome {
  font-size: 14px; font-weight: 800; letter-spacing: -.2px;
  color: var(--texto); text-transform: uppercase;
}
.topo-sep { color: var(--fraco); font-size: 13px; margin: 0 5px; }
/* O canal, dentro do mesmo título, vem em segundo plano: quem fala agora é o
   workspace; o `#canal` é o lugar dentro dele. */
#topo .topo-titulo #canal-nome {
  font-size: 13px; font-weight: 600; color: var(--suave);
}
.acoes {
  display: flex; align-items: stretch; gap: 8px; flex-shrink: 0;
}
/* UMA CAIXA SÓ NA BARRA, e ela é o seletor de modo.
   Antes, lupa, ajuda e os quatro botões do painel tinham moldura e fundo
   permanentes: seis retângulos em fila, nenhum deles o assunto da tela, e o
   seletor de modo virava mais um no meio da cerca em vez de se destacar
   como o único controle de escolha ali. Em repouso eles são só o ícone; a
   superfície aparece no hover e no foco, que é quando ela informa algo.
   A borda transparente fica para o tamanho não pular quando isso acontece. */
.acoes button {
  background: transparent; border: 1px solid transparent; color: var(--suave);
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; line-height: 1;
  transition: background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-sizing: border-box;
}
.acoes button svg { flex-shrink: 0; }
.acoes button:hover, .acoes button:focus-visible {
  background: var(--card2); border-color: var(--linha2); color: var(--texto);
}
/* Lupa e ? herdam a ALTURA do painel (stretch) e viram quadrado — senão
   cada um inventava um tamanho e a fileira dançava. */
#abrir-busca,
#abrir-ajuda {
  aspect-ratio: 1;
  padding-inline: 0;
  font-size: 15px; font-weight: 700; letter-spacing: 0;
}

/* ---------- ajuda ---------- */
#modal-ajuda {
  position: fixed; inset: 0; z-index: 70; 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-ajuda[hidden] { display: none; }
#ajuda-caixa {
  background: var(--card); border: 1px solid var(--linha2); border-radius: 15px;
  padding: 22px 8px 18px 22px; width: 100%; max-width: 580px;
  max-height: min(80vh, 720px); overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
}
.ajuda-topo {
  display: flex; align-items: center; gap: 12px;
  padding-right: 14px; margin-bottom: 4px;
}
.ajuda-topo h2 {
  flex: 1; font-size: 18px; font-weight: 800; letter-spacing: -.2px;
}
#ajuda-fechar {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--suave); font-size: 22px;
  cursor: pointer; line-height: 1;
}
#ajuda-fechar:hover { background: var(--card2); color: var(--texto); }

/* ---------- novidades & changelog ---------- */
#modal-novidades {
  position: fixed; inset: 0; z-index: 70; 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-novidades[hidden] { display: none; }
#novidades-caixa {
  background: var(--card); border: 1px solid var(--linha2); border-radius: 15px;
  padding: 24px; width: 100%; max-width: 620px;
  max-height: min(85vh, 720px); overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
  display: flex; flex-direction: column;
}
.novidades-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding-bottom: 16px; border-bottom: 1px solid var(--linha); margin-bottom: 18px;
}
.novidades-topo h2 {
  font-size: 19px; font-weight: 800; letter-spacing: -.2px; margin: 0; color: var(--texto);
}
.novidades-sub {
  display: block; font-size: 12px; color: #34d399; font-weight: 600; margin-top: 3px; font-family: monospace;
}
#novidades-fechar {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--suave); font-size: 20px;
  cursor: pointer; line-height: 1; flex-shrink: 0; display: grid; place-items: center;
}
#novidades-fechar:hover { background: var(--card2); color: var(--texto); }
.novidades-lista {
  display: flex; flex-direction: column; gap: 20px;
}
.nov-release {
  border-bottom: 1px solid var(--linha); padding-bottom: 18px;
}
.nov-release:last-child { border-bottom: 0; padding-bottom: 0; }
.nov-rel-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap;
}
.nov-v {
  font-size: 14px; font-weight: 750; color: var(--texto); font-family: monospace;
}
.nov-prod {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: rgba(52, 211, 153, .14); color: #34d399;
  border: 1px solid rgba(52, 211, 153, .25); padding: 1.5px 6px; border-radius: 99px;
}
.nov-data { font-size: 11.5px; color: var(--fraco); }
.nov-titulo { font-size: 14px; font-weight: 650; color: var(--texto); margin: 0 0 4px; }
.nov-destaque { font-size: 12.5px; color: var(--suave); margin: 0 0 10px; line-height: 1.45; }
.nov-itens { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.nov-itens li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; line-height: 1.4; color: var(--texto); }
.nov-tag {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 1.5px 6px; border-radius: 4px; flex-shrink: 0;
}
.nov-tag.Admin { background: rgba(56, 189, 248, .15); color: #38bdf8; }
.nov-tag.Resiliência { background: rgba(74, 222, 128, .15); color: #4ade80; }
.nov-tag.Dashboards { background: rgba(165, 180, 252, .15); color: #a5b4fc; }
.nov-tag.Feedback { background: rgba(192, 132, 252, .15); color: #c084fc; }
.nov-tag.Streaming { background: rgba(56, 189, 248, .15); color: #38bdf8; }
.nov-tag.UI { background: rgba(203, 213, 225, .15); color: #cbd5e1; }
.nov-tag.Fix, .nov-tag.Turnos, .nov-tag.Chat, .nov-tag.Arquivos { background: rgba(251, 191, 36, .15); color: #fbbf24; }
.ajuda-intro {
  color: var(--fraco); font-size: 13px; margin: 0 14px 14px 0; line-height: 1.45;
}
.ajuda-item {
  padding: 14px 14px 14px 0; border-top: 1px solid var(--linha);
}
.ajuda-item h3 { font-size: 14.5px; font-weight: 700; margin-bottom: 5px; }
.ajuda-item p { color: var(--suave); font-size: 13px; line-height: 1.55; }
.ajuda-dizer {
  display: block; width: calc(100% - 14px); margin-top: 10px;
  text-align: left; cursor: pointer;
  background: var(--card2); border: 1px solid var(--linha2);
  color: var(--texto); border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.45;
}
.ajuda-dizer:hover { border-color: var(--azul); color: var(--azul2); }
.ajuda-dizer b { color: var(--fraco); font-weight: 600; margin-right: 6px; }

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

/* ---------- busca ---------- */
#modal-busca {
  position: fixed; inset: 0; z-index: 70; display: flex;
  align-items: flex-start; justify-content: center; padding: 14vh 24px 24px;
  background: rgba(4, 6, 10, .55); backdrop-filter: blur(2px);
  animation: modal-fundo .14s ease-out;
}
#modal-busca[hidden] { display: none; }
#busca-caixa {
  background: var(--card2); border: 1px solid var(--linha2); border-radius: 14px;
  padding: 10px 10px 12px; width: 100%; max-width: 640px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
}
.busca-linha {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 6px 8px;
}
.busca-lupa { flex-shrink: 0; color: var(--fraco); }
#busca-campo {
  flex: 1; min-width: 0; border: 0; background: transparent;
  color: var(--texto); font: inherit; font-size: 14.5px; outline: none;
}
#busca-campo::placeholder { color: var(--fraco); }
.busca-linha kbd {
  flex-shrink: 0; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fraco); border: 1px solid var(--linha2); border-radius: 6px;
  padding: 3px 6px;
}
.busca-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 6px; }
.busca-chips button {
  border: 1px solid var(--linha2); background: var(--card); color: var(--suave);
  border-radius: 999px; padding: 5px 11px; font-size: 12.5px; cursor: pointer;
}
.busca-chips button:hover { color: var(--texto); border-color: var(--linha3); }
.busca-chips button.ativo {
  background: var(--azul); border-color: var(--azul); color: var(--sobre-acento);
}
#busca-resultados {
  margin-top: 10px; max-height: min(50vh, 420px); overflow-y: auto;
  border-top: 1px solid var(--linha);
}
#busca-resultados[hidden] { display: none; }
.busca-hit {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 0; background: transparent; color: inherit;
  padding: 10px 10px; border-radius: 8px;
}
.busca-hit:hover, .busca-hit.foco { background: var(--card); }
.busca-hit b { display: block; font-size: 13.5px; font-weight: 600; }
.busca-hit small { color: var(--fraco); font-size: 12px; }
.busca-vazio { padding: 14px 10px; color: var(--fraco); font-size: 13px; }

/* O que só existe no mobile fica fora do caminho no desktop. A media query
   lá embaixo é quem religa. */
.so-mobile { display: none; }
#lateral-fundo { display: none; }
#abrir-lateral {
  background: none; border: 0; color: var(--suave); cursor: pointer;
  padding: 6px; margin: -6px 4px -6px -6px; border-radius: 8px;
  align-items: center; justify-content: center; flex-shrink: 0;
}
#abrir-lateral:hover { color: var(--texto); background: var(--card2); }

/* ---------- 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(--user-bolha, var(--azul));
  border: 1px solid var(--user-bolha-linha, transparent);
  color: var(--user-bolha-texto, var(--sobre-acento));
  border-bottom-right-radius: 6px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.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 p {
  margin: 0 0 12px;
  line-height: 1.65;
}
.bolha p:last-child {
  margin-bottom: 0;
}
.bolha strong, .bolha b {
  color: var(--texto);
  font-weight: 650;
}
.msg.user .bolha strong, .msg.user .bolha b {
  color: #fff;
}
.bolha h1, .bolha h2, .bolha h3, .bolha h4 {
  margin: 18px 0 8px;
  line-height: 1.35;
  color: var(--texto);
  font-weight: 700;
  letter-spacing: -.015em;
}
.bolha h1:first-child, .bolha h2:first-child, .bolha h3:first-child, .bolha h4:first-child {
  margin-top: 2px;
}
.bolha h1 { font-size: 18px; }
.bolha h2 { font-size: 16px; border-bottom: 1px solid var(--linha); padding-bottom: 6px; margin: 22px 0 10px; }
.bolha h3 { font-size: 14.5px; }
.bolha h4 { font-size: 13.5px; }
.bolha ul, .bolha ol { margin: 10px 0 14px; padding-left: 22px; }
.bolha li { margin: 6px 0; line-height: 1.6; }
.bolha li::marker { color: var(--azul); font-weight: 600; }
.msg.user .bolha li::marker { color: var(--sobre-acento); }

/* --- PROCESSO DE TRABALHO RECOLHÍVEL NA RESPOSTA --- */
details.processo-turno {
  margin: 0 0 14px;
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--suave);
}
details.processo-turno summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--suave);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
details.processo-turno summary::-webkit-details-marker { display: none; }
details.processo-turno summary::before {
  content: '▸';
  color: var(--suave);
  font-size: 11px;
  transition: transform .15s ease;
}
details.processo-turno[open] summary::before { transform: rotate(90deg); }
details.processo-turno summary:hover {
  color: var(--texto);
}
details.processo-turno[open] {
  padding-bottom: 12px;
}
details.processo-turno ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
details.processo-turno li {
  margin: 4px 0;
  color: var(--suave);
  font-size: 12px;
  line-height: 1.5;
}
details.processo-turno li::marker {
  color: var(--suave);
}
.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); }
/* SEM override aqui de propósito. `--sobre-acento` contrasta com a cor de
   ACENTO, mas a bolha do usuário deixou de usar acento como fundo (virou
   `--card2`, superfície neutra) — o valor antigo ficava quase invisível:
   `#022034` (escuro) sobre `#161b22` (também escuro) no tema escuro, e o
   inverso no claro. `.bolha a` já herda `--azul2`, que é a cor certa nos
   dois temas. */
.bolha blockquote {
  margin: 8px 0; padding: 3px 13px; color: var(--suave);
  border-left: 3px solid var(--azul); background: rgba(14, 211, 136, .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); }
/* RODAPÉ DA BOLHA: duração e horário na MESMA linha, à direita. Empilhados
   custariam uma linha inteira por mensagem para dizer duas coisas de quatro
   caracteres cada. */
.rodape-msg {
  display: flex; justify-content: flex-end; align-items: baseline;
  gap: 7px; margin-top: 7px;
}
.duracao {
  font-size: 10.5px; color: var(--fraco);
  font-variant-numeric: tabular-nums;
}
/* O ponto separa sem virar palavra — "5m 55s 17:52" lidos juntos parecem
   um número só. */
.duracao::after { content: " ·"; opacity: .6; }
.hora {
  font-size: 10.5px;
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
}
.msg.user .bolha .hora,
.msg.user .bolha .duracao { color: rgba(255, 255, 255, .65); }
.anexo a { color: var(--azul2); font-weight: 600; }

#entrada {
  /* Âncora da lista do `@`, que flutua ACIMA da área de composição. */
  position: relative;
  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, #mencoes { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
#anexos:empty, #mencoes:empty { display: none; }
.anexo-chip, .mencao-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); }
/* Menção `@`: mesma base do anexo, com marca de referência (não upload). */
.mencao-chip {
  border-color: color-mix(in srgb, var(--azul) 35%, var(--linha2));
  background: color-mix(in srgb, var(--azul) 8%, var(--sup));
}
.mencao-chip .mencao-at {
  flex-shrink: 0; font-weight: 700; color: var(--azul2); font-size: 13px;
  line-height: 1;
}
.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, .mencao-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, .mencao-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(14, 211, 136, .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(14, 211, 136, .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(14, 211, 136, .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; }
#chat.oculto-modo { display: none !important; }
#divisor-painel.oculto-modo { display: none !important; }
#painel.tela-cheia {
  width: 100% !important;
  flex: 1 1 100% !important;
  border-left: none !important;
}
/* 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);
}
.rotulo-painel {
  align-self: center; margin-right: auto; color: var(--suave);
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
/* OS QUATRO BOTÕES DO CABEÇALHO DO PAINEL, numa regra só.
   Eram quatro blocos quase idênticos, e foi assim que divergiram: dois
   ganharam `border-color` no hover e os outros dois não. Seguem o mesmo
   critério da fileira do topo — sem moldura em repouso, superfície no hover
   e no foco. */
#recolher-painel,
#painel-modo-dividido,
#abrir-painel,
#compartilhar-painel {
  border: 1px solid transparent; background: transparent; 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, #recolher-painel:focus-visible,
#painel-modo-dividido:hover, #painel-modo-dividido:focus-visible,
#abrir-painel:hover, #abrir-painel:focus-visible,
#compartilhar-painel:hover, #compartilhar-painel:focus-visible {
  background: var(--card2); border-color: var(--linha2); color: var(--texto);
}
#recolher-painel svg,
#painel-modo-dividido svg,
#abrir-painel svg,
#compartilhar-painel svg { flex-shrink: 0; }

/* O RELEVO ESTAVA INVERTIDO. O trilho era `--card2`, mais CLARO que a barra
   (`--card`), e o item ativo era `--card` — a mesma cor da barra. Resultado:
   a seleção ficava mais escura que o próprio trilho e lia como um buraco
   furado na barra, não como algo escolhido. Agora o trilho é `--sup`, um
   degrau ABAIXO da barra, e o ativo é `--card2`, um degrau acima: sulco
   recuado, seleção elevada. A sombra saiu junto — pela regra 04 do sistema
   ela é só para o que flutua, e um segmento de trilho não flutua. */
.seletor-modo-tela {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--sup); border: 1px solid var(--linha2);
  border-radius: 8px; padding: 2px; margin-left: 6px;
}
.btn-modo-tela {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--suave);
  padding: 4px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 550;
  cursor: pointer; transition: all .12s ease;
}
.btn-modo-tela:hover { color: var(--texto); }
.btn-modo-tela.ativo {
  background: var(--card2); color: var(--texto); font-weight: 650;
}
#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. */
/* ARQUIVOS DEIXOU DE SER RODAPÉ. Era uma faixa de três linhas no pé do
   painel, disputando altura com o dashboard — e já tinha sido espremida uma
   vez por isso: nasceu com `max-height: 42%`, chegava a 530px numa tela
   cheia, e foi cortada para três linhas. Cortar era tratar o sintoma; o
   container é que estava errado. Uma lista de nomes quer altura, e uma
   faixa baixa dentro de uma coluna de 400px é o pior lugar para ela.
   Agora é uma ABA do painel, com a altura e a largura inteiras. */
#painel-arquivos {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  background: var(--sup);
}
#painel-arquivos[hidden] { display: none; }
/* Sem rótulo ao lado: a ABA já diz "arquivos", e repetir o nome aqui só
   roubava largura da busca — que era metade da queixa. */
#pa-cab {
  display: flex; align-items: center; gap: 8px;
  padding: 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 {
  flex: 1; min-height: 0; overflow-y: auto; margin: 0;
  padding: 6px 8px; list-style: none;
}
#pa-lista li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 7px;
}
#pa-lista li:hover { background: var(--card); }
/* UMA REGRA PARA OS TRÊS BOTÕES DA LINHA. Fixar, usar e compartilhar já
   eram dois blocos quase idênticos; um terceiro copiado seria o mesmo jeito
   de divergir que fez dois botões do painel ganharem hover e dois não. */
#pa-lista .pa-pin,
#pa-lista .pa-usar,
#pa-lista .pa-compartilhar {
  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, opacity .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; color: var(--texto);
  text-decoration: none; font-size: 13px; display: flex; align-items: center;
  gap: 7px;
}
#pa-lista .pa-nome span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pa-lista .pa-nome:hover { color: var(--azul2); text-decoration: underline; }
#pa-lista .pa-miniatura {
  width: 32px; height: 26px; flex: 0 0 32px; object-fit: cover;
  border-radius: 4px; border: 1px solid var(--linha2); background: var(--card);
}
#pa-lista .pa-tam { flex-shrink: 0; font-size: 11px; color: var(--fraco); }
/* Em repouso a linha é nome, origem e tamanho; a ação aparece ao aproximar.
   O FOCO TAMBÉM REVELA: só no hover, quem navega por teclado daria Tab num
   botão invisível. */
#pa-lista .pa-usar,
#pa-lista .pa-compartilhar { opacity: 0; }
#pa-lista li:hover .pa-usar,
#pa-lista li:hover .pa-compartilhar,
#pa-lista .pa-usar:focus-visible,
#pa-lista .pa-compartilhar:focus-visible { opacity: 1; }
#pa-lista .pa-usar:hover,
#pa-lista .pa-compartilhar:hover {
  background: var(--card2); color: var(--azul); opacity: 1;
}

/* LISTA DO `@`. Flutua sobre a conversa, presa ao pé da área de composição.
   Sem `position: absolute` ela empurraria a linha de entrada para baixo a
   cada tecla — a caixa pulando enquanto se digita é pior que a lista. */
#mencao-arquivos {
  position: absolute; bottom: 100%; left: 14px; z-index: 20;
  /* LARGURA DE MENU, e não da caixa inteira: ocupando a linha toda ela lia
     como mais uma barra da interface, não como uma lista para escolher. */
  width: min(440px, calc(100% - 28px));
  margin: 0 0 6px; padding: 4px; list-style: none;
  max-height: 232px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--linha2);
  border-radius: var(--raio-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#mencao-arquivos li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; cursor: pointer;
  font-size: 13px; color: var(--texto);
}
/* A ESCOLHIDA É A MESMA MARCA DO CANAL ATIVO. Com `--card2` sobre `--card`
   a diferença era de um degrau e sumia: olhando a lista não dava para dizer
   qual o Enter ia pegar — o mesmo defeito de leitura que o seletor de modo
   tinha no tema escuro. */
#mencao-arquivos li.sel {
  background: var(--azul-ativo); color: var(--sobre-acento); font-weight: 600;
}
#mencao-arquivos li.sel .mencao-origem { color: var(--sobre-acento); opacity: .8; }
#mencao-arquivos .mencao-nome {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
#mencao-arquivos .mencao-origem {
  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 !important; }
  #painel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(var(--painel-largura, 420px), 90vw); z-index: 25;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .5);
  }
  #painel.recolhido { display: none !important; width: 0 !important; }
  .cartao.half, .cartao.third { width: 100%; }

  /* A LATERAL VIRA GAVETA */
  #abrir-lateral { display: inline-flex; }
  #topo { justify-content: flex-start; gap: 6px; }
  #topo .acoes { margin-left: auto; }

  #lateral {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    box-shadow: 10px 0 40px rgba(0, 0, 0, .5);
  }
  body.lateral-aberta #lateral { transform: translateX(0); }

  #painel.tela-cheia {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  body.lateral-recolhida #lateral { width: min(300px, 86vw); padding-left: 0; padding-right: 0; }
  body.lateral-recolhida #canais-rail { display: none; }

  #lateral-fundo {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  body.lateral-aberta #lateral-fundo { opacity: 1; pointer-events: auto; }

  #entrada { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  #mensagens { padding: 16px 14px; }
  .bolha { max-width: 85%; }
}

/* =========================================================================
   MOBILE INTELIGENTE (<= 640px) — SMARTPHONES
   ========================================================================= */
@media (max-width: 640px) {
  /* TOPO COMPACTO E ELEGANTE */
  #topo {
    padding: 8px 10px; min-height: 48px; gap: 6px;
  }
  #abrir-lateral {
    width: 36px; height: 36px; min-width: 36px; padding: 0;
    margin: 0; display: inline-flex; align-items: center; justify-content: center;
  }
  .topo-info { gap: 6px; flex: 1 1 auto; min-width: 0; }
  .topo-info .ws-avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
  .topo-canais { min-width: 0; overflow: hidden; line-height: 1.2; }
  .topo-titulo {
    display: flex; align-items: baseline; gap: 3px;
    font-size: 13px; max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topo-ws-nome { font-size: 12px; font-weight: 800; }
  .topo-sep { margin: 0 1px; font-size: 11px; color: var(--fraco); }
  #topo .topo-titulo #canal-nome { font-size: 12px; }
  #canal-trabalhando { font-size: 11px; }

  /* AÇÕES DO TOPO: economia máxima de espaço */
  .acoes { gap: 4px; flex-shrink: 0; }
  #abrir-busca, #abrir-ajuda {
    width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 7px;
  }
  #abrir-ajuda { display: none; }
  .seletor-modo-tela { margin-left: 2px; padding: 2px; gap: 2px; }
  .btn-modo-tela {
    padding: 6px 8px; min-width: 32px; justify-content: center; border-radius: 6px;
  }
  .btn-modo-tela span { display: none !important; }
  .btn-modo-tela[data-modo="hibrido"] { display: none !important; }

  /* CHAT E BOLHAS */
  #mensagens { padding: 12px 10px; }
  .msg { margin-bottom: 10px; }
  .bolha {
    max-width: 92% !important; font-size: 14.5px; padding: 10px 13px;
    border-radius: 14px;
  }
  .bolha pre {
    padding: 9px 10px; font-size: 12px; border-radius: 8px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0;
  }
  .bolha table {
    display: block; width: 100%; overflow-x: auto;
    -webkit-overflow-scrolling: touch; font-size: 12px; margin: 8px 0;
  }
  .bolha th, .bolha td { padding: 6px 8px; white-space: nowrap; }

  /* ENTRADA MOBILE: anti-zoom iOS Safari (>=16px) */
  #entrada {
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 6px;
  }
  .linha-entrada { gap: 6px; align-items: flex-end; }
  #texto {
    font-size: 16px !important;
    min-height: 40px; max-height: 110px; padding: 8px 12px;
    border-radius: 10px; line-height: 1.4;
  }
  #texto::placeholder { font-size: 13.5px; }
  #anexar {
    width: 40px; height: 40px; min-width: 40px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #enviar {
    height: 40px; padding: 0 16px; font-size: 13.5px;
    border-radius: 8px; font-weight: 600;
  }
  #btn-parar {
    height: 40px; padding: 0 12px; font-size: 13px; border-radius: 8px;
  }

  /* PAINEL / DASHBOARD FULLSCREEN NO CELULAR */
  #painel {
    width: 100% !important; left: 0 !important; right: 0 !important;
    top: 0 !important; bottom: 0 !important; position: absolute; z-index: 25;
    box-shadow: none; border-left: none;
  }
  #painel.recolhido { display: none !important; width: 0 !important; }
  #painel-cab {
    padding: 8px 12px; min-height: 48px; gap: 8px;
  }
  .rotulo-painel { font-size: 14px; }
  #painel-modo-dividido { display: none !important; }
  #recolher-painel {
    display: inline-flex !important; width: 34px; height: 34px; min-width: 34px;
    padding: 0; align-items: center; justify-content: center; border-radius: 8px;
  }
  #painel-conteudo { padding: 12px 10px; }
  .dash { gap: 10px; }
  .dash-head h1 { font-size: 18px; }
  .cartao {
    padding: 13px 12px; border-radius: 10px; width: 100% !important;
  }
  .cartao:has(table), .rec-tabela-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .kpis {
    grid-template-columns: repeat(2, 1fr) !important; gap: 8px;
  }
  .kpi {
    padding: 10px 11px; border-radius: 10px;
  }
  .kpi-v { font-size: 20px; }
  .kpi-l { font-size: 9.5px; }

  /* RECORDS & CARDS NO CELULAR */
  .rec-grid-cards { grid-template-columns: 1fr !important; gap: 8px; }
  .rec-ficha-grid { grid-template-columns: 1fr !important; }
  .rec-controles { flex-direction: column; align-items: stretch; gap: 8px; }
  .rec-busca-wrap { width: 100%; min-width: 0; }
  .rec-busca-wrap input { height: 38px; font-size: 14px; }
  .rec-select { width: 100%; height: 38px; font-size: 14px; }

  /* GAVETA LATERAL NO CELULAR */
  #lateral {
    width: min(290px, 86vw);
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  #lateral-cab {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
  }
  #canais li a { min-height: 38px; padding: 8px 10px; font-size: 13.5px; }
  #novo-canal { min-height: 38px; padding: 8px 12px; font-size: 13px; }

  /* MODAIS NO CELULAR */
  #modal, #modal-ajuda, #modal-novidades, #modal-config, #modal-compartilhar {
    padding: 10px;
  }
  #modal-form {
    max-width: 100%; width: 100%; padding: 18px 15px 16px; border-radius: 12px;
  }
  #modal-campo { font-size: 16px !important; min-height: 42px; }
  #ajuda-caixa, #novidades-caixa {
    max-width: 100%; width: 100%; max-height: 90vh; padding: 16px 12px;
  }
}

/* ---------- painel: estrutura moderna ---------- */
.dash { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 14px; }
.dash-head { width: 100%; margin-bottom: 2px; }
.dash-head h1 { font-size: 22px; font-weight: 750; letter-spacing: -.025em; color: var(--texto); margin: 0; }
.dash-head p { color: var(--suave); font-size: 13px; margin-top: 4px; line-height: 1.4; }
.cartao {
  background: var(--card); border: 1px solid var(--linha); border-radius: 12px;
  padding: 18px 20px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.cartao.full { width: 100%; }
.cartao.half { width: calc(50% - 7px); }
.cartao.third { width: calc(33.333% - 9.5px); }
.cartao.nu { background: none; border: 0; padding: 0; box-shadow: none; }
.cartao-topo {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; gap: 10px;
}
.cartao h2 {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--suave); margin: 0;
}
.cartao-conta {
  font-size: 11px; font-weight: 600; color: var(--suave);
  background: rgba(255, 255, 255, .06); padding: 2px 7px;
  border-radius: 6px; font-variant-numeric: tabular-nums;
  border: 1px solid var(--linha);
}
.clicavel { cursor: pointer; transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.clicavel:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
tr.clicavel { transition: background .12s; }
tr.clicavel:hover { transform: none; background: var(--card2); }
tr.clicavel td:last-child::after { content: " ↗"; color: var(--azul2); }
.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 modernos: borda uniforme, micro-pill de delta, indicador limpo */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; width: 100%; }
.kpi {
  background: var(--card); border: 1px solid var(--linha); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.kpi.clicavel:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .16); box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.kpi-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.kpi-l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--suave); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kpi-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px var(--c); }
.kpi-corpo { display: flex; flex-direction: column; gap: 2px; }
.kpi-v { font-size: 26px; font-weight: 750; margin: 2px 0 0; letter-spacing: -.03em; line-height: 1.15; color: var(--texto); }
.kpi-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.kpi-d {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650;
  padding: 2px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; line-height: 1.3;
}
.kpi-d-ic { font-size: 9px; }
.kpi-d.up { background: rgba(52, 211, 153, .14); color: #34d399; border: 1px solid rgba(52, 211, 153, .25); }
.kpi-d.down { background: rgba(248, 113, 113, .14); color: #f87171; border: 1px solid rgba(248, 113, 113, .25); }
.kpi-s { font-size: 11.5px; color: var(--fraco); line-height: 1.3; }

/* tabela moderna com pills de status e tipografia densa */
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linha2);
  position: sticky; top: 0; background: var(--card); font-weight: 700; z-index: 1;
}
td { padding: 10px 12px; border-bottom: 1px solid var(--linha); color: var(--texto); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(255, 255, 255, .03); }
th.r, td.r { text-align: right; }
.pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; line-height: 1.4;
}
.pill.p-ok { background: rgba(52, 211, 153, .14); color: #34d399; border: 1px solid rgba(52, 211, 153, .25); }
.pill.p-at { background: rgba(251, 191, 36, .14); color: #fbbf24; border: 1px solid rgba(251, 191, 36, .25); }
.pill.p-no { background: rgba(248, 113, 113, .14); color: #f87171; border: 1px solid rgba(248, 113, 113, .25); }

/* progresso: trilha esguia moderna */
.prog { margin-bottom: 14px; }
.prog:last-child { margin-bottom: 0; }
.prog-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 6px; font-weight: 600; color: var(--texto); }
.prog-val { color: var(--suave); font-variant-numeric: tabular-nums; font-size: 12px; }
.prog-val b { color: var(--texto); margin-left: 5px; }
.trilha { height: 6px; background: rgba(255, 255, 255, .06); border-radius: 99px; overflow: hidden; }
.trilha i { display: block; height: 100%; border-radius: 99px; transition: width .35s cubic-bezier(.16, 1, .3, 1); }

/* prazos */
.prazos { list-style: none; margin: 0; padding: 0; }
.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: 13px; font-weight: 600; color: var(--texto); }
.prazo .meta { display: block; font-size: 11.5px; color: var(--fraco); margin-top: 2px; }
.prazo time { margin-left: auto; font-size: 11.5px; color: var(--fraco); white-space: nowrap; font-variant-numeric: tabular-nums; }
.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: 9px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; min-width: 110px;
}
.queda { font-size: 11px; color: var(--vermelho); font-weight: 700; font-variant-numeric: tabular-nums; }

/* atividade */
.atividade { list-style: none; margin: 0; padding: 0; }
.atividade li { display: flex; gap: 12px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid rgba(255, 255, 255, .03); }
.atividade li:last-child { border-bottom: 0; }
.atividade time { color: var(--fraco); font-size: 11.5px; min-width: 48px; font-variant-numeric: tabular-nums; }

/* gráficos modernos */
.barras { display: flex; align-items: flex-end; gap: 10px; height: 210px; padding-top: 18px; }
.barra-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.barra-v { font-size: 10.5px; font-weight: 650; color: var(--suave); margin-bottom: 6px; }
.barra-trilha { width: 100%; flex: 1; display: flex; align-items: flex-end; background: rgba(255, 255, 255, .035); border-radius: 6px 6px 0 0; min-height: 0; }
.barra { width: 100%; border-radius: 5px 5px 0 0; min-height: 4px; transition: height .4s ease-out; }
.barra-l { font-size: 10.5px; color: var(--fraco); margin-top: 8px; text-align: center; overflow-wrap: anywhere; }
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.donut { width: 190px; height: 190px; flex-shrink: 0; }
.d-c1 { text-anchor: middle; font-size: 23px; font-weight: 750; fill: var(--texto); letter-spacing: -.02em; }
.d-c2 { text-anchor: middle; font-size: 11px; fill: var(--fraco); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.legenda { list-style: none; flex: 1; min-width: 175px; margin: 0; padding: 0; }
.legenda li {
  display: flex; align-items: center; gap: 9px; font-size: 12px;
  padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.legenda li:last-child { border-bottom: 0; }
.legenda i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legenda .leg-rot { color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.legenda b { margin-left: auto; color: var(--texto); font-weight: 650; }
.legenda .leg-pct { color: var(--fraco); font-size: 11px; width: 34px; text-align: right; }
.linha { width: 100%; height: auto; }
.grade { stroke: rgba(255, 255, 255, .06); stroke-dasharray: 4 4; }
.eixo { font-size: 10.5px; 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: 650; }
.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);
}
/* A segunda linha trunca como o título: passo longo + cronômetro não
   podem vazar para cima dos botões — mesmo vocabulário do `.topo-titulo`
   acima (bloco, não flex, com ellipsis). */
#canal-presenca, #canal-trabalhando, #sem-conexao {
  min-width: 0; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* O texto do passo é item flex: sem min-width zero ele não encolhe e o
   ellipsis do pai não alcança. */
#canal-trabalhando-passo {
  min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
#canal-trabalhando-tempo {
  flex-shrink: 0; white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}
/* A LINHA DE PENSAMENTO no header */
#trabalhando-texto {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
/* ---------- streaming ---------- */
.cartao-vivo {
  margin: 0 0 8px;
  width: fit-content;
  max-width: min(100%, 360px);
  color: var(--suave);
  background: var(--sup);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
}
.cartao-vivo summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 12.5px;
}
.cartao-vivo summary::-webkit-details-marker { display: none; }
.cartao-vivo summary::before {
  content: '▸';
  color: var(--texto);
  font-size: 12px;
  transition: transform .16s ease;
}
.cartao-vivo[open] summary::before { transform: rotate(90deg); }
.cartao-vivo summary:focus-visible {
  outline: 2px solid var(--azul);
  outline-offset: -2px;
}
.cartao-vivo-titulo { color: var(--texto); font-weight: 650; }
.cartao-vivo .pontinhos { color: var(--fraco); }
/* RODAPÉ: relógio e aviso, uma linha só, no pé do cartão.
   No cabeçalho eles disputavam espaço com o título, e em tela estreita o
   aviso ("Demorando mais que o esperado") empurrava o relógio para fora.
   No pé a linha é deles, e o aviso pode crescer sem atropelar nada. */
.cartao-vivo-rodape {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 0 12px 9px 13px; font-size: 11px;
}
.cartao-vivo-tempo {
  color: var(--fraco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cartao-vivo-aviso {
  color: var(--amarelo);
  font-size: 11px;
}
/* A duração final, no cabeçalho. O rodapé vive dentro do `<details>` e some
   ao recolher; este é o número que sobra visível depois. */
.cartao-vivo-fim {
  color: var(--fraco);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* UM QUADRO SÓ. `.passos-vivo` tem moldura própria porque nasceu como bloco
   solto; dentro do cartão isso virou caixa dentro de caixa, com duas bordas
   e dois fundos a 8px de distância. O olho lê a moldura antes do conteúdo, e
   eram dois níveis de moldura para uma lista de cinco linhas. */
.cartao-vivo[open] .passos-vivo {
  margin: 0;
  padding: 2px 12px 10px 13px;
  background: none;
  border: none;
  border-radius: 0;
}

@media (max-width: 600px) {
  .cartao-vivo { max-width: 100%; }
  .cartao-vivo-aviso { white-space: normal; }
}

.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 DE TRABALHO — a lista de ferramentas que o agente usa no turno.
   Era uma lista crua de nomes em mono verde (`✓ listar_arquivos`), que lê
   como despejo de código. Agora é um bloco de "tarefas": cada passo com um
   ícone de status num disco, um rótulo em linguagem de gente, e uma linha
   fina encadeando os passos — o vocabulário de um chain-of-thought. */
.passos-vivo:not(:empty) {
  margin: 0; display: flex; flex-direction: column; gap: 0;
}
.passo {
  position: relative; display: flex; align-items: flex-start; gap: 8px;
  padding: 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--fraco);
}
/* O ÍCONE PERDEU O DISCO. Era um círculo de 17px com fundo colorido por
   estado — verde no feito, vermelho no falho —, e numa lista de cinco passos
   isso produz cinco medalhas coloridas competindo com o texto. O estado de um
   passo concluído não é informação que mereça cor: o que importa é o que
   está acontecendo AGORA.
   Cor sobrou só para a falha, que é a única que pede ação. */
.passo-ic {
  flex-shrink: 0; width: 13px; display: grid; place-items: center;
  margin-top: 1px; line-height: 1; color: var(--linha2); font-size: 11px;
}
.passo.feito .passo-ic { color: var(--fraco); }
.passo.falhou .passo-ic { color: var(--vermelho); }
.passo-corpo { min-width: 0; }
.passo-rot { display: block; }
/* A INVERSÃO QUE IMPORTA. O passo concluído ficava MAIS claro que o corrente
   (`.feito` recebia `--texto`), então a lista chamava atenção para o que já
   passou e o que estava rodando era o mais apagado — exatamente ao contrário
   do que quem espera precisa ver.
   Agora: feito recua, corrente tem peso. É o que faz cinco linhas iguais
   deixarem de parecer repetição e passarem a parecer progresso. */
.passo.feito .passo-rot { color: var(--fraco); }
.passo:not(.feito):not(.falhou) .passo-rot {
  color: var(--texto); font-weight: 600;
}
.passo.falhou .passo-rot { color: var(--texto); }
/* O DETALHE, na mesma linha do rótulo. Em linha própria dobraria a altura da
   lista, e a lista existe para ser lida de relance. Monoespaçado porque é
   caminho e comando — em fonte proporcional, `Il1` e `rn/m` viram adivinhação
   e o que se procura ali é justamente o nome exato do arquivo. */
.passo-det {
  margin-left: 6px; font-size: 11px; color: var(--fraco);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}
.passo:not(.feito):not(.falhou) .passo-det { color: var(--suave); }
/* O MOTIVO da falha, à mostra. O stream sempre mandou (`saida`), e a UI
   jogava fora — o usuário via só um ✕ mudo e não tinha como saber se foi
   spec inválida, recusa de aprovação ou exceção. Sem isto, "não funcionou"
   não tem para onde apontar. */
.passo-erro {
  margin-top: 4px; font-size: 11.5px; color: var(--vermelho);
  background: rgba(248, 113, 113, .09); border-radius: 6px; padding: 5px 8px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.spin {
  width: 11px; height: 11px; 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; }
.sem-resposta { color: var(--fraco); font-style: italic; }

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

/* --- Início de canal (estado inicial com botões de ação) --- */
.canal-inicio {
  margin-top: 6px;
  width: 100%;
}
.canal-inicio .bolha {
  max-width: 820px;
  background: var(--card);
  border: 1px solid var(--linha);
  padding: 16px 20px;
  border-radius: 14px;
}
.canal-inicio-texto {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.5;
  margin-bottom: 6px;
}
.canal-inicio-sub {
  font-size: 13.5px;
  font-weight: 400;
  color: var(--suave);
  display: inline-block;
  margin-top: 2px;
}

/* --- Botões de Ação Sugerida (Pills) --- */
.botoes-acao {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  margin-bottom: 8px;
}
.btn-acao {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card2);
  border: 1px solid var(--linha2);
  color: var(--texto);
  border-radius: 9999px;
  padding: 7px 16px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
  user-select: none;
}
.btn-acao:hover {
  background: var(--card2);
  border-color: var(--azul);
  color: var(--texto);
  transform: translateY(-1px);
}
.btn-acao:active,
.btn-acao.clicado {
  transform: scale(0.98);
  opacity: 0.75;
}

/* --- Cards de Entregas / Artefatos gerados --- */
.entregas-msg {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 8px;
}
.cartao-entrega {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--linha2);
  border-radius: 11px;
  padding: 10px 14px;
  min-width: 250px;
  max-width: 100%;
  cursor: pointer;
  text-decoration: none;
  color: var(--texto);
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.cartao-entrega:hover {
  border-color: var(--azul);
  background: var(--card2);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.cartao-entrega-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--card2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul2);
}
.cartao-entrega-ic svg {
  width: 18px;
  height: 18px;
}
.cartao-entrega-ic.pdf {
  color: var(--vermelho);
  background: rgba(248, 113, 113, 0.12);
}
.cartao-entrega-ic.html {
  color: var(--azul2);
  background: rgba(14, 211, 136, 0.12);
}
.cartao-entrega-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cartao-entrega-nome {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto);
}
.cartao-entrega-ext {
  font-size: 10px;
  font-weight: 700;
  color: var(--suave);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cartao-entrega-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cartao-entrega-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: 7px;
  color: var(--suave);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
}
.cartao-entrega-btn:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: var(--sobre-acento);
}
.cartao-entrega-btn svg {
  width: 14px;
  height: 14px;
}

/* Card PDF estilo preview com toolbar */
.cartao-entrega-pdf {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--linha2);
  border-radius: 12px;
  overflow: hidden;
  width: 320px;
  max-width: 100%;
  cursor: pointer;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.cartao-entrega-pdf:hover {
  border-color: var(--azul);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.cartao-entrega-pdf-topo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 10px;
  background: var(--card2);
  border-bottom: 1px solid var(--linha);
}
.cartao-entrega-pdf-preview {
  height: 160px;
  background: #0f141f;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cartao-entrega-pdf-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: .92;
}
.cartao-entrega-pdf-rodape {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--card);
  border-top: 1px solid var(--linha);
}


/* ---------- 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(--papel-previa);
}
.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(--card2);
  border: 1px solid var(--linha);
  color: var(--texto);
  border-bottom-left-radius: 6px;
}
.msg.user.outro .bolha code { background: rgba(0, 0, 0, .07); color: inherit; }
body:not([data-tema="claro"]) .msg.user.outro .bolha code { background: rgba(255, 255, 255, .10); }
.msg.user.outro .bolha a { color: var(--azul); }
/* MENSAGENS RECEBIDAS VIA WHATSAPP */
.msg.via-whatsapp {
  justify-content: flex-start !important;
}
.msg.via-whatsapp .bolha {
  background: rgba(37, 211, 102, 0.08) !important;
  border: 1px solid rgba(37, 211, 102, 0.32) !important;
  color: var(--texto) !important;
  border-bottom-left-radius: 6px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
.msg.via-whatsapp .bolha code {
  background: rgba(255, 255, 255, 0.12) !important;
  color: inherit !important;
}
.msg.via-whatsapp .bolha a {
  color: #34d399 !important;
}
.tag-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(37, 211, 102, 0.16);
  color: #25D366;
  border: 1px solid rgba(37, 211, 102, 0.35);
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 6px;
}
.tag-whatsapp svg {
  flex-shrink: 0;
}
.autor-zap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #25D366;
}
/* 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;
}
.autor.autor-assistente {
  color: var(--azul);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
}
.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; }

/* Ações da mensagem só aparecem no hover: visíveis sempre, virariam uma
   coluna de ruído ao lado da conversa. A barra ocupa uma área reservada na
   bubble, portanto não fica por cima do texto quando ele é selecionado. */
.bolha { position: relative; }
.bolha.com-acoes {

  padding-right: 48px;
}
.acoes-msg {
  position: absolute;
  top: -14px; right: 8px; bottom: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--card2);
  border: 1px solid var(--linha2);
  border-radius: 8px;
  padding: 2px 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 5;
}
.msg:hover .acoes-msg, .acoes-msg:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.grafico-rolagem { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.grafico-rolagem .barra-l { white-space: normal; overflow-wrap: anywhere; }
.cartao:has(.grafico-rolagem) { min-width: 0; }
@media (hover: none), (pointer: coarse) {
  .acoes-msg { position: static; opacity: 1; pointer-events: auto; margin-top: 8px; }
  .acoes-msg button, .copiar-codigo { min-width: 44px; min-height: 44px; }
}
@media (max-width: 680px) {
  .cartao-entrega-pdf { width: 100%; max-width: 100%; display: flex; flex-direction: column; }
  .cartao-entrega-pdf-preview { display: none; }
  .cartao-entrega-pdf-topo { position: static; order: 2; justify-content: flex-end; padding: 0 12px 10px; }
  .cartao-entrega-pdf-rodape { border-top: 0; }
  .cartao-entrega-btn { min-width: 44px; min-height: 44px; }
}
.acoes-msg button {
  border: 0;
  background: transparent;
  color: var(--texto);
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color .12s, background .12s, transform .1s;
}
.acoes-msg button:hover {
  color: var(--texto);
  background: var(--card2);
}
.acoes-msg button:active {
  background: rgba(255, 255, 255, .18);
  transform: scale(.93);
}
.acoes-msg button svg { width: 14px; height: 14px; }
.acoes-msg .acao-apagar:hover {
  color: var(--vermelho);
  background: rgba(248, 113, 113, .15);
}
.acoes-msg button.feedback-up:hover {
  color: #22c55e;
  background: rgba(34, 197, 94, .15);
}
.acoes-msg button.feedback-up.ativo {
  color: #22c55e;
  background: rgba(34, 197, 94, .25);
}
.acoes-msg button.feedback-down:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, .15);
}
.acoes-msg button.feedback-down.ativo {
  color: #ef4444;
  background: rgba(239, 68, 68, .25);
}
.feedback-selo {
  font-size: 12px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.85;
  user-select: none;
}
.acao-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 25px;
  color: var(--azul2);
  padding-right: 2px;
  margin-right: 1px;
  border-right: 1px solid var(--linha2);
}
.acao-check svg { width: 13px; height: 13px; }

/* --- BADGE DE TAREFA EM ANDAMENTO (added to the running task) --- */
.msg-tarefa-fila {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 3px;
}
.badge-running-task {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 550;
  color: var(--suave);
  background: var(--card2);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: .01em;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.badge-running-task-ic {
  color: var(--amarelo);
  flex-shrink: 0;
  line-height: 1;
}
.badge-running-task-hora {
  color: var(--fraco);
  font-weight: 400;
  margin-left: 2px;
  font-variant-numeric: tabular-nums;
}

/* --- BOTÃO DE PARAR TAREFA NA ENTRADA (STOP) --- */
#btn-parar,
.btn-parar-entrada {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(239, 68, 68, .09);
  color: var(--vermelho);
  border: 1px solid rgba(239, 68, 68, .28);
  border-radius: 8px;
  padding: 0 12px;
  height: 38px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, opacity .15s;
}
#btn-parar:hover,
.btn-parar-entrada:hover {
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .45);
}
#btn-parar:disabled,
.btn-parar-entrada:disabled {
  opacity: .5;
  cursor: not-allowed;
}
#btn-parar svg,
.btn-parar-entrada svg { width: 12px; height: 12px; }

/* --- AÇÃO DE PARAR DENTRO DO CARTÃO DE FILA --- */
.btn-parar-fila {
  border: 0;
  background: transparent;
  color: var(--vermelho);
  font-size: 11px;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  opacity: .8;
  transition: opacity .15s;
}
.btn-parar-fila:hover {
  opacity: 1;
  text-decoration: underline;
}
.passo-fila .passo-rot {
  color: var(--suave);
  font-weight: 400;
}

/* --- SELETOR DE REAÇÕES E PÍLULAS --- */
.seletor-reacoes {
  position: absolute;
  top: -38px;
  right: 8px;
  display: flex;
  gap: 3px;
  background: var(--card2);
  border: 1px solid var(--linha2);
  border-radius: 999px;
  padding: 3px 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
  z-index: 10;
}
.seletor-reacoes button {
  background: transparent;
  border: 0;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 999px;
  transition: transform .12s ease, background .12s;
}
.seletor-reacoes button:hover {
  transform: scale(1.25);
  background: rgba(255, 255, 255, .08);
}
.msg-reacoes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.reacao-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 1.5px 7px;
  border-radius: 12px;
  background: var(--card2);
  border: 1px solid var(--linha);
  color: var(--texto);
  cursor: pointer;
  user-select: none;
  transition: background .12s, border-color .12s;
}
.reacao-pill:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--linha2);
}

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


/* O alternador de som é um <button> no meio de <a>: herda o visual dos
   vizinhos e zera o que o navegador impõe a botões. */
#menu-usuario button {
  width: 100%; text-align: left; background: none; border: 0;
  font: inherit; cursor: pointer;
}

/* NOVIDADE EM OUTRO WORKSPACE. Um ponto no canto do seletor fechado: sem
   ele, a pessoa teria de abrir a lista para descobrir — o mesmo problema
   que este aviso resolve. Mesmo azul do não-lido de canal: é o mesmo
   significado, um nível acima. */
/* O ponto é um ITEM DO FLEX, não um absoluto com pixels chutados. O botão
   já é `display:flex; align-items:center`, então ele se centraliza sozinho
   no eixo vertical — e continua centrado se a fonte, o padding ou a altura
   mudarem. A primeira versão usava `top/right` fixos e ficava fora de eixo.

   Na horizontal, o que resolve é `order` mais `flex: 1` no nome: o `::after`
   é o ÚLTIMO filho por natureza, então sem `order` o ponto caía DEPOIS da
   seta, no canto extremo. E `margin-left: auto` no ponto não servia — ele
   empurrava o nome junto, amontoando os três na direita. Com o nome
   crescendo, ponto e seta encostam na borda sem nenhum `auto` competindo.

   Ordem final: nome … ponto … seta. */
#ws-botao.tem-novidade #ws-atual { order: 0; flex: 1; text-align: left; }
#ws-botao.tem-novidade::after {
  content: ""; order: 1; flex-shrink: 0;
  width: 7px; height: 7px; border-radius: 50%; background: var(--azul);
  box-shadow: 0 0 0 3px rgba(14, 211, 136, .18);
}
#ws-botao.tem-novidade svg { order: 2; margin-left: 6px; }
/* O ponto DENTRO da lista alinha à direita, antes do check do ativo. */
#ws-lista .ponto-novo { margin-left: auto; }

/* ── Criação de workspace ──────────────────────────────────────────────
   Mesma linguagem do #modal (fundo escurecido + blur, cartão elevado),
   mas NÃO é `dialog`: não há nada para o usuário responder aqui, e um
   role="dialog" prometeria interação que não existe. `role="status"` com
   `aria-live` faz o leitor de tela anunciar cada etapa concluída, que é
   exatamente a informação que a tela dá a quem vê. */
.criando {
  position: fixed; inset: 0; z-index: 80; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(4, 6, 10, .78); backdrop-filter: blur(3px);
  animation: modal-fundo .14s ease-out;
}
.criando[hidden] { display: none; }
.criando-caixa {
  background: var(--card); border: 1px solid var(--linha2); border-radius: 15px;
  padding: 30px 30px 26px; width: 100%; max-width: 380px; text-align: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .65);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
}
.criando-logo { display: none; }
.criando-boas, .criando-sub { display: none; }

/* Primeiro workspace: vidro + logo, sem checklist interno. */
.criando.imersao {
  background: rgba(4, 8, 12, .52);
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
}
.criando.imersao .criando-caixa {
  max-width: 440px;
  padding: 52px 44px 44px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .5),
    inset 0 1px 0 color-mix(in srgb, var(--texto) 12%, transparent);
  backdrop-filter: blur(28px) saturate(1.45);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
}
.criando.imersao .criando-logo {
  display: block; height: 72px; width: auto; margin: 0 auto 28px;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .35));
}
.criando.imersao .criando-boas {
  display: block; margin: 0 0 8px; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--azul2); font-weight: 600;
}
.criando.imersao .criando-titulo { font-size: 22px; margin-bottom: 10px; }
.criando.imersao .criando-sub {
  display: block; margin: 0 0 8px; min-height: 2.3em; font-size: 14.5px;
  color: var(--suave); line-height: 1.5;
  transition: opacity .22s ease;
}
.criando.imersao .criando-passos { display: none; }
.criando.imersao .criando-anel { margin-top: 22px; }
/* Durante a espera de imersão o anel CONTINUA girando — parado só no
   instante de fechar / falha. */
.criando.imersao:not(.falhou) .criando-anel {
  animation: criando-gira .8s linear infinite;
}
.criando-anel {
  width: 34px; height: 34px; margin: 0 auto 16px; border-radius: 50%;
  border: 3px solid var(--linha2); border-top-color: var(--azul);
  animation: criando-gira .8s linear infinite;
}
@keyframes criando-gira { to { transform: rotate(360deg); } }
/* Parado, o anel deixa de girar: anel girando depois do fim afirma
   trabalho em curso que já terminou. */
.criando.parado .criando-anel { animation: none; border-top-color: var(--linha2); }
.criando.falhou .criando-anel { border-top-color: #e0684f; }

.criando-titulo { font-size: 15px; margin-bottom: 18px; color: var(--texto); }
.criando-titulo strong { color: var(--azul2); font-weight: 700; }

.criando-passos { list-style: none; text-align: left; display: grid; gap: 9px; }
.criando-passos li {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 13.5px; color: var(--fraco);
  transition: color .2s;
}
/* O marcador é conteúdo, não enfeite: ele diz o ESTADO da etapa. Fica em
   `::before` com largura fixa para os rótulos alinharem. */
.criando-passos li::before {
  content: '·'; width: 13px; flex: none; text-align: center;
  color: var(--fraco);
}
.criando-passos li.agora { color: var(--suave); }
.criando-passos li.agora::before { content: '◐'; color: var(--azul); }
.criando-passos li.feito { color: #64c98a; }
.criando-passos li.feito::before { content: '✓'; color: #64c98a; }
.criando-passos li.ultimo.feito { color: var(--azul2); }
.criando-passos li.ultimo.feito::before { color: var(--azul2); }
.criando-passos li.falhou { color: #e0684f; }
.criando-passos li.falhou::before { content: '✕'; color: #e0684f; }
/* Detalhe medido (quantas pastas, qual canal) em vez de adjetivo. */
.criando-passos li small { color: var(--fraco); font-size: 12px; }

.criando-erro {
  margin-top: 18px; padding: 11px 13px; border-radius: 9px; text-align: left;
  background: rgba(224, 104, 79, .1); border: 1px solid rgba(224, 104, 79, .3);
  color: #f0a595; font-size: 12.5px; line-height: 1.55;
}
.criando-erro[hidden] { display: none; }
.criando-saida {
  margin-top: 14px; padding: 9px 18px; border: 0; border-radius: 8px;
  background: var(--azul); color: var(--sobre-acento);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.criando-saida[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .criando, .criando-caixa { animation: none; }
  .criando-anel { animation-duration: 2.4s; }
}

/* ── Painel: os cinco do tempo e do recurso ────────────────────────────── */

/* pipeline — barra somando etapas + lista nominal clicável */
.pipe-barra {
  display: flex; height: 9px; border-radius: 5px; overflow: hidden;
  background: var(--card2); margin-bottom: 9px;
}
.pipe-seg { display: block; height: 100%; }
.pipe-legenda { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.pipe-leg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.pipe-leg i { width: 9px; height: 9px; border-radius: 3px; }
.pipe-lista { list-style: none; }
.pipe-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 0;
  border-top: 1px solid var(--linha); font-size: 13px;
}
.pipe-item b { flex: 1; font-weight: 600; }
.pipe-tag {
  padding: 2px 8px; border: 1px solid var(--linha2); border-radius: 20px;
  font-size: 11px; color: var(--suave); white-space: nowrap;
}
.pipe-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* heatmap — cinco degraus, e "sem dado" NÃO é o degrau zero */
.mapa-calor { border-collapse: separate; border-spacing: 3px; font-size: 12px; }
.mapa-calor th { color: var(--fraco); font-weight: 600; font-size: 11px; padding: 2px 4px; }
.hm-rot { text-align: right; white-space: nowrap; color: var(--suave) !important; }
.mapa-calor td {
  width: 30px; height: 26px; border-radius: 5px; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--sobre-acento);
}
.hm-0 { background: rgba(14, 211, 136, .16); color: var(--suave); }
.hm-1 { background: rgba(14, 211, 136, .34); }
.hm-2 { background: rgba(14, 211, 136, .55); }
.hm-3 { background: rgba(14, 211, 136, .76); }
.hm-4 { background: var(--azul); }
/* Vazado, e não a cor mais fraca: buraco de coleta não pode parecer zero. */
.hm-vazio {
  background: repeating-linear-gradient(45deg, transparent, transparent 3px,
    var(--linha) 3px, var(--linha) 4px);
}

/* calendar */
.calendario { width: 100%; border-collapse: separate; border-spacing: 3px; }
.calendario th { color: var(--fraco); font-size: 11px; font-weight: 600; padding-bottom: 2px; }
.calendario td {
  height: 58px; vertical-align: top; padding: 4px 5px; border-radius: 6px;
  background: var(--card2); font-size: 12px;
}
.cal-fora { background: transparent !important; }
.cal-hoje { outline: 1.5px solid var(--azul); }
.cal-num { color: var(--suave); font-variant-numeric: tabular-nums; }
.cal-pontos { display: flex; gap: 3px; margin-top: 3px; }
.cal-ev { width: 6px; height: 6px; border-radius: 50%; }
.cal-nome {
  display: block; font-size: 10.5px; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-mais { font-size: 10px; color: var(--fraco); }

/* agenda */
.agenda { list-style: none; }
.ag-item {
  display: flex; align-items: baseline; gap: 11px; padding: 9px 0;
  border-top: 1px solid var(--linha); font-size: 13px;
}
.ag-item time {
  color: var(--fraco); font-size: 11.5px; min-width: 92px;
  font-variant-numeric: tabular-nums;
}
.ag-item > div { flex: 1; }
.ag-item.passou { opacity: .5; }
.ag-item.hoje time { color: var(--azul2); font-weight: 700; }
.ag-hoje {
  padding: 1px 7px; border-radius: 20px; background: var(--azul);
  color: var(--sobre-acento); font-size: 10.5px; font-weight: 700;
}

/* schedule — faixas por recurso */
.escala { position: relative; }
.escala-horas { position: relative; height: 15px; margin-left: 96px; }
.esc-h {
  position: absolute; transform: translateX(-50%); font-size: 10.5px;
  color: var(--fraco); font-variant-numeric: tabular-nums;
}
.faixa { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.faixa-rot {
  width: 88px; flex: none; text-align: right; font-size: 12px;
  color: var(--suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.faixa-pista {
  position: relative; flex: 1; height: 26px; border-radius: 5px;
  background: var(--card2);
}
.bloco {
  position: absolute; top: 0; height: 100%; border-radius: 5px;
  display: flex; align-items: center; padding: 0 7px; font-size: 11.5px;
  font-weight: 600; color: var(--sobre-acento); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;
}

@media (max-width: 620px) {
  /* Grade de calendário e escala não encolhem: rolam. Comprimir vira ilegível. */
  .calendario, .escala { min-width: 520px; }
  .cartao:has(.calendario), .cartao:has(.escala) { overflow-x: auto; }
}

/* ── Coleções (records) ────────────────────────────────────────────────── */

#painel-abas {
  display: flex; gap: 4px; padding: 8px 12px 0; overflow-x: auto;
  border-bottom: 1px solid var(--linha);
}
#painel-abas[hidden] { display: none; }
.aba {
  border: 0; background: transparent; color: var(--suave);
  padding: 7px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.aba:hover { color: var(--texto); background: var(--card2); }
.aba.ativa { color: var(--azul2); border-bottom-color: var(--azul); }
.aba-conta {
  background: var(--card2); color: var(--fraco); border-radius: 20px;
  padding: 1px 6px; font-size: 11px; font-variant-numeric: tabular-nums;
}

/* COLEÇÕES (RECORDS) - RENDERIZAÇÃO EXECUTIVA & PROFISSIONAL
--------------------------------------------------------------------- */
.rec-container { display: flex; flex-direction: column; width: 100%; }

.rec-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.rec-topo-titulo { display: flex; align-items: center; gap: 8px; }
.rec-topo-titulo h2 { font-size: 16.5px; font-weight: 750; color: var(--texto); letter-spacing: -.01em; margin: 0; }
.rec-conta {
  padding: 2px 7px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linha);
  border-radius: 12px; font-size: 11px; font-weight: 600; color: var(--fraco);
  font-variant-numeric: tabular-nums;
}

.rec-view-switcher {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--card); border: 1px solid var(--linha2);
  border-radius: 8px; padding: 2px;
}
.rec-view-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; color: var(--fraco);
  padding: 4px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 550;
  cursor: pointer; transition: all .12s ease;
}
.rec-view-btn:hover { color: var(--texto); }
.rec-view-btn.ativo {
  background: var(--card2); color: var(--texto);
  font-weight: 650; box-shadow: 0 1px 4px rgba(0,0,0,.25);
}

/* MICRO-KPIS STRIP */
.rec-kpis-strip {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 12px;
  scrollbar-width: thin;
}
.rec-kpi-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 16px; background: var(--card2); border: 1px solid var(--linha);
  font-size: 11.5px; cursor: pointer; white-space: nowrap; transition: all .12s ease;
  color: var(--suave);
}
.rec-kpi-chip:hover { border-color: var(--kpi-cor, var(--linha2)); }
.rec-kpi-chip.ativo {
  background: var(--kpi-bg, rgba(14, 211, 136, 0.12));
  border-color: var(--kpi-cor, var(--azul));
  color: var(--texto); font-weight: 600;
}
.rec-kpi-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kpi-cor, var(--suave));
}
.rec-kpi-rotulo { font-size: 11.5px; }
.rec-kpi-num {
  font-size: 11.5px; font-weight: 700; color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.rec-kpi-total {
  margin-left: auto; border-color: var(--linha2);
  background: rgba(255, 255, 255, 0.03); cursor: default;
}

/* CONTROLES (BUSCA E FILTROS) */
.rec-controles {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
}
.rec-busca-wrap {
  position: relative; flex: 1; min-width: 170px;
}
.rec-busca-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--fraco); pointer-events: none;
}
.rec-busca-wrap input {
  width: 100%; box-sizing: border-box; padding: 7px 10px 7px 30px;
  border: 1px solid var(--linha2); border-radius: 8px;
  background: var(--card); color: var(--texto); font: inherit; font-size: 12.5px;
  outline: none; transition: border-color .15s;
}
.rec-busca-wrap input:focus { border-color: var(--azul); }
.rec-select {
  padding: 7px 10px; border: 1px solid var(--linha2); border-radius: 8px;
  background: var(--card); color: var(--texto); font: inherit; font-size: 12px;
  outline: none; cursor: pointer;
}
.rec-select:focus { border-color: var(--azul); }

/* CRACHÁS DE STATUS (PILLS COLORIDAS) */
.rec-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 650;
  border: 1px solid transparent; white-space: nowrap; line-height: 1.35;
}
.rec-badge-dot {
  width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
}

/* TABELA EXECUTIVA */
.rec-tabela-wrap {
  border: 1px solid var(--linha); border-radius: 10px;
  overflow-x: auto; background: var(--card2); box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.rec-tabela {
  width: 100%; border-collapse: collapse; font-size: 12.5px; text-align: left;
}
.rec-tabela th {
  padding: 8px 12px; font-size: 10.5px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco); background: var(--card);
  border-bottom: 1px solid var(--linha2); white-space: nowrap;
}
.rec-tabela td {
  padding: 9px 12px; border-bottom: 1px solid var(--linha); vertical-align: middle;
  color: var(--suave);
}
.rec-tabela-linha {
  cursor: pointer; transition: background .12s ease;
}
.rec-tabela-linha:hover { background: rgba(255, 255, 255, 0.04); }
.rec-tabela .td-id {
  color: var(--fraco); font-family: monospace; font-size: 11px; width: 45px;
}
.rec-tabela .td-titulo {
  font-weight: 650; color: var(--texto);
}
.rec-tabela .td-num {
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto);
}
.rec-link-mini {
  font-size: 11px; color: var(--azul2); text-decoration: none; padding: 2px 6px;
  border-radius: 4px; background: rgba(14, 211, 136, 0.1); font-weight: 600;
}
.rec-link-mini:hover { background: rgba(14, 211, 136, 0.2); }

/* GRID DE CARDS */
.rec-grid-cards {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px; margin: 0; padding: 0;
}
.rec-card-moderno {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  cursor: pointer; transition: all .15s ease;
}
.rec-card-moderno:hover {
  border-color: var(--linha2); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.rec-card-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.rec-card-titulo {
  font-size: 14px; font-weight: 650; color: var(--texto); line-height: 1.35;
}
.rec-card-extras {
  display: flex; flex-direction: column; gap: 4px; padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.rec-card-campo {
  display: flex; justify-content: space-between; font-size: 11.5px;
}
.rec-card-campo small { color: var(--fraco); }
.rec-card-campo span { color: var(--suave); font-weight: 550; }
.rec-id {
  color: var(--fraco); font-size: 11px; font-family: monospace;
  font-variant-numeric: tabular-nums;
}

/* FICHA DETALHADA */
.rec-ficha { display: flex; flex-direction: column; }
.rec-ficha-header {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; margin-bottom: 12px;
}
.rec-voltar {
  border: 0; background: rgba(14, 211, 136, 0.1); color: var(--azul2);
  cursor: pointer; font-size: 12px; font-weight: 650; padding: 5px 11px;
  border-radius: 6px; display: inline-flex; align-items: center; gap: 6px;
  transition: all .12s;
}
.rec-voltar:hover { background: rgba(14, 211, 136, 0.2); }
.rec-ficha-badges { display: flex; align-items: center; gap: 8px; }
.rec-id-badge {
  font-family: monospace; font-size: 11px; padding: 2px 7px;
  background: rgba(255,255,255,0.06); border-radius: 4px; color: var(--fraco);
}
.rec-ficha-titulo {
  font-size: 18px; font-weight: 750; color: var(--texto); margin-bottom: 16px;
  line-height: 1.3; letter-spacing: -.01em;
}
.rec-ficha-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px; margin-bottom: 10px;
}
.rec-ficha-card {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;
}
.rec-campo-rotulo {
  display: block; font-size: 10px; font-weight: 750; text-transform: uppercase;
  letter-spacing: .05em; color: var(--fraco);
}
.rec-campo-corpo { font-size: 13px; color: var(--texto); font-weight: 500; }
.rec-num-destaque { font-size: 15px; color: #38bdf8; font-variant-numeric: tabular-nums; }
.rec-ficha-bloco-longo {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 12px 14px; margin-top: 8px; display: flex; flex-direction: column; gap: 6px;
}
.rec-longo { white-space: pre-wrap; line-height: 1.6; font-size: 13px; color: var(--texto); }
.rec-link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  border-radius: 6px; background: rgba(14, 211, 136, 0.12); color: var(--azul2);
  text-decoration: none; font-size: 12px; font-weight: 600; transition: background .12s;
}
.rec-link-btn:hover { background: rgba(14, 211, 136, 0.22); }
.rec-ficha-rodape {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linha);
}
.rec-perguntar {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border: 1px solid var(--linha2); border-radius: 8px; background: var(--card2);
  color: var(--suave); font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: all .15s ease;
}
.rec-perguntar:hover {
  border-color: var(--azul); color: var(--texto); background: var(--card2);
}

/* Compatibilidade com rec-linha */
.rec-linha {
  display: grid; grid-template-columns: 130px 1fr; gap: 12px;
  padding: 9px 0; border-top: 1px solid var(--linha); font-size: 13.5px;
}
.rec-linha b { color: var(--fraco); font-weight: 600; font-size: 12.5px; }

@media (max-width: 620px) {
  .rec-linha { grid-template-columns: 1fr; gap: 3px; }
  .rec-ficha-grid { grid-template-columns: 1fr; }
}

/* Aviso de versão nova. Na lateral, acima da conta — não no rodapé da
   tela, onde cobria o chat e competia com o campo de mensagem. */
#aviso-versao {
  display: flex; flex-direction: column; gap: 10px;
  margin: 0 0 8px; padding: 10px 11px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; color: var(--texto);
  background: var(--card2);
  border: 1px solid color-mix(in srgb, var(--amarelo) 34%, var(--linha));
}
#aviso-versao .aviso-acoes { display: flex; gap: 6px; }
#aviso-versao button {
  border: 0; border-radius: 6px; padding: 6px 12px; cursor: pointer;
  font-size: 12.5px; background: #e0a53a; color: #1a1a1a; font-weight: 600;
  flex: 1;
}
#aviso-versao button.discreto {
  background: rgba(255,255,255,.10); color: var(--suave); font-weight: 400;
}

/* ── Modal de Configurações do Workspace (TronMext DS) ─────────────────── */
#modal-config {
  position: fixed; inset: 0; z-index: 75; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4, 6, 10, .78); backdrop-filter: blur(4px);
  animation: modal-fundo .14s ease-out;
}
#modal-config[hidden] { display: none !important; }

#config-janela {
  background: var(--card); border: 1px solid var(--linha2); border-radius: 14px;
  width: 100%; max-width: 920px; height: 640px; max-height: min(90vh, 760px);
  display: grid; grid-template-columns: 210px 1fr; grid-template-rows: 100%; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .75);
  animation: modal-entra .17s cubic-bezier(.2, .8, .3, 1);
}

.config-nav {
  background: var(--bg); border-right: 1px solid var(--linha);
  padding: 20px 10px 16px; display: flex; flex-direction: column; gap: 4px;
  min-height: 0; overflow-y: auto;
}
.config-ws-header {
  padding: 0 10px 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--suave);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.config-menu {
  display: flex; flex-direction: column; gap: 3px; overflow-y: auto; flex: 1;
}
.cfg-tab {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px; border-radius: 7px; border: 0; background: transparent;
  color: var(--suave); font-size: 13.5px; font-weight: 500; cursor: pointer;
  text-align: left; transition: background .12s, color .12s;
}
.cfg-tab svg { flex-shrink: 0; }
.cfg-tab:hover { background: var(--card2); color: var(--texto); }
.cfg-tab.ativo { background: var(--card2); color: var(--azul2); font-weight: 600; }
.cfg-tab .aba-conta { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 10px; background: var(--card2); color: var(--suave); }
.cfg-tab.ativo .aba-conta { background: rgba(14, 211, 136, .25); color: var(--azul2); }

.config-nav-rodape { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--linha); }
.cfg-tab-perigo { color: var(--vermelho); }
.cfg-tab-perigo:hover { background: rgba(240, 100, 100, .10); color: #ff7b7b; }
.cfg-tab-perigo.ativo { background: rgba(240, 100, 100, .15); color: #ff7b7b; font-weight: 600; }

.config-corpo {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  height: 100%; max-height: 100%; overflow: hidden; background: var(--card);
}
.config-corpo-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 24px 14px; border-bottom: 1px solid var(--linha); flex-shrink: 0;
}
.config-corpo-topo h2 {
  font-size: 16px; font-weight: 700; color: var(--texto); letter-spacing: -.2px; margin: 0;
}
.config-corpo-acoes {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}
.config-fechar-btn {
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: var(--suave); font-size: 22px;
  cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.config-fechar-btn:hover { background: var(--card2); color: var(--texto); }

.config-painel {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 22px 24px 28px;
  overscroll-behavior: contain;
}

.cfg-intro {
  color: var(--suave); font-size: 13px; line-height: 1.55; margin-bottom: 18px;
}
.cfg-carregando, .cfg-vazio {
  color: var(--fraco); font-size: 13px; padding: 20px 0; text-align: center;
}
.cfg-erro {
  color: var(--vermelho); font-size: 13px; padding: 12px; border-radius: 8px;
  background: rgba(240, 100, 100, .10); margin-bottom: 16px;
}

/* Telas do modal */
.cfg-card-sobre {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 20px;
}
.cfg-sobre-topo {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.cfg-sobre-topo h3 { font-size: 16px; font-weight: 700; color: var(--texto); }
.cfg-badge-ativo {
  font-size: 11.5px; font-weight: 600; color: var(--verde); background: rgba(68, 184, 112, .15);
  padding: 2px 8px; border-radius: 12px;
}
.cfg-grid-info { display: grid; gap: 12px; }
.cfg-info-linha {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 10px; border-bottom: 1px solid var(--linha); font-size: 13px;
}
.cfg-info-linha:last-child { border-bottom: 0; padding-bottom: 0; }
.cfg-rotulo { color: var(--suave); }
.cfg-valor { color: var(--texto); font-weight: 500; }
.cfg-nota-rodape { margin-top: 16px; font-size: 12px; color: var(--fraco); }

/* Rotinas no modal */
.ag-canal {
  font-size: 11px; color: var(--azul2); font-weight: 600; margin-left: 6px;
}

/* Consumo no modal */
.cfg-destaque-uso {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 18px;
}
.cfg-uso-num { font-size: 15px; color: var(--texto); margin-bottom: 10px; }
.cfg-uso-num b { font-size: 22px; font-weight: 800; color: var(--texto); margin-right: 6px; }
.cfg-uso-num small { color: var(--suave); font-size: 12.5px; }
.cfg-barra-uso {
  width: 100%; height: 8px; background: var(--linha); border-radius: 4px; overflow: hidden;
  margin-bottom: 8px;
}
.cfg-barra-progresso {
  height: 100%; background: var(--azul); border-radius: 4px; transition: width .3s ease;
}
.cfg-barra-progresso.alerta { background: var(--amarelo); }
.cfg-uso-meta { font-size: 12px; color: var(--suave); }
.cfg-metricas-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.cfg-metrica-card {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.cfg-met-label { font-size: 11.5px; color: var(--suave); }
.cfg-met-val { font-size: 14px; font-weight: 600; color: var(--texto); }
.cfg-box-aviso {
  background: rgba(14, 211, 136, .08); border: 1px solid rgba(14, 211, 136, .2);
  border-radius: 8px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: var(--suave);
}
.cfg-box-aviso b { color: var(--texto); }

/* Memória no modal */
.cfg-memoria-wrap {
  display: flex; flex-direction: column; height: calc(100% - 60px); min-height: 320px;
}
#cfg-memoria-texto {
  width: 100%; flex: 1; min-height: 320px; background: var(--bg); border: 1px solid var(--linha);
  border-radius: 8px; padding: 14px 16px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px; line-height: 1.6; color: var(--texto); resize: vertical; outline: none;
}
#cfg-memoria-texto:focus { border-color: var(--azul); }

/* Canais e Membros no modal */
.cfg-canais-lista, .cfg-membros-lista, .cfg-mcp-lista { display: flex; flex-direction: column; gap: 8px; }
.cfg-canal-item, .cfg-membro-item, .cfg-mcp-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card2); border: 1px solid var(--linha); border-radius: 8px;
  padding: 12px 16px;
}
.cfg-canal-info, .cfg-membro-info, .cfg-mcp-info {
  display: flex; flex-direction: column; gap: 2px;
}
.cfg-canal-nome { font-size: 14px; color: var(--texto); }
.cfg-canal-meta { font-size: 12px; color: var(--suave); }
.cfg-canal-acoes { display: flex; gap: 6px; }
.cfg-membro-item .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--linha2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.cfg-badge-papel {
  font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--linha);
  color: var(--suave); font-weight: 600; text-transform: capitalize;
}
.btn-perigo { color: var(--vermelho) !important; }
.btn-perigo:hover { background: rgba(240, 100, 100, .15) !important; border-color: var(--vermelho) !important; }

/* Zona de perigo no modal */
.cfg-perigo-bloco { display: flex; flex-direction: column; gap: 12px; }
.cfg-perigo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border: 1px solid rgba(240, 100, 100, .25); border-radius: 8px; padding: 14px 18px;
  background: rgba(240, 100, 100, .04);
}
.cfg-perigo-item b { display: block; font-size: 13.5px; color: var(--texto); margin-bottom: 2px; }
.cfg-perigo-item p { font-size: 12px; color: var(--suave); }

/* Seções e formulários do modal de configurações */
.cfg-secao-titulo {
  font-size: 14px; font-weight: 700; color: var(--texto); margin: 20px 0 10px;
}
.cfg-form {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 16px; margin-top: 14px;
}
.cfg-form input, .cfg-form select, .cfg-form textarea {
  width: 100%; padding: 8px 12px; border: 1px solid var(--linha2);
  border-radius: 7px; background: var(--bg); color: var(--texto);
  font: inherit; font-size: 13.5px; outline: none; box-sizing: border-box;
}
.cfg-form input:focus, .cfg-form select:focus, .cfg-form textarea:focus {
  border-color: var(--azul);
}
.cfg-form textarea { resize: vertical; min-height: 80px; }
.cfg-form fieldset {
  border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; margin: 4px 0;
}
.cfg-form legend {
  font-size: 12px; color: var(--suave); padding: 0 4px; font-weight: 500;
}
.cfg-chips-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.cfg-chip-label {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
  color: var(--suave); background: var(--card); border: 1px solid var(--linha);
  padding: 4px 9px; border-radius: 6px; cursor: pointer; user-select: none;
}
.cfg-chip-label:hover { color: var(--texto); border-color: var(--linha2); }
.cfg-chip-label input { width: auto; margin: 0; cursor: pointer; }
.cfg-form-acoes {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}

/* Card MCP e Ferramentas */
.cfg-mcp-card {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.cfg-mcp-card.desativada { opacity: .65; }
.cfg-mcp-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cfg-mcp-nome { font-size: 14px; font-weight: 700; color: var(--texto); }
.cfg-mcp-url {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px;
  color: var(--suave); background: var(--bg); padding: 3px 8px; border-radius: 5px;
  word-break: break-all;
}
.cfg-mcp-ferramentas {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;
}
.cfg-mcp-ferramentas code {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11.5px;
  background: rgba(14, 211, 136, .12); color: var(--azul2);
  border: 1px solid rgba(14, 211, 136, .25); padding: 2px 7px; border-radius: 4px;
}

/* Restrição de Canais inline */
.cfg-canal-card {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.cfg-canal-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.cfg-canal-painel-acesso, .cfg-canal-editor {
  background: var(--bg); border: 1px solid var(--linha2); border-radius: 8px;
  padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 4px;
}
.cfg-membros-acesso-grid, .cfg-editor-membros-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px;
}
.cfg-editor-membros-grid label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto);
  background: var(--card); border: 1px solid var(--linha); padding: 7px 10px;
  border-radius: 6px; cursor: pointer; user-select: none;
}
.cfg-editor-membros-grid label:hover { border-color: var(--linha2); }
.cfg-editor-membros-grid input { width: auto; margin: 0; cursor: pointer; }
.cfg-editor-membros-grid .papel { font-size: 11px; color: var(--suave); margin-left: auto; }

/* Caixa de Convite Gerado */
.cfg-convite-sucesso {
  background: rgba(68, 184, 112, .10); border: 1px solid rgba(68, 184, 112, .3);
  border-radius: 8px; padding: 12px 14px; margin-top: 12px; display: flex; flex-direction: column; gap: 8px;
}
.cfg-convite-link-box {
  display: flex; align-items: center; gap: 8px;
}
.cfg-convite-link-box input {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--linha);
  padding: 6px 10px; font-size: 12.5px; font-family: ui-monospace, monospace;
  color: var(--texto); border-radius: 6px;
}

/* Arquivos e Lixeira em Armazenamento — Acordeão por Canal */
.cfg-canais-arquivos-wrap {
  display: flex; flex-direction: column; gap: 10px;
}
details.cfg-canal-arquivos-bloco {
  background: var(--card2); border: 1px solid var(--linha); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .15s ease;
}
details.cfg-canal-arquivos-bloco[open] {
  border-color: var(--linha2);
}
summary.cfg-canal-arquivos-cab {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 14px; background: var(--card); border-bottom: 1px solid transparent;
  transition: background .12s ease;
}
summary.cfg-canal-arquivos-cab::-webkit-details-marker { display: none; }
summary.cfg-canal-arquivos-cab:hover { background: var(--card2); }
details.cfg-canal-arquivos-bloco[open] > summary.cfg-canal-arquivos-cab {
  border-bottom-color: var(--linha);
}
.cfg-canal-cab-info {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0;
}
.cfg-canal-cab-tag {
  font-weight: 700; font-size: 13.5px; color: var(--texto);
}
.cfg-canal-cab-meta {
  font-size: 11.5px; color: var(--suave); font-variant-numeric: tabular-nums;
}
.cfg-canal-chevron {
  font-size: 12px; color: var(--suave); transition: transform .2s ease;
  margin-left: 8px; flex-shrink: 0;
}
details.cfg-canal-arquivos-bloco[open] > summary .cfg-canal-chevron {
  transform: rotate(180deg);
}
.cfg-arquivos-lista {
  display: flex; flex-direction: column; gap: 1px; background: var(--linha);
}
.cfg-arquivo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px; background: var(--bg); font-size: 13px;
  transition: background .12s;
}
.cfg-arquivo-item:hover { background: var(--card); }
.cfg-arquivo-detalhes {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.cfg-arquivo-nome {
  font-size: 13px; font-weight: 500; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfg-arquivo-caminho {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px;
  color: var(--fraco); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cfg-arquivo-meta {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.cfg-arquivo-tam {
  font-size: 12px; font-weight: 600; color: var(--suave);
  font-variant-numeric: tabular-nums; min-width: 60px; text-align: right;
}

/* RESPONSIVIDADE COMPLETA DO MODAL DE CONFIGURAÇÕES */
@media (max-width: 768px) {
  #modal-config {
    padding: 0 !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  #config-janela {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 94vh !important;
    height: 94dvh !important;
    max-height: 94dvh !important;
    border-radius: 16px 16px 0 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .6) !important;
    overflow: hidden !important;
  }
  .config-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    width: 100% !important;
    padding: 0 8px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--linha) !important;
    background: var(--bg) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .config-nav::-webkit-scrollbar { display: none !important; }
  .config-ws-header { display: none !important; }
  .config-menu {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    height: 100% !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
  }
  .cfg-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0 12px !important;
    font-size: 12.5px !important;
    border-radius: 7px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    background: transparent !important;
    color: var(--suave) !important;
  }
  .cfg-tab:hover {
    background: var(--card2) !important;
    color: var(--texto) !important;
  }
  .cfg-tab.ativo {
    background: var(--card2) !important;
    color: var(--azul2) !important;
    font-weight: 600 !important;
  }
  .cfg-tab svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  .config-nav-rodape {
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    border: 0 !important;
    flex-shrink: 0 !important;
    height: 100% !important;
  }
  .cfg-tab-perigo {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 0 10px !important;
  }
  .config-corpo {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--card) !important;
  }
  .config-corpo-topo {
    padding: 10px 14px !important;
    min-height: 48px !important;
    flex-shrink: 0 !important;
  }
  .config-painel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .cfg-metricas-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cfg-info-linha {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
  .cfg-novo-membro-linha {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .cfg-canal-cab-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
}

/* ── Cofre de credenciais ─────────────────────────────────────────────── */
.sugestoes-chaves { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip-sugestao { background: var(--card2); border: 1px solid var(--linha); border-radius: 6px; font-size: 11px; padding: 2px 8px; color: var(--azul2); cursor: pointer; font-family: monospace; }
.chip-sugestao:hover { border-color: var(--azul); }
.pwd-wrap { position: relative; display: flex; align-items: center; }
.pwd-wrap input { width: 100%; padding-right: 38px; }
.btn-toggle-pwd { position: absolute; right: 6px; background: transparent; border: 0; cursor: pointer; padding: 4px 6px; font-size: 14px; opacity: .7; }
.btn-toggle-pwd:hover { opacity: 1; }
.lista-credenciais { display: flex; flex-direction: column; gap: 8px; }
.card-credencial { background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cred-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cred-nome-badge { font-family: monospace; font-size: 13px; font-weight: 700; color: var(--azul2); }
.cred-meta { font-size: 11.5px; color: var(--suave); display: flex; gap: 6px; flex-wrap: wrap; }