/* Source of truth: shared/ui/safe-area.css. Distribute with scripts/sync_safe_area.py.
   Insets are supplied by the browser/WebView, never inferred from the device model.
   Layouts own their existing design spacing and apply each inset exactly once. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-top-spacing: 14px; /* Existing header design gap, not a cutout fallback. */
}
dialog.safe-area-dialog {
  position: fixed;
  inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 2rem);
  max-width: min(var(--dialog-max-width, 520px), calc(100vw - var(--safe-left) - var(--safe-right) - 1.5rem)) !important;
  overflow: auto;
}