/* Effective insets belong to the viewport, not to each nested page. */
:root {
  --cr-safe-top: env(safe-area-inset-top, 0px);
  --cr-safe-right: env(safe-area-inset-right, 0px);
  --cr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --cr-safe-left: env(safe-area-inset-left, 0px);
}
:root[data-cr-embedded="true"] {
  --cr-safe-top: 0px;
  --cr-safe-right: 0px;
  --cr-safe-bottom: 0px;
  --cr-safe-left: 0px;
}
/* Opt-in controls only: full-bleed backdrops, photos and maps stay full-bleed. */
.cr-safe-overlay {
  box-sizing: border-box;
  padding: calc(var(--cr-safe-top) + var(--cr-overlay-gap, 16px))
    calc(var(--cr-safe-right) + var(--cr-overlay-gap, 16px))
    calc(var(--cr-safe-bottom) + var(--cr-overlay-gap, 16px))
    calc(var(--cr-safe-left) + var(--cr-overlay-gap, 16px)) !important;
  overflow-y: auto;
}
.cr-safe-dialog {
  max-height: calc(100vh - var(--cr-safe-top) - var(--cr-safe-bottom) - 2 * var(--cr-overlay-gap, 16px)) !important;
  max-height: calc(100dvh - var(--cr-safe-top) - var(--cr-safe-bottom) - 2 * var(--cr-overlay-gap, 16px)) !important;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cr-safe-toast {
  top: calc(12px + var(--cr-safe-top)) !important;
  right: calc(12px + var(--cr-safe-right)) !important;
  max-width: calc(100vw - var(--cr-safe-left) - var(--cr-safe-right) - 24px);
}
.cr-safe-toast > * { max-width: min(340px, 100%) !important; overflow-wrap: anywhere; }