/* ============================================
   iOS SAFE AREA FIX - FINAL VERSION v3
   ============================================
   Works for:
   - Safari browser (no padding)
   - PWA/Add to Home Screen (safe area)
   - Native app WebView via Xcode (safe area)
   ============================================ */

/* ============================================
   RESET - Remove all default padding
   ============================================ */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ============================================
   Method 1: PWA Detection (display-mode)
   ============================================ */
@media (display-mode: standalone) {
    /* This catches PWA mode on iOS */
    :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);
    }
    
    body {
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
}

/* ============================================
   Method 2: WebView Detection
   For native apps using WKWebView (Xcode)
   ============================================ */

/* If body has class 'ios-app' or 'native-app', apply safe areas */
body.ios-app,
body.native-app,
body.webview {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
}

/* ============================================
   CSS Variables for Safe Areas (always available)
   ============================================ */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}

/* ============================================
   BROWSER MODE - Explicitly NO padding
   ============================================ */
@media not all and (display-mode: standalone) {
    body:not(.ios-app):not(.native-app):not(.webview) {
        padding: 0 !important;
    }
}

/* ============================================
   TOP NAVIGATION
   ============================================ */

/* In standalone or native app */
@media (display-mode: standalone) {
    .top-nav,
    #topNav,
    header {
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        min-height: calc(70px + env(safe-area-inset-top, 0px));
    }
}

/* For native apps with class */
body.ios-app .top-nav,
body.ios-app #topNav,
body.ios-app header,
body.native-app .top-nav,
body.native-app #topNav,
body.native-app header,
body.webview .top-nav,
body.webview #topNav,
body.webview header {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    min-height: calc(70px + env(safe-area-inset-top, 0px));
}

/* In browser - normal padding */
@media not all and (display-mode: standalone) {
    body:not(.ios-app):not(.native-app):not(.webview) .top-nav,
    body:not(.ios-app):not(.native-app):not(.webview) #topNav,
    body:not(.ios-app):not(.native-app):not(.webview) header {
        padding-top: 16px !important;
        min-height: 70px;
    }
}

/* ============================================
   MAIN CONTENT
   ============================================ */

/* In standalone or native app */
@media (display-mode: standalone) {
    .main-content,
    #mainContent,
    main {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    
    /* If nav is fixed, add margin */
    #mainContent,
    .main-content {
        margin-top: calc(70px + env(safe-area-inset-top, 0px));
    }
}

/* For native apps */
body.ios-app .main-content,
body.ios-app #mainContent,
body.ios-app main,
body.native-app .main-content,
body.native-app #mainContent,
body.native-app main,
body.webview .main-content,
body.webview #mainContent,
body.webview main {
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

body.ios-app #mainContent,
body.ios-app .main-content,
body.native-app #mainContent,
body.native-app .main-content,
body.webview #mainContent,
body.webview .main-content {
    margin-top: calc(70px + env(safe-area-inset-top, 0px));
}

/* In browser - normal */
@media not all and (display-mode: standalone) {
    body:not(.ios-app):not(.native-app):not(.webview) .main-content,
    body:not(.ios-app):not(.native-app):not(.webview) #mainContent,
    body:not(.ios-app):not(.native-app):not(.webview) main {
        padding-bottom: 20px;
        margin-top: 0;
    }
}

/* ============================================
   DASHBOARD VIEW
   ============================================ */

@media (display-mode: standalone) {
    #dashboardView {
        padding-top: 30px !important;
    }
}

body.ios-app #dashboardView,
body.native-app #dashboardView,
body.webview #dashboardView {
    padding-top: 30px !important;
}

@media not all and (display-mode: standalone) {
    body:not(.ios-app):not(.native-app):not(.webview) #dashboardView {
        padding-top: 30px !important;
    }
}

/* ============================================
   BROADCAST BANNER
   ============================================ */

@media (display-mode: standalone) {
    #broadcastBannerWrap {
        top: env(safe-area-inset-top, 0px) !important;
    }
}

body.ios-app #broadcastBannerWrap,
body.native-app #broadcastBannerWrap,
body.webview #broadcastBannerWrap {
    top: env(safe-area-inset-top, 0px) !important;
}

/* ============================================
   LOADING SCREEN
   ============================================ */

@media (display-mode: standalone) {
    #loadingScreen,
    .loading-screen {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

body.ios-app #loadingScreen,
body.ios-app .loading-screen,
body.native-app #loadingScreen,
body.native-app .loading-screen,
body.webview #loadingScreen,
body.webview .loading-screen {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ============================================
   ANTI-FLASH LOADER (from your HTML)
   ============================================ */

@media (display-mode: standalone) {
    #antiFlashLoader {
        top: env(safe-area-inset-top, 0px);
    }
}

body.ios-app #antiFlashLoader,
body.native-app #antiFlashLoader,
body.webview #antiFlashLoader {
    top: env(safe-area-inset-top, 0px);
}

/* ============================================
   UTILITY CLASSES
   You can add these to any element
   ============================================ */

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

.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.safe-left {
    padding-left: env(safe-area-inset-left, 0px) !important;
}

.safe-right {
    padding-right: env(safe-area-inset-right, 0px) !important;
}

.safe-all {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
}

/* Margin versions */
.safe-margin-top {
    margin-top: env(safe-area-inset-top, 0px) !important;
}

.safe-margin-bottom {
    margin-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ============================================
   DEBUGGING
   ============================================ */

/* Temporarily add this class to visualize safe areas */
body.debug-safe-v3::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: rgba(255, 0, 0, 0.5);
    z-index: 999999;
    pointer-events: none;
    border-bottom: 3px solid red;
}

body.debug-safe-v3::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-bottom, 0px);
    background: rgba(0, 255, 0, 0.5);
    z-index: 999999;
    pointer-events: none;
    border-top: 3px solid green;
}

/* Show mode indicator */
@media (display-mode: standalone) {
    body.debug-safe-v3::before {
        content: 'PWA MODE - Safe area applied' !important;
        height: auto !important;
        padding: 8px;
        background: rgba(0, 255, 0, 0.9) !important;
        color: black;
        font-weight: bold;
        text-align: center;
        font-size: 14px;
    }
}

@media not all and (display-mode: standalone) {
    body.debug-safe-v3:not(.ios-app):not(.native-app):not(.webview)::before {
        content: 'BROWSER MODE - No safe area' !important;
        height: auto !important;
        padding: 8px;
        background: rgba(255, 0, 0, 0.9) !important;
        color: white;
        font-weight: bold;
        text-align: center;
        font-size: 14px;
    }
}

body.ios-app.debug-safe-v3::before,
body.native-app.debug-safe-v3::before,
body.webview.debug-safe-v3::before {
    content: 'NATIVE APP MODE - Safe area applied' !important;
    height: auto !important;
    padding: 8px;
    background: rgba(0, 150, 255, 0.9) !important;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
}

/* ============================================
   PLUGIN CONTENT CONTAINER - SAFE AREA FIX
   Prevents plugin content from going into Dynamic Island
   ============================================ */

/* Main plugin content wrapper */
#pluginContentWrapper,
#pluginContent {
    /* Add safe area padding at top */
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* If plugin content is full-screen / fixed position */
#pluginContentWrapper.fullscreen,
#pluginContent.fullscreen {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    right: 0;
    bottom: env(safe-area-inset-bottom, 0px);
    overflow: auto;
}

/* ============================================
   STANDALONE/PWA MODE SPECIFIC
   ============================================ */

@media (display-mode: standalone) {
    /* Main content area when showing plugins */
    .main-content {
        padding-top: env(safe-area-inset-top, 0px);
    }
    
    /* Plugin wrapper should respect safe areas */
    #pluginContentWrapper {
        padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
    }
    
    /* If there's a top nav visible, account for both */
    #pluginContentWrapper.with-nav {
        padding-top: calc(env(safe-area-inset-top, 0px) + 70px);
    }
}

/* Native app mode */
body.ios-app #pluginContentWrapper,
body.native-app #pluginContentWrapper {
    padding-top: calc(env(safe-area-inset-top, 0px) + 20px);
}

body.ios-app #pluginContentWrapper.with-nav,
body.native-app #pluginContentWrapper.with-nav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 70px);
}

/* ============================================
   BROWSER MODE - NO SAFE AREA
   ============================================ */

@media not all and (display-mode: standalone) {
    body:not(.ios-app):not(.native-app) #pluginContentWrapper {
        padding-top: 20px;
    }
    
    body:not(.ios-app):not(.native-app) #pluginContentWrapper.with-nav {
        padding-top: 70px;
    }
}

/* ============================================
   IF PLUGINS USE IFRAMES OR FULLSCREEN MODALS
   ============================================ */

/* Plugin iframes */
#pluginContent iframe {
    /* Add safe area if iframe is full viewport */
    margin-top: env(safe-area-inset-top, 0px);
}

/* Plugin modals */
.plugin-modal,
.plugin-fullscreen {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* Plugin modal close buttons - avoid Dynamic Island */
.plugin-modal .close-button,
.plugin-modal .modal-close {
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}

/* ============================================
   BACK BUTTON POSITION
   Make sure back button respects safe area
   ============================================ */

@media (display-mode: standalone) {
    #backButton {
        margin-top: env(safe-area-inset-top, 0px);
    }
}

body.ios-app #backButton,
body.native-app #backButton {
    margin-top: env(safe-area-inset-top, 0px);
}

/* ============================================
   SPECIFIC PLUGIN CONTAINERS
   Some plugins might use these class names
   ============================================ */

.app-container,
.plugin-container,
.game-container,
.quiz-container {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* If plugin creates its own fullscreen overlay */
.fullscreen-overlay {
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

/* ============================================
   DEBUG HELPER
   ============================================ */

body.debug-plugin-safe-area #pluginContentWrapper::before {
    content: 'Plugin Safe Area: ' attr(data-safe-top);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 255, 0, 0.8);
    color: black;
    padding: 8px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    z-index: 99999;
}

/* ============================================
   USAGE NOTES FOR APP.JS
   ============================================
   
   In your openApp() function, add this:
   
   function openApp(pluginId, options = {}) {
       // ... existing code ...
       
       // Add class to indicate nav is visible
       const wrapper = document.getElementById('pluginContentWrapper');
       const nav = document.getElementById('topNav');
       
       if (nav && getComputedStyle(nav).display !== 'none') {
           wrapper.classList.add('with-nav');
       } else {
           wrapper.classList.remove('with-nav');
       }
       
       // ... rest of code ...
   }
   
   ============================================ */

/* ============================================
   IMPORTANT NOTES
   ============================================
   
   FOR XCODE/NATIVE APP:
   Add this JavaScript when your WebView loads:
   
   document.body.classList.add('ios-app');
   
   OR inject via Swift/Objective-C:
   
   webView.evaluateJavaScript("document.body.classList.add('ios-app')")
   
   This tells the CSS you're in a native app context.
   
   ============================================ */