≈/* 1. RESET BASE HTML */
html {
  height: 100%;
  background-color: #020617;
}

/* 2. RESET BODY (Removing the double-push) */
body {
  margin: 0;
  padding-top: 0 !important; /* Reverts the double-padding issue */
  padding-bottom: env(safe-area-inset-bottom) !important;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 3. TARGET ONLY TOP-LEVEL CONTAINERS */
/* This moves the header and any full-screen overlays down ONCE */
header,
.overlay,
[style*="position: fixed"][style*="top: 0"],
[style*="position: absolute"][style*="top: 0"] {
  padding-top: env(safe-area-inset-top) !important;
  position: sticky; /* Or fixed, depending on your layout */
  top: 0;
  box-sizing: border-box;
}

/* 4. IFRAME SPECIFIC FIX */
/* If the webview itself is forcing into the camera, we push its container */
#aiGradingOverlay iframe,
.webview-container iframe {
  height: calc(100% - env(safe-area-inset-top)) !important;
  margin-top: 0;
}

/* 5. TOUCH FIX */
/* Ensures buttons remain clickable and aren't covered by invisible status bar layers */
button, a, .btn-launch {
  cursor: pointer;
  position: relative;
  z-index: 20000;
}