/* Module: layout/mobile-recents-nav.css — Recent Apps mobile nav (referensi)
   Sidebar full-screen di belakang; #and-spa-app = kartu scale + geser kanan.
   Desktop (.and-body--desktop-nav) tidak terpengaruh. */

@media (max-width: 1023px) {
    :root {
        --and-recents-radius: 32px;
        --and-recents-scale: 0.82;
        /* Geser kanan: ~10% kartu terlihat (setengah dari ~20% sebelumnya) */
        --and-recents-shift: 72vw;
        --and-recents-ease: 480ms cubic-bezier(0.22, 1, 0.36, 1);
        --and-recents-ease-out: 480ms cubic-bezier(0.22, 1, 0.36, 1);
        --and-recents-chrome-right: calc(12px + env(safe-area-inset-right, 0px));
        --and-recents-chrome-top: calc(10px + var(--and-safe-top));
        --and-recents-chrome-bottom: calc(12px + var(--and-safe-bottom));
        --and-recents-profile-gap: 5px;
        --and-recents-scale-safety: 3px;
        --and-recents-shadow-inset: 18px;
        /* Konservatif sebelum JS — profil ~120px dari bawah, bukan 100dvh (hindari kartu terlalu tinggi) */
        --and-recents-profile-top: calc(100dvh - 120px);
        --and-recents-card-top: calc(var(--and-recents-chrome-top) + 58px);
        --and-recents-card-bottom-limit: calc(var(--and-recents-profile-top) - 26px);
        --and-recents-card-max-h: max(1px, calc((var(--and-recents-card-bottom-limit) - var(--and-recents-card-top)) / var(--and-recents-scale)));
        --and-recents-card-h: var(--and-recents-card-max-h);
    }
}

@media (max-width: 480px) {
    :root {
        --and-recents-radius: 28px;
        --and-recents-scale: 0.8;
        --and-recents-shift: 76vw;
    }
}

@media (max-width: 1023px) {
    body:not(.and-body--desktop-nav).and-body--mobile-recents-nav {
        overflow: hidden;
        background: var(--and-bg-base);
    }

    /* ---- Drawer shell ---- */
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents {
        z-index: 190;
        pointer-events: none;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents:not([hidden]) {
        visibility: visible;
    }

    /* Tap di area kartu / sisa layar → tutup (pointer-events none di kartu) */
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 188 !important;
        background: var(--and-bg-base) !important;
        opacity: 0 !important;
        pointer-events: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transition: opacity var(--and-recents-ease) !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents.is-open .and-nav-drawer__backdrop {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Sidebar = full viewport, slide dari kiri (canvas menu existing) */
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__panel {
        position: fixed !important;
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        border-right: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        z-index: 190 !important;
        pointer-events: auto !important;
        transform: translate3d(-100%, 0, 0) !important;
        will-change: transform;
        transition: transform var(--and-recents-ease) !important;
        box-sizing: border-box !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents.is-open .and-nav-drawer__panel {
        transform: translate3d(0, 0, 0) !important;
    }

    /* Menu list: lebar kolom kiri; header/footer full width */
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__nav {
        max-width: min(72vw, 300px);
        width: 100%;
        box-sizing: border-box;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: clip;
        contain: paint;
        isolation: isolate;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__brand {
        max-width: none !important;
        width: 100% !important;
        box-sizing: border-box;
        border-bottom: none !important;
        justify-content: center !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__profile {
        max-width: min(72vw, 300px) !important;
        width: min(72vw, 300px) !important;
        box-sizing: border-box;
        background: transparent !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        position: relative !important;
        z-index: 4 !important;
        padding: 10px 12px calc(var(--and-safe-bottom) + 12px) !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__profile-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__profile-text {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__profile-card .and-nav-drawer__logout {
        position: static !important;
        flex-shrink: 0 !important;
        margin: 0 0 0 auto !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ---- Active page card (#and-spa-app) ---- */
    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-app {
        position: fixed !important;
        top: var(--and-recents-card-top, calc(var(--and-recents-chrome-top) + 58px)) !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        width: 100vw !important;
        height: var(--and-recents-card-max-h, var(--and-recents-card-h)) !important;
        max-width: none !important;
        max-height: var(--and-recents-card-max-h, var(--and-recents-card-h)) !important;
        margin: 0 !important;
        z-index: 195 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--and-bg-base) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: translate3d(0, 0, 0) !important;
        transform-origin: 100% 0 !important;
        transition:
            transform var(--and-recents-ease-out),
            top var(--and-recents-ease-out),
            height var(--and-recents-ease-out),
            max-height var(--and-recents-ease-out),
            border-radius var(--and-recents-ease-out),
            box-shadow var(--and-recents-ease-out),
            opacity var(--and-recents-ease-out) !important;
        pointer-events: none !important;
        will-change: transform;
        cursor: default;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Kartu recent apps — scale + geser kanan; sejajar kolom menu (atas Beranda, batas di atas profil) */
    body:not(.and-body--desktop-nav).and-body--recents-active.and-nav-drawer-open #and-spa-app {
        border-radius: var(--and-recents-radius) !important;
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.18),
            0 0 0 1px rgba(0, 0, 0, 0.06) !important;
        transform: scale(var(--and-recents-scale)) translate3d(var(--and-recents-shift), 0, 0) !important;
        height: var(--and-recents-card-max-h) !important;
        max-height: var(--and-recents-card-max-h) !important;
        /* Backup CSS jika JS belum sync — sama formula tinggi-max */
        min-height: 0 !important;
        pointer-events: auto !important;
        cursor: pointer;
    }

    body:not(.and-body--desktop-nav).and-body--recents-active.and-nav-drawer-open #and-spa-app.and-spa-app--recents-layout-instant {
        transition: none !important;
    }

    /* Tutup: kartu expand ke layar penuh bersamaan sidebar geser */
    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav:not(.and-body--recents-active) #and-spa-app {
        border-radius: 0 !important;
        box-shadow: none !important;
        height: 100dvh !important;
        max-height: none !important;
        top: 0 !important;
        transform: none !important;
        pointer-events: none !important;
        cursor: default;
    }

    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav:not(.and-body--recents-active) #and-spa-topbar,
    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav:not(.and-body--recents-active) #and-spa-nav {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transition: opacity var(--and-recents-ease-out), visibility var(--and-recents-ease-out) !important;
    }

    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-outlet-wrap {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-outlet {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-topbar,
    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-nav {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity var(--and-recents-ease-out), visibility var(--and-recents-ease-out) !important;
    }

    /* Reset penuh setelah drawer tertutup */
    body:not(.and-body--desktop-nav).and-body--mobile-recents-nav:not(.and-nav-drawer-open) #and-spa-app {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        pointer-events: auto !important;
        will-change: auto !important;
    }

    /* Lepas mode recents: tetap fixed full layar 1 frame agar transisi tidak patah */
    body:not(.and-body--desktop-nav) #and-spa-app.and-spa-app--recents-unmount {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        z-index: auto !important;
        will-change: auto !important;
    }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__panel,
    body:not(.and-body--desktop-nav) .and-nav-drawer.and-nav-drawer--recents .and-nav-drawer__backdrop,
    body:not(.and-body--desktop-nav).and-nav-drawer-open.and-body--mobile-recents-nav #and-spa-app {
        transition: none !important;
    }
}