/**
 * Layout Responsivo para Páginas Internas
 * Header mobile com logo e menu sanduíche
 * Uses design-system-mobile.css variables
 */

/* ==========================================================================
   MOBILE HEADER (<= 768px)
   ========================================================================== */

@media (max-width: 768px) {

    /* Desabilitar pull-to-refresh em todo o app mobile */
    html, body {
        overscroll-behavior-y: none;
        overscroll-behavior: none;
    }

    /* Status bar removida */

    /* Ocultar sidebar no mobile */
    html body .chat-sidebar {
        display: none;
    }

    /* Ocultar ::before dos botões de configuração e perfil no mobile */
    html body .preferences-btn::before,
    html body .switch-profile-btn::before,
    html body .admin-panel-btn::before {
        display: none;
    }

    /* Home sticky bar — hidden via design-system-mobile.css */

    /* Garantir que o home-screen apareça */
    html body.page-with-home .chat-messages .home-screen {
        display: block;
    }

    /* Garantir que quick-shortcuts apareça - 1 coluna no mobile */
    html body.page-with-home .quick-shortcuts {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.75rem;
        padding: 0;
    }

    /* Botões de atalho em tela cheia no mobile (1 coluna) */
    html body.page-with-home .quick-shortcut-btn {
        width: 100%;
        justify-content: flex-start;
    }

    /* Ajustar o padding do chat-messages — espaço para input fixo no bottom */
    html body.page-with-home .chat-messages {
        padding-left: var(--mobile-gutter);
        padding-right: var(--mobile-gutter);
        padding-top: calc(var(--mobile-header-total) + var(--sticky-bar-height));
        padding-bottom: calc(200px + env(safe-area-inset-bottom, 0px));
    }

    /* Header Mobile */
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: var(--z-header);
        background: var(--bg-secondary);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 4px solid #d3d3d3;
        padding: max(1rem, env(safe-area-inset-top, 0px)) var(--mobile-gutter) var(--space-3) var(--mobile-gutter);
        align-items: center;
        justify-content: flex-start;
        min-height: var(--mobile-header-height);
        box-sizing: border-box;
    }

    [data-theme="dark"] .mobile-header {
        background: var(--bg-primary, #1a1a1a);
    }

    /* Logo no header */
    .mobile-header-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .mobile-header-logo img {
        height: 20px;
        width: auto;
    }

    .mobile-header-logo span {
        color: #ffffff;
        font-size: var(--text-base);
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    /* Link wrapper da mini logo */
    .mobile-header-logo-mini-link {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--touch-min);
    }

    /* Mini logo ao lado do botão menu */
    .mobile-header-logo-mini {
        height: 49px;
        width: auto;
        object-fit: contain;
        opacity: 1;
        filter: none;
        user-select: none;
    }

    [data-theme="dark"] .mobile-header-logo-mini {
        filter: brightness(0) invert(1);
        opacity: 1;
    }

    /* Header actions container */
    .mobile-header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
    }

    /* FAB inline dentro do header
       Bumped de 24 → 32px pra cumprir mínimo de touch target (Android
       recomenda 48dp ≈ 32px CSS no nosso DPR; 24 era difícil de tocar e o
       usuário reportava que "o menu + não funciona" — na verdade era miss
       de tap no botão minúsculo). */
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline {
        position: relative !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        min-height: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #FF5757 !important;
        color: #fff !important;
        border: none !important;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(255, 87, 87, 0.25) !important;
        z-index: auto !important;
        bottom: auto !important;
        right: auto !important;
        font-size: 0.875rem;
        /* transform default = none, mas quando .active vira rotate(45deg)
           pra mudar o + em ×. NÃO usar !important aqui senão a regra
           `.quick-tabs-fab.active { transform: rotate(45deg) }` nunca aplica
           e o usuário perde o feedback visual. Mantemos a transição. */
        transform: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline.active {
        transform: rotate(45deg);
    }
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline::before {
        content: '';
        position: absolute;
        inset: -6px;
        border-radius: 50%;
    }
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline:active {
        transform: scale(0.92);
    }
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline.active:active {
        transform: rotate(45deg) scale(0.92);
    }
    /* Ícone interno levemente maior pra preencher o botão de 32px sem deixar
       o + parecer perdido no centro. */
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline svg,
    html body .mobile-header .mobile-header-actions .quick-tabs-fab.quick-tabs-fab--inline i {
        width: 18px;
        height: 18px;
    }

    .mobile-header-actions .quick-tabs-fab--inline .quick-tabs-fab__label {
        display: none;
    }

    /* Botão Notificação */
    .mobile-header-notification-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-min);
        height: var(--touch-min);
        background: transparent;
        border: none;
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        flex-shrink: 0;
    }

    .mobile-header-notification-btn:hover,
    .mobile-header-notification-btn:active {
        background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
        transform: scale(0.95);
    }

    .notification-badge {
        position: absolute;
        top: 6px;
        right: 6px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #ef4444;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        border-radius: var(--radius-full);
        pointer-events: none;
    }

    /* Notification Dropdown — bottom sheet (igual quick-tabs-panel) */
    .notification-dropdown {
        position: fixed;
        top: calc(var(--mobile-header-total, 86px) + 8px);
        bottom: 0;
        left: 0;
        right: 0;
        transform: translateY(100%);
        width: 100%;
        max-width: 100vw;
        background: var(--card-bg, #fff);
        color: var(--text-primary, #1a1a1a);
        border: none;
        border-top: 1px solid var(--border-color, #e5e7eb);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
        padding-top: 12px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: calc(var(--z-header) + 1);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Drag handle do bottom sheet */
    .notification-dropdown::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        pointer-events: none;
        z-index: 1;
    }

    .notification-dropdown.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    [data-theme="dark"] .notification-dropdown {
        background: var(--card-bg, #2c2c2c);
        border-top-color: var(--border-color, rgba(255, 255, 255, 0.1));
    }

    [data-theme="dark"] .notification-dropdown::before {
        background: rgba(255, 255, 255, 0.25);
    }

    /* ── Conteúdo interno espelha o modal web (.notif-dropdown__*) ──
       O restante (__actions, __action, __list, __footer, .notif-item,
       .notif-empty, .notif-activation-banner) já é estilizado por
       notifications-bell.css em seletores standalone. Aqui só damos as
       regras base de header/title/body/footer, que no desktop vivem em
       seletores .page-X (não alcançam .notification-dropdown). Prefixo
       `html` garante prioridade sobre o CSS por-página. */
    html .notification-dropdown .notif-dropdown__header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        flex-shrink: 0;
    }
    [data-theme="dark"] .notification-dropdown .notif-dropdown__header {
        border-bottom-color: #333;
    }
    html .notification-dropdown .notif-dropdown__title {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    html .notification-dropdown .notif-dropdown__body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.75rem;
    }
    html .notification-dropdown .notif-dropdown__footer {
        flex-shrink: 0;
    }

    .notification-dropdown-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        flex-shrink: 0;
    }

    [data-theme="dark"] .notification-dropdown-header {
        border-color: #333;
    }

    .notification-dropdown-title {
        margin: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--text-primary);
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .notification-dropdown-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: transparent;
        border: none;
        border-radius: 6px;
        color: var(--text-secondary, #6b7280);
        cursor: pointer;
        transition: background 0.15s ease;
        padding: 0;
    }

    .notification-dropdown-close:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    .notification-dropdown-body {
        padding: 0.75rem;
        max-height: 320px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Estado vazio */
    .notification-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
        color: var(--text-secondary, #9ca3af);
        gap: 0.75rem;
    }

    .notification-empty p {
        margin: 0;
        font-size: 0.875rem;
    }

    /* Items de notificação — estilo card igual web */
    .notification-item {
        display: flex;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 12px;
        background: var(--bg-secondary, #f9fafb);
        border: 1px solid var(--border-color, #e5e7eb);
        margin-bottom: 0.5rem;
        transition: background 0.15s ease;
    }

    .notification-item:last-child {
        margin-bottom: 0;
    }

    .notification-item-icon {
        display: none;
        color: #FF5757;
    }

    [data-theme="dark"] .notification-item-icon {
        background: rgba(255, 87, 87, 0.15);
    }

    .notification-item-content {
        flex: 1;
        min-width: 0;
    }

    .notification-item-title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin: 0 0 2px;
        line-height: 1.3;
    }

    .notification-item-desc {
        font-size: var(--text-xs);
        color: var(--text-secondary, #6b7280);
        margin: 0;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .notification-item-time {
        font-size: 10px;
        color: var(--text-secondary, #9ca3af);
        margin-top: 4px;
    }

    .notification-item-content strong {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--text-primary);
        display: block;
        margin-bottom: 0.5rem;
    }

    .notification-item-content p {
        font-size: 0.875rem;
        color: var(--text-secondary, #6b7280);
        margin: 0 0 0.75rem;
        line-height: 1.5;
    }

    .notification-item-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 1.5rem;
        border-radius: 50px;
        font-size: 0.8125rem;
        font-weight: 600;
        text-decoration: none;
        border: none;
        background: linear-gradient(135deg, #FF5757 0%, #E04848 100%);
        color: white;
        transition: filter 0.2s;
    }

    .notification-item-action:hover {
        filter: brightness(1.05);
    }

    /* Esconder mensagem vazia quando há notificações */
    .notification-dropdown-body:has(.notification-item) .notification-empty {
        display: none;
    }

    /* Overlay */
    .notification-dropdown-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        z-index: var(--z-header);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s ease;
    }

    [data-theme="dark"] .notification-dropdown-overlay {
        background: rgba(0, 0, 0, 0.55);
    }

    .notification-dropdown-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Desktop notif-dropdown como bottom sheet mobile
       (abre de baixo para cima, igual ao quick-tabs-panel) */
    .notif-dropdown.mobile-modal {
        position: fixed !important;
        top: calc(var(--mobile-header-total, 86px) + 8px) !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: translateY(0) !important;
        z-index: 10001 !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-height: none !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
        border-radius: 20px 20px 0 0 !important;
        border-top: 1px solid var(--border-color, #e5e7eb);
        padding-top: 12px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        overflow: hidden;
        animation: notifDropdownSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .notif-dropdown.mobile-modal::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        pointer-events: none;
        z-index: 1;
    }
    [data-theme="dark"] .notif-dropdown.mobile-modal::before {
        background: rgba(255, 255, 255, 0.25);
    }
    @keyframes notifDropdownSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Botão Menu Sanduíche */
    .mobile-menu-toggle {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: var(--touch-min);
        height: var(--touch-min);
        background: transparent;
        border: none;
        border-radius: var(--radius-lg);
        color: #000000;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:active {
        background: transparent;
        transform: scale(0.95);
    }

    .mobile-menu-toggle i,
    .mobile-menu-toggle svg {
        width: 24px;
        height: 24px;
        color: #000000;
        stroke: #000000;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: all 0.3s ease;
    }

    /* Estado aberto: o próprio botão vira um X, sem depender do Lucide.
       Isso mantém o controle utilizável mesmo se o pacote de ícones atrasar
       ou falhar no WebView. */
    .mobile-menu-toggle.active > i[data-lucide="menu"],
    .mobile-menu-toggle.active > svg.lucide-menu {
        opacity: 0;
    }

    .mobile-menu-toggle.active::before,
    .mobile-menu-toggle.active::after {
        content: '';
        position: absolute;
        width: 24px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: transform 0.3s ease;
    }

    .mobile-menu-toggle.active::before {
        transform: rotate(45deg);
    }

    .mobile-menu-toggle.active::after {
        transform: rotate(-45deg);
    }

    /* Dark mode - menu toggle branco */
    html[data-theme="dark"] .mobile-menu-toggle {
        color: #ffffff;
    }

    html[data-theme="dark"] .mobile-menu-toggle i,
    html[data-theme="dark"] .mobile-menu-toggle svg {
        color: #ffffff;
        stroke: #ffffff;
    }

    /* Menu Mobile Overlay */
    .mobile-menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: var(--z-menu);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-menu-overlay.active {
        opacity: 1;
        visibility: visible;
        z-index: 10000;
    }

    /* Menu Mobile Sidebar */
    .mobile-menu-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        max-height: 100vh;
        background: #f6f6f6;
        color: var(--text-primary, #000000);
        z-index: 10001;
        transition: transform 0.3s ease, opacity 0.3s ease;
        overflow-y: auto;
        padding: var(--space-5);
        padding-top: max(45px, calc(45px + env(safe-area-inset-top)));
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
    }

    [data-theme="dark"] .mobile-menu-sidebar {
        background: #1a1a1a;
        color: #ffffff;
    }

    /* Esconder Mundo Hoje do sidebar mobile */
    .mobile-menu-sidebar .mobile-menu-link[href*="mundo-hoje"] {
        display: none;
    }

    .mobile-menu-sidebar.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /* Topo do menu — logo + botão fechar (light por padrão) */
    .mobile-menu-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-6);
        padding-bottom: var(--space-4);
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    [data-theme="dark"] .mobile-menu-top {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

    .mobile-menu-logo img {
        height: 49px;
        width: auto;
        object-fit: contain;
    }

    .mobile-menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        background: rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-lg);
        color: var(--text-primary, #000000);
        cursor: pointer;
    }

    .mobile-menu-close:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.95);
    }

    [data-theme="dark"] .mobile-menu-close {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #ffffff;
    }

    [data-theme="dark"] .mobile-menu-close:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Menu Header - Oculto no dropdown */
    .mobile-menu-header {
        display: none;
    }

    /* Menu Sections */
    .mobile-menu-section {
        margin-bottom: var(--space-6);
    }

    .mobile-menu-section:last-child {
        margin-bottom: 0;
    }

    .mobile-menu-title {
        color: var(--accent-color);
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: var(--space-3);
        padding-left: var(--space-1);
    }

    /* Menu Links (light por padrão) */
    .mobile-menu-link {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 14px var(--mobile-gutter);
        color: var(--text-primary, #000000);
        text-decoration: none;
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-1);
        transition: all 0.2s ease;
        background: transparent;
        border: 1px solid transparent;
        min-height: var(--touch-min);
    }

    .mobile-menu-link:hover {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
    }

    .mobile-menu-link i {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .mobile-menu-link span {
        font-size: var(--text-md);
        font-weight: 500;
    }

    .mobile-menu-link.active {
        background: rgba(0, 0, 0, 0.07);
    }

    .mobile-menu-link.active i {
        opacity: 1;
        color: var(--text-primary, #000000);
    }

    .mobile-menu-link.active span {
        color: var(--text-primary, #000000);
        font-weight: 600;
    }

    .mobile-menu-section .mobile-menu-link {
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-menu-link.mobile-logout-btn {
        color: var(--accent-color, #FF5757);
        margin-top: var(--space-2, 8px);
        border-radius: 0;
    }

    .mobile-menu-link.mobile-logout-btn i {
        opacity: 1;
        color: var(--accent-color, #FF5757);
    }

    /* Divider (light por padrão) */
    .mobile-menu-divider {
        height: 1px;
        background: rgba(0, 0, 0, 0.08);
        margin: var(--space-5) 0;
    }

    /* Mobile Menu Dropdown */
    .mobile-menu-dropdown {
        margin-bottom: var(--space-1);
    }

    .mobile-menu-dropdown-toggle {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        width: 100%;
        padding: 14px var(--mobile-gutter);
        color: var(--text-primary, #000000);
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--radius-lg);
        cursor: pointer;
        transition: all 0.2s ease;
        text-align: left;
        font-size: var(--text-md);
        font-weight: 500;
        min-height: var(--touch-min);
    }

    .mobile-menu-dropdown-toggle:hover {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.1);
    }

    /* Dark theme — restaura cores claras nos links/dropdown/divider */
    [data-theme="dark"] .mobile-menu-link,
    [data-theme="dark"] .mobile-menu-dropdown-toggle {
        color: #ffffff;
    }

    [data-theme="dark"] .mobile-menu-link:hover,
    [data-theme="dark"] .mobile-menu-dropdown-toggle:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .mobile-menu-link.active {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .mobile-menu-link.active i,
    [data-theme="dark"] .mobile-menu-link.active span {
        color: #ffffff;
    }

    [data-theme="dark"] .mobile-menu-divider {
        background: rgba(255, 255, 255, 0.1);
    }

    .mobile-menu-dropdown-toggle i:first-child {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .mobile-menu-dropdown-toggle span {
        flex: 1;
    }

    .mobile-menu-dropdown-toggle .dropdown-arrow {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    .mobile-menu-dropdown.active .dropdown-arrow {
        transform: rotate(180deg);
    }

    .mobile-menu-dropdown-content {
        position: relative;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding-left: var(--mobile-gutter);
    }

    /* Barra vertical vermelha à esquerda — espelha o `.dropdown-menu::before`
       do sidebar web (app.css:528). Só aparece com o submenu aberto. */
    .mobile-menu-dropdown.active .mobile-menu-dropdown-content::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg,
            rgba(255, 87, 87, 0.45) 0%,
            rgba(255, 87, 87, 0.08) 100%);
        border-radius: 0 2px 2px 0;
        pointer-events: none;
    }

    .mobile-menu-dropdown.active .mobile-menu-dropdown-content {
        max-height: 500px;
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    .mobile-menu-dropdown-content .mobile-menu-link {
        padding: 10px var(--mobile-gutter);
        font-size: var(--text-base);
    }

    .mobile-menu-dropdown-content .mobile-menu-link i {
        width: 18px;
        height: 18px;
    }

    /* Esconde o ícone principal (1º filho) dos itens DENTRO do submenu para
       espelhar o sidebar web, onde os itens de submenu são só texto. Cobre o
       <i data-lucide> (antes/fallback) e o <svg> que o lucide injeta no lugar.
       O cadeado (.menu-lock-icon) e o badge de trilha (span) vêm após o texto,
       então nunca são :first-child e permanecem visíveis. */
    .mobile-menu-dropdown-content .mobile-menu-link > i:first-child,
    .mobile-menu-dropdown-content .mobile-menu-link > svg:first-child {
        display: none;
    }

    .mobile-menu-dropdown-content .mobile-menu-link span {
        font-size: var(--text-base);
    }

    /* Nested Mobile Menu Dropdown (sub-dropdown dentro de dropdown) */
    .mobile-menu-dropdown--nested {
        margin: 0;
        padding-left: var(--space-2, 8px);
    }

    .mobile-menu-dropdown-toggle--nested {
        padding: 10px var(--mobile-gutter);
        font-size: var(--text-base);
    }

    .mobile-menu-dropdown-toggle--nested i:first-child {
        width: 18px;
        height: 18px;
    }

    /* Forçar nested fechado mesmo quando pai está ativo */
    .mobile-menu-dropdown-content--nested {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        padding-left: var(--space-3, 12px);
    }

    .mobile-menu-dropdown--nested.active > .mobile-menu-dropdown-content--nested {
        max-height: 500px;
        padding-top: var(--space-1);
        padding-bottom: var(--space-1);
    }

    /* Seta do sub-dropdown: classe isolada para evitar conflito com pai */
    .dropdown-arrow-nested {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        transition: transform 0.3s ease;
        transform: rotate(0deg);
    }

    .mobile-menu-dropdown--nested.active .dropdown-arrow-nested {
        transform: rotate(180deg);
    }

    .mobile-menu-dropdown-content--nested .mobile-menu-link {
        padding: 8px var(--mobile-gutter);
        font-size: var(--text-sm, 0.875rem);
    }

    /* Safe-area inferior no chat input — iOS com home indicator.
       Exclui page-with-home (input fixed já usa bottom: safe-area + espaço)
       e page-atalhos-rapidos (tem regra própria com !important). */
    html body:not(.page-with-home):not(.page-atalhos-rapidos) .chat-input-container {
        padding-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }

    /* Safe Area para iPhone X+ */
    @supports (padding: max(0px)) {
        .mobile-header {
            padding-top: max(1rem, env(safe-area-inset-top, 0px));
            padding-left: max(var(--mobile-gutter), env(safe-area-inset-left));
            padding-right: max(var(--mobile-gutter), env(safe-area-inset-right));
        }

        html body.page-with-home .chat-messages {
            padding-top: calc(var(--mobile-header-total) + var(--sticky-bar-height));
        }

        .mobile-menu-sidebar {
            padding-top: max(45px, calc(45px + env(safe-area-inset-top)));
            padding-left: max(var(--space-5), env(safe-area-inset-left));
            padding-right: max(var(--space-5), env(safe-area-inset-right));
            padding-bottom: max(var(--space-5, 20px), env(safe-area-inset-bottom, 0px), 48px);
        }
    }
}

/* Avisos do SweetAlert2 devem permanecer acima dos modais da aplicação. */
.swal2-container {
    z-index: 2147483646 !important;
}

/* Toasts customizados também precisam ficar acima dos modais. */
.toast-container {
    z-index: 2147483646 !important;
}

/* ==========================================================================
   DESKTOP - Ocultar elementos mobile
   ========================================================================== */

@media (min-width: 769px) {
    .mobile-header,
    .mobile-menu-overlay,
    .mobile-menu-sidebar,
    .notification-dropdown,
    .notification-dropdown-overlay {
        display: none !important;
    }
}

/* Fullscreen pages — hide mobile header */
body.page-jarvis-sales .mobile-header {
    display: none !important;
}

@media (max-width: 768px) {
    body.page-jarvis-sales .chat-container {
        padding-top: 50px;
    }

    body.page-jarvis-meeting .chat-main {
        padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top, 0px));
        min-height: 100svh;
        box-sizing: border-box;
    }

    body.page-jarvis-meeting .jarvis-page {
        padding-top: 0;
        min-height: 100%;
    }

    .notif-card__action {
        width: 100% !important;
    }

    .rotina-info-fields {
        padding: 0 !important;
    }

    .rotina-task-header [data-tooltip]::after,
    .rotina-task-header [data-tooltip]::before {
        display: none !important;
    }

    /* ── Overlay para fechar o drawer de configurações ao clicar fora ── */
    .notif-settings-overlay {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 1250; /* entre notification-dropdown (801) e settings-drawer (1300) */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0s 0.3s;
    }

    .notif-settings-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: visibility 0s;
    }

    /* ── SweetAlert2 — bottom sheet no mobile ── */
    html body .swal2-center {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    html body .swal2-popup:not(.swal2-toast) {
        width: 100% !important;
        max-width: 100vw !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 28px 20px !important;
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18) !important;
        margin: 0 !important;
        position: relative !important;
        background: var(--card-bg, #fff) !important;
        color: var(--text-primary, #1a1a1a) !important;
    }

    /* Drag handle visual (igual aos outros bottom sheets) */
    html body .swal2-popup:not(.swal2-toast)::before {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        pointer-events: none;
        z-index: 1;
    }

    [data-theme="dark"] html body .swal2-popup:not(.swal2-toast)::before {
        background: rgba(255, 255, 255, 0.25);
    }

    /* Esconder ícone SVG */
    html body .swal2-popup:not(.swal2-toast) .swal2-icon {
        display: none !important;
    }

    /* Animações slide-from-bottom */
    @keyframes swal2-bottom-show {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    @keyframes swal2-bottom-hide {
        from { transform: translateY(0);    opacity: 1; }
        to   { transform: translateY(100%); opacity: 0; }
    }

    html body .swal2-popup:not(.swal2-toast).swal2-show {
        animation: swal2-bottom-show 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    html body .swal2-popup:not(.swal2-toast).swal2-hide {
        animation: swal2-bottom-hide 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    }
}

/* ==========================================================================
   ANDROID + iOS FLUTTER WEBVIEW — fix global de scroll congelado em interações
   --------------------------------------------------------------------------
   Bug observado: ao tocar em checkbox, dropdown, select ou filtro em
   qualquer página com layout .chat-container, o scroll trava ("congela")
   no InAppWebView Android. Reportado em /rotina-diaria, /atendimento-solo,
   /notificacoes — afeta toda a app.

   Mesmo sintoma também aparece em iOS WKWebView na página
   /configuracao/metas/usuarios (scroll da página não responde). Causa raiz
   é a mesma — scroll duplo competindo —, então as regras são estendidas
   para html.is-ios.

   Causa raiz: .chat-container tem height:100vh. Em modo seleção, algumas
   páginas (ex.: rotina-diaria.css:7026) adicionam padding-bottom:80px ao
   body, tornando o documento HTML rolável e competindo com o scroll de
   .chat-messages. Mesmo sem seleção, o delay nativo de 300ms para
   double-tap em WebView atrasa o reconhecimento de tap vs scroll,
   fazendo o gesto seguinte ser ignorado.

   Estratégia (não destrutiva — só WebView mobile, só mobile breakpoint):
   1. Força .chat-main como overflow:hidden — único scroll é .chat-messages.
   2. touch-action: pan-y + overscroll-behavior: contain em .chat-messages.
   3. Catch-all body[class*="selection-active"] zera padding-bottom.
   4. touch-action: manipulation em controles interativos elimina os 300ms.

   Páginas que já têm fix individual (rotina-diaria, notificacoes,
   atendimento-solo) usam body.page-X com !important — vencem por
   especificidade e continuam funcionando como antes.
   ========================================================================== */
@media (max-width: 768px) {
    /* Só bloqueia overflow quando .chat-messages é o container de scroll real.
       Páginas sem .chat-messages usam .chat-main como container — não bloquear. */
    html.is-android .chat-main:has(.chat-messages),
    html.is-ios .chat-main:has(.chat-messages) {
        overflow: hidden !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: auto !important;
    }

    html.is-android .chat-main:not(:has(.chat-messages)),
    html.is-ios .chat-main:not(:has(.chat-messages)) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y;
    }

    html.is-android .chat-messages,
    html.is-ios .chat-messages {
        touch-action: pan-y;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    html.is-android body[class*="selection-active"],
    html.is-ios body[class*="selection-active"] {
        padding-bottom: 0;
    }

    html.is-android .chat-messages input[type="checkbox"],
    html.is-android .chat-messages input[type="radio"],
    html.is-android .chat-messages select,
    html.is-android .chat-messages button,
    html.is-android .chat-messages [role="button"],
    html.is-ios .chat-messages input[type="checkbox"],
    html.is-ios .chat-messages input[type="radio"],
    html.is-ios .chat-messages select,
    html.is-ios .chat-messages button,
    html.is-ios .chat-messages [role="button"] {
        touch-action: manipulation;
    }
}