/* b1-nucleo-e-chamada.css — pedaço 1/8 do antigo painel-body.css. A ORDEM dos links
   no index.html é a cascata: não reordenar, não trocar de posição. */

        :root {
            --bg-main: #121212;
            --bg-sidebar: #1e1e1e;
            --bg-header: #252525;
            --bg-chat: #141414;
            --bg-bubble-sent: #005c4b;
            --bg-bubble-received: #252525;
            --text-main: #e0e0e0;
            --text-secondary: #aaaaaa;
            --accent: #00a884;
            --border: #333333;
            --asaas: #0066ff;
            /* balão de dica (barra do topo e filtros da lista) — um desenho só */
            --tip-bg: #2a2d31;
            --tip-fg: #e9edef;
            --tip-line: rgba(255, 255, 255, 0.09);
            --tip-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
        }

        /* ── Cartão de chamada (voz) ──
           REPOSICIONADO EM 20/08/2026, a pedido do dono ("posicione melhor essa
           parte"). O desenho de 08/08 era uma barra de 960px colada no rodapé,
           centralizada: ela cobria as mensagens novas E o campo de digitar, que
           são justamente as duas coisas que o operador precisa ver enquanto fala.

           Agora é um CARTÃO COMPACTO de 320px que nasce no canto superior direito,
           logo abaixo da barra do topo (a posição vem do `getBoundingClientRect`
           da própria barra, em `chamada.js` — nada de altura chutada, que quebraria
           no modo desktop, onde os controles de janela moram lá em cima), e que o
           operador ARRASTA para onde quiser; o lugar escolhido fica guardado.
           Enquanto a régua não some, tudo em degraus de 4px. */
        .chamada-barra {
            position: fixed;
            top: 84px;
            right: 24px;
            z-index: 4000;
            display: none;
            flex-direction: column;
            gap: 12px;
            width: 320px;
            max-width: calc(100vw - 32px);
            padding: 14px 16px 12px;
            border-radius: 16px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            box-shadow: 0 12px 32px rgba(0, 0, 0, .38);
            opacity: 0;
            transform: translateY(-8px) scale(.98);
            transition: opacity .18s cubic-bezier(.4, 0, .2, 1), transform .18s cubic-bezier(.4, 0, .2, 1);
            cursor: grab;
            user-select: none;
        }
        .chamada-barra.aberta { display: flex; opacity: 1; transform: translateY(0) scale(1); }
        .chamada-barra.arrastando { cursor: grabbing; transition: none; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }

        .chamada-quem { display: flex; align-items: center; gap: 12px; min-width: 0; }
        /* Fundo + borda, e não só fundo: no tema ESCURO o `--bg-bubble-received`
           é #252525, idêntico ao `--bg-header` do cartão — avatar e botões sumiam
           por completo (visto na foto). O fundo resolve o escuro, a borda resolve
           o claro, onde os dois tokens também se aproximam. */
        .chamada-avatar {
            width: 40px; height: 40px; border-radius: 50%;
            background: var(--bg-main);
            border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center;
            font-size: 17px; color: var(--text-secondary);
            overflow: hidden; flex-shrink: 0;
        }
        .chamada-avatar img { width: 100%; height: 100%; object-fit: cover; }
        .chamada-nome {
            font-size: 15px; font-weight: 600; color: var(--text-main);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .chamada-estado {
            font-size: 12px; color: var(--text-secondary); margin-top: 2px;
            display: flex; align-items: center; gap: 6px;
        }

        /* Ponto que pulsa enquanto a chamada está de pé: dá para ver de longe se
           ainda está tocando (âmbar) ou já conectou (verde). */
        .chamada-pulso {
            width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
            background: var(--text-secondary);
        }
        .chamada-barra.is-tocando .chamada-pulso { background: #f0b429; animation: chamadaPulsar 1.2s infinite; }
        .chamada-barra.is-conectada .chamada-pulso { background: var(--accent); animation: chamadaPulsar 1.6s infinite; }
        @keyframes chamadaPulsar {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: .35; transform: scale(.75); }
        }

        /* Medidor de voz: duas barrinhas que sobem com o som que ENTRA e o que SAI.
           É o que responde sozinho a "a ligação está funcionando?" — sem ele, mudo
           e quebrado são a mesma tela. */
        .chamada-medidores { display: flex; flex-direction: column; gap: 6px; }
        .chamada-medidor { display: flex; align-items: center; gap: 8px; }
        .chamada-medidor > i { width: 12px; font-size: 11px; color: var(--text-secondary); text-align: center; }
        /* `--border` e nao `--bg-main`: no tema CLARO o fundo principal e o mesmo
           #f0f2f5 do cartao e o trilho vazio sumia (visto na foto). */
        .chamada-medidor-trilho {
            flex: 1; height: 4px; border-radius: 999px;
            background: var(--border); overflow: hidden;
        }
        .chamada-medidor-nivel {
            height: 100%; width: 0%; border-radius: 999px;
            background: var(--accent);
            transition: width .08s linear;
        }
        .chamada-medidor.is-saida .chamada-medidor-nivel { background: #38bdf8; }

        .chamada-controles {
            display: flex; align-items: center; gap: 8px;
            padding-top: 10px; border-top: 1px solid var(--border);
        }
        .chamada-botao {
            width: 36px; height: 36px; border-radius: 50%;
            border: 1px solid var(--border); cursor: pointer;
            background: var(--bg-main); color: var(--text-main);
            display: flex; align-items: center; justify-content: center;
            font-size: 14px;
            transition: background .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
        }
        .chamada-botao:hover { background: rgba(255, 255, 255, .12); }
        .chamada-botao:active { transform: scale(.94); }
        .chamada-botao.is-cortado { color: #ff6b6b; }
        .chamada-desligar {
            margin-left: auto;
            min-width: 56px; height: 36px; border-radius: 999px; border: none; cursor: pointer;
            background: #ea3323; color: #fff; font-size: 15px;
            display: flex; align-items: center; justify-content: center;
            transition: background .15s cubic-bezier(.4, 0, .2, 1), transform .15s cubic-bezier(.4, 0, .2, 1);
        }
        .chamada-desligar:hover { background: #cf2b1d; }
        .chamada-desligar:active { transform: scale(.96); }
        .chamada-aviso {
            font-size: 11.5px; color: #f0b429; line-height: 1.4;
            display: flex; align-items: flex-start; gap: 6px;
        }

        /* No celular não há para onde arrastar: vira uma faixa presa no topo.
           O !important existe porque o `chamada.js` escreve `right` em linha para
           ancorar o cartão no desktop — sem ele a faixa ficava com 8px de um lado
           e 24px do outro (medido). */
        @media (max-width: 720px) {
            .chamada-barra {
                width: auto; max-width: none; cursor: default;
                left: 8px !important; right: 8px !important; top: 8px !important;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .chamada-barra, .chamada-botao, .chamada-desligar, .chamada-medidor-nivel { transition: none; }
            .chamada-barra.is-tocando .chamada-pulso,
            .chamada-barra.is-conectada .chamada-pulso { animation: none; }
        }

        :root.light-theme {
            --bg-main: #f0f2f5;
            --bg-sidebar: #ffffff;
            --bg-header: #f0f2f5;
            --bg-chat: #efeae2;
            --bg-bubble-sent: #d9fdd3;
            --bg-bubble-received: #ffffff;
            --text-main: #111b21;
            --text-secondary: #54656f;
            --accent: #00a884;
            --border: #d1d7db;
            --asaas: #0066ff;
            --tip-bg: #ffffff;
            --tip-fg: #111b21;
            --tip-line: #d8dee3;
            --tip-shadow: 0 8px 22px rgba(11, 20, 26, 0.16);
        }

        /* Splash Screen */
        #splash-screen {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-main);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease-out;
        }

        @keyframes pulse-splash {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        /* Loading Bar Cloudflare Static/Progress */
        .loading-bar-container {
            width: 250px;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-top: 30px;
            overflow: hidden;
            position: relative;
        }

        .loading-bar-progress {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            position: absolute;
            left: -100%;
            animation: loading-sweep 2s infinite ease-in-out;
        }

        @keyframes loading-sweep {
            0% { left: -100%; }
            50% { left: 100%; }
            100% { left: -100%; }
        }

        /* Empty State & Disconnected Placeholder */
        .disconnected-placeholder, .syncing-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            background: var(--bg-main);
            color: var(--text-secondary);
            text-align: center;
            padding: 40px;
            z-index: 40;
            position: absolute;
            top: 0;
            left: 0;
        }

        .syncing-icon {
            font-size: 60px;
            margin-bottom: 25px;
            color: var(--accent);
        }

        .disconnected-icon {
            font-size: 80px;
            margin-bottom: 25px;
            color: #f44336;
            animation: pulse-red 2.5s infinite ease-in-out;
            opacity: 0.8;
        }

        @keyframes pulse-red {
            0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(244,67,54,0)); }
            50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(244,67,54,0.4)); opacity: 1; }
            100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(244,67,54,0)); }
        }

        .presence-typing {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #00a884;
            font-weight: 600;
        }

        .presence-typing-dots {
            display: inline-flex;
            align-items: flex-end;
            gap: 3px;
            height: 12px;
        }

        .presence-typing-dots span {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.45;
            animation: typing-bounce 1.15s infinite ease-in-out;
        }

        .presence-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
        .presence-typing-dots span:nth-child(3) { animation-delay: 0.36s; }

        @keyframes typing-bounce {
            0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
            40% { transform: translateY(-4px); opacity: 1; }
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            height: 100vh;
            background-color: var(--bg-main);
            color: var(--text-main);
            display: flex;
            overflow: hidden;
        }

        html.swal2-shown,
        body.swal2-shown,
        html.swal2-height-auto,
        body.swal2-height-auto {
            height: 100vh !important;
            min-height: 100vh !important;
            overflow: hidden !important;
        }

        /* ── o popup do SweetAlert tem que ficar acima de TUDO ────────────────
           MEDIDO em 20/08/2026: o SweetAlert2 v11 declara o container como
           `div:where(.swal2-container){z-index:1060}` — 1060 é MENOR que o
           `#settings-modal { z-index: 10000 !important }` do design-system.css
           (secao 15), entao todo popup aberto de dentro de Configuracoes
           (Novo Departamento, Novo Usuario, Novo Atalho, confirmacoes...)
           nascia ATRAS da tela de Configuracoes e o usuario ficava sem saber
           que havia um dialogo esperando resposta. O mesmo valia para os
           drawers de app (10060) e para o painel de grupo (10050).
           20000 fica acima de todos eles e da pilha de notificacoes (12000),
           e abaixo do `#frozen-overlay` (99999), que e bloqueio de conta e
           precisa cobrir ate o dialogo. */
        .swal2-container {
            position: fixed !important;
            inset: 0 !important;
            width: 100vw !important;
            height: 100vh !important;
            min-height: 100vh !important;
            z-index: 20000 !important;
        }

        /* Scrollbar Styling */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.02);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.16);
            border-radius: 4px;
        }

        /* AI Thoughts Styling */
        .ai-thought-box {
            background: rgba(255, 255, 255, 0.03);
            border-left: 3px solid var(--accent);
            border-radius: 8px;
            margin: 10px 0;
            padding: 0;
            overflow: hidden;
        }

        .ai-thinking-bar-container {
            width: 40px;
            height: 3px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }

        .ai-thinking-bar-progress {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, var(--accent), transparent);
            position: absolute;
            left: -100%;
            animation: loading-sweep 1.5s infinite ease-in-out;
        }

        .ai-thought-header {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .ai-thought-header {
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.02);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
            color: var(--text-main);
            opacity: 0.8;
        }

        .ai-thought-header:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .ai-thought-content {
            padding: 10px 15px;
            line-height: 1.5;
            font-style: italic;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ai-thought-content.hidden {
            display: none;
        }

        .light-theme .ai-thought-box {
            background: rgba(0, 0, 0, 0.03);
            color: #555;
        }

        .light-theme .ai-thought-header {
            background: rgba(0, 0, 0, 0.01);
            color: #333;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.25);
        }

        /* Login Screen — a tela inteira mora em css/login.css (escopada em
           #login-screen, prefixo .lg-*). Aqui ficou só o que o PAINEL usa. */
        .desktop-window-controls {
            display: none;
        }

        body.desktop-app .global-top-bar {
            -webkit-app-region: drag;
        }

        body.desktop-app .global-top-bar button,
        body.desktop-app .global-top-bar select,
        body.desktop-app .global-top-bar i,
        body.desktop-app .global-top-bar img,
        body.desktop-app .global-top-bar span,
        body.desktop-app .global-top-bar__controls {
            -webkit-app-region: no-drag;
        }

        body.desktop-app .desktop-window-controls {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-left: 2px;
            -webkit-app-region: no-drag;
        }

        body.desktop-app .desktop-login-window-controls {
            position: fixed;
            top: 12px;
            right: 12px;
            z-index: 5100;
        }

        .desktop-window-btn {
            width: 34px;
            height: 30px;
            border: none;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: rgba(233,237,239,0.76);
            cursor: pointer;
            transition: background 0.16s ease, color 0.16s ease;
        }

        .desktop-window-btn:hover {
            background: rgba(255,255,255,0.08);
            color: #fff;
        }

        .desktop-window-btn.close:hover {
            background: #e5484d;
            color: #fff;
        }

        #app {
            width: 100%;
            height: 100%;
            display: none;
            overflow: hidden;
            flex-direction: row;
        }

        /* Lateral Menu (Modern Neutral Theme Rail) */
        .lateral-menu {
            width: 64px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 14px 0;
            z-index: 1000;
        }

        :root.dark-theme .lateral-menu,
        html.dark-theme .lateral-menu {
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border);
        }

        .lateral-menu-item {
            width: 44px;
            height: 44px;
            margin: 4px auto;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.18s ease;
            font-size: 18px;
            position: relative;
            background: transparent;
        }

        .lateral-menu-item:hover {
            color: var(--text-main);
            background: var(--bg-surface-hover);
        }

        .lateral-menu-item.active {
            color: var(--accent);
            background: var(--accent-subtle);
        }

        :root.dark-theme .lateral-menu-item.active,
        html.dark-theme .lateral-menu-item.active {
            color: var(--accent);
            background: var(--accent-subtle);
        }

        /* Tooltip do menu lateral — mesmo mecanismo do topo (data-tip, só ::after,
           nunca `title`: ver a nota completa em b4-tema-claro.css). Aqui o balão
           nasce para a DIREITA do ícone, porque a barra é vertical. */
        .lateral-menu-item[data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            left: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%) translateX(-4px);
            padding: 7px 10px;
            border-radius: 8px;
            background: var(--tip-bg);
            border: 1px solid var(--tip-line);
            box-shadow: var(--tip-shadow);
            color: var(--tip-fg);
            font-family: var(--font-sans, 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .005em;
            line-height: 1.2;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.14s cubic-bezier(.2, .7, .3, 1),
                        transform 0.14s cubic-bezier(.2, .7, .3, 1),
                        visibility 0.14s;
            z-index: 4000;
        }

        .lateral-menu-item[data-tip]:hover::after,
        .lateral-menu-item[data-tip]:focus-visible::after {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0);
        }

        /* Sidebar */
        .sidebar {
            width: 400px;
            background: var(--bg-sidebar);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
        }

        .sidebar-header {
            background: var(--bg-header);
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
        }

        /* ── Filtros de atendimento (Todos / Fila / Atendendo / Meus) ──
           ESTE ARQUIVO É O DONO ÚNICO do desenho. Os blocos `.tabs`/`.tab` que
           existiam no design-system.css foram APAGADOS em 20/08/2026: eram
           `!important`, venciam este arquivo por vir depois no index, e o
           resultado era o ícone espremido em 13px com a contagem flutuando POR
           CIMA dele. Só estes 4 elementos do painel usam `.tab`/`.badge`
           (conferido no index e nas 13 páginas avulsas), então não há outra
           tela para quebrar. No celular a barra inteira some (mobile.css) —
           lá os filtros são os chips do trilho da lista. */
        .tabs {
            display: flex;
            gap: 6px;
            padding: 10px 14px;
            background: var(--bg-header);
            border-bottom: 1px solid var(--border);
        }

        .tab {
            flex: 1;
            min-width: 0;
            height: 38px;
            padding: 0 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 10px;
            cursor: pointer;
            color: var(--text-secondary);
            font-size: 16px;
            position: relative;
            transition: background 0.15s ease, color 0.15s ease;
        }

        .tab:hover {
            background: rgba(255, 255, 255, 0.06);
            color: var(--text-main);
        }

        :root.light-theme .tab:hover {
            background: rgba(17, 27, 33, 0.05);
        }

        /* Valor cru, não `--accent-subtle`: o token é 10-12% e, na barra escura,
           não aparecia. Aba selecionada precisa ser visível de relance. */
        .tab.active {
            background: rgba(0, 168, 132, 0.16);
            color: var(--accent);
        }

        :root.light-theme .tab.active {
            background: rgba(0, 168, 132, 0.13);
        }

        /* Dica: mesmo desenho do balão da barra do topo (tokens --tip-*). */
        .tab::after {
            content: attr(data-label);
            position: absolute;
            left: 50%;
            top: calc(100% + 8px);
            transform: translateX(-50%) translateY(-4px);
            padding: 7px 10px;
            border-radius: 8px;
            background: var(--tip-bg);
            border: 1px solid var(--tip-line);
            box-shadow: var(--tip-shadow);
            color: var(--tip-fg);
            font-size: 12px;
            font-weight: 500;
            line-height: 1.2;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.14s cubic-bezier(.2, .7, .3, 1),
                        transform 0.14s cubic-bezier(.2, .7, .3, 1),
                        visibility 0.14s;
            z-index: 30;
        }

        .tab:hover::after,
        .tab:focus-visible::after {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        /* A CONTAGEM É UM CHIP AO LADO DO ÍCONE, não uma bolha por cima dele:
           a bolha antiga era `position:absolute; right:22%` e, com dois dígitos
           ("12"), crescia para a esquerda e cobria o desenho do ícone.

           A cor do chip vem de VARIÁVEIS declaradas na própria aba, não de
           seletores encadeados: `:root` conta como pseudo-classe, então
           `:root.light-theme .tab .badge` (0,4,0) vencia `.tab.active .badge`
           (0,3,0) e o chip da aba selecionada saía com texto branco sobre fundo
           claro — ilegível (medido). Variável declarada no próprio `.tab` sempre
           ganha da herdada do `.tabs`, sem contar especificidade. */
        .tabs {
            --chip-bg: rgba(255, 255, 255, 0.10);
            --chip-fg: var(--text-main);
        }

        :root.light-theme .tabs {
            --chip-bg: rgba(17, 27, 33, 0.08);
        }

        .tab .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 18px;
            padding: 0 5px;
            box-sizing: border-box;
            border-radius: 999px;
            background: var(--chip-bg);
            color: var(--chip-fg);
            font-size: 11px;
            font-weight: 700;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .tab.active {
            --chip-bg: var(--accent);
            --chip-fg: #ffffff;
        }

        /* Só a FILA pede ação — é a única contagem colorida. Antes as três eram
           verdes e disputavam atenção com a cor da aba ativa. */
        #tab-waiting {
            --chip-bg: rgba(244, 67, 54, 0.18);
            --chip-fg: #ff6b6b;
        }

        :root.light-theme #tab-waiting {
            --chip-bg: rgba(211, 47, 47, 0.12);
            --chip-fg: #c62828;
        }

        #tab-waiting.active,
        :root.light-theme #tab-waiting.active {
            --chip-bg: #f44336;
            --chip-fg: #ffffff;
        }

        .avatar {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            object-fit: cover;
            background: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transform: translateZ(0);
            transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease, filter 0.28s ease;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
        }

        .user-avatar-trigger {
            position: relative;
            margin-left: 10px;
        }

        .user-avatar-button {
            width: 35px;
            height: 35px;
            cursor: pointer;
            background: linear-gradient(135deg, #2a3942 0%, #314a57 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #d7e3e9;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.03em;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
            overflow: hidden;
        }

        .user-avatar-button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 20%;
            display: block;
        }

        .user-avatar-button:hover {
            transform: translateY(-1px);
            border-color: rgba(0, 168, 132, 0.45);
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.24);
        }

        .user-avatar-trigger.open .user-avatar-button {
            border-color: rgba(0, 168, 132, 0.55);
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.26);
        }

        .user-avatar-menu {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            width: 240px;
            background: rgba(17, 27, 33, 0.98);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
            padding: 10px;
            display: none;
            z-index: 150;
            backdrop-filter: blur(10px);
        }

        .user-avatar-trigger.open .user-avatar-menu {
            display: block;
        }

        .user-avatar-menu-head {
            padding: 10px 10px 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            margin-bottom: 8px;
        }

        .profile-photo-row {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
        }

        .profile-photo-preview {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: linear-gradient(135deg, #075e54, #128c7e);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            font-weight: 800;
            overflow: hidden;
            flex-shrink: 0;
        }

        .profile-photo-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .user-avatar-menu-name {
            color: var(--text-main);
            font-size: 14px;
            font-weight: 700;
        }

        .user-avatar-menu-role {
            color: var(--text-secondary);
            font-size: 11px;
            margin-top: 4px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .user-avatar-menu button {
            width: 100%;
            border: none;
            background: transparent;
            color: var(--text-main);
            padding: 11px 12px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }

        .user-avatar-menu button:hover {
            background: rgba(255, 255, 255, 0.05);
        }

        .user-avatar-menu button.danger {
            color: #ff8f8f;
        }

        .user-avatar-menu button.danger:hover {
            background: rgba(244, 67, 54, 0.12);
        }

        html.dark-theme .user-avatar-menu {
            background:
                linear-gradient(180deg, rgba(20, 29, 36, 0.99), rgba(16, 24, 31, 0.99));
            border-color: rgba(255, 255, 255, 0.10);
            box-shadow: 0 22px 44px rgba(0, 0, 0, 0.42);
        }

        html.dark-theme .user-avatar-menu-head {
            border-bottom-color: rgba(255, 255, 255, 0.10);
        }

        html.dark-theme .user-avatar-menu-name {
            color: #eef6f4;
        }

        html.dark-theme .user-avatar-menu-role {
            color: rgba(224, 235, 232, 0.76);
        }

        html.dark-theme .user-avatar-menu button {
            color: #e6f0ed;
        }

        html.dark-theme .user-avatar-menu button:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;
        }

        html.dark-theme .user-avatar-menu button.danger {
            color: #ff9f9f;
        }

        html.dark-theme .user-avatar-menu button.danger:hover {
            background: rgba(244, 67, 54, 0.18);
            color: #ffd3d3;
        }

        .search-container {
            padding: 10px;
            background: var(--bg-sidebar);
            border-bottom: 1px solid var(--border);
        }

        .search-box {
            background: var(--bg-header);
            border-radius: 8px;
            display: flex;
            align-items: center;
            padding: 0 12px;
        }

        .search-box input {
            background: transparent;
            border: none;
            padding: 8px;
            color: white;
            width: 100%;
            outline: none;
        }

        .chat-list {
            flex: 1;
            overflow-y: auto;
        }

        @keyframes chat-item-in {
            from { opacity: 0; transform: translateX(-14px); }
            to   { opacity: 1; transform: translateX(0); }
        }

        @keyframes chat-open-slide {
            from { opacity: 0; transform: translateY(10px) scale(0.995); }
            to   { opacity: 1; transform: translateY(0) scale(1); }
        }

        .chat-item {
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid var(--border);
            transition: background 0.15s ease;
            position: relative;
            overflow: hidden;
        }

        .chat-item.is-bulk-mode {
            padding-left: 14px;
        }

        .chat-item.is-bulk-selected {
            background: linear-gradient(135deg, rgba(0, 168, 132, 0.18), rgba(255,255,255,0.03));
            box-shadow: inset 0 0 0 1px rgba(0,168,132,0.2), 0 12px 26px rgba(0, 168, 132, 0.12);
        }

        .chat-bulk-checkbox {
            position: relative;
            width: 22px;
            height: 22px;
            min-width: 22px;
            border-radius: 7px;
            border: 1px solid rgba(255,255,255,0.14);
            background: rgba(255,255,255,0.05);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            z-index: 1;
        }

        .chat-bulk-checkbox input {
            position: absolute;
            inset: 0;
            opacity: 0;
            margin: 0;
            cursor: pointer;
        }

        .chat-bulk-checkbox span {
            width: 10px;
            height: 10px;
            border-radius: 3px;
            background: transparent;
            transform: scale(0.8);
            transition: all 0.18s ease;
        }

        .chat-bulk-checkbox input:checked + span {
            background: #00d4aa;
            box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.18);
            transform: scale(1);
        }

        .chat-item-menu-trigger {
            width: 28px;
            height: 28px;
            border: none;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
            color: var(--text-secondary);
            opacity: 0;
            transform: translateX(10px) scale(0.92);
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
            box-shadow: 0 6px 18px rgba(0,0,0,0.14);
            flex-shrink: 0;
        }

        .chat-item:hover .chat-item-menu-trigger,
        .chat-item-menu-trigger:focus-visible {
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto;
        }

        .chat-item-menu-trigger:hover,
        .chat-item-menu-trigger:focus-visible {
            background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.08));
            color: var(--text-main);
            box-shadow: 0 8px 24px rgba(0,0,0,0.22);
            outline: none;
        }

        .chat-item-anim {
            animation: chat-item-in 0.28s ease both;
        }

        .chat-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 12%;
            height: 76%;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--accent);
            opacity: 0;
            transition: opacity 0.2s ease, transform 0.2s ease;
            transform: scaleY(0.5);
        }

        .chat-item::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, rgba(0, 168, 132, 0.12), rgba(0, 168, 132, 0.02) 34%, transparent 72%);
            opacity: 0;
            transform: translateX(-18px);
            transition: opacity 0.3s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
        }

        .chat-item:hover {
            background: #202c33;
        }

        :root.light-theme .chat-item:hover {
            background: #f0f2f2;
        }

        .chat-item.active {
            background: #2a3942;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
        }

        .chat-item.active::before {
            opacity: 1;
            transform: scaleY(1);
        }

        :root.light-theme .chat-item.active {
            background: #e9edef;
        }

        :root.light-theme .chat-item.is-bulk-selected {
            background: linear-gradient(135deg, rgba(0, 168, 132, 0.1), rgba(0,0,0,0.01));
        }

        :root.light-theme .chat-bulk-checkbox {
            border-color: rgba(17, 27, 33, 0.12);
            background: rgba(17, 27, 33, 0.03);
        }

        .messages-container.chat-opening {
            animation: chat-open-slide 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
        }


        /* ── SKELETON DE CARREGAMENTO ─────────────────────────────────────────
           Componente único do painel, para toda tela que espera dados. Nasceu de
           `.grupo-skeleton` (b7-painel-do-grupo.css), que já fazia isto no painel
           do grupo e na agenda — a técnica é a mesma, só generalizada: o brilho é
           `rgba(127,127,127,…)`, um cinza NEUTRO que funciona no tema claro e no
           escuro sem precisar de override, e por isso não há um único hex de tema
           aqui. Mora no núcleo (b1) porque toda tela precisa alcançar. (26/08/2026)

           Uso: `<div class="sk sk-linha"></div>`, ou pelos ajudantes do util.js
           (`skeletonLinhas`, `skeletonLista`, `skeletonCards`, `skeletonTabela`). */
        /* O MOVIMENTO — três coisas deixavam isto "duro" (26/08/2026):
           1. `animation: skBrilho 1.1s infinite` sem curva declarada usa `ease`, o
              padrão do CSS. Brilho que acelera no meio e freia nas pontas parece
              travar e reiniciar. Shimmer só fica contínuo em `linear`.
           2. O percurso ia de 200% a -200% (400%) com fundo de 200%: metade da
              volta era tempo MORTO, sem luz na tela — daí a sensação de piscar.
              Agora o percurso é exatamente uma largura de fundo, sem buraco.
           3. Todos os blocos brilhavam no mesmo instante. Com um atraso pequeno
              por posição, a luz atravessa a lista em vez de piscar tudo junto — é
              o que mais muda a sensação.
           A faixa de luz também ganhou forma: 105° em vez de 90° e paradas com
           patamar, para ter um facho e não um degradê chapado. */
        /* O facho corre em `transform`, NUNCA em `background-position` (26/08/2026).
           Por que isso importa: `background-position` é propriedade de PINTURA — o
           navegador repinta o elemento inteiro a cada quadro. Com 47 blocos na
           tela isso são 47 repinturas por quadro, e elas caem justamente no
           instante em que o painel está montando a tela, que já é o momento mais
           pesado. `transform` é composto na GPU: pinta uma vez e depois só desloca
           a camada. Mesma aparência, custo de outra ordem. */
        @keyframes skBrilho {
            from { transform: translateX(-100%); }
            to   { transform: translateX(100%); }
        }
        /* Respiração lenta por cima do facho: o bloco "vive" mesmo no intervalo
           entre duas passadas de luz. Sutil de propósito — 0,86 e não 0,5.
           Aplicada no CONTAINER, não em cada bloco: um elemento animando em vez
           de 47, e o efeito na tela é o mesmo. */
        @keyframes skRespira {
            0%, 100% { opacity: 1; }
            50%      { opacity: 0.9; }
        }
        @keyframes skEntra {
            from { opacity: 0; transform: translateY(4px); }
            to   { opacity: 1; transform: none; }
        }

        /* A COR do esqueleto sai do texto do tema, não de um cinza fixo — e isso
           é o que torna o facho visível nos dois lados. O `rgba(127,127,127)`
           neutro da primeira versão tinha contraste bom no tema claro e quase
           nenhum no escuro (0,09 → 0,21 de cinza médio sobre #121212 some), então
           o brilho passava sem aparecer e o bloco parecia parado. `--text-main` é
           claro no tema escuro e escuro no tema claro: derivando dele, o facho
           inverte sozinho e continua sendo uma fonte só. `color-mix` já é usado
           em b5 e b6 deste mesmo painel. (26/08/2026) */
        .sk {
            --sk-base: color-mix(in srgb, var(--text-main) 7%, transparent);
            --sk-luz:  color-mix(in srgb, var(--text-main) 20%, transparent);
            position: relative;
            overflow: hidden;
            background: var(--sk-base);
            border-radius: 8px;
            flex-shrink: 0;
            pointer-events: none;
            /* Fecha o elemento como caixa própria de pintura: o repaint de um
               bloco não obriga o navegador a reavaliar a árvore em volta. */
            contain: paint;
        }

        /* O facho é uma camada por cima que só DESLIZA. Sem `will-change`: com 47
           blocos, promover cada um a camada própria troca custo de pintura por
           custo de memória de GPU — o transform animado já é composto sozinho. */
        .sk::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg,
                transparent 20%,
                var(--sk-luz) 50%,
                transparent 80%);
            transform: translateX(-100%);
            animation: skBrilho 1.45s linear infinite;
            animation-delay: inherit;
        }

        /* O esqueleto não aparece de estalo: entra num movimento curto, de baixo
           para cima, como o conteúdo que vai substituí-lo. A respiração mora aqui,
           no container — um elemento animando em vez de 47. */
        .sk-lista,
        .sk-grade,
        .sk-conversa {
            animation: skEntra 0.22s cubic-bezier(0.22, 1, 0.36, 1) both,
                       skRespira 3.2s ease-in-out infinite;
        }

        /* ESCALONAMENTO: cada item entra e brilha um pouco depois do anterior.
           Cobre tanto o `.sk` filho direto quanto o `.sk` dentro de um wrapper
           (`.sk-linha-dupla`, `.sk-texto`), que é como as listas são montadas. */
        .sk-lista > *:nth-child(1),  .sk-grade > *:nth-child(1)  { animation-delay: 0s; }
        .sk-lista > *:nth-child(2),  .sk-grade > *:nth-child(2)  { animation-delay: 0.05s; }
        .sk-lista > *:nth-child(3),  .sk-grade > *:nth-child(3)  { animation-delay: 0.10s; }
        .sk-lista > *:nth-child(4),  .sk-grade > *:nth-child(4)  { animation-delay: 0.15s; }
        .sk-lista > *:nth-child(5),  .sk-grade > *:nth-child(5)  { animation-delay: 0.20s; }
        .sk-lista > *:nth-child(6),  .sk-grade > *:nth-child(6)  { animation-delay: 0.25s; }
        .sk-lista > *:nth-child(7),  .sk-grade > *:nth-child(7)  { animation-delay: 0.30s; }
        .sk-lista > *:nth-child(8),  .sk-grade > *:nth-child(8)  { animation-delay: 0.35s; }
        .sk-lista > *:nth-child(9),  .sk-grade > *:nth-child(9)  { animation-delay: 0.40s; }
        .sk-lista > *:nth-child(n+10), .sk-grade > *:nth-child(n+10) { animation-delay: 0.45s; }
        /* O wrapper não tem animação própria; o atraso precisa chegar ao bloco. */
        .sk-lista > * .sk, .sk-grade > * .sk { animation-delay: inherit; }

        /* Escala de alturas, em múltiplos de 4 — os mesmos degraus do painel. */
        .sk-linha  { height: 12px; border-radius: 6px; }
        .sk-titulo { height: 16px; border-radius: 6px; }
        .sk-bloco  { height: 52px; border-radius: 12px; }
        .sk-card   { height: 96px; border-radius: 12px; }
        .sk-pill   { height: 20px; width: 64px; border-radius: 999px; }
        .sk-avatar { width: 36px; height: 36px; border-radius: 50%; }
        .sk-avatar-sm { width: 22px; height: 22px; border-radius: 6px; }

        /* Larguras para o skeleton não virar um bloco chapado: linha de tamanho
           variável lê como texto, linha toda igual lê como caixa vazia. */
        .sk-w-30 { width: 30%; }
        .sk-w-45 { width: 45%; }
        .sk-w-60 { width: 60%; }
        .sk-w-75 { width: 75%; }
        .sk-w-90 { width: 90%; }
        .sk-w-100 { width: 100%; }

        .sk-lista { display: flex; flex-direction: column; gap: 8px; }
        .sk-linha-dupla { display: flex; align-items: center; gap: 10px; }
        .sk-linha-dupla .sk-texto { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
        .sk-grade { display: grid; gap: 12px; }

        /* Leitor de tela não deve anunciar o esqueleto como conteúdo. */
        .sk-area { position: relative; }
        .sk-area[aria-busy="true"] { cursor: progress; }

        /* Quem pediu menos movimento no sistema recebe o bloco parado, não o
           brilho correndo — o skeleton continua comunicando "carregando". */
        @media (prefers-reduced-motion: reduce) {
            .sk,
            .sk::after,
            .sk-lista,
            .sk-grade,
            .sk-conversa { animation: none; }
            /* Sem o facho deslizando, o bloco parado precisa se ver sozinho. */
            .sk { background: color-mix(in srgb, var(--text-main) 12%, transparent); }
            .sk::after { content: none; }
        }

        /* Esqueleto de conversa: bolhas alternando os lados. Altura variável de
           propósito — conversa real não tem bolha toda do mesmo tamanho. */
        .sk-conversa { display: flex; flex-direction: column; gap: 10px; padding: 24px 16px; }
        .sk-bolha-linha { display: flex; }
        .sk-bolha-linha.is-direita { justify-content: flex-end; }
        .sk-bolha { height: 44px; border-radius: 12px; }
        .sk-bolha-linha:nth-child(3n) .sk-bolha { height: 62px; }
        /* A conversa "preenche" de cima para baixo, como mensagem chegando. */
        .sk-conversa > *:nth-child(1) { animation-delay: 0s; }
        .sk-conversa > *:nth-child(2) { animation-delay: 0.06s; }
        .sk-conversa > *:nth-child(3) { animation-delay: 0.12s; }
        .sk-conversa > *:nth-child(4) { animation-delay: 0.18s; }
        .sk-conversa > *:nth-child(5) { animation-delay: 0.24s; }
        .sk-conversa > *:nth-child(n+6) { animation-delay: 0.30s; }
        .sk-conversa > * .sk { animation-delay: inherit; }

        /* Linha de esqueleto dentro de <tbody> real: o padding acompanha o da
           tabela para a altura não saltar quando os dados chegam. */
        .sk-tr td { padding: 12px 10px; }