/**
 * ios-pwa.css — iOS Safari & PWA Standalone Improvements
 * =========================================================
 * ALL rules are scoped to:
 *   body.platform-ios            → iPhone / iPad / iPod in any browser
 *   body.platform-ios.is-pwa     → installed PWA standalone mode only
 *
 * ✅ Zero impact on Android, desktop, or Capacitor APK builds.
 * The body classes are set at startup in index.html's platform-detection bootstrap.
 */

/* ============================================================================
   1. SAFE AREA INSETS — Notch, Dynamic Island, Home Indicator
   ============================================================================ */

/**
 * Apply safe-area padding to the main app shell on iOS only.
 * Ensures content isn't hidden behind the notch / Dynamic Island at the top
 * or the home indicator bar at the bottom.
 */
body.platform-ios #root {
    /* Top: covers status bar + notch/Dynamic Island */
    padding-top: env(safe-area-inset-top, 0px);
    /* Bottom: covers home indicator bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* Sides: covers curved screen edges on larger iPhones in landscape */
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    /* Use box-sizing so padding doesn't cause overflow */
    box-sizing: border-box;
    /* Minimum full-screen height accounting for dynamic viewport */
    min-height: 100dvh;
}

/**
 * In standalone PWA mode, ensure full viewport containment.
 */
body.platform-ios.is-pwa #root {
    min-height: 100dvh;
    width: 100%;
}

/* ============================================================================
   2. VIEWPORT HEIGHT FIX — Eliminates the infamous iOS 100vh gap
   ============================================================================ */

/**
 * On iOS Safari, 100vh includes the browser toolbar height which changes as
 * the user scrolls. Using 100dvh (dynamic viewport height, iOS 15.4+) fixes this.
 * -webkit-fill-available is the fallback for older iOS.
 */
body.platform-ios {
    height: 100vh;
    /* Fallback for iOS < 15.4 */
    height: -webkit-fill-available;
    /* Modern dynamic viewport */
    height: 100dvh;
}

body.platform-ios .h-screen,
body.platform-ios .min-h-screen {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
}

/* Fix full-height flex containers */
body.platform-ios [class*="h-full"] {
    height: 100%;
}

/* ============================================================================
   3. SCROLL RUBBER-BANDING CONTROL
   ============================================================================ */

/**
 * Prevent the whole-page rubber-band bounce which causes layout shifts in
 * full-screen chat UIs. Allow natural scrolling inside scrollable containers.
 */
body.platform-ios {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
}

/* Re-enable smooth momentum scroll for explicit scrollable areas */
body.platform-ios .overflow-y-auto,
body.platform-ios .overflow-y-scroll,
body.platform-ios [class*="overflow-y"] {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* ============================================================================
   4. VIRTUAL KEYBOARD RESILIENCE
   ============================================================================ */

/**
 * When the iOS virtual keyboard opens, it doesn't resize window.innerHeight —
 * it overlaps the content. This pushes the fixed chat input into view
 * by respecting the visual viewport height.
 */
body.platform-ios .chat-input-container,
body.platform-ios [data-chat-input],
body.platform-ios .fixed.bottom-0 {
    /* Translate will be controlled by JS (useIOSKeyboard hook) */
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ============================================================================
   5. STANDALONE PWA — Status Bar & Navigation Area
   ============================================================================ */

/**
 * In standalone/installed PWA mode on iOS, add extra top clearance so
 * app content doesn't sit behind the iOS status bar strip.
 */
body.platform-ios.is-pwa header,
body.platform-ios.is-pwa nav,
body.platform-ios.is-pwa [data-role="header"] {
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
}

/**
 * Bottom navigation / tab bar should sit above the home indicator.
 */
body.platform-ios.is-pwa [data-role="bottom-nav"],
body.platform-ios.is-pwa .bottom-navigation {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    margin-bottom: 0;
}

/* ============================================================================
   6. TAP HIGHLIGHT & TOUCH FEEDBACK
   ============================================================================ */

/**
 * iOS shows a gray flash on tapped elements by default. Remove it globally
 * but keep visual feedback via our custom active:scale animations.
 */
body.platform-ios * {
    -webkit-tap-highlight-color: transparent;
}

/* Restore callout for links only (long-press copy URL) */
body.platform-ios a {
    -webkit-touch-callout: default;
}

/* ============================================================================
   7. MOMENTUM SCROLLING — Chat Message List
   ============================================================================ */

/**
 * Ensures the chat message list uses native iOS momentum scroll,
 * making it feel indistinguishable from a native app.
 */
body.platform-ios .chat-messages,
body.platform-ios [data-role="message-list"],
body.platform-ios [data-chat-messages] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
}

/* ============================================================================
   8. INPUT & TEXTAREA — Prevent iOS Auto-Zoom
   ============================================================================ */

/**
 * iOS Safari zooms in on focused inputs with font-size < 16px. 
 * Setting font-size to at least 16px on inputs prevents this zoom
 * without locking the user's zoom ability.
 */
body.platform-ios input,
body.platform-ios textarea,
body.platform-ios select {
    font-size: max(16px, 1em) !important;
    /* Retain the original visual size via transform for inputs that should appear smaller */
}

/* Chat input textarea — special case: we want it to look like 14px but not zoom */
body.platform-ios [data-tour="chat-input"],
body.platform-ios textarea[data-chat] {
    font-size: 16px !important;
    transform-origin: top left;
}

/* ============================================================================
   9. MODAL & FIXED OVERLAY — Prevent Background Scroll on iOS
   ============================================================================ */

/**
 * On iOS, a fixed overlay doesn't prevent the body from scrolling underneath.
 * When a modal opens, a .ios-modal-open class is applied to body via JS
 * to lock the scroll.
 */
body.platform-ios.ios-modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    /* Preserve scroll position via top offset — set by JS */
}

/* ============================================================================
   10. FONT SMOOTHING & RENDERING
   ============================================================================ */

body.platform-ios {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Prevent iOS text size adjustment in landscape */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ============================================================================
   11. AUDIO UNLOCK INDICATOR
   ============================================================================ */

/**
 * Show a subtle tap-to-enable-audio banner on iOS only
 * (iOS requires user gesture to play audio — handled by JS).
 * This banner is shown/hidden via a class applied from useIOS hook.
 */
body.platform-ios .ios-audio-unlock-banner {
    display: flex;
}

/* Hide by default on all platforms */
.ios-audio-unlock-banner {
    display: none;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 16px) + 72px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9000;
    background: rgba(12, 20, 43, 0.95);
    border: 1px solid rgba(59, 130, 246, 0.4);
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: slideUpFadeIn 0.3s ease;
    pointer-events: none;
}

@keyframes slideUpFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================================
   12. PWA INSTALL BANNER — iOS-only bottom sheet
   ============================================================================ */

/**
 * iOS-specific install instructions bottom sheet.
 * Only shown on iOS when app is not in standalone mode.
 * Rendered/hidden via JS (IOSInstallBanner component).
 */
.ios-install-banner {
    display: none;
}

body.platform-ios .ios-install-banner {
    display: flex;
    position: fixed;
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    right: 0;
    z-index: 9999;
    flex-direction: column;
    background: rgba(12, 20, 43, 0.97);
    border-top: 1px solid rgba(59, 130, 246, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px 20px 0 0;
    padding: 16px 20px;
    padding-bottom: calc(env(safe-area-inset-bottom, 8px) + 12px);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.platform-ios .ios-install-banner.is-visible {
    transform: translateY(0);
}

body.platform-ios .ios-install-banner:not(.is-visible) {
    pointer-events: none !important;
    visibility: hidden;
}

/* ============================================================================
   13. LANDSCAPE ORIENTATION ADJUSTMENTS
   ============================================================================ */

@media (orientation: landscape) {
    body.platform-ios #root {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }

    body.platform-ios .chat-input-area {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ============================================================================
   14. WEBKIT COMPOSITOR & WHITE SCREEN CRASH PREVENTIONS
   ============================================================================ */

/* Disable WebKit hardware promotion on general overflow containers on iOS to prevent GPU texture exhaustion and blank screens */
body.platform-ios .overflow-y-auto,
body.platform-ios .overflow-y-scroll {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Enforce content-visibility: visible on iOS to prevent WebKit layout dropping / blank cards */
body.platform-ios,
body.platform-ios * {
    content-visibility: visible !important;
}

/* Ensure all form inputs on iOS have minimum 16px font-size to prevent automatic iOS zoom / touch coordinate displacement */
body.platform-ios input,
body.platform-ios select,
body.platform-ios textarea {
    font-size: 16px !important;
}

/* Ensure #root does not have hardware transforms on iOS which break fixed positioning coordinate mapping */
body.platform-ios #root {
    transform: none !important;
    -webkit-transform: none !important;
}