/* Dashboard navigation becomes a separate screen on phones. */
@media (max-width: 759px) {
    body.mobile-dashboard-active {
        --mobile-dashboard-header-height: calc(58px + env(safe-area-inset-top, 0px));
        overflow: hidden;
    }

    body.mobile-dashboard-active .app-shell,
    body.mobile-dashboard-active .app-shell .main {
        width: 100% !important;
        height: 100dvh !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.mobile-dashboard-active .app-shell .main {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: var(--mobile-dashboard-header-height) minmax(0, 1fr) !important;
        padding: 0 !important;
        overflow: hidden !important;
        background: var(--bg) !important;
    }

    body.mobile-dashboard-active .main::after { display: none !important; }

    body.mobile-dashboard-active:has(#dashboardWorkspace:not([hidden])) .main > .topbar {
        position: relative !important;
        inset: auto !important;
        z-index: 61;
        display: flex !important;
        flex-wrap: nowrap !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: var(--mobile-dashboard-header-height);
        gap: 4px;
        padding: env(safe-area-inset-top, 0px) 8px 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        background: var(--surface);
    }

    body.mobile-dashboard-active .topbar-left {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center;
        width: auto !important;
        min-width: 0;
        gap: 6px !important;
    }

    body.mobile-dashboard-active .topbar .sidebar-toggle-button {
        order: -1;
        display: grid !important;
        flex: 0 0 40px;
        place-items: center;
        width: 40px !important;
        min-width: 40px !important;
        height: 44px;
        margin: 0 !important;
        padding: 9px;
        color: var(--text);
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    body.mobile-dashboard-active .topbar #globalHomeButton {
        display: flex !important;
        flex: 0 1 auto;
        align-items: center;
        justify-content: flex-start;
        width: auto !important;
        min-width: 0 !important;
        min-height: 44px;
        margin: 0 !important;
        padding: 0;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    body.mobile-dashboard-active .topbar .topbar-brand-logo {
        width: auto !important;
        max-width: 116px !important;
        height: 32px !important;
    }
    body.mobile-dashboard-active .topbar .prep-atlas-brand { gap: 6px; color: var(--text); }
    body.mobile-dashboard-active .topbar .prep-atlas-brand__mascot-frame { width: 28px; height: 28px; flex-basis: 28px; }
    body.mobile-dashboard-active .topbar .prep-atlas-brand__name { font-size: 20px; }
    body.mobile-dashboard-active .topbar .page-title,
    body.mobile-dashboard-active .topbar .topbar-stats,
    body.mobile-dashboard-active .topbar #themeToggle { display: none !important; }

    body.mobile-dashboard-active .topbar .topbar-search-button {
        flex: 0 0 36px !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 40px;
        margin: 0 !important;
        padding: 8px;
    }
    body.mobile-dashboard-active .topbar .topbar-search-button > span { display: none; }
    body.mobile-dashboard-active .topbar .topbar-actions {
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center;
        width: auto !important;
        margin: 0 !important;
        gap: 4px;
    }
    body.mobile-dashboard-active .topbar .account-trigger { min-width: 36px; max-width: 76px; min-height: 40px; padding: 4px; gap: 3px; }
    body.mobile-dashboard-active .topbar .account-trigger-avatar { width: 30px; height: 30px; flex-basis: 30px; }
    body.mobile-dashboard-active .topbar #accountButtonLabel { font-size: 11px; }
    body.mobile-dashboard-active .topbar .topbar-settings-button { width: 36px; min-width: 36px; height: 40px; padding: 8px; }

    body.mobile-dashboard-active #dashboardWorkspace { display: none !important; }
    body.mobile-dashboard-active.mobile-dashboard-nav-open #dashboardWorkspace {
        position: fixed !important;
        inset: var(--mobile-dashboard-header-height) 0 0 !important;
        z-index: 60;
        display: block !important;
        box-sizing: border-box;
        width: 100% !important;
        height: calc(100dvh - var(--mobile-dashboard-header-height)) !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: var(--surface);
    }

    body.mobile-dashboard-active #dashboardWorkspace .dashboard-inner {
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 520px;
        height: auto !important;
        min-height: 100%;
        margin: 0 auto;
        padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 12px;
        border: 0;
        border-radius: 0;
        overflow: visible !important;
        backdrop-filter: none;
    }
    body.mobile-dashboard-active #dashboardSidebarBrand { display: none !important; }
    body.mobile-dashboard-active #dashboardWorkspace .dashboard-columns { display: flex !important; flex-direction: column; width: 100%; gap: 4px; }
    body.mobile-dashboard-active #dashboardWorkspace .dashboard-header,
    body.mobile-dashboard-active #dashboardWorkspace .dashboard-header-actions { display: contents; }
    body.mobile-dashboard-active #dashboardWorkspace .dashboard-subject-selector { position: relative; inset: auto; width: 100%; }
    body.mobile-dashboard-active #dashboardWorkspace .dashboard-subject-trigger { width: 100%; min-height: 44px; transform: none; }
    body.mobile-dashboard-active #dashboardWorkspace .sidebar-section-label { margin: 16px 8px 6px; font-size: 12px; }
    body.mobile-dashboard-active #dashboardWorkspace :is(.dashboard-tools, .dashboard-tool-cluster) { display: block; width: 100%; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px 12px; }
    body.mobile-dashboard-active #dashboardWorkspace :is(.dashboard-home-button, .sidebar-nav-button, .quick-chat-button),
    body.mobile-dashboard-active #dashboardWorkspace .atlas-launcher__items button { display: flex; flex: 0 0 auto; align-items: center; width: 100%; height: auto; min-height: 44px; padding: 8px 12px; gap: 12px; font-size: 15px; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 140px; min-height: 140px; padding: 8px; gap: 4px; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool__visual { position: relative; flex: 0 0 64px !important; width: 88px; height: 64px; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool .react-folder-mount { position: absolute; top: 50%; left: 50%; width: 100px; height: 80px; transform: translate(-50%, -50%) scale(1.05) !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool-label { font-size: 14px; }
    body.mobile-dashboard-active #dashboardWorkspace .mobile-dashboard-folder-art { display: block; position: relative; flex: 0 0 94px; width: 140px; height: 94px; transform: scale(1.2); }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool:has(.mobile-dashboard-folder-art) > .folder-tool__visual { display: none !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool .mobile-dashboard-folder-art .folder { transform: none !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool .mobile-dashboard-folder-art .paper { transform: translate(-50%, 10%) !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool .mobile-dashboard-folder-art .folder__front { transform: none !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool.is-mobile-folder-pressed .mobile-dashboard-folder-art .folder { transform: translateY(-5px) !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool.is-mobile-folder-pressed .mobile-dashboard-folder-art .paper { transform: translate(-50%, 0%) !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool.is-mobile-folder-pressed .mobile-dashboard-folder-art .folder__front { transform: skew(15deg) scaleY(.6) !important; }
    body.mobile-dashboard-active #dashboardWorkspace .folder-tool.is-mobile-folder-pressed .mobile-dashboard-folder-art .folder__front.right { transform: skew(-15deg) scaleY(.6) !important; }

    body.mobile-dashboard-active .main > section:not(#dashboardWorkspace):not(.global-search):not([hidden]) {
        position: relative !important;
        inset: auto !important;
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior-y: contain;
    }
    body.mobile-dashboard-active.mobile-dashboard-nav-open .main > section:not(#dashboardWorkspace):not(.global-search):not([hidden]) { visibility: hidden; pointer-events: none; }
    body.mobile-dashboard-active #appHomeWorkspace { padding: 24px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
    body.mobile-dashboard-active .home-columns,
    body.mobile-dashboard-active .home-side-column,
    body.mobile-dashboard-active .home-side-bottom { grid-template-columns: minmax(0, 1fr); }
    body.mobile-dashboard-active .home-history-card,
    body.mobile-dashboard-active .home-friends-panel { width: 100% !important; max-width: 100%; }
    body.mobile-dashboard-active .home-paper-progress-card { width: 100%; height: auto !important; min-height: 0 !important; }
    body.mobile-dashboard-active .home-progress-scroll { flex: 0 0 auto; height: auto !important; max-height: none; overflow: visible !important; }
    body.mobile-dashboard-active .home-paper-progress-card .paper-progress-chart { height: auto; }
    body.mobile-dashboard-active .home-question-donuts .insight-legend li:not(:has(i)) { display: block; }
}

@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
    body.mobile-dashboard-active #dashboardWorkspace .mobile-dashboard-folder-art :is(.folder, .paper, .folder__front) { transition: none !important; }
}