/* ============================================================
   simpleAIman — acréscimos ao admin.css herdado do site-adv.

   REGRA: nada aqui redefine input, select, textarea, .card, .btn
   ou table. A base já estiliza tudo isso com as variáveis do tema
   escuro (--bg-elevated-2, --border, --text). Redefinir com nomes
   inventados é o que deixou os campos com fundo branco: as
   variáveis não existiam e o fallback claro assumia.

   Ao acrescentar regra nova, use SEMPRE as variáveis reais:
     --bg  --bg-elevated  --bg-elevated-2  --border
     --text  --text-muted  --accent  --on-accent
     --success  --danger  --warning  --radius  --radius-sm
   ============================================================ */

/* cabeçalho de página --------------------------------------- */

.page-header { margin-bottom: 1.25rem; }

.page-header h1 {
    margin: 0 0 0.3rem;
    font-size: 1.45rem;
    line-height: 1.2;
}

.page-sub {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
    max-width: 70ch;
}

.card + .card { margin-top: 1.25rem; }

.card-title {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    font-weight: 700;
}

.vazio {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* menu lateral por grupo ------------------------------------ */

.admin-nav-grupo {
    display: block;
    padding: 1rem 0.9rem 0.35rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* cartões de número ----------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.stat-card {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s;
}

.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

.stat-icon { color: var(--accent); margin-bottom: 0.35rem; }
.stat-valor { font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.stat-rotulo { font-size: 0.76rem; color: var(--text-muted); }

/* alertas do estado do sistema ------------------------------- */

.lista-alertas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.alerta {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border-left: 3px solid;
    font-size: 0.88rem;
    line-height: 1.5;
    background: var(--bg-elevated-2);
    color: var(--text);
}

.alerta code {
    padding: 0.08rem 0.32rem;
    border-radius: 4px;
    /* Preto translucido, nao branco: o alerta agora vive sobre fundo claro, e
       o branco de antes sumia dentro dele. */
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.86em;
}

.alerta-erro  { border-color: var(--danger);  }
.alerta-aviso { border-color: var(--warning); }
.alerta-ok    { border-color: var(--success); margin: 0; }

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

.tag {
    display: inline-block;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
}

.tag-ok     { color: var(--success); border-color: rgba(46, 204, 113, 0.4); }
.tag-erro   { color: var(--danger);  border-color: rgba(255, 84, 112, 0.4); }
.tag-neutro { color: var(--text-muted); }

/* Divisor de seção dentro de um formulário.
   Existe para separar visualmente blocos que são universos DIFERENTES na
   mesma tela — chat e embedding, por exemplo — em vez de deixá-los como uma
   grade contínua de campos que aparenta ser um assunto só. */
.form-secao {
    grid-column: 1 / -1;
    margin: 0.6rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
    font-weight: 700;
}

.form-secao:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.form-secao small {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-muted);
}

/* formulários — só LAYOUT; a aparência do campo vem da base --- */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.form-grid label,
.chat-topo label {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    font-size: 0.83rem;
    font-weight: 600;
}

.form-grid label.col-2 { grid-column: span 2; }

@media (max-width: 680px) {
    .form-grid label.col-2 { grid-column: span 1; }
}

.form-grid small {
    font-weight: 400;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.form-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-checks label.check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.form-acoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }

td.acoes { white-space: nowrap; display: flex; gap: 0.35rem; align-items: center; }

/* barra de progresso da indexação ---------------------------- */

.barra {
    height: 5px;
    border-radius: 3px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    overflow: hidden;
    margin-top: 0.35rem;
    max-width: 160px;
}

.barra > span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
}

/* playground de chat ----------------------------------------- */

.chat-topo {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
    flex-wrap: wrap;
}

.chat-topo label { flex: 1 1 260px; }

.chat {
    min-height: 320px;
    max-height: 55vh;
    overflow-y: auto;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
}

.bolha {
    max-width: 82%;
    /* Mais apertado que o original: esta tela e para LER conversa inteira, e
       cada balao alto empurra o resto para fora da dobra. */
    padding: 0.45rem 0.7rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.45;
    word-break: break-word;
    /* Aqui o `pre-wrap` FICA no balao: o playground escreve `textContent`
       direto nele, sem elemento interno. Quem cuida de nao vazar indentacao do
       template e o `conversas.php`, que cola o conteudo sem espaco em volta. */
    white-space: pre-wrap;
}

.bolha-corpo { display: block; }

.bolha.user {
    align-self: flex-end;
    background: var(--accent);
    color: var(--on-accent);
    border-bottom-right-radius: 4px;
}

.bolha.bot {
    align-self: flex-start;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    border-bottom-left-radius: 4px;
}

.bolha.sistema {
    align-self: center;
    max-width: 90%;
    text-align: center;
    font-size: 0.85rem;
    background: var(--bg-elevated-2);
    border: 1px solid var(--warning);
    color: var(--text-muted);
}

.bolha.pensando { opacity: 0.55; font-style: italic; }

.bolha-meta {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chat-form { display: flex; gap: 0.5rem; }
.chat-form input { flex: 1; }

/* tela de testar busca --------------------------------------- */

.resultado {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--bg-elevated-2);
}

.resultado-topo {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
}

.resultado-pos {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--accent);
    margin-right: 0.2rem;
}

.resultado-fonte {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.resultado-texto {
    font-size: 0.87rem;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 11rem;
    overflow-y: auto;
    padding-left: 0.7rem;
    border-left: 2px solid var(--border);
}

.bolha-fontes {
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border);
    font-size: 0.73rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* seções dentro de um formulário longo ----------------------- */

.secao-form {
    margin: 1.4rem 0 0.7rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.secao-form:first-of-type { margin-top: 0; }

.form-grid textarea {
    min-height: 6rem;
    resize: vertical;
    line-height: 1.55;
}

/* Trecho de codigo para copiar e colar (instalacao do widget). Precisa
   quebrar linha: a tag de instalacao e longa e uma barra de rolagem
   horizontal esconderia justamente o fim, que e onde fica o token. */
.bloco-codigo {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    margin: 0 0 0.85rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
}

/* catálogo de ferramentas embutidas ---------------------------- */

.catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.7rem;
}

.catalogo-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    padding: 0.8rem;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: 10px;
}

.catalogo-item small { opacity: 0.7; line-height: 1.4; flex: 1; }


/* ==============================================================
   Atendimento humano (handoff Nível 2)
   ============================================================== */

.atendimento-grade {
    display: grid;
    grid-template-columns: minmax(240px, 320px) 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 900px) {
    .atendimento-grade { grid-template-columns: 1fr; }
}

/* fila -------------------------------------------------------- */

.fila-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.fila-lista li {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
}

.fila-cabeca {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.fila-previa {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.fila-lista a { text-decoration: none; color: inherit; }
.fila-lista a.ativo { font-weight: 700; color: var(--accent); }

/* Espera longa precisa saltar aos olhos: o custo de nao notar e uma pessoa
   desistindo do outro lado. */
.tag-alerta { background: rgba(255, 84, 112, 0.16); color: var(--danger); }

/* ==============================================================
   A janela de conversa

   Ilha CLARA dentro do painel escuro, e de proposito: o atendente passa a
   sessao inteira lendo e escrevendo aqui, e texto claro sobre fundo escuro
   cansa numa tarefa dessas. Alem disso, a familiaridade com o WhatsApp faz
   quem nunca viu o sistema saber operar sem treinamento.

   As cores abaixo NAO herdam nada do painel: sao redeclaradas aqui, senao um
   ajuste no tema escuro quebraria o contraste dentro da janela.
   ============================================================== */

.zap {
    --zap-cabecalho: #008069;
    --zap-fundo: #efeae2;
    --zap-recebida: #ffffff;
    --zap-enviada: #d9fdd3;
    --zap-nota: #fff3cd;
    --zap-texto: #111b21;
    /* Escurecido do #667781 do WhatsApp: sobre a barra clara (#f0f2f5) aquele
       tom dava 4.14 de contraste, abaixo do minimo AA de 4.5. A diferenca nao
       se ve, mas a legibilidade de quem passa o dia aqui, sim. */
    --zap-secundario: #4d5b63;
    --zap-borda: rgba(0, 0, 0, 0.10);
    --zap-barra: #f0f2f5;

    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--zap-fundo);
    color: var(--zap-texto);
    display: flex;
    flex-direction: column;
    min-height: 420px;
}

.zap-cabecalho {
    background: var(--zap-cabecalho);
    color: #fff;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.zap-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.zap-quem { font-weight: 600; line-height: 1.2; }
.zap-estado { font-size: 0.76rem; opacity: 0.85; }
.zap-cabecalho .tag { margin-left: auto; background: rgba(255, 255, 255, 0.2); color: #fff; }

/* Trama discreta no fundo, como o papel de parede do WhatsApp. Feita com
   gradientes para nao custar nenhum arquivo de imagem. */
.zap-corpo {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    max-height: 52vh;
    background-image:
        radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
        radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    background-position: 0 0, 11px 11px;
}

/* 82%: o balao ganha meia dezena de caracteres por linha, o que em conversa
   longa economiza varias linhas. Abaixo disso o texto quebra cedo demais e a
   coluna vazia ao lado nao serve para nada. */
.msg { max-width: 82%; }

.msg-texto {
    position: relative;
    /* Sem faixa reservada embaixo.
       A hora era posicionada em `absolute`, e por isso o balao precisava de
       1.1rem de espaco vazio no rodape para nao ficar por baixo dela. Numa
       mensagem de uma linha isso quase dobrava a altura, e uma conversa de
       vinte mensagens ocupava o dobro da tela. Agora a hora flutua no fim do
       texto: cabendo na ultima linha, ela fica ali; nao cabendo, desce
       sozinha. E o comportamento do proprio WhatsApp.

       O `::after` que limpa o float nao e enfeite: elemento flutuante NAO conta
       para a altura do pai, entao sem ele o balao nao cresce para conter a hora
       e ela aparece por baixo do fundo, do lado de fora. Foi exatamente o que
       aconteceu. */
    padding: 0.38rem 0.6rem 0.32rem;
    border-radius: 8px;
    line-height: 1.45;
    font-size: 0.9rem;
    box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
    word-wrap: break-word;
}

/* A quebra de linha da MENSAGEM vem daqui, nao de <br>: formatar_whatsapp()
   nao aplica nl2br justamente para os dois nao se somarem.

   E fica no corpo, nunca no balao. Com `pre-wrap` no contentor, a indentacao
   do proprio template PHP virava espaco VISIVEL: cada balao carregava as
   quebras de linha e os 28 espacos que separam `<span class="msg-quem">` do
   texto e o texto da hora. Parecia margem exagerada e era texto em branco.
   Sintoma revelador: mensagem que chegava pelo polling saia certa, porque o
   JS monta os elementos sem espaco entre eles. */
.msg-corpo {
    display: block;
    white-space: pre-wrap;
}

/* Contem o float da hora. Sem isto o balao nao cresce e ela cai para fora. */
.msg-texto::after {
    content: '';
    display: block;
    clear: both;
}

.msg-texto strong { font-weight: 700; }
.msg-texto em { font-style: italic; }
.msg-texto s { text-decoration: line-through; opacity: 0.8; }

/* Anexos recebidos na conversa.
   `white-space: normal` porque o balao usa pre-wrap, e sem isto a quebra de
   linha entre o texto e o anexo viraria um vao enorme. */
.anexo {
    display: block;
    margin-top: 0.4rem;
    max-width: 100%;
    white-space: normal;
}

.anexo-imagem img {
    display: block;
    /* Teto de altura, nao so de largura: foto em pe tomaria a tela inteira e
       empurraria o resto da conversa para fora. Clicar abre em tamanho real. */
    max-width: 100%;
    max-height: 260px;
    width: auto;
    border-radius: 6px;
    cursor: zoom-in;
}

.anexo-audio { width: min(100%, 260px); }
.anexo-video { max-width: 100%; max-height: 260px; border-radius: 6px; }

.anexo-arquivo {
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: inherit;
    font-size: 0.85rem;
}

.anexo-arquivo:hover { background: rgba(0, 0, 0, 0.1); }
.anexo-tamanho { opacity: 0.65; }

/* Etiqueta do canal.
   Por onde a pessoa fala muda o que o atendente pode fazer: no WhatsApp ha um
   telefone e a janela de 24h; no widget nao ha nem um nem outra, e quem fecha
   a aba some. Atender os dois como iguais leva a prometer retorno "mais tarde"
   para quem nao vai estar la. */
.canal-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    vertical-align: middle;
}

.canal-zap { background: #dcf8c6; color: #0b6b3a; }
.canal-web { background: #e2e8f0; color: #334155; }

/* Arquivo escolhido, antes de enviar. Fica visível de propósito: sem
   confirmação na tela, o atendente anexa, esquece e manda só o texto. */
.anexo-escolhido {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0.82rem;
}

.anexo-escolhido span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.anexo-escolhido button {
    margin-left: auto;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.7;
}

.anexo-escolhido button:hover { opacity: 1; }

.anexo-removido {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px dashed rgba(0, 0, 0, 0.2);
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Hora dentro do balao, embaixo a direita: e o detalhe que faz a coisa
   "parecer WhatsApp" mais do que qualquer cor. */
.msg-hora {
    float: right;
    /* O espaco a esquerda separa a hora da ultima palavra; a margem negativa
       embaixo tira a folga que a linha de texto reservaria para ela. */
    margin: 0.2rem 0 -0.15rem 0.55rem;
    font-size: 0.68rem;
    line-height: 1;
    color: var(--zap-secundario);
}

.msg-quem {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
    color: var(--zap-cabecalho);
}

.msg-usuario { align-self: flex-start; }
.msg-usuario .msg-texto { background: var(--zap-recebida); border-top-left-radius: 2px; }

.msg-bot { align-self: flex-start; }
.msg-bot .msg-texto { background: var(--zap-recebida); border-top-left-radius: 2px; }
.msg-bot .msg-quem { color: var(--zap-secundario); font-style: italic; }

.msg-atendente { align-self: flex-end; }
.msg-atendente .msg-texto { background: var(--zap-enviada); border-top-right-radius: 2px; }
.msg-atendente .msg-quem { display: none; }

/* Aviso nao e fala de ninguem: pilula centralizada, como no WhatsApp. */
.msg-sistema { align-self: center; max-width: 90%; }

.msg-sistema .msg-texto {
    background: #ffeecd;
    color: #54656f;
    font-size: 0.76rem;
    text-align: center;
    padding: 0.3rem 0.7rem;
    box-shadow: none;
    border-radius: 7px;
}

.msg-sistema .msg-quem,
.msg-sistema .msg-hora { display: none; }

/* Nota interna: NAO pode parecer mensagem enviada. Confundir as duas
   significa mandar recado do staff para o visitante. */
.msg-nota { align-self: center; max-width: 92%; }

.msg-nota .msg-texto {
    background: var(--zap-nota);
    border: 1px dashed #d0a63c;
    color: #6b4e00;
    font-size: 0.84rem;
    box-shadow: none;
}

.msg-nota .msg-quem { color: #8a6400; }
.msg-nota .msg-hora { color: #a08040; }

.msg-texto code {
    background: rgba(0, 0, 0, 0.07);
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    font-size: 0.9em;
}

/* barra de escrita -------------------------------------------- */

.zap-escrita { background: var(--zap-barra); padding: 0.55rem 0.7rem; }

.editor-barra {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.btn-marca,
.btn-emoji {
    border: 1px solid transparent;
    background: transparent;
    color: var(--zap-secundario);
    border-radius: 6px;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.2;
}

.btn-marca:hover,
.btn-emoji:hover { background: rgba(0, 0, 0, 0.06); color: var(--zap-texto); }
.btn-marca code { background: none; color: inherit; font-size: 0.78rem; }
.editor-sep { width: 1px; height: 18px; background: var(--zap-borda); margin: 0 0.35rem; }

.zap-escrita textarea {
    width: 100%;
    border: 1px solid var(--zap-borda);
    border-radius: 18px;
    padding: 0.6rem 0.9rem;
    background: #fff;
    color: var(--zap-texto);
    font: inherit;
    font-size: 0.9rem;
    resize: vertical;
}

.zap-escrita textarea::placeholder { color: var(--zap-secundario); opacity: 0.85; }
.zap-escrita textarea:focus { outline: 2px solid var(--zap-cabecalho); outline-offset: -1px; }

.chat-acoes {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 0.45rem;
}

.chat-acoes .linha-check { margin-right: auto; color: var(--zap-secundario); font-size: 0.83rem; }

.zap-enviar {
    border: 0;
    border-radius: 20px;
    padding: 0.45rem 1.1rem;
    background: var(--zap-cabecalho);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.zap-enviar:hover { filter: brightness(1.08); }
.zap-enviar.nota { background: #b8860b; }

/* rodape de acoes --------------------------------------------- */

.chat-encerramento {
    background: var(--zap-barra);
    border-top: 1px solid var(--zap-borda);
    padding: 0.6rem 0.7rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.chat-encerramento small { flex: 1 1 240px; color: var(--zap-secundario); font-size: 0.76rem; line-height: 1.4; }

.chat-encerramento .btn,
.chat-encerramento summary {
    background: #fff;
    color: var(--zap-texto);
    border: 1px solid var(--zap-borda);
}

.chat-encerramento .acao-inline-form {
    background: #fff;
    border-color: var(--zap-borda);
}

.chat-encerramento input,
.chat-encerramento select {
    background: #fff;
    color: var(--zap-texto);
    border: 1px solid var(--zap-borda);
}

.linha-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }

/* copiloto do atendente --------------------------------------- */

/* Visualmente distante do balão enviado, e de propósito: é rascunho, não
   mensagem. Confundir os dois faria o atendente achar que já respondeu. */
.msg-copiloto { align-self: flex-start; max-width: 88%; }

.msg-copiloto .msg-texto {
    background: #eef6ff;
    border: 1px solid #bcd8f5;
    color: #123a5e;
    font-size: 0.86rem;
    box-shadow: none;
}

.msg-copiloto .msg-quem { color: #1d6fb8; }
.msg-copiloto .msg-hora { color: #6b8fae; }

.copiloto-fontes {
    font-size: 0.72rem;
    color: var(--zap-secundario);
    margin: 0.2rem 0 0 0.2rem;
}

.btn-usar {
    margin: 0.3rem 0 0 0.2rem;
    border: 1px solid #bcd8f5;
    background: #fff;
    color: #1d6fb8;
    border-radius: 14px;
    padding: 0.2rem 0.7rem;
    font-size: 0.76rem;
    cursor: pointer;
}

.btn-usar:hover { background: #1d6fb8; color: #fff; }


/* -----------------------------------------------------------------
   Abas de formulario
   Para o cadastro que nao cabe numa tela — o de agente tem 22 campos.
   As secoes ja existiam como titulos; virar aba so troca "rolar" por
   "escolher", sem reagrupar nada.
   ----------------------------------------------------------------- */
.form-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1.1rem;
    border-bottom: 1px solid var(--border);
}

.form-aba-btn {
    padding: 0.5rem 0.85rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    /* -1px cola a borda de baixo do botao na borda do contentor, senao a aba
       ativa fica flutuando um pixel acima da linha. */
    margin-bottom: -1px;
}

.form-aba-btn:hover { color: var(--text); }

.form-aba-btn.ativa {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Aba que contem campo invalido. Sem isto, o navegador tenta focar um campo
   escondido, nao mostra mensagem nenhuma e o botao Salvar parece quebrado. */
.form-aba-btn.com-erro {
    color: var(--danger);
    border-bottom-color: var(--danger);
}


/* ============================================================
   TEMA CLARO
   ============================================================
   O `admin.css` define tudo por variavel e tem apenas seis cores
   fixas fora do `:root` — por isso o tema inteiro cabe aqui, sem
   tocar naquele arquivo, que segue byte a byte igual ao da base
   institucional.

   NAO redefine `--accent`, `--accent-2` nem `--on-accent`: o
   `head.php` injeta os tres num `<style>` depois destas folhas,
   com as cores que o cliente escolheu em Configuracoes. Mexer
   aqui seria escrever algo que perde a disputa de qualquer jeito.

   `--success`, `--danger` e `--warning` escurecem: os tons
   originais foram escolhidos para brilhar sobre fundo preto e
   reprovam em contraste sobre branco.
   ============================================================ */

:root {
    --bg: #f5f6f8;
    --bg-elevated: #ffffff;
    --bg-elevated-2: #f0f2f5;
    --border: #dde1e8;
    --text: #1b1f27;
    --text-muted: #5a6472;
    --shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
    --success: #1a7f4b;
    --danger: #c22f4c;
    --warning: #9a6100;
}

/* A barra lateral continua escura.
   As variaveis sao redeclaradas NELA, e propriedades customizadas descem para
   os filhos — entao o menu inteiro, os grupos e o rodape herdam o tema escuro
   sem uma regra sequer por elemento. */
.admin-sidebar {
    --bg: #12141a;
    --bg-elevated: #171a21;
    --bg-elevated-2: #1e222b;
    --border: #2a2f3a;
    --text: #eef0f4;
    --text-muted: #9aa1b1;
    color: var(--text);
}

/* A ilha clara do atendimento deixa de ser ilha.
   As variaveis `--zap-*` continuam: o verde e o bege sao a identidade que faz
   o atendente reconhecer a tela sem treinamento. O que sai e o contraste
   artificial de um bloco claro cravado num painel preto. */
.zap { box-shadow: none; }


/* ============================================================
   MENU RECOLHIDO (desktop)
   ============================================================
   So os icones, para devolver largura ao conteudo. Nasceu da tela
   de atendimento, onde cada pixel a mais e uma linha a menos de
   conversa visivel.

   A classe fica no <html> e nao no <body> ou na barra: e o unico
   elemento que existe antes de o CSS pintar, o que permite ao
   script do <head> aplicar o estado salvo SEM piscar a barra
   larga por um quadro.

   Acima de 900px apenas. Abaixo disso a barra ja e off-canvas
   (`.open`), e um terceiro estado la seria um modo escondido
   dentro de outro.
   ============================================================ */

@media (min-width: 901px) {
    html.menu-recolhido { --sidebar-w: 64px; }

    html.menu-recolhido .admin-sidebar { padding: 1.5rem 0.6rem; }

    /* Rotulo, titulo de grupo e rodape somem. O icone fica, centralizado. */
    html.menu-recolhido .admin-nav a span:not(.icon):not(.nav-badge),
    html.menu-recolhido .admin-nav-grupo,
    html.menu-recolhido .admin-brand span,
    html.menu-recolhido .admin-sidebar-footer {
        display: none;
    }

    html.menu-recolhido .admin-nav a {
        justify-content: center;
        padding: 0.65rem 0;
        position: relative;
    }

    /* O contador nao pode sumir junto: e ele que avisa que ha gente
       esperando, e essa e a informacao que menos pode se esconder. */
    html.menu-recolhido .nav-badge {
        position: absolute;
        top: 0.15rem;
        right: 0.4rem;
        font-size: 0.62rem;
        padding: 0 0.28rem;
        min-width: auto;
    }

    html.menu-recolhido .admin-brand { justify-content: center; }

    /* Aperta a faixa para ela raramente precisar rolar.
       Sem os rotulos e sem os titulos de grupo, o que sobra e uma coluna de
       icones — e ai a folga generosa do menu largo vira altura desperdicada. */
    html.menu-recolhido .admin-sidebar { gap: 0.9rem; }
    html.menu-recolhido .admin-nav { gap: 0.1rem; }

    /* A BARRA DE ROLAGEM SOME, a rolagem fica.
       Numa faixa de 64px a barra ocupa cerca de 15px: um quarto da largura,
       sobre um icone que tem 20. A roda do mouse, o teclado e o foco continuam
       rolando normalmente — o que sai e a barra, nao a capacidade. */
    html.menu-recolhido .admin-nav {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html.menu-recolhido .admin-nav::-webkit-scrollbar { width: 0; height: 0; }
}

.btn-recolher {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
}

.btn-recolher:hover { color: var(--text); background: var(--bg-elevated-2); }

/* No modo recolhido o botao vira o unico item da linha da marca. */
html.menu-recolhido .btn-recolher { margin: 0; }

/* Escondido no mobile: la quem abre e fecha e o botao da barra do topo. */
@media (max-width: 900px) {
    .btn-recolher { display: none; }
}


/* ============================================================
   LISTA DE CONVERSAS (tela de atendimento)
   ============================================================
   Por PESSOA, nao por registro. A lista antiga mostrava "#131" e
   "12 msgs" — numero de linha de banco e contagem, nenhum dos
   dois ajuda a decidir o que atender primeiro.
   ============================================================ */

.lista-conversas { overflow-y: auto; max-height: 78vh; }

.conversa-lista,
.plantao-lista {
    list-style: none;
    margin: 0 0 0.6rem;
    padding: 0;
}

.conversa-lista > li { border-bottom: 1px solid var(--border); }
.conversa-lista > li:last-child { border-bottom: 0; }

/* O <a> e o <button> ficam sem aparencia propria: quem desenha a linha e o
   `.conversa-linha` dentro deles, para as tres listas ficarem identicas
   independentemente de a acao ser navegar ou assumir. */
.conversa-lista a,
.conversa-botao {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
}

.conversa-form { margin: 0; }

.conversa-linha {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.4rem;
    border-radius: var(--radius-sm);
}

.conversa-lista a:hover .conversa-linha,
.conversa-botao:hover .conversa-linha { background: var(--bg-elevated-2); }

.conversa-linha.ativa { background: var(--bg-elevated-2); }

.conversa-avatar {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* `min-width: 0` para o texto poder encolher: sem isto o flex se recusa a
   reduzir o filho abaixo do conteudo e a previa empurra a coluna inteira. */
.conversa-corpo { flex: 1; min-width: 0; display: block; }

.conversa-topo {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.conversa-nome {
    flex: 1;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversa-quando {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.conversa-previa {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conversa-marcas {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.conversa-acao {
    display: block;
    padding: 0 0.4rem 0.5rem 3.1rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
}

.plantao-lista > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    font-size: 0.84rem;
}

/* Avatar de iniciais no cabecalho da conversa aberta. O emoji generico que
   estava ali era o mesmo em todas, e nao dizia com quem se esta falando. */
.zap-avatar-iniciais { width: 40px; height: 40px; font-size: 0.85rem; }

.zap-contato { color: var(--zap-secundario); }


/* ============================================================
   CABECALHO DA TELA DE ATENDIMENTO
   ============================================================
   Titulo e interruptor de disponibilidade na mesma linha. Antes o
   interruptor tinha um cartao so para ele, com tres linhas de
   ajuda — e nesta tela cada centimetro vertical e uma linha de
   conversa que deixa de aparecer.
   ============================================================ */

.atendimento-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.atendimento-cabeca h1 { margin: 0; }
.atendimento-presenca { margin: 0; }

/* Respiro entre as tres listas.
   "Esperando" e "Meus atendimentos" estavam colados, e a fila e justamente a
   parte que precisa saltar aos olhos. */
.lista-conversas .secao-form {
    margin: 1.4rem 0 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* O titulo da fila nao leva borda: e o primeiro, e uma linha acima dele so
   separaria do nada. */
.lista-conversas > .card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

/* A CONVERSA OCUPA A ALTURA DISPONIVEL.
   Altura fixa em `vh` desperdicava tela em monitor alto e cortava em tela
   baixa. `calc` desconta o cabecalho da pagina e as margens, e o corpo da
   conversa fica com o resto. */
.atendimento-grade { align-items: stretch; }

.zap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 11rem);
    min-height: 420px;
}

.zap-corpo { max-height: none; flex: 1 1 auto; }

.lista-conversas { max-height: calc(100vh - 11rem); }