/*
 * Temas do chat do operador — public/css/temas-chat.css
 *
 * Carlos (29/09/2026): "um tema espelho do WhatsApp para ser usado no chat". Spec:
 * docs/specs/2026-09-29-tema-whatsapp-entrada-chat-pwa-design.md §3.
 * Frente V (Carlos, 30/09): "quero que toda a janela, todo o chat aberto em nova aba, seja muito parecido com
 * WhatsApp", com os modos claro e escuro dele. Brief: ~/ide/conversio-f3/briefs-w/V-brief.md. Só visual: nenhuma
 * função, rótulo ou rota muda — o que muda é cor, medida, fonte e posição.
 *
 * COMO FUNCIONA
 * - O servidor escreve <html data-tema="conversio|whatsapp"> (TemaDoChat::efetivo). O modo escuro é a classe
 *   `dark` no <html>, a mesma que o painel já usa.
 * - Tema CONVERSIO: não tem regra aqui. A tela continua com as classes do Tailwind de sempre — é o que garante
 *   que quem não escolhe o WhatsApp não vê diferença nenhuma. O TemasCssTest confere que TODA regra deste arquivo
 *   começa por html[data-tema="whatsapp"] (ou html.dark[…]).
 * - Tema WHATSAPP: os elementos estruturais da tela têm classes-gancho (chat-lista, chat-balao-enviado…). As
 *   regras abaixo só valem dentro de html[data-tema="whatsapp"] e usam os TOKENS (--chat-*).
 *   Especificidade: `html[data-tema] .gancho` = (0,2,1), maior que as utilitárias do Tailwind, inclusive
 *   `.dark .dark:bg-…` (0,2,0) e `.hover:bg-…:hover` (0,2,0). Por isso não há !important.
 * - O que só existe no tema WhatsApp (o trilho da janela, o botão claro/escuro do celular, a marca no vazio) nasce
 *   com a classe `hidden` na marcação e só é mostrado aqui. Trocar de tema na paleta troca o atributo na hora, e o
 *   CSS acompanha sem recarregar.
 *
 * PARA MEXER
 * - Cor nova: crie o token nas DUAS variantes (claro e escuro) e use var(--token) na regra.
 *   O teste testing_hub/suite/Unit/TemasCssTest.php confere os tokens e que cada gancho da tela tem regra aqui.
 * - Tema novo: um bloco html[data-tema="novo"] (+ o .dark) e a entrada em App\Services\Chat\TemaDoChat::TEMAS.
 * - Cores de referência: WhatsApp Web (set/2026). O papel de parede é um desenho PRÓPRIO do Conversio (fones,
 *   telefone, balões, envelope, tíquete, relógio…) — a arte original do WhatsApp é deles (direito autoral) e não
 *   é copiada, nem o logotipo.
 * - Contraste (medido na frente V, WCAG AA 4,5:1 para texto): onde a cor do WhatsApp Web não passa, há um token
 *   "forte" ao lado (ex.: --chat-destaque-forte para texto/botão verde no claro). Os números estão no V-report.
 */

/* ── Tokens: WhatsApp claro ─────────────────────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] {
    --chat-app-fundo: #f0f2f5;
    --chat-trilho-fundo: #f0f2f5;
    --chat-painel: #ffffff;
    --chat-fundo: #ffffff;
    --chat-papel-parede: #efeae2;
    --chat-papel-parede-desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d8d0c2' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40v-6a14 14 0 0 1 28 0v6'/%3E%3Crect x='16' y='38' width='7' height='11' rx='2'/%3E%3Crect x='45' y='38' width='7' height='11' rx='2'/%3E%3Cpath d='M48 49c0 5-4 7-10 7'/%3E%3Cpath d='M124 30c2-2 5-2 6 0l4 5c1 2 0 4-2 5l-2 1c2 5 6 9 11 11l1-2c1-2 3-3 5-2l5 4c2 1 2 4 0 6l-3 3c-3 3-12 0-19-7s-10-16-7-19z'/%3E%3Cpath d='M72 92h28a6 6 0 0 1 6 6v13a6 6 0 0 1-6 6H86l-8 7v-7h-6a6 6 0 0 1-6-6V98a6 6 0 0 1 6-6z'/%3E%3Cpath d='M79 104.5h.01M86 104.5h.01M93 104.5h.01' stroke-width='2.4'/%3E%3Crect x='140' y='108' width='32' height='22' rx='3'/%3E%3Cpath d='M141 110l15 11 15-11'/%3E%3Cpath d='M14 132l5 5 10-11M26 136l2 2 10-11'/%3E%3Ccircle cx='46' cy='174' r='10'/%3E%3Cpath d='M46 168v6l4 3'/%3E%3Cpath d='M100 160h34v7a4 4 0 0 0 0 8v7h-34v-7a4 4 0 0 0 0-8z'/%3E%3Cpath d='M122 161v3M122 169v3M122 177v3'/%3E%3Cpath d='M178 52l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1z'/%3E%3Cpath d='M92 30l-11 11a4 4 0 0 0 6 6l12-12a6 6 0 0 0-9-9L78 38'/%3E%3Cpath d='M170 160v8M166 164h8M104 62v6M101 65h6M60 106h.01M180 96h.01M150 180h.01M12 80h.01' /%3E%3C/g%3E%3C/svg%3E");
    --chat-cabecalho-fundo: #f0f2f5;
    --chat-cabecalho-texto: #111b21;
    --chat-balao-enviado: #d9fdd3;
    --chat-balao-enviado-texto: #111b21;
    --chat-balao-recebido: #ffffff;
    --chat-balao-recebido-texto: #111b21;
    --chat-meta-texto: #667781;
    --chat-check: #667781;
    --chat-check-lido: #027eb5;          /* o #53bdeb do WhatsApp some no verde claro (1,9:1); este dá 4,6:1 no #d9fdd3 */
    --chat-barra-envio-fundo: #f0f2f5;
    --chat-campo-fundo: #ffffff;
    --chat-lista-fundo: #ffffff;
    --chat-lista-selecionada: #f0f2f5;
    --chat-lista-hover: #f5f6f6;
    --chat-destaque: #00a884;
    --chat-destaque-forte: #017561;      /* texto e botão verdes: #00a884 no branco dá 3,0:1; este, 5,0:1 até no #f0f2f5 */
    --chat-sobre-destaque: #ffffff;
    --chat-borda: #e9edef;
    --chat-texto: #111b21;
    --chat-texto-secundario: #667781;
    --chat-texto-secundario-forte: #54656f; /* o #667781 sobre o cinza (#f0f2f5/#f5f6f6) dá 4,1–4,3:1; este, 5,4:1 */
    --chat-meta-enviado: #54656f;        /* hora no balão verde claro: #667781 dá 4,2:1; este, 5,5:1 */
    --chat-icone: #54656f;
    --chat-selo-fundo: #25d366;
    --chat-selo-texto: #111b21;          /* branco no #25d366 dá 2,0:1 (reprova); o quase-preto dá 10,5:1 */
    --chat-sistema-fundo: #ffffff;
    --chat-sistema-texto: #54656f;
    --chat-nota-fundo: #fff3c4;
    --chat-nota-texto: #5c4400;
    --chat-nota-borda: #d9b44a;
    --chat-foco: #017561;
    --chat-menu-fundo: #ffffff;
    --chat-sombra: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    --chat-sombra-menu: 0 2px 5px rgba(11, 20, 26, 0.26), 0 2px 10px rgba(11, 20, 26, 0.16);
}

/* ── Tokens: WhatsApp escuro ────────────────────────────────────────────────────────────────────────── */
html.dark[data-tema="whatsapp"] {
    --chat-app-fundo: #0c1317;
    --chat-trilho-fundo: #202c33;
    --chat-painel: #111b21;
    --chat-fundo: #111b21;
    --chat-papel-parede: #0b141a;
    --chat-papel-parede-desenho: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23172229' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 40v-6a14 14 0 0 1 28 0v6'/%3E%3Crect x='16' y='38' width='7' height='11' rx='2'/%3E%3Crect x='45' y='38' width='7' height='11' rx='2'/%3E%3Cpath d='M48 49c0 5-4 7-10 7'/%3E%3Cpath d='M124 30c2-2 5-2 6 0l4 5c1 2 0 4-2 5l-2 1c2 5 6 9 11 11l1-2c1-2 3-3 5-2l5 4c2 1 2 4 0 6l-3 3c-3 3-12 0-19-7s-10-16-7-19z'/%3E%3Cpath d='M72 92h28a6 6 0 0 1 6 6v13a6 6 0 0 1-6 6H86l-8 7v-7h-6a6 6 0 0 1-6-6V98a6 6 0 0 1 6-6z'/%3E%3Cpath d='M79 104.5h.01M86 104.5h.01M93 104.5h.01' stroke-width='2.4'/%3E%3Crect x='140' y='108' width='32' height='22' rx='3'/%3E%3Cpath d='M141 110l15 11 15-11'/%3E%3Cpath d='M14 132l5 5 10-11M26 136l2 2 10-11'/%3E%3Ccircle cx='46' cy='174' r='10'/%3E%3Cpath d='M46 168v6l4 3'/%3E%3Cpath d='M100 160h34v7a4 4 0 0 0 0 8v7h-34v-7a4 4 0 0 0 0-8z'/%3E%3Cpath d='M122 161v3M122 169v3M122 177v3'/%3E%3Cpath d='M178 52l3 6 6 1-4.5 4 1 6-5.5-3-5.5 3 1-6-4.5-4 6-1z'/%3E%3Cpath d='M92 30l-11 11a4 4 0 0 0 6 6l12-12a6 6 0 0 0-9-9L78 38'/%3E%3Cpath d='M170 160v8M166 164h8M104 62v6M101 65h6M60 106h.01M180 96h.01M150 180h.01M12 80h.01' /%3E%3C/g%3E%3C/svg%3E");
    --chat-cabecalho-fundo: #202c33;
    --chat-cabecalho-texto: #e9edef;
    --chat-balao-enviado: #005c4b;
    --chat-balao-enviado-texto: #e9edef;
    --chat-balao-recebido: #202c33;
    --chat-balao-recebido-texto: #e9edef;
    --chat-meta-texto: #8696a0;
    --chat-check: #8696a0;
    --chat-check-lido: #53bdeb;
    --chat-barra-envio-fundo: #202c33;
    --chat-campo-fundo: #2a3942;
    --chat-lista-fundo: #111b21;
    --chat-lista-selecionada: #2a3942;
    --chat-lista-hover: #202c33;
    --chat-destaque: #00a884;
    --chat-destaque-forte: #00a884;
    --chat-sobre-destaque: #111b21;
    --chat-borda: #222d34;
    --chat-texto: #e9edef;
    --chat-texto-secundario: #8696a0;
    --chat-texto-secundario-forte: #aebac1; /* #8696a0 sobre o item ativo (#2a3942) e menus (#233138) fica abaixo de 4,5:1 */
    --chat-meta-enviado: #bcd5d0;        /* hora no balão #005c4b: o #8696a0 dá 2,6:1; este, 5,2:1 */
    --chat-icone: #aebac1;
    --chat-selo-fundo: #00a884;
    --chat-selo-texto: #111b21;
    --chat-sistema-fundo: #182229;
    --chat-sistema-texto: #8696a0;
    --chat-nota-fundo: #3a3217;
    --chat-nota-texto: #ffd279;
    --chat-nota-borda: #7a6424;
    --chat-foco: #00a884;
    --chat-menu-fundo: #233138;
    --chat-sombra: 0 1px 0.5px rgba(11, 20, 26, 0.13);
    --chat-sombra-menu: 0 2px 5px rgba(0, 0, 0, 0.26), 0 2px 10px rgba(0, 0, 0, 0.16);
}

/* A nota interna (D14) usa as variáveis --nota-* da tela; no WhatsApp elas vêm destes tokens (amarelo de aviso). */
html[data-tema="whatsapp"] .chat-raiz {
    --nota-bg: var(--chat-nota-fundo);
    --nota-borda: var(--chat-nota-borda);
    --nota-texto: var(--chat-nota-texto);
    /* selos "Em atendimento"/"Aguardando"/"Interação livre": os tons do Conversio ficam abaixo de 4,5:1 no WhatsApp */
    --st-atendimento: #017561;
    --st-aguardando: #9a5b00;
}
html.dark[data-tema="whatsapp"] .chat-raiz {
    --st-atendimento: #00a884;
    --st-aguardando: #f0a340;
    --st-livre: #8696a0;
}

/* ── Estrutura ──────────────────────────────────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-raiz {
    background: var(--chat-painel);
    border-color: var(--chat-borda);
    color: var(--chat-texto);
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
}
/* o layout põe Poppins em todo h1–h6; no WhatsApp tudo é a mesma família */
html[data-tema="whatsapp"] .chat-raiz h2,
html[data-tema="whatsapp"] .chat-raiz h3,
html[data-tema="whatsapp"] .chat-raiz h4 {
    font-family: inherit;
}

/* Foco visível (teclado) em tudo que se clica no chat — o anel do Tailwind só existe em alguns campos */
html[data-tema="whatsapp"] .chat-raiz :is(a, button, input, select, textarea, label, summary):focus-visible,
html[data-tema="whatsapp"] .chat-trilho :is(a, button):focus-visible,
html[data-tema="whatsapp"] .presenca-na-janela button:focus-visible {
    outline: 2px solid var(--chat-foco);
    outline-offset: 2px;
    box-shadow: none;
}

/* Janela só do chat: tela inteira, sem margem, sem cantos, sem borda e sem sombra (o "não é toda a tela" do Carlos) */
html[data-tema="whatsapp"] .chat-janela-tela {
    padding: 0;
    background: var(--chat-app-fundo);
}
html[data-tema="whatsapp"] .chat-na-janela {
    height: calc(100dvh - var(--faixa-alarme, 0px));
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ── Trilho da esquerda (janela, computador) ────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-trilho {
    width: 64px;
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 10px;
    background: var(--chat-trilho-fundo);
    border-right: 1px solid var(--chat-borda);
}
@media (min-width: 1024px) {
    html[data-tema="whatsapp"] .chat-trilho { display: flex; }
}
html[data-tema="whatsapp"] .chat-trilho-pe {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
html[data-tema="whatsapp"] .chat-trilho-botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    color: var(--chat-icone);
    transition: background-color 0.15s;
}
html[data-tema="whatsapp"] .chat-trilho-botao:hover {
    background: rgba(84, 101, 111, 0.12);
}
html.dark[data-tema="whatsapp"] .chat-trilho-botao:hover {
    background: rgba(174, 186, 193, 0.1);
}
html[data-tema="whatsapp"] .chat-trilho-botao-ativo {
    background: rgba(84, 101, 111, 0.15);
    color: var(--chat-texto);
}
html.dark[data-tema="whatsapp"] .chat-trilho-botao-ativo {
    background: rgba(174, 186, 193, 0.14);
}
/* Claro/escuro: dois ícones na marcação, troca só por CSS (o do celular mora no app Vue, que recria o DOM) */
html[data-tema="whatsapp"] .chat-alternar-modo .chat-icone-sol { display: none; }
html.dark[data-tema="whatsapp"] .chat-alternar-modo .chat-icone-sol { display: block; }
html.dark[data-tema="whatsapp"] .chat-alternar-modo .chat-icone-lua { display: none; }
/* o do celular (na lista): só < 768 px, na janela — no computador ele está no trilho */
html[data-tema="whatsapp"] .chat-lista-titulo .chat-alternar-modo {
    display: flex;
    align-items: center;
    color: var(--chat-icone);
}
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-lista-titulo .chat-alternar-modo { display: none; }
    /* o Admin da janela fica no trilho (mesma permissão, mesmo destino); na lista ele sairia repetido */
    html[data-tema="whatsapp"] .chat-na-janela [data-botao-admin] { display: none; }
}

/* Presença na janela (partials/presenca-operador, frente U): no computador é a pílula "● Estado ▾" ao lado do título
   "Conversas"; posição e tamanho vêm do <style> do próprio partial (valem nos dois temas) — aqui só as cores do
   WhatsApp. No celular continua a aba estreita da borda direita. */
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .presenca-na-janela > [data-seletor-presenca] {
        background: var(--chat-painel);
        border-color: var(--chat-borda);
        color: var(--chat-texto);
        box-shadow: none;
        font-family: inherit;
    }
    html[data-tema="whatsapp"] .presenca-na-janela > [data-seletor-presenca]:hover {
        background: var(--chat-lista-hover);
    }
    html[data-tema="whatsapp"] .presenca-na-janela .presenca-seta {
        color: var(--chat-icone);
    }
}
html[data-tema="whatsapp"] .presenca-na-janela > .presenca-menu {
    background: var(--chat-menu-fundo);
    border-color: transparent;
    box-shadow: var(--chat-sombra-menu);
}

/* Cartões "Tocando" (partials/presenca-operador) no idioma do WhatsApp: painel com sombra, verde do destaque */
html[data-tema="whatsapp"] [data-cartao-tocando] {
    background: var(--chat-menu-fundo);
    color: var(--chat-texto);
    border-width: 0 0 0 4px;
    border-color: var(--chat-destaque);
    border-radius: 8px;
    box-shadow: var(--chat-sombra-menu);
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif;
}
html[data-tema="whatsapp"] [data-cartao-tocando] [data-aceitar] {
    background: var(--chat-destaque-forte);
    color: var(--chat-sobre-destaque);
    border-radius: 9999px;
}
html[data-tema="whatsapp"] [data-cartao-tocando] [data-recusar] {
    border-color: var(--chat-borda);
    color: var(--chat-texto);
    border-radius: 9999px;
}

/* ── Lista de conversas (coluna da esquerda) ────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-lista {
    background: var(--chat-lista-fundo);
    border-color: var(--chat-borda);
}
@media (min-width: 1024px) {
    .chat-lista {
        width: 380px !important;
        min-width: 340px !important;
        max-width: 440px !important;
        flex: 0 0 380px !important;
    }
    .chat-painel-ativo {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    html[data-tema="whatsapp"]:not(.conversio-mobile-mode) .chat-lista {
        width: 380px !important;
        min-width: 340px !important;
        max-width: 440px !important;
        flex-shrink: 0;
    }
}
/* No celular e PWA (modo mobile), a lista ocupa 100% da tela como no app do WhatsApp */
html[data-tema="whatsapp"].conversio-mobile-mode .chat-lista {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0;
}
html[data-tema="whatsapp"].conversio-mobile-mode #chat-app[data-has-active="true"] .chat-lista {
    display: none !important;
}
html[data-tema="whatsapp"].conversio-mobile-mode #chat-app:not([data-has-active="true"]) .chat-painel-ativo {
    display: none !important;
}
html[data-tema="whatsapp"].conversio-mobile-mode #chat-app[data-has-active="true"] .chat-painel-ativo {
    display: flex !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}
html[data-tema="whatsapp"].conversio-mobile-mode .chat-vazio {
    display: none !important;
}
/* Cabeçalho: título + ações numa faixa de 59 px; embaixo, a busca e depois as abas (ordem do WhatsApp Web) */
html[data-tema="whatsapp"] .chat-lista-cabecalho {
    display: flex;
    flex-direction: column;
    padding: 0 0 6px;
    background: var(--chat-painel);
    color: var(--chat-cabecalho-texto);
    border-color: var(--chat-borda);
}
html[data-tema="whatsapp"] .chat-lista-titulo {
    order: 1;
    min-height: 59px;
    padding: 8px 12px 8px 16px;
    background: var(--chat-cabecalho-fundo);
}
html[data-tema="whatsapp"] .chat-lista-titulo h2 {
    font-size: 19px;
    font-weight: 600;
    color: var(--chat-texto);
    margin-right: auto;
}
html[data-tema="whatsapp"] .chat-lista-busca {
    order: 2;
    margin: 0;
    padding: 7px 12px;
}
html[data-tema="whatsapp"] .chat-lista-protocolos-wrapper {
    order: 3;
    margin: 0;
    padding: 2px 12px 4px;
}
/* Rolagem sem barra de scroll visivel no PC para chips e abas horizontais nos 3 temas */
html[data-tema="whatsapp"] .no-scrollbar,
html[data-tema="conversio"] .no-scrollbar,
html[data-tema="programando-solucoes"] .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
html[data-tema="whatsapp"] .no-scrollbar::-webkit-scrollbar,
html[data-tema="conversio"] .no-scrollbar::-webkit-scrollbar,
html[data-tema="programando-solucoes"] .no-scrollbar::-webkit-scrollbar {
    display: none;
}
html[data-tema="whatsapp"] .chat-lista-chips {
    order: 4;
    margin: 0;
    padding: 2px 12px 4px;
    gap: 6px;
}
html[data-tema="whatsapp"] .chat-lista-aviso {
    order: 5;
    margin: 0;
    padding: 0 16px 4px;
}
html[data-tema="whatsapp"] .chat-lista-busca input {
    height: 35px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 44px;
    border: 0;
    border-radius: 8px;
    background: var(--chat-cabecalho-fundo);
    color: var(--chat-texto);
    font-size: 15px;
}
html[data-tema="whatsapp"] .chat-lista-busca input::placeholder {
    color: var(--chat-texto-secundario-forte);
}
html[data-tema="whatsapp"] .chat-lista-busca input:focus {
    box-shadow: none;
    outline: 2px solid var(--chat-foco);
    outline-offset: -2px;
}
html[data-tema="whatsapp"] .chat-lista-busca svg {
    left: 24px;
    top: 17px;
    color: var(--chat-icone);
}
/* Botões do cabeçalho da lista (Admin, paleta, Nova conversa): discretos como os ícones do WhatsApp */
html[data-tema="whatsapp"] .chat-lista-titulo > a,
html[data-tema="whatsapp"] .chat-lista-titulo > div > button,
html[data-tema="whatsapp"] .chat-lista-titulo > button {
    border-color: transparent;
    background: transparent;
    color: var(--chat-icone);
    border-radius: 9999px;
}
html[data-tema="whatsapp"] .chat-lista-titulo > a:hover,
html[data-tema="whatsapp"] .chat-lista-titulo > div > button:hover,
html[data-tema="whatsapp"] .chat-lista-titulo > button:hover {
    background: rgba(84, 101, 111, 0.12);
}
/* "Nova conversa": frente WW — vira o ícone redondo do WhatsApp Web (o nome fica no title/aria-label; o texto some com
   chat-so-conversio). Na frente V ele ficava escrito, em verde. */
html[data-tema="whatsapp"] .chat-lista-titulo > button[data-nova-conversa],
html[data-tema="whatsapp"] .chat-lista-titulo > [data-menu-lista] > button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}
html[data-tema="whatsapp"] .chat-lista-titulo > button[data-nova-conversa] svg {
    width: 22px;
    height: 22px;
}

/* Abas (Tudo/DM/Grupos/Status), Ordenar/Filtros e os modos da caixa (Responder/Nota…): "chips" do WhatsApp */
html[data-tema="whatsapp"] .chat-chip {
    border-color: transparent;
    background: var(--chat-cabecalho-fundo);
    color: var(--chat-icone);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
}
html[data-tema="whatsapp"] .chat-chip:hover {
    background: var(--chat-lista-hover);
    filter: brightness(0.97);
}
html[data-tema="whatsapp"] .chat-chip-ativa {
    background: #e7fce3;
    color: var(--chat-destaque-forte);
    border-color: transparent;
}
html.dark[data-tema="whatsapp"] .chat-chip-ativa {
    background: #0a332c;
    color: var(--chat-destaque);
}
html[data-tema="whatsapp"] .chat-lista-chips [data-organizador] .chat-chip {
    padding: 4px 9px;
}
html[data-tema="whatsapp"] .chat-lista-chips [data-organizador] .chat-chip > span {
    display: none;
}
/* a nota interna ativa continua amarela (nunca sai pelo canal: não pode parecer "Responder") */
html[data-tema="whatsapp"] .chat-chip.nota-interna {
    border: 1px dashed var(--chat-nota-borda);
}

/* Itens da lista: avatar 49 px, nome 17 px, prévia 14 px, divisória a partir do texto (como no WhatsApp) */
html[data-tema="whatsapp"] .chat-lista-item {
    background: var(--chat-lista-fundo);
    border-bottom: 0;
    padding: 0 12px 0 13px;
    gap: 13px;
    min-height: 72px;
}
html[data-tema="whatsapp"] .chat-lista-item:hover {
    background: var(--chat-lista-hover);
}
/* faixas de modo (livre/atendimento): continuam, mais finas — no WhatsApp a lista não tem borda nenhuma */
html[data-tema="whatsapp"] .chat-lista-item.border-l-4 {
    border-left-width: 3px;
}
/* A conversa aberta: fundo cinza do WhatsApp, sem a faixa lateral cinza do Conversio (as faixas de modo livre/
   atendimento continuam, porque dizem algo que o WhatsApp não tem). */
html[data-tema="whatsapp"] .chat-lista-item-ativo {
    background: var(--chat-lista-selecionada);
}
html[data-tema="whatsapp"] .chat-lista-item-ativo:not(.conv-livre):not(.conv-atendimento) {
    border-left-color: transparent;
}
html[data-tema="whatsapp"] .chat-lista-corpo {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--chat-borda);
}
html[data-tema="whatsapp"] .chat-lista-item > div:last-child {
    align-self: stretch;
    border-bottom: 1px solid var(--chat-borda);
    margin-left: -13px;
    padding-left: 8px;
}
html[data-tema="whatsapp"] .chat-lista-corpo h4 {
    font-size: 17px;
    line-height: 21px;
    font-weight: 400;
    color: var(--chat-texto);
}
html[data-tema="whatsapp"] .chat-lista-corpo > div:first-child { margin-bottom: 2px; }
html[data-tema="whatsapp"] .chat-lista-corpo p:first-child,
html[data-tema="whatsapp"] .chat-lista-corpo > div:nth-child(2) > p {
    font-size: 14px;
    line-height: 20px;
    color: var(--chat-texto-secundario);
}
html[data-tema="whatsapp"] .chat-lista-corpo .text-gray-500 {
    color: var(--chat-texto-secundario);
}
/* no fundo cinza (item aberto ou sob o mouse) o secundário escurece para manter 4,5:1 */
html[data-tema="whatsapp"] .chat-lista-item-ativo .chat-lista-corpo :is(p, .text-gray-500),
html[data-tema="whatsapp"] .chat-lista-item:hover .chat-lista-corpo :is(p, .text-gray-500),
html[data-tema="whatsapp"] .chat-lista-item-ativo .chat-lista-hora,
html[data-tema="whatsapp"] .chat-lista-item:hover .chat-lista-hora {
    color: var(--chat-texto-secundario-forte);
}
html[data-tema="whatsapp"] .chat-lista-hora {
    font-size: 12px;
    color: var(--chat-texto-secundario);
}
/* com mensagem não lida, a hora fica verde (WhatsApp) */
html[data-tema="whatsapp"] .chat-lista-item:has(.chat-selo) .chat-lista-hora {
    color: var(--chat-destaque-forte);
}
/* "Tocando para…" (F3): no WhatsApp o que está acontecendo agora é verde ("digitando…"), não âmbar */
html[data-tema="whatsapp"] .chat-lista-corpo .text-amber-600 {
    color: var(--chat-destaque-forte);
}
html[data-tema="whatsapp"] .chat-selo {
    min-width: 20px;
    width: auto;
    height: 20px;
    padding: 0 6px;
    background: var(--chat-selo-fundo);
    color: var(--chat-selo-texto);
    font-size: 12px;
    font-weight: 600;
}
html[data-tema="whatsapp"] .chat-lista-item > div:last-child button {
    color: var(--chat-icone);
}
html[data-tema="whatsapp"] .chat-lista [data-separador] {
    color: var(--chat-destaque-forte);
    border-color: var(--chat-borda);
    font-size: 12px;
    letter-spacing: 0.02em;
}
html[data-tema="whatsapp"] .chat-lista [data-separador] ~ .p-6,
html[data-tema="whatsapp"] .chat-lista .p-6.text-center {
    color: var(--chat-texto-secundario);
}

/* Avatares (lista e cabeçalho): dimensões canônicas universais estilo WhatsApp Nativo */
.chat-avatar {
    width: 49px !important;
    height: 49px !important;
    min-width: 49px !important;
    min-height: 49px !important;
    max-width: 49px !important;
    max-height: 49px !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.chat-avatar img,
.chat-avatar [data-foto-perfil] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
    display: block !important;
}
.chat-lista-item {
    min-height: 72px !important;
    padding: 10px 14px !important;
    gap: 13px !important;
}
.chat-lista-item .chat-avatar {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    font-size: 1.15rem !important;
    border-radius: 9999px !important;
    flex-shrink: 0 !important;
}
.chat-lista-item .chat-avatar img,
.chat-lista-item .chat-avatar [data-foto-perfil] {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: cover !important;
    border-radius: 9999px !important;
}
.chat-lista-corpo h4 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 2px !important;
}
.chat-lista-corpo p {
    font-size: 14px !important;
    line-height: 1.3 !important;
}
.chat-lista-hora {
    font-size: 12px !important;
    color: #8696a0 !important;
}

/* Avatares (lista e cabeçalho): cinza-azulado do WhatsApp, inicial no lugar da foto */
html[data-tema="whatsapp"] .chat-avatar {
    background: #dfe5e7;
    color: #3b4a54;
    font-weight: 500;
}
html.dark[data-tema="whatsapp"] .chat-avatar {
    background: #374248;
    color: #d1d7db;
}
html[data-tema="whatsapp"] .chat-lista-item .chat-avatar {
    width: 49px;
    height: 49px;
    font-size: 19px;
}
html[data-tema="whatsapp"] .chat-lista-item .chat-avatar + span {
    background: var(--chat-painel);
    border-color: var(--chat-borda);
}

/* ── Cabeçalho da conversa aberta ───────────────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-cabecalho {
    min-height: 59px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: var(--chat-cabecalho-fundo);
    color: var(--chat-cabecalho-texto);
    border-color: var(--chat-borda);
}
html[data-tema="whatsapp"] .chat-cabecalho h2 {
    font-size: 16px;
    line-height: 21px;
    font-weight: 500;
    color: var(--chat-texto);
}
/* subtítulo (canal, conta, protocolo, "Atendido por"): o #667781 sobre o #f0f2f5 dá 4,3:1 — usa o tom dos ícones */
html[data-tema="whatsapp"] .chat-cabecalho p,
html[data-tema="whatsapp"] .chat-cabecalho p .text-gray-400,
html[data-tema="whatsapp"] .chat-cabecalho p .text-gray-600 {
    color: var(--chat-icone);
}
/* crítica de design (V): o subtítulo tem até 4 linhas (canal, protocolo, telefone, "Atendido por") — mais
   compacto para o cabeçalho ficar perto dos 59 px do WhatsApp sem esconder nenhuma informação */
html[data-tema="whatsapp"] .chat-cabecalho h2 + p,
html[data-tema="whatsapp"] .chat-cabecalho h2 ~ p {
    font-size: 12.5px;
    line-height: 17px;
}
html[data-tema="whatsapp"] .chat-cabecalho .text-amber-600 {
    color: var(--chat-destaque-forte);
}
html[data-tema="whatsapp"] .chat-cabecalho .chat-avatar {
    width: 40px;
    height: 40px;
}
html[data-tema="whatsapp"] .chat-cabecalho [data-voltar-lista] {
    color: var(--chat-icone);
}
/* 16 px de margem (a do WhatsApp). O nome continua com no mínimo 16rem (hotfix de 29/09): a 1280 px com ticket
   aberto as ações descem para uma 2ª linha — medido na revisão V, espremer o nome a 13rem para caber numa linha
   quebrava o subtítulo em 6 linhas (cabeçalho mais alto do que com as duas linhas). */
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-cabecalho {
        padding-left: 16px;
        padding-right: 16px;
    }
}
/* Ações à direita: ícones cinza redondos, compactos (a dica vem do title de cada um) */
html[data-tema="whatsapp"] .chat-cabecalho-acoes { gap: 2px; }
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button,
html[data-tema="whatsapp"] .chat-cabecalho-acoes > a {
    color: var(--chat-icone);
    border-color: transparent;
    background: transparent;
    border-radius: 9999px;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button:hover,
html[data-tema="whatsapp"] .chat-cabecalho-acoes > a:hover {
    background: rgba(84, 101, 111, 0.12);
}
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > button:hover,
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > a:hover {
    background: rgba(174, 186, 193, 0.1);
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button svg,
html[data-tema="whatsapp"] .chat-cabecalho-acoes > a svg {
    width: 20px;
    height: 20px;
}
/* os botões com texto (Converter, Encerrar, Tickets, Rastro) ficam como "pílulas" contornadas */
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button.whitespace-nowrap {
    border-color: var(--chat-borda);
    font-size: 13px;
    font-weight: 500;
    padding: 5px 10px;
    color: var(--chat-texto);
}
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > button.whitespace-nowrap {
    border-color: #3b4a54;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button.whitespace-nowrap svg {
    width: 14px;
    height: 14px;
}
/* aberto (Tickets/Rastro com o painel aberto): o verde de "selecionado" do WhatsApp */
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button.bg-gray-800 {
    background: #e7fce3;
    color: var(--chat-destaque-forte);
    border-color: transparent;
}
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > button.bg-gray-800 {
    background: #0a332c;
    color: var(--chat-destaque);
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > div.w-px {
    background: var(--chat-borda);
}
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > div.w-px {
    background: #3b4a54;
}

/* ── Área das mensagens: papel de parede (cor + desenho próprio) ────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-mensagens {
    background-color: var(--chat-papel-parede);
    background-image: var(--chat-papel-parede-desenho);
    /* Assinatura da frente V: fones, telefone, balão, envelope, tíquete, relógio — o mundo do atendimento — em
       traço fino, numa cor quase igual à do fundo (o desenho não pode competir com os balões; em 29/09 um traço
       mais escuro competia — visto na prova visual). Bloco de 200 px, 9 desenhos. */
    background-size: 200px 200px;
}
@media (min-width: 1024px) {
    html[data-tema="whatsapp"] .chat-mensagens {
        padding-left: 7%;
        padding-right: 7%;
    }
}
/* Espaçamento do WhatsApp: 2 px dentro de uma sequência, 12 px quando muda quem fala */
html[data-tema="whatsapp"] .chat-mensagens > .chat-linha {
    margin-top: 2px;
}
html[data-tema="whatsapp"] .chat-mensagens > .chat-linha:has(.chat-balao-primeiro) {
    margin-top: 12px;
}
/* Separador de data: "pílula" no centro, sem as linhas */
html[data-tema="whatsapp"] .chat-data {
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 8px;
}
html[data-tema="whatsapp"] .chat-data > div { display: none; }
html[data-tema="whatsapp"] .chat-data > span {
    padding: 5px 12px 6px;
    border-radius: 7.5px;
    background: var(--chat-sistema-fundo);
    color: var(--chat-sistema-texto);
    box-shadow: var(--chat-sombra);
    font-size: 12.5px;
    font-weight: 400;
    text-transform: uppercase;
}
/* Marco do ticket e mensagens de sistema: a mesma pílula (o marco em verde, como os avisos do WhatsApp) */
html[data-tema="whatsapp"] .chat-marco {
    justify-content: center;
    margin-top: 12px;
    margin-bottom: 4px;
}
html[data-tema="whatsapp"] .chat-marco > div { display: none; }
html[data-tema="whatsapp"] .chat-marco > span {
    padding: 5px 12px 6px;
    border-radius: 7.5px;
    background: var(--chat-sistema-fundo);
    color: var(--chat-destaque-forte);
    box-shadow: var(--chat-sombra);
    font-size: 12.5px;
    font-weight: 500;
}
html[data-tema="whatsapp"] .chat-sistema {
    padding: 5px 12px 6px;
    border-radius: 7.5px;
    background: var(--chat-sistema-fundo);
    color: var(--chat-sistema-texto);
    box-shadow: var(--chat-sombra);
    font-size: 12.5px;
}
html[data-tema="whatsapp"] .chat-carregar button {
    border-color: transparent;
    background: var(--chat-sistema-fundo);
    color: var(--chat-sistema-texto);
    box-shadow: var(--chat-sombra);
    font-size: 12.5px;
    border-radius: 7.5px;
}
html[data-tema="whatsapp"] .chat-mensagens > .text-center {
    color: var(--chat-sistema-texto);
}
/* Nota interna (D14): o amarelo de aviso do WhatsApp, com a borda tracejada que diz "não saiu pelo canal" */
html[data-tema="whatsapp"] .chat-mensagens .nota-interna {
    max-width: 85%;
    border-radius: 7.5px;
    box-shadow: var(--chat-sombra);
    font-size: 14.2px;
    line-height: 19px;
}
html[data-tema="whatsapp"] .chat-mensagens .nota-interna > div:first-child {
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* ── Balões ─────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-msg,
    html[data-tema="whatsapp"] .chat-mensagens .nota-interna { max-width: 65%; }
}
/* WhatsApp: cantos de 7,5px, sombra fina, sem borda; o "rabinho" fica no canto de CIMA e só na 1ª mensagem de
   cada sequência (chat-balao-primeiro, calculado no Vue por primeiraDaSequencia). */
html[data-tema="whatsapp"] .chat-balao-enviado,
html[data-tema="whatsapp"] .chat-balao-recebido {
    position: relative;
    display: flow-root;             /* contém a hora, que flutua à direita na última linha */
    border: 0;
    border-radius: 7.5px;
    padding: 6px 7px 8px 9px;
    box-shadow: var(--chat-sombra);
    font-size: 14.2px;
    line-height: 19px;
}
html[data-tema="whatsapp"] .chat-balao-enviado {
    background: var(--chat-balao-enviado);
    color: var(--chat-balao-enviado-texto);
}
html[data-tema="whatsapp"] .chat-balao-recebido {
    background: var(--chat-balao-recebido);
    color: var(--chat-balao-recebido-texto);
}
html[data-tema="whatsapp"] .chat-balao-enviado.chat-balao-primeiro { border-top-right-radius: 0; }
html[data-tema="whatsapp"] .chat-balao-recebido.chat-balao-primeiro { border-top-left-radius: 0; }
html[data-tema="whatsapp"] .chat-balao-primeiro::before {
    content: "";
    position: absolute;
    top: 0;
    width: 8px;
    height: 13px;
}
html[data-tema="whatsapp"] .chat-balao-enviado.chat-balao-primeiro::before {
    right: -8px;
    background: var(--chat-balao-enviado);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
html[data-tema="whatsapp"] .chat-balao-recebido.chat-balao-primeiro::before {
    left: -8px;
    background: var(--chat-balao-recebido);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
/* Links dentro do balão enviado: o azul claro do Conversio some no verde claro do WhatsApp */
/* (medido: #026a9a dá 5,4:1 no verde claro; #8fd6f5, 5,0:1 no verde escuro) */
html[data-tema="whatsapp"] .chat-balao-enviado a { color: #026a9a; }
html.dark[data-tema="whatsapp"] .chat-balao-enviado a { color: #8fd6f5; }
html[data-tema="whatsapp"] .chat-balao-recebido a { color: #027eb5; }
html.dark[data-tema="whatsapp"] .chat-balao-recebido a { color: #53bdeb; }
/* mídia com cantos do WhatsApp */
html[data-tema="whatsapp"] .chat-msg .msg-image {
    border-radius: 6px;
    max-width: 330px;
}

/* Hora, nome do agente e tiques: dentro do balão, pequenos e acinzentados, flutuando na última linha do texto */
html[data-tema="whatsapp"] .chat-meta {
    float: right;
    display: inline-flex;
    position: relative;
    margin: 4px 0 -5px 10px;
    font-size: 11px;
    line-height: 15px;
    color: var(--chat-meta-texto);
}
html[data-tema="whatsapp"] .chat-meta svg { color: var(--chat-check); }
html[data-tema="whatsapp"] .chat-balao-enviado .chat-meta,
html[data-tema="whatsapp"] .chat-balao-enviado .chat-meta svg { color: var(--chat-meta-enviado); }
/* o ícone do canal chega com stroke="#e5e7eb" (branco para o balão cinza do Conversio): some no verde claro */
html[data-tema="whatsapp"] .chat-balao-enviado .chat-meta svg { stroke: currentColor; }
html[data-tema="whatsapp"] .chat-balao-enviado .chat-meta .text-blue-300,
html[data-tema="whatsapp"] .chat-meta .text-blue-300 { color: var(--chat-check-lido); }
html[data-tema="whatsapp"] .chat-meta .text-red-300 { color: #c9302c; }
html.dark[data-tema="whatsapp"] .chat-meta .text-red-300 { color: #ffb4ab; }
html[data-tema="whatsapp"] .chat-meta + div { clear: both; }
html[data-tema="whatsapp"] .chat-balao-enviado .text-red-200 { color: #b3261e; }
html.dark[data-tema="whatsapp"] .chat-balao-enviado .text-red-200 { color: #ffd2cd; }
/* Ações da mensagem (⋯): no canto de cima do balão, aparecem ao passar o mouse ou com o foco do teclado —
   não ocupam mais uma linha vazia dentro do balão */
html[data-tema="whatsapp"] .chat-msg-acoes {
    position: absolute;
    top: 2px;
    right: 3px;
    z-index: 5;
}
html[data-tema="whatsapp"] .chat-msg-acoes > button {
    padding: 0 6px;
    border-radius: 9999px;
    font-size: 15px;
    line-height: 20px;
    color: var(--chat-icone);
    background: inherit;
}
html[data-tema="whatsapp"] .chat-balao-enviado .chat-msg-acoes > button { background: var(--chat-balao-enviado); }
html[data-tema="whatsapp"] .chat-balao-recebido .chat-msg-acoes > button { background: var(--chat-balao-recebido); }
html[data-tema="whatsapp"] .chat-msg-acoes > button:focus-visible { opacity: 1; }
/* Reações: pílula clara sob o balão, como no WhatsApp */
html[data-tema="whatsapp"] [data-reacoes] > span {
    background: var(--chat-balao-recebido);
    border-color: var(--chat-borda);
    box-shadow: var(--chat-sombra);
    font-size: 14px;
}
html.dark[data-tema="whatsapp"] [data-reacoes] > span {
    background: var(--chat-menu-fundo);
    border-color: var(--chat-app-fundo);
}
html[data-tema="whatsapp"] [data-reacoes] > span.border-emerald-400 {
    border-color: var(--chat-destaque);
}
/* "Nota ao cliente" e "▶ ticket a partir daqui" */
html[data-tema="whatsapp"] .chat-msg .marco { color: var(--chat-destaque-forte); }

/* Cartão de contato (partials/cartao-contato) dentro do balão: sem caixa, botões verdes separados por uma linha */
html[data-tema="whatsapp"] .chat-msg [data-cartao-contato] > div {
    border: 0;
    background: transparent;
    padding: 2px 0 0;
}
html[data-tema="whatsapp"] .chat-msg [data-cartao-contato] > div > div:first-child > span {
    width: 44px;
    height: 44px;
    background: #dfe5e7;
    color: #3b4a54;
}
html.dark[data-tema="whatsapp"] .chat-msg [data-cartao-contato] > div > div:first-child > span {
    background: #374248;
    color: #d1d7db;
}
html[data-tema="whatsapp"] .chat-msg [data-cartao-contato] .flex.gap-1\.5 {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid rgba(134, 150, 160, 0.3);
    gap: 0;
}
html[data-tema="whatsapp"] .chat-msg [data-cartao-contato] button {
    flex: 1;
    border: 0;
    border-radius: 6px;
    color: var(--chat-destaque-forte);
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    background: transparent;
}
html.dark[data-tema="whatsapp"] .chat-msg [data-cartao-contato] button { color: #21c063; }
html.dark[data-tema="whatsapp"] .chat-balao-enviado [data-cartao-contato] button { color: #a6f0d8; }
html[data-tema="whatsapp"] .chat-msg [data-cartao-contato] button:hover {
    background: rgba(134, 150, 160, 0.12);
}
/* "digitando…": balão recebido */
html[data-tema="whatsapp"] .chat-digitando {
    border: 0;
    border-radius: 7.5px;
    border-top-left-radius: 0;
    background: var(--chat-balao-recebido);
    box-shadow: var(--chat-sombra);
}

/* ── Barra de envio ─────────────────────────────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-barra-envio {
    background: var(--chat-barra-envio-fundo);
    border-color: transparent;
    color: var(--chat-icone);
}
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-barra-envio {
        padding-left: 16px;
        padding-right: 16px;
    }
}
html[data-tema="whatsapp"] .chat-barra-envio form > button[type="button"],
html[data-tema="whatsapp"] .chat-barra-envio form > label {
    color: var(--chat-icone);
    border-radius: 9999px;
}
html[data-tema="whatsapp"] .chat-barra-envio form > button[type="button"] svg,
html[data-tema="whatsapp"] .chat-barra-envio form > label svg {
    width: 24px;
    height: 24px;
}
html[data-tema="whatsapp"] .chat-barra-envio form > button[type="button"]:hover,
html[data-tema="whatsapp"] .chat-barra-envio form > label:hover {
    background: rgba(84, 101, 111, 0.12);
}
html[data-tema="whatsapp"] .chat-campo {
    background: var(--chat-campo-fundo);
    color: var(--chat-texto);
    border-radius: 8px;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 12px;
}
html[data-tema="whatsapp"] .chat-campo::placeholder {
    color: var(--chat-texto-secundario);
}
html.dark[data-tema="whatsapp"] .chat-campo::placeholder {
    color: var(--chat-texto-secundario-forte);
}
html[data-tema="whatsapp"] .chat-campo:focus {
    box-shadow: none;
    outline: 2px solid var(--chat-foco);
    outline-offset: -2px;
}
html[data-tema="whatsapp"] .chat-barra-envio button[type="submit"] {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--chat-destaque-forte);
    color: var(--chat-sobre-destaque);
    border-radius: 9999px;
    box-shadow: none;
}
html[data-tema="whatsapp"] .chat-barra-envio button[type="submit"]:hover {
    filter: brightness(1.08);
}
/* dica "Enter para enviar…" e avisos da barra (consulta, status, conversa travada): texto secundário, centrado */
html[data-tema="whatsapp"] .chat-barra-envio > p,
html[data-tema="whatsapp"] .chat-barra-envio .text-gray-500 {
    color: var(--chat-icone);
}
html[data-tema="whatsapp"] .chat-barra-envio [data-envio-bloqueado] {
    justify-content: center;
    color: var(--chat-icone);
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
}
html[data-tema="whatsapp"] .chat-barra-envio [data-envio-bloqueado] > span { flex: 0 1 auto; max-width: 720px; }
html[data-tema="whatsapp"] .chat-barra-envio [data-envio-bloqueado] strong { color: var(--chat-texto); font-weight: 600; }
html[data-tema="whatsapp"] .chat-barra-envio [data-destravar-envio] {
    border-color: var(--chat-destaque-forte);
    color: var(--chat-destaque-forte);
    border-radius: 9999px;
    padding-left: 14px;
    padding-right: 14px;
}
html[data-tema="whatsapp"] .chat-barra-envio [data-destravar-envio]:hover {
    background: rgba(0, 168, 132, 0.1);
}

/* ── Menus e painéis que abrem por cima (tema, ordenar, filtros, ⋮ da conversa, ⋯ da mensagem, emoji, funções) */
html[data-tema="whatsapp"] .chat-menu {
    background: var(--chat-menu-fundo);
    border-color: transparent;
    color: var(--chat-texto);
    box-shadow: var(--chat-sombra-menu);
    border-radius: 6px;
}
html[data-tema="whatsapp"] .chat-menu button:hover,
html[data-tema="whatsapp"] .chat-menu label:hover {
    background: var(--chat-lista-hover);
}
html.dark[data-tema="whatsapp"] .chat-menu button:hover,
html.dark[data-tema="whatsapp"] .chat-menu label:hover {
    background: #182229;
}
html[data-tema="whatsapp"] .chat-menu :is(.text-gray-400, .text-gray-500) {
    color: var(--chat-texto-secundario-forte);
}

/* ── Sem conversa aberta: painel calmo com a marca do Conversio ─────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-vazio {
    background: var(--chat-app-fundo);
    color: var(--chat-texto-secundario);
    border-left: 1px solid var(--chat-borda);
    text-align: center;
    padding: 0 48px;
}
html.dark[data-tema="whatsapp"] .chat-vazio {
    background: #222e35;
}
html[data-tema="whatsapp"] .chat-vazio-icone { display: none; }
html[data-tema="whatsapp"] .chat-vazio-marca {
    display: block;
    width: 96px;
    height: 96px;
    margin-bottom: 28px;
    border-radius: 24px;
}
html[data-tema="whatsapp"] .chat-vazio h3 {
    font-size: 32px;
    line-height: 38px;
    font-weight: 300;
    color: var(--chat-texto);
    margin-bottom: 12px;
}
html[data-tema="whatsapp"] .chat-vazio p {
    font-size: 14px;
    line-height: 20px;
    color: var(--chat-texto-secundario-forte);
}
html[data-tema="whatsapp"] .chat-vazio-dica {
    display: block;
    max-width: 440px;
    margin-top: 6px;
}

/* ══ Frente WW (Carlos, 01/10): a MOLDURA do WhatsApp Web ═══════════════════════════════════════════════════════════
   "não lembra em nada a parte externa com o WhatsApp". A frente V deu as cores; esta dá a forma: cabeçalho da lista com
   título e ícones, chips que rolam de lado, linha da conversa limpa (o ⌄ só ao passar o mouse), cabeçalho da conversa com
   foto + nome + uma linha cinza e só câmera + ⋮, "Dados do contato" à direita, bolha sem o nome do operador no rodapé,
   nota de voz, caixa 😊 + [campo arredondado] ➤ e a foto/presença no pé do trilho.
   Regra: NENHUMA função some. O que sai da vista leva a classe chat-so-conversio (abaixo) e tem o item equivalente num
   menu do tema WhatsApp (ver a tabela "onde estava → onde ficou" no WW-report e o manual "Temas do chat").
   Medidas de referência (WhatsApp Web, set–out/2026, conferidas na captura pública em briefs-w/prints/ww/referencia):
   linha da lista 72 px, foto 49 px, cabeçalhos 59 px, ícones de 40 px com o desenho de 24 px, chips em pílula, campo
   de busca e de mensagem arredondados, foto de "Dados do contato" de 200 px. */

/* O que só existe no tema Conversio (o tema WhatsApp mostra o equivalente num menu) */
html[data-tema="whatsapp"] .chat-so-conversio {
    display: none;
}

/* ── Lista: cabeçalho no fundo do painel, título grande, busca em pílula ─────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-lista-titulo {
    flex-wrap: nowrap;
    gap: 2px;
    background: var(--chat-painel);
}
html[data-tema="whatsapp"] .chat-lista-titulo h2 {
    font-size: 22px;
    font-weight: 700;
}
html[data-tema="whatsapp"] .chat-lista-busca input {
    height: 40px;
    border-radius: 9999px;
}
html[data-tema="whatsapp"] .chat-lista-busca svg {
    top: 19px;
}
@media (min-width: 1024px) {
    html[data-tema="whatsapp"] .chat-lista {
        min-width: 400px;
    }
    /* a presença saiu do título (vai para o pé do trilho): o título não reserva mais o lugar dela */
    html[data-tema="whatsapp"] .chat-na-janela .chat-lista-titulo h2 {
        padding-right: 0;
    }
}

/* Chips: uma faixa só, que rola de lado (como no WhatsApp Web) — os menus de Ordenar/Filtros moram FORA dela
   ([data-organizador]) e por isso não são cortados pela rolagem */
html[data-tema="whatsapp"] .chat-lista-chips {
    flex-wrap: nowrap;
    padding-top: 4px;
    padding-bottom: 8px;
}
html[data-tema="whatsapp"] .chat-lista-abas {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
}
html[data-tema="whatsapp"] .chat-lista-abas::-webkit-scrollbar {
    display: none;
}
html[data-tema="whatsapp"] .chat-lista-abas .chat-chip {
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
}
html[data-tema="whatsapp"] .chat-lista-chips [data-organizador] {
    margin-left: 0;
    gap: 0;
}

/* Linha da conversa: sem as faixas de modo (o modo está no ⌄ e na dica), sem o selo do canal WhatsApp */
html[data-tema="whatsapp"] .chat-lista-item.border-l-4 {
    border-left-width: 0;
}
html[data-tema="whatsapp"] .chat-lista-tiques {
    color: var(--chat-check);
}
html[data-tema="whatsapp"] .chat-lista-tiques-lido {
    color: var(--chat-check-lido);
}
/* O ⌄ do WhatsApp Web: só ao passar o mouse (ou com o foco do teclado); onde não há mouse (celular), sempre */
html[data-tema="whatsapp"] .chat-lista-mais {
    padding: 0;
    color: var(--chat-icone);
    opacity: 0;
    transition: opacity 0.15s;
}
html[data-tema="whatsapp"] .chat-lista-item:hover .chat-lista-mais,
html[data-tema="whatsapp"] .chat-lista-item:focus-within .chat-lista-mais,
html[data-tema="whatsapp"] .chat-lista-mais:focus-visible {
    opacity: 1;
}
@media (hover: none) {
    html[data-tema="whatsapp"] .chat-lista-mais {
        opacity: 1;
    }
}

/* ── Cabeçalho da conversa: foto + nome + linha cinza; à direita só ícones redondos ────────────────────────────── */
html[data-tema="whatsapp"] .chat-cabecalho {
    flex-wrap: nowrap;
    gap: 8px;
}
html[data-tema="whatsapp"] .chat-cabecalho > div:first-child {
    min-width: 0;
}
html[data-tema="whatsapp"] .chat-cabecalho-nome,
html[data-tema="whatsapp"] .chat-cabecalho .chat-avatar {
    cursor: pointer;
}
html[data-tema="whatsapp"] .chat-cabecalho h2 + p,
html[data-tema="whatsapp"] .chat-cabecalho-atendido {
    font-size: 13px;
    line-height: 18px;
}
html[data-tema="whatsapp"] .chat-cabecalho-atendido {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: normal;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes {
    width: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
/* :not(.chat-so-conversio): este bloco põe display:flex e, mais específico, desmancharia o "some no tema WhatsApp" */
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button:not(.chat-so-conversio),
html[data-tema="whatsapp"] .chat-cabecalho-acoes > div > button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--chat-icone);
    background: transparent;
    border-color: transparent;
    border-radius: 9999px;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > button svg,
html[data-tema="whatsapp"] .chat-cabecalho-acoes > div > button svg {
    width: 22px;
    height: 22px;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes > div > button:hover {
    background: rgba(84, 101, 111, 0.12);
}
html.dark[data-tema="whatsapp"] .chat-cabecalho-acoes > div > button:hover {
    background: rgba(174, 186, 193, 0.1);
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes [data-ia-trabalhando] {
    color: var(--chat-destaque-forte);
    margin-right: 4px;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes .chat-menu {
    min-width: 230px;
    padding: 6px 0;
}
html[data-tema="whatsapp"] .chat-cabecalho-acoes .chat-menu :is(button, a) {
    font-size: 14.5px;
    line-height: 20px;
    padding: 9px 20px;
    border-radius: 0;
    color: var(--chat-texto);
}

/* ── "Dados do contato" (abre ao clicar no nome), como o painel da direita do WhatsApp Web ─────────────────────── */
html[data-tema="whatsapp"] .chat-dados {
    width: min(420px, 100%);
    background: var(--chat-app-fundo);
    border-color: var(--chat-borda);
    color: var(--chat-texto);
    box-shadow: var(--chat-sombra-menu);
}
html[data-tema="whatsapp"] .chat-dados-topo {
    min-height: 59px;
    background: var(--chat-cabecalho-fundo);
    font-size: 16px;
}
html[data-tema="whatsapp"] .chat-dados-topo button {
    color: var(--chat-icone);
}
html[data-tema="whatsapp"] .chat-dados-topo button:hover {
    background: rgba(84, 101, 111, 0.12);
}
html[data-tema="whatsapp"] .chat-dados-bloco {
    background: var(--chat-painel);
    margin-bottom: 10px;
    box-shadow: var(--chat-sombra);
}
html[data-tema="whatsapp"] .chat-dados-foto {
    width: 200px;
    height: 200px;
    font-size: 72px;
    font-weight: 400;
}
html[data-tema="whatsapp"] .chat-dados-rotulo {
    color: var(--chat-texto-secundario-forte);
    margin-bottom: 2px;
}
html[data-tema="whatsapp"] .chat-dados-bloco button {
    color: var(--chat-texto);
}
html[data-tema="whatsapp"] .chat-dados-bloco button:hover {
    background: var(--chat-lista-hover);
}

/* ── Bolhas ──────────────────────────────────────────────────────────────────────────────────────────────────── */
/* O operador que enviou (multiatendente): discreto, no topo, só quando muda */
html[data-tema="whatsapp"] .chat-operador {
    color: var(--chat-meta-enviado);
    font-weight: 500;
}
/* "▶ ticket a partir daqui" ao lado da bolha, sem ocupar uma linha invisível embaixo dela: a linha vazia afastava a
   bolha seguinte e o áudio de 09:16 do "Remoto" parecia o começo de outra sequência sem o nome do autor */
/* no celular a bolha ocupa quase a largura toda: ali o botão segue embaixo dela (não há "passar o mouse") */
html[data-tema="whatsapp"] .chat-msg {
    position: relative;
}
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-ticket-daqui {
        position: absolute;
        left: calc(100% + 8px);
        bottom: 2px;
        margin: 0;
        white-space: nowrap;
    }
}
/* Nota de voz: play cinza, barra verde, a duração embaixo (como no WhatsApp Web) */
html[data-tema="whatsapp"] .chat-voz {
    width: 280px;
}
html[data-tema="whatsapp"] .chat-voz-play {
    color: var(--chat-icone);
}
html[data-tema="whatsapp"] .chat-voz-play svg {
    width: 26px;
    height: 26px;
}
html[data-tema="whatsapp"] .chat-voz-barra {
    accent-color: var(--chat-destaque);
}
html[data-tema="whatsapp"] .chat-voz-tempo {
    color: var(--chat-meta-texto);
}
html[data-tema="whatsapp"] .chat-balao-enviado .chat-voz-tempo,
html[data-tema="whatsapp"] .chat-balao-enviado .chat-voz-play {
    color: var(--chat-meta-enviado);
}

/* ── Caixa de envio: 😊 + [campo em pílula] ➤ ─────────────────────────────────────────────────────────────────── */
html[data-tema="whatsapp"] .chat-barra-envio form {
    align-items: center;
    gap: 4px;
}
html[data-tema="whatsapp"] .chat-campo {
    border-radius: 21px;
    padding: 10px 16px;
}
/* caixa vazia: o ➤ apagado, sem o círculo verde (o WhatsApp mostraria o 🎤; gravar áudio não existe aqui) */
html[data-tema="whatsapp"] .chat-barra-envio button[type="submit"]:disabled {
    background: transparent;
    color: var(--chat-icone);
    opacity: 0.6;
}

/* ── Trilho (janela, computador): a foto/presença do operador no pé, como a foto do perfil no WhatsApp Web ────── */
@media (min-width: 768px) {
    html[data-tema="whatsapp"] .chat-trilho-pe {
        padding-bottom: 50px;   /* o lugar da foto, que é fixa (partials/presenca-operador) */
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela {
        top: auto;
        right: auto;
        left: 12px;
        bottom: 10px;
        transform: none;
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela > [data-seletor-presenca] {
        position: relative;
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border: 0;
        border-radius: 9999px;
        background: #dfe5e7;
        color: #3b4a54;
    }
    html.dark[data-tema="whatsapp"] #presenca-operador .presenca-na-janela > [data-seletor-presenca] {
        background: #374248;
        color: #d1d7db;
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela > [data-seletor-presenca]:hover {
        filter: brightness(0.95);
        background: #dfe5e7;
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela .presenca-rotulo,
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela .presenca-seta {
        display: none;
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela .presenca-avatar {
        display: flex;
        font-size: 17px;
        font-weight: 500;
    }
    /* o estado (verde/âmbar/cinza) é a bolinha no canto da foto */
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela .presenca-ponto {
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 14px;
        height: 14px;
        border: 2px solid var(--chat-trilho-fundo);
    }
    html[data-tema="whatsapp"] #presenca-operador .presenca-na-janela > .presenca-menu {
        top: auto;
        bottom: 0;
        left: 52px;
    }
}

/* ── Movimento: quem pede menos movimento no sistema não vê o "pulo" dos balões nem as transições ────── */
@media (prefers-reduced-motion: reduce) {
    html[data-tema="whatsapp"] .chat-raiz .bubble-enter,
    html[data-tema="whatsapp"] .chat-raiz .typing-dot {
        animation: none;
    }
    html[data-tema="whatsapp"] .chat-raiz *,
    html[data-tema="whatsapp"] .chat-trilho * {
        transition: none;
    }
}

/* ====================================================================================================
 * TEMA 3: PROGRAMANDO SOLUÇÕES (MIDNIGHT NAVY & AMBER GOLD)
 * "Ideias que Funcionam" — Identidade Visual Oficial Programando Soluções
 * ==================================================================================================== */

/* ── Tokens: Programando Soluções Claro ────────────────────────────────────────────────────────────── */
html[data-tema="programando-solucoes"] {
    --chat-app-fundo: #f1f5f9;
    --chat-trilho-fundo: #263d53;
    --chat-painel: #ffffff;
    --chat-fundo: #ffffff;
    --chat-papel-parede: #f8fafc;
    --chat-papel-parede-desenho: none;
    --chat-cabecalho-fundo: #263d53;
    --chat-cabecalho-texto: #ffffff;
    --chat-balao-enviado: #fff8e6;
    --chat-balao-enviado-texto: #172837;
    --chat-balao-recebido: #ffffff;
    --chat-balao-recebido-texto: #172837;
    --chat-meta-texto: #64748b;
    --chat-check: #64748b;
    --chat-check-lido: #f5b82e;
    --chat-barra-envio-fundo: #f8fafc;
    --chat-campo-fundo: #ffffff;
    --chat-lista-fundo: #ffffff;
    --chat-lista-selecionada: #f1f5f9;
    --chat-lista-hover: #f8fafc;
    --chat-destaque: #f5b82e;
    --chat-destaque-forte: #c99119;
    --chat-sobre-destaque: #172837;
    --chat-borda: #e2e8f0;
    --chat-texto: #172837;
    --chat-texto-secundario: #64748b;
    --chat-texto-secundario-forte: #334155;
    --chat-meta-enviado: #475569;
    --chat-icone: #64748b;
    --chat-selo-fundo: #f5b82e;
    --chat-selo-texto: #172837;
    --chat-sistema-fundo: #ffffff;
    --chat-sistema-texto: #64748b;
    --chat-nota-fundo: #fffbeb;
    --chat-nota-texto: #92400e;
    --chat-nota-borda: #f59e0b;
    --chat-foco: #f5b82e;
    --chat-menu-fundo: #ffffff;
    --chat-sombra: 0 1px 3px rgba(38, 61, 83, 0.1);
    --chat-sombra-menu: 0 4px 6px -1px rgba(38, 61, 83, 0.15), 0 2px 4px -2px rgba(38, 61, 83, 0.1);
}

/* ── Tokens: Programando Soluções Escuro (Midnight Navy Profundo & Glow Amber) ─────────────────────── */
html.dark[data-tema="programando-solucoes"],
html[data-tema="programando-solucoes"] {
    --chat-app-fundo: #172837;
    --chat-trilho-fundo: #1f3448;
    --chat-painel: #1f3448;
    --chat-fundo: #172837;
    --chat-papel-parede: #172837;
    --chat-papel-parede-desenho: none;
    --chat-cabecalho-fundo: #1f3448;
    --chat-cabecalho-texto: #f8fafc;
    --chat-balao-enviado: #263d53;
    --chat-balao-enviado-texto: #f8fafc;
    --chat-balao-recebido: #1f3448;
    --chat-balao-recebido-texto: #f8fafc;
    --chat-meta-texto: #94a3b8;
    --chat-check: #94a3b8;
    --chat-check-lido: #f5b82e;
    --chat-barra-envio-fundo: #1f3448;
    --chat-campo-fundo: #263d53;
    --chat-lista-fundo: #1f3448;
    --chat-lista-selecionada: #263d53;
    --chat-lista-hover: #263d53;
    --chat-destaque: #f5b82e;
    --chat-destaque-forte: #ffdf5a;
    --chat-sobre-destaque: #172837;
    --chat-borda: rgba(255, 255, 255, 0.08);
    --chat-texto: #f8fafc;
    --chat-texto-secundario: #94a3b8;
    --chat-texto-secundario-forte: #cbd5e1;
    --chat-meta-enviado: #f5b82e;
    --chat-icone: #94a3b8;
    --chat-selo-fundo: #f5b82e;
    --chat-selo-texto: #172837;
    --chat-sistema-fundo: #263d53;
    --chat-sistema-texto: #94a3b8;
    --chat-nota-fundo: #2f2814;
    --chat-nota-texto: #ffdf5a;
    --chat-nota-borda: #f5b82e;
    --chat-foco: #f5b82e;
    --chat-menu-fundo: #263d53;
    --chat-sombra: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --chat-sombra-menu: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
}

/* ── Classes Estruturais: Programando Soluções ────────────────────────────────────────────────── */
html[data-tema="programando-solucoes"] .chat-raiz {
    background: var(--chat-painel);
    border-color: var(--chat-borda);
    color: var(--chat-texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html[data-tema="programando-solucoes"] .chat-trilho {
    background: var(--chat-trilho-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-cabecalho {
    background: var(--chat-cabecalho-fundo);
    color: var(--chat-cabecalho-texto);
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-barra-envio {
    background: var(--chat-barra-envio-fundo);
    border-color: var(--chat-borda);
    color: var(--chat-icone);
}
html[data-tema="programando-solucoes"] .chat-campo {
    background: var(--chat-campo-fundo);
    color: var(--chat-texto);
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-lista {
    background: var(--chat-lista-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-lista-cabecalho {
    background: var(--chat-cabecalho-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-lista-item {
    border-color: var(--chat-borda);
}
html[data-tema="programando-solucoes"] .chat-lista-item:hover {
    background: var(--chat-lista-hover);
}
html[data-tema="programando-solucoes"] .chat-lista-item-ativo {
    background: var(--chat-lista-selecionada) !important;
    border-left-color: var(--chat-destaque) !important;
}
html[data-tema="programando-solucoes"] .chat-balao-enviado {
    background: var(--chat-balao-enviado);
    color: var(--chat-balao-enviado-texto);
    border: 1px solid rgba(245, 184, 46, 0.25);
    border-radius: 12px;
    border-bottom-right-radius: 2px;
    box-shadow: var(--chat-sombra);
}
html[data-tema="programando-solucoes"] .chat-balao-recebido {
    background: var(--chat-balao-recebido);
    color: var(--chat-balao-recebido-texto);
    border: 1px solid var(--chat-borda);
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    box-shadow: var(--chat-sombra);
}
html[data-tema="programando-solucoes"] .chat-meta {
    color: var(--chat-meta-texto);
}
html[data-tema="programando-solucoes"] .chat-balao-enviado .chat-meta {
    color: var(--chat-meta-enviado);
}
html[data-tema="programando-solucoes"] .chat-mensagens {
    background: var(--chat-papel-parede);
}

/* ====================================================================================================
 * TEMA 2: CONVERSIO (CLEAN MODERN SLATE & ROYAL BLUE)
 * ==================================================================================================== */

/* ── Tokens: Conversio Claro ────────────────────────────────────────────────────────────────────────── */
html[data-tema="conversio"] {
    --chat-app-fundo: #f8fafc;
    --chat-trilho-fundo: #ffffff;
    --chat-painel: #ffffff;
    --chat-fundo: #ffffff;
    --chat-papel-parede: #f1f5f9;
    --chat-papel-parede-desenho: none;
    --chat-cabecalho-fundo: #ffffff;
    --chat-cabecalho-texto: #0f172a;
    --chat-balao-enviado: #2563eb;
    --chat-balao-enviado-texto: #ffffff;
    --chat-balao-recebido: #ffffff;
    --chat-balao-recebido-texto: #0f172a;
    --chat-meta-texto: #64748b;
    --chat-check: #64748b;
    --chat-check-lido: #2563eb;
    --chat-barra-envio-fundo: #ffffff;
    --chat-campo-fundo: #f8fafc;
    --chat-lista-fundo: #ffffff;
    --chat-lista-selecionada: #eff6ff;
    --chat-lista-hover: #f8fafc;
    --chat-destaque: #2563eb;
    --chat-destaque-forte: #1d4ed8;
    --chat-sobre-destaque: #ffffff;
    --chat-borda: #e2e8f0;
    --chat-texto: #0f172a;
    --chat-texto-secundario: #64748b;
    --chat-texto-secundario-forte: #334155;
    --chat-meta-enviado: #dbeafe;
    --chat-icone: #64748b;
    --chat-selo-fundo: #2563eb;
    --chat-selo-texto: #ffffff;
    --chat-sistema-fundo: #ffffff;
    --chat-sistema-texto: #64748b;
    --chat-nota-fundo: #fffbeb;
    --chat-nota-texto: #92400e;
    --chat-nota-borda: #f59e0b;
    --chat-foco: #2563eb;
    --chat-menu-fundo: #ffffff;
    --chat-sombra: 0 1px 3px rgba(15, 23, 42, 0.08);
    --chat-sombra-menu: 0 10px 15px -3px rgba(15, 23, 42, 0.1);
}

/* ── Tokens: Conversio Escuro ────────────────────────────────────────────────────────────────────────── */
html.dark[data-tema="conversio"],
html[data-tema="conversio"] {
    --chat-app-fundo: #0f172a;
    --chat-trilho-fundo: #0b1120;
    --chat-painel: #1e293b;
    --chat-fundo: #0f172a;
    --chat-papel-parede: #0f172a;
    --chat-papel-parede-desenho: none;
    --chat-cabecalho-fundo: #1e293b;
    --chat-cabecalho-texto: #f8fafc;
    --chat-balao-enviado: #2563eb;
    --chat-balao-enviado-texto: #ffffff;
    --chat-balao-recebido: #1e293b;
    --chat-balao-recebido-texto: #f8fafc;
    --chat-meta-texto: #94a3b8;
    --chat-check: #94a3b8;
    --chat-check-lido: #60a5fa;
    --chat-barra-envio-fundo: #1e293b;
    --chat-campo-fundo: #0f172a;
    --chat-lista-fundo: #1e293b;
    --chat-lista-selecionada: rgba(37, 99, 235, 0.2);
    --chat-lista-hover: rgba(255, 255, 255, 0.04);
    --chat-destaque: #3b82f6;
    --chat-destaque-forte: #60a5fa;
    --chat-sobre-destaque: #0f172a;
    --chat-borda: rgba(255, 255, 255, 0.08);
    --chat-texto: #f8fafc;
    --chat-texto-secundario: #94a3b8;
    --chat-texto-secundario-forte: #cbd5e1;
    --chat-meta-enviado: #bfdbfe;
    --chat-icone: #94a3b8;
    --chat-selo-fundo: #3b82f6;
    --chat-selo-texto: #ffffff;
    --chat-sistema-fundo: #0f172a;
    --chat-sistema-texto: #94a3b8;
    --chat-nota-fundo: #3a2806;
    --chat-nota-texto: #fde68a;
    --chat-nota-borda: #b45309;
    --chat-foco: #3b82f6;
    --chat-menu-fundo: #0f172a;
    --chat-sombra: 0 1px 3px rgba(0, 0, 0, 0.3);
    --chat-sombra-menu: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ── Classes Estruturais: Conversio ──────────────────────────────────────────────────────────── */
html[data-tema="conversio"] .chat-raiz {
    background: var(--chat-painel);
    border-color: var(--chat-borda);
    color: var(--chat-texto);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html[data-tema="conversio"] .chat-trilho {
    background: var(--chat-trilho-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-cabecalho {
    background: var(--chat-cabecalho-fundo);
    color: var(--chat-cabecalho-texto);
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-barra-envio {
    background: var(--chat-barra-envio-fundo);
    border-color: var(--chat-borda);
    color: var(--chat-icone);
}
html[data-tema="conversio"] .chat-campo {
    background: var(--chat-campo-fundo);
    color: var(--chat-texto);
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-lista {
    background: var(--chat-lista-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-lista-cabecalho {
    background: var(--chat-cabecalho-fundo);
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-lista-item {
    border-color: var(--chat-borda);
}
html[data-tema="conversio"] .chat-lista-item:hover {
    background: var(--chat-lista-hover);
}
html[data-tema="conversio"] .chat-lista-item-ativo {
    background: var(--chat-lista-selecionada) !important;
    border-left-color: var(--chat-destaque) !important;
}
html[data-tema="conversio"] .chat-balao-enviado {
    background: var(--chat-balao-enviado);
    color: var(--chat-balao-enviado-texto);
    border-radius: 14px;
    border-bottom-right-radius: 2px;
    box-shadow: var(--chat-sombra);
}
html[data-tema="conversio"] .chat-balao-recebido {
    background: var(--chat-balao-recebido);
    color: var(--chat-balao-recebido-texto);
    border: 1px solid var(--chat-borda);
    border-radius: 14px;
    border-bottom-left-radius: 2px;
    box-shadow: var(--chat-sombra);
}
html[data-tema="conversio"] .chat-meta {
    color: var(--chat-meta-texto);
}
html[data-tema="conversio"] .chat-balao-enviado .chat-meta {
    color: var(--chat-meta-enviado);
}
html[data-tema="conversio"] .chat-mensagens {
    background: var(--chat-papel-parede);
}

/* ====================================================================================================
 * HARMONIZAÇÃO ARQUITETURAL DAS COLUNAS NOS TRÊS TEMAS
 * ==================================================================================================== */

/* TEMA WHATSAPP: Acabamento 1:1 com WhatsApp Web / Android */
html[data-tema="whatsapp"] #chat-app,
html[data-tema="whatsapp"] .chat-raiz {
    background: var(--chat-painel) !important;
    border: 1px solid var(--chat-borda) !important;
}
html[data-tema="whatsapp"] .chat-lista {
    background: var(--chat-lista-fundo) !important;
    border-right: 1px solid var(--chat-borda) !important;
    border-left: none !important;
}
html[data-tema="whatsapp"] .chat-lista-cabecalho {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="whatsapp"] .chat-painel-ativo {
    background: var(--chat-painel) !important;
    border-left: none !important;
}
html[data-tema="whatsapp"] .chat-conversa-topo {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="whatsapp"] .chat-painel-lateral {
    background: var(--chat-painel) !important;
    border-left: 1px solid var(--chat-borda) !important;
    border-right: none !important;
}
html[data-tema="whatsapp"] .chat-lista-protocolos-wrapper {
    display: none !important; /* No tema WhatsApp, esconde os botões de protocolo para manter fidelidade ao WhatsApp */
}

/* TEMA CONVERSIO: Midnight Slate Profissional */
html[data-tema="conversio"] #chat-app,
html[data-tema="conversio"] .chat-raiz {
    background: var(--chat-painel) !important;
    border: 1px solid var(--chat-borda) !important;
}
html[data-tema="conversio"] .chat-lista {
    background: var(--chat-lista-fundo) !important;
    border-right: 1px solid var(--chat-borda) !important;
    border-left: none !important;
}
html[data-tema="conversio"] .chat-lista-cabecalho {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="conversio"] .chat-painel-ativo {
    background: var(--chat-painel) !important;
    border-left: none !important;
}
html[data-tema="conversio"] .chat-conversa-topo {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="conversio"] .chat-painel-lateral {
    background: var(--chat-painel) !important;
    border-left: 1px solid var(--chat-borda) !important;
    border-right: none !important;
}

/* TEMA PROGRAMANDO SOLUÇÕES: Obsidian & Indigo / Amber */
html[data-tema="programando-solucoes"] #chat-app,
html[data-tema="programando-solucoes"] .chat-raiz {
    background: var(--chat-painel) !important;
    border: 1px solid var(--chat-borda) !important;
}
html[data-tema="programando-solucoes"] .chat-lista {
    background: var(--chat-lista-fundo) !important;
    border-right: 1px solid var(--chat-borda) !important;
    border-left: none !important;
}
html[data-tema="programando-solucoes"] .chat-lista-cabecalho {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="programando-solucoes"] .chat-painel-ativo {
    background: var(--chat-painel) !important;
    border-left: none !important;
}
html[data-tema="programando-solucoes"] .chat-conversa-topo {
    background: var(--chat-cabecalho-fundo) !important;
    border-bottom: 1px solid var(--chat-borda) !important;
}
html[data-tema="programando-solucoes"] .chat-painel-lateral {
    background: var(--chat-painel) !important;
    border-left: 1px solid var(--chat-borda) !important;
    border-right: none !important;
}

/* ====================================================================================================
 * ERGONOMIA MOBILE & PWA UNIVERSAL (WHATSAPP MOBILE NATIVO) - HARMONIZACAO DOS 3 TEMAS
 * ==================================================================================================== */
@media (max-width: 1023.98px), (pointer: coarse), (display-mode: standalone) {
    html[data-tema="whatsapp"] .chat-raiz,
    html[data-tema="conversio"] .chat-raiz,
    html[data-tema="programando-solucoes"] .chat-raiz,
    html.conversio-mobile-mode .chat-raiz {
        zoom: 1 !important;
        transform: none !important;
    }
    
    html[data-tema="whatsapp"] .chat-lista-item,
    html[data-tema="conversio"] .chat-lista-item,
    html[data-tema="programando-solucoes"] .chat-lista-item,
    html.conversio-mobile-mode .chat-lista-item,
    html.conversio-mobile-mode[data-densidade] .chat-lista-item,
    html.conversio-mobile-mode.sidebar-recolhida .chat-lista-item {
        min-height: 76px !important;
        height: 76px !important;
        max-height: 76px !important;
        padding: 10px 16px !important;
        gap: 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid var(--chat-borda, rgba(255, 255, 255, 0.08)) !important;
    }

    html[data-tema="whatsapp"] .chat-lista-corpo,
    html[data-tema="conversio"] .chat-lista-corpo,
    html[data-tema="programando-solucoes"] .chat-lista-corpo,
    html.conversio-mobile-mode .chat-lista-corpo {
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        border-bottom: none !important;
    }
    
    html[data-tema="whatsapp"] .chat-lista-item > div:last-child,
    html[data-tema="conversio"] .chat-lista-item > div:last-child,
    html[data-tema="programando-solucoes"] .chat-lista-item > div:last-child {
        border-bottom: none !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    html[data-tema="whatsapp"] .chat-lista-item .chat-avatar,
    html[data-tema="conversio"] .chat-lista-item .chat-avatar,
    html[data-tema="programando-solucoes"] .chat-lista-item .chat-avatar,
    html[data-tema="whatsapp"] .chat-lista .chat-avatar,
    html[data-tema="conversio"] .chat-lista .chat-avatar,
    html[data-tema="programando-solucoes"] .chat-lista .chat-avatar,
    html.conversio-mobile-mode .chat-avatar {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        max-width: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 1.25rem !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    html[data-tema="whatsapp"] .chat-lista-item .chat-avatar img,
    html[data-tema="conversio"] .chat-lista-item .chat-avatar img,
    html[data-tema="programando-solucoes"] .chat-lista-item .chat-avatar img,
    html.conversio-mobile-mode .chat-avatar img,
    html.conversio-mobile-mode .chat-avatar [data-foto-perfil] {
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        border-radius: 9999px !important;
    }

    html[data-tema="whatsapp"] .chat-cabecalho .chat-avatar,
    html[data-tema="conversio"] .chat-cabecalho .chat-avatar,
    html[data-tema="programando-solucoes"] .chat-cabecalho .chat-avatar,
    html.conversio-mobile-mode .chat-cabecalho .chat-avatar {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        font-size: 1rem !important;
        border-radius: 9999px !important;
        overflow: hidden !important;
    }
    
    html[data-tema="whatsapp"] .chat-lista-corpo h4,
    html[data-tema="conversio"] .chat-lista-corpo h4,
    html[data-tema="programando-solucoes"] .chat-lista-corpo h4,
    html.conversio-mobile-mode .chat-lista-corpo h4 {
        font-size: 16.5px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }
    
    html[data-tema="whatsapp"] .chat-lista-corpo p,
    html[data-tema="conversio"] .chat-lista-corpo p,
    html[data-tema="programando-solucoes"] .chat-lista-corpo p,
    html.conversio-mobile-mode .chat-lista-corpo p {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    html[data-tema="whatsapp"] .chat-lista-hora,
    html[data-tema="conversio"] .chat-lista-hora,
    html[data-tema="programando-solucoes"] .chat-lista-hora,
    html.conversio-mobile-mode .chat-lista-hora {
        font-size: 12.5px !important;
    }
    
    html[data-tema="whatsapp"] .chat-balao-enviado,
    html[data-tema="whatsapp"] .chat-balao-recebido,
    html[data-tema="conversio"] .chat-balao-enviado,
    html[data-tema="conversio"] .chat-balao-recebido,
    html[data-tema="programando-solucoes"] .chat-balao-enviado,
    html[data-tema="programando-solucoes"] .chat-balao-recebido {
        font-size: 15.5px !important;
        line-height: 1.4 !important;
        padding: 9px 13px !important;
        max-width: 86% !important;
    }
    
    html[data-tema="whatsapp"] .chat-campo,
    html[data-tema="conversio"] .chat-campo,
    html[data-tema="programando-solucoes"] .chat-campo {
        font-size: 16px !important;
        padding: 10px 14px !important;
        min-height: 46px !important;
    }
    
    html[data-tema="whatsapp"] .chat-barra-envio,
    html[data-tema="conversio"] .chat-barra-envio,
    html[data-tema="programando-solucoes"] .chat-barra-envio {
        padding: 8px 10px !important;
        min-height: 56px !important;
    }

    /* Badges de mensagens nao lidas com visual redondo WhatsApp */
    html[data-tema="whatsapp"] .chat-lista-badge,
    html[data-tema="conversio"] .chat-lista-badge,
    html[data-tema="programando-solucoes"] .chat-lista-badge,
    html.conversio-mobile-mode .chat-lista-badge,
    .chat-lista-item .rounded-full.bg-emerald-500,
    .chat-lista-item .rounded-full.bg-emerald-600 {
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 5px !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ── Regras Universais de Selos e Menus de Ação (Blindagem v3.8.21) ──────────────── */
.chat-selo {
    background-color: #25d366 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.chat-cabecalho-acoes .chat-menu {
    min-width: 230px !important;
    padding: 6px 0 !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important;
}

.chat-cabecalho-acoes .chat-menu :is(button, a) {
    font-size: 14px !important;
    line-height: 20px !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    text-align: left !important;
}