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

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

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181d;
    --panel: #1c2229;
    --panel-2: #232b33;
    --border: #2c343d;
    --text: #e6ebf0;
    --muted: #93a0ad;
    --brand: #25b464;
    --brand-dark: #1d9152;
    --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;
}

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

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

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

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

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

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

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

.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; }
.table td.actions { white-space: nowrap; }

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

.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);
  columns: 340px auto;
  column-gap: var(--gap);
}
.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); }

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

.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); }
.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;
}
.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-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); }
  .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 tres 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. */
#chatAntigas, #chatAtual, #chatDigitando {
  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 { 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; }

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

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

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

/* 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::after {
  content: 'nao consegui carregar'; border: 0; animation: none;
  width: auto; height: auto; display: grid; place-content: center;
  font-size: 11px; color: var(--muted); padding: 6px;
}
@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; }

.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(--line); border-radius: 10px;
    background: var(--card); 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(--line); 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(--line);
}
.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(--line); 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; }

@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. */
.manual-figura { margin: 0 0 8px; }
.manual-figura img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

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