/* ============================================================
   MOBILE POWERFUL OVERRIDE LAYER
   Optimasi tampilan mobile yang powerful tanpa menghilangkan fitur
   ============================================================ */

/* ── Safe Area & Base Mobile Setup ─────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    :root {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
    }
}

:root {
    --safe-top: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --safe-right: 0px;
    --mobile-topbar-height: 0px;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Login Screen Mobile ───────────────────────────────────── */
@media (max-width: 767px) {
    #login-screen {
        padding: calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom)) !important;
        min-height: 100dvh !important;
        align-items: center !important;
    }

    .login-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 20px !important;
        border-radius: 20px !important;
        margin: 0 !important;
    }

    .login-card h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .login-card p {
        font-size: 0.85rem !important;
        text-align: center !important;
    }

    .login-card form {
        gap: 14px !important;
    }

    .login-card label {
        font-size: 0.85rem !important;
    }

    .login-card input[type="text"],
    .login-card input[type="password"] {
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
    }

    .login-card .btn {
        min-height: 48px !important;
        font-size: 0.95rem !important;
        border-radius: 12px !important;
    }

    .login-card .remember-row {
        padding: 10px 12px !important;
    }

    .login-card .remember-row input {
        width: 18px !important;
        height: 18px !important;
    }
}

/* ── App Screen Mobile Layout ──────────────────────────────── */
@media (max-width: 1080px) {
    #app-screen.active {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        gap: 0 !important;
        min-height: 100dvh !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    #app-screen.active > .workspace {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* ── Sidebar: Bottom Sheet Style ── */
    .sidebar {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 82dvh !important;
        min-height: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(120, 150, 190, 0.25) !important;
        background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(241, 247, 255, 0.98)) !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18) !important;
        padding: 12px 14px calc(12px + var(--safe-bottom)) !important;
        gap: 8px !important;
        z-index: 200 !important;
        transform: translateY(100%) !important;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.sidebar-open .sidebar {
        transform: translateY(0) !important;
    }

    /* Sidebar drag handle */
    .sidebar::before {
        content: "" !important;
        display: block !important;
        width: 44px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(120, 140, 170, 0.35) !important;
        margin: 0 auto 10px !important;
        flex-shrink: 0 !important;
    }

    .sidebar-head {
        justify-content: space-between !important;
        padding: 0 2px 8px !important;
        border-bottom: 1px solid rgba(120, 150, 190, 0.15) !important;
        margin-bottom: 4px !important;
    }

    .sidebar-head::before {
        content: "Menu" !important;
        font-size: 0.7rem !important;
        font-weight: 800 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: #6b8098 !important;
    }

    .sidebar-accordion-item {
        border-radius: 12px !important;
        border: 1px solid rgba(120, 150, 190, 0.15) !important;
        background: rgba(255, 255, 255, 0.75) !important;
        overflow: hidden !important;
    }

    .sidebar-accordion-toggle {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
    }

    .sidebar-accordion-panel {
        padding: 6px 8px 10px !important;
        gap: 6px !important;
    }

    .sidebar-section-icon {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    .sidebar-section-icon svg {
        width: 17px !important;
        height: 17px !important;
    }

    .quick-item,
    .drive-item,
    .user-box,
    .simple-mode-toggle,
    .theme-mode-toggle,
    .admin-hidden-wrap,
    #btn-my-shares {
        min-height: 40px !important;
        padding: 8px 10px !important;
        border-radius: 10px !important;
        font-size: 0.82rem !important;
    }

    .quick-item-open {
        min-height: 36px !important;
    }

    .user-box {
        flex-direction: row !important;
        align-items: center !important;
    }

    .user-box > div {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .user-box strong {
        font-size: 0.85rem !important;
    }

    .user-box small {
        font-size: 0.65rem !important;
    }

    #btn-logout {
        min-height: 36px !important;
        padding: 0 14px !important;
        font-size: 0.75rem !important;
    }

    .simple-mode-toggle,
    .theme-mode-toggle,
    .admin-hidden-wrap {
        min-height: 38px !important;
        font-size: 0.78rem !important;
    }

    .simple-mode-toggle input,
    .theme-mode-toggle input,
    .admin-hidden-wrap input {
        width: 18px !important;
        height: 18px !important;
    }

    /* Sidebar backdrop */
    .sidebar-backdrop {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 190 !important;
    }

    /* Sidebar toggle button */
    .sidebar-toggle-btn {
        position: fixed !important;
        top: calc(8px + var(--safe-top)) !important;
        left: 8px !important;
        right: auto !important;
        bottom: auto !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
        z-index: 150 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.92) !important;
        border: 1px solid rgba(120, 150, 190, 0.25) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .sidebar-toggle-btn .icon-svg,
    .sidebar-toggle-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    /* ── Workspace Sticky Stack ── */
    .workspace-sticky-stack {
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        padding: calc(6px + var(--safe-top)) 8px 6px !important;
        background: linear-gradient(180deg, rgba(245, 248, 253, 0.98), rgba(245, 248, 253, 0.92)) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 1px solid rgba(120, 150, 190, 0.12) !important;
    }

    /* ── Topbar Mobile ── */
    .topbar {
        border-radius: 14px !important;
        padding: 8px !important;
        gap: 8px !important;
        border: 1px solid rgba(120, 150, 190, 0.18) !important;
        background: rgba(255, 255, 255, 0.92) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
    }

    /* Path row */
    .path-wrap {
        display: grid !important;
        grid-template-columns: repeat(4, 38px) minmax(0, 1fr) !important;
        grid-template-areas: "back next home refresh actions" !important;
        gap: 6px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .path-wrap #btn-back { grid-area: back !important; }
    .path-wrap #btn-next { grid-area: next !important; }
    .path-wrap #btn-home { grid-area: home !important; }
    .path-wrap #btn-refresh { grid-area: refresh !important; }
    .path-wrap .path-actions { grid-area: actions !important; }

    .path-wrap #btn-back,
    .path-wrap #btn-next,
    .path-wrap #btn-home,
    .path-wrap #btn-refresh,
    .path-wrap .path-actions .btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .path-wrap .path-actions {
        display: inline-flex !important;
        gap: 6px !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    .path-wrap #path-input {
        display: none !important;
    }

    /* Search row */
    .search-wrap {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .search-input-wrap {
        width: 100% !important;
        min-width: 0 !important;
    }

    #search-input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 10px 12px 10px 36px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
        border: 1px solid rgba(120, 150, 190, 0.2) !important;
        background: rgba(250, 252, 255, 0.95) !important;
    }

    .search-input-icon {
        left: 12px !important;
    }

    .search-input-icon .icon-svg,
    .search-input-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* View/Sort controls */
    .view-sort-wrap {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .view-sort-wrap::-webkit-scrollbar {
        display: none !important;
    }

    .view-sort-wrap > div {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }

    .view-sort-wrap .btn,
    .view-sort-wrap .view-mode-btn,
    .view-sort-wrap .sort-btn {
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 10px !important;
        border-radius: 9px !important;
        font-size: 0.75rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .view-sort-wrap .mobile-icon-control {
        width: 36px !important;
        min-width: 36px !important;
        padding: 0 !important;
    }

    /* ── Bento Grid Mobile ── */
    .bento-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 8px !important;
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }

    .explorer-pane {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 14px !important;
        padding: 6px 6px calc(min(40dvh, 360px) + 24px) !important;
        flex: 1 1 auto !important;
    }

    .preview-pane {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 6px 8px calc(8px + var(--safe-bottom)) !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        align-self: auto !important;
        max-height: min(40dvh, 360px) !important;
        height: auto !important;
        margin: 0 !important;
        z-index: 140 !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border: none !important;
        border-top: 1px solid rgba(120, 150, 190, 0.22) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    .preview-pane:not(.fullscreen) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        align-self: auto !important;
        max-height: min(40dvh, 360px) !important;
        height: auto !important;
        min-height: 140px !important;
        margin: 0 !important;
        z-index: 140 !important;
        overflow: hidden !important;
    }

    .preview-pane:not(.fullscreen) .preview-content {
        max-height: calc(min(40dvh, 360px) - 46px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .preview-pane:not(.fullscreen) .preview-pane-header {
        display: flex !important;
        margin: 0 !important;
        padding: 6px 8px 4px !important;
        max-height: 34px !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        border-bottom: 1px solid rgba(120, 150, 190, 0.12) !important;
    }

    /* Drag handle on preview pane */
    .preview-pane:not(.fullscreen)::before {
        content: "" !important;
        display: block !important;
        width: 44px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(120, 140, 170, 0.35) !important;
        margin: 0 auto 6px !important;
        flex-shrink: 0 !important;
    }

    /* Add padding to bento-grid so explorer content is not hidden behind fixed preview */
    .bento-grid {
        padding-bottom: calc(min(40dvh, 360px) + 20px) !important;
    }

    /* ── File Grid Mobile ── */
    .file-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding-bottom: 12px !important;
    }

    .file-grid.list-view {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .file-card {
        min-height: 0 !important;
        padding: 10px !important;
        border-radius: 12px !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .file-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    .file-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 11px !important;
    }

    .file-icon .icon-svg {
        width: 22px !important;
        height: 22px !important;
    }

    .file-icon .icon-win {
        width: 30px !important;
        height: 30px !important;
    }

    .file-name {
        font-size: 0.82rem !important;
        line-height: 1.25 !important;
        margin-top: 6px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
        text-overflow: ellipsis !important;
    }

    .file-meta {
        font-size: 0.7rem !important;
        margin-top: 3px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .file-pin {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
        top: 8px !important;
        right: 8px !important;
    }

    .file-pin .icon-svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* List view mobile */
    .file-grid.list-view .file-card {
        grid-template-columns: 24px minmax(0, 1fr) 24px !important;
        grid-template-areas: "icon name pin" "icon meta pin" !important;
        column-gap: 8px !important;
        row-gap: 2px !important;
        min-height: 48px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(120, 150, 190, 0.12) !important;
        background: rgba(255, 255, 255, 0.9) !important;
        margin-bottom: 4px !important;
    }

    .file-grid.list-view .file-icon {
        width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
    }

    .file-grid.list-view .file-icon .icon-svg {
        width: 16px !important;
        height: 16px !important;
    }

    .file-grid.list-view .file-name {
        font-size: 0.8rem !important;
        margin-top: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        line-clamp: unset !important;
        -webkit-line-clamp: unset !important;
    }

    .file-grid.list-view .file-meta {
        font-size: 0.68rem !important;
        margin-top: 0 !important;
    }

    .file-grid.list-view .file-pin {
        position: static !important;
        width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
        opacity: 0.6 !important;
    }

    /* ── Context Menu / Action Sheet ── */
    .context-menu.mobile-sheet {
        left: 8px !important;
        right: 8px !important;
        bottom: calc(8px + var(--safe-bottom)) !important;
        top: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: 70dvh !important;
        border-radius: 18px !important;
        padding: 12px !important;
        gap: 4px !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.2) !important;
        border: 1px solid rgba(120, 150, 190, 0.2) !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .context-menu.mobile-sheet::before {
        content: "" !important;
        display: block !important;
        width: 44px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(120, 140, 170, 0.35) !important;
        margin: 0 auto 10px !important;
    }

    .context-menu.mobile-sheet .dock-btn {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
    }

    .context-menu.mobile-sheet .dock-btn .icon-svg {
        width: 20px !important;
        height: 20px !important;
    }

    .context-menu.mobile-sheet .action-menu-selection-count {
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }

    /* ── Modal Mobile ── */
    .modal-overlay {
        padding: 8px !important;
        align-items: flex-end !important;
    }

    .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        border-top: 1px solid rgba(120, 150, 190, 0.2) !important;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.2) !important;
        padding-bottom: var(--safe-bottom) !important;
    }

    .modal-head {
        padding: 14px 16px !important;
        min-height: 52px !important;
    }

    .modal-head h3 {
        font-size: 1rem !important;
    }

    .modal-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        border-radius: 10px !important;
        font-size: 1.1rem !important;
    }

    .modal-body {
        padding: 14px 16px !important;
        gap: 12px !important;
    }

    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        min-height: 44px !important;
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
        border-radius: 10px !important;
    }

    .modal-foot {
        padding: 12px 16px !important;
        gap: 10px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    .modal-foot .btn {
        min-height: 44px !important;
        padding: 10px 14px !important;
        font-size: 0.88rem !important;
        border-radius: 10px !important;
        width: 100% !important;
    }

    /* ── Toast Mobile ── */
    .toast {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + var(--safe-bottom)) !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 14px !important;
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .toast.toast-upload {
        width: auto !important;
        max-width: none !important;
        max-height: 60dvh !important;
    }

    /* ── FAB Mobile ── */
    .fab {
        right: 14px !important;
        bottom: calc(14px + var(--safe-bottom)) !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 16px !important;
        box-shadow: 0 8px 24px rgba(20, 120, 255, 0.35) !important;
    }

    /* ── Preview Content Mobile ── */
    .preview-content {
        padding: 8px !important;
        font-size: 0.82rem !important;
    }

    .preview-empty-state {
        min-height: 160px !important;
        padding: 16px !important;
    }

    .preview-empty-icon {
        width: 64px !important;
        height: 64px !important;
    }

    .preview-empty-text {
        font-size: 0.82rem !important;
    }

    .preview-empty-note {
        font-size: 0.75rem !important;
    }

    .embed-viewer {
        min-height: 300px !important;
        border-radius: 10px !important;
    }

    .pdf-embed-viewer {
        min-height: 320px !important;
    }

    .pdf-canvas-wrap {
        min-height: 320px !important;
    }

    .audio-waveform {
        height: 120px !important;
    }

    /* ── Selection Summary Mobile ── */
    .selection-summary-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .selection-summary-metric {
        padding: 8px 6px !important;
    }

    .selection-summary-list-wrap {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* ── Properties Mobile ── */
    .properties-item {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
        padding: 10px 12px !important;
    }

    .properties-item dt {
        font-size: 0.75rem !important;
        color: #6b8098 !important;
    }

    .properties-item dd {
        font-size: 0.85rem !important;
    }

    /* ── Picker Tree Mobile ── */
    .picker-tree {
        max-height: 240px !important;
    }

    .picker-tree-row {
        grid-template-columns: 30px 1fr auto !important;
        gap: 6px !important;
    }

    .picker-tree-toggle {
        width: 30px !important;
        height: 30px !important;
    }

    .picker-tree-label {
        min-height: 34px !important;
        padding: 6px 8px !important;
    }

    /* ── Transfer Modal Mobile ── */
    .transfer-list {
        max-height: 120px !important;
    }

    .transfer-summary-card {
        padding: 8px 10px !important;
    }

    /* ── Activity Modal Mobile ── */
    .activity-modal-card {
        max-width: 100% !important;
        max-height: 92dvh !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .activity-modal-body {
        padding: 10px 12px !important;
    }

    .activity-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    .activity-toolbar-actions {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .activity-toolbar-actions .btn {
        width: 100% !important;
        min-height: 38px !important;
    }

    .activity-item {
        padding: 8px !important;
        gap: 8px !important;
    }

    .activity-item-icon {
        width: 32px !important;
        height: 32px !important;
    }

    .activity-item-icon .icon-svg {
        width: 20px !important;
        height: 20px !important;
    }

    .activity-item-name {
        font-size: 0.82rem !important;
    }

    .activity-item-path {
        font-size: 0.7rem !important;
    }

    .activity-item-meta {
        font-size: 0.68rem !important;
        gap: 6px !important;
    }

    .activity-item-actions .btn {
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
    }

    .activity-date-range-fields {
        grid-template-columns: 1fr !important;
    }

    .activity-date-range-fields input[type="date"] {
        min-height: 42px !important;
        font-size: 0.85rem !important;
    }

    /* ── Share Info Modal Mobile ── */
    .modal-overlay[data-modal-type="share-info"] .modal-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .modal-overlay[data-modal-type="share-info"] .my-share-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .modal-overlay[data-modal-type="share-info"] .my-share-row-meta {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .modal-overlay[data-modal-type="share-info"] .my-share-actions {
        width: 100% !important;
        justify-content: flex-end !important;
        margin-top: 4px !important;
    }

    /* ── Dark Mode Mobile Adjustments ── */
    body.dark-mode .sidebar {
        background: linear-gradient(180deg, rgba(15, 22, 31, 0.98), rgba(10, 16, 24, 0.98)) !important;
        border-top-color: rgba(80, 110, 150, 0.3) !important;
    }

    body.dark-mode .sidebar-accordion-item {
        background: rgba(20, 30, 44, 0.8) !important;
        border-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode .sidebar-toggle-btn {
        background: rgba(15, 22, 31, 0.92) !important;
        border-color: rgba(80, 110, 150, 0.3) !important;
        color: #d8e6ff !important;
    }

    body.dark-mode .workspace-sticky-stack {
        background: linear-gradient(180deg, rgba(10, 16, 24, 0.98), rgba(10, 16, 24, 0.92)) !important;
        border-bottom-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode .topbar {
        background: rgba(15, 22, 31, 0.92) !important;
        border-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode #search-input {
        background: rgba(20, 30, 44, 0.9) !important;
        border-color: rgba(80, 110, 150, 0.25) !important;
        color: #d8e6ff !important;
    }

    body.dark-mode .file-card {
        background: rgba(15, 22, 31, 0.9) !important;
        border-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode .file-grid.list-view .file-card {
        background: rgba(15, 22, 31, 0.85) !important;
        border-color: rgba(80, 110, 150, 0.15) !important;
    }

    body.dark-mode .context-menu.mobile-sheet {
        background: rgba(10, 16, 24, 0.98) !important;
        border-color: rgba(80, 110, 150, 0.3) !important;
    }

    body.dark-mode .context-menu.mobile-sheet .action-menu-selection-count {
        background: rgba(10, 16, 24, 0.95) !important;
    }

    body.dark-mode .modal-card {
        background: linear-gradient(180deg, rgba(10, 16, 24, 0.98), rgba(8, 13, 20, 0.98)) !important;
        border-top-color: rgba(80, 110, 150, 0.3) !important;
    }

    body.dark-mode .modal-head {
        background: rgba(15, 22, 31, 0.95) !important;
    }

    body.dark-mode .modal-body {
        background: rgba(10, 16, 24, 0.95) !important;
    }

    body.dark-mode .modal-foot {
        background: rgba(12, 18, 28, 0.95) !important;
    }

    body.dark-mode .toast {
        background: rgba(20, 30, 44, 0.95) !important;
        border: 1px solid rgba(80, 110, 150, 0.3) !important;
    }

    /* Preview pane - all modes (default, sticky, fixed bottom, fullscreen) dark mode */
    body.dark-mode .preview-pane,
    body.dark-mode #app-screen .preview-pane,
    body.dark-mode #app-screen .preview-pane:not(.fullscreen),
    body.dark-mode #app-screen .preview-pane.glass-card:not(.fullscreen),
    body.dark-mode #app-screen .preview-pane.fullscreen,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen {
        background: rgba(13, 19, 28, 0.97) !important;
        border-color: rgba(80, 110, 150, 0.3) !important;
        border-top-color: rgba(80, 110, 150, 0.3) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane:not(.fullscreen) .preview-content,
    body.dark-mode #app-screen .preview-pane.glass-card:not(.fullscreen) .preview-content,
    body.dark-mode #app-screen .preview-pane.fullscreen .preview-content,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .preview-content {
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane:not(.fullscreen) .preview-pane-header,
    body.dark-mode #app-screen .preview-pane.fullscreen .preview-pane-header {
        border-bottom-color: rgba(80, 110, 150, 0.2) !important;
        background: rgba(13, 19, 28, 0.95) !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen {
        background: #0d1219 !important;
        border: none !important;
        border-top: none !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen .preview-content {
        background: #0d1219 !important;
    }
}

/* ── Very Small Screens (≤ 380px) ─────────────────────────── */
@media (max-width: 380px) {
    .file-grid {
        grid-template-columns: 1fr !important;
    }

    .path-wrap {
        grid-template-columns: repeat(4, 34px) minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .path-wrap #btn-back,
    .path-wrap #btn-next,
    .path-wrap #btn-home,
    .path-wrap #btn-refresh,
    .path-wrap .path-actions .btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .view-sort-wrap .btn,
    .view-sort-wrap .view-mode-btn,
    .view-sort-wrap .sort-btn {
        min-height: 34px !important;
        height: 34px !important;
        padding: 0 8px !important;
        font-size: 0.7rem !important;
    }

    .view-sort-wrap .mobile-icon-control {
        width: 34px !important;
        min-width: 34px !important;
    }

    .modal-foot {
        grid-template-columns: 1fr !important;
    }

    .activity-toolbar-actions {
        grid-template-columns: 1fr !important;
    }
}

/* ── Landscape Mobile ─────────────────────────────────────── */
@media (max-width: 1080px) and (orientation: landscape) {
    .sidebar {
        max-height: 90dvh !important;
    }

    .preview-pane:not(.fullscreen) {
        min-height: 140px !important;
    }

    .file-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .modal-card {
        max-height: 90dvh !important;
    }

    .context-menu.mobile-sheet {
        max-height: 80dvh !important;
    }
}

/* ── Prevent iOS Zoom on Input Focus ──────────────────────── */
@media (max-width: 1080px) {
    input[type="text"],
    input[type="password"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Smooth Scrolling & Momentum ──────────────────────────── */
@media (max-width: 1080px) {
    .file-grid,
    .preview-content,
    .sidebar,
    .context-menu.mobile-sheet,
    .modal-body,
    .activity-modal-body,
    .activity-list-wrap,
    .picker-tree,
    .picker-folder-list {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
}

/* ── Hide Scrollbars on Mobile for Cleaner Look ───────────── */
@media (max-width: 1080px) {
    .file-grid::-webkit-scrollbar,
    .preview-content::-webkit-scrollbar,
    .sidebar::-webkit-scrollbar,
    .context-menu.mobile-sheet::-webkit-scrollbar,
    .modal-body::-webkit-scrollbar,
    .activity-modal-body::-webkit-scrollbar,
    .activity-list-wrap::-webkit-scrollbar,
    .picker-tree::-webkit-scrollbar,
    .picker-folder-list::-webkit-scrollbar,
    .view-sort-wrap::-webkit-scrollbar {
        width: 4px !important;
        height: 4px !important;
    }

    .file-grid::-webkit-scrollbar-thumb,
    .preview-content::-webkit-scrollbar-thumb,
    .sidebar::-webkit-scrollbar-thumb,
    .context-menu.mobile-sheet::-webkit-scrollbar-thumb,
    .modal-body::-webkit-scrollbar-thumb,
    .activity-modal-body::-webkit-scrollbar-thumb,
    .activity-list-wrap::-webkit-scrollbar-thumb,
    .picker-tree::-webkit-scrollbar-thumb,
    .picker-folder-list::-webkit-scrollbar-thumb,
    .view-sort-wrap::-webkit-scrollbar-thumb {
        background: rgba(120, 150, 190, 0.3) !important;
        border-radius: 999px !important;
    }
}

/* ── Loading States Mobile ────────────────────────────────── */
@media (max-width: 1080px) {
    .app-boot-loader-card {
        min-width: 200px !important;
        padding: 16px 20px !important;
        border-radius: 16px !important;
    }

    .app-boot-spinner {
        width: 30px !important;
        height: 30px !important;
    }

    .folder-loading-wrap,
    .grid-empty-state {
        min-height: 200px !important;
        padding: 16px !important;
    }

    .grid-empty-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .grid-empty-text {
        font-size: 0.85rem !important;
    }

    .grid-empty-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .grid-empty-actions .btn {
        width: 100% !important;
        min-height: 40px !important;
    }
}

/* ── Upload Progress Mobile ───────────────────────────────── */
@media (max-width: 1080px) {
    .upload-progress-list {
        max-height: 180px !important;
    }

    .upload-progress-item {
        padding: 8px 10px !important;
    }

    .upload-progress-head {
        font-size: 0.75rem !important;
    }

    .upload-cancel-btn {
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 0.7rem !important;
    }
}

/* ── PDF Page Input Compact ───────────────────────────────── */
.pdf-page-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #355475 !important;
}

.pdf-page-label input[data-pdf-page-input] {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 2px 4px !important;
    margin: 0 !important;
    border-radius: 6px !important;
    border: 1px solid rgba(120, 150, 190, 0.25) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    color: #1d3d62 !important;
    box-shadow: none !important;
    outline: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

.pdf-page-label input[data-pdf-page-input]::-webkit-inner-spin-button,
.pdf-page-label input[data-pdf-page-input]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.pdf-page-label input[data-pdf-page-input]:focus {
    border-color: rgba(20, 120, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(20, 120, 255, 0.12) !important;
}

body.dark-mode .pdf-page-label {
    color: #b9cde8 !important;
}

body.dark-mode .pdf-page-label input[data-pdf-page-input] {
    background: rgba(15, 22, 31, 0.9) !important;
    border-color: rgba(80, 110, 150, 0.3) !important;
    color: #d8e6ff !important;
}

body.dark-mode .pdf-page-label input[data-pdf-page-input]:focus {
    border-color: rgba(80, 140, 220, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(80, 140, 220, 0.15) !important;
}

/* ── PDF Viewer Mobile ────────────────────────────────────── */
@media (max-width: 1080px) {
    .pdf-viewer-toolbar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .pdf-viewer-toolbar .viewer-btn {
        width: 100% !important;
        min-height: 38px !important;
        justify-content: center !important;
    }

    .pdf-viewer-page-label {
        width: 100% !important;
        justify-content: center !important;
    }

    .pdf-viewer-page-label input {
        width: 70px !important;
        min-height: 36px !important;
    }

    .pdf-viewer-note {
        grid-column: 1 / -1 !important;
        text-align: center !important;
        font-size: 0.7rem !important;
    }

    .pdf-preview-toolbar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .pdf-preview-toolbar .btn {
        flex: 0 0 auto !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        justify-content: center !important;
    }

    .pdf-page-label {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    .pdf-page-label input[data-pdf-page-input] {
        width: 48px !important;
        min-width: 48px !important;
        max-width: 48px !important;
        height: 26px !important;
        min-height: 26px !important;
        font-size: 0.72rem !important;
    }
}

/* ── Office Addon Viewer Mobile ───────────────────────────── */
@media (max-width: 1080px) {
    .office-addon-view {
        min-height: 280px !important;
        padding: 8px !important;
    }

    .office-addon-view table {
        font-size: 0.72rem !important;
    }

    .office-addon-view table td,
    .office-addon-view table th {
        padding: 4px 6px !important;
    }

    .pptx-slide-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .pptx-slide-controls .ctrl-group {
        justify-content: center !important;
    }

    .pptx-slide-controls button {
        min-height: 34px !important;
        padding: 6px 12px !important;
    }

    .pptx-slide-images {
        grid-template-columns: 1fr !important;
    }
}

/* ── Viewer Page Mobile ───────────────────────────────────── */
@media (max-width: 1080px) {
    .viewer-shell {
        padding: 8px !important;
        gap: 8px !important;
    }

    .viewer-head {
        padding: 12px !important;
        border-radius: 14px !important;
        gap: 10px !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .viewer-meta h1 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    .viewer-meta small {
        font-size: 0.75rem !important;
    }

    .viewer-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .viewer-btn {
        min-height: 40px !important;
        width: 100% !important;
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        justify-content: center !important;
    }

    .viewer-stage {
        padding: 8px !important;
        border-radius: 14px !important;
        min-height: 60dvh !important;
    }

    .viewer-embed {
        min-height: 55dvh !important;
        border-radius: 10px !important;
    }

    .viewer-image,
    .viewer-text {
        max-height: 62dvh !important;
    }

    .viewer-text {
        padding: 12px !important;
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }
}

/* ── Admin Page Mobile ────────────────────────────────────── */
@media (max-width: 1080px) {
    body.admin-page-body .admin-page {
        padding: 8px !important;
        gap: 8px !important;
    }

    body.admin-page-body .admin-topbar {
        padding: 12px !important;
        border-radius: 14px !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    body.admin-page-body .admin-topbar-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.admin-page-body .admin-topbar-actions .btn {
        min-height: 38px !important;
        padding: 8px 12px !important;
    }

    body.admin-page-body .admin-user-chip {
        width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-page-body .admin-overview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.admin-page-body .admin-overview-card {
        min-height: 0 !important;
        padding: 10px !important;
    }

    body.admin-page-body .admin-overview-card strong {
        font-size: 1.2rem !important;
    }

    body.admin-page-body .admin-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        padding: 4px !important;
    }

    body.admin-page-body .admin-tab-btn {
        min-height: 38px !important;
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }

    body.admin-page-body .admin-panel-tools {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.admin-page-body .admin-panel-tools input,
    body.admin-page-body .admin-panel-tools select {
        min-height: 40px !important;
        font-size: 0.8rem !important;
    }

    body.admin-page-body .admin-section-heading {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    body.admin-page-body .admin-panel-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    body.admin-page-body .admin-panel-actions .btn {
        min-height: 36px !important;
        padding: 6px 10px !important;
    }

    body.admin-page-body .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    body.admin-page-body .stat-card {
        padding: 10px !important;
    }

    body.admin-page-body .stat-card strong {
        font-size: 1rem !important;
    }

    body.admin-page-body .drive-donut-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.admin-page-body .drive-donut-card {
        padding: 10px !important;
    }

    body.admin-page-body .admin-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    body.admin-page-body .admin-table {
        min-width: 600px !important;
    }

    body.admin-page-body .admin-table td,
    body.admin-page-body .admin-table th {
        padding: 8px !important;
        font-size: 0.75rem !important;
    }

    body.admin-page-body .search-index-option-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.admin-page-body .search-index-option-field {
        padding: 10px !important;
    }

    body.admin-page-body .search-index-option-field input,
    body.admin-page-body .search-index-option-field select,
    body.admin-page-body .search-index-option-field textarea {
        min-height: 40px !important;
        font-size: 0.8rem !important;
    }

    body.admin-page-body .admin-logs-panel .log-list {
        max-height: 200px !important;
    }

    body.admin-page-body .log-item {
        padding: 8px !important;
    }

    body.admin-page-body .log-item strong {
        font-size: 0.85rem !important;
    }

    body.admin-page-body .log-item small {
        font-size: 0.7rem !important;
    }

    body.admin-page-body .upload-policy-preview-box {
        padding: 10px !important;
        overflow-x: auto !important;
    }

    body.admin-page-body .upload-policy-preview-table {
        min-width: 500px !important;
    }

    body.admin-page-body .upload-policy-preview-table td,
    body.admin-page-body .upload-policy-preview-table th {
        padding: 8px !important;
        font-size: 0.72rem !important;
    }
}

/* ── Very Small Admin Screens ─────────────────────────────── */
@media (max-width: 480px) {
    body.admin-page-body .admin-overview-grid {
        grid-template-columns: 1fr !important;
    }

    body.admin-page-body .admin-stats {
        grid-template-columns: 1fr !important;
    }

    body.admin-page-body .admin-tabs {
        grid-template-columns: 1fr !important;
    }
}

/* ── Extra Specific Overrides for Fixed Bottom Bar Preview ── */
@media (max-width: 1080px) {
    /* Light mode - fixed bottom bar preview */
    #app-screen .preview-pane:not(.fullscreen),
    #app-screen .preview-pane.glass-card:not(.fullscreen) {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        align-self: auto !important;
        height: auto !important;
        min-height: 140px !important;
        max-height: min(40dvh, 360px) !important;
        margin: 0 !important;
        z-index: 140 !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.97) !important;
        border: none !important;
        border-top: 1px solid rgba(120, 150, 190, 0.22) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        padding: 6px 8px calc(8px + var(--safe-bottom)) !important;
        color: #16314e !important;
    }

    /* Light mode - fullscreen preview */
    #app-screen .preview-pane.fullscreen,
    #app-screen .preview-pane.glass-card.fullscreen {
        background: #ffffff !important;
        border: none !important;
        box-shadow: none !important;
        color: #16314e !important;
        border-radius: 0 !important;
        padding: 8px !important;
    }

    #app-screen .preview-pane.fullscreen .preview-content,
    #app-screen .preview-pane.glass-card.fullscreen .preview-content {
        background: #ffffff !important;
        color: #16314e !important;
    }

    #app-screen .preview-pane.fullscreen .preview-pane-header,
    #app-screen .preview-pane.glass-card.fullscreen .preview-pane-header {
        background: rgba(255, 255, 255, 0.95) !important;
        border-bottom-color: rgba(120, 150, 190, 0.15) !important;
    }

    #app-screen .preview-pane.fullscreen .preview-empty-state,
    #app-screen .preview-pane.glass-card.fullscreen .preview-empty-state {
        background: transparent !important;
        border-color: rgba(120, 150, 190, 0.2) !important;
    }

    #app-screen .preview-pane.fullscreen .embed-viewer,
    #app-screen .preview-pane.glass-card.fullscreen .embed-viewer,
    #app-screen .preview-pane.fullscreen .preview-text,
    #app-screen .preview-pane.glass-card.fullscreen .preview-text {
        background: #ffffff !important;
        border-color: rgba(120, 150, 190, 0.2) !important;
        color: #16314e !important;
    }

    #app-screen .preview-pane:not(.fullscreen) .preview-content,
    #app-screen .preview-pane.glass-card:not(.fullscreen) .preview-content {
        max-height: calc(min(40dvh, 360px) - 46px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    #app-screen .preview-pane:not(.fullscreen) .preview-pane-header {
        display: flex !important;
        margin: 0 !important;
        padding: 6px 8px 4px !important;
        max-height: 34px !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        border-bottom: 1px solid rgba(120, 150, 190, 0.12) !important;
    }

    #app-screen .preview-pane:not(.fullscreen)::before {
        content: "" !important;
        display: block !important;
        width: 44px !important;
        height: 5px !important;
        border-radius: 999px !important;
        background: rgba(120, 140, 170, 0.35) !important;
        margin: 0 auto 6px !important;
        flex-shrink: 0 !important;
    }

    body.dark-mode #app-screen .preview-pane:not(.fullscreen),
    body.dark-mode #app-screen .preview-pane.glass-card:not(.fullscreen) {
        background: rgba(13, 19, 28, 0.97) !important;
        border-top-color: rgba(80, 110, 150, 0.3) !important;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5) !important;
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane:not(.fullscreen) .preview-content,
    body.dark-mode #app-screen .preview-pane.glass-card:not(.fullscreen) .preview-content {
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane:not(.fullscreen) .preview-pane-header,
    body.dark-mode #app-screen .preview-pane.glass-card:not(.fullscreen) .preview-pane-header {
        border-bottom-color: rgba(80, 110, 150, 0.2) !important;
        background: rgba(13, 19, 28, 0.95) !important;
    }

    /* Fullscreen preview - folder contents list 80% of viewport height */
    #app-screen .preview-pane.fullscreen .preview-content .folder-contents-list,
    #app-screen .preview-pane.glass-card.fullscreen .preview-content .folder-contents-list {
        height: 80dvh !important;
        max-height: 80dvh !important;
        min-height: 80dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fullscreen preview - selection summary list also 80% */
    #app-screen .preview-pane.fullscreen .preview-content .selection-summary-list,
    #app-screen .preview-pane.glass-card.fullscreen .preview-content .selection-summary-list {
        height: 80dvh !important;
        max-height: 80dvh !important;
        min-height: 80dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fullscreen preview dark mode specific overrides */
    body.dark-mode #app-screen .preview-pane.fullscreen,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen {
        background: #0d1219 !important;
        border: none !important;
        box-shadow: none !important;
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen .preview-content,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .preview-content {
        background: #0d1219 !important;
        color: #d8e6ff !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen .preview-pane-header,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .preview-pane-header {
        background: rgba(13, 19, 28, 0.95) !important;
        border-bottom-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen .preview-empty-state,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .preview-empty-state {
        background: transparent !important;
        border-color: rgba(80, 110, 150, 0.2) !important;
    }

    body.dark-mode #app-screen .preview-pane.fullscreen .embed-viewer,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .embed-viewer,
    body.dark-mode #app-screen .preview-pane.fullscreen .preview-text,
    body.dark-mode #app-screen .preview-pane.glass-card.fullscreen .preview-text {
        background: #0d1219 !important;
        border-color: rgba(80, 110, 150, 0.2) !important;
        color: #d8e6ff !important;
    }

    /* Collapsible behavior via class (controlled by JS) */
    #app-screen .preview-pane.mobile-preview-collapsed:not(.fullscreen) {
        min-height: 44px !important;
        max-height: 44px !important;
        height: 44px !important;
        overflow: hidden !important;
    }

    #app-screen .preview-pane.mobile-preview-collapsed:not(.fullscreen) .preview-content {
        display: none !important;
    }

    /* Preview header stay visible when collapsed */
    #app-screen .preview-pane.mobile-preview-collapsed:not(.fullscreen) .preview-pane-header {
        display: flex !important;
        margin: 0 !important;
        padding: 6px 8px !important;
        max-height: 44px !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        border-bottom: none !important;
    }
}

/* ── Landscape Mobile Fixed Preview ───────────────────────── */
@media (max-width: 1080px) and (orientation: landscape) {
    #app-screen .preview-pane:not(.fullscreen),
    #app-screen .preview-pane.glass-card:not(.fullscreen) {
        min-height: 100px !important;
        max-height: min(45dvh, 280px) !important;
    }

    #app-screen .preview-pane:not(.fullscreen) .preview-content {
        max-height: calc(min(45dvh, 280px) - 46px) !important;
    }

    .bento-grid {
        padding-bottom: calc(min(45dvh, 280px) + 20px) !important;
    }

    .explorer-pane {
        padding-bottom: calc(min(45dvh, 280px) + 24px) !important;
    }
}

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    .context-menu.mobile-sheet,
    .modal-card,
    .toast,
    .file-card {
        transition: none !important;
        animation: none !important;
    }
}