: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);
}
body { padding-left: var(--safe-left); padding-right: var(--safe-right); }
button, a, input[type="submit"], [role="button"] { touch-action: manipulation; }
@media (display-mode: standalone) { html { overscroll-behavior-y: contain; } }

html[data-shell="app"] .phone:has(.active-banner) { padding-bottom: calc(var(--nav-h) + 106px + var(--safe-bottom)); }
html[data-shell="app"] .phone:not(:has(.active-banner)) { padding-bottom: calc(var(--nav-h) + 16px + var(--safe-bottom)); }
html[data-shell="app"] .phone[data-public-page] { padding-bottom: 16px; }
html[data-shell="app"] .phone:has([data-room-shell="compact"]) { padding-bottom: 0; }
html[data-shell="app"] .phone > header { padding-top: calc(12px + var(--safe-top)); }
html[data-shell="app"] nav, html[data-shell="app"] .pz-compose,
html[data-shell="trial"] .cta-dock {
  width: min(460px, calc(100% - var(--safe-left) - var(--safe-right)));
  left: calc(50% + (var(--safe-left) - var(--safe-right)) / 2);
}
html[data-shell="app"] .active-banner { bottom: calc(var(--nav-h) + 10px + var(--safe-bottom)); }
html[data-shell="app"] .pz-new { bottom: calc(var(--nav-h) + 74px + var(--safe-bottom)); }
html[data-shell="app"] .pz-toast { top: calc(72px + var(--safe-top)); }
html[data-shell="onboarding"] .phone {
  padding-top: var(--safe-top); padding-bottom: calc(40px + var(--safe-bottom));
}
html[data-shell="trial"] .phone {
  padding-top: var(--safe-top); padding-bottom: calc(120px + var(--safe-bottom));
}
html[data-public-page] .top, html[data-public-page] .dock {
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}
@supports (min-height: 100svh) { .phone { min-height: 100svh; } }