/* ExSA Customer WebView UI Foundation — V5 / V4.4 shell
 * Single source of truth for mobile safe-area + fixed-bottom clearance.
 * Business logic is intentionally untouched.
 * Shared header uses safe-area-only top spacing.
 */
:root{
  --exsa-safe-top-raw:env(safe-area-inset-top,0px);
  --exsa-safe-right:env(safe-area-inset-right,0px);
  --exsa-safe-bottom:env(safe-area-inset-bottom,0px);
  --exsa-safe-left:env(safe-area-inset-left,0px);
  /* Single source of truth: use the device-provided inset only.
     Do not invent a 24px inset in native WebView; Android may already place
     the WebView below the status bar. Real cutouts/notches are still honored
     through env(safe-area-inset-top). */
  --exsa-safe-top:var(--exsa-safe-top-raw);
  --exsa-nav-content-height:64px;
  --exsa-nav-clearance:calc(var(--exsa-nav-content-height) + 12px + var(--exsa-safe-bottom));
}

html{min-height:100%;}
body{
  min-height:100%;
  margin:0;
  padding-left:var(--exsa-safe-left);
  padding-right:var(--exsa-safe-right);
}
.app{min-height:100dvh;}


/* V4.3 visual guard: keep Android system status-bar lane opaque so scrolling
   content cannot paint text/icons underneath it in native WebView. */
html.tw-native-webview body::before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  width:100%;
  height:var(--exsa-safe-top);
  background:#fff;
  z-index:100000;
  pointer-events:none;
}


/* Native WebView follows the same rule as browser WebView: never add a
   synthetic top inset. If Android exposes a real cutout inset, env() above
   supplies it; if the WebView is already laid out below the status bar, the
   inset remains 0px. */
html.tw-native-webview{
  --exsa-safe-top:var(--exsa-safe-top-raw);
}

@media (max-width:700px){
  body{
    padding-top:0;
    scroll-padding-top:var(--exsa-safe-top);
  }
  .app.tw-bottom-nav-page{
    padding-bottom:var(--exsa-nav-clearance)!important;
  }
}

@media (max-width:360px){
  :root{
    --exsa-nav-content-height:60px;
    --exsa-nav-clearance:calc(var(--exsa-nav-content-height) + 12px + var(--exsa-safe-bottom));
  }
}

@media (min-width:700px){
  :root{
    --exsa-nav-content-height:64px;
    --exsa-nav-clearance:calc(var(--exsa-nav-content-height) + 12px + var(--exsa-safe-bottom));
  }
}

/* Transaction/detail pages with a fixed purchase/action bar. */
body:has(.bottom .wish) .app{
  padding-bottom:calc(66px + var(--exsa-safe-bottom)) !important;
}
.bottom:has(.wish){
  height:calc(58px + var(--exsa-safe-bottom)) !important;
  padding-bottom:calc(6px + var(--exsa-safe-bottom)) !important;
}

/* Legacy fixed navs: keep them above the gesture/navigation area. */
@media (max-width:700px){
  nav.nav, .nav.fixed-bottom, .bottom-nav.fixed-bottom{
    bottom:var(--exsa-safe-bottom) !important;
  }
}

/* Map and sheet surfaces must clear the gesture/navigation area. */
.map-sheet{
  max-height:calc(78vh - var(--exsa-safe-top) - var(--exsa-safe-bottom));
}
.map-foot{
  padding-bottom:calc(12px + var(--exsa-safe-bottom));
}

/* Dialog/sheet safe area. */
@media (max-width:700px){
  :root{
    --exsa-dialog-safe-bottom:max(64px,var(--exsa-safe-bottom));
    --exsa-dialog-safe-top:max(12px,var(--exsa-safe-top));
  }

  #exsa-dialog-overlay,
  #exsa-logout-dialog,
  #exsaConfirmOverlay{
    padding:var(--exsa-dialog-safe-top) 12px var(--exsa-dialog-safe-bottom)!important;
    box-sizing:border-box!important;
  }
  #exsa-dialog-overlay .exsa-dialog-sheet,
  #exsa-logout-dialog .exsa-logout-sheet,
  #exsaConfirmOverlay .exsa-confirm-dialog{
    max-height:calc(100dvh - var(--exsa-dialog-safe-top) - var(--exsa-dialog-safe-bottom));
    overflow:auto;
  }

  .map-overlay,
  .tw-variant-modal,
  #exsaOnboardingOverlay{
    padding:0 0 var(--exsa-dialog-safe-bottom)!important;
    box-sizing:border-box!important;
  }
  .map-sheet,
  .tw-variant-sheet,
  #exsaOnboardingSheet{
    max-height:calc(100dvh - var(--exsa-dialog-safe-bottom));
  }
  .map-foot{padding-bottom:12px!important;}
  #exsaOnboardingSheet{padding-bottom:max(24px,var(--exsa-dialog-safe-bottom))!important;}
  .tw-variant-list{max-height:calc(100dvh - var(--exsa-dialog-safe-bottom) - 105px)!important;}

  .avatar-crop-modal{
    padding:var(--exsa-dialog-safe-top) 18px var(--exsa-dialog-safe-bottom)!important;
    box-sizing:border-box!important;
  }
  .avatar-crop-card{
    max-height:calc(100dvh - var(--exsa-dialog-safe-top) - var(--exsa-dialog-safe-bottom));
    overflow:auto;
  }

  #deliveryProofModal [data-proof-backdrop]{
    padding:var(--exsa-dialog-safe-top) 12px var(--exsa-dialog-safe-bottom)!important;
    box-sizing:border-box!important;
  }
  #deliveryProofModal [data-proof-backdrop] > div{
    max-height:calc(100dvh - var(--exsa-dialog-safe-top) - var(--exsa-dialog-safe-bottom));
    overflow:auto;
  }
}

@supports not (height:100dvh){
  .app{min-height:100vh;}
  @media (max-width:700px){
    #exsa-dialog-overlay .exsa-dialog-sheet,
    #exsa-logout-dialog .exsa-logout-sheet,
    #exsaConfirmOverlay .exsa-confirm-dialog,
    .map-sheet,
    .tw-variant-sheet,
    #exsaOnboardingSheet,
    .avatar-crop-card,
    #deliveryProofModal [data-proof-backdrop] > div{
      max-height:calc(100vh - var(--exsa-dialog-safe-top) - var(--exsa-dialog-safe-bottom));
    }
    .tw-variant-list{
      max-height:calc(100vh - var(--exsa-dialog-safe-bottom) - 105px)!important;
    }
  }
}

/* V7.0 — Secondary-page status lane stays transparent at the WebView layer,
 * but the fixed visual guard is red so scrolling content can never paint into
 * the Android status-bar lane. The native status icons remain white/readable. */
html.tw-native-webview.tw-secondary-page{
  background:transparent !important;
  color-scheme:light !important;
}
html.tw-native-webview.tw-secondary-page body::before{
  background:#d71920 !important;
}



/* V2 — SAFE-AREA NORMALIZATION */
html.tw-native-webview{
  --exsa-safe-top:var(--exsa-safe-top-raw) !important;
}