/* css/mobile-app.css — Native app & mobile-specific styles for MassPredict iOS/Android */

/* ========== iOS Overscroll / Rubber Band Fix ========== */
html, body {
    overscroll-behavior: none;
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
    background-color: #01010a !important;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
}

/* GPU compositing for fixed elements on iOS */
/* NOTE: Do NOT apply transform to nav — it creates a containing block that breaks
   position:fixed on children (like the hamburger menu overlay) */
@supports (-webkit-touch-callout: none) {
    .mobile-bottom-nav,
    .top-bar {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ═══════════════ SAFE AREA — NAV BAR ═══════════════ */
/* Push fixed nav down so status bar (time/wifi/battery) doesn't overlap */
/* IMPORTANT: exclude .mobile-bottom-nav — it lives at bottom, not top */
body.native-app nav:not(.mobile-bottom-nav):first-of-type,
body.native-app .top-bar:first-of-type,
body.native-app .topbar:first-of-type {
    padding-top: env(safe-area-inset-top) !important;
}

/* Raven suite nav (used on watch/eye/keep/river pages) */
body.native-app .raven-nav:not(.mobile-bottom-nav),
body.native-app .raven-suite-nav:not(.mobile-bottom-nav),
body.native-app #raven-nav {
    padding-top: env(safe-area-inset-top) !important;
}

/* NOTE: No blanket body padding-top for native. Pages with fixed navs handle their own
   body padding inline (e.g. index.html uses calc(52px + env(safe-area-inset-top))). */

/* ═══════════════ SEARCH RESULTS — SOLID BACKGROUND ═══════════════ */
/* Prevent content bleed-through on autocomplete dropdowns */
.autocomplete-dropdown {
    background: rgba(10, 10, 20, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
}

/* ═══════════════ MOBILE BOTTOM NAV ═══════════════ */
/* Bottom nav safe area — do NOT add safe-area-inset-top to bottom nav */
.mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Hide bottom nav on desktop */
@media (min-width: 1100px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* Add bottom padding to body when bottom nav is present on mobile */
@media (max-width: 1099px) {
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Hide all footers on mobile — bottom nav replaces them */
    footer,
    .site-footer,
    .footer,
    .site-footer-bar,
    [class*="footer"] {
        display: none !important;
    }

    /* Hide Raven back-to-MassPredict pill on mobile — bottom nav handles navigation */
    .escape-btn {
        display: none !important;
    }

    /* Remove nav border-bottom line on mobile */
    nav {
        border-bottom: none !important;
    }

    /* Push Perch user-menu icons to far right */
    .user-menu {
        margin-left: auto !important;
    }

    /* ═══════════════ RAVEN SUITE — HIDE DESKTOP TOPBAR ═══════════════ */
    /* The #topbar has the big green "PROFILE | BRET" pill — desktop only */
    #topbar {
        display: none !important;
    }

    /* Also hide the standalone topbar user section */
    .topbar-user {
        display: none !important;
    }

    /* Restyle the green pill as a compact circle on mobile */
    .rsn-auth .topbar-user-btn {
        width: 28px !important;
        height: 28px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        font-size: 0 !important;
        overflow: hidden !important;
        justify-content: center !important;
    }
    /* Hide all text spans inside the pill — circle only */
    .rsn-auth .topbar-user-btn > * {
        display: none !important;
    }

    /* Topbar dropdown inside suite nav — position for mobile */
    .rsn-auth .topbar-dropdown {
        right: 0 !important;
        top: calc(100% + 4px) !important;
        min-width: 150px;
    }

    /* Show auth-avatar circle instead of green pill in suite nav */
    .rsn-auth .auth-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    /* ═══════════════ RAVEN PORTAL — DESCRIPTION OVERFLOW ═══════════════ */
    /* Clamp portal card descriptions to prevent off-page overflow */
    #view-dashboard .pd {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 12px;
        line-height: 1.5;
        max-width: none;
    }

    /* Restyle topbar user pill as compact circle in portal */
    #view-dashboard .tb-user-pill {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        padding: 0;
        font-size: 0;
        overflow: hidden;
        justify-content: center;
    }
    #view-dashboard .tb-user-pill > * {
        display: none;
    }

    /* Compact portal card content on mobile */
    #view-dashboard .pc {
        padding: 0 20px 5%;
        left: 5%;
        right: 5%;
        gap: 16px;
        flex-direction: column;
    }
    #view-dashboard .pn {
        font-size: clamp(36px, 8vw, 52px);
    }

    /* ═══════════════ THE STUDY — MOBILE ═══════════════ */
    /* PM Score orb — sticky bar below nav */
    .pm-orb {
        position: sticky;
        top: 48px;
        z-index: 50;
        background: rgba(10,7,4,0.95);
        backdrop-filter: blur(12px);
        border-radius: 0;
        margin: 0 -20px;
        padding: 12px 20px;
        border-bottom: 1px solid rgba(148,163,184,0.08);
    }

    /* Sticky chapter headers within scroll */
    .chapter .ch-head {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(10,7,4,0.97);
        backdrop-filter: blur(8px);
    }

    /* Hide "Raven Ai Intelligence Suite" eyebrow text on mobile */
    .page-eyebrow,
    .panel-eyebrow {
        display: none !important;
    }
}