/* ========================================
   AgendouAI - Responsive Fixes
   ========================================
   Carregar DEPOIS de styles.css e dashboard_styles.css
   <link rel="stylesheet" href="responsive.css">
   ======================================== */

/* === MOBILE (max-width: 767px) === */
@media (max-width: 767px) {

    /* --- Layout: scroll natural no mobile (sem sidebar fixa) --- */
    body.flex.h-screen.overflow-hidden {
        height: auto !important;
        min-height: 100vh;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #mainContent {
        overflow: visible !important;
        min-height: 100vh;
        /* #mainContent é flex item de body (row) — sem isso, "min-width:auto" deixa o
           tamanho mínimo automático virar o min-content dos filhos (ex.: tabela larga em
           usuarios.html), estourando a largura da página inteira mesmo com overflow-x
           escondido no body (scrollWidth real cresce, é isso que causa o scroll lateral). */
        min-width: 0;
    }

    #mainContent > main {
        overflow: visible !important;
        padding: 0.75rem !important;
        /* Mesmo motivo acima: main também é flex item (de #mainContent, coluna) e precisa
           de min-width:0 pra não repassar a largura de conteúdo interno pro pai. */
        min-width: 0;
    }

    /* instancia.html: bloco "Voltar + Nome + status" (dentro de .instance-header-top) é um
       único flex item sem flex-wrap — os contadores (Prof. Ativos / Serviços e Variações) +
       botão "Testar Atendimento" empurram a largura pra ~660px sem quebrar linha. */
    #instanceHeaderStatus {
        flex-wrap: wrap;
        row-gap: 0.375rem;
    }

    /* --- Titulos menores --- */
    h1.text-3xl {
        font-size: 1.5rem;
    }
    h1.text-2xl {
        font-size: 1.25rem;
    }

    /* --- Botoes menores --- */
    .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.75rem;
    }
    .btn-sm {
        font-size: 0.6875rem;
        padding: 0.3rem 0.5rem;
    }
    .btn i {
        margin-right: 0.25rem;
    }

    /* --- Legenda do calendario: scroll horizontal no mobile --- */
    #calendarLegend {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
    }

    /* --- Links dropdown: posição ajustada --- */
    #linksDropdownMenu {
        right: 0;
        min-width: 200px;
    }

    /* --- Filter Bar (agenda.html) --- */
    .filter-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem !important;
    }
    .filter-bar > div {
        width: 100%;
    }
    .filter-bar > .ml-auto {
        grid-column: 1 / -1;
        margin-left: 0 !important;
        justify-content: center;
    }
    .filter-select {
        min-width: 0 !important;
        width: 100% !important;
        font-size: 0.8125rem;
        padding: 0.4rem 0.5rem;
    }

    /* --- FullCalendar Mobile --- */
    .fc .fc-toolbar {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    .fc .fc-toolbar-chunk {
        display: flex;
        align-items: center;
    }
    .fc .fc-toolbar-title {
        font-size: 1rem !important;
    }
    .fc .fc-button {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    .fc .fc-daygrid-day-number {
        font-size: 0.75rem;
        padding: 2px 4px;
    }
    .fc-event {
        font-size: 0.65rem !important;
        padding: 1px 2px !important;
    }
    .fc .fc-col-header-cell-cushion {
        font-size: 0.75rem;
        padding: 4px 2px;
    }
    .fc .fc-daygrid-more-link {
        font-size: 0.65rem;
    }

    /* --- Dashboard Card: menos padding em cards do calendario --- */
    .dashboard-card {
        min-width: 0 !important;
    }

    /* --- Modais: largura total no mobile --- */
    /* Classe .modal-content (agenda.html, api-keys.html, usuarios.html) */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        padding: 1rem !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    .modal-content h2 {
        font-size: 1.05rem;
    }
    .modal-content h3 {
        font-size: 1rem;
    }
    .modal-content .flex.justify-end {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-content .flex.justify-end.space-x-3 > * {
        margin-left: 0 !important;
    }

    /* Classe .modal (billing.html) */
    .modal .modal-content {
        width: 95% !important;
        max-width: none !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }
    .modal .modal-footer {
        flex-wrap: wrap;
    }

    /* Modais genéricos de instancia.html (overlay com top-20 pattern) */
    #googleCalendarModal > div,
    #successModal > div,
    #inviteCalendarModal > div,
    #inviteSuccessModal > div,
    #otpVerificationModal > div {
        max-width: calc(100vw - 2rem) !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    /* viewEventModal: empilhar botoes do footer */
    #viewEventModal .modal-content > .flex.justify-between {
        flex-direction: column;
        gap: 0.5rem;
    }
    #viewEventModal .modal-content > .flex.justify-between > .flex.gap-2 {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* viewModal: botoes wrap */
    #viewActions {
        justify-content: center;
    }

    /* Botões em row (space-x-*) que devem empilhar no mobile */
    .modal-content .flex.space-x-3,
    .modal-content .flex.space-x-4 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* --- Tabelas: compactas --- */
    table th,
    table td {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem;
    }

    /* --- Form Inputs --- */
    .form-input,
    select.form-input {
        font-size: 0.8125rem;
    }

    /* --- Touch Targets maiores --- */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 1.25rem;
        min-height: 1.25rem;
    }

    /* --- Cards: remover min-width --- */
    .instance-card,
    .metric-card {
        min-width: 0 !important;
    }

    /* --- Subview form container --- */
    .subview-form-container {
        padding: 0.75rem;
    }

    /* --- Status Badges: compactos --- */
    .status-badge {
        padding: 0.15rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }

    /* --- Plan cards: sem hover/featured transform no mobile --- */
    .plan-card:hover {
        transform: none !important;
    }
    .featured-plan {
        transform: none !important;
    }

    /* --- WhatsApp Prep Modal (instancia.html) --- */
    #whatsappPrepModal > div {
        max-height: 85vh !important;
    }
    #whatsappPrepModal .text-lg.font-bold {
        font-size: 1rem;
    }

    /* --- Free Trial Disconnect Modal --- */
    #freeTrialDisconnectModal > div {
        max-width: calc(100vw - 2rem) !important;
    }
    #freeTrialDisconnectModal .flex.justify-center.space-x-4 {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    #freeTrialDisconnectModal .flex.justify-center.space-x-4 > * {
        margin-left: 0 !important;
        text-align: center;
    }

    /* --- Notification Modal (instance.js dinâmico) --- */
    #custom-notification-modal > div {
        max-height: 85vh !important;
        overflow-y: auto !important;
        margin: 1rem !important;
    }

    /* --- WhatsApp Support Button --- */
    #whatsapp-support-btn {
        bottom: 16px !important;
        right: 16px !important;
        width: 48px !important;
        height: 48px !important;
    }
    #whatsapp-support-btn svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* --- Sidebar backdrop --- */
    #sidebar-backdrop {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 20;
        transition: opacity 0.3s ease;
    }

    /* --- Grid cols-2 que devem stackar --- */
    .grid.grid-cols-2.gap-4 {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Bloqueio banner responsivo --- */
    #bloqueio-banner .flex.items-center.justify-between {
        flex-direction: column;
        text-align: center;
    }
    #bloqueio-banner .btn {
        width: 100%;
    }

    /* --- Instance Header mobile --- */
    .instance-title {
        font-size: 1.25rem;
    }
    .instance-name-edit-row {
        flex-wrap: wrap;
    }
    .instance-name-input {
        max-width: 100%;
        width: 100%;
    }

    /* --- Form Cards mobile --- */
    .form-card-body {
        padding: 0.75rem;
    }
    .form-card-header {
        padding: 0.625rem 0.75rem;
    }

    /* Sticky buttons mobile */
    .form-actions-sticky {
        margin: 0.5rem -0.75rem -0.75rem;
        padding: 0.5rem 0.75rem;
    }

    /* Service blocks mobile */
    #profServicesContainer .service-details-container {
        margin-left: 0;
        padding-left: 0.75rem;
        border-left-width: 2px;
    }

    /* Pricing radios stackar */
    #profServicesContainer .pricing-section .flex.flex-wrap {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Expediente stackar no mobile */
    .expediente-entry {
        grid-template-columns: 1fr 1fr !important;
    }
    .expediente-entry select[name="profDia"] {
        grid-column: 1 / -1;
    }
    .expediente-entry > span.text-sm.text-gray-600 {
        display: none;
    }

    /* --- Kanban: colunas fixas para scroll horizontal no mobile --- */
    .kanban-column {
        min-width: 260px !important;
        flex: 0 0 260px !important;
    }

    /* --- Negócios: search input full width --- */
    #searchInput {
        max-width: none !important;
    }

    /* --- Negócios: KPI cards menores --- */
    .kpi-card {
        padding: 12px 14px !important;
    }
    .kpi-value {
        font-size: 20px !important;
    }

    /* --- Negócios: side panel full width (reforço) --- */
    .side-panel {
        width: 100vw !important;
        right: -100vw !important;
    }
    .side-panel.open {
        right: 0 !important;
    }

    /* --- Negócios: tabs com scroll horizontal --- */
    .nav-tab {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    .status-tab {
        padding: 5px 10px !important;
        font-size: 11px !important;
    }

    /* --- Negócios: clientes table responsiva --- */
    .clientes-table th,
    .clientes-table td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* --- Negócios: ranking table responsiva --- */
    .ranking-table th,
    .ranking-table td {
        padding: 5px 6px !important;
        font-size: 11px !important;
    }

    /* --- Billing: tabelas com scroll horizontal suave --- */
    .table-responsive {
        -webkit-overflow-scrolling: touch;
    }
    .table th,
    .table td {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.75rem !important;
        white-space: nowrap;
    }

    /* --- Billing: pagination responsiva --- */
    #paginationContainer {
        flex-direction: column !important;
        gap: 0.75rem !important;
        align-items: center !important;
    }

    /* --- Billing: resource grid compacto --- */
    .resource-summary-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
        gap: 0.5rem !important;
    }

    /* --- OTP inputs responsivos (criar_conta.html) --- */
    .otp-inputs {
        gap: 6px !important;
    }
    .otp-digit {
        width: 42px !important;
        height: 48px !important;
        font-size: 20px !important;
    }

    /* --- API Keys: display compacto --- */
    .api-key-display {
        font-size: 12px !important;
        padding: 0.75rem !important;
        padding-right: 2.5rem !important;
    }

    /* --- API Docs: code blocks legíveis --- */
    .code-block pre,
    pre code {
        font-size: 12px !important;
    }
    .param-table {
        font-size: 12px !important;
    }
    .param-table td,
    .param-table th {
        padding: 6px 8px !important;
    }

    /* --- Disparo WhatsApp: contato chips compactos --- */
    .contato-chip {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    /* --- Modais dinâmicos (JS): forçar responsividade --- */
    /* Modais do negocios.js com w-80 e w-96 */
    .fixed.inset-0 > .bg-white.rounded-lg.shadow-xl {
        width: calc(100vw - 2rem) !important;
        max-width: 384px !important;
    }

    /* Modais inline do instance.js com max-width fixo */
    .fixed.inset-0 [style*="max-width:550px"],
    .fixed.inset-0 [style*="max-width: 550px"] {
        max-width: calc(100vw - 2rem) !important;
        width: 95% !important;
    }

    /* --- Notification modal (instance.js) icon menor --- */
    #custom-notification-modal [style*="font-size: 48px"] {
        font-size: 36px !important;
    }

    /* --- Dashboard: instance card header não esmagar --- */
    .instance-card .flex.justify-between.items-start {
        gap: 0.5rem;
    }
    .instance-card .flex.justify-between.items-start h3 {
        font-size: 0.9375rem !important;
        word-break: break-word;
    }
}

/* === TELAS MUITO PEQUENAS (max-width: 374px) === */
@media (max-width: 374px) {
    /* Modais como bottom-sheet */
    .modal-overlay {
        align-items: flex-end !important;
    }
    .modal-content {
        width: 100% !important;
        border-radius: 0.75rem 0.75rem 0 0 !important;
        max-height: 90vh !important;
        margin: 0 !important;
    }

    /* Filtros em 1 coluna */
    .filter-bar {
        grid-template-columns: 1fr !important;
    }

    h1.text-3xl {
        font-size: 1.25rem;
    }

    .btn {
        font-size: 0.6875rem;
        padding: 0.35rem 0.5rem;
    }

    #mainContent > main {
        padding: 0.5rem !important;
    }

    /* OTP inputs menores em telas pequenas */
    .otp-inputs {
        gap: 4px !important;
    }
    .otp-digit {
        width: 38px !important;
        height: 44px !important;
        font-size: 18px !important;
    }

    /* Kanban colunas menores */
    .kanban-column {
        min-width: 220px !important;
        flex: 0 0 220px !important;
    }
}

/* === TABLET (768px - 1023px) === */
@media (min-width: 768px) and (max-width: 1023px) {
    .fc .fc-toolbar-title {
        font-size: 1.125rem;
    }

    #mainContent > main {
        padding: 1.25rem;
    }

    /* --- Form Cards tablet --- */
    .form-card-body {
        padding: 1rem;
    }

    /* Form actions sticky tablet */
    .form-actions-sticky {
        margin: 0.75rem -1rem -1rem;
        padding: 0.625rem 1rem;
    }

    /* Service blocks tablet - detalhes com menos margin */
    #profServicesContainer .service-details-container {
        margin-left: 0.25rem;
        padding-left: 0.875rem;
    }

    /* Expediente grid tablet - manter inline mas compacto */
    .expediente-entry {
        gap: 0.375rem;
    }

    /* Modais tablet - largura controlada */
    .modal-content {
        width: 85% !important;
        max-width: 640px !important;
    }

    /* Dashboard cards tablet */
    .dashboard-card {
        min-width: 0 !important;
    }

    /* Subview form container tablet */
    .subview-form-container {
        padding: 1rem;
    }

    /* Negócios: side panel largura controlada */
    .side-panel {
        width: 420px !important;
    }

    /* Billing: table com padding intermediário */
    .table th,
    .table td {
        padding: 0.625rem 0.75rem !important;
        font-size: 0.8125rem !important;
    }
}

/* === DESKTOP MEDIUM (1024px - 1279px) === */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* Form cards - padding intermediário */
    .form-card-body {
        padding: 1.125rem;
    }

    /* Expediente grid - gap intermediário */
    .expediente-entry {
        gap: 0.425rem;
    }
}

/* ============================================================================
   MENU DE PERFIL (avatar fixo no canto superior direito) + RESTRIÇÃO POR PERFIL
   ============================================================================

   POR QUE ESTE CSS MORA AQUI e não num <style> dentro de _sidebar.html
   ---------------------------------------------------------------------------
   _sidebar.html é injetado com innerHTML e, em instancia.html e
   disparo_whatsapp.html, passa antes por DOMPurify.sanitize() (dashboard_logic.js).
   Medido em 2026-08-06 contra DOMPurify 3.0.5 (a versão que essas telas carregam):

     - o <style> no topo do fragmento é HOISTEADO pelo parser HTML para dentro de
       <head> (regra "before head" do spec: qualquer tag que não seja <head> cria o
       <head> e é reprocessada em "in head"; <style> é justamente uma tag de head).
       O DOMPurify devolve `body.innerHTML` — ou seja, o bloco inteiro era DESCARTADO
       nessas telas (medido: `/<style/.test(DOMPurify.sanitize(_sidebar.html)) === false`).
     - embrulhar o <style> numa <div> NÃO resolve: aí ele não é hoisteado, mas o
       DOMPurify remove a própria tag <style> e mantém o CSS como TEXTO (também medido).

   Consequências reais do bug, as duas fechadas ao mover o CSS pra cá:
     1. o dropdown do perfil abria SEM ESTILO NENHUM (texto solto sobre a página);
     2. as regras `html.perfil-atendente` / `html.perfil-profissional` abaixo nunca
        chegavam a ser aplicadas nessas telas — isso é ACESSO, não estética.

   Um stylesheet de verdade é a única forma robusta, e responsive.css é o único .css
   carregado por TODAS as telas do app (styles.css não está em conexao_whatsapp.html).
   Bônus: o CSS passa a valer independente de ONDE o nó esteja no DOM, o que é o que
   permite o menu viver fora do <aside> (ver abaixo).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Restrição por perfil (movida do <style> de _sidebar.html)
   ---------------------------------------------------------------------------
   Perfil "atendente" (por projeto — ver auth-interceptor.js): navegação restrita a
   Agenda + Atendimento + Negócios. auth-interceptor.js marca
   <html class="perfil-atendente"> quando o projeto atual tem
   perfil_operacional === 'atendente'.

   Negócios saiu desta lista em 2026-08-07 (a pedido do dono): é a ficha de quem o
   atendente está atendendo. A allowlist de auth-interceptor.js foi atualizada junto —
   esconder aqui sem liberar lá deixaria o item visível e o clique cairia em "Acesso
   negado", que é pior que não mostrar.

   Os pares href / data-original-href são propositais: setupNavigationInterceptor()
   (sidebar.js) troca o href por javascript:void(0) e guarda o alvo real em
   data-original-href, o que faz os seletores a[href="..."] pararem de casar assim que
   o interceptor roda. Hoje o menu de perfil vive FORA de #sidebar (o interceptor só
   varre `#sidebar a`), então "Minha conta"/"Ajuda" mantêm o href real e casam pelo
   primeiro seletor — os gêmeos data-original-href continuam aqui porque
   Planos/Faturamento/Usuários seguem dentro do #sidebar e são reescritos.
   --------------------------------------------------------------------------- */
/* Os itens abaixo (disparo/api-keys/meu-agente/billing/assinatura/usuarios) também são
   cobertos pelo mapa página->módulo de permissoes_modulos (contrato normativo, ver
   auth-interceptor.js). Quando o payload já resolveu o dado (html.permissoes-modulos-ativas),
   é o bloco "Permissões por módulo" mais abaixo (regras .modulo-oculto-*) que manda —
   sozinho, refletindo inclusive overrides explícitos (ex.: atendente com disparo:true) que
   esta allowlist fixa não sabe representar. Por isso o :not() aqui: esta regra vira FALLBACK,
   só entra em ação sem o dado novo (backend antigo, sessão antes do deploy, cache velho). */
html.perfil-atendente:not(.permissoes-modulos-ativas) #nav-disparo,
html.perfil-atendente:not(.permissoes-modulos-ativas) #nav-api-keys,
html.perfil-atendente:not(.permissoes-modulos-ativas) #nav-meu-agente,
html.perfil-atendente:not(.permissoes-modulos-ativas) a[href="billing.html"],
html.perfil-atendente:not(.permissoes-modulos-ativas) a[href="assinatura.html"],
html.perfil-atendente:not(.permissoes-modulos-ativas) a[href="usuarios.html"],
html.perfil-atendente:not(.permissoes-modulos-ativas) a[data-original-href="billing.html"],
html.perfil-atendente:not(.permissoes-modulos-ativas) a[data-original-href="assinatura.html"],
html.perfil-atendente:not(.permissoes-modulos-ativas) a[data-original-href="usuarios.html"] {
    display: none !important;
}

/* Fora do mapa de módulos (dashboard/perfil/ajuda/criar-agente) — sempre por perfil,
   com ou sem permissoes_modulos ativas, não tem chave própria pra herdar override. */
html.perfil-atendente #nav-dashboard,
html.perfil-atendente #nav-profile,
/* O atendente mantém o seletor de agente (é o filtro das telas dele), mas não a
   ação de criar agentes. */
html.perfil-atendente #agentActionCreate,
html.perfil-atendente a[href="ajuda.html"],
html.perfil-atendente a[data-original-href="ajuda.html"] {
    display: none !important;
}

/* Negócios ficou visível pro atendente (é a ficha de quem ele atende), mas dentro
   dela Relatórios (receita/ticket médio/ranking) e a engrenagem (CRUD de motivos de
   perda, admin-only no backend) não. negocios.js já não renderiza os dois pra este
   perfil (buildNegociosNav filtra a aba e pula a engrenagem) — isto aqui é redundância
   proposital pro caso do JS renderizar antes do marker aplicar ou algo injetar a aba
   depois. A proteção de verdade é o 403 do backend, não este CSS. */
html.perfil-atendente .nav-tab[data-view="negociosRelatorios"],
html.perfil-atendente #btnNegociosSettings,
html.perfil-atendente .btnNegociosSettingsMobile {
    display: none !important;
}

/*
 * Perfil "profissional" (por projeto — ver auth-interceptor.js): navegação restrita à
 * Agenda dele. Não é atendente (não abre a fila do módulo Atendimento) nem perfil de
 * gestão do negócio — mesmo desenho do perfil-atendente acima.
 */
/* Mesmo raciocínio do bloco perfil-atendente acima: os itens cobertos pelo mapa
   página->módulo de permissoes_modulos viram FALLBACK (:not(.permissoes-modulos-ativas)) —
   com o dado novo presente, quem manda é o bloco .modulo-oculto-* mais abaixo. */
html.perfil-profissional:not(.permissoes-modulos-ativas) #nav-negocios,
html.perfil-profissional:not(.permissoes-modulos-ativas) #nav-atendimento,
html.perfil-profissional:not(.permissoes-modulos-ativas) #nav-disparo,
html.perfil-profissional:not(.permissoes-modulos-ativas) #nav-api-keys,
html.perfil-profissional:not(.permissoes-modulos-ativas) #nav-meu-agente,
html.perfil-profissional:not(.permissoes-modulos-ativas) a[href="billing.html"],
html.perfil-profissional:not(.permissoes-modulos-ativas) a[href="assinatura.html"],
html.perfil-profissional:not(.permissoes-modulos-ativas) a[href="usuarios.html"],
html.perfil-profissional:not(.permissoes-modulos-ativas) a[data-original-href="billing.html"],
html.perfil-profissional:not(.permissoes-modulos-ativas) a[data-original-href="assinatura.html"],
html.perfil-profissional:not(.permissoes-modulos-ativas) a[data-original-href="usuarios.html"] {
    display: none !important;
}

/* Fora do mapa de módulos — sempre por perfil, com ou sem permissoes_modulos ativas. */
html.perfil-profissional #nav-dashboard,
html.perfil-profissional #nav-profile,
html.perfil-profissional #agentActionCreate,
html.perfil-profissional a[href="ajuda.html"],
html.perfil-profissional a[data-original-href="ajuda.html"] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Permissões por módulo (contrato normativo, ver contrato-permissoes-modulos.md e
   auth-interceptor.js: applyModulePermissionMarkers). Vale para QUALQUER perfil
   (administrator, user comum, atendente, profissional) — não só os dois acima.
   auth-interceptor.js marca html.modulo-oculto-<chave> pra cada chave de
   permissoes_modulos que vier false no projeto atual, e html.permissoes-modulos-ativas
   quando o payload trouxe o dado (usado acima pra desligar a allowlist fixa nos itens
   que colidem). Sem o dado (compatibilidade), nenhuma destas classes é aplicada — o menu
   fica só nas regras de perfil acima.
   --------------------------------------------------------------------------- */
html.modulo-oculto-meu-agente #nav-meu-agente,
html.modulo-oculto-negocios #nav-negocios,
html.modulo-oculto-atendimento #nav-atendimento,
html.modulo-oculto-agenda #nav-agenda,
html.modulo-oculto-disparo #nav-disparo,
html.modulo-oculto-api-keys #nav-api-keys,
html.modulo-oculto-planos #nav-planos,
html.modulo-oculto-faturamento #nav-faturamento,
html.modulo-oculto-usuarios #nav-usuarios {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Host fixo do avatar (canto superior direito da viewport)
   ---------------------------------------------------------------------------
   sidebar.js move #profileMenuBar para document.body na inicialização. Isso é o que
   destrava o position:fixed: #sidebar carrega as classes Tailwind `transform` (slide-in
   mobile), e um ancestral com transform vira containing block de QUALQUER descendente
   position:fixed — dentro do <aside> nem fixed escaparia. Como o host agora é filho de
   <body> (que não tem transform), o dropdown pode ser um simples position:absolute
   filho do gatilho: não precisa mais ser "portado" pro body nem ter top/left calculado
   por JS a cada abertura (era o que a versão anterior fazia). body.overflow-hidden não
   clipa: overflow só recorta descendentes cujo containing block está dentro dele, e o
   containing block de um fixed é a viewport.

   z-index 45: acima do conteúdo das telas (headers z-10, #sidebar z-30) e abaixo dos
   modais/overlays (z-50+), de propósito — enquanto um modal está aberto o avatar deve
   ficar por baixo dele, e não flutuando sobre o diálogo.
   --------------------------------------------------------------------------- */
.profile-topbar {
    position: fixed;
    top: 0.75rem;
    right: 1rem;
    z-index: 45;
    display: flex;
    align-items: center;
}

.profile-menu-wrap {
    position: relative;
}

.profile-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    /* Anel no hover via box-shadow (e não border) pra não mexer no tamanho do alvo. */
    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
    transition: box-shadow 0.15s ease-in-out;
}
.profile-menu-trigger:hover {
    box-shadow: 0 0 0 3px var(--ag-accent-soft, #eef2ff);
}
.profile-menu-trigger:focus-visible {
    outline: 2px solid var(--ag-focus-ring, #6366f1);
    outline-offset: 2px;
}

.profile-menu-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color SÓLIDO (não só o gradiente): o gradiente é background-image e
       deixaria getComputedStyle().backgroundColor em transparent, o que faz auditoria
       de contraste (test/e2e/tema-escuro) enxergar o texto branco sobre o fundo da
       página em vez de sobre o círculo. */
    background-color: #4f46e5;
    background-image: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    user-select: none;
    overflow: hidden;
    /* Anel na cor do fundo da página: mantém o avatar legível quando o conteúdo rola
       por baixo dele (principalmente no mobile, onde o cabeçalho da tela sai de cena). */
    box-shadow: 0 0 0 2px var(--ag-bg, #f0f2f5), 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ---------------------------------------------------------------------------
   Dropdown: abre ABAIXO do avatar, alinhado pela DIREITA
   --------------------------------------------------------------------------- */
.profile-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: 16rem;
    max-width: calc(100vw - 1.5rem);
    background-color: var(--ag-overlay-bg, #ffffff);
    border: 1px solid var(--ag-border, #e5e7eb);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.22), 0 4px 10px -4px rgba(16, 24, 40, 0.14);
    padding: 0.375rem;
    text-align: left;
}
.profile-menu-dropdown[hidden] {
    display: none;
}

.profile-menu-header {
    padding: 0.625rem 0.75rem 0.5rem;
}
.profile-menu-name {
    color: var(--ag-text, #111827);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-menu-email {
    color: var(--ag-text-muted, #6b7280);
    font-size: 0.75rem;
    line-height: 1rem;
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Margem negativa = separador sangrando até as bordas do menu (o padding do
   container é 0.375rem). */
.profile-menu-divider {
    height: 1px;
    background-color: var(--ag-divider, #e5e7eb);
    margin: 0.375rem -0.375rem;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    color: var(--ag-text, #111827);
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
}
.profile-menu-item i {
    width: 1rem;
    font-size: 0.875rem;
    text-align: center;
    color: var(--ag-text-muted, #6b7280);
    flex-shrink: 0;
}
.profile-menu-item:hover,
.profile-menu-item:focus-visible {
    background-color: var(--ag-surface-3, #f3f4f6);
    color: var(--ag-text, #111827);
    text-decoration: none;
}
.profile-menu-item:focus-visible {
    outline: 2px solid var(--ag-focus-ring, #6366f1);
    outline-offset: -2px;
}
.profile-menu-item:hover i,
.profile-menu-item:focus-visible i {
    color: var(--ag-text-secondary, #4b5563);
}

/* "Sair": ação de saída, fica um degrau mais apagada que os itens de navegação pra
   não competir visualmente com eles (o separador acima já a isola do grupo). */
.profile-menu-item-quiet,
.profile-menu-item-quiet i {
    color: var(--ag-text-muted, #6b7280);
}
.profile-menu-item-quiet:hover,
.profile-menu-item-quiet:focus-visible {
    background-color: var(--ag-surface-3, #f3f4f6);
    color: var(--ag-text-secondary, #4b5563);
}
.profile-menu-item-quiet:hover i,
.profile-menu-item-quiet:focus-visible i {
    color: var(--ag-text-secondary, #4b5563);
}

/* ---------------------------------------------------------------------------
   Espaço reservado no cabeçalho das telas
   ---------------------------------------------------------------------------
   Aplicado (no HTML de cada tela) na PRIMEIRA linha do conteúdo quando ela tem algo
   encostado na direita — engrenagem, kebab, botões de ação. Sem isso o avatar fixo
   passaria por cima de um controle clicável. Só no desktop: no mobile o avatar fica
   dentro da faixa do <header class="md:hidden">, à esquerda do hamburger, e o conteúdo
   do <main> começa abaixo dele.
   --------------------------------------------------------------------------- */
@media (min-width: 768px) {
    /* !important porque vários destes alvos já carregam um padding-right do Tailwind
       (px-6 / md:px-8 etc.), e o <style> do CDN do Tailwind é injetado DEPOIS deste
       stylesheet — no empate de especificidade a ordem no documento faria o Tailwind
       vencer. */
    .profile-gutter {
        padding-right: 3.25rem !important;
    }
}

/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* O avatar fica no MESMO canto do desktop (não deslocado): quem cede espaço é o
       <header class="md:hidden"> de cada tela, que reserva a faixa dele à direita. Sem
       isso o avatar cairia em cima do hamburger e, em negocios.html, também das abas +
       engrenagem que vivem nesse header. Todas as telas do app seguem o mesmo esqueleto
       (#mainContent > header.md:hidden), então uma regra só resolve todas. */
    #mainContent > header {
        padding-right: 4rem !important;
    }

    /* negocios.html: a engrenagem de configurações mora DENTRO da faixa de abas, que é
       um scroller horizontal (overflow-x:auto) — ela é empurrada pro fim do CONTEÚDO por
       um spacer flex-1, não pra borda visível. Com a faixa reservada acima, as abas
       passaram a estourar a largura e a engrenagem saiu de vista junto com o scroll.
       sticky à direita a mantém sempre visível e clicável por cima das abas que rolam
       (e passa a aguentar qualquer número de abas, não só as três de hoje).
       O fundo usa --ag-surface porque é exatamente o que o `bg-white` do header vira nos
       dois temas (--cb-white = 255 255 255 no claro, 26 29 35 no escuro). */
    #negociosNavContainerMobile .btnNegociosSettingsMobile {
        position: sticky;
        right: 0;
        z-index: 1;
        flex-shrink: 0;
        background-color: var(--ag-surface, #ffffff);
        box-shadow: -8px 0 8px -6px rgba(0, 0, 0, 0.18);
    }

    /* Gaveta mobile aberta: o backdrop é z-20 e o #sidebar z-30 — sem isso o avatar
       (z-45) ficaria boiando por cima da gaveta e do véu. */
    html.sidebar-mobile-open .profile-topbar {
        opacity: 0;
        pointer-events: none;
    }
}

/* Telas muito estreitas: o menu encosta na borda esquerda se mantiver 16rem. */
@media (max-width: 380px) {
    .profile-menu-dropdown {
        width: calc(100vw - 5.5rem);
        min-width: 13rem;
    }
}

/* >>> GEMEA-ESCURA — gerado por theme-build/build-dark-css.js, NÃO EDITAR >>> */
[data-theme="dark"] .profile-menu-trigger:focus-visible {
  outline: 2px solid var(--ag-focus-ring, rgb(var(--cr-indigo-500)));
}
[data-theme="dark"] .profile-menu-avatar {
  background-color: rgb(var(--cb-indigo-600));
  background-image: linear-gradient(135deg, rgb(var(--cb-indigo-600)), rgb(var(--cb-indigo-500)));
  color: rgb(var(--ct-white));
  box-shadow: 0 0 0 2px var(--ag-bg, #f0f2f5), 0 1px 3px rgb(0 0 0 / 0.56);
}
[data-theme="dark"] .profile-menu-dropdown {
  background-color: var(--ag-overlay-bg, rgb(var(--cb-white)));
  border: 1px solid var(--ag-border, rgb(var(--cr-gray-200)));
  box-shadow: 0 12px 32px -8px rgb(0 0 0 / 0.616), 0 4px 10px -4px rgb(0 0 0 / 0.392);
}
[data-theme="dark"] .profile-menu-name {
  color: var(--ag-text, rgb(var(--ct-gray-900)));
}
[data-theme="dark"] .profile-menu-email {
  color: var(--ag-text-muted, rgb(var(--ct-gray-500)));
}
[data-theme="dark"] .profile-menu-divider {
  background-color: var(--ag-divider, rgb(var(--cb-gray-200)));
}
[data-theme="dark"] .profile-menu-item {
  color: var(--ag-text, rgb(var(--ct-gray-900)));
}
[data-theme="dark"] .profile-menu-item i {
  color: var(--ag-text-muted, rgb(var(--ct-gray-500)));
}
[data-theme="dark"] .profile-menu-item:hover, [data-theme="dark"] .profile-menu-item:focus-visible {
  background-color: var(--ag-surface-3, rgb(var(--cb-gray-100)));
  color: var(--ag-text, rgb(var(--ct-gray-900)));
}
[data-theme="dark"] .profile-menu-item:focus-visible {
  outline: 2px solid var(--ag-focus-ring, rgb(var(--cr-indigo-500)));
}
[data-theme="dark"] .profile-menu-item:hover i, [data-theme="dark"] .profile-menu-item:focus-visible i {
  color: var(--ag-text-secondary, rgb(var(--ct-gray-600)));
}
[data-theme="dark"] .profile-menu-item-quiet, [data-theme="dark"] .profile-menu-item-quiet i {
  color: var(--ag-text-muted, rgb(var(--ct-gray-500)));
}
[data-theme="dark"] .profile-menu-item-quiet:hover, [data-theme="dark"] .profile-menu-item-quiet:focus-visible {
  background-color: var(--ag-surface-3, rgb(var(--cb-gray-100)));
  color: var(--ag-text-secondary, rgb(var(--ct-gray-600)));
}
[data-theme="dark"] .profile-menu-item-quiet:hover i, [data-theme="dark"] .profile-menu-item-quiet:focus-visible i {
  color: var(--ag-text-secondary, rgb(var(--ct-gray-600)));
}
@media (max-width: 767px) {
  [data-theme="dark"] #negociosNavContainerMobile .btnNegociosSettingsMobile {
    background-color: var(--ag-surface, rgb(var(--cb-white)));
    box-shadow: -8px 0 8px -6px rgb(0 0 0 / 0.504);
  }
}
/* <<< FIM-GEMEA-ESCURA <<< */