/* ==========================================================================
   V2 Refit 1 — Topbar geral 1:1 Claude Design (camada isolada; sidebar intocada)
   Cache: topbar-metal-blue-20260728 — azul metalizado global (modelo Equipe)
   Escopo: .app-topbar, .topbar-* — sem nav-item / v2-brand / .sidebar
   ========================================================================== */

/* Menu/notificações abertos: sobe a topbar acima da página/drawers e libera overflow
   (overflow-x:hidden no rail força clip do dropdown — parece “atrás da página”). */
.app-topbar:has(.topbar-user-menu:not(.hidden)),
.app-topbar:has(.notificacoes-painel:not(.hidden)),
.app-topbar:has(.notificacoes-painel.open),
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar:has(.topbar-user-menu:not(.hidden)),
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar:has(.notificacoes-painel:not(.hidden)),
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar:has(.notificacoes-painel.open),
html[data-theme='dark'] .app-topbar:has(.topbar-user-menu:not(.hidden)),
html[data-theme='dark'] .app-topbar:has(.notificacoes-painel:not(.hidden)),
html[data-theme='dark'] .app-topbar:has(.notificacoes-painel.open),
html[data-theme='cinza'] .app-topbar:has(.topbar-user-menu:not(.hidden)),
html[data-theme='cinza'] .app-topbar:has(.notificacoes-painel:not(.hidden)),
html[data-theme='cinza'] .app-topbar:has(.notificacoes-painel.open) {
    z-index: 15000 !important;
    overflow: visible !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) #appScreen .app-topbar,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.125rem !important;
    height: var(--app-shell-rail-height, 4.5rem);
    min-height: var(--app-shell-rail-height, 4.5rem);
    max-height: var(--app-shell-rail-height, 4.5rem);
    padding: 0 1.75rem !important;
    background:
        linear-gradient(
            145deg,
            #1a4db8 0%,
            #2f6fe0 28%,
            #5aa0ff 52%,
            #2a62d4 78%,
            #163f9a 100%
        ) !important;
    background-image:
        linear-gradient(
            145deg,
            #1a4db8 0%,
            #2f6fe0 28%,
            #5aa0ff 52%,
            #2a62d4 78%,
            #163f9a 100%
        ) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0.0625rem solid rgba(180, 210, 255, 0.35) !important;
    box-shadow:
        inset 0 0.0625rem 0 rgba(255, 255, 255, 0.42),
        inset 0 -0.0625rem 0 rgba(10, 40, 110, 0.28),
        0 0.5rem 1.375rem -0.625rem rgba(26, 77, 184, 0.45) !important;
    color: #fff !important;
    /* Desktop/HD: composição congelada — escala via html --ui-scale (ui-scale.css). */
    overflow-x: hidden;
    overflow-y: visible;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar::before {
    content: none;
    display: none;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    gap: 0.875rem !important;
}
html[data-theme='cinza'] .app-topbar-left{ min-width: 0; flex: 1 1 auto; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; align-self: stretch !important; gap: 0.875rem !important; }

/* Tipografia padrão — títulos claros no azul metalizado */
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-page-title {
    margin: 0 !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 1.3125rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025rem !important;
    line-height: 1 !important;
    color: #fff !important;
    text-shadow: 0 0.0625rem 0 rgba(10, 40, 110, 0.25);
    white-space: nowrap;
}

html[data-theme='dark'] .app-topbar .topbar-page-title {
    margin: 0 !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 1.3125rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025rem !important;
    line-height: 1 !important;
    color: var(--ink, var(--fd-text, #0f1a2e)) !important;
    white-space: nowrap;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-page-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: min(32.5rem, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-head .crumb {
    color: rgba(255, 255, 255, 0.82) !important;
}

html[data-theme='dark'] .app-topbar .topbar-page-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--muted, var(--fd-text-muted, #6b7a94)) !important;
    max-width: min(32.5rem, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ocultos até a página ativa revelar (evita vazamento com CSS lazy) */
#topbarPageTitleClientes,
#topbarPageSubtitleClientes,
#topbarPageTitleAcompanhamento,
#topbarPageSubtitleAcompanhamento {
    display: none !important;
}

/* Cabeçalho Chats (card Small/Medio/Large): oculto fora da página Chats (chats.css é lazy). */
.app-topbar .topbar-chats-head {
    display: none !important;
}

/* Chats: um único título visível (demais h1 ficam no DOM) */
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleDashboard,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleClientes,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleAcompanhamento,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleAcompanhamento,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleClientes,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-clientes.active) .app-topbar #topbarPageTitleAcompanhamento,
html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-clientes.active) .app-topbar #topbarPageSubtitleAcompanhamento {
    display: none !important;
}
html[data-theme="dark"] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleDashboard,html[data-theme="dark"] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleClientes,html[data-theme="dark"] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleAcompanhamento,html[data-theme="dark"] .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleAcompanhamento,html[data-theme="dark"] .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleClientes,html[data-theme="dark"] .main-content:has(#page-clientes.active) .app-topbar #topbarPageTitleAcompanhamento,html[data-theme="dark"] .main-content:has(#page-clientes.active) .app-topbar #topbarPageSubtitleAcompanhamento{ display: none !important; }
html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleDashboard,html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleClientes,html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleAcompanhamento,html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleAcompanhamento,html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageSubtitleClientes,html[data-theme='cinza'] .main-content:has(#page-clientes.active) .app-topbar #topbarPageTitleAcompanhamento,html[data-theme='cinza'] .main-content:has(#page-clientes.active) .app-topbar #topbarPageSubtitleAcompanhamento{ display: none !important; }

/* Relatórios: topbar só na página Relatórios (relatorios-shell.css revela). */
#topbarPageTitleRelatorios,
#topbarPageSubtitleRelatorios {
    display: none !important;
}

/* Biblioteca: topbar revelado via biblioteca.css quando #page-biblioteca.active */
#topbarPageTitleBiblioteca {
    display: none !important;
}

/* Ponto: topbar revelado via ponto.css quando #page-ponto.active */
#topbarPageTitlePonto,
#topbarPageSubtitlePonto {
    display: none !important;
}

/* Call: topbar revelado via call.css quando #page-call.active */
#topbarPageTitleCall {
    display: none !important;
}
/* Tarefas: topbar revelado via tarefas.css quando #page-tarefas.active */
#topbarPageTitleTarefas {
    display: none !important;
}

/* Equipe: topbar revelado via atendentes.css quando #page-atendentes.active */
#topbarPageTitleEquipe,
#topbarPageSubtitleEquipe {
    display: none !important;
}

/* Configurações: topbar revelado via configuracoes.css quando #page-configuracoes.active */
#topbarPageTitleConfiguracoes {
    display: none !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar .topbar-chats-head {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    min-width: 0;
}
html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar .topbar-chats-head{ display: flex !important; flex-direction: row; align-items: center; align-self: stretch; min-width: 0; }

html:not([data-theme='dark']):not([data-theme='cinza']) .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleChats {
    display: block !important;
}
html[data-theme='cinza'] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleChats{ display: block !important; }

html[data-theme='dark'] .main-content:has(#page-chats.active) .app-topbar .topbar-chats-head {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    min-width: 0;
}

html[data-theme='dark'] .main-content:has(#page-chats.active) .app-topbar #topbarPageTitleChats {
    display: block !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar-actions {
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    margin-left: auto;
}
html[data-theme='cinza'] .app-topbar-actions{ flex-shrink: 0; display: flex !important; align-items: center !important; gap: 0.625rem !important; margin-left: auto; }

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-wrap {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
}
html[data-theme='cinza'] .app-topbar .topbar-perfil-wrap{ display: flex !important; align-items: center !important; flex-shrink: 0; }

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-hamburger {
    width: 2.625rem !important;
    height: 2.625rem !important;
    border-radius: 0.5rem !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    box-shadow: none !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    position: relative;
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-height: 2.625rem !important;
    padding: 0 !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.38) !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn {
    color: #fff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn__icon,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .notificacoes-icon-svg {
    width: 1.1875rem !important;
    height: 1.1875rem !important;
    display: block !important;
    flex-shrink: 0;
    pointer-events: none;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    color: #fff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn {
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-width: 2.625rem !important;
    min-height: 2.625rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .analyst-avatar-topbar {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: none !important;
    background: linear-gradient(150deg, #1b2a4a, #0d1b34) !important;
    color: #ffffff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .analyst-avatar-topbar img {
    border-radius: inherit !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-hamburger:hover,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn:hover,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn:hover,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.14)) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    box-shadow: none !important;
    color: #fff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn:hover {
    color: #fff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    color: #fff !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-hamburger:focus-visible,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn:focus-visible,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn:focus-visible,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn:focus-visible {
    outline: none !important;
    box-shadow: var(--fd-focus-ring, 0 0 0 0.1875rem rgba(0, 123, 255, 0.35)) !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .notificacoes-btn[aria-expanded='true'],
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn[aria-expanded='true'] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.16)) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.125rem rgba(255, 255, 255, 0.18) !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .notificacoes-contador {
    top: -0.3125rem !important;
    right: -0.3125rem !important;
    min-width: 1.0625rem !important;
    height: 1.0625rem !important;
    padding: 0 0.25rem !important;
    border-radius: 0.5625rem !important;
    font-size: 0.65625rem !important;
    font-weight: 700 !important;
    background-color: #e5484d !important;
    color: #ffffff !important;
    border: 0.125rem solid #ffffff !important;
    box-shadow: none !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn:disabled,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .notificacoes-btn:disabled,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn:disabled {
    opacity: 0.45 !important;
}

html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .notificacoes-painel,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-user-menu,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-ticket-toast,
html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-ticket-toast-clickable {
    background-color: var(--fd-surface, #ffffff) !important;
    border-color: var(--fd-border, #e4e9f0) !important;
    border-radius: 0.5rem !important;
    color: var(--fd-text, #0d1b34) !important;
    box-shadow: var(--fd-shadow-2, 0 0.75rem 1.875rem -1rem rgba(13, 27, 52, 0.25)) !important;
}

@media (max-width: 900px) {
    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar {
        padding: 0 1rem !important;
        gap: 0.875rem !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-page-subtitle {
        max-width: min(26.25rem, 56vw);
    }
}

@media (max-width: 640px) {
    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar {
        padding: 0 0.75rem !important;
        gap: 0.625rem !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-page-title {
        font-size: 1.125rem !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-page-subtitle {
        display: none !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar-actions {
        gap: 0.5rem !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-chats-quick-btn,
    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-perfil-btn,
    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .app-topbar-notificacoes .notificacoes-btn,
    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .topbar-hamburger {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-height: 2.5rem !important;
    }

    html:not([data-theme='dark']):not([data-theme='cinza']) .app-topbar .analyst-avatar-topbar {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Topbar: apenas título (sem subtítulo); título centralizado na altura da barra */
.main-content .app-topbar [id^='topbarPageSubtitle'],
.main-content .app-topbar .topbar-page-subtitle {
    display: none !important;
}

.main-content .app-topbar .topbar-dashboard-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
}

.main-content .app-topbar .topbar-page-title {
    align-self: center !important;
}

/* ==========================================================================
   Tema cinza — topbar (herda layout/tamanhos do bloco not-dark acima)
   Somente overrides de cor/fundo.
   ========================================================================== */

html[data-theme='cinza'] #appScreen .app-topbar,
html[data-theme='cinza'] .app-topbar {
    background: rgba(74,84,98, 0.90) !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border-bottom-color: #4a5462 !important;
    color: #14181d !important;
}

/* Linha de acento no topo — azul cinza */
html[data-theme='cinza'] .app-topbar::before {
    background: linear-gradient(90deg, #0b63d6, rgba(11,99,214,0.25));
}

html[data-theme='cinza'] .app-topbar .topbar-page-title {
    margin: 0 !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 1.3125rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025rem !important;
    line-height: 1 !important;
    color: #14181d !important;
    white-space: nowrap;
}

html[data-theme='cinza'] .app-topbar .topbar-page-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-family: var(--fd-font, 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif) !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #333b45 !important;
    max-width: min(32.5rem, 100%);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hamburger + botões — tamanho fixo 2.625rem (paridade light/dark; evita avatar sem caixa) */
html[data-theme='cinza'] .app-topbar .topbar-hamburger {
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-width: 2.625rem !important;
    min-height: 2.625rem !important;
    border-radius: 0.5rem !important;
    background-color: #acb3bc !important;
    border-color: #4a5462 !important;
    color: #333b45 !important;
}

html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    position: relative;
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-width: 2.625rem !important;
    min-height: 2.625rem !important;
    padding: 0 !important;
    background: #acb3bc !important;
    border-color: #4a5462 !important;
    color: #14181d !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn {
    color: var(--fd-primary, #0b63d6) !important;
}

html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #333b45 !important;
}

html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn__icon,
html[data-theme='cinza'] .app-topbar .notificacoes-icon-svg {
    width: 1.1875rem !important;
    height: 1.1875rem !important;
    display: block !important;
    flex-shrink: 0;
    pointer-events: none;
}

/* Avatar no mesmo card dos botões (42×42 — nunca herdar largura intrínseca da foto) */
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    flex: none !important;
}

html[data-theme='cinza'] .app-topbar .analyst-avatar-topbar {
    width: 100% !important;
    height: 100% !important;
    max-width: 2.625rem !important;
    max-height: 2.625rem !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    background: linear-gradient(150deg, #acb3bc, #7e8794) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme='cinza'] .app-topbar .analyst-avatar-topbar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: inherit !important;
}

/* Hover */
html[data-theme='cinza'] .app-topbar .topbar-hamburger:hover,
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn:hover,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:hover,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    background: #b8bfc7 !important;
    border-color: rgba(10,61,128,0.35) !important;
    box-shadow: none !important;
}

html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:focus-visible {
    background: #b8bfc7 !important;
}

/* Focus ring */
html[data-theme='cinza'] .app-topbar .topbar-hamburger:focus-visible,
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn:focus-visible,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:focus-visible,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.1875rem rgba(10,61,128,0.35) !important;
}

/* Expandido (aria-expanded) */
html[data-theme='cinza'] .app-topbar .notificacoes-btn[aria-expanded='true'],
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn[aria-expanded='true'] {
    background: rgba(11,99,214,0.14) !important;
    border-color: rgba(10,61,128,0.38) !important;
    color: #0b63d6 !important;
    box-shadow: none !important;
}

/* Badge contador */
html[data-theme='cinza'] .app-topbar .notificacoes-contador {
    background-color: #e5484d !important;
    color: #ffffff !important;
    border-color: #9fa7b1 !important;
}

/* Disabled */
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn:disabled,
html[data-theme='cinza'] .app-topbar .notificacoes-btn:disabled,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:disabled {
    opacity: 0.45 !important;
}

/* Dropdowns, menus, toast */
html[data-theme='cinza'] .app-topbar .notificacoes-painel,
html[data-theme='cinza'] .app-topbar .topbar-user-menu,
html[data-theme='cinza'] .app-topbar .topbar-ticket-toast,
html[data-theme='cinza'] .app-topbar .topbar-ticket-toast-clickable {
    background-color: #9fa7b1 !important;
    border-color: #4a5462 !important;
    border-radius: 0.5rem !important;
    color: #14181d !important;
    box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.55) !important;
}

/* ==========================================================================
   TH-16 — Tema escuro — topbar (estrutura refit claro + cores TH-1 dark)
   ========================================================================== */

html[data-theme='dark'] #appScreen .app-topbar,
html[data-theme='dark'] .app-topbar {
    position: sticky;
    top: 0;
    z-index: 1100;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.125rem !important;
    height: var(--app-shell-rail-height, 4.5rem);
    min-height: var(--app-shell-rail-height, 4.5rem);
    max-height: var(--app-shell-rail-height, 4.5rem);
    padding: 0 1.75rem !important;
    background: rgba(20, 29, 48, 0.90) !important;
    background-image: none !important;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border-bottom: 0.0625rem solid var(--fd-border, #26334c) !important;
    box-shadow: none !important;
    color: var(--fd-text, #e8eef9) !important;
    overflow-x: hidden;
    overflow-y: visible;
}

html[data-theme='dark'] .app-topbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.1875rem;
    max-height: 0.1875rem;
    background: linear-gradient(90deg, var(--fd-primary, #3b9bff), rgba(59, 155, 255, 0.25));
    pointer-events: none;
    z-index: 3;
}

html[data-theme='dark'] .app-topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    gap: 0.875rem !important;
}

html[data-theme='dark'] .app-topbar-actions {
    flex-shrink: 0;
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    margin-left: auto;
}

html[data-theme='dark'] .app-topbar .topbar-perfil-wrap {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

html[data-theme='dark'] .app-topbar .topbar-page-title {
    color: #e8eef9 !important;
}

html[data-theme='dark'] .app-topbar .topbar-page-subtitle {
    color: #8a99b8 !important;
}

html[data-theme='dark'] .app-topbar .topbar-hamburger {
    width: 2.625rem !important;
    height: 2.625rem !important;
    border-radius: 0.5rem !important;
    background-color: rgba(59, 155, 255, 0.10) !important;
    border: 0.0625rem solid var(--fd-border, #26334c) !important;
    color: #8a99b8 !important;
    box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn,
html[data-theme='dark'] .app-topbar .topbar-perfil-btn,
html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    position: relative;
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-height: 2.625rem !important;
    padding: 0 !important;
    border-radius: 0.5rem !important;
    background: rgba(59, 155, 255, 0.10) !important;
    border: 0.0625rem solid var(--fd-border, #26334c) !important;
    color: #e8eef9 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8a99b8 !important;
}

html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn {
    color: var(--fd-primary, #3b9bff) !important;
}

html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn__icon,
html[data-theme='dark'] .app-topbar .notificacoes-icon-svg {
    width: 1.1875rem !important;
    height: 1.1875rem !important;
    display: block !important;
    flex-shrink: 0;
    pointer-events: none;
}

html[data-theme='dark'] .app-topbar .topbar-perfil-btn {
    width: 2.625rem !important;
    height: 2.625rem !important;
    min-width: 2.625rem !important;
    min-height: 2.625rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

html[data-theme='dark'] .app-topbar .analyst-avatar-topbar {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
    overflow: hidden !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: none !important;
    background: linear-gradient(150deg, #22304d, #0f1828) !important;
    color: #ffffff !important;
}

html[data-theme='dark'] .app-topbar .analyst-avatar-topbar img {
    border-radius: inherit !important;
}

html[data-theme='dark'] .app-topbar .topbar-hamburger:hover,
html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn:hover,
html[data-theme='dark'] .app-topbar .topbar-perfil-btn:hover,
html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    background: rgba(59, 155, 255, 0.16) !important;
    border-color: rgba(59, 155, 255, 0.35) !important;
    box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn:hover {
    color: var(--fd-primary-hover, var(--fd-primary, #3b9bff)) !important;
}

html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    color: #e8eef9 !important;
}

html[data-theme='dark'] .app-topbar .topbar-hamburger:focus-visible,
html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn:focus-visible,
html[data-theme='dark'] .app-topbar .topbar-perfil-btn:focus-visible,
html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.1875rem rgba(59, 155, 255, 0.35) !important;
}

html[data-theme='dark'] .app-topbar .notificacoes-btn[aria-expanded='true'],
html[data-theme='dark'] .app-topbar .topbar-perfil-btn[aria-expanded='true'] {
    background: rgba(59, 155, 255, 0.14) !important;
    border-color: rgba(59, 155, 255, 0.38) !important;
    color: #3b9bff !important;
    box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar .notificacoes-contador {
    top: -0.3125rem !important;
    right: -0.3125rem !important;
    min-width: 1.0625rem !important;
    height: 1.0625rem !important;
    padding: 0 0.25rem !important;
    border-radius: 0.5625rem !important;
    font-size: 0.65625rem !important;
    font-weight: 700 !important;
    background-color: #e5484d !important;
    color: #ffffff !important;
    border: 0.125rem solid #141d30 !important;
    box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn:disabled,
html[data-theme='dark'] .app-topbar .notificacoes-btn:disabled,
html[data-theme='dark'] .app-topbar .topbar-perfil-btn:disabled {
    opacity: 0.45 !important;
}

html[data-theme='dark'] .app-topbar .notificacoes-painel,
html[data-theme='dark'] .app-topbar .topbar-user-menu,
html[data-theme='dark'] .app-topbar .topbar-ticket-toast,
html[data-theme='dark'] .app-topbar .topbar-ticket-toast-clickable {
    background-color: #141d30 !important;
    border-color: #26334c !important;
    border-radius: 0.5rem !important;
    color: #e8eef9 !important;
    box-shadow: 0 1rem 2.5rem -0.75rem rgba(0, 0, 0, 0.65) !important;
}

@media (max-width: 900px) {
    html[data-theme='dark'] .app-topbar {
        padding: 0 1rem !important;
        gap: 0.875rem !important;
    }

    html[data-theme='dark'] .app-topbar .topbar-page-subtitle {
        max-width: min(26.25rem, 56vw);
    }
}

@media (max-width: 640px) {
    html[data-theme='dark'] .app-topbar {
        padding: 0 0.75rem !important;
        gap: 0.625rem !important;
    }

    html[data-theme='dark'] .app-topbar .topbar-page-title {
        font-size: 1.125rem !important;
    }

    html[data-theme='dark'] .app-topbar .topbar-page-subtitle {
        display: none !important;
    }

    html[data-theme='dark'] .app-topbar-actions {
        gap: 0.5rem !important;
    }

    html[data-theme='dark'] .app-topbar .topbar-chats-quick-btn,
    html[data-theme='dark'] .app-topbar .topbar-perfil-btn,
    html[data-theme='dark'] .app-topbar .app-topbar-notificacoes .notificacoes-btn,
    html[data-theme='dark'] .app-topbar .topbar-hamburger {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-height: 2.5rem !important;
    }

    html[data-theme='dark'] .app-topbar .analyst-avatar-topbar {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* Switch Sol / Nuvem / Lua — mesma altura dos botões WhatsApp / notificações (2.625rem) */
.app-topbar .topbar-theme-switch {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
    box-sizing: border-box !important;
    width: auto !important;
    height: 2.625rem !important;
    min-height: 2.625rem !important;
    max-height: 2.625rem !important;
    padding: 0.125rem !important;
    gap: 0 !important;
    border-radius: 0.5rem !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    border: 0.0625rem solid rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    color: #fff !important;
    line-height: 1 !important;
}

.app-topbar .topbar-theme-switch__btn {
    position: relative;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
    width: 2.125rem;
    min-width: 2.125rem;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0.375rem !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.app-topbar .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none !important;
}

.app-topbar .topbar-theme-switch__btn.is-active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.app-topbar .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon),
.app-topbar .topbar-theme-switch__btn:focus-visible:not(:disabled) {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    outline: none !important;
}

.app-topbar .topbar-theme-switch__btn.is-soon,
.app-topbar .topbar-theme-switch__btn:disabled {
    opacity: 0.42 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    cursor: not-allowed !important;
}

.app-topbar .topbar-theme-switch__icon,
.app-topbar .topbar-theme-switch__icon svg {
    display: block;
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0;
    pointer-events: none;
}

.app-topbar .topbar-theme-switch__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-theme='cinza'] .app-topbar .topbar-theme-switch {
    background: #acb3bc !important;
    border-color: #4a5462 !important;
    color: #14181d !important;
}

html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn {
    color: #333b45 !important;
}

html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none !important;
}

html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn.is-active,
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon) {
    background: #b8bfc7 !important;
    color: #14181d !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

html[data-theme='dark'] .app-topbar .topbar-theme-switch {
    background: rgba(59, 155, 255, 0.10) !important;
    border-color: var(--fd-border, #26334c) !important;
    color: #e8eef9 !important;
}

html[data-theme='dark'] .app-topbar .topbar-theme-switch__btn {
    color: #8a99b8 !important;
}

html[data-theme='dark'] .app-topbar .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none !important;
}

html[data-theme='dark'] .app-topbar .topbar-theme-switch__btn.is-active,
html[data-theme='dark'] .app-topbar .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon) {
    background: rgba(59, 155, 255, 0.18) !important;
    color: #e8eef9 !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

@media (max-width: 640px) {
    .app-topbar .topbar-theme-switch {
        height: 2.5rem !important;
        min-height: 2.5rem !important;
        max-height: 2.5rem !important;
        padding: 0.125rem !important;
    }

    .app-topbar .topbar-theme-switch__btn {
        width: 1.875rem;
        min-width: 1.875rem;
        height: 100% !important;
    }
}

/* Switch no login (Portal + FiveDesk): canto do modal/card. */
.login-theme-switch.topbar-theme-switch {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    z-index: 30;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 2.5rem;
    min-height: 2.5rem;
    max-height: 2.5rem;
    padding: 0.125rem;
    gap: 0;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--fd-surface, #fff) 88%, transparent);
    border: 0.0625rem solid color-mix(in srgb, var(--fd-border, #c5d0e0) 80%, transparent);
    box-shadow: 0 0.5rem 1.375rem -0.875rem rgba(15, 47, 58, 0.35);
    color: var(--fd-text, #0d1b34);
    line-height: 1;
    pointer-events: auto;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 2rem;
    min-width: 2rem;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0.1875rem;
    background: transparent;
    color: color-mix(in srgb, var(--fd-text, #0d1b34) 62%, transparent);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn.is-active,
.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon),
.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--fd-primary, #007bff) 14%, transparent);
    color: var(--fd-primary, #007bff);
    border: 0;
    box-shadow: none;
    outline: none;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn.is-soon,
.login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__icon,
.login-theme-switch.topbar-theme-switch .topbar-theme-switch__icon svg {
    display: block;
    width: 1rem;
    height: 1rem;
}

.login-theme-switch.topbar-theme-switch .topbar-theme-switch__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

html[data-theme='cinza'] .login-theme-switch.topbar-theme-switch {
    background: rgba(8, 28, 42, 0.55);
    border-color: rgba(184, 207, 220, 0.28);
    color: #f2f7fa;
    box-shadow: 0 0.5rem 1.375rem -0.875rem rgba(5, 20, 31, 0.55);
}

html[data-theme='cinza'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn {
    color: rgba(242, 247, 250, 0.7);
}

html[data-theme='cinza'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none;
}

html[data-theme='cinza'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn.is-active,
html[data-theme='cinza'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon) {
    background: rgba(190, 216, 229, 0.18);
    color: #f4f8fa;
    border: 0;
    box-shadow: none;
    outline: none;
}

html[data-theme='dark'] .login-theme-switch.topbar-theme-switch {
    background: rgba(12, 18, 28, 0.88);
    border-color: rgba(180, 211, 238, 0.22);
    color: #e8eef9;
    box-shadow: 0 0.625rem 1.75rem -1rem #000;
}

html[data-theme='dark'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn {
    color: rgba(232, 238, 249, 0.7);
}

html[data-theme='dark'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none;
}

html[data-theme='dark'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn.is-active,
html[data-theme='dark'] .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn:hover:not(:disabled):not(.is-soon) {
    background: rgba(59, 155, 255, 0.18);
    color: #e8eef9;
    border: 0;
    box-shadow: none;
    outline: none;
}

@media (max-width: 560px) {
    .login-theme-switch.topbar-theme-switch {
        top: 0.75rem;
        right: 0.75rem;
        height: 2.25rem;
        min-height: 2.25rem;
        max-height: 2.25rem;
    }

    .login-theme-switch.topbar-theme-switch .topbar-theme-switch__btn {
        width: 1.75rem;
        min-width: 1.75rem;
    }
}


/* ============================================================
   Nublado — botoes da topbar: mesmo tratamento do Dia, so a cor muda.
   O Dia usa um veu branco translucido sobre a barra; o bloco cinza
   tinha trocado isso por preenchimento chapado, o que mudava o efeito
   e nao so a cor. Mantendo os mesmos alfas, o chip acompanha a barra
   ardosia sozinho — e o mesmo botao, noutra cor.
   ============================================================ */
html[data-theme='cinza'] .app-topbar .topbar-hamburger,
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn,
html[data-theme='cinza'] .app-topbar .topbar-theme-switch {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
}
html[data-theme='cinza'] .app-topbar .topbar-hamburger:hover,
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn:hover,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:hover,
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn:focus-visible,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.14)) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
}
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn[aria-expanded='true'] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.16)) !important;
    border-color: rgba(255, 255, 255, 0.60) !important;
    color: #ffffff !important;
}
html[data-theme='cinza'] .app-topbar .topbar-chats-quick-btn,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn,
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn {
    color: #ffffff !important;
}
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn.is-active {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
}
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn + .topbar-theme-switch__btn {
    box-shadow: none !important;
}
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn.is-soon,
html[data-theme='cinza'] .app-topbar .topbar-theme-switch__btn:disabled {
    color: rgba(255, 255, 255, 0.55) !important;
}
/* O contador fica em top:-0.3125rem right:-0.3125rem, FORA da caixa do botao. O bloco
   cinza herdava overflow:hidden do grupo e cortava o badge — no Dia esse
   recorte existe so no botao de perfil, para a foto. */
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes .notificacoes-btn,
html[data-theme='cinza'] .app-topbar .app-topbar-notificacoes {
    overflow: visible !important;
}
html[data-theme='cinza'] .app-topbar .topbar-perfil-btn {
    overflow: hidden !important;
}
html[data-theme='cinza'] .app-topbar .notificacoes-contador {
    border-color: #4a5462 !important;
}