:root { --dialog-safe-top: env(safe-area-inset-top, 0px); }
/* VisualViewport is the visible rectangle, not an extra bottom inset. Sheet
   transforms remain exclusively owned by the interruptible motion system. */
html[data-dialog-open], html[data-dialog-open] body { overflow: hidden; overscroll-behavior: none; }
dialog[data-viewport-layout][open] { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scroll-padding-block: 12px; }
dialog[data-viewport-layout="side"][open] { top: var(--visible-top, 0px); bottom: auto; height: var(--visible-height, 100dvh); max-height: var(--visible-height, 100dvh); overflow-y: auto; }
dialog[data-viewport-layout="top"][open] { top: var(--visible-top, 0px); bottom: auto; max-height: var(--visible-height, 100dvh); overflow-y: auto; }
dialog[data-viewport-layout="center"][open] { top: calc(var(--visible-top, 0px) + var(--visible-height, 100dvh) / 2); bottom: auto; left: 0; right: 0; margin: 0 auto; max-height: calc(var(--visible-height, 100dvh) - 24px); transform: translateY(-50%); overflow-y: auto; }
dialog[data-viewport-layout="bottom-sheet"][open] { top: calc(var(--visible-top, 0px) + var(--visible-height, 100dvh) - min(78dvh, var(--visible-height, 100dvh))); bottom: auto; height: min(78dvh, var(--visible-height, 100dvh)); max-height: var(--visible-height, 100dvh); }
dialog[data-viewport-layout="bottom"][open] { top: auto; bottom: calc(100% - var(--visible-top, 0px) - var(--visible-height, 100dvh)); max-height: calc(var(--visible-height, 100dvh) - 12px); }
/* A footer is useful at full height. Above a keyboard it must never cover the
   focused field, suggestions or validation; everything stays in one scroll. */
html[data-viewport-constrained] dialog[data-viewport-layout] .sheet-actions, dialog[data-viewport-flow-actions] .sheet-actions { position: static; flex-shrink: 0; bottom: auto; box-shadow: none; }
html[data-viewport-constrained] dialog[data-viewport-layout] .sheet-inner > form { flex-shrink: 0; }
html[data-viewport-constrained] dialog[data-viewport-layout] :is(.sheet-inner,.client-dialog-inner) { padding-bottom: 20px; }
html[data-viewport-constrained] dialog[data-viewport-layout] textarea { min-height: min(110px, calc(var(--visible-height) / 2)); max-height: calc(var(--visible-height) / 2); overflow-y: auto; }
/* Top-layer dialogs do not inherit the app shell's safe-area padding. Subtract
   an existing visual offset so the status-bar inset is never counted twice. */
dialog[data-viewport-layout="side"][open], dialog[data-viewport-layout="top"][open] { padding-top: max(0px, calc(var(--dialog-safe-top) - var(--visible-top, 0px))); }