/* ============================================
   RESPONSIVE VIEWPORT — FINAL AUTHORITY
   Loaded LAST. Overrides all other CSS files.

   Architecture:
   - On DESKTOP (≥768px): body IS the 9:16 container.
     Every position:fixed child auto-constrains. No whitelist.
   - On MOBILE (<768px): body fills viewport, screens fill body.
   - Safe areas: direct env() calls (no CSS vars — iOS bug).
   - Viewport height: 100dvh with fallbacks.
   ============================================ */

/* ═══════════════════════════════════════════
   A. VIEWPORT & BODY
   ═══════════════════════════════════════════ */

html {
    height: 100%;
    height: 100dvh;
    /* Ultimate fallback: JS sets --app-height to window.innerHeight
       which is always correct, even in iOS PWA standalone mode */
    height: var(--app-height, 100vh);
    overflow: hidden;
}

body {
    height: 100%;
    height: 100dvh;
    height: var(--app-height, 100vh);
    overflow: hidden;
    overscroll-behavior: none;
}

/* ── PWA Standalone Mode (installed on homescreen) ──
   In standalone, the app gets the FULL screen including
   the status bar area (black-translucent). There is NO
   browser chrome, so viewport = full physical display.

   Key differences from Safari:
   - 100vh/100dvh = full screen height (no address bar)
   - safe-area-inset-top is LARGER (includes status bar)
   - safe-area-inset-bottom stays the same (home indicator)
   - No dynamic viewport changes (no hide/show of chrome)

   Individual screens already have env() safe-area padding.
   Here we just ensure the container sizing is correct.
   ─────────────────────────────────────────────────── */
@media all and (display-mode: standalone) {
    html, body {
        /* In standalone there's no dynamic browser bar.
           --app-height (set by JS) = window.innerHeight
           which is the TRUE usable area on iOS PWA. */
        height: var(--app-height, 100%) !important;
    }

    .screen {
        height: var(--app-height, 100%) !important;
    }
}

/* ── Mobile: body fills entire viewport ─── */
@media (max-width: 767px) {
    body {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
    }
}

/* ── Desktop: body IS the 9:16 phone frame ─
   Every position:fixed child inside body
   now auto-constrains to this width.
   No overlay whitelist needed. ──────────── */
@media (min-width: 768px) {
    body {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vh * 9 / 16) !important;
        max-width: 100vw !important;
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.06);
        border-right: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Screens inherit body width automatically */
    .screen {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Nav inherits body width */
    .app-nav {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }

    /* Dark desktop background behind the phone frame */
    html {
        background: #050508 !important;
    }
}

/* ═══════════════════════════════════════════
   B. ALL SCREENS — FULL HEIGHT
   ═══════════════════════════════════════════ */

.screen {
    height: 100% !important;
    height: 100dvh !important;
    height: var(--app-height, 100vh) !important;
}

/* ═══════════════════════════════════════════
   C. APP NAVIGATION — UNIFIED HEIGHT
   56px + safe-area-bottom. Overrides 70/80px.
   ═══════════════════════════════════════════ */

.app-nav {
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* ═══════════════════════════════════════════
   D. CHAT SCREEN — FIX FLEX LAYOUT
   chat-rebuild.css sets display:block !important
   which breaks the flex column layout.
   ═══════════════════════════════════════════ */

#chatScreen {
    display: none;
    flex-direction: column !important;
    padding-bottom: 0 !important;
}

#chatScreen.active,
#chatScreen[style*="display: flex"],
#chatScreen[style*="display: block"] {
    display: flex !important;
    flex-direction: column !important;
}

/* ═══════════════════════════════════════════
   E. PROFILE SELECTION
   ═══════════════════════════════════════════ */

#profileSelection {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

.profile-selection-container {
    padding-bottom: 20px !important;
}

/* ═══════════════════════════════════════════
   F. ACTUAL CHAT — FLEX FLOW
   chat-rebuild.css sets display:block !important
   and flex-direction:initial !important.
   We override both for proper flex column layout.
   ═══════════════════════════════════════════ */

#actualChat {
    display: flex !important;
    flex-direction: column !important;
    bottom: 0 !important;
}

/* Chat Header */
#actualChat .chat-header,
#actualChat .chat-hdr {
    padding-top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important;
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    height: auto !important;
    flex-shrink: 0;
}

/* Chat Messages — flex flow, NOT fixed */
#actualChat .chat-messages {
    position: relative !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    padding-bottom: 8px !important;
}

/* Chat Input Area */
#actualChat .chat-input-area {
    flex-shrink: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    position: relative !important;
    bottom: auto !important; left: auto !important; right: auto !important;
}

/* Standalone .chat-input-container override (chat-rebuild sets fixed) */
.chat-input-container {
    position: relative !important;
    bottom: auto !important;
}

/* Open quizzes list in flow */
#actualChat .open-quizzes-list {
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   G. PROFILE SCREEN
   ═══════════════════════════════════════════ */

#profileScreen .profile-hero,
#profileScreen .pv2-hero {
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
}

#profileScreen .profile-content {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

.pv2-hero {
    max-height: clamp(260px, 55vh, 500px) !important;
}

.pv2-content {
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════
   H. AUTH / SETUP / VERIFICATION / SETTINGS
   ═══════════════════════════════════════════ */

#authScreen,
#verificationScreen,
#passwordResetScreen,
#passwordResetVerifyScreen,
#profileSetupScreen,
#profileLandingScreen,
#userLandingScreen,
#notificationSettingsScreen,
#privacySettingsScreen,
#languageSettingsScreen {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ═══════════════════════════════════════════
   I. CREDITS SCREEN
   ═══════════════════════════════════════════ */

#creditsScreen {
    padding-top: env(safe-area-inset-top, 0px);
}

#creditsScreen .store-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════
   J. MESSAGES HEADER
   ═══════════════════════════════════════════ */

#profileSelection .messages-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(56px + env(safe-area-inset-top, 0px));
}

/* ═══════════════════════════════════════════
   K. QUIZ OVERLAY
   ═══════════════════════════════════════════ */

#quizFlow .quiz-header {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

#quizFlow .quiz-content {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.quiz-close-btn {
    top: calc(12px + env(safe-area-inset-top, 0px));
}

/* ═══════════════════════════════════════════
   L. DISCOVER SCREEN
   ═══════════════════════════════════════════ */

#discoverScreen .discover-header {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

#discoverScreen .discover-cards-area {
    top: 0 !important;
    padding-top: calc(52px + env(safe-area-inset-top, 0px)) !important;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

#discoverScreen .discover-card-stack {
    max-height: none !important;
    height: auto !important;
}

#discoverScreen .discover-card {
    height: 100% !important;
    overflow: hidden !important;
}

#discoverScreen .discover-actions {
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════
   M. FRIENDS / EXPLORE
   ═══════════════════════════════════════════ */

.friends-page-body {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
}

.friends-page-body > .friends-section-divider:first-child {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

/* ═══════════════════════════════════════════
   N. REVEAL / DECIDE
   ═══════════════════════════════════════════ */

.rd-header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}

.rd-state {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════
   O. SOULMATE RANK
   ═══════════════════════════════════════════ */

.soulmate-rank-bar {
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
}

.rank-toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ═══════════════════════════════════════════
   P. CONTACT LIST
   Consistent spacing, proper scroll, sticky header
   ═══════════════════════════════════════════ */

/* Header stays visible while scrolling */
#profileSelection .messages-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background: var(--app-bg, #0D0A0F) !important;
}

/* Contact list: consistent gap, proper scroll */
#profileSelection .contact-list {
    gap: 10px !important;
    padding-bottom: 24px !important;
}

/* Swipe container: NO extra margin — gap on parent handles spacing */
#profileSelection .swipe-container {
    margin-bottom: 0 !important;
}

/* All contact items: consistent fixed height */
#profileSelection .contact-item {
    min-height: 72px !important;
    box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════
   Q. MODALS & OVERLAYS — SAFE AREAS
   Note: Desktop 9:16 constraint is automatic
   via body being the container. These rules
   only add safe-area padding.
   ═══════════════════════════════════════════ */

#unlockModal .unlock-modal-content {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lightbox-content img {
    max-height: 90vh;
    max-height: 90dvh;
}

.lightbox-close {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

.lightbox-overlay {
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

.mg-composer-panel {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    max-height: 85vh;
    max-height: 85dvh;
}

#quizBuilderScreen {
    padding-top: env(safe-area-inset-top, 0px) !important;
}

.qb-difficulty-screen {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

.obt-tooltip.obt-bottom {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

.msg-notification-toast {
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
    right: calc(16px + env(safe-area-inset-right, 0px)) !important;
}

/* Quiz banner: desktop positioning */
@media (min-width: 768px) {
    .uqp-banner {
        bottom: 80px !important;
    }
    .uqp-banner.uqp-banner--visible {
        transform: translateY(0) !important;
    }
    .uqp-banner:not(.uqp-banner--visible) {
        transform: translateY(120%) !important;
    }
}

/* ═══════════════════════════════════════════
   R. PHOTO UPLOAD PROGRESS
   ═══════════════════════════════════════════ */

.photo-upload-progress {
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
}

/* ═══════════════════════════════════════════
   S. SMALL PHONES (≤667px height)
   ═══════════════════════════════════════════ */

@media screen and (max-height: 667px) {
    #actualChat .chat-header,
    #actualChat .chat-hdr {
        padding-top: calc(6px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(48px + env(safe-area-inset-top, 0px)) !important;
    }

    #profileSelection .messages-header {
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 8px !important;
    }

    #profileScreen .profile-hero,
    #profileScreen .pv2-hero {
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: 16px !important;
    }

    .discover-card-image {
        height: 280px !important;
    }

    .pv2-hero {
        max-height: clamp(220px, 48vh, 380px) !important;
        min-height: 220px !important;
    }

    .app-nav {
        height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Very small phones (568px height) */
@media screen and (max-height: 568px) {
    .discover-card-image {
        height: 220px !important;
    }

    .pv2-hero {
        max-height: clamp(180px, 42vh, 300px) !important;
        min-height: 180px !important;
    }

    .app-nav {
        height: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════
   T. TALL PHONES (≥896px height)
   ═══════════════════════════════════════════ */

@media screen and (min-height: 896px) {
    #actualChat .chat-header,
    #actualChat .chat-hdr {
        padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════
   U. LANDSCAPE
   ═══════════════════════════════════════════ */

@media screen and (orientation: landscape) {
    #actualChat .chat-messages {
        padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    }

    #actualChat .chat-input-area {
        padding-left: calc(12px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(12px + env(safe-area-inset-right, 0px)) !important;
    }

    .app-nav {
        height: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
        padding-left: calc(16px + env(safe-area-inset-left, 0px)) !important;
        padding-right: calc(16px + env(safe-area-inset-right, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════
   V. ULTRA-WIDE / FOLDABLE
   ═══════════════════════════════════════════ */

@media screen and (min-aspect-ratio: 1/1) and (max-width: 767px) {
    .app-nav {
        height: calc(44px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ═══════════════════════════════════════════
   W. PREVENT iOS INPUT ZOOM
   ═══════════════════════════════════════════ */

@media screen and (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ═══════════════════════════════════════════
   X. NARROW SCREENS (≤360px / ≤320px)
   ═══════════════════════════════════════════ */

@media screen and (max-width: 360px) {
    #actualChat .message { max-width: 90% !important; }
    .message-audio { min-width: 180px !important; max-width: 260px !important; }
    .message-image-container { max-width: 220px !important; }
    .pv2-content { padding-left: 14px !important; padding-right: 14px !important; }
}

@media screen and (max-width: 320px) {
    #actualChat .message { max-width: 95% !important; }
    .message-audio { min-width: 160px !important; max-width: 240px !important; }
    .message-image-container { max-width: 200px !important; }
    .message-date-separator span { max-width: 85vw; font-size: 11px !important; }
}