/* ==========================================================================
   NexChatDesk - folha de estilo unica
   Estrategia: layout fluido (grid auto-fit + clamp) em vez de larguras fixas,
   e tabelas que viram cartoes empilhados no celular.
   ========================================================================== */

:root {
  --bg: #f2f4f6;
  --panel: #ffffff;
  --panel-2: #f7f9fa;
  --border: #dfe4e8;
  --text: #1c2430;
  --muted: #6b7887;
  --brand: #128c4b;
  --brand-dark: #0d6e3a;
  --ok: #128c4b;
  --warn: #b8860b;
  --bad: #c0392b;
  /* O azul do aviso de informacao. Era a unica das quatro cores que nao
     existia: verde, amarelo e vermelho ja eram `--ok`, `--warn` e `--bad`. */
  --info: #1f6feb;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 18px rgba(16, 24, 32, .05);
  --gap: clamp(14px, 2vw, 18px);
  --pad: clamp(14px, 2.2vw, 20px);
}

/* O tema e uma ESCOLHA DA CONTA, nao do sistema operacional.
   O claro acima e o padrao: e o que ve quem nunca escolheu, e o que a tela de
   login mostra (ali ainda nao ha conta para consultar). Quem trocar no botao
   do topo grava `users.tema`, e o layout escreve o valor no
   `<html data-tema="...">` - ja na resposta, para a pagina nunca piscar clara
   antes de escurecer.

   Antes disto o painel seguia o `prefers-color-scheme` do Windows. Seguir o
   sistema operacional punha metade da equipe num painel e metade noutro sem
   ninguem ter pedido - e, embarcado no iframe, deixava o painel escuro ao lado
   de uma tela clara do sistema principal.

   `color-scheme` acompanha: e o que faz barra de rolagem, seletor de data e
   campo nativo virem na mesma cor do resto. Sem ele o tema escuro ganhava
   calendarios brancos. */
:root { color-scheme: light; }

:root[data-tema="escuro"] {
  color-scheme: dark;

  --bg: #14181d;
  --panel: #1c2229;
  --panel-2: #232b33;
  --border: #2c343d;
  --text: #e6ebf0;
  --muted: #93a0ad;
  --brand: #25b464;
  --brand-dark: #1d9152;
  /* No escuro o azul de cima fica fundo demais contra o painel. */
  --info: #4c8ffb;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }

/* O atributo `hidden` tem que ganhar de qualquer `display` nosso.
   O navegador so o aplica pela folha dele, que perde para qualquer regra de
   autor: bastava um `display: flex` na classe do elemento para ele continuar
   na tela mesmo "escondido". Ja tinha acontecido com a barra de citacao e com
   a caixa "enviar como figurinha". Esta linha resolve a familia inteira. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  /* O painel nao se seleciona: menus, botoes, rotulos e cabecalhos ficavam
     azuis a cada clique arrastado. So o que alguem copia de verdade continua
     selecionavel - o texto das mensagens (abaixo) e os campos de digitar. */
  -webkit-user-select: none;
  user-select: none;
}
/* `.copiavel`: o que se copia para mandar ao suporte - as falhas da tela de
   Erros e as linhas do Log da API. Ficavam presas na regra de cima, e o unico
   jeito de tirar um erro dali era redigita-lo. */
input, textarea, select, [contenteditable], [contenteditable] *,
.bubble .txt, .bubble .txt *,
.copiavel, .copiavel * {
  -webkit-user-select: text;
  user-select: text;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; word-break: break-all; }
code.small { font-size: .75em; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
img { max-width: 100%; height: auto; }

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px clamp(12px, 3vw, 22px);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

/*
 * A FAIXA DE RECADO, entre o topo e a tela.
 *
 * Larga de ponta a ponta, sem cantos redondos e sem sombra: ela nao e um
 * cartao dentro da pagina, e sim uma tarja da pagina - e e essa diferenca que
 * faz o olho passar por ela antes de chegar ao conteudo.
 *
 * A cor vem da borda esquerda grossa e de um fundo bem diluido da mesma cor.
 * Fundo cheio, na cor inteira, seria uma tarja gritando em toda tela o dia
 * inteiro; diluido, ela se faz notar sem virar a tela.
 */
/*
 * A TELA DE MANUTENCAO.
 *
 * Uma caixa centrada numa pagina vazia - sem topo, sem menu, sem nada
 * clicavel. E o ponto: enquanto a porta esta fechada nao ha para onde ir, e um
 * menu cheio de links que nao abrem faria a pessoa tentar todos antes de
 * acreditar.
 */
body.tela-manutencao {
  display: grid; place-items: center;
  min-height: 100vh; margin: 0; padding: 24px;
  background: var(--bg);
}
.manutencao-caixa {
  width: min(560px, 100%);
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 5vw, 38px);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  text-align: center;
}
.manutencao-caixa .logo { justify-self: center; margin: 0 auto; }
.manutencao-caixa h1 { margin: 0; font-size: clamp(22px, 4vw, 28px); }
.manutencao-texto {
  margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--text);
  overflow-wrap: anywhere;
}
.manutencao-volta {
  margin: 0; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); font-size: 14px; line-height: 1.5;
}
.manutencao-caixa .hint { margin: 0; }

/* As atualizacoes: a esquerda, porque sao texto corrido que se le linha a
   linha - centralizado, cada uma comecaria num lugar diferente. */
.manutencao-notas { text-align: left; border-top: 1px solid var(--border); padding-top: 14px; }
.manutencao-notas h2 { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.manutencao-nota { padding: 8px 0; border-bottom: 1px solid var(--border); }
.manutencao-nota:last-child { border-bottom: 0; }
.manutencao-nota p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Discreto de proposito: nao e para quem esta lendo o recado, e para quem
   precisa desligar a manutencao e chegou com a sessao vencida. */
.manutencao-porta { margin: 0; font-size: 12px; }
.manutencao-porta a { color: var(--muted); }

.faixa-avisos { display: flex; flex-direction: column; }
/* O aviso desligado continua na lista do painel do sistema, apagado: ele
   nao esta no ar, mas continua guardado para ser religado. */
.card-interno.desligado { opacity: .55; }
.faixa-aviso {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px clamp(12px, 3vw, 22px);
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--muted);
  background: var(--panel-2);
  font-size: 14px; line-height: 1.45;
}
.faixa-aviso-tipo {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); flex: none;
}
.faixa-aviso-texto { color: var(--text); overflow-wrap: anywhere; }

.faixa-aviso.sucesso { border-left-color: var(--ok);   background: rgba(18, 140, 75, .10); }
.faixa-aviso.sucesso .faixa-aviso-tipo { color: var(--ok); }
.faixa-aviso.info    { border-left-color: var(--info); background: rgba(31, 111, 235, .10); }
.faixa-aviso.info    .faixa-aviso-tipo { color: var(--info); }
.faixa-aviso.atencao { border-left-color: var(--warn); background: rgba(184, 134, 11, .12); }
.faixa-aviso.atencao .faixa-aviso-tipo { color: var(--warn); }
.faixa-aviso.erro    { border-left-color: var(--bad);  background: rgba(192, 57, 43, .10); }
.faixa-aviso.erro    .faixa-aviso-tipo { color: var(--bad); }

.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 17px; color: var(--text); white-space: nowrap;
}
.brand:hover { text-decoration: none; }

/*
 * O logo como IMAGEM ocupa o mesmo quadrado da letra.
 *
 * O fundo verde sai: ele existe para dar contraste a letra branca, e por tras
 * de uma imagem so serviria para aparecer nos cantos de um PNG transparente.
 * `object-fit: cover` porque ninguem manda um arquivo perfeitamente quadrado -
 * melhor preencher e cortar as beiradas do que entregar um logo achatado.
 */
/*
 * A tira de abas do painel do sistema.
 *
 * Mesma forma das abas do painel da conversa (`.chat-side-aba`), um pouco
 * maior porque aqui elas comandam a pagina inteira, e nao uma coluna. Sao
 * LINKS, e nao botoes: cada aba e um endereco, e link e o que o navegador sabe
 * guardar, abrir noutra guia e voltar.
 */
.abas {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.aba {
  padding: 6px 14px; border: 1px solid transparent; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; line-height: 1.6;
  color: var(--muted); text-decoration: none;
}
.aba:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.aba.ativa {
  background: var(--panel-2); color: var(--brand); border-color: var(--border);
}

/* A previa da marca no painel do sistema: o logo grande ao lado do nome. */
.marca-atual { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px; }
.marca-atual .logo { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }

.logo.imagem { background: none; overflow: hidden; }
.logo.imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }

.logo {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--brand); color: #fff; font-weight: 800;
}
.logo.big { width: 34px; height: 34px; font-size: 18px; }

.menu { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; min-width: 0; }
.menu a {
  padding: 7px 12px; border-radius: var(--radius-sm);
  color: var(--muted); font-weight: 500; white-space: nowrap;
}
.menu a:hover { background: var(--bg); text-decoration: none; color: var(--text); }
.menu a.active { background: var(--brand); color: #fff; }

.menu-toggle {
  display: none;
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

.user { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.user-nome { max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Botao de tema: redondo, do tamanho do sino, e sem texto - ao lado do nome e
   do "Sair" ele seria a terceira palavra numa barra que ja esta cheia, e some
   primeiro no celular. O icone mostra PARA ONDE se vai (lua no claro, sol no
   escuro), que e a pergunta de quem olha o botao. */
.tema-botao {
  flex: none; cursor: pointer;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
}
.tema-botao:hover { color: var(--text); }
.tema-botao:disabled { opacity: .55; cursor: default; }

/* Um icone de cada vez, escolhido pelo tema que esta valendo - assim o botao
   nao depende do JS para nascer certo depois de um F5. */
.tema-botao .tema-sol { display: none; }
:root[data-tema="escuro"] .tema-botao .tema-sol { display: block; }
:root[data-tema="escuro"] .tema-botao .tema-lua { display: none; }

/* -------------------------------------------------------------- sino -- */
/* Lista suspensa presa ao topo: nada de modal, nada de sair da pagina. */

.sino { position: relative; flex: none; }

.sino > summary {
  list-style: none; cursor: pointer; position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
}
.sino > summary::-webkit-details-marker { display: none; }
.sino > summary:hover { background: var(--panel-2); color: var(--text); }
.sino[open] > summary { border-color: var(--brand); color: var(--brand); }

.sino-icone { display: block; }

/* a bolinha some sozinha quando nao ha novidade (atributo hidden) */
.sino-bolinha {
  position: absolute; top: -3px; right: -3px;
  display: grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; border: 2px solid var(--panel);
  background: var(--bad); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
}
/* o display acima ganha do [hidden] do navegador - precisa desligar aqui */
.sino-bolinha[hidden] { display: none; }

.sino-caixa {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(340px, calc(100vw - 24px));
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}

.sino-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}

.sino-corpo { max-height: min(60vh, 380px); overflow-y: auto; }
.sino-vazio { margin: 0; padding: 20px 12px; text-align: center; font-size: 13px; }

.sino-itens { list-style: none; margin: 0; padding: 0; }
.sino-itens li + li { border-top: 1px solid var(--border); }

/* o item e o link; o botao de atender fica ao lado, fora dele */
.sino-li { display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.sino-li:hover { background: var(--bg); }

.sino-item {
  display: block; flex: 1; min-width: 0; padding: 10px 12px;
  color: var(--text); border-left: 3px solid transparent;
}
.sino-item:hover { text-decoration: none; }

.sino-acao { flex: none; margin: 0; }
.sino-acao .btn { white-space: nowrap; }

/* a vez na fila: o numero e a informacao, nao enfeite */
.sino-vez {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-right: 4px;
  border-radius: 999px; background: var(--border); color: var(--muted);
  font-size: 10.5px; font-weight: 700; line-height: 1; vertical-align: 1px;
}
.sino-item.setor .sino-vez { background: var(--bad); color: #fff; }
.sino-item.nova { border-left-color: var(--brand); }
.sino-item.transferida { border-left-color: var(--warn); }
.sino-item.setor { border-left-color: var(--bad); }
.sino-item.fila { border-left-color: var(--muted); }
.sino-item.falha { border-left-color: var(--bad); }

.sino-linha1 { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.sino-nome { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sino-hora { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }

.sino-motivo { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.sino-item.nova .sino-motivo { color: var(--ok); }
.sino-item.transferida .sino-motivo { color: var(--warn); }
.sino-item.setor .sino-motivo { color: var(--bad); }
.sino-item.fila .sino-motivo { color: var(--muted); }
.sino-item.falha .sino-motivo { color: var(--bad); }

/* quem mandou para ca - detalhe, nao concorre com o motivo */
.sino-origem { color: var(--muted); font-weight: 400; }

.sino-previa {
  margin-top: 2px; font-size: 12.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sino-item .tag.conexao {
  margin-top: 6px; background: var(--border); color: var(--muted);
}

.sino-rodape {
  display: block; padding: 9px 12px; text-align: center;
  border-top: 1px solid var(--border); background: var(--panel-2);
  font-size: 12.5px; font-weight: 600;
}
.sino-rodape:hover { text-decoration: none; background: var(--bg); }

/* ------------------------------------------------------------- layout -- */

.wrap {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 28px) clamp(14px, 3vw, 22px);
}
.wrap.centered { max-width: 420px; padding-top: clamp(24px, 8vh, 80px); }

/* Telas de coluna ocupam a largura toda. O limite de 1200px existe para texto
   corrido nao virar linha longa demais; aqui ele so espremeria as colunas no
   meio do monitor, deixando faixa vazia dos dois lados. */
body.tela-conversas .wrap,
body.tela-config .wrap { max-width: none; }

h1 { font-size: clamp(20px, 2.4vw, 25px); margin: 0 0 var(--gap); line-height: 1.25; }
h2 {
  font-size: 13px; margin: 22px 0 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
h2:first-child { margin-top: 0; }

.card {
  /* permite que a tabela reaja a largura do CARTAO, nao so a da tela */
  container-type: inline-size;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
  margin-bottom: var(--gap);
}
.card.narrow { max-width: 480px; }

/* auto-fit: quebra sozinho conforme a largura disponivel, sem breakpoint fixo */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: var(--gap);
  align-items: start;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* ------------------------------------------------------------- painel -- */

.painel-cabeca {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap);
}
.painel-cabeca h1 { margin: 0; }
.painel-estado { display: flex; gap: 8px; flex-wrap: wrap; }

/* Numeros de cima. Sao links de proposito: cada um leva para a tela onde se
   faz alguma coisa a respeito - numero que so informa se olha uma vez. */
.painel-numeros {
  display: grid; gap: var(--gap); margin-bottom: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.numero {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--shadow);
  color: var(--text); text-decoration: none;
}
.numero:hover { border-color: var(--brand); text-decoration: none; }
.numero-valor {
  font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* o que pede acao ganha cor; o resto fica no tom do texto, sem competir */
.numero-valor.atencao { color: var(--brand); }
.numero-nome { font-size: 12px; color: var(--muted); }

/* Cartoes em colunas: num grid a linha seria medida pelo cartao mais alto e
   abriria vao embaixo dos vizinhos (mesmo caso da tela da conexao). */
.painel-cartoes {
  columns: 330px auto;
  column-gap: var(--gap);
}
.painel-cartoes > .card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: var(--gap);
}
.painel-cartoes > .card > h2:first-child { margin-top: 0; }

.painel-lista-simples { list-style: none; margin: 0 0 10px; padding: 0; }
.painel-lista-simples li {
  border-top: 1px solid var(--border);
}
.painel-lista-simples li:first-child { border-top: 0; }
.painel-lista-simples li,
.painel-lista-simples li > a {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; color: var(--text); text-decoration: none;
}
.painel-lista-simples li > a { padding: 0; flex: 1; min-width: 0; }
.painel-lista-simples li > a:hover { text-decoration: none; color: var(--brand); }
/* O nome fica com pelo menos metade da linha: com `flex: 1` puro ele encolhia
   ate virar "Su..." para caber o cracha e o rodape. Nao cabendo, o rodape
   quebra para a linha de baixo - e ele que sobra, nao o nome. */
.painel-lista-simples .rotulo {
  flex: 1 1 50%; min-width: 0; font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.painel-lista-simples small { flex: none; margin-left: auto; font-size: 11.5px; }
.painel-lista-simples .tag { flex: none; }
@media (max-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
.card.stat { text-align: center; margin: 0; }
.card.stat .num { display: block; font-size: clamp(22px, 3vw, 28px); font-weight: 700; line-height: 1.1; }
.card.stat .num.ok { color: var(--ok); }

.foot { text-align: center; color: var(--muted); font-size: 12px; padding: 22px 16px; }

/* --------------------------------------------------------- formularios -- */

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
/* Rotulo com "?" de ajuda: o texto e o "?" na mesma linha, o campo embaixo.
   Em coluna, o "?" virava uma linha propria entre o rotulo e o campo. Em
   linha com quebra, o texto (item anonimo) e o "?" dividem a primeira linha
   e todo o resto - campo, contador, observacao - ocupa a largura inteira. */
.stack label:not(.check):has(> .ajuda) {
  flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 0;
}
.stack label:not(.check):has(> .ajuda) > :not(.ajuda) { flex: 1 1 100%; }

input, select, textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; width: 100%; max-width: 100%;
}

/* Caixa de marcar e bolinha NAO sao campo de texto.
   A regra acima diz `input`, e isso as pega junto: a bolinha ganhava largura
   total, padding e borda, virava uma barra transparente do tamanho da linha e
   empurrava o proprio rotulo para o canto direito. O sintoma era uma lista de
   opcoes espalhada pela tela com as bolinhas soltas no meio - dava para clicar,
   mas nada dizia qual texto era de qual.

   `accent-color` e o que as pinta na cor do painel; sem ela o navegador usa o
   azul dele, que aqui e a unica coisa azul da tela. */
input[type="checkbox"], input[type="radio"] {
  width: auto; max-width: none; min-height: 0;
  padding: 0; margin: 0;
  border: 0; background: none;
  accent-color: var(--brand);
}

input:disabled { opacity: .6; }
textarea { resize: vertical; min-height: 76px; }

.row-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row-form > * { flex: 1 1 190px; min-width: 0; }
.row-form > .btn, .row-form > button { flex: 0 0 auto; }
.inline { display: inline; }
.inline-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--muted); font-weight: 600;
}
.inline-label select { flex: 1; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; cursor: pointer; text-align: center;
  min-height: 40px; padding: 9px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
}
.btn:hover { filter: brightness(.96); text-decoration: none; }
.btn:disabled { opacity: .6; cursor: default; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 32px; padding: 5px 11px; font-size: 12px; }
.btn.block { width: 100%; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
  cursor: pointer; font: inherit; font-size: 12px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  border-radius: 999px; padding: 6px 13px; min-height: 32px;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
/* chip usado como link de filtro (periodo das avaliacoes) */
a.chip { display: inline-block; text-decoration: none; color: var(--text); }
a.chip:hover { text-decoration: none; }
.chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip.active:hover { color: #fff; }

/* vale em qualquer lugar, nao so dentro de .stack: sem isto o checkbox
   herda o width:100% dos campos e fica em cima do texto */
label.check {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  font-weight: 500; font-size: 13px; color: var(--text); cursor: pointer;
}
label.check input[type="checkbox"],
label.check input[type="radio"] {
  /* `flex: none` e o que ainda faz falta aqui: dentro de um flex, a bolinha
     encolheria para caber o texto. */
  width: auto; flex: none; margin: 0; min-height: 0;
}

.sign-preview {
  display: block; white-space: pre-line; margin: 6px 0;
  padding: 9px 13px; border-radius: var(--radius-sm);
  background: rgba(18, 140, 75, .12); color: var(--text);
  border-left: 3px solid var(--brand); width: fit-content; max-width: 100%;
}

/* ------------------------------------------------------------- avisos -- */

.alert {
  padding: 11px 14px; border-radius: var(--radius-sm);
  margin-bottom: var(--gap); border: 1px solid; font-size: 14px;
}
.alert.success { background: rgba(18, 140, 75, .12); border-color: var(--ok); color: var(--ok); }
.alert.danger { background: rgba(192, 57, 43, .12); border-color: var(--bad); color: var(--bad); }
.alert.warn-box { background: rgba(184, 134, 11, .14); border-color: var(--warn); color: var(--warn); }
/* no lugar da caixa de envio, quando o outro lado da conversa foi desativado */
.alert.im-inativo { margin: 10px 12px; flex: none; }

/* ------------------- cartao dentro de um card (painel do sistema) ------- */

/* Separa cada administrador dentro do quadro de ajuste. Um card dentro de
   outro precisa de borda mais discreta, senao a tela vira uma pilha de caixas
   competindo por atencao. */
.card-interno {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
  padding: var(--pad);
  margin-bottom: 10px;
}
.card-interno:last-child { margin-bottom: 0; }
.card-interno .actions { align-items: center; gap: 10px; }

/* A senha sorteada: para ser LIDA em voz alta e copiada, entao monoespacada
   (o `l` e o `1` precisam se distinguir) e grande o bastante para ninguem
   errar um caractere ditando ao telefone. */
.senha-sorteada {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 17px; letter-spacing: .5px;
  padding: 3px 8px; margin: 0 2px;
  border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--border);
  user-select: all;   /* um clique seleciona ela inteira */
}

/* ------------------- anexos do mensageiro interno, em miniatura --------- */

/* A tira fica ACIMA da linha de escrita. Rola de lado quando passa da largura
   em vez de crescer para cima: o que nao pode acontecer e a caixa de escrever
   ser empurrada para fora da tela por causa das miniaturas. */
.im-anexos {
  display: flex; gap: 8px; flex-wrap: nowrap;
  overflow-x: auto; padding: 8px 2px 2px;
  scrollbar-width: thin;
}

.im-anexo {
  position: relative; flex: none;
  width: 68px; height: 68px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); overflow: hidden;
}
.im-anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* O que nao e imagem nao tem miniatura: mostra a extensao e o nome, que e o
   que identifica um PDF ou uma planilha na hora de conferir antes de enviar. */
.im-anexo-arquivo {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; padding: 4px; gap: 2px; text-align: center;
}
.im-anexo-ext  { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.im-anexo-nome { font-size: 10px; line-height: 1.15; color: var(--muted);
                 overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
                 -webkit-box-orient: vertical; overflow-wrap: anywhere; }

/* O X fica sempre visivel, e nao so no hover: em tela de toque nao ha hover, e
   um botao que so aparece com o mouse nao existe para quem usa o celular. */
.im-anexo-tirar {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(6, 9, 12, .62); color: #fff;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.im-anexo-tirar:hover { background: var(--bad); }

/* Arrastando um arquivo por cima da conversa. */
.im-soltando { outline: 2px dashed var(--brand); outline-offset: -6px; }

/* ------------------------------ avisos em balao, no canto --------------- */

/* Canto de cima a direita, por cima de tudo.
   `position: fixed` nao e empurrado por nada e nao e cortado por `overflow`
   - importa porque as telas de tabela deixam o `body` com `overflow: hidden`.
   O z-index passa o da barra do topo (30), senao o balao nasce atras dela. */
.avisos-canto {
  position: fixed;
  top: 12px; right: 12px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  width: min(380px, calc(100vw - 24px));
  pointer-events: none;   /* o canto vazio nao pode roubar clique da tela */
}

.aviso-balao {
  pointer-events: auto;   /* o balao, sim, recebe clique */
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px;
  border: 1px solid; border-radius: var(--radius-sm);
  background: var(--panel); box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.4;
  animation: aviso-entra .18s ease-out;
}
.aviso-balao.ok   { border-color: var(--ok);  color: var(--ok); }
.aviso-balao.erro { border-color: var(--bad); color: var(--bad); }

.aviso-texto { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.aviso-fechar {
  flex: none; border: 0; background: transparent; color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: .7;
}
.aviso-fechar:hover { opacity: 1; }

/* Sai encolhendo a propria altura junto: sem isso os baloes de baixo davam um
   salto para cima quando o de cima sumia. */
.aviso-balao.saindo {
  opacity: 0; transform: translateX(12px);
  margin-top: calc(-1 * (100% + 8px));
  transition: opacity .2s ease, transform .2s ease, margin-top .2s ease;
}

/* Com o mouse em cima o balao esta sendo lido: a barra de tempo para. */
.aviso-balao.parado { box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent), var(--shadow); }

@keyframes aviso-entra {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

/* Quem pediu menos movimento na tela nao ganha nenhum. */
@media (prefers-reduced-motion: reduce) {
  .aviso-balao { animation: none; }
  .aviso-balao.saindo { transition: none; }
}

/* No estreito o balao ocupa a largura, encostado no topo. */
@media (max-width: 560px) {
  .avisos-canto { top: 8px; right: 8px; left: 8px; width: auto; }
}

.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 12.5px; margin: 10px 0 0; }

/* O "?" de ajuda ao lado de um campo (helper `ajuda()`). A explicacao abre
   passando o mouse, focando com o teclado ou tocando (classe `aberta`, posta
   pelo app.js). `a-esquerda` e o app.js avisando que pela direita ela sairia
   da tela. */
.ajuda {
  position: relative; display: inline-block; vertical-align: middle;
  margin-left: 5px; line-height: 1;
  font-weight: 400; text-transform: none; letter-spacing: normal;
}
.ajuda-botao {
  width: 17px; height: 17px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel-2); color: var(--muted);
  font-size: 11px; font-weight: 700; line-height: 1; cursor: help;
}
.ajuda-botao:hover,
.ajuda.aberta .ajuda-botao { color: var(--brand); border-color: var(--brand); }
.ajuda-botao:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ajuda-texto {
  display: none;
  /* abre para CIMA: para baixo cobria o proprio campo que ele explica */
  position: absolute; bottom: calc(100% + 6px); left: -8px; z-index: 40;
  width: max-content; max-width: min(300px, calc(100vw - 32px));
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  font-size: 12.5px; line-height: 1.45; text-align: left; white-space: normal;
}
.ajuda.a-esquerda .ajuda-texto { left: auto; right: -8px; }
/* colado no topo da tela nao ha espaco em cima: ai, e so ai, abre embaixo */
.ajuda.para-baixo .ajuda-texto { bottom: auto; top: calc(100% + 6px); }
.ajuda:hover .ajuda-texto,
.ajuda:focus-within .ajuda-texto,
.ajuda.aberta .ajuda-texto { display: block; }

.tag {
  display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; letter-spacing: .03em; white-space: nowrap;
  background: var(--border); color: var(--muted);
}
.tag.ok { background: rgba(18, 140, 75, .15); color: var(--ok); }
.tag.warn { background: rgba(184, 134, 11, .18); color: var(--warn); }
.tag.bad { background: rgba(192, 57, 43, .15); color: var(--bad); }

/* ----------------------------------------------------------- tabelas -- */

/* rolagem horizontal em telas medias, sem quebrar o layout da pagina.
   A barra nao e desenhada - a tabela rola do mesmo jeito. */
.table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.table-wrap::-webkit-scrollbar { width: 0; height: 0; }

/* Paginas cuja tela e basicamente uma tabela: ela ocupa a altura util e
   rola por dentro, com o cabecalho fixo. */
@media (min-height: 600px) {
  body.tela-tabela { height: 100vh; height: 100dvh; overflow: hidden; }
  body.tela-tabela .foot { display: none; }
  body.tela-tabela .wrap {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  body.tela-tabela .card.tabela-cheia {
    flex: 1; min-height: 0; margin-bottom: 0;
    display: flex; flex-direction: column; overflow: hidden;
  }
  /* Tabela dentro de um <form> (tela de Acessos): sem isto o form corta a
     corrente do flex, a rolagem interna nao acontece e o fim da tabela fica
     escondido, sem barra nenhuma. De quebra, os botoes ficam presos embaixo. */
  body.tela-tabela .card.tabela-cheia > form {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column;
  }
  body.tela-tabela .card.tabela-cheia .table-wrap { flex: 1; min-height: 0; overflow-y: auto; }
}

/* ------------------------------ tela de envio ---------------------------- */

.envio-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.envio-form, .envio-contatos {
  margin: 0; padding: 0; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.envio-rolagem { flex: 1; min-height: 0; overflow-y: auto; padding: var(--pad); }
.envio-rodape {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  padding: 12px var(--pad); border-top: 1px solid var(--border);
}

.contatos-cabecalho {
  flex: none; padding: 14px var(--pad); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 9px;
}
.contatos-cabecalho h2 { margin: 0; }
.contatos-lista { flex: 1; min-height: 0; overflow-y: auto; }
.contatos-lista .vazio { padding: 16px var(--pad); }

.contato-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px var(--pad); border-bottom: 1px solid var(--border);
  cursor: pointer; font-size: 13.5px;
}
.contato-item:hover { background: var(--panel-2); }
.contato-item input { width: auto; flex: none; margin-top: 2px; }
.contato-item.marcado { background: rgba(18, 140, 75, .12); }
.contato-item[hidden] { display: none; }

/* as listas rolam por dentro; a barra nao e desenhada */
.envio-rolagem, .contatos-lista {
  scrollbar-width: none; -ms-overflow-style: none;
}
.envio-rolagem::-webkit-scrollbar,
.contatos-lista::-webkit-scrollbar { width: 0; height: 0; }

@media (min-height: 600px) {
  body.tela-envio { height: 100vh; height: 100dvh; overflow: hidden; }
  body.tela-envio .foot { display: none; }
  body.tela-envio .wrap {
    display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  }
  /* o <form> envolve tudo: sem repassar a altura aqui, a cadeia quebra
     e a lista de contatos fica cortada em vez de rolar */
  body.tela-envio #envioForm {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
  }
  body.tela-envio .envio-layout { flex: 1; min-height: 0; }
}

@media (max-width: 860px) {
  .envio-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  body.tela-envio { height: auto; overflow: visible; }
  body.tela-envio .wrap { overflow: visible; }
  .envio-rolagem { overflow: visible; }
  .contatos-lista { max-height: 50vh; }
}

/* cabecalho da pagina com o botao de acao no canto */
.pagina-cabecalho {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap);
}
.pagina-cabecalho h1 { margin: 0; }
.acoes-cabecalho { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.acoes-cabecalho .row-form { gap: 8px; margin: 0; }
.acoes-cabecalho select { min-width: 140px; }

/* painel do formulario: fica recolhido ate clicarem em Adicionar/Editar */
.form-painel[hidden] { display: none; }
.form-linha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 12px;
}

/* cabecalho da tabela fica visivel enquanto se rola */
.card.tabela-cheia .table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--border);
}

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td {
  text-align: left; padding: 10px 8px;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.table th {
  color: var(--muted); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tr.inactive { opacity: .55; }
.table .msg-cell { min-width: 200px; overflow-wrap: anywhere; word-break: break-word; }
/*
 * A CELULA DE ACAO VOLTA A SER CELULA.
 *
 * `.actions` e um flex-box - certo no rodape de um formulario, errado dentro
 * de um <td>: virando flex, a celula para de obedecer ao alinhamento da LINHA
 * e o botao fica solto, desencontrado do resto. Era o botao torto da tabela de
 * empresas.
 *
 * O `margin-left` no lugar do `gap`: sem o flex o `gap` nao vale mais, e ha
 * celula de acao com mais de um botao.
 */
.table td.actions {
  white-space: nowrap;
  display: table-cell;
  vertical-align: middle;
}
.table td.actions > * + * { margin-left: 8px; }

/* Coluna de numero: a direita, com algarismo de largura fixa, para as casas
   ficarem uma embaixo da outra em vez de dançarem de linha para linha. */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/*
 * LINHA SIM, LINHA NAO.
 *
 * Numa tabela larga - a de empresas tem dez colunas - o olho perde a linha no
 * meio do caminho e le o numero de uma empresa achando que e de outra. A faixa
 * segura a leitura ate o fim.
 *
 * `--bg`, e nao `--panel-2`: o segundo e tao proximo do branco do cartao que a
 * faixa so aparece se a pessoa procurar por ela - o que e o mesmo que nao ter.
 *
 * As DUAS cores sao escritas, a impar inclusive. Deixar a impar sem regra
 * funcionava so enquanto o fundo atras fosse o branco do cartao; bastava a
 * tabela cair noutro lugar para a alternancia sumir sem motivo aparente.
 *
 * `vertical-align: middle` porque estas celulas tem duas alturas (nome em cima,
 * apelido embaixo); alinhadas ao topo, as colunas de uma linha so pareciam
 * subir em relacao as outras.
 */
.table.zebra th, .table.zebra td { padding: 16px 12px; vertical-align: middle; }
.table.zebra tbody tr:nth-child(odd)  { background: var(--panel); }
.table.zebra tbody tr:nth-child(even) { background: var(--bg); }

/* Listas do painel: rolam por dentro em vez de esticar a pagina,
   e sem desenhar a barra (mesmo tratamento da tela de conversas). */
.feed, .painel-lista {
  max-height: clamp(200px, 44vh, 540px);
  overflow-y: auto;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.feed::-webkit-scrollbar,
.painel-lista::-webkit-scrollbar { width: 0; height: 0; }

/* A trava de altura do painel (body.tela-painel) saiu daqui: ela prendia a
   pagina na janela e mandava os cartoes rolarem por dentro, mirando um
   `.grid-2` que o painel nao usa mais. Com os cartoes em colunas, quem rola
   e a pagina - e ai nada fica cortado sem jeito de alcancar. */

.feed { list-style: none; margin: 0; padding: 0; }
.feed li { padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.feed li:last-child { border-bottom: 0; }
.feed .body { margin: 3px 0; overflow-wrap: anywhere; }

.links { list-style: none; padding: 0; margin: 0; }
.links li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.links li:last-child { border-bottom: 0; }

.msg-author { font-weight: 700; color: var(--brand); }

/* lista de membros do setor */
fieldset.members {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px 14px; margin: 0;
  max-height: 240px; overflow-y: auto;
}
fieldset.members legend {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 0 6px;
}
fieldset.members label.check {
  display: flex; flex-direction: row; align-items: center; gap: 9px;
  padding: 5px 0; font-weight: 500; color: var(--text); cursor: pointer;
}
fieldset.members label.check input { width: auto; flex: none; margin: 0; }

/* ------------------------------------------------------- QR e conversa -- */

/* A altura acompanha o que esta dentro. Com uma altura fixa aqui, o cartao
   reservava espaco de QR Code mesmo conectado - meia tela vazia embaixo de um
   visto verde. Cada estado pede a sua propria presenca, logo abaixo. */
.qr-box {
  text-align: center; display: grid; place-content: center; gap: 10px;
}
.qr-box img {
  width: min(260px, 70vw); height: auto; aspect-ratio: 1;
  background: #fff; padding: 8px; border-radius: var(--radius-sm);
}
.connected-box .check { font-size: 52px; color: var(--ok); line-height: 1; }

/* ------------------------------------------------------ tela da conexao -- */

/* Faixa de cima: identidade, ficha e os botoes de ligar/parar numa linha so.
   O QR entra abaixo, e so ocupa altura quando existe um QR para ler. */
.conexao-faixa { padding-bottom: 0; }
.conexao-faixa-topo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 26px;
}
.conexao-identidade { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.conexao-identidade h1 { margin: 0; font-size: 21px; }

/* Ficha da conexao. Era uma tabela "Detalhes" no fim da pagina - aqui em cima
   ela responde de imediato que numero e este e desde quando. */
.conexao-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.conexao-meta > div { display: flex; flex-direction: column; gap: 1px; }
.conexao-meta dt {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.conexao-meta dd { margin: 0; font-size: 13px; }
.conexao-meta code { font-size: 12px; }

/* O que o host mandou, na tela de aviso do SSO. Empilhado e nao em colunas:
   o aviso quase sempre aparece dentro de um iframe estreito, e e-mail e razao
   social nao cabem lado a lado la. */
.sso-recebido {
  margin: 0; padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  border: 1px solid var(--border);
}
.sso-recebido dt {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.sso-recebido dd {
  margin: 0 0 8px; font-size: 13px;
  /* Razao social longa e e-mail nao quebram sozinhos e estouravam o cartao. */
  overflow-wrap: anywhere;
}
.sso-recebido dd:last-child { margin-bottom: 0; }

.conexao-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.conexao-atalhos { display: flex; gap: 8px; flex-wrap: wrap; }
.conexao-atalhos .btn { text-decoration: none; }

/* Cartoes do mesmo peso, fluindo em duas colunas. Antes eram duas colunas
   fixas com todo o conteudo de um lado - a outra ficava com um cartao e um
   vazio do tamanho da tela. */
/* Colunas de texto, e nao grid: num grid a LINHA e medida pelo cartao mais
   alto, entao "Quem pode usar" (com as duas listas) abria um vao do tamanho
   dele embaixo dos vizinhos. Em colunas o navegador equilibra as alturas e os
   cartoes se encaixam. `break-inside` e o que impede um cartao de ser partido
   ao meio de uma coluna para outra. */
.conexao-cartoes {
  margin-top: var(--gap);
  /* largura minima de cada coluna: o numero de colunas sai da tela -
     uma no celular, duas no notebook, tres ou mais no monitor largo */
  columns: 300px auto;
  column-gap: var(--gap);
}

/* Ajustes atravessa todas as colunas, em cima, e divide a largura entre as
   caixas: nome, tipo e dono lado a lado, quebrando linha quando nao cabem. */
.conexao-cartoes > .card.conexao-ajustes { column-span: all; -webkit-column-span: all; }
.ajustes-grade {
  display: grid; gap: 16px var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  align-items: start;
}
.ajustes-grade > .ajuste + .ajuste { margin-top: 0; padding-top: 0; border-top: 0; }
.conexao-cartoes > .card {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  margin-bottom: var(--gap);
}
.conexao-cartoes > .card > h2:first-child { margin-top: 0; }

/* Blocos dentro de um cartao, separados por uma linha em vez de por moldura. */
.ajuste + .ajuste { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.ajuste-rotulo {
  display: block; margin-bottom: 7px;
  font-size: 12px; font-weight: 700; color: var(--text);
}
.ajuste .hint { margin-bottom: 0; }

/* Desconectar e excluir levam um ponto vermelho: o que os separa nao e a
   moldura, e o aviso de que esses dois nao tem como desfazer. */
.ajuste-risco .ajuste-rotulo { color: var(--bad); }
.ajuste-risco .ajuste-rotulo::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; margin-right: 7px;
  border-radius: 50%; background: var(--bad);
}

/* Estado parado: em vez de uma caixa vazia, o desenho de um QR apagado e a
   instrucao. Deixa claro que falta uma acao, nao que algo quebrou. */
.qr-vazio { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 150px; }
.qr-vazio-icone {
  display: grid; place-items: center;
  width: 76px; height: 76px; border-radius: var(--radius);
  border: 1px dashed var(--border); color: var(--muted);
}
.qr-vazio-icone svg { width: 40px; height: 40px; display: block; }

/* o QR ganha respiro e uma moldura clara, para a camera achar rapido */
.qr-box img { box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }

/* Conectada nao ha QR: o bloco vira uma linha, em vez de reservar a altura de
   um codigo que nao vai aparecer. */
.connected-box { display: flex; align-items: center; justify-content: center; gap: 8px; }
.connected-box p { margin: 0; }
.connected-box .check { font-size: 20px; color: var(--ok); line-height: 1; }
.qr-box.compacto { padding: 10px 0 14px; }

/* Pessoas e setores lado a lado enquanto couber; empilhados no estreito */
.acesso-colunas {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
/* Rola por dentro: a lista cresce com o cadastro, o cartao nao. */
.acesso-colunas .members { max-height: min(280px, 34vh); }

/* Busca das duas listas + contagem do que esta marcado. Com dezenas de nomes,
   achar e mais rapido do que rolar, e o resumo diz o estado sem rolar nada. */
.acesso-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acesso-topo input[type="search"] { flex: 1; min-width: 150px; }
#acessoResumo { flex: none; white-space: nowrap; }

.acesso-nada { margin: 6px 0 0; font-size: 12.5px; }

/* Para quem so pode olhar: a lista vira uma linha de crachas, que ocupa o
   espaco do que existe em vez da altura de uma caixa de rolagem. */
.acesso-craches { display: flex; flex-wrap: wrap; gap: 6px; }
.acesso-cracha {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 12.5px; font-weight: 600;
}
.acesso-cracha small { font-weight: 400; color: var(--muted); font-size: 10.5px; }
.acesso-cracha.setor { border-color: rgba(18, 140, 75, .45); color: var(--brand); }

/* --------------------------- Conversas: duas colunas --------------------- */

/* ---------------------------------------------------------------------------
   Tela de conversas: a pagina nao rola. A altura fica travada no viewport e
   quem rola por dentro sao a lista e a janela de mensagens.
   O `min-height: 0` em cada nivel e essencial: sem ele um item flex/grid se
   recusa a encolher abaixo do proprio conteudo e a coluna vaza a tela.
   --------------------------------------------------------------------------- */
body.tela-conversas { height: 100vh; height: 100dvh; overflow: hidden; }
body.tela-conversas .foot { display: none; }

body.tela-conversas .wrap {
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

/* ------------------------------------------------- configuracoes -- */
/* Mesma ideia da tela de Conversas: topicos a esquerda, tela a direita.
   Quem rola sao as colunas, nao a pagina. */

body.tela-config { height: 100vh; height: 100dvh; overflow: hidden; }
body.tela-config .foot { display: none; }
body.tela-config .wrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

.config-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.config-side {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  min-height: 0; overflow-y: auto;
}
.config-side-head {
  padding: var(--pad) var(--pad) 10px;
  border-bottom: 1px solid var(--border);
}
.config-side-head h1 { margin: 0; font-size: 18px; }

.config-topicos { display: flex; flex-direction: column; }

.config-topico {
  display: flex; flex-direction: column; gap: 1px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: var(--text);
}
.config-topico:hover { background: var(--bg); text-decoration: none; }
.config-topico strong { font-size: 14.5px; }
.config-topico span { font-size: 12px; }
.config-topico.ativo { background: var(--bg); border-left-color: var(--brand); }
.config-topico.ativo strong { color: var(--brand); }

/* Grupo do menu (ex.: Acessos = Setores, Usuarios, Acessos): o item abre um
   submenu ao clicar. <details>/<summary>, sem JavaScript. */
.config-grupo > summary { cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
.config-grupo > summary::-webkit-details-marker { display: none; }
.config-grupo > summary::after {
  content: ""; position: absolute; right: var(--pad); top: 50%;
  width: 7px; height: 7px; margin-top: -6px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .15s;
}
.config-grupo[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.config-subtopicos { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); background: var(--bg); }
.config-subtopico {
  padding: 9px var(--pad) 9px calc(var(--pad) + 14px);
  border-left: 3px solid transparent;
  font-size: 14px; color: var(--text);
}
.config-subtopico:hover { background: var(--panel-2); text-decoration: none; }
.config-subtopico.ativo { border-left-color: var(--brand); color: var(--brand); font-weight: 600; }

/* Coluna da direita: so rola. Cada tela ja traz os proprios cartoes, entao
   nao viramos cartao aqui - empilhar cartao sobre cartao so faria ruido. */
.config-pane {
  margin: 0;
  min-height: 0; overflow-y: auto;
  padding-right: 2px;
  /* flex-column porque as telas de tabela contam com um pai assim: o
     `.card.tabela-cheia` usa `flex: 1` para ocupar a altura e rolar por
     dentro. Sem isto, dentro da casca, elas encolheriam. */
  display: flex; flex-direction: column;
}
.config-pane > *:first-child { margin-top: 0; }

/* As duas colunas rolam por dentro sem desenhar a barra - mesmo tratamento
   da tela de conversas e das tabelas. O conteudo rola igual: roda do mouse,
   toque, teclado. */
.config-side, .config-pane, .config-topicos {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.config-side::-webkit-scrollbar,
.config-pane::-webkit-scrollbar,
.config-topicos::-webkit-scrollbar { width: 0; height: 0; }

.chat-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);   /* impede a linha de crescer com o conteudo */
  gap: var(--gap);
  align-items: stretch;
}
/* terceira coluna: so existe com o detalhe aberto */
.chat-layout.com-painel {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(260px, 340px);
}

.chat-side {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.chat-side[hidden] { display: none; }

.chat-side-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--border); flex: none;
}
.chat-side-head h2 { margin: 0; font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text); }

.chat-side-corpo {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: var(--pad);
  display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.chat-side-corpo::-webkit-scrollbar { width: 0; height: 0; }
.chat-side-corpo > [hidden] { display: none; }
.chat-side-corpo form { display: block; }
.chat-side-corpo .btn { width: 100%; justify-content: center; }
.chat-side-corpo select { width: 100%; }
.chat-side-corpo textarea { width: 100%; }

/* Abas do painel de detalhe. Elas eram quatro botoes no cabecalho da conversa;
   lado a lado empurravam o prazo e o cracha de transferida para fora da linha,
   que e justamente onde a informacao da conversa mora. */
.chat-side-abas {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px var(--pad);
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
.chat-side-aba {
  padding: 4px 11px; border: 1px solid transparent; border-radius: 999px;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.6;
  background: transparent; color: var(--muted); cursor: pointer;
}
.chat-side-aba:hover { color: var(--text); background: var(--panel); }
.chat-side-aba.ativa {
  background: var(--panel); color: var(--brand); border-color: var(--border);
}

/* painel da IA */
.ia-botoes { display: flex; flex-direction: column; gap: 6px; }
.ia-resposta {
  margin-top: 4px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap;
  max-height: 45vh; overflow-y: auto;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ia-resposta::-webkit-scrollbar { width: 0; height: 0; }
.ia-resposta[hidden] { display: none; }

/* A IA falando direto com o cliente: destacado porque, ligado, ela envia
   sozinha - o atendente precisa enxergar isso sem procurar. */
.ia-atendimento {
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel-2);
}
.ia-atendimento.ligado {
  border-color: var(--warn); background: rgba(184, 134, 11, .10);
}
.ia-atendimento strong { display: block; font-size: 13px; }
.ia-atendimento .hint { margin: 4px 0 8px; }

/* telas baixas: aperta as bordas em vez de soltar a altura da pagina */
@media (max-height: 620px) {
  body.tela-conversas .wrap { padding-top: 10px; padding-bottom: 10px; }
  .conv-side-head { padding-top: 10px; padding-bottom: 10px; }
  .conv-side-head h1 { font-size: 16px; margin-bottom: 8px; }
  .reply-box textarea { min-height: 44px; }
}

/* Celular deitado: nao cabe tudo de uma vez. Em vez de cortar a caixa de
   resposta, o painel inteiro passa a rolar por dentro. */
@media (max-height: 420px) {
  .chat-pane { overflow-y: auto; }
  .chat-window { flex: none; min-height: 140px; overflow: visible; }
}

.conv-side, .chat-pane {
  margin: 0; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.conv-side { padding: 0; }

.conv-side-head {
  padding: 14px var(--pad); border-bottom: 1px solid var(--border); flex: none;
}
.conv-side-head h1 { font-size: 19px; margin: 0 0 10px; }
.row-form.compacto { gap: 8px; margin-bottom: 8px; }
.row-form.compacto:last-child { margin-bottom: 0; }
.row-form.compacto select { font-size: 13px; padding: 7px 10px; }

/* Seletor de ordem da lista de conversas. Dois links lado a lado em vez de um
   <select>: sao duas opcoes so, e ver as duas juntas diz de cara qual esta
   valendo e qual e a outra leitura possivel. */
/* --------------------------------- topo e rodape da lista de conversas -- */

.conv-side-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.conv-side-topo h1 { margin: 0; }

/* Funil que abre os filtros. Eles ficam recolhidos porque o que importa na
   tela de todo dia e a lista - tres campos abertos empurravam as conversas
   para baixo da dobra. */
.conv-filtros-botao {
  position: relative; flex: none;
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--muted); cursor: pointer;
}
.conv-filtros-botao svg { width: 16px; height: 16px; display: block; }
.conv-filtros-botao:hover { color: var(--text); background: var(--panel-2); }
.conv-filtros-botao.aberto { color: var(--brand); border-color: var(--brand); }

/* Ponto de aviso: ha filtro estreitando a lista agora. Sem ele, esconder os
   campos deixaria a lista curta sem explicacao a vista. */
.conv-filtros-marca {
  position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--panel);
}

/* Busca da lista: lupa dentro do campo, a esquerda */
.conv-busca { position: relative; margin-top: 10px; }
.conv-busca svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.conv-busca input {
  width: 100%; box-sizing: border-box;
  padding: 7px 10px 7px 32px; font-size: 13px;
}

/* Resultados: dois grupos, cada um com seu titulo */
.conv-busca-titulo {
  margin: 0; padding: 12px var(--pad) 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.conv-busca-msg .conv-previa mark {
  background: rgba(18, 140, 75, .25); color: inherit; border-radius: 2px; padding: 0 1px;
}
.conv-busca-mais { padding: 10px var(--pad); font-size: 12px; }

/* a bolha que o resultado da busca apontou pisca ao abrir a conversa */
.bubble.busca-alvo { animation: busca-alvo 2.5s ease-out; }
@keyframes busca-alvo {
  0%, 40% { box-shadow: 0 0 0 3px var(--brand); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

.conv-filtros { margin-top: 10px; }
.conv-filtros[hidden] { display: none; }

/* Botao redondo de conversa nova: flutua sobre o fim da lista, no canto de
   sempre. Fica no .conv-side (que e relativo) para nao rolar junto. */
.conv-side { position: relative; }
.conv-nova {
  position: absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--brand); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
}
.conv-nova svg { width: 24px; height: 24px; display: block; }
.conv-nova:hover { background: var(--brand-dark); }
.conv-nova:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* a ultima conversa nao pode ficar embaixo do botao */
.conv-list { padding-bottom: 76px; }

.conv-ordem {
  display: flex; gap: 4px; margin-bottom: 8px;
}
.conv-ordem-btn {
  flex: 1; text-align: center; text-decoration: none;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; line-height: 1.6;
  background: var(--panel); color: var(--muted);
}
.conv-ordem-btn:hover { color: var(--text); background: var(--panel-2); }
.conv-ordem-btn.ativa {
  background: rgba(18, 140, 75, .14); border-color: var(--brand); color: var(--brand);
}

.conv-list { flex: 1; overflow-y: auto; min-height: 0; }
.conv-list .vazio { padding: 18px var(--pad); }

/* Foto a esquerda, o resto da linha a direita. Grade em vez de `block` para
   a foto nao empurrar a previa nem a linha de situacao. */
.conv-item {
  display: grid; grid-template-columns: 40px 1fr; gap: 0 10px; align-items: start;
  padding: 11px var(--pad);
  border-bottom: 1px solid var(--border); color: var(--text);
  border-left: 3px solid transparent;
}
.conv-item > :not(.conv-foto) { grid-column: 2; }
.conv-foto {
  grid-column: 1; grid-row: 1 / span 4;
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--panel-2); align-self: center;
}
.conv-item:hover { background: var(--panel-2); text-decoration: none; }
.conv-item.ativa { background: var(--panel-2); border-left-color: var(--brand); }

/* mensagem nova do cliente: verde forte, some assim que a conversa e aberta */
.conv-item.nao-lida {
  background: rgba(18, 140, 75, .16);
  border-left-color: var(--brand);
}
.conv-item.nao-lida:hover { background: rgba(18, 140, 75, .22); }
.conv-item.nao-lida .conv-nome { color: var(--brand); }
.conv-item.nao-lida .conv-previa { color: var(--text); font-weight: 600; }

/* Conversa que a IA esta atendendo: azul. Cor propria, fora da escala de
   urgencia (verde/laranja/vermelho) - nao e um estado que pede acao, e um
   aviso de que quem esta respondendo ali nao e uma pessoa. */
.conv-item.com-ia {
  background: rgba(56, 132, 214, .14);
  border-left-color: #3884d6;
}
.conv-item.com-ia:hover { background: rgba(56, 132, 214, .20); }
.conv-item.com-ia .conv-nome { color: #5aa0e6; }
.tag.ia-tag { background: rgba(56, 132, 214, .22); color: #5aa0e6; }

/* ------------------------------------------------------------------ *
 * A IA esta escrevendo
 *
 * A resposta da IA sai de um processo separado e leva dezenas de segundos.
 * Sem sinal nenhum na tela, esse tempo parece o sistema travado - que era
 * exatamente o que acontecia antes, quando a espera ficava dentro da
 * requisicao. Os tres pontos existem para dizer "esta vindo, aguarde".
 * ------------------------------------------------------------------ */

.ia-pontos { display: inline-flex; gap: 3px; align-items: center; margin-left: 5px; }
.ia-pontos i {
    width: 4px; height: 4px; border-radius: 50%;
    background: currentColor; opacity: .35;
    animation: ia-pulso 1.2s infinite ease-in-out;
}
.ia-pontos i:nth-child(2) { animation-delay: .18s; }
.ia-pontos i:nth-child(3) { animation-delay: .36s; }

@keyframes ia-pulso {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30%           { opacity: 1;  transform: translateY(-2px); }
}

.tag.ia-escrevendo { display: inline-flex; align-items: center; }

/* o balao que fica no fim da conversa, onde a resposta vai nascer */
.bubble.ia-pensando {
    opacity: .8;
    border: 1px dashed rgba(90, 160, 230, .5);
    background: rgba(56, 132, 214, .10);
}
.bubble.ia-pensando .ia-pontos { margin: 4px 0 2px; color: #5aa0e6; }
.bubble.ia-pensando .when { font-style: italic; }

/* O mesmo balao, do lado de la: o CLIENTE esta escrevendo agora.
   Verde e nao azul de proposito - azul, aqui dentro, e a IA. O tracejado e o
   que as duas tem em comum, e e o que diz "isto ainda nao e uma mensagem". */
.bubble.them.cliente-digitando {
    opacity: .8;
    border: 1px dashed rgba(18, 140, 75, .55);
    background: rgba(18, 140, 75, .10);
}
.bubble.cliente-digitando .ia-pontos { margin: 4px 0 2px; color: #2ea36a; }
.bubble.cliente-digitando .when { font-style: italic; }

/* na lista de conversas ela toma o lugar da previa enquanto dura */
.conv-previa .digitando { color: #2ea36a; font-style: italic; }
.conv-previa .digitando .ia-pontos { color: #2ea36a; }

/* quem prefere menos movimento na tela nao perde a informacao: os pontos
   continuam la, so param de se mexer */
@media (prefers-reduced-motion: reduce) {
    .ia-pontos i { animation: none; opacity: .7; }
}

/* aberta manda no visual: quem esta lendo precisa achar onde esta */
.conv-item.com-ia.ativa { background: var(--bg); border-left-color: var(--brand); }

.contador-novas {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 700;
}

/* transferida para voce e ainda nao aberta: laranja suave */
.conv-item.transferida {
  background: rgba(184, 134, 11, .10);
  border-left-color: var(--warn);
}
.conv-item.transferida:hover { background: rgba(184, 134, 11, .16); }
.tag.transferida-tag { background: rgba(184, 134, 11, .20); color: var(--warn); }

/* Prazo, cracha de transferida e Acoes, na ponta direita do cabecalho.
   O detalhe da transferencia abre em modal: inline ele tomava meia tela e
   empurrava a conversa para baixo. */
.chat-head-chips {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.chat-head-chips .menu-acoes { margin-left: 0; }

.chat-head-transfer {
  flex: none; border: 0; background: none; padding: 0; cursor: pointer;
}
.chat-head-transfer:hover .tag { filter: brightness(1.15); }

/* aviso de historico cortado: uma palavra no subtitulo, nao uma faixa */
.chat-head-ocultas { color: var(--warn); cursor: help; }

/* Linha do tempo dentro do modal, do mais recente para o mais antigo */
.transfer-linha-tempo { list-style: none; margin: 0; padding: 0; }
.transfer-linha-tempo li {
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.transfer-linha-tempo li:last-child { border-bottom: 0; }
.transfer-linha-tempo li.atual { border-left-color: var(--warn); }
.transfer-quem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.transfer-quando { font-size: 12px; }
.transfer-motivo { margin-top: 3px; font-size: 12.5px; }

/* faixa de estado + menu de acoes da conversa */
.chat-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px var(--pad) 0;
}
.menu-acoes { position: relative; margin-left: auto; }
.menu-acoes > summary { list-style: none; cursor: pointer; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-lista {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 25;
  min-width: 210px; padding: 6px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 4px;
}
.menu-lista form { display: block; }
.menu-lista .btn { width: 100%; justify-content: flex-start; }

.conv-linha1 { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.conv-nome {
  font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-hora { font-size: 11px; color: var(--muted); white-space: nowrap; flex: none; }

.conv-previa {
  font-size: 13px; color: var(--muted); margin: 2px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.conv-linha3 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.conv-linha3 .tag.conexao { background: var(--border); color: var(--muted); }

/* Cor escolhida para a conexao (Ajustes da conexao). Mesma paleta das
   etiquetas; o seletor repete `.tag.conexao` para ganhar das regras acima,
   que pintam o cinza padrao dentro da lista e do sino. */
.tag.conexao.cor-verde    { background: rgba(18, 140, 75, .18);  color: var(--brand); }
.tag.conexao.cor-azul     { background: rgba(38, 116, 191, .18); color: #2f7fd0; }
.tag.conexao.cor-roxo     { background: rgba(126, 87, 194, .18); color: #8b63d6; }
.tag.conexao.cor-laranja  { background: rgba(214, 122, 32, .18); color: #d67a20; }
.tag.conexao.cor-vermelho { background: rgba(192, 57, 43, .18);  color: var(--bad); }
.tag.conexao.cor-amarelo  { background: rgba(184, 134, 11, .20); color: var(--warn); }

/* Seletor de cor da conexao. Fechado: a previa da etiqueta, que e o botao.
   Aberto: um painel com as bolinhas logo abaixo, por cima do resto. */
.conexao-cor-picker { position: relative; display: inline-block; }
.conexao-cor-picker summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel);
}
.conexao-cor-picker summary::-webkit-details-marker { display: none; }
.conexao-cor-picker summary:hover { background: var(--panel-2); }
.conexao-cor-picker summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.conexao-cor-picker summary svg { width: 18px; height: 18px; color: var(--muted); }
.conexao-cor-picker[open] summary svg { transform: rotate(180deg); }

.conexao-cor-painel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  display: flex; gap: 8px; padding: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}
.conexao-cor-opcao { position: relative; cursor: pointer; line-height: 0; }
.conexao-cor-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.conexao-cor-bola {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border);
}
.conexao-cor-opcao:hover .conexao-cor-bola { transform: scale(1.1); }
.conexao-cor-opcao input:checked + .conexao-cor-bola { box-shadow: 0 0 0 2px var(--text); }
.conexao-cor-opcao input:focus-visible + .conexao-cor-bola { box-shadow: 0 0 0 2px var(--brand); }
.conexao-cor-bola.cor-padrao   { background: var(--border); }
.conexao-cor-bola.cor-verde    { background: #128c4b; }
.conexao-cor-bola.cor-azul     { background: #2f7fd0; }
.conexao-cor-bola.cor-roxo     { background: #8b63d6; }
.conexao-cor-bola.cor-laranja  { background: #d67a20; }
.conexao-cor-bola.cor-vermelho { background: #c0392b; }
.conexao-cor-bola.cor-amarelo  { background: #b8860b; }
.conv-resp { font-size: 11.5px; color: var(--brand); font-weight: 600; }

.chat-pane { padding: 0; }
.chat-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px var(--pad); border-bottom: 1px solid var(--border); flex: none;
}
/* Foto + nome: um botao so, que abre o cartao do contato */
.chat-head-contato {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  border: 0; background: none; padding: 0; margin: 0; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: 8px;
}
.chat-head-contato:hover strong { text-decoration: underline; }
.chat-head-contato:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Conexao, responsavel e os chips (com o Opcoes) numa linha so, na direita.
   A conexao e o responsavel vem primeiro, na ponta esquerda dela. */
.chat-head-direita {
  margin-left: auto; min-width: 0;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.chat-head-direita .chat-head-chips { margin-left: 0; }
.chat-head-meta {
  font-size: 12px; color: var(--muted); white-space: nowrap;
  padding: 3px 9px; border-radius: 999px; background: var(--panel-2);
}
.chat-head-meta#chatResp { color: var(--brand); font-weight: 600; }
/* tela estreita: a linha da direita desce inteira para baixo do contato */
@media (max-width: 700px) {
  .chat-head { flex-wrap: wrap; }
  .chat-head-direita { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* Cartao do contato: foto grande, nome e telefone */
.contato-modal .modal-conteudo { max-width: 340px; }
.contato-cartao { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.contato-foto {
  width: 160px; height: 160px; border-radius: 50%;
  object-fit: cover; background: var(--panel-2);
}
.contato-cartao strong { font-size: 18px; word-break: break-word; }
.contato-fone { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.contato-renomear { display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); text-align: left; }
.contato-renomear .btn { align-self: center; }

.chat-head-info { min-width: 0; display: flex; flex-direction: column; }
.chat-head-info strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-info small { font-size: 12px; }
.chat-head-info .chat-visto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-info .chat-visto.online { color: var(--brand); }

.chat-pane .alert { margin: 12px var(--pad) 0; }

.chat-vazio {
  flex: 1; display: grid; place-content: center; justify-items: center;
  gap: 14px; padding: 40px; text-align: center;
}

.reply-box {
  flex: none; padding: 12px var(--pad); border-top: 1px solid var(--border); gap: 8px;
  /* ancora do seletor de emoji, que sobe por cima do fim da conversa */
  position: relative;
}

/* ------------------------------------------------ seletor de emoji --
   Abre encostado na borda de cima da caixa de resposta e cobre o fim da
   conversa - o mesmo lugar do WhatsApp. Nao empurra nada: se empurrasse, abrir
   o seletor moveria a conversa inteira sob os olhos de quem esta lendo. */
.emoji-painel {
  position: absolute; bottom: 100%; left: var(--pad); right: var(--pad);
  z-index: 30;
  display: flex; flex-direction: column;
  max-height: min(340px, 55vh);
  margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.emoji-titulo {
  flex: none; padding: 8px 12px 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

.emoji-grade {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0 8px 8px;
  display: grid; gap: 2px;
  /* a coluna se ajusta a largura da conversa em vez de um numero fixo:
     o painel do chat muda de tamanho conforme a lateral esta aberta */
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
}
.emoji-vazio { grid-column: 1 / -1; margin: 12px 4px; font-size: 12.5px; }

.emoji-item {
  aspect-ratio: 1; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-sm);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.emoji-item:hover { background: var(--panel-2); }
.emoji-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

/* As divisas ficam no RODAPE, e nao no topo: e para onde o cursor volta
   depois de escolher, e onde o WhatsApp tambem as poe. */
.emoji-divisas {
  flex: none; display: flex; gap: 2px;
  padding: 4px 6px;
  border-top: 1px solid var(--border); background: var(--panel-2);
  overflow-x: auto; scrollbar-width: none;
}
.emoji-divisas::-webkit-scrollbar { height: 0; }

.emoji-divisa {
  flex: none; width: 34px; height: 30px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 17px; line-height: 1; cursor: pointer;
  opacity: .6;
}
.emoji-divisa:hover { opacity: 1; background: var(--panel); }
.emoji-divisa.ativa { opacity: 1; border-bottom-color: var(--brand); }

.emoji-abrir { font-size: 17px; line-height: 1; }
.emoji-abrir.ativo { border-color: var(--brand); }
/* cresce ate 4 linhas (altura ajustada no JS) e nao desenha a barra */
.reply-box textarea {
  min-height: 42px;
  resize: none;
  overflow-y: hidden;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.reply-box textarea::-webkit-scrollbar { width: 0; height: 0; }

/* uma linha: texto a esquerda, assinatura sobre os botoes a direita */
.reply-linha { display: flex; align-items: flex-end; gap: 10px; }
.reply-linha textarea { flex: 1; min-width: 0; }
.reply-lado {
  flex: none; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px;
}
.reply-lado .check { font-size: 12.5px; white-space: nowrap; }
.reply-botoes { display: flex; align-items: center; gap: 8px; }

/* usada tambem na tela de Enviar */
.reply-esquerda { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* botao so com icone (envio) */
.btn.icone {
  width: 44px; min-width: 44px; padding: 0; flex: none;
}
.btn.icone svg { width: 19px; height: 19px; display: block; }

.anexo-escolhido {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: var(--bg); font-size: 13px;
}
.anexo-escolhido img { max-height: 52px; border-radius: 6px; }
.anexo-escolhido .check { font-size: 13px; }
/* display:flex venceria o [hidden] do navegador: precisa ser explicito */
.anexo-escolhido[hidden], .anexo-escolhido .check[hidden] { display: none; }

/* Bloco que abre dentro do painel lateral (transferir). O formulario e
   comprido: fica fechado ate alguem precisar dele. */
.acao-bloco > summary {
  cursor: pointer; padding: 6px 0; font-weight: 600; font-size: 13px;
  color: var(--text); list-style: none;
}
.acao-bloco > summary::-webkit-details-marker { display: none; }
/* Triangulo do bloco recolhido, desenhado com bordas em vez de um caractere.
   O glifo que morava aqui ja se perdeu numa gravacao do arquivo e virou um
   "B8" literal na tela; sem glifo nao ha byte para se perder, e ele tambem
   deixa de depender de a fonte do sistema ter o simbolo. */
.acao-bloco > summary::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 0; height: 0; margin-right: 8px;
  border: 4px solid transparent;
  border-left-color: var(--muted);
  transition: transform .12s;
}
.acao-bloco[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .acao-bloco > summary::before { transition: none; }
}
.acao-bloco > summary:hover { color: var(--brand); }
.acao-bloco > form { padding-top: 8px; }

.so-no-celular { display: none; }

/* uma coluna de cada vez em telas estreitas */
@media (max-width: 620px) {
  .reply-linha { flex-direction: column; align-items: stretch; }
  .reply-lado { flex-direction: row; align-items: center; justify-content: space-between; }
  .reply-lado .check { white-space: normal; }
}

@media (max-width: 860px) {
  /* Configuracoes em tela estreita: a lista vira uma faixa rolavel em cima */
  body.tela-config { height: auto; overflow: visible; }
  body.tela-config .wrap { overflow: visible; }
  .config-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .config-side { overflow: visible; }
  .config-side-head { padding-bottom: 8px; }
  .config-topicos { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .config-topicos::-webkit-scrollbar { display: none; }
  .config-topico {
    border-bottom: 3px solid transparent; border-left: 0;
    white-space: nowrap; padding: 10px 14px;
  }
  .config-topico span { display: none; }
  .config-topico.ativo { border-bottom-color: var(--brand); }
  /* o grupo na faixa: o submenu abre ao lado do item, na mesma linha */
  .config-grupo { display: flex; flex: none; }
  .config-grupo > summary { padding-right: 30px; }
  .config-grupo > summary::after { right: 12px; transform: rotate(-45deg); margin-top: -4px; }
  .config-grupo[open] > summary::after { transform: rotate(135deg); margin-top: -4px; }
  .config-subtopicos { flex-direction: row; border-bottom: 0; }
  .config-subtopico {
    white-space: nowrap; padding: 10px 12px;
    border-left: 0; border-bottom: 3px solid transparent;
  }
  .config-subtopico.ativo { border-bottom-color: var(--brand); }
  .config-pane { overflow: visible; }

  .chat-layout,
  .chat-layout.com-painel { grid-template-columns: 1fr; }
  .chat-layout.com-conversa .conv-side { display: none; }
  .chat-layout:not(.com-conversa) .chat-pane { display: none; }
  /* nao cabem duas colunas: o detalhe ocupa o lugar da conversa */
  .chat-layout.com-painel .chat-pane { display: none; }
  .so-no-celular { display: inline-flex; }
}

.chat-window {
  flex: 1;
  min-height: 120px;   /* nunca some, mesmo em tela baixa */
  overflow-y: auto;
  padding: 14px var(--pad);
  display: flex; flex-direction: column; gap: 8px;
}

/* Conversa curta encosta no RODAPE, e nao no topo: as mensagens nascem em cima
   da caixa de resposta e vao empurrando as antigas para cima, como no
   WhatsApp. Sem isto, quem abria um atendimento de tres mensagens via as tres
   coladas no teto, longe de onde vai escrever, com meia tela de vazio no meio.

   O truque e um item de tamanho zero que come todo o espaco que sobra. Duas
   coisas o recomendam sobre o obvio:

   `justify-content: flex-end` no proprio .chat-window seria a forma direta - e
   quebra a rolagem. Num container que rola, ele joga o inicio do conteudo para
   FORA da area rolavel: as mensagens antigas ficam acima do zero da rolagem e
   nao ha como chegar nelas.

   `margin-top: auto` no primeiro filho tambem funcionaria, mas aqui o primeiro
   filho varia: quem nao e administrador nao tem o botao de historico, e o
   #chatAntigas vazio some por `display: none` - continuando a ser :first-child
   para o CSS, so que sem poder empurrar nada. O ::before nao depende de quem
   esta na tela: ele e sempre o primeiro item, e sempre existe.

   Margem automatica so absorve espaco que SOBRA. Quando a conversa e longa e o
   conteudo transborda, ela vale zero e a rolagem se comporta como sempre - que
   e exatamente o que o `justify-content` nao faz. */
.chat-window::before {
  content: '';
  margin-top: auto;
}

/* As bolhas ficam em blocos - o historico carregado a mao, o atendimento atual
   (que o polling troca) e o aviso de que o cliente esta escrevendo (que tem
   polling proprio, mais rapido). Os blocos repetem o flex do pai, senao o
   `align-self` das bolhas nao teria contra o que se alinhar.

   Os dois do mensageiro interno (`#imAtual`, `#imAntigasCaixa`) ficaram de
   fora desta lista por um tempo, e o estrago era duplo: sem flex, `align-self`
   nao vale nada, entao TODA bolha virava um bloco comum encostado a esquerda -
   a minha e a da outra pessoa no mesmo lugar - e, como bloco, ela parava no
   `max-width: 78%`, deixando um vao permanente do lado direito da tela. Uma
   regra faltando, dois sintomas que pareciam coisas diferentes. */
#chatAntigas, #chatAtual, #chatDigitando,
#imAtual, #imAntigasCaixa {
  display: flex; flex-direction: column; gap: 8px;
}

/* Vazio tem de sumir de verdade: um bloco de altura zero ainda e um item do
   flex, e ainda ganha os 8px de `gap` do pai. Sem isto sobraria um degrau
   permanente acima da caixa de resposta, esperando um balao que quase nunca
   esta la. */
#chatAntigas:empty, #chatDigitando:empty, #imAntigasCaixa:empty { display: none; }

/* As areas que rolam por dentro da tela de conversas rolam normalmente
   (roda do mouse, teclado, toque), mas sem desenhar a barra. */
.chat-window,
.conv-list,
.chat-pane {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.chat-window::-webkit-scrollbar,
.conv-list::-webkit-scrollbar,
.chat-pane::-webkit-scrollbar { width: 0; height: 0; }

.bubble {
  max-width: min(78%, 560px); padding: 8px 12px; border-radius: var(--radius);
  font-size: 14px; overflow-wrap: anywhere; word-break: break-word;
}
.bubble.them { background: var(--panel-2); align-self: flex-start; border: 1px solid var(--border); }
.bubble.me { background: rgba(18, 140, 75, .15); align-self: flex-end; }
/* midia dentro do balao */
.bubble .midia { margin: 4px 0; }
.bubble .midia img {
  display: block; max-width: 100%; max-height: 300px;
  width: auto; border-radius: var(--radius-sm);
}
.bubble .midia video { max-width: 100%; max-height: 300px; border-radius: var(--radius-sm); }
.bubble .midia audio { width: min(260px, 60vw); }

/* ---------------- aviso do grupo, no meio da conversa ----------------
   "Fulano adicionou Beltrano", "Voce agora e administrador". Nao e balao de
   ninguem: fica no centro, discreto, e so serve para explicar o que aconteceu
   entre uma mensagem e outra. Mesmo lugar e mesmo peso que no WhatsApp. */
.aviso-sistema {
  align-self: center;
  max-width: min(84%, 520px);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}
/* a hora junto, e nao embaixo: a linha e curta e quebrar por causa dela
   gastaria duas alturas para dizer meia frase */
.aviso-sistema time { opacity: .65; margin-left: 6px; white-space: nowrap; }

/* figurinha nao usa fundo de balao */
.bubble.figurinha { background: transparent; border: 0; padding: 2px 0; }

/* Topo do chat: carregar o que veio antes (so administrador) */
.chat-antigas-topo { display: flex; justify-content: center; padding: 4px 0 8px; }
.chat-antigas-topo .btn { font-size: 12px; }
.chat-antigas-topo .btn:disabled { opacity: .6; cursor: default; }
.chat-acesso-perdido { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 8px 12px;
  border-left: 3px solid var(--warn); border-radius: var(--radius-sm); background: rgba(184, 134, 11, .12);
  color: var(--text); font-size: 13px; }
.chat-acesso-perdido span { flex: 1; }
/* "editada" ao lado da hora, como no WhatsApp */
.bubble .when .editada { font-style: italic; opacity: .8; }
#editarMsgTexto { width: 100%; resize: vertical; }

/* Nao chegou ao WhatsApp. Antes esta bolha era igual a uma entregue e sumia
   em 15 minutos: o atendente achava que tinha respondido. */
.bubble.me.falha {
  background: rgba(192, 57, 43, .12);
  border: 1px solid var(--bad);
}
.bubble.falha .txt { opacity: .75; }

.falha-aviso {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(192, 57, 43, .35);
  font-size: 12px; color: var(--bad);
}
.falha-aviso strong { display: block; }

.falha-acoes { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.falha-acoes .btn { font-size: 12px; }

/* Na fila de envio: ainda nao saiu, mas vai. Discreto de proposito - e o
   estado normal de todo envio em lote, nao um problema. */
/* balao provisorio: a mensagem que acabou de ser enviada, antes de o
   servidor confirmar (ver `enviar` no app.js) */
.bubble.otimista { opacity: .75; }

/* Mensagem longa recolhida (ver "Mostrar mais" no app.js): o fim some num
   degrade, para ficar claro que o texto continua. */
.bubble .txt.recolhido {
  max-height: 220px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.mostrar-mais {
  display: block; margin: 4px 0 2px; padding: 0;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--brand);
}
.mostrar-mais:hover { text-decoration: underline; }

/* "Mensagens nao lidas": a linha onde a pessoa tinha parado (ver app.js) */
.divisor-nao-lidas {
  align-self: stretch; text-align: center; margin: 10px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--brand); background: rgba(18, 140, 75, .12);
  border-radius: 999px; padding: 4px 12px;
}

/* link dentro da mensagem (texto_com_links): sublinhado na cor do texto, e
   endereco comprido quebra em vez de alargar o balao */
.bubble .txt a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }

.envio-pendente {
  margin-top: 4px;
  font-size: 12px; color: var(--muted);
}
.bubble.figurinha .midia img { max-height: 150px; }

/* Acoes do balao: responder e apagar. Aparecem ao passar o mouse; no toque,
   onde nao existe passar o mouse, ficam sempre visiveis. */
.bubble { position: relative; }
.bubble-acoes {
  position: absolute; top: 2px; right: 4px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .12s;
}
.bubble:hover .bubble-acoes, .bubble-acoes:focus-within { opacity: 1; }
@media (hover: none) { .bubble-acoes { opacity: .8; } }

.bubble-acoes button {
  width: 22px; height: 22px; padding: 0; line-height: 1;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; font-size: 15px; font-weight: 700;
}
.bubble-acoes button:hover { filter: brightness(1.12); }
.bubble-acoes button:disabled { opacity: .5; cursor: default; }

/* ---------------- partes de um cartao ----------------
   Um cartao = um botao Salvar. Quando ele guarda assuntos diferentes (o
   interruptor, a mensagem, o mapa), cada um vira uma parte separada por um
   fio - em vez de tres cartoes, que faziam parecer que cada um tinha o seu
   Salvar e nenhum tinha. */
.card-parte + .card-parte {
  border-top: 1px solid var(--border);
  margin-top: 18px;
  padding-top: 18px;
}
.card-parte > h3 {
  margin: 0 0 10px;
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
}

/* ---------------- escolher contato num campo de telefone ----------------
   Reaproveita a lista do seletor de participantes (.grupo-candidatos). O que
   muda e o lugar: aqui ela mora dentro de um formulario de cadastro, entao
   comeca fechada - o normal e o campo ja estar preenchido e ninguem precisar
   dela. */
.contato-seletor { margin: -4px 0 4px; }
.contato-seletor summary { font-size: 13px; }
.contato-seletor .grupo-candidatos { max-height: 220px; }
.contato-seletor .contato-busca { width: 100%; }

/* ---------------- a OS atrelada ao grupo ----------------
   Bloco no alto do painel do grupo: quando existe uma OS, ela responde "que
   conversa e esta?" antes dos participantes. */
.grupo-os {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    padding: 10px 12px;
    margin-bottom: 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.grupo-os-rotulo { font-size: 12px; font-weight: 600; }
.grupo-os-titulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.grupo-os-linha { font-size: 13px; }
.grupo-os-linha .muted { display: inline-block; min-width: 68px; font-size: 12px; }

.grupo-os-etapas { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.grupo-os-etapas li { margin: 2px 0; }
/* o prazo a direita do nome, e nao embaixo: a coluna e estreita e uma linha
   por etapa ja e o que cabe */
.grupo-os-etapas .muted { font-size: 12px; margin-left: 6px; }

.grupo-os-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.grupo-os-aviso { margin: 4px 0 0; }

/* a caixa de boas-vindas cresce, porque o que se le nela e um texto inteiro */
#osConfirmarTexto { width: 100%; min-height: 220px; resize: vertical; }

/* Apagar a mensagem DE OUTRA PESSOA so existe em grupo, e so para quem e
   administrador dele. O botao vem no HTML de todo mundo e e o `data-grupo-admin`
   - que a tela descobre depois de carregar - que o revela.

   Esconder pelo CSS, e nao deixando de desenhar: estes baloes sao refeitos de
   cinco em cinco segundos pelo polling, e uma resposta guardada dentro deles
   teria de ser perguntada ao WhatsApp a cada volta. Aqui ela mora no pai, que
   o polling nao toca. Quem apaga de verdade confere de novo, no servidor. */
.chat-window:not([data-grupo-admin="1"]) .apagar-de-outro { display: none; }
.responder-msg { background: var(--brand); }
.responder-msg svg { width: 13px; height: 13px; display: block; }
.apagar-msg { background: var(--bad); }

/* ------------------------------------------------------- retornos --
   A tela do que a IA nao conseguiu passar adiante. */

/* escolher e mandar numa linha so: sao uma acao unica */
.retorno-enviar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.retorno-enviar select { min-width: 150px; }

/* o que a IA respondeu fica recolhido: ajuda a entender o caso, e atrapalha
   na hora de varrer a lista */
.retorno-resposta { margin-top: 6px; }
.retorno-resposta summary { cursor: pointer; font-size: 12px; }
.retorno-resposta[open] { margin-bottom: 4px; }

.table.retornos td { vertical-align: top; }
/* o pedido do cliente e a coluna que se le - as outras sao referencia */
.table.retornos td[data-label="O que pediu"] { min-width: 220px; max-width: 420px; }

/* Aviso dentro de uma explicacao: nao e erro, e uma consequencia que quem
   esta ligando a opcao precisa ler ANTES de ligar. */
.hint.forte {
  border-left: 3px solid var(--warn);
  padding-left: 10px;
  color: var(--text);
}

/* --------------------------------------------------------- reacoes --
   O emoji que alguem colou no balao.

   Fica encostado na borda de baixo, meio para fora, que e onde o WhatsApp o
   desenha: dentro do balao ele se misturaria ao texto, e abaixo dele
   empurraria a conversa inteira. O vao vem da classe `com-reacao` no balao,
   posta pelo PHP - sem ela o selo cairia por cima da bolha seguinte. */
.bubble.com-reacao { margin-bottom: 14px; }

.reacoes {
  position: absolute; bottom: -12px;
  display: flex; gap: 3px; flex-wrap: wrap;
  max-width: 100%;
}
.bubble.them .reacoes { left: 8px; }
.bubble.me   .reacoes { right: 8px; justify-content: flex-end; }

.reacao {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.5;
  /* o balao pode ter fundo colorido; o selo nao pode se perder nele */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  cursor: default;
}
/* a que voce mesmo mandou, marcada como no aplicativo */
.reacao.minha { border-color: var(--brand); }
.reacao-emoji { font-size: 13px; }
.reacao-conta { font-size: 11px; color: var(--muted); font-weight: 700; }

/* figurinha nao tem balao: o selo precisa de um fundo proprio para ser lido */
.bubble.figurinha .reacoes { bottom: -8px; }

.bubble .who { font-size: 11px; font-weight: 700; color: var(--brand); }
.bubble.me .who { text-align: right; }
.bubble .when { font-size: 10.5px; color: var(--muted); text-align: right; margin-top: 2px; }

/* Os checks do mensageiro interno: enviada e lida.
   Moram DENTRO da linha da hora, e nao numa linha propria, porque e um par
   hora+estado - como no WhatsApp, onde o olho procura os dois no mesmo lugar.
   O azul da lida e a unica cor aqui: o cinza de "enviada" tem de ser discreto
   a ponto de so ser notado por contraste, quando a outra vira azul. */
.bubble .when { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.im-ticks { display: inline-flex; flex: none; line-height: 0; }
.im-ticks svg { width: 15px; height: 15px; }
.im-ticks.enviada { color: var(--muted); }
.im-ticks.lida { color: #53bdeb; }
/* So existe no WhatsApp: dois tiques cinza, o aparelho do cliente recebeu */
.im-ticks.entregue { color: var(--muted); }

/* A faixa de "reconectando". Fica por cima de tudo e presa no topo: ela avisa
   que a tela abaixo parou no tempo, e uma faixa que rola junto com o conteudo
   sairia de vista justamente enquanto o problema continua. */
.sessao-caiu {
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; font-size: 13.5px; line-height: 1.35;
  background: rgba(184, 134, 11, .96); color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.sessao-caiu-girando {
  width: 15px; height: 15px; flex: none;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff; border-radius: 50%;
  animation: sessao-caiu-gira .8s linear infinite;
}
@keyframes sessao-caiu-gira { to { transform: rotate(360deg); } }
/* quem pediu menos movimento nao precisa do giro para entender a faixa */
@media (prefers-reduced-motion: reduce) { .sessao-caiu-girando { animation: none; } }

/* -------------------------------------------------------------- login -- */

.login-card { text-align: center; }
.login-title { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 2px; }
.login-card form { margin-top: 18px; text-align: left; }

/* Fica colada no botao, e nao no meio dos campos: e uma escolha sobre o que
   acontece DEPOIS de entrar, nao mais um dado para digitar. */
.login-lembrar { margin-top: 2px; }

/* ==========================================================================
   Telas menores
   ========================================================================== */

/* menu vira sanfona */
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; gap: 10px; }
  .brand { flex: 1; }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 38px; }
  .menu {
    order: 10; flex: 0 0 100%;
    flex-direction: column; gap: 2px; display: none;
    padding-top: 4px; border-top: 1px solid var(--border);
  }
  .menu.open { display: flex; }
  .menu a { padding: 11px 12px; }
  .user > .tag { display: none; }   /* o rotulo admin/usuario, nao os do sino */

  /* a caixa do sino nao cabe encostada na direita numa tela estreita */
  .sino-caixa { right: -8px; }
}

/* tabela vira cartao empilhado (menos as tabelas de detalhe th+td) */
@media (max-width: 640px) {
  .table-wrap { overflow-x: visible; }

  .table:not(.details),
  .table:not(.details) tbody,
  .table:not(.details) tr,
  .table:not(.details) td { display: block; width: 100%; }

  .table:not(.details) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }

  .table:not(.details) tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .table:not(.details) tbody tr:last-child { margin-bottom: 0; }

  .table:not(.details) td {
    border-bottom: 1px dashed var(--border);
    padding: 8px 0;
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  }
  .table:not(.details) tr td:last-child { border-bottom: 0; }

  .table:not(.details) td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); line-height: 1.7;
  }
  .table:not(.details) td[data-label=""]::before { display: none; }
  .table:not(.details) td[data-label=""] { justify-content: flex-start; }

  /* o conteudo da celula fica alinhado a direita do rotulo */
  .table:not(.details) td > * { text-align: right; }
  .table:not(.details) td[data-label=""] > * { text-align: left; }

  /* tabela de detalhe: rotulo em cima, valor embaixo */
  .table.details th { white-space: normal; width: 45%; }
}

/* mesma coisa, mas reagindo a largura do container (cartao estreito) */
@container (max-width: 560px) {
  .table-wrap { overflow-x: visible; }

  .table:not(.details),
  .table:not(.details) tbody,
  .table:not(.details) tr,
  .table:not(.details) td { display: block; width: 100%; }

  .table:not(.details) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }

  .table:not(.details) tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    padding: 6px 12px;
    margin-bottom: 10px;
  }
  .table:not(.details) tbody tr:last-child { margin-bottom: 0; }

  .table:not(.details) td {
    border-bottom: 1px dashed var(--border);
    padding: 8px 0;
    display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  }
  .table:not(.details) tr td:last-child { border-bottom: 0; }

  .table:not(.details) td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); line-height: 1.7;
  }
  .table:not(.details) td[data-label=""]::before { display: none; }
  .table:not(.details) td[data-label=""] { justify-content: flex-start; }

  /* o conteudo da celula fica alinhado a direita do rotulo */
  .table:not(.details) td > * { text-align: right; }
  .table:not(.details) td[data-label=""] > * { text-align: left; }

  /* tabela de detalhe: rotulo em cima, valor embaixo */
  .table.details th { white-space: normal; width: 45%; }
}


@media (max-width: 560px) {
  .row-form > *, .row-form > .btn, .row-form > button { flex: 1 1 100%; }
  .actions .btn { flex: 1 1 auto; }
  .bubble { max-width: 88%; }
  .card.stat .num { font-size: 22px; }
  .user-nome { max-width: 14ch; }

  /* evita o zoom automatico do iOS ao focar um campo */
  input, select, textarea { font-size: 16px; }
}

@media (max-width: 380px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .brand-name { display: none; }

  /* Nesta largura o topo ja esta escolhendo o que cabe, e o tema e a unica
     coisa ali que tem outro caminho: continua em "Meu perfil". O sino e o
     "Sair" nao tem. */
  .tema-botao { display: none; }
}

@media print {
  .topbar, .foot, .actions, form { display: none; }
  .card { box-shadow: none; border-color: #ccc; }
}

/* ------------------------------------------------------- menu do bot -- */

/* a tela do bot: o menu ocupa a coluna larga, os ajustes ficam ao lado */
.bot-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 980px) { .bot-colunas { grid-template-columns: 1fr; } }

/* titulo do card com uma informacao secundaria a direita */
.card-topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.card-topo h2 { margin-bottom: 6px; }
.card-topo .small { font-size: 12.5px; }

/* blocos do formulario de configuracao (funcionamento / mensagens / notas) */
fieldset.bloco {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px 16px; margin: 0;
}
fieldset.bloco legend {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 0 6px;
}

/* menu do bot em arvore: o recuo e a linha-guia mostram o nivel */
.menu-arvore, .lista-simples { list-style: none; margin: 0 0 4px; padding: 0; }
.menu-arvore li, .lista-simples li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 9px 0; border-top: 1px solid var(--border);
}
.menu-arvore li:first-child, .lista-simples li:first-child { border-top: 0; }
.menu-arvore li.inactive { opacity: .55; }

/* cada nivel entra um pouco mais, com um fio marcando de quem e filho */
.menu-arvore li.nivel-1 { padding-left: 20px; border-left: 2px solid var(--border); margin-left: 11px; }
.menu-arvore li.nivel-2 { padding-left: 20px; border-left: 2px solid var(--border); margin-left: 42px; }
.menu-arvore li.nivel-3 { padding-left: 20px; border-left: 2px solid var(--border); margin-left: 73px; }

.menu-arvore .num {
  flex: none;
  min-width: 26px; height: 26px; border-radius: 7px;
  background: var(--panel-2); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px;
}
.menu-arvore .quem, .lista-simples .quem {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;
}
.menu-arvore .rotulo, .lista-simples .rotulo { font-weight: 600; }
.menu-arvore .destino, .lista-simples .destino {
  color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.menu-arvore .alerta-vazio { color: var(--warn); }
.menu-arvore .acoes-item, .lista-simples form {
  margin-left: auto; display: flex; gap: 6px; align-items: center; flex: none;
}
.menu-arvore .acoes-item .btn { white-space: nowrap; }
@media (max-width: 620px) {
  .menu-arvore .acoes-item { margin-left: 0; width: 100%; }
}

.previa-sub { margin-top: 10px; }
.previa-sub summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.previa-sub[open] summary { margin-bottom: 8px; }

/* -------------------------------------------------------- avaliacoes -- */

/* faixa de resumo: a media a esquerda, a distribuicao das notas a direita */
.resumo-notas {
  display: grid;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: center;
}
@media (max-width: 720px) { .resumo-notas { grid-template-columns: 1fr; } }

.nota-grande {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-right: 1px solid var(--border);
}
@media (max-width: 720px) {
  .nota-grande { border-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
}
.nota-grande .valor { font-size: clamp(34px, 6vw, 46px); font-weight: 700; line-height: 1.05; }
.nota-grande .estrelas { font-size: 18px; letter-spacing: 2px; }
.nota-grande .valor.ok, .nota-grande .estrelas.ok { color: var(--ok); }
.nota-grande .valor.warn, .nota-grande .estrelas.warn { color: var(--warn); }
.nota-grande .valor.bad, .nota-grande .estrelas.bad { color: var(--bad); }

/* barras: usadas na distribuicao e no ranking por atendente/setor */
.barra {
  display: block; height: 9px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); overflow: hidden;
}
.barra .preenchida { display: block; height: 100%; border-radius: 999px; background: var(--muted); }
.barra .preenchida.ok { background: var(--ok); }
.barra .preenchida.warn { background: var(--warn); }
.barra .preenchida.bad { background: var(--bad); }

.distribuicao {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  max-width: 720px;   /* barra muito longa afasta demais o numero da ponta */
}
.distribuicao li {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 74px;
  gap: 12px; align-items: center;
}
.distribuicao .nota-rotulo { font-weight: 700; font-size: 13px; white-space: nowrap; }
.distribuicao .estrela { color: var(--muted); font-weight: 400; }
.distribuicao .quantidade { text-align: right; font-weight: 600; font-size: 13px; }

/* ranking por atendente / setor */
.rank-notas { list-style: none; margin: 0; padding: 0; }
.rank-notas li {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 58px;
  gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.rank-notas li:first-child { border-top: 0; }
.rank-notas .quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rank-notas .rotulo { font-weight: 600; overflow-wrap: anywhere; }
.rank-notas .destino { color: var(--muted); }
.rank-notas .tag { justify-self: end; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .rank-notas li { grid-template-columns: minmax(0, 1fr) 58px; }
  .rank-notas .barra { display: none; }
}

/* ------------------------------------------------------------- modal -- */

dialog.modal {
  width: min(620px, calc(100vw - 28px));
  max-height: calc(100dvh - 40px);
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); color: var(--text); box-shadow: var(--shadow);
  overflow: hidden;
}
dialog.modal::backdrop { background: rgba(6, 9, 12, .68); backdrop-filter: blur(2px); }

/* Um pouco translucido, com desfoque atras: da para perceber a conversa por
   baixo sem prejudicar a leitura. O `background` solido acima fica de reserva
   para quem nao suporta color-mix. */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  dialog.modal {
    background: color-mix(in srgb, var(--panel) 86%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
  }
}
dialog.modal > form,
dialog.modal > .modal-conteudo { display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }

.modal-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px var(--pad); border-bottom: 1px solid var(--border);
}
.modal-topo h2 { margin: 0; font-size: 15px; }

.modal-fechar {
  border: 0; background: transparent; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-fechar:hover { color: var(--text); }

.modal-corpo { padding: var(--pad); overflow-y: auto; }

.modal-acoes {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 12px var(--pad); border-top: 1px solid var(--border);
  background: var(--panel-2);
}

/* --------------------------- telas por empresa (painel do sistema) ------- */

/* Uma caixa por tela, em grade que se reacomoda sozinha.
   Era uma tabela de duas colunas: com duas dezenas de linhas virava uma rolagem
   longa onde nada se achava. Em caixas o olho varre por blocos, e a marcada se
   distingue pela borda, sem precisar ler o estado de cada uma. */
.grade-telas {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.tela-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 9px;
  align-items: start;
  margin: 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
  cursor: pointer;
}
.tela-box input { grid-row: span 2; margin: 2px 0 0; }
.tela-box .tela-nome   { font-weight: 600; }
.tela-box .tela-resumo { color: var(--muted); font-size: 12.5px; }

/* A marcada muda de borda, e nao so o quadradinho: a diferenca precisa ser
   vista de longe, varrendo, sem ler caixa por caixa. */
.tela-box:has(input:checked) {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 7%, var(--panel));
}
.tela-box:hover { border-color: var(--muted); }

/* A que nao se desliga nao finge ser clicavel. */
.tela-box.travada { cursor: default; opacity: .85; }
.tela-box.travada:hover { border-color: var(--border); }

/* sem <dialog> nativo: o navegador mostra o conteudo como um cartao normal */
dialog.modal:not([open]) { display: none; }

/* previa da mensagem do bot, como bolha do WhatsApp */
.previa-whats {
  background: rgba(18, 140, 75, .15);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* prazo de encerramento dentro do menu de acoes */
.menu-prazo { display: flex; flex-direction: column; gap: 5px; padding: 4px 2px; }
.menu-prazo label { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.menu-prazo select { font-size: 13px; padding: 7px 9px; }
.menu-lista hr { margin: 6px 0; }

/* mensagem citada (o "responder" do WhatsApp) */
.citacao {
  display: block; margin: 0 0 5px;
  padding: 5px 9px; border-left: 3px solid var(--brand);
  border-radius: 6px; background: rgba(0, 0, 0, .18);
  font-size: 12.5px; line-height: 1.35;
  overflow-wrap: anywhere;
}
.citacao-autor { display: block; font-weight: 700; color: var(--brand); }
.citacao-texto { color: var(--muted); }

/* imagem/figurinha: mostra que esta carregando ate a midia chegar */
.midia-quadro {
  position: relative; display: inline-block;
  min-width: 120px; min-height: 90px;
  border-radius: var(--radius-sm);
  background: rgba(127, 127, 127, .12);
}
.midia-quadro::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: girando .8s linear infinite;
}
.midia-quadro img { opacity: 0; transition: opacity .15s; }
.midia-quadro.pronta { min-width: 0; min-height: 0; background: none; }
.midia-quadro.pronta::after { display: none; }
.midia-quadro.pronta img { opacity: 1; }
.midia-quadro.falhou { cursor: pointer; }
.midia-quadro.falhou::after {
  content: 'm\00EDdia indispon\00EDvel \2014  clique para tentar de novo'; border: 0; animation: none;
  width: auto; height: auto; display: grid; place-content: center; text-align: center;
  font-size: 11px; color: var(--muted); padding: 6px;
}
/* video e audio: o proprio controle fica, e o aviso aparece embaixo */
.bubble .midia.baixando::after,
.bubble .midia.falhou::after {
  display: block; font-size: 11px; color: var(--muted); margin-top: 2px;
}
.bubble .midia.baixando::after { content: 'baixando a m\00EDdia\2026'; }
.bubble .midia.falhou { cursor: pointer; }
.bubble .midia.falhou::after { content: 'm\00EDdia indispon\00EDvel \2014  clique para tentar de novo'; }
@keyframes girando { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .midia-quadro::after { animation: none; } }

/* ------------------------------------------ visor da foto e encaminhar -- */

/* A foto abria numa aba nova, fora do painel. Aqui ela ocupa a tela toda por
   cima da conversa: o proprio <dialog> vira o palco. */
dialog.modal.visor {
  width: min(1100px, calc(100vw - 24px));
  height: min(900px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
}
dialog.modal.visor > .modal-conteudo {
  height: 100%; max-height: none;
}

.visor-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px var(--pad); border-bottom: 1px solid var(--border);
}
.visor-quem { min-width: 0; }
.visor-quem strong { display: block; font-size: 14px; }
.visor-quem small { font-size: 11.5px; }

.visor-ferramentas { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* o nivel de zoom e tambem o botao de voltar ao tamanho original */
#visorNivel { min-width: 58px; font-variant-numeric: tabular-nums; }

.visor-palco {
  flex: 1; min-height: 0; overflow: hidden;
  /* referencia para a imagem: e contra esta caixa que os 100% abaixo contam */
  position: relative;
  background: rgba(6, 9, 12, .55);
}
/* Imagem inteira na tela, seja ela deitada ou em pe (print de celular).
   `inset: 0` com `margin: auto` centraliza nos dois eixos e, principalmente,
   da uma altura definida para o `max-height: 100%` resolver - centralizando
   por grid a linha era automatica, a porcentagem nao tinha contra o que
   contar e a foto ficava no tamanho natural, cortada pelo palco. */
.visor-palco img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
}
.visor-palco.ampliado img { cursor: grab; }
.visor-palco.ampliado img:active { cursor: grabbing; }

/* ---- editor de foto do mensageiro (riscar e mandar de volta) ---- */
.im-editor-ferramentas { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.im-editor-grupo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* um fio entre os grupos: ferramenta | tamanho | cor | desfazer */
.im-editor-grupo + .im-editor-grupo { padding-left: 12px; border-left: 1px solid var(--border); }
/* tamanho: bolinhas do diametro do traco */
.im-editor-tamanho {
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
}
.im-editor-tamanho::before {
  content: ''; width: var(--bolinha); height: var(--bolinha);
  border-radius: 50%; background: var(--text);
}
.im-editor-tamanho:hover { background: var(--panel-2); }
.im-editor-tamanho.ativa { border-color: var(--brand); background: rgba(18, 140, 75, .14); }
.im-editor-tamanho.ativa::before { background: var(--brand); }
.im-editor-tamanho:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 640px) {
  .im-editor-grupo + .im-editor-grupo { padding-left: 0; border-left: 0; }
}
/* o tipo da caneta, colado no botao dela */
.im-editor-tipo-caneta {
  width: auto; height: 30px; padding: 0 6px; margin-left: -2px;
  font-size: 12.5px; border-radius: var(--radius-sm);
}
.im-editor-grupo .btn.ativa { border-color: var(--brand); color: var(--brand); background: rgba(18, 140, 75, .14); }
.im-editor-cor {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--cor); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--border);
}
.im-editor-cor.ativa { box-shadow: 0 0 0 2px var(--text); }
.im-editor-cor:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* o canvas tem a resolucao da foto; aqui ele so encolhe para caber, centrado,
   e o toque desenha em vez de rolar a tela */
.im-editor-palco canvas {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%;
  cursor: crosshair; touch-action: none;
}
.im-editor-rodape {
  display: flex; gap: 8px; align-items: center;
  padding: 10px var(--pad); border-top: 1px solid var(--border);
}
.im-editor-rodape input { flex: 1; min-width: 0; }
/* sem a legenda (modo anexo), o Concluir continua no canto direito */
.im-editor-rodape .btn { margin-left: auto; }

/* seletor de emoji do editor: faixa entre as ferramentas e a foto */
.im-editor-emojis {
  flex: none; border-bottom: 1px solid var(--border); background: var(--panel);
  padding: 6px var(--pad);
}
.im-editor-emojis-abas { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 4px; }
.im-editor-emojis-abas button {
  border: 0; background: none; font-size: 18px; line-height: 1; padding: 5px 7px;
  border-radius: var(--radius-sm); cursor: pointer; opacity: .6;
}
.im-editor-emojis-abas button.ativa { opacity: 1; background: var(--panel-2); }
.im-editor-emojis-grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  max-height: 150px; overflow-y: auto;
}
.im-editor-emoji {
  border: 0; background: none; font-size: 22px; line-height: 1; padding: 5px 0;
  border-radius: var(--radius-sm); cursor: pointer;
}
.im-editor-emoji:hover { background: var(--panel-2); }

/* A caixa onde se escreve EM CIMA da foto: mesma fonte, tamanho e cor que o
   texto vai ter depois de confirmado, com o contorno imitado por sombra. */
.im-editor-caixa-texto {
  position: absolute; z-index: 3; min-width: 1ch; max-width: 90%;
  padding: 2px 4px; margin: -2px -4px;
  font-weight: 700; font-family: system-ui, sans-serif; line-height: 1.2;
  white-space: pre-wrap; word-break: break-word; outline: none;
  border: 1px dashed rgba(255, 255, 255, .7); border-radius: 4px;
  background: rgba(0, 0, 0, .15); caret-color: currentColor;
  /* sem contorno nas letras, como o texto sai na foto (ver desenharTraco) */
}
/* sem ferramenta na mao: o clique so pega e arrasta o que ja esta na foto */
.im-editor-palco canvas[data-ferramenta=""] { cursor: default; }
/* borracha: um circulo vazado no lugar da mira */
.im-editor-palco canvas[data-ferramenta="borracha"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='rgba(255,255,255,.35)' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, cell;
}
/* miniatura da tira de anexos: clicar abre o editor */
.im-anexo img.im-anexo-editavel { cursor: pointer; }

/* Escolher o microfone: segurar o botao de gravar abre esta lista, acima dele */
.reply-botoes { position: relative; }
.im-mic-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30;
  min-width: 240px; max-width: min(340px, calc(100vw - 32px));
  padding: 6px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column;
}
.im-mic-titulo {
  padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.im-mic-opcao {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-mic-opcao:hover { background: var(--panel-2); }
.im-mic-opcao::before { content: ''; width: 16px; flex: none; }
.im-mic-opcao.ativa { color: var(--brand); font-weight: 700; }
.im-mic-opcao.ativa::before { content: '\2713'; }

.visor-dica {
  margin: 0; padding: 8px var(--pad);
  border-top: 1px solid var(--border); background: var(--panel-2);
  font-size: 11.5px; text-align: center;
}
@media (hover: none) { .visor-dica { display: none; } }

/* lista de destinos do encaminhamento */
.encaminhar-lista {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 40dvh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 4px; background: var(--bg);
}
.encaminhar-item {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); cursor: pointer;
  font: inherit; font-size: 13px;
}
.encaminhar-item:hover { background: var(--panel-2); }
.encaminhar-item.escolhido {
  background: rgba(18, 140, 75, .16);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.encaminhar-nome { display: block; font-weight: 600; }
.encaminhar-item small { font-size: 11.5px; }

/* ------------------------------------------------ responder citando -- */

/* Barra acima da caixa de texto: o que esta sendo respondido fica a vista
   enquanto o atendente escreve, como no WhatsApp. */
.reply-citando {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px; border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm); background: var(--panel-2);
  font-size: 12.5px;
}
.reply-citando-texto { flex: 1; min-width: 0; }
.reply-citando-texto strong { display: block; color: var(--brand); font-size: 11.5px; }
/* "Respondendo a" e rotulo, nao nome: fica discreto para o nome se destacar */
.reply-citando-rotulo { font-weight: 400; color: var(--muted); }
.reply-citando-texto > span {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tirar a citacao. Redondo e com fundo proprio: e uma acao, nao o "fechar"
   de uma caixa - o balao citado sai do envio, a mensagem escrita fica. */
.reply-citando-tirar {
  flex: none; width: 24px; height: 24px; padding: 0; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--panel); color: var(--muted);
  font-size: 16px; cursor: pointer;
}
.reply-citando-tirar:hover { color: var(--bad); border-color: var(--bad); }

/* ---------------------------------------------------------- etiquetas -- */

/* A cor vem do catalogo como nome ("verde"), nunca como valor solto: a paleta
   fechada em Label::CORES e o que impede um nome de etiqueta de escrever
   dentro do style da pagina. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11.5px; font-weight: 600; line-height: 1.7;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
/* como cracha clicavel no cabecalho da conversa */
button.etiqueta { cursor: pointer; font-family: inherit; }
button.etiqueta:hover { filter: brightness(1.08); }

.etiqueta.mini { padding: 1px 7px; font-size: 10.5px; line-height: 1.6; }

.etiqueta.cor-verde    { background: rgba(18, 140, 75, .16);  border-color: rgba(18, 140, 75, .45);  color: var(--brand); }
.etiqueta.cor-azul     { background: rgba(38, 116, 191, .16); border-color: rgba(38, 116, 191, .45); color: #2f7fd0; }
.etiqueta.cor-roxo     { background: rgba(126, 87, 194, .16); border-color: rgba(126, 87, 194, .45); color: #8b63d6; }
.etiqueta.cor-laranja  { background: rgba(214, 122, 32, .16); border-color: rgba(214, 122, 32, .45); color: #d67a20; }
.etiqueta.cor-vermelho { background: rgba(192, 57, 43, .16);  border-color: rgba(192, 57, 43, .45);  color: var(--bad); }
.etiqueta.cor-amarelo  { background: rgba(184, 134, 11, .18); border-color: rgba(184, 134, 11, .45); color: var(--warn); }
.etiqueta.cor-cinza    { background: rgba(127, 127, 127, .16); border-color: var(--border); color: var(--muted); }

/* faixa de etiquetas dentro do item da lista de conversas */
.conv-etiquetas {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}

/* escolher as etiquetas da conversa, no painel lateral */
.etiqueta-escolha {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 46dvh; overflow-y: auto;
  padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.etiqueta-escolha .check {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-sm); cursor: pointer;
}
.etiqueta-escolha .check:hover { background: var(--panel-2); }
.etiqueta-escolha input:disabled + .etiqueta { opacity: .5; }

/* ------------------------------------------------------------- grupos -- */

.grupo-cabeca { display: flex; flex-direction: column; gap: 2px; }
.grupo-cabeca strong { font-size: 14px; }
.grupo-cabeca small { font-size: 11.5px; }
.grupo-descricao { margin: 6px 0 0; white-space: pre-line; }

/* Nao e administrador do grupo: o aviso explica por que as acoes nao estao
   ali, em vez de deixar a pessoa procurando um botao que nao existe. */
.grupo-aviso {
  margin: 0; padding: 8px 10px;
  border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  background: rgba(184, 134, 11, .12);
}

.grupo-lista { list-style: none; margin: 0; padding: 0; }
.grupo-lista li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--border);
}
.grupo-lista li:first-child { border-top: 0; }

.grupo-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.grupo-quem .rotulo { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.grupo-quem small { font-size: 11.5px; }

.grupo-acoes { display: flex; gap: 6px; flex: none; }
/* dentro do painel os botoes ocupam a largura toda por padrao; aqui nao */
.chat-side-corpo .grupo-acoes .btn { width: auto; }

/* seletor "uma pessoa / grupo novo" dentro do modal */
.nova-modos { margin: 0 var(--pad); padding-top: 12px; }

/* a lista de setores que a IA recebe, na tela de configuracao da IA */
.ia-setores { margin: 6px 0 12px; padding-left: 18px; line-height: 1.7; font-size: 13px; }
.ia-setores li { margin-bottom: 2px; }
.ia-setores .muted { font-size: 12px; }

/* ------------------------------------------------------------------ *
 * Tela de Erros
 * ------------------------------------------------------------------ */

.erro-resumo { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.erro-cartao {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 130px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--panel); color: inherit; text-decoration: none;
}
.erro-cartao:hover { border-color: var(--brand); }
.erro-cartao.ativo { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.erro-cartao .erro-num { font-size: 22px; font-weight: 700; line-height: 1.1; }

.erro-filtros {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}

/* o detalhe fica fora do caminho ate alguem ir investigar */
.erro-detalhe { margin-top: 4px; }
.erro-detalhe summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.erro-detalhe summary:hover { color: var(--text); }
.erro-detalhe pre {
    margin: 6px 0 0; padding: 8px 10px; max-height: 220px; overflow: auto;
    background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
    font-size: 12px; white-space: pre-wrap; word-break: break-word;
}

/* lista de bloqueados, na tela da conexao */
.bloqueados-lista { list-style: none; margin: 4px 0 8px; padding: 0; }
.bloqueados-lista li {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.bloqueados-lista li:last-child { border-bottom: 0; }
.bloqueado-quem { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* escolher quem adicionar a um grupo, pela agenda */
.grupo-candidatos {
    display: flex; flex-direction: column; gap: 2px;
    max-height: 200px; overflow-y: auto;
    border: 1px solid var(--border); border-radius: 8px; padding: 4px;
}
.grupo-candidato {
    display: flex; flex-direction: column; gap: 1px;
    text-align: left; padding: 6px 8px; border-radius: 6px;
    background: none; border: 0; color: inherit; cursor: pointer; font: inherit;
}
.grupo-candidato:hover { background: var(--bg); }
.grupo-candidato.escolhido { background: rgba(37, 211, 102, .16); }
.grupo-candidato.escolhido .grupo-candidato-nome::after { content: ' ✓'; color: var(--brand); }
.grupo-candidato-nome { font-weight: 600; font-size: 13px; }

/* a mesma foto, maior, no cabecalho da conversa aberta */
.chat-head-foto {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; background: var(--panel-2); flex: none;
}

/* ------------------------------------------------------------------ *
 * Log da API - o terminal do processo Node, dentro do painel
 * ------------------------------------------------------------------ */

.apilog-busca { flex: 1 1 260px; display: flex; gap: 6px; }
.apilog-busca input[type="search"] { flex: 1; min-width: 0; }

/* os niveis sao interruptores, e sao muitos: deixa quebrar linha */
.apilog-niveis { flex-wrap: wrap; margin-top: 10px; }
.apilog-niveis .conv-ordem-btn { display: inline-flex; align-items: baseline; gap: 5px; }

.apilog-rodape { margin: 10px 0 0; font-size: 12px; }
.apilog-rodape code { word-break: break-all; }

.apilog-lista { list-style: none; margin: 0; padding: 0; }

/* Uma linha por linha do terminal, sem quebrar o alinhamento: o `code` rola
   sozinho quando a linha e comprida (pilha de chamada do puppeteer), em vez de
   embrulhar e desmanchar a leitura. */
.apilog-linha {
    display: flex; align-items: baseline; gap: 8px;
    padding: 5px 0; border-bottom: 1px solid var(--border);
}
.apilog-linha:last-child { border-bottom: 0; }
.apilog-linha code {
    flex: 1; min-width: 0; font-size: 12px; line-height: 1.45;
    white-space: pre-wrap; word-break: break-word;
}

/* a etiqueta do nivel tem largura fixa para as linhas ficarem alinhadas */
.apilog-nivel { flex: none; min-width: 78px; text-align: center; }

/* erro salta aos olhos; o resto fica discreto para nao competir com ele */
.apilog-linha.nivel-error code { color: var(--bad); }
.apilog-linha.nivel-warn code { color: var(--warn); }
.apilog-linha.nivel-debug code,
.apilog-linha.nivel-verbose code,
.apilog-linha.nivel-http code { color: var(--muted); }

@media (max-width: 640px) {
    .apilog-linha { flex-direction: column; gap: 3px; }
    .apilog-nivel { min-width: 0; }
}

/* A rolagem da lista de log.
 *
 * Duas coisas que o `.table-wrap` NAO servia para isto:
 *
 *   1. com o corpo em `tela-tabela`, o body e o `.card.tabela-cheia` sao
 *      `overflow: hidden`, e so um filho com `flex: 1; min-height: 0` rola.
 *      A lista solta dentro do card era cortada, sem barra nenhuma;
 *   2. o `.table-wrap` ESCONDE a barra de proposito. Numa tabela larga isso e
 *      desenho; num log e o contrario - a barra e o que diz que ha mais
 *      coisa acima e abaixo do que caberia na tela.
 */
.apilog-rolagem { overflow-y: auto; }
/* no painel do sistema nao ha `tela-tabela` (a pagina e uma pilha de cards):
   a lista rola por dentro, com altura de tela, e o resto da pagina fica parado */
.sistema-apilog .apilog-rolagem { max-height: 70vh; }

@media (min-height: 600px) {
    body.tela-tabela .card.tabela-cheia .apilog-rolagem {
        flex: 1; min-height: 0;
    }
}

/* Em tela baixa a media query acima nao vale e o CORPO rola inteiro. Nao se
   poe altura maxima aqui de proposito: seria uma barra dentro de uma pagina
   que ja rola, e duas barras concorrendo e pior do que uma lista comprida. */

/* barra visivel, e sem depender do tema do sistema */
.apilog-rolagem {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.apilog-rolagem::-webkit-scrollbar { width: 10px; }
.apilog-rolagem::-webkit-scrollbar-track { background: transparent; }
.apilog-rolagem::-webkit-scrollbar-thumb {
    background: var(--border); border-radius: 5px;
    border: 2px solid var(--panel);
}
.apilog-rolagem::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Atalhos de nivel. Ficam depois dos interruptores, e cada um so aparece
   quando faz diferenca - "Voltar ao padrao" no padrao, ou "Mostrar tudo" com
   tudo aceso, seriam botoes que nao fazem nada. */
.apilog-atalhos {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 10px 0 0;
}
.apilog-atalhos:empty { display: none; }

/* --------------------------------- manual -------------------------------- */
/* Topicos a esquerda, texto a direita - a mesma casca da tela de Conversas e
   da de Configuracoes. Quem rola sao as colunas, nao a pagina: uma lista de
   topicos que sobe junto com o texto nao serve para navegar. */

body.tela-manual { height: 100vh; height: 100dvh; overflow: hidden; }
body.tela-manual .foot { display: none; }
body.tela-manual .wrap {
  max-width: none;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}

.manual-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: var(--gap);
  align-items: stretch;
}

.manual-side {
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
.manual-side-head {
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.manual-side-head h1 { font-size: 19px; margin: 0 0 10px; }

/* A busca. A lupa fica DENTRO do campo, e nao ao lado: ao lado, ela roubaria
   largura de uma coluna que ja e estreita. */
.manual-busca { position: relative; display: flex; align-items: center; }
.manual-busca svg {
  position: absolute; left: 9px; width: 16px; height: 16px;
  color: var(--muted); pointer-events: none;
}
.manual-busca input {
  width: 100%;
  padding: 8px 30px 8px 31px;
  font-size: 13.5px;
}
/* O `x` nativo do `type=search` e so do Chrome, e nao aparece no Firefox: o
   botao abaixo existe para o comportamento ser o mesmo nos dois. */
.manual-busca input::-webkit-search-cancel-button { display: none; }
.manual-busca button {
  position: absolute; right: 4px;
  width: 24px; height: 24px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 19px; line-height: 1;
}
.manual-busca button:hover { color: var(--text); }

.manual-contagem { margin: 8px 0 0; font-size: 12px; }

.manual-topicos {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
}

.manual-topico {
  padding: 10px var(--pad);
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  color: var(--text); font-size: 14px;
}
.manual-topico:hover { background: var(--bg); text-decoration: none; }
.manual-topico.ativo { background: var(--bg); border-left-color: var(--brand); color: var(--brand); font-weight: 600; }
.manual-topico[hidden] { display: none; }

/* Subtopico: recuado, menor e sem peso. E uma pergunta do FAQ ou um pedaco de
   um assunto - precisa ficar claro que pertence ao item de cima. */
.manual-topico.nivel-3 {
  padding: 7px var(--pad) 7px calc(var(--pad) + 14px);
  font-size: 13px; color: var(--muted);
}
.manual-topico.nivel-3:hover { color: var(--text); }
.manual-topico.nivel-3.ativo { color: var(--brand); }

.manual-nada { padding: 14px var(--pad); margin: 0; font-size: 13px; }

/* Coluna da direita: so rola. */
.manual-pane {
  margin: 0;
  min-height: 0; overflow-y: auto;
  padding-right: 2px;
  display: flex; flex-direction: column;
}

.manual-side, .manual-topicos, .manual-pane {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* Edge legado */
}
.manual-side::-webkit-scrollbar,
.manual-topicos::-webkit-scrollbar,
.manual-pane::-webkit-scrollbar { width: 0; height: 0; }

/* O texto ocupa a largura do painel: quem manda no comprimento da linha e a
   coluna, nao uma medida propria daqui. */
.manual > :first-child { margin-top: 0; }
.manual > :last-child { margin-bottom: 0; }

.manual h1 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 6px; }
.manual h2 {
  font-size: clamp(17px, 2.2vw, 20px);
  margin: 0 0 10px;
  color: var(--text); text-transform: none; letter-spacing: 0;
}
.manual h3 { font-size: 15.5px; margin: 22px 0 8px; }
.manual h1 + p, .manual h2 + p, .manual h3 + p { margin-top: 0; }

/* Uma secao por assunto: e o envelope que a busca esconde ou mostra. A linha
   de cima separa os assuntos sem precisar de `<hr>` no texto. */
.manual-sec { padding-top: 22px; }
.manual-sec + .manual-sec { border-top: 1px solid var(--border); margin-top: 22px; }
.manual-sec[hidden] { display: none; }
/* `scroll-margin` para o titulo nao encostar no topo quando se pula para ele */
.manual-sec, .manual h3 { scroll-margin-top: 12px; }

.manual p, .manual ul, .manual ol { margin: 0 0 14px; }
.manual li { margin-bottom: 6px; }
.manual li > ul, .manual li > ol { margin: 6px 0 0; }

/* Sem `nowrap` no cabecalho: a tabela do manual tem titulo de duas palavras e
   tres colunas, e o padrao do painel a empurraria para a rolagem lateral. */
.manual .table th { white-space: normal; }
.manual .table-wrap { margin: 0 0 16px; }

/* Citacao: o aviso do manual ("nunca apague isto", "so aparece quando..."). */
.manual blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--brand);
  color: var(--muted);
}
.manual blockquote > :last-child { margin-bottom: 0; }

/* Print de tela. A borda existe porque o fundo da imagem e quase o fundo do
   cartao - sem ela, a tela capturada se dissolve na pagina. */
/* No maximo 720px: do tamanho da coluna inteira a figura empurrava o texto
   para longe e pesava mais do que ajudava. O "Abrir a tela maior" mostra
   em tamanho real. */
.manual-figura { margin: 0 0 8px; max-width: 720px; }
.manual-figura img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* A tela de verdade (HTML + o app.css), no lugar da foto dela. O quadro tem a
   proporcao em que a tela foi desenhada; o iframe fica no tamanho original e
   o JS o encolhe (`--escala`) para caber na coluna. Sem o JS, a escala de
   0,5 ainda deixa a tela inteira visivel numa coluna comum. */
.manual-tela-caixa {
  position: relative; overflow: hidden; width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
  box-shadow: var(--shadow);
}
.manual-tela-caixa iframe {
  position: absolute; top: 0; left: 0; border: 0;
  transform-origin: 0 0; transform: scale(var(--escala, .5));
  pointer-events: none;
}
.manual-tela-abrir { display: inline-block; margin-top: 4px; font-size: 12.5px; }

.manual hr { border: 0; border-top: 1px solid var(--border); margin: 26px 0; }
.manual code { word-break: normal; }
.manual a { overflow-wrap: anywhere; }

/* O termo buscado, marcado no texto. A cor da marca sai da paleta da marca em
   vez do amarelo do navegador, que no tema escuro fica ilegivel. */
.manual mark {
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  color: inherit; border-radius: 3px; padding: 0 1px;
}

/* Tela estreita: as duas colunas nao cabem. A lista vira um bloco em cima,
   com altura limitada, e o texto fica embaixo - a pagina volta a rolar
   inteira, que e o comportamento esperado no celular. */
@media (max-width: 820px) {
  body.tela-manual { height: auto; overflow: visible; }
  body.tela-manual .foot { display: block; }
  body.tela-manual .wrap { overflow: visible; }
  .manual-layout { display: block; }
  .manual-side { margin-bottom: var(--gap); max-height: 45vh; }
  .manual-pane { overflow: visible; }
  .manual { max-width: none; }
}

/* ======================================================= exportar == */

/* Os quatro passos em cartoes, um embaixo do outro. Passo numerado, e nao
   tudo num formulario so, porque as escolhas dependem umas das outras: a
   fonte decide quais filtros existem, e o modo decide se o agrupamento faz
   sentido. Numerado, ninguem preenche o passo 3 antes do 1 e se pergunta por
   que a lista mudou sozinha. */
.export-form { margin-bottom: var(--gap); }
.export-passo { margin-bottom: var(--gap); }

.export-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-right: 7px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* auto-fit de novo: de um cartao por linha no celular ate tres no monitor */
.export-fontes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}
.export-fonte {
  display: flex; flex-direction: column; gap: 3px;
  padding: 11px 13px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.export-fonte:hover { border-color: var(--brand); }
.export-fonte strong { font-size: 14px; }
.export-fonte .muted { font-size: 12px; font-weight: 400; line-height: 1.4; }
/* a bolinha nao aparece: o cartao inteiro ja e o alvo, e a marcacao esta na
   borda. Ela continua no HTML - e por ela que o teclado navega. */
.export-fonte input { position: absolute; opacity: 0; width: 0; height: 0; }
.export-fonte.ativa,
.export-fonte:has(input:checked) {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}
.export-fonte:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Chip que e uma opcao marcavel, nao um link. Mesma aparencia do chip de
   filtro das Avaliacoes, com a bolinha escondida por tras. */
.chip-radio { display: inline-flex; align-items: center; position: relative; }
.chip-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-radio:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }

.export-periodos { margin-bottom: 10px; }
.export-datas, .export-resumo { margin-top: 10px; }

/* A barra de baixar: a contagem de um lado, o que fazer com ela do outro. */
.export-levar {
  display: flex; flex-wrap: wrap; gap: var(--gap);
  align-items: center; justify-content: space-between;
}
.export-contagem { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.export-contagem .num {
  font-size: clamp(20px, 3vw, 26px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.export-botoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.export-botoes .inline-label { flex: 0 0 auto; }
.export-botoes select { min-width: 190px; }

/* Numero alinhado a direita e com digito de largura fixa: e o que permite
   comparar duas linhas de cima para baixo sem ler cada uma. */
.export-tabela td.num, .export-tabela th { white-space: nowrap; }
.export-tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* No celular a tabela vira cartao empilhado (como as outras do painel), e ai
   o alinhamento a direita separaria o numero do rotulo dele. */
@media (max-width: 720px) {
  .export-tabela td.num { text-align: left; }
  .export-levar { flex-direction: column; align-items: stretch; }
  .export-botoes .btn { flex: 1 1 auto; }
}

/* ==================================================================== *
 * Mensageiro interno
 *
 * Quase nada aqui: a tela reaproveita as classes da tela de Conversas
 * (`.chat-layout`, `.conv-item`, `.bubble`, `.reply-box`) de proposito - e a
 * mesma leitura, e duas folhas dizendo a mesma coisa seriam dois lugares para
 * consertar quando uma mudasse. O que segue e so o que nao existia.
 * ==================================================================== */

/* Recado esperando, na propria aba do menu. Fica ao lado do nome em vez de
   sobre ele: o menu quebra em varias linhas no celular, e um numero flutuando
   por cima cairia sobre a aba seguinte. */
.menu-bolinha {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  vertical-align: middle;
}
.menu-bolinha[hidden] { display: none; }
.menu a.active .menu-bolinha { background: #fff; color: var(--brand); }

/* Grupo nao tem foto: o desenho entra no mesmo lugar e no mesmo tamanho da
   foto de quem tem, para a lista nao ficar com linhas de alturas diferentes. */
.im-foto-grupo {
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border);
}
.im-foto-grupo svg { width: 22px; height: 22px; }

.im-hint { margin: 0; font-size: 12px; }

/* Mensagem apagada: continua na conversa, mas nao disputa a atencao. */
.bubble.im-apagada { opacity: .7; }
.bubble.im-apagada .txt { font-style: italic; }

/* Arquivo que nao e foto, video nem audio: uma linha com clipe, nome e peso. */
.im-arquivo {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
}
.im-arquivo svg { width: 16px; height: 16px; flex: none; }
.im-arquivo span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- gravando um audio ----
   Ocupa a linha inteira embaixo da caixa de texto, e nao um canto: enquanto
   isto esta aceso o microfone esta ligado, e isso precisa ser impossivel de
   nao notar. */
.im-gravando {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: rgba(192, 57, 43, .10);
  border: 1px solid var(--bad); color: var(--bad);
  font-size: 13px;
}
.im-gravando[hidden] { display: none; }
.im-gravando .btn { margin-left: auto; }
.im-gravando .btn + .btn { margin-left: 0; }

.im-ponto {
  width: 10px; height: 10px; border-radius: 50%; background: var(--bad);
  animation: im-pulso 1.2s ease-in-out infinite;
}
@keyframes im-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}
/* Quem pediu menos movimento na tela nao precisa de um ponto piscando para
   entender que esta gravando - o texto ao lado ja diz. */
@media (prefers-reduced-motion: reduce) {
  .im-ponto { animation: none; }
}

/* ---- participantes do grupo (terceira coluna) ---- */
.im-titulo {
  margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.im-membros { display: flex; flex-direction: column; gap: 10px; }
.im-membro {
  display: grid; grid-template-columns: 32px 1fr; gap: 4px 10px;
  align-items: center;
}
.im-membro-foto {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; background: var(--panel-2); grid-row: 1 / span 2;
}
.im-membro-nome { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.im-membro-nome strong { font-size: 13px; }
.im-membro-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.im-membro-acoes form { display: inline; }
.im-membro-acoes .btn { width: auto; }

/* Escolher gente na caixa de conversa nova: a foto ajuda mais que o nome
   sozinho quando ha dois "Ana" na empresa. */
/*
 * Uma linha por pessoa ou conversa: foto | nome e detalhe | marcacao.
 * Usado na "Nova conversa" (.im-pessoa, um <label> com checkbox) e no
 * "Encaminhar" (.lista-pessoa, um <button>).
 *
 * O seletor leva `.encaminhar-lista` na frente de proposito: a lista mora num
 * `.stack`, e `.stack label` (coluna, centralizado, cinza) vencia uma regra de
 * classe so - cada pessoa virava uma pilha de caixa, foto e nome, um embaixo
 * do outro.
 */
.encaminhar-lista .im-pessoa,
.encaminhar-lista .lista-pessoa {
  display: grid; grid-template-columns: 38px 1fr auto; grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: var(--text); font-weight: 400; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background-color .12s;
}
.encaminhar-lista .im-pessoa[hidden],
.encaminhar-lista .lista-pessoa[hidden] { display: none; }
.encaminhar-lista .im-pessoa:hover,
.encaminhar-lista .lista-pessoa:hover { background: var(--panel-2); }
.encaminhar-lista .im-pessoa .im-membro-foto,
.encaminhar-lista .lista-pessoa .lista-pessoa-foto {
  grid-column: 1; grid-row: 1 / span 2;
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--panel-2);
}
.lista-pessoa-inicial {
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; background: var(--brand) !important;
}
.encaminhar-lista .im-pessoa .encaminhar-nome,
.encaminhar-lista .lista-pessoa .encaminhar-nome {
  grid-column: 2; grid-row: 1; align-self: end;
  font-weight: 600; font-size: 14px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.encaminhar-lista .im-pessoa small,
.encaminhar-lista .lista-pessoa small { grid-column: 2; grid-row: 2; align-self: start; font-weight: 400; }
.encaminhar-lista .im-pessoa input[type="checkbox"] {
  grid-column: 3; grid-row: 1 / span 2;
  width: 20px; height: 20px; margin: 0; accent-color: var(--brand); cursor: pointer;
}
/* escolhida: a linha inteira acende, como no WhatsApp */
.encaminhar-lista .im-pessoa:has(input:checked),
.encaminhar-lista .lista-pessoa.escolhido {
  background: rgba(18, 140, 75, .16);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.encaminhar-lista .lista-pessoa.escolhido::after {
  content: '✓'; grid-column: 3; grid-row: 1 / span 2;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
}

/* "Encaminhada" no alto do balao do mensageiro */
.encaminhada-marca {
  display: flex; align-items: center; gap: 4px; margin-bottom: 2px;
  font-size: 11.5px; font-style: italic; color: var(--muted);
}
.encaminhada-marca svg { width: 13px; height: 13px; }

/* ==================================================================== *
 * Conexoes: os canais, em cartoes
 *
 * A tela era uma lista de numeros de WhatsApp. Virou a lista dos CANAIS, e o
 * WhatsApp e um deles - por isso os cartoes aqui em cima, antes da tabela: e
 * onde o proximo canal entra sem empurrar nada.
 * ==================================================================== */
.canais {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 12px;
}
.canal {
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--panel-2);
}
.canal-topo { display: flex; align-items: center; gap: 10px; }
.canal-topo strong { display: block; font-size: 14px; }
.canal-topo small { display: block; font-size: 12px; }
.canal-icone {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%; color: #fff;
}
.canal-icone svg { width: 22px; height: 22px; }
.canal-icone.whats  { background: var(--brand); }
.canal-icone.interno { background: #3884d6; }
.canal-estado {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; font-size: 12.5px;
}
.canal-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.canal-acoes form { display: inline; }

/* ==================================================================== *
 * Meu perfil
 *
 * Um cartao so, da largura da tela (`tela-perfil` tira o teto de 1200px do
 * layout). Em cima a identidade - foto redonda, nome, empresa -; embaixo as
 * preferencias em colunas, separadas por um fio em vez de cartoes soltos; no
 * rodape o Salvar, que vale para tudo o que esta acima.
 * ==================================================================== */

body.tela-perfil .wrap { max-width: none; }

.perfil.card { padding: 0; overflow: hidden; }

/* ---- topo: foto, nome, empresa ---- */
.perfil-topo {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 26px var(--pad);
  background: linear-gradient(135deg, rgba(18, 140, 75, .16), rgba(18, 140, 75, .03) 70%);
  border-bottom: 1px solid var(--border);
}

/* A foto e o botao de trocar: o icone de camera aparece por cima no hover. */
.perfil-avatar {
  position: relative; flex: none; cursor: pointer;
  width: 104px; height: 104px; border-radius: 50%;
}
.perfil-avatar .perfil-foto-img {
  width: 100%; height: 100%; border-radius: 50%; display: block;
  object-fit: cover; background: var(--panel-2);
  box-shadow: 0 0 0 4px var(--panel), 0 4px 16px rgba(0, 0, 0, .25);
}
.perfil-avatar-camera {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, .45); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.perfil-avatar-camera svg { width: 28px; height: 28px; }
.perfil-avatar:hover .perfil-avatar-camera,
.perfil-avatar:focus-within .perfil-avatar-camera { opacity: 1; }

.perfil-identidade { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.perfil-nome { font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.perfil-empresa { font-size: 15px; font-weight: 600; color: var(--brand); }
.perfil-selos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.perfil-email { font-size: 13px; overflow-wrap: anywhere; }

.perfil-foto-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.perfil-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--brand);
}
.perfil-link:hover { text-decoration: underline; }
.perfil-link.perigo { color: var(--bad); }

/* ---- as preferencias: colunas separadas por um fio ---- */
.perfil-secoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.perfil-secao {
  padding: 20px var(--pad);
  /* o fio entre colunas e entre linhas: cada secao desenha o da esquerda e o
     de cima, e o cartao esconde o que sobra na borda (overflow: hidden) */
  box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border);
}
.perfil-secao h2 {
  margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.perfil .sign-preview { width: 100%; margin: 0; }

/* Tema: duas amostras clicaveis em vez de dois botoes de radio soltos. */
.perfil-temas { display: flex; gap: 10px; flex-wrap: wrap; }
.perfil-tema {
  position: relative; flex: 1 1 110px; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; align-items: center;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.stack .perfil-tema { flex-direction: column; }
.perfil-tema input { position: absolute; opacity: 0; pointer-events: none; }
.perfil-tema:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.perfil-tema:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.perfil-tema-amostra {
  width: 100%; height: 44px; border-radius: 6px; border: 1px solid var(--border);
}
.perfil-tema-amostra.claro  { background: linear-gradient(135deg, #ffffff 55%, #e9eef1 55%); }
.perfil-tema-amostra.escuro { background: linear-gradient(135deg, #1b2229 55%, #0f1419 55%); }

/* Ajustar a foto no circulo (janela ao escolher a foto) */
dialog.modal.perfil-recorte { width: min(380px, calc(100vw - 24px)); }
.perfil-recorte-corpo { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.perfil-recorte-tela {
  width: 300px; height: 300px; max-width: 100%; aspect-ratio: 1;
  border-radius: var(--radius-sm); background: var(--panel-2);
  cursor: grab; touch-action: none;
}
.perfil-recorte-tela:active { cursor: grabbing; }
.perfil-recorte-zoom {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-size: 18px; font-weight: 700; color: var(--muted);
}
.perfil-recorte-zoom input { flex: 1; padding: 0; }

/* Senha ainda e a da instalacao: a secao que resolve isso se destaca. */
.perfil-urgente { background: rgba(192, 57, 43, .06); }
.perfil-urgente h2 { color: var(--bad); }

/* ---- rodape: um Salvar para tudo ---- */
.perfil-acoes {
  display: flex; justify-content: flex-end;
  padding: 14px var(--pad);
  border-top: 1px solid var(--border); background: var(--panel-2);
}
.perfil-acoes .btn { min-width: 140px; justify-content: center; }

@media (max-width: 560px) {
  .perfil-topo { flex-direction: column; text-align: center; }
  .perfil-identidade { align-items: center; }
  .perfil-selos, .perfil-foto-links { justify-content: center; }
}

/* ---- Configuracoes > Historico ---- */
.hist-botoes,
.transc-botoes { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-situacao,
.transc-situacao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hist-barra {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(127, 127, 127, .15); margin-bottom: 12px;
}
.hist-barra > span { display: block; height: 100%; background: var(--brand); transition: width .4s; }
.hist-numeros { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-numeros strong { display: block; font-size: 20px; }
.hist-numeros strong.bad { color: var(--bad); }
.hist-atual { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hist-girando {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); border-top-color: var(--brand);
  animation: girando .8s linear infinite;
}
.hist-titulo { margin: 16px 0 8px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .hist-girando { animation: none; } }

/* ==================================================================== *
 * Configuracoes no estilo de "Meu perfil"
 *
 * O mesmo desenho do perfil, sem obrigar cada tela a virar um cartao so:
 *
 *   - o titulo da pagina vira uma faixa com o degrade verde, como o topo do
 *     perfil;
 *   - o primeiro titulo de cada cartao vira o cabecalho dele (faixa de cima,
 *     separada por um fio), e os titulos seguintes abrem uma secao nova com
 *     um fio em cima - as "colunas separadas por fio" do perfil;
 *   - a coluna de topicos da esquerda ganha o mesmo degrade no topo.
 *
 * So CSS, e so dentro da casca de Configuracoes (`.config-pane`,
 * `.config-side`): nenhuma tela precisou mudar, e nada fora dali muda. Tabela
 * cheia (`.tabela-cheia`) fica de fora do cabecalho de cartao: ela nao tem o
 * espacamento interno que a conta abaixo desfaz.
 * ==================================================================== */

/* titulo da pagina: a faixa do topo */
.config-pane > .pagina-cabecalho,
.config-pane > h1:first-child {
  margin: 0 0 var(--gap);
  padding: 20px var(--pad);
  border: 1px solid var(--border); border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(18, 140, 75, .16), rgba(18, 140, 75, .03) 70%),
    var(--panel);
  box-shadow: var(--shadow);
}
.config-pane > .pagina-cabecalho h1,
.config-pane > h1:first-child { font-size: 22px; line-height: 1.25; }
.config-pane > .pagina-cabecalho h1 { margin: 0; }

/* primeiro titulo do cartao: vira o cabecalho dele. A margem negativa desfaz
   o espacamento do cartao para a faixa ir de borda a borda. */
.config-pane .card:not(.tabela-cheia) > h2:first-child,
.config-pane .card:not(.tabela-cheia) > .card-topo:first-child {
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad);
  padding: 13px var(--pad);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel-2);
}
.config-pane .card:not(.tabela-cheia) > h2:first-child { font-size: 12px; letter-spacing: .06em; }
.config-pane .card > .card-topo:first-child h2 { margin-top: 0; font-size: 12px; letter-spacing: .06em; }

/* os titulos seguintes do mesmo cartao: secao nova, com o fio em cima */
.config-pane .card > h2:not(:first-child) {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 12px; letter-spacing: .06em;
}

/* a coluna de topicos: o mesmo degrade no topo */
.config-side-head {
  background: linear-gradient(135deg, rgba(18, 140, 75, .16), rgba(18, 140, 75, .03) 70%);
}

/* ---- mensageiro: favoritar e silenciar ---- */
.im-fav { font-size: 16px; line-height: 1; min-width: 36px; }
.im-fav.ativa { color: #f5b301; border-color: #f5b301; }
.im-estrela { color: #f5b301; }

.im-silenciar { position: relative; display: inline-block; }
.im-silenciar summary { list-style: none; cursor: pointer; gap: 6px; }
.im-silenciar summary::-webkit-details-marker { display: none; }
.im-silenciar summary.ativa { color: var(--muted); }
.im-silenciar-ate { font-size: 11.5px; font-weight: 600; }
.im-silenciar-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 180px; padding: 6px;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.im-silenciar-titulo {
  padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.im-silenciar-menu button {
  text-align: left; padding: 8px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer;
}
.im-silenciar-menu button:hover { background: var(--panel-2); }
.im-silenciar-menu .im-silenciar-voltar { color: var(--brand); font-weight: 700; border-top: 1px solid var(--border); border-radius: 0; margin-top: 4px; }

/* "VOCE FOI ADMINISTRADO": o botao do admin e o aviso de quem recebe */
.im-adm { font-size: 16px; line-height: 1; min-width: 36px; }
.im-adm.ativa { border-color: #e0245e; box-shadow: 0 0 0 2px rgba(224, 36, 94, .25); }
.im-adm-aviso {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000;
  max-width: calc(100vw - 32px); padding: 14px 24px;
  background: #e0245e; color: #fff; border-radius: var(--radius-sm);
  font-size: clamp(18px, 4vw, 28px); font-weight: 800; letter-spacing: .04em; text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); pointer-events: none;
}
#imWindow { transition: background-color .3s; }

/* conversa silenciada na lista: o contador fica cinza, como no WhatsApp */
.contador-novas.mudo { background: var(--muted); }
.im-mudo { font-size: 12px; opacity: .8; }

/* ---- audio no balao: o player proprio (ver "Audio no balao" no app.js) ---- */
.nx-audio {
  display: flex; align-items: center; gap: 10px;
  width: min(300px, 62vw); padding: 2px 0;
}
.nx-audio-tocar {
  flex: none; width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 50%;
  background: var(--brand); color: #fff;
}
.nx-audio-tocar svg { width: 20px; height: 20px; }
.nx-audio .nx-pausa { display: none; }
.nx-audio.tocando .nx-pausa { display: inline; }
.nx-audio.tocando .nx-play { display: none; }
.nx-audio-meio { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nx-audio-barra {
  position: relative; height: 4px; margin: 8px 0 2px; cursor: pointer;
  border-radius: 999px; background: rgba(127, 127, 127, .35); touch-action: none;
}
.nx-audio-barra:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.nx-audio-feito { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--brand); }
.nx-audio-bolinha {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: var(--brand);
}
.nx-audio-tempo { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.nx-audio-vel {
  flex: none; min-width: 38px; padding: 3px 7px; cursor: pointer;
  border: 0; border-radius: 999px;
  background: rgba(127, 127, 127, .22); color: var(--text);
  font: inherit; font-size: 11.5px; font-weight: 700;
}

/* gravando um audio: a caixa de digitar sai, fica so a gravacao */
.gravando-audio .reply-linha { display: none; }

/* ---- acoes do balao (responder, apagar): FORA da mensagem ----
   Ficavam por cima do canto do balao, tampando o nome e o que estivesse ali
   (o player do audio, a hora), em bolinhas coloridas - e o apagar era um "X"
   com cara de "fechar". Agora e uma barrinha flutuante AO LADO do balao, como
   no WhatsApp: a esquerda das minhas mensagens, a direita das dos outros,
   centralizada na altura, aparecendo so com o mouse em cima. O apagar virou
   lixeira. Vale nas conversas de WhatsApp e no mensageiro. */
.bubble-acoes {
  top: 50%; right: auto; left: auto; transform: translateY(-50%);
  z-index: 2; gap: 2px; padding: 3px;
  border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
}
.bubble.me .bubble-acoes { right: calc(100% + 6px); }
.bubble.them .bubble-acoes { left: calc(100% + 6px); }
/* ponte invisivel no vao entre o balao e a barra: sem ela o mouse "saia" do
   balao no caminho e a barra sumia antes de chegar nela */
.bubble-acoes::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; }
.bubble.me .bubble-acoes::after { right: -10px; }
.bubble.them .bubble-acoes::after { left: -10px; }

.bubble-acoes button,
.bubble-acoes .responder-msg,
.bubble-acoes .apagar-msg {
  width: 28px; height: 28px;
  background: transparent; color: var(--muted);
  font-size: 0;
}
.bubble-acoes button svg { width: 16px; height: 16px; display: block; }
.bubble-acoes button:hover { background: var(--panel-2); color: var(--text); filter: none; }
.bubble-acoes .apagar-msg:hover,
.bubble-acoes .im-apagar:hover { color: var(--bad); }

/* no celular nao ha "passar o mouse": ficam visiveis, mas discretas */
@media (hover: none) {
  .bubble-acoes { opacity: .9; }
}
/* a barra fora do balao nunca pode criar rolagem de lado na conversa */
.chat-window { overflow-x: hidden; }

/* Usuarios: as conexoes que o vendedor acompanha, no formulario */
.vendedor-conexoes {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px 10px; margin: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 14px;
  max-height: 220px; overflow-y: auto;
}
.vendedor-conexoes[hidden] { display: none; }
.vendedor-conexoes legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); }


/* Mensagem que o contato apagou no WhatsApp: o painel mostra a copia que
   guardou, com esta marca embaixo. O balao fica um pouco apagado para nao
   ser lido como uma mensagem que ainda esta valendo. */
.bubble.apagada-contato { opacity: .82; }
.bubble.apagada-contato .txt { font-style: italic; }
.apagada-aviso {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, transparent);
}

/* ---------------- transcricao de audio, como no Telegram ----------------
   O "→A" fica NA LINHA do player, a direita; o texto quebra para baixo,
   ocupando o balao inteiro. `display: contents` e o que deixa o botao e o
   texto (que moram no bloco .transcricao) virarem itens da linha do player. */
.midia:has(> .transcricao) {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.midia:has(> .transcricao) > .nx-audio,
.midia:has(> .transcricao) > audio:not([hidden]) { flex: 1 1 180px; min-width: 0; }
.transcricao { display: contents; }

.transcrever-bt {
  flex: none; position: relative;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer;
  font: 700 12.5px/1 system-ui, sans-serif; letter-spacing: -.02em;
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  transition: background .12s;
}
.transcrever-bt:hover { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.transcrever-bt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* com o texto aberto, o botao fica "apertado" */
.transcrever-bt.aberto { color: #fff; background: var(--brand); }
/* esperando o servico: o "→A" da lugar a um circulo girando */
.transcrever-bt.girando { cursor: default; }
.transcrever-bt.girando span { visibility: hidden; }
.transcrever-bt.girando::after {
  content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-color: var(--brand);
  animation: transcricao-gira .8s linear infinite;
}
@keyframes transcricao-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .transcrever-bt.girando::after { animation: none; } }

.transcricao-erro { flex-basis: 100%; color: var(--bad); font-size: 12px; }
.transcricao-texto {
  flex-basis: 100%;
  padding: 6px 8px; border-radius: 6px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  font-size: 13px; line-height: 1.45;
}
.transcricao-texto[hidden] { display: none; }
.transcricao-texto p { margin: 0 0 3px; }
.transcricao-texto p:last-child { margin-bottom: 0; }
.transcricao-texto time {
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 2px;
}

/* ---------------- Integracoes (chaves da API para outros sistemas) ---------------- */
.aviso-faixa {
  margin: 0 0 12px; padding: 10px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.api-chave-nova { border: 1px solid var(--ok); margin-bottom: 12px; }
.api-chave-texto code {
  display: block; padding: 10px 12px; border-radius: 6px;
  word-break: break-all; user-select: all; font-size: 13px;
  background: color-mix(in srgb, var(--ok) 10%, transparent);
}
.api-doc { margin-top: 12px; }
.api-doc h3 { margin: 14px 0 4px; font-size: 15px; }
.api-doc pre {
  margin: 0; padding: 10px 12px; border-radius: 6px; overflow-x: auto;
  font-size: 12.5px; line-height: 1.5;
  background: color-mix(in srgb, currentColor 6%, transparent);
}
.api-doc ul { margin: 6px 0 0; padding-left: 18px; }
.api-fila { margin-top: 12px; }
.api-fila h2 { margin: 0 0 8px; }
.api-exemplo { position: relative; }
.api-exemplo .api-copiar { position: absolute; top: 6px; right: 6px; }
.api-mascara { font-size: 12.5px; letter-spacing: .02em; user-select: none; }
.api-chaves .table-wrap, .api-fila .table-wrap { overflow-x: auto; }
.api-chaves .actions { white-space: nowrap; }
.api-chaves .actions form.inline { display: inline-block; margin-left: 4px; }

/* Foto de perfil das conexoes: um cartao por conexao, com a foto que a API
   mandou ou o erro (views/integracao.php, src/FotoPerfil.php) */
.foto-api-grade {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.foto-api-item {
  display: flex; gap: 12px; align-items: flex-start; min-width: 0;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.foto-api-item.erro { border-color: color-mix(in srgb, var(--bad) 55%, var(--border)); }
.foto-api-item .foto-api-img {
  flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
  background: var(--border); display: grid; place-items: center;
  color: var(--muted); font-size: 11px; text-align: center; line-height: 1.2;
}
.foto-api-item .foto-api-texto { min-width: 0; font-size: 13px; }
.foto-api-item .foto-api-texto strong { display: block; overflow-wrap: anywhere; }
.foto-api-item .foto-api-texto .foto-api-erro { color: var(--bad); overflow-wrap: anywhere; }
.foto-api-item details { margin-top: 4px; }
.foto-api-item pre { max-width: 100%; overflow-x: auto; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Conexao particular: quem acompanha (ver views/session_show.php) */
.acompanha-titulo { margin: 14px 0 8px; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.export-midia { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }

/* Historico: a opcao de baixar a midia junto */
.hist-midia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 12px 0; }
.hist-midia-resumo { margin: 0 0 8px; }
.hist-midia-tabela { margin-bottom: 14px; }
.hist-midia-tabela .bad { color: var(--bad); font-weight: 600; }

/* Historico: a tabela dos audios transcritos */
#audios .hist-numeros { margin-bottom: 14px; }
#audios .bad { color: var(--bad); font-weight: 600; }
.transc-tabela td small { display: block; }
.transc-trecho { display: block; max-width: 520px; white-space: normal; }

/* ---- Editor de formulario (views/formulario_editar.php) ---- */
.form-campo { display: flex; flex-direction: column; gap: .6rem; }
.form-campo-topo { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.form-campo-mover { display: flex; gap: .25rem; }

/* ---- Respostas de formulario (views/formulario_respostas.php) ----
   Uma coluna por campo: a tela usa a largura toda, o texto nao quebra (cada
   resposta numa linha so) e a tabela rola para o lado com a barra a mostra -
   a `.table-wrap` padrao esconde a barra, e aqui sem ela ninguem saberia que
   ha mais colunas. Texto longo corta com "..."; inteiro no botao "Ver". */
body.tela-respostas .wrap { max-width: none; }
.respostas-rolagem { scrollbar-width: thin; -ms-overflow-style: auto; }
.respostas-rolagem::-webkit-scrollbar { height: 10px; width: 10px; }
.respostas-rolagem::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 6px; }
.respostas-tabela th,
.respostas-tabela td { white-space: nowrap; }
.respostas-tabela .resposta-valor {
  display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
#respostaModal { width: min(640px, calc(100vw - 32px)); }
.resposta-lista {
  display: grid; grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 8px 16px; margin: 0;
}
.resposta-lista dt { font-weight: 600; color: var(--muted); }
.resposta-lista dd { margin: 0; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 560px) {
  .resposta-lista { grid-template-columns: 1fr; gap: 2px; }
  .resposta-lista dd { margin-bottom: 10px; }
}

/* ------------------ novidades da versao e aba Sobre (src/Atualizacao.php) */
dialog.modal.modal-atualizacao { width: min(720px, calc(100vw - 32px)); }
.atualizacao-versao {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand);
}
.modal-atualizacao .modal-topo { align-items: flex-start; }
.modal-atualizacao .modal-topo h2 { font-size: 17px; margin-top: 2px; }
.modal-atualizacao .modal-acoes { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.atualizacao-nunca { font-size: 13px; color: var(--muted); }
.atualizacao-texto { line-height: 1.55; overflow-wrap: anywhere; }
.atualizacao-texto > :first-child { margin-top: 0; }
.atualizacao-texto > :last-child { margin-bottom: 0; }
.atualizacao-texto h2, .atualizacao-texto h3 { font-size: 15px; margin: 14px 0 6px; }
.atualizacao-texto ul, .atualizacao-texto ol { padding-left: 20px; }
.atualizacao-prints {
  display: grid; gap: 10px; margin-top: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}
.atualizacao-prints a, .atualizacao-print-edit {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--panel-2);
}
.atualizacao-prints img { display: block; width: 100%; height: 150px; object-fit: cover; }
.atualizacao-prints a:hover { border-color: var(--brand); }
.atualizacao-print-edit form { padding: 6px; text-align: center; }

.sobre-cartao { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.sobre-marca .logo { width: 72px; height: 72px; font-size: 32px; border-radius: 18px; }
.sobre-dados h1 { margin: 0 0 6px; }
.sobre-lista { display: flex; gap: 24px; flex-wrap: wrap; margin: 0; }
.sobre-lista dt { font-size: 12px; color: var(--muted); }
.sobre-lista dd { margin: 0; font-weight: 600; }
.sobre-novidade { padding: 12px 0; border-top: 1px solid var(--border); }
.sobre-novidade:first-of-type { border-top: 0; padding-top: 0; }
.sobre-novidade header { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }

/* Anexo grande saindo: texto e barra, no balao "Enviando" e no "Na fila" */
.envio-progresso { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.envio-progresso progress { width: 100%; height: 6px; accent-color: var(--brand); }
/* "carregando": o circulo girando antes do texto enquanto o arquivo sai */
.envio-progresso > span::before {
  content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  vertical-align: -1px; animation: nexGirar .8s linear infinite;
}
@keyframes nexGirar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .envio-progresso > span::before { animation: none; } }

/* "VOCE FOI ADMINISTRADO" no painel inteiro: a cor por cima de tudo, sem
   pegar clique (o aviso .im-adm-aviso fica acima dela) */
.nx-adm-camada {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  transition: background-color .3s;
}

/* Conexoes favoritas, no filtro da lista de Conversas (views/chats.php) */
.conv-fav { font-size: 13px; }
.conv-fav > summary {
  cursor: pointer; list-style: none; color: var(--muted);
  display: inline-flex; gap: 6px; align-items: center; padding: 4px 0;
}
.conv-fav > summary::-webkit-details-marker { display: none; }
.conv-fav > summary span[aria-hidden] { color: #e3a008; }
.conv-fav[open] > summary { color: var(--text); }
.conv-fav-painel {
  margin-top: 6px; padding: 10px 12px; gap: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2);
}
.conv-fav-painel .hint { margin: 0 0 2px; }

/* Selecionar varias mensagens no mensageiro (encaminhar ou apagar de uma vez).
   Com o modo ligado, cada balao ganha o circulo de marcar ao lado e o clique
   so marca; a barra toma o lugar da caixa de escrever. */
#imWindow.selecionando .bubble[data-id]:not(.im-apagada) { cursor: pointer; position: relative; }
#imWindow.selecionando .bubble[data-id]:not(.im-apagada)::before {
  content: ''; position: absolute; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--muted); background: var(--panel); box-sizing: border-box;
}
#imWindow.selecionando .bubble.them::before { right: -30px; }
#imWindow.selecionando .bubble.me::before { left: -30px; }
/* o mesmo seletor do circulo vazio, mais `.selecionada`: com um seletor mais
   curto, o vazio (que tem [data-id]:not(...)) vencia e o circulo nunca enchia */
#imWindow.selecionando .bubble.selecionada[data-id]:not(.im-apagada)::before {
  content: '✓'; border-color: var(--brand); background: var(--brand);
  color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center;
}
#imWindow.selecionando .bubble.selecionada { box-shadow: 0 0 0 2px var(--brand); }
#imWindow.selecionando .bubble-acoes { display: none; }
#imWindow.selecionando .bubble.them { margin-right: 36px; }
#imWindow.selecionando .bubble.me { margin-left: 36px; }

.im-selecao-barra {
  display: flex; align-items: center; gap: 8px;
  padding: 10px var(--pad); border-top: 1px solid var(--border); background: var(--panel-2);
}
.im-selecao-barra[hidden] { display: none; }
.im-selecao-barra .im-sel-total { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.im-selecao-barra .btn { width: auto; }
#imSelecionar.ativa { border-color: var(--brand); color: var(--brand); }

/* ------------- GIF e emoji do GIPHY no mensageiro (src/Giphy.php) -------- */
.giphy-painel {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2);
}
.giphy-painel[hidden] { display: none; }
.giphy-topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.giphy-abas { display: inline-flex; gap: 4px; }
.giphy-aba {
  border: 1px solid var(--border); background: var(--panel); color: var(--muted);
  border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.giphy-aba.ativa { color: var(--text); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.giphy-topo input[type="search"] { flex: 1; min-width: 160px; padding: 7px 10px; }
.giphy-grade {
  display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  max-height: 260px; overflow-y: auto;
}
.giphy-item {
  padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer;
  background: var(--panel); aspect-ratio: 1; display: block;
}
.giphy-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.giphy-item:hover, .giphy-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.giphy-aviso { grid-column: 1 / -1; margin: 8px 0; text-align: center; }
.giphy-rodape { display: flex; justify-content: flex-end; }

/* O selo oficial: o de texto branco no tema escuro, o de texto escuro no claro */
.giphy-selo { display: inline-flex; align-items: center; }
.giphy-selo img { height: 16px; width: auto; display: block; }
.giphy-selo .giphy-selo-claro { display: none; }
html[data-tema="claro"] .giphy-selo .giphy-selo-escuro { display: none; }
html[data-tema="claro"] .giphy-selo .giphy-selo-claro { display: block; height: 20px; }

/* O balao do GIF */
.im-gif { margin: 2px 0 0; display: flex; flex-direction: column; gap: 4px; }
.im-gif img { display: block; max-width: min(260px, 60vw); height: auto; border-radius: 8px; }
.im-gif figcaption { display: flex; justify-content: flex-end; }

/* ---------------- reacoes com emoji no mensageiro (como no Teams) -------- */
.im-reacoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.im-reacao {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--panel); color: var(--text);
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1.6;
}
.im-reacao span { font-size: 14px; }
.im-reacao:hover { border-color: var(--muted); }
.im-reacao.minha { border-color: var(--brand); background: rgba(18, 140, 75, .14); }

.im-reagir-barra {
  position: fixed; z-index: 1100;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px; max-width: min(320px, calc(100vw - 16px));
  padding: 6px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel); box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
}
.im-reagir-barra:has(.im-reagir-extra) { border-radius: 14px; }
.im-reagir-barra button {
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font-size: 21px; line-height: 1; cursor: pointer;
  transition: transform .12s, background-color .12s;
}
.im-reagir-barra button:hover, .im-reagir-barra button:focus-visible { background: var(--panel-2); transform: scale(1.2); }
.im-reagir-barra .im-reagir-mais { font-size: 18px; font-weight: 700; color: var(--muted); }
.im-reagir-extra {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px;
  padding-top: 4px; margin-top: 2px; border-top: 1px solid var(--border);
}

/* ------- menu do Anexar no mensageiro: o balao do clipe do WhatsApp ------- */
.anexar-ancora { position: relative; display: inline-flex; }
.anexar-menu {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 230px; padding: 8px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transform-origin: bottom right; animation: anexarAbre .14s ease-out;
}
.anexar-menu[hidden] { display: none; }
/* a ponta do balao, apontando para o botao */
.anexar-menu::after {
  content: ''; position: absolute; right: 26px; bottom: -7px; width: 12px; height: 12px;
  background: var(--panel); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}
@keyframes anexarAbre { from { opacity: 0; transform: scale(.92) translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .anexar-menu { animation: none; } }
.anexar-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.anexar-menu button:hover, .anexar-menu button:focus-visible { background: var(--panel-2); outline: none; }
.anexar-icone {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.anexar-icone svg { width: 20px; height: 20px; }
.anexar-icone.roxo    { background: #7f66ff; }
.anexar-icone.azul    { background: #5157ae; }
.anexar-icone.amarelo { background: #ffbc38; }
.anexar-icone.verde   { background: #02a698; }
.anexar-gif { font-size: 11px; font-weight: 800; letter-spacing: .02em; }

/* Emoji no texto do mensageiro: caixa flutuante acima do Anexar, no lugar
   onde o balao do menu aparece, com as abas no alto e a grade rolando. */
.im-emoji-painel {
  position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 61;
  width: min(380px, calc(100vw - 24px)); height: min(360px, 60vh);
  display: flex; flex-direction: column; gap: 6px; padding: 10px;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--panel); box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transform-origin: bottom right; animation: anexarAbre .14s ease-out;
}
.im-emoji-painel[hidden] { display: none; }
.im-emoji-abas {
  flex: none; display: flex; gap: 2px; overflow-x: auto;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.im-emoji-abas button {
  flex: none; width: 36px; height: 32px; border: 0; border-radius: 8px; background: transparent;
  font-size: 19px; cursor: pointer; opacity: .55;
}
.im-emoji-abas button.ativa, .im-emoji-abas button:hover { opacity: 1; background: var(--panel-2); }
.im-emoji-titulo { flex: none; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.im-emoji-grade {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 2px; align-content: start;
}
.im-emoji-grade button {
  height: 38px; border: 0; border-radius: 8px; background: transparent; font-size: 23px; cursor: pointer;
}
.im-emoji-grade button:hover, .im-emoji-grade button:focus-visible { background: var(--panel-2); outline: none; }

/* Caixa do botao de EMOJI: a chave Emoji | GIF no topo e o corpo de cada um
   ocupando o resto, rolando por dentro (views/interno.php #imEmoji) */
.expressao-chave {
  flex: none; display: flex; gap: 4px; padding: 3px;
  border-radius: 999px; background: var(--panel-2); align-self: center;
}
.expressao-chave button {
  border: 0; border-radius: 999px; padding: 5px 18px; background: transparent;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.expressao-chave button.ativa { background: var(--brand); color: #fff; }
.im-emoji-corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.im-emoji-corpo[hidden] { display: none; }
.im-emoji-painel .giphy-painel {
  flex: 1; min-height: 0; padding: 0; border: 0; background: transparent;
}
.im-emoji-painel .giphy-painel[hidden] { display: none; }
.im-emoji-painel .giphy-grade { flex: 1; min-height: 0; max-height: none; }
/* com o GIF a caixa precisa de mais altura para a grade respirar */
.im-emoji-painel:has(.giphy-painel:not([hidden])) { height: min(420px, 65vh); }

/* Caixa de resposta do WhatsApp igual ao mensageiro: o emoji abre numa caixa
   flutuante acima do proprio botao (e nao mais na largura toda da conversa),
   com as categorias no alto e a grade rolando (views/_chat_pane.php). */
.anexar-ancora > .emoji-painel {
  left: auto; right: 0; bottom: calc(100% + 10px); margin-bottom: 0; z-index: 61;
  width: min(380px, calc(100vw - 24px)); height: min(360px, 60vh); max-height: none;
  padding: 10px; gap: 6px; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
  transform-origin: bottom right; animation: anexarAbre .14s ease-out;
}
.anexar-ancora > .emoji-painel[hidden] { display: none; }
.anexar-ancora > .emoji-painel .emoji-divisas {
  border-top: 0; border-bottom: 1px solid var(--border); background: transparent;
  padding: 0 0 6px; border-radius: 0;
}
.anexar-ancora > .emoji-painel .emoji-titulo { padding: 0; }
.anexar-ancora > .emoji-painel .emoji-grade { padding: 0; }
.anexar-ancora > .emoji-painel .emoji-grade button { font-size: 23px; }

/* O icone de cada aba de conversa, num circulo, para saber qual e qual:
   WhatsApp (verde, nas telas dele) e NexChat (o logo, no mensageiro) */
.menu a:has(.menu-icone) { display: inline-flex; align-items: center; gap: 7px; }
.menu-icone {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-grid; place-items: center; overflow: hidden;
}
.menu-icone.whats { background: #25d366; color: #fff; }
.menu-icone.whats .menu-whats { width: 14px; height: 14px; color: #fff; }
/* NexChat: sem cor de fundo - so o contorno e a letra, na cor do texto da
   aba (cinza parada, branco na ativa) */
.menu-icone.nex { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.menu-icone.nex .logo { width: 22px; height: 22px; border-radius: 50%; font-size: 11px; background: transparent; color: currentColor; }
.menu-icone.nex .logo.imagem { background: var(--panel); }
/* na aba ativa (fundo verde) o circulo ganha um anel branco para nao sumir */
.menu a.active .menu-icone { box-shadow: 0 0 0 2px #fff; }
.menu a.active .menu-icone.nex { box-shadow: inset 0 0 0 1.5px currentColor; }


/* "Instalar app" no topo, ao lado do sino (so quando o navegador oferece) */
.instalar-app { display: inline-flex; align-items: center; gap: 6px; width: auto; white-space: nowrap; }
.instalar-app[hidden] { display: none; }
.instalar-app svg { width: 16px; height: 16px; }
.instalar-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ==========================================================================
   Revisao de telas de varios tamanhos (celular, tablet, notebook, app)
   --------------------------------------------------------------------------
   O buraco estava entre 900 e ~1500 px (notebook, janela pela metade, app
   instalado): o menu quebrava em ate tres linhas, o topo passava de 200 px e
   as telas de conversa - que travam a altura na janela - ficavam espremidas,
   com a caixa de escrever cortada. Regras daqui valem POR CIMA das de cima.
   ========================================================================== */

/* Topo: as abas numa linha so. Sem espaco, a faixa rola de lado (sem barra
   visivel) em vez de quebrar em mais linhas. */
.menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.user { flex: none; }

/* Telas medias: menos texto no topo antes de recolher o menu */
@media (max-width: 1500px) {
  .instalar-app .instalar-texto { display: none; }
  .instalar-app { padding-left: 9px; padding-right: 9px; }
  .menu a { padding: 7px 10px; }
  .topbar { gap: 12px; }
}

/* Ate 1200 px: as abas vao para o botao "Menu", que abre um painel POR CIMA
   da tela - empurrar a pagina para baixo cortaria as telas de conversa. */
@media (max-width: 1200px) {
  .topbar { flex-wrap: nowrap; gap: 10px; }
  .brand { flex: 1; min-width: 0; }
  .menu-toggle { display: inline-flex; align-items: center; min-height: 38px; }
  .menu {
    display: none;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 40;
    flex-direction: column; flex-wrap: nowrap; gap: 2px; overflow: visible;
    max-height: calc(100dvh - 80px); overflow-y: auto;
    padding: 10px clamp(12px, 3vw, 22px) 14px;
    background: var(--panel); border-bottom: 1px solid var(--border);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  }
  .menu.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu a { padding: 11px 12px; white-space: normal; }
  .user > .tag { display: none; }   /* o rotulo admin/usuario, nao os do sino */
  .user-nome { max-width: 16ch; }
  .sino-caixa { right: -8px; }
}

/* Celular */
@media (max-width: 600px) {
  .menu.open { grid-template-columns: 1fr; }
  .brand-name { display: none; }
  .user-nome { display: none; }
  .user { gap: 6px; }
  .wrap { padding-left: 10px; padding-right: 10px; }
  /* janelas e balões flutuantes com folga da borda */
  dialog.modal { width: calc(100vw - 16px); max-height: calc(100dvh - 24px); }
  /* o balao do clipe e a caixa de emoji/GIF: presos ao pe da tela, de
     borda a borda, logo acima da caixa de escrever - como no WhatsApp do
     celular. Ancorados no botao, sairiam pela lateral da tela. */
  .anexar-menu,
  .anexar-ancora > .emoji-painel,
  .im-emoji-painel {
    position: fixed; left: 8px; right: 8px; width: auto;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));   /* acima da caixa de escrever, que aqui tem duas linhas */
  }
  .anexar-menu::after { display: none; }
  .anexar-ancora > .emoji-painel, .im-emoji-painel { height: min(380px, 55dvh); }
  /* barra de reacoes nao passa da largura da tela */
  .im-reagir-barra { max-width: calc(100vw - 16px); }
  /* botoes de acao do cabecalho da conversa: menores e sem quebrar o titulo */
  .chat-head .btn.small { padding: 6px 9px; }
}

/* App instalado no celular: a caixa de escrever e o topo respeitam o entalhe
   e a barra de gestos do sistema */
@supports (padding: env(safe-area-inset-bottom)) {
  .reply-box { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .topbar { padding-top: max(10px, env(safe-area-inset-top)); }
}

/* Toque (celular/tablet): alvos maiores onde o dedo erra facil */
@media (hover: none) and (pointer: coarse) {
  .btn, .menu a, .anexar-menu button { min-height: 40px; }
  .im-emoji-grade button, .emoji-grade button { height: 42px; }
}

/* Grade do GIPHY: linhas de altura FIXA. Com `aspect-ratio` no botao, dentro
   da caixa de altura travada a linha encolhia e cada GIF invadia o de baixo -
   o quadrado mostrava pedaco de dois GIFs e parecia o GIF errado. */
.giphy-grade { grid-auto-rows: 104px; align-content: start; }
.giphy-item { aspect-ratio: auto; height: 104px; width: 100%; position: relative; overflow: hidden; }
.giphy-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* o selo e link para o GIPHY e nao se arrasta */
a.giphy-selo { -webkit-user-drag: none; user-select: none; }
a.giphy-selo img { -webkit-user-drag: none; pointer-events: none; }

/* O GIF escolhido na tira de anexos (sai no Enviar) */
.im-anexo-gif { position: relative; }
.im-anexo-gif img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-anexo-gif-rotulo {
  position: absolute; left: 4px; bottom: 4px;
  padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .65);
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .04em;
}
#imAnexoBotao:disabled { opacity: .45; cursor: not-allowed; }

/* Audio na tira de anexos: o player para ouvir antes de enviar (mais largo
   que as miniaturas de foto, que sao quadradas) */
.im-anexo.im-anexo-audio {
  width: min(320px, 100%); height: auto; min-height: 54px;
  display: flex; align-items: center; padding: 6px 30px 6px 8px;
}
.im-anexo-audio audio { width: 100%; height: 40px; display: block; }

/* ---- gravando audio no mensageiro: a barra no lugar de TUDO ----
   Some a linha de escrever (ja sumia), a tira de anexos e a citacao; fica so
   a barra - lixeira, ponto vermelho, tempo, o espectro da voz e as saidas.
   Enviar ou descartar devolve tudo como estava. */
.gravando-audio .im-anexos,
.gravando-audio .reply-citando { display: none !important; }
.im-gravando {
  gap: 10px; padding: 8px 10px; min-height: 52px;
  border-radius: 999px; font-size: 14px;
}
.im-gravando .btn { margin-left: 0; }
.im-gravando .im-grav-lixo { color: var(--bad); border-color: transparent; background: transparent; }
.im-gravando .im-grav-lixo:hover { background: rgba(192, 57, 43, .14); }
.im-grav-tempo { flex: none; min-width: 42px; font-variant-numeric: tabular-nums; font-weight: 700; }
.im-grav-espectro { flex: 1; min-width: 60px; height: 32px; display: block; }
@media (max-width: 600px) {
  .im-gravando { border-radius: var(--radius); flex-wrap: wrap; }
  .im-grav-espectro { flex-basis: 100%; order: 5; }
}

/* "Ouvir antes": a mesma barra, agora com o player no lugar do espectro */
.im-gravando.ouvindo .im-ponto,
.im-gravando.ouvindo .im-grav-tempo,
.im-gravando.ouvindo .im-grav-espectro,
.im-gravando.ouvindo #imGravarParar { display: none; }
.im-grav-player { flex: 1; min-width: 0; height: 38px; }

/* Perfis criados pela empresa (tela Usuarios) */
.perfis-card { margin-top: var(--gap); }
.perfis-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.perfil-linha {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2);
}
.perfil-nome { font-weight: 600; flex: 1; min-width: 140px; }
.perfil-obs { font-size: 12.5px; }
.perfil-renomear { display: flex; gap: 6px; flex: 1; min-width: 220px; }
.perfil-renomear input { flex: 1; padding: 6px 10px; }
.perfil-linha form { margin: 0; }
.perfil-linha .btn { width: auto; }

/* Superadmin: a empresa pode instalar o app (quadro da empresa) */
.app-empresa { align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--panel-2); }
.app-empresa span { display: flex; flex-direction: column; gap: 2px; }

/* Busca do mensageiro: pessoas e mensagens achadas (views/_im_busca.php) */
.im-busca-pessoa, .im-busca-msg {
  display: flex; gap: 10px; align-items: center; padding: 10px var(--pad);
  border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none;
}
.im-busca-pessoa:hover, .im-busca-msg:hover { background: var(--panel-2); text-decoration: none; }
.im-busca-pessoa .im-membro-foto { width: 38px; height: 38px; }
.im-busca-pessoa-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; }
.im-busca-pessoa-nome small { font-weight: 400; }
.im-busca-pessoa .btn { width: auto; pointer-events: none; }
.im-busca-msg { flex-direction: column; align-items: stretch; gap: 3px; }
.im-busca-msg-topo { display: flex; justify-content: space-between; gap: 8px; }
.im-busca-msg-texto { font-size: 13px; overflow-wrap: anywhere; }
.im-busca-resultados mark, .im-busca-pessoa mark { background: rgba(255, 196, 0, .45); color: inherit; border-radius: 3px; padding: 0 1px; }
/* a mensagem que veio da busca, destacada por um instante */
#imWindow .bubble.achada { box-shadow: 0 0 0 3px #ffc400; transition: box-shadow .3s; }

/* "Mostrar conversas antigas" no fim da lista do mensageiro */
.im-antigas-botao {
  display: block; width: calc(100% - 2 * var(--pad)); margin: 10px var(--pad) 14px;
  padding: 9px 12px; border: 1px dashed var(--border); border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.im-antigas-botao:hover { color: var(--text); border-color: var(--muted); background: var(--panel-2); }
.conv-item.im-antiga[hidden] { display: none; }

/* @mencionar no mensageiro: a lista acima da caixa e o realce no balao */
.im-mencoes-lista {
  position: absolute; left: var(--pad); bottom: calc(100% - 6px); z-index: 62;
  width: min(300px, calc(100% - 2 * var(--pad))); max-height: 260px; overflow-y: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel); box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}
.im-mencoes-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.im-mencoes-lista button.ativa, .im-mencoes-lista button:hover { background: var(--panel-2); }
.im-mencoes-lista img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.im-mencao { color: var(--brand); font-weight: 700; }
.im-mencao.minha { background: rgba(18, 140, 75, .18); border-radius: 4px; padding: 0 3px; }