:root {
  --seneca-safe-top: env(safe-area-inset-top, 0px);
  --seneca-safe-right: env(safe-area-inset-right, 0px);
  --seneca-safe-bottom: env(safe-area-inset-bottom, 0px);
  --seneca-safe-left: env(safe-area-inset-left, 0px);
  background: #000;
}

html,
body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
}

#root {
  min-width: 0;
  min-height: 0;
}

/*
 * Installed PWAs may render beneath a camera cutout, rounded display corner,
 * Android system bar, or macOS window inset. Keep the app edge-to-edge while
 * reserving only the inset the operating system reports. In a normal browser
 * tab no PWA padding is applied, so the public site remains unchanged.
 */
@media (display-mode: fullscreen), (display-mode: standalone) {
  html,
  body {
    height: 100%;
    height: 100dvh;
  }

  body {
    padding:
      var(--seneca-safe-top)
      var(--seneca-safe-right)
      var(--seneca-safe-bottom)
      var(--seneca-safe-left);
  }
}