/* =================================================================
   CHAT — conversa entre pessoas e com os agentes de IA
   =================================================================

   Este arquivo é carregado em TODA página (o widget flutuante vive no
   body.html). Duas regras que vêm disso:

   1. TUDO tem o prefixo `chat-`. Nenhum seletor de elemento solto, nenhuma
      classe genérica: uma regra em `button` ou `.item` daqui pintaria a
      intranet inteira.
   2. NENHUMA COR FIXA. Só as variáveis do tema (--accent, --card-bg,
      --text-primary...), que trocam junto com a BU ativa. Ver PADRAO_VISUAL.md
      seção 4. As únicas exceções estão declaradas como variáveis próprias
      abaixo, com o porquê.

   O ÍCONE do menu lateral (.ni-chat) também está aqui, no fim, e não no
   style.css: módulo novo não mexe no arquivo compartilhado.
   ================================================================= */

.page-chat,
.chat-widget {
    /* O vermelho do badge é o único tom que NÃO segue a BU: ele significa
       "alguém falou com você e você não viu". Se acompanhasse o tema, numa BU de
       paleta vermelha o aviso desapareceria dentro do próprio visual — e numa BU
       verde, um aviso verde não é aviso. */
    --chat-alerta: #c0392b;
    --chat-alerta-texto: #ffffff;
    /* A bolha de quem escreveu. A minha usa a cor da BU; a do outro usa o fundo
       de card. É o par mínimo para distinguir os dois lados sem legenda. */
    --chat-minha-bg: var(--accent);
    --chat-minha-texto: #ffffff;
    --chat-outra-bg: var(--column-bg, #f2f3f5);
    --chat-ia: #6b46c1; /* o pontinho e a marca "IA": violeta, fora da paleta da
                           BU de propósito — é o que diz "isto não é uma pessoa"
                           em qualquer tema. */
}

/* -----------------------------------------------------------------
   O atributo `hidden` tem de VENCER as classes deste arquivo
   -----------------------------------------------------------------

   O chat.js esconde e mostra tudo com `elemento.hidden = true/false`.
   Só que o navegador aplica o `hidden` como `[hidden] { display: none }`
   na folha de estilo PADRAO dele, e essa regra tem especificidade menor
   que QUALQUER classe. Como aqui varias classes declaram `display: flex`
   (.chat-painel, .chat-shell, .chat-lista, .chat-conversa...), o
   `display: flex` da classe ganhava do `display: none` do navegador — e o
   elemento continuava na tela mesmo "escondido".

   Era isso que fazia o painel do chat nascer ABERTO e VAZIO em toda
   pagina: o JS o marcava como hidden, o CSS o mostrava assim mesmo, e o
   conteudo so era carregado no primeiro clique do botao (que o JS
   entendia como "abrir").

   O seletor abaixo e restrito a classes com prefixo `chat-` de proposito:
   a regra 1 no topo deste arquivo proibe seletor generico, porque este CSS
   e carregado em TODA pagina e um `[hidden]` solto mudaria o comportamento
   de outros modulos.
   ----------------------------------------------------------------- */

[class^="chat-"][hidden],
[class*=" chat-"][hidden] {
    display: none !important;
}

/* =================================================================
   O ESQUELETO DA CONVERSA (compartilhado pelo painel e pela tela cheia)
   ================================================================= */

.chat-shell {
    display: flex;
    min-height: 0; /* sem isto o flex filho não encolhe e a lista de bolhas
                      empurra o rodapé de escrever para fora da tela */
    height: 100%;
    background: var(--card-bg, #fff);
    color: var(--text-primary);
    font-family: var(--font-body);
}

/* ─── a barra lateral (lista de conversas) ───────────────────────── */

.chat-lista {
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 268px;
    flex: 0 0 268px;
    border-right: 1px solid var(--card-border);
}

.chat-lista-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--card-border);
}

.chat-busca {
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 6px;
}

.chat-busca:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-lista-itens {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain; /* rolar até o fim da lista não puxa a página */
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.chat-item:hover {
    background: var(--column-bg, #f6f7f9);
}

.chat-item.chat-item-ativo {
    background: var(--column-bg, #f0f2f6);
    /* A barra na cor da BU, e não um fundo mais escuro: o fundo escuro brigava
       com o realce de hover e ficava impossível saber qual estava aberta. */
    box-shadow: inset 3px 0 0 var(--accent);
}

.chat-item-meio {
    flex: 1 1 auto;
    min-width: 0; /* deixa o text-overflow funcionar dentro do flex */
}

.chat-item-nome {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-previa {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.chat-item-dir {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
}

.chat-item-quando {
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.chat-item-naolidas {
    min-width: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--chat-alerta-texto);
    background: var(--chat-alerta);
    border-radius: 9px;
}

/* ─── avatar ─────────────────────────────────────────────────────── */

.chat-av {
    flex: 0 0 auto;
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--text-secondary); /* trocado inline pela cor da pessoa */
    user-select: none;
}

.chat-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-av-sm {
    width: 26px;
    height: 26px;
    font-size: 10px;
}

.chat-av-lg {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

/* A marca "IA" e o pontinho de estado. Ficam FORA do .chat-av (que tem
   overflow:hidden por causa da foto redonda) — dentro, seriam cortados. */
.chat-av-wrap {
    position: relative;
    flex: 0 0 auto;
    line-height: 0;
}

.chat-ponto {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--card-bg, #fff);
    background: var(--text-secondary);
}

.chat-ponto[data-estado="pronto"],
.chat-ponto[data-estado="dormindo"] {
    background: var(--chat-ia);
}

.chat-ponto[data-estado="pensando"] {
    background: var(--accent);
}

.chat-ponto[data-estado="ferias"] {
    background: var(--text-secondary);
}

.chat-selo-ia {
    flex: 0 0 auto;
    padding: 1px 5px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.5;
    color: #fff;
    background: var(--chat-ia);
    border-radius: 3px;
}

/* ─── o painel da conversa ───────────────────────────────────────── */

.chat-conversa {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-conversa-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--card-border);
    background: var(--card-bg, #fff);
}

.chat-voltar {
    display: none; /* só aparece no painel estreito (uma coluna) */
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.chat-voltar:hover {
    background: var(--column-bg, #f0f2f6);
    color: var(--text-primary);
}

.chat-cab-nome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.chat-cab-papel {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.3;
}

/* ─── as bolhas ──────────────────────────────────────────────────── */

.chat-bolhas {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 14px 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg, #fafbfc);
}

.chat-dia {
    align-self: center;
    margin: 6px 0;
    padding: 2px 10px;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 10px;
}

.chat-linha {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.chat-linha-minha {
    flex-direction: row-reverse;
}

.chat-bolha {
    position: relative;
    max-width: min(72%, 560px);
    padding: 7px 11px 5px;
    border-radius: 12px;
    background: var(--chat-outra-bg);
    border: 1px solid var(--card-border);
}

.chat-linha-minha .chat-bolha {
    background: var(--chat-minha-bg);
    border-color: transparent;
    color: var(--chat-minha-texto);
}

.chat-bolha-autor {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--accent-dark, var(--accent));
    margin-bottom: 1px;
}

.chat-bolha-corpo {
    font-size: 13.5px;
    line-height: 1.5;
    /* pre-wrap é o que faz a quebra de linha aparecer SEM o Go transformar "\n"
       em "<br>". É o par do textContent no chat.js: nenhum HTML é montado a
       partir do que a pessoa digitou. Ver model/chat/tela.go. */
    white-space: pre-wrap;
    overflow-wrap: anywhere; /* uma URL longa não estica a bolha até fora da tela */
}

.chat-bolha-apagada {
    font-style: italic;
    color: var(--text-secondary);
}

.chat-linha-minha .chat-bolha-apagada {
    color: rgba(255, 255, 255, 0.75);
}

.chat-bolha-pe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    font-size: 10.5px;
    color: var(--text-secondary);
}

.chat-linha-minha .chat-bolha-pe {
    color: rgba(255, 255, 255, 0.8);
}

.chat-apagar {
    padding: 0;
    font: inherit;
    font-size: 10.5px;
    color: inherit;
    background: none;
    border: none;
    /* Só aparece no hover da bolha: um "apagar" visível em toda mensagem
       convida ao clique errado num lugar onde não há desfazer. */
    opacity: 0;
    cursor: pointer;
    text-decoration: underline;
}

.chat-bolha:hover .chat-apagar,
.chat-apagar:focus-visible {
    opacity: 1;
}

/* enviando: a bolha entra na tela na hora e só depois é confirmada pelo
   servidor. Sem isto, escrever numa conexão lenta parece não ter funcionado. */
.chat-linha-enviando .chat-bolha {
    opacity: 0.55;
}

.chat-linha-falhou .chat-bolha {
    opacity: 1;
    border: 1px solid var(--chat-alerta);
}

.chat-escrevendo {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 14px 8px;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg, #fafbfc);
}

.chat-escrevendo-pontos {
    display: inline-flex;
    gap: 3px;
}

.chat-escrevendo-pontos i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--chat-ia);
    animation: chat-pulsa 1.1s infinite ease-in-out;
}

.chat-escrevendo-pontos i:nth-child(2) { animation-delay: 0.18s; }
.chat-escrevendo-pontos i:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-pulsa {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30%           { opacity: 1;    transform: translateY(-3px); }
}

/* Respeita quem pediu menos animação no sistema. */
@media (prefers-reduced-motion: reduce) {
    .chat-escrevendo-pontos i { animation: none; opacity: 0.7; }
}

/* ─── escrever ───────────────────────────────────────────────────── */

.chat-envio {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--card-border);
    background: var(--card-bg, #fff);
}

.chat-texto {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 132px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-primary);
    background: var(--bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    resize: none; /* a altura cresce sozinha (o JS mede o conteúdo) */
}

.chat-texto:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-texto:disabled {
    background: var(--column-bg, #f0f2f6);
    cursor: not-allowed;
}

.chat-enviar {
    flex: 0 0 auto;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.chat-enviar:hover:not(:disabled) {
    background: var(--accent-dark, var(--accent));
}

.chat-enviar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat-dica {
    padding: 0 12px 8px;
    font-size: 10.5px;
    color: var(--text-secondary);
    background: var(--card-bg, #fff);
}

/* ─── estados vazio / erro ───────────────────────────────────────── */

.chat-nenhuma,
.chat-vazio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 26px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.chat-vazio-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-aviso {
    margin: 0;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--chat-alerta);
    background: color-mix(in srgb, var(--chat-alerta) 8%, transparent);
    border-bottom: 1px solid var(--card-border);
}

/* Reserva para navegador sem color-mix: fundo neutro em vez de nenhum. */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
    .chat-aviso { background: var(--column-bg, #f6f7f9); }
}

/* =================================================================
   A TELA CHEIA (/chat)
   ================================================================= */

.chat-cheio {
    display: flex;
    /* 100vh menos o cabeçalho da página. A altura fixa é o que permite as duas
       colunas rolarem por dentro em vez de a página inteira rolar — num chat,
       o campo de escrever tem de ficar sempre visível. */
    height: min(72vh, 720px);
    min-height: 380px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: var(--card-bg, #fff);
}

.chat-cheio .chat-shell {
    width: 100%;
}

/* =================================================================
   O WIDGET FLUTUANTE (em toda página)
   ================================================================= */

.chat-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    /* z-index 60: acima do cartão do rosto do Painel de agentes (40) e abaixo
       dos modais dos módulos (100000+) e da confirmação do main.js (100010).
       O chat não pode cobrir uma confirmação de exclusão. */
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    font-family: var(--font-body);
}

.chat-botao {
    position: relative;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 4px 14px rgba(26, 31, 46, 0.28);
    cursor: pointer;
    /* order 2: o botão fica ABAIXO do painel na coluna, então o painel abre
         para cima a partir dele. */
    order: 2;
}

.chat-botao:hover {
    background: var(--accent-dark, var(--accent));
}

.chat-botao-icone {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    background: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.9 8.9 0 0 1-3.8-.8L3 21l1.9-5.4A8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.9 8.9 0 0 1-3.8-.8L3 21l1.9-5.4A8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* O BADGE VERMELHO — o pedido explícito: "quando um usuário recebe mensagem de
   outro fica um badge vermelho no ícone de chat". */
.chat-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    color: var(--chat-alerta-texto);
    background: var(--chat-alerta);
    border: 2px solid var(--bg, #fff);
    border-radius: 10px;
}

.chat-painel {
    order: 1;
    display: flex;
    flex-direction: column;
    width: min(384px, calc(100vw - 44px));
    height: min(540px, calc(100vh - 118px));
    overflow: hidden;
    background: var(--card-bg, #fff);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 14px 44px rgba(26, 31, 46, 0.26);
}

.chat-painel-topo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 8px 12px;
    background: var(--accent);
    color: #fff;
}

.chat-painel-titulo {
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
}

.chat-painel-acao {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.chat-painel-acao:hover {
    background: rgba(255, 255, 255, 0.18);
}

.chat-painel-corpo {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.chat-painel-corpo .chat-shell {
    width: 100%;
}

/* No painel estreito o desenho é de UMA coluna: a lista OU a conversa, com o
   botão de voltar. Duas colunas de 130px cada não servem para nada. */
.chat-painel-corpo .chat-lista {
    width: 100%;
    flex: 1 1 auto;
    border-right: none;
}

.chat-painel-corpo .chat-voltar {
    display: block;
}

.chat-painel-corpo .chat-shell[data-modo="lista"] .chat-conversa,
.chat-painel-corpo .chat-shell[data-modo="lista"] .chat-nenhuma {
    display: none;
}

.chat-painel-corpo .chat-shell[data-modo="conversa"] .chat-lista {
    display: none;
}

.chat-painel-corpo .chat-bolha {
    max-width: 86%;
}

/* Telas estreitas: a tela cheia também vira uma coluna. */
@media (max-width: 720px) {
    .chat-cheio .chat-voltar { display: block; }
    .chat-cheio .chat-lista { width: 100%; flex: 1 1 auto; border-right: none; }
    .chat-cheio .chat-shell[data-modo="lista"] .chat-conversa,
    .chat-cheio .chat-shell[data-modo="lista"] .chat-nenhuma { display: none; }
    .chat-cheio .chat-shell[data-modo="conversa"] .chat-lista { display: none; }
    .chat-widget { right: 14px; bottom: 14px; }
}

/* =================================================================
   O ÍCONE DO MENU LATERAL
   ================================================================= */

.ni-chat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.9 8.9 0 0 1-3.8-.8L3 21l1.9-5.4A8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-8.5 8.4 8.9 8.9 0 0 1-3.8-.8L3 21l1.9-5.4A8.4 8.4 0 0 1 12.5 3 8.4 8.4 0 0 1 21 11.5z'/%3E%3C/svg%3E");
}

/* Titulo de grupo da lista (Conversas / Agentes de IA / Pessoas). Existe para
   a pessoa distinguir "conversa que eu tenho" de "gente que eu posso procurar":
   sem ele, as duas coisas viravam uma lista unica, identica em todas as contas,
   e passava a impressao de que todos viam a conversa de todos. */
.chat-grupo {
    padding: 10px 12px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* ─── [18/09/2026] "+" e a gaveta de contatos ────────────────────────────────
   A barra lateral passou a mostrar só conversa já iniciada; quem quer falar com
   alguém novo abre esta gaveta. */
.chat-lista-topo { display: flex; align-items: center; gap: 6px; }
.chat-nova-btn { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text-secondary);
  font-size: 17px; line-height: 1; }
.chat-nova-btn:hover { border-color: var(--accent); color: var(--accent-dark); }
.chat-contatos { border-bottom: 1px solid var(--card-border); padding: 8px; max-height: 320px;
  overflow-y: auto; background: var(--bg); }
.chat-contatos-titulo { font-family: var(--font-mono, monospace); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-secondary); padding: 2px 4px 6px; }
.chat-contatos-vazio { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; padding: 4px; }
.chat-contatos-busca { width: 100%; margin-bottom: 6px; padding: 6px 8px; font-size: 12px;
  border: 1px solid var(--card-border); border-radius: 7px; background: var(--card-bg); }
.chat-contato { width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer; text-align: left; }
.chat-contato:hover { background: var(--card-bg); }
.chat-contato-av { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700;
  background-size: cover; background-position: center; }
.chat-contato-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-contato-txt b { font-size: 12.5px; color: var(--text-primary); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.chat-contato-papel { font-size: 10.5px; color: var(--text-secondary); }

/* ─── [24/09/2026] As abas do painel: Chat e WhatsApp ───────────────────────
   O painel flutuante passou a servir DUAS caixas. A pilha é vertical (abas em
   cima, a caixa aberta embaixo) e cada caixa tem o mesmo shell de conversa — o
   `.chat-painel-corpo` continua em `display:flex`, então quem empilha é o
   `.chat-abas-pilha`, com `min-height:0` para a lista de bolhas rolar por
   dentro em vez de empurrar o campo de escrever para fora. */
.chat-abas-pilha { flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%;
  display: flex; flex-direction: column; }
.chat-abas { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--card-border);
  background: var(--bg); }
.chat-aba { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; background: transparent;
  cursor: pointer; font-family: var(--font-body); font-size: 11px; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-secondary); }
.chat-aba:hover { color: var(--text-primary); }
.chat-aba.is-on { color: var(--accent-dark, var(--accent)); border-bottom-color: var(--accent); }
.chat-aba-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #c0392b;
  color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0; }
.chat-aba-corpo { flex: 1 1 auto; min-height: 0; display: flex; }

/* O arquivo de uma mensagem de WhatsApp no painel.
   Imagem e figurinha aparecem desenhadas; áudio, vídeo e documento continuam
   como link para a tela cheia — ver `montarAnexo` no chat.js. */
.chat-anexo { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600;
  color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Com imagem o link deixa de parecer link: quem manda no visual é a foto.
   200px é o que cabe numa bolha do painel (384px de largura) sem espremer o
   texto que vem junto. `cursor: zoom-in` avisa que clicar abre a inteira. */
.chat-anexo-imagem { text-decoration: none; line-height: 0; cursor: zoom-in; }
.chat-anexo-imagem img { display: block; max-width: 200px; max-height: 200px;
  width: auto; height: auto; border-radius: 6px; background: rgba(0, 0, 0, .06); }

/* A figurinha é um emoji grande, não uma foto: menor, e com o recorte
   preservado — um fundo cinza atrás dela estragaria justamente o recorte. */
.chat-anexo-figurinha img { max-width: 110px; max-height: 110px;
  object-fit: contain; background: none; border-radius: 0; }