:root {
  --safe-top: max(var(--app-safe-top, 0px), calc(env(safe-area-inset-top, 0px) * 0.5));
  --safe-right: max(var(--app-safe-right, 0px), calc(env(safe-area-inset-right, 0px) * 0.5));
  --safe-bottom: max(var(--app-safe-bottom, 0px), calc(env(safe-area-inset-bottom, 0px) * 0.5));
  --safe-left: max(var(--app-safe-left, 0px), calc(env(safe-area-inset-left, 0px) * 0.5));
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root {
    --safe-top: max(var(--app-safe-top, 0px), calc(env(safe-area-inset-top, 0px) * 0.5), 14px);
  }
}

/*
 * Android APK: Kotlin sets --app-chrome-top (status bar px, no fallback).
 * --safe-top offsets fixed UI only — no ::before band (that caused the huge white block).
 */
html.native-app {
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-left: 0px;
  --safe-bottom: 0px;
}

html.native-app body.app-layout-top-2 {
  --safe-top: calc(var(--app-chrome-top, 0px) * 0.25 + 1px) !important;
}

html.native-app body.app-layout-bottom-4 {
  /* WebView handles keyboard inset; lift in-flow footers above the nav bar. */
  --safe-bottom: 0px !important;
}

html.native-app body.app-layout-bottom-4 .site-footer--page {
  margin-bottom: var(--app-chrome-bottom, env(safe-area-inset-bottom, 0px));
  padding-bottom: 12px;
}

html.native-app .site-footer--sidebar {
  padding-bottom: calc(8px + var(--app-chrome-bottom, env(safe-area-inset-bottom, 0px)));
}

html.native-app body.app-layout-top-2::before {
  display: none !important;
  content: none !important;
}

/* Mobile web */
html:not(.native-app) body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  background: #fff;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

body.embed-mode::before {
  display: none !important;
}

header.top,
.top {
  padding-top: var(--safe-top);
}

.topbar {
  padding-top: max(10px, var(--safe-top));
}

.header {
  padding-top: var(--safe-top);
}

.safe-chrome {
  padding-top: max(14px, var(--safe-top));
  padding-right: max(18px, var(--safe-right));
  padding-left: max(18px, var(--safe-left));
}

header.top .safe-chrome,
.top .safe-chrome {
  padding-top: 14px;
}

body.safe-body-pad {
  padding-top: max(24px, calc(24px + var(--safe-top))) !important;
  padding-bottom: max(24px, calc(24px + var(--safe-bottom))) !important;
  padding-left: max(24px, var(--safe-left)) !important;
  padding-right: max(24px, var(--safe-right)) !important;
}