/* b4-tema-claro.css — pedaço 4/8 do antigo painel-body.css. A ORDEM dos links
   no index.html é a cascata: não reordenar, não trocar de posição. */
        /* ===== COMPREHENSIVE LIGHT THEME OVERRIDES ===== */
        html.light-theme body {
            background-color: #f0f2f5 !important;
            color: #111b21 !important;
        }

        html.light-theme .lateral-menu {
            background: #008069 !important;
            border-right: none !important;
        }

        /* O rail claro e VERDE (original): itens precisam de icone claro */
        html.light-theme .lateral-menu-item {
            color: rgba(255, 255, 255, 0.75) !important;
        }

        html.light-theme .lateral-menu-item:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.12) !important;
        }

        html.light-theme .lateral-menu-item.active {
            color: #ffffff !important;
            background: rgba(0, 0, 0, 0.15) !important;
        }

        html.light-theme .sidebar {
            background: #ffffff !important;
        }

        html.light-theme .sidebar-header {
            background: #f0f2f5 !important;
            border-bottom-color: #d1d7db !important;
        }

        html.light-theme .tabs {
            background: #ffffff !important;
            border-bottom-color: #d1d7db !important;
        }

        /* `.tab` e `.tab.active` SAÍRAM daqui em 20/08/2026 (eram `#ffffff !important`
           no claro e `#1e1e1e !important` no escuro, logo abaixo). Pintar o item com
           !important anulava o :hover E o realce da aba ativa — o único sinal de
           "selecionado" que sobrava era a cor do ícone. O fundo da BARRA continua
           aqui (`.tabs`); o item é do b1-nucleo-e-chamada.css. */

        html.light-theme .search-container {
            background: #ffffff !important;
            border-bottom-color: #d1d7db !important;
        }

        html.light-theme .global-top-bar {
            background: #ffffff !important;
            border-bottom-color: #d1d7db !important;
            box-shadow: 0 1px 0 rgba(17, 27, 33, 0.04);
        }

        html.dark-theme .global-top-bar,
        :root.dark-theme .global-top-bar {
            background: #1e1e1e !important;
            border-bottom-color: #333333 !important;
            box-shadow: none !important;
        }

        /* ── Controles de janela do app de desktop no TEMA CLARO ──
           A cor deles nasce em b1-nucleo-e-chamada.css como rgba(233,237,239,.76),
           que é claro sobre claro aqui: medido em 27/08/2026 num print do app,
           dava 1,04:1 na tela de login (fundo #eef1f6) e 1,13:1 na barra (fundo
           #ffffff) — o mínimo para um controle de interface é 3:1. Fechar,
           minimizar e maximizar ficavam invisíveis para quem usa o tema claro,
           que é a maioria.

           A cor certa é a MESMA dos ícones irmãos da barra (sino, lua, volume):
           o token --text-secondary, que já muda sozinho com o tema. Medido:
           4,65:1 na barra e 4,10:1 no login. O tema escuro fica como está —
           lá o valor original já dá 14,15:1. */
        html.light-theme .desktop-window-btn {
            color: var(--text-secondary);
        }

        html.light-theme .desktop-window-btn:hover {
            background: rgba(17, 27, 33, 0.06);
            color: var(--text-main);
        }
        /* .desktop-window-btn.close:hover fica de fora de propósito: vermelho
           com glifo branco já funciona nos dois temas. */

        html.dark-theme .lateral-menu,
        :root.dark-theme .lateral-menu {
            background: #1e1e1e !important;
            border-right-color: #333333 !important;
        }

        html.dark-theme .sidebar-header,
        html.dark-theme .tabs,
        :root.dark-theme .sidebar-header,
        :root.dark-theme .tabs {
            background: #1e1e1e !important;
        }

        html.dark-theme .sidebar-header,
        html.dark-theme .tabs,
        :root.dark-theme .sidebar-header,
        :root.dark-theme .tabs {
            border-bottom-color: #333333 !important;
        }

        html.dark-theme .search-container,
        :root.dark-theme .search-container {
            background: #1e1e1e !important;
        }

        html.dark-theme .sidebar,
        html.dark-theme .chat-list,
        :root.dark-theme .sidebar,
        :root.dark-theme .chat-list {
            background: #1e1e1e !important;
        }

        html.dark-theme .search-box,
        :root.dark-theme .search-box {
            background: #1e1e1e !important;
            border: 1px solid #333333 !important;
        }

        html.dark-theme .chat-quick-filters,
        :root.dark-theme .chat-quick-filters {
            background: #1e1e1e !important;
            border-bottom-color: #333333 !important;
        }

        html.dark-theme .chat-quick-filter-btn,
        :root.dark-theme .chat-quick-filter-btn {
            background: #1e1e1e !important;
            border-color: #333333 !important;
            color: #e0e0e0 !important;
            box-shadow: none !important;
        }

        html.dark-theme .chat-quick-filter-btn:hover,
        :root.dark-theme .chat-quick-filter-btn:hover {
            background: #202c33 !important;
        }

        html.dark-theme .chat-quick-filter-btn.active,
        :root.dark-theme .chat-quick-filter-btn.active {
            background: #00a884 !important;
            border-color: #00a884 !important;
            color: #05231d !important;
        }

        html.light-theme #logged-user {
            color: #111b21 !important;
        }

        html.light-theme .user-avatar-button {
            background: linear-gradient(135deg, #ffffff 0%, #eef3f7 100%);
            border-color: #c9d3da;
            color: #1f2d36;
            box-shadow: 0 8px 18px rgba(17, 27, 33, 0.10);
        }

        html.light-theme .user-avatar-button:hover {
            border-color: rgba(0, 168, 132, 0.42);
            box-shadow: 0 10px 20px rgba(17, 27, 33, 0.14);
        }

        html.light-theme .user-avatar-trigger.open .user-avatar-button {
            border-color: rgba(0, 168, 132, 0.55);
            box-shadow: 0 10px 22px rgba(17, 27, 33, 0.16);
        }

        html.light-theme .user-avatar-menu {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 249, 0.99));
            border-color: #d1d7db;
            box-shadow: 0 18px 36px rgba(17, 27, 33, 0.14);
            backdrop-filter: blur(12px);
        }

        html.light-theme .user-avatar-menu-head {
            border-bottom-color: rgba(17, 27, 33, 0.08);
        }

        html.light-theme .user-avatar-menu-name {
            color: #111b21;
        }

        html.light-theme .user-avatar-menu-role {
            color: #667781;
        }

        html.light-theme .user-avatar-menu button {
            color: #24343d;
        }

        html.light-theme .user-avatar-menu button:hover {
            background: rgba(0, 168, 132, 0.08);
            color: #111b21;
        }

        html.light-theme .user-avatar-menu button.danger {
            color: #c62828;
        }

        html.light-theme .user-avatar-menu button.danger:hover {
            background: rgba(244, 67, 54, 0.10);
            color: #8e1c1c;
        }

        html.light-theme .search-box {
            background: #f0f2f5 !important;
            border: 1px solid #d1d7db !important;
        }

        html.light-theme .search-box input {
            color: #111b21 !important;
        }

        html.light-theme .chat-list {
            background: #ffffff !important;
        }

        html.light-theme .chat-item {
            border-bottom-color: #f0f2f5 !important;
            background: #ffffff !important;
            color: #111b21 !important;
        }

        html.light-theme .chat-item:hover {
            background: #f5f6f6 !important;
        }

        html.light-theme .chat-item.active {
            background: #e9edef !important;
        }

        html.light-theme .chat-last {
            color: #667781 !important;
        }

        html.light-theme .chat-header {
            background: #f0f2f5 !important;
            border-bottom-color: #d1d7db !important;
            color: #111b21 !important;
        }

        html.light-theme #c-name {
            color: #111b21 !important;
        }

        html.light-theme .input-area {
            background: #f0f2f5 !important;
            border-top: 1px solid #d1d7db !important;
        }

        html.light-theme .input-box input,
        html.light-theme #min {
            background: #ffffff !important;
            color: #111b21 !important;
        }

        html.light-theme .search-box input,
        html.light-theme #chat-search {
            background: #f0f2f5 !important;
            color: #111b21 !important;
        }

        html.light-theme input::placeholder,
        html.light-theme textarea::placeholder {
            color: #667781 !important;
        }

        html.light-theme .form-group {
            background: #f0f2f5 !important;
            border-color: #d1d7db !important;
        }

        html.light-theme .form-group input,
        html.light-theme .form-group select,
        html.light-theme .form-group textarea {
            color: #111b21 !important;
            border-bottom-color: #d1d7db !important;
        }

        /* o tema claro do login mora em css/login.css (tokens --lg-* de #login-screen) */

        html.light-theme .avatar {
            background: #dfe5e7 !important;
        }

        html.light-theme .audio-recording-container {
            background: #f0f2f5 !important;
        }

        html.light-theme .audio-timer {
            color: #111b21 !important;
        }

        html.light-theme .asaas-nav button {
            background: #e9edef !important;
            color: #111b21 !important;
        }

        html.light-theme .asaas-nav button.active {
            background: var(--asaas) !important;
            color: #ffffff !important;
        }

        html.light-theme .asaas-item {
            background: #ffffff !important;
            color: #111b21 !important;
        }

        html.light-theme .asaas-item:hover {
            background: #f5f6f6 !important;
        }

        html.light-theme .side-panel {
            background: #ffffff !important;
        }

        html.light-theme .panel-header {
            background: #f0f2f5 !important;
            color: #111b21 !important;
        }

        .global-top-bar__brand,
        .global-top-bar__controls,
        .global-top-bar__identity,
        .global-top-bar__tools,
        .chat-header-main,
        .chat-header-profile,
        .chat-header-copy,
        .chat-header-actions,
        .chat-header-quick-actions {
            min-width: 0;
        }

        .global-top-bar__controls {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .global-top-bar__tools {
            display: flex;
            gap: 20px;
            color: var(--text-secondary);
            cursor: pointer;
            align-items: center;
            font-size: 18px;
        }

        /* ── Tooltip dos ícones do topo ──
           DUAS REGRAS QUE NÃO PODEM SER QUEBRADAS DE NOVO:

           1. NUNCA usar `::before` nesses ícones. Eles são `<i>` do Font Awesome,
              que desenha o glifo justamente no `::before`; a versão de 20/08/2026
              pôs a setinha do balão ali e APAGOU todos os ícones da barra (sino,
              lua, volume, download, nova conversa, sincronizar) — no app e no
              navegador. Por isso o balão é só `::after`, e sem seta.
           2. O gancho é `data-tip`, não `title`: com `title` o Chromium mostra
              TAMBÉM o balão nativo dele por cima do nosso, um segundo depois.
              O texto acessível fica no `aria-label` de cada ícone.

           Cor vem dos tokens --tip-* (b1-nucleo-e-chamada.css, nos dois :root),
           os mesmos do balão dos filtros da lista — o azul-marinho fixo destoava
           do painel e ficava ilegível no tema claro. */
        .global-top-bar__tools [data-tip] {
            position: relative;
        }

        .global-top-bar__tools [data-tip]::after {
            content: attr(data-tip);
            position: absolute;
            left: 50%;
            top: calc(100% + 10px);
            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);
            /* SEM ISTO O TEXTO SAI EM CAIXA ALTA. O balão nasce dentro de um <i>
               do Font Awesome, então herda `font-family: "Font Awesome 6 Free"`
               — e essa fonte desenha todo o alfabeto latino em maiúscula. Era o
               "NOTIFICACOES DO APP DIGIFOOD" do print: só os acentuados caíam no
               fallback e apareciam minúsculos, no meio da palavra. */
            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;
        }

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

        .volume-control {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 36px;
        }

        .volume-control i {
            transition: color 0.2s;
        }

        /* Ponte invisível entre o ícone e o popover: sem ela, o vão de 10px
           tira o cursor da área "hoverable" antes de alcançar o slider, e o
           popover (pointer-events:none enquanto escondido) some no meio do
           caminho. Mantém o :hover de .volume-control ativo durante a descida.
           A ponte é mais larga que o popover (170px no design-system) de
           propósito: o cursor desce em diagonal, não em linha reta. */
        .volume-control::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 100%;
            transform: translateX(-50%);
            width: 200px;
            height: 18px;
            z-index: 3000;
        }

        .volume-slider-popover {
            position: absolute;
            right: 50%;
            top: calc(100% + 10px);
            transform: translateX(50%) translateY(-6px);
            width: 148px;
            padding: 10px 12px;
            border-radius: 10px;
            background: var(--bg-header);
            border: 1px solid var(--border);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
            transition-delay: 0s;
            z-index: 3000;
        }

        .volume-control:hover .volume-slider-popover,
        .volume-control.is-open .volume-slider-popover,
        .volume-slider-popover:hover {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(50%) translateY(0);
            transition-delay: 0s;
        }

        .volume-slider-popover::before {
            content: "";
            position: absolute;
            top: -6px;
            right: calc(50% - 6px);
            width: 12px;
            height: 12px;
            background: var(--bg-header);
            border-left: 1px solid var(--border);
            border-top: 1px solid var(--border);
            transform: rotate(45deg);
        }

        .volume-slider-label {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--text-secondary);
            font-size: 11px;
            font-weight: 700;
            cursor: default;
        }

        #notification-volume-slider {
            width: 100%;
            accent-color: #00a884;
            cursor: pointer;
        }

        /* Botão "Testar no celular": mesmos tokens do popover, sem cor nova. */
        .volume-test-push {
            display: block;
            width: 100%;
            margin-top: 10px;
            padding: 7px 8px;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: transparent;
            color: var(--text-secondary);
            font-family: inherit;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.2;
            cursor: pointer;
            transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
        }

        .volume-test-push:hover:not(:disabled) {
            color: #00a884;
            border-color: #00a884;
            background: rgba(0, 168, 132, 0.10);
        }

        .volume-test-push:disabled {
            opacity: 0.6;
            cursor: default;
        }

        .chat-header-main {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
            min-width: 0;
        }

        .chat-header-profile {
            display: flex;
            align-items: center;
            gap: 15px;
            cursor: pointer;
            min-width: 0;
            flex: 1;
        }

        .chat-header-copy #c-name,
        .chat-header-copy #c-status {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .chat-header-actions {
            display: flex;
            gap: 15px;
            color: var(--text-secondary);
            align-items: center;
            min-width: 0;
            flex-shrink: 0;
        }

        .chat-header-quick-actions {
            display: flex;
            gap: 10px;
            margin-right: 15px;
        }

        .mobile-chat-back-btn {
            display: none;
            width: 38px;
            height: 38px;
            border: none;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            cursor: pointer;
            transition: background 0.18s ease, color 0.18s ease;
        }

        .mobile-chat-back-btn:hover {
            background: rgba(0, 168, 132, 0.16);
            color: var(--accent);
        }