/* Insets belong to the viewport, including portals outside the app shell.
   Android 150 also insets its WebView natively; consumed insets resolve to zero. */
:root{
 --cg-safe-top:env(safe-area-inset-top,0px);
 --cg-safe-bottom:env(safe-area-inset-bottom,0px);
 --cg-safe-left:env(safe-area-inset-left,0px);
 --cg-safe-right:env(safe-area-inset-right,0px);
}
html{scroll-padding-top:calc(var(--cg-safe-top) + 64px);scroll-padding-bottom:calc(var(--cg-safe-bottom) + 24px)}
/* Native HTML dialogs, including dynamically created confirmations and QR. */
html body dialog[open]:not(#cg-help-dialog){
 top:var(--cg-safe-top);bottom:var(--cg-safe-bottom);left:var(--cg-safe-left);right:var(--cg-safe-right);
 max-width:calc(100vw - var(--cg-safe-left) - var(--cg-safe-right) - 16px);
 max-height:calc(100dvh - var(--cg-safe-top) - var(--cg-safe-bottom) - 24px);
 box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
 scroll-padding-block:16px;
}
/* React Native Web Modal portals are fixed outside #root, not inside SafeAreaView. */
body:has(#root) div[aria-modal="true"]{
 top:var(--cg-safe-top)!important;bottom:var(--cg-safe-bottom)!important;
 left:var(--cg-safe-left)!important;right:var(--cg-safe-right)!important;
 max-height:calc(100dvh - var(--cg-safe-top) - var(--cg-safe-bottom));
}
body:has(#root) div[aria-modal="true"]>div{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain}
/* The provider's legacy overlays keep their backdrop but inset their contents. */
html body .modal-bg{
 box-sizing:border-box;
 padding-top:max(16px,var(--cg-safe-top));padding-bottom:max(16px,var(--cg-safe-bottom));
 padding-left:max(12px,var(--cg-safe-left));padding-right:max(12px,var(--cg-safe-right));
}
html body .modal-bg>.modal{max-height:calc(100dvh - var(--cg-safe-top) - var(--cg-safe-bottom) - 32px);overflow-y:auto}
/* Keep the assistant's visual-viewport/keyboard positioning; never move it into system UI. */
html body #cg-help-dialog{
 bottom:max(var(--cg-help-bottom,0px),var(--cg-safe-bottom));
 max-height:calc(var(--cg-help-viewport,100dvh) - var(--cg-safe-top) - var(--cg-safe-bottom) - 8px);
 max-width:calc(100vw - var(--cg-safe-left) - var(--cg-safe-right));
}
@media(max-width:700px){
 html body #cg-help-dialog{left:var(--cg-safe-left);right:var(--cg-safe-right)}
 /* This older wizard is full-height; its height must exclude, not cover, both bars. */
 html body[data-context="app"] #dialog[open]:has(#pilatesWizard){
  height:calc(100dvh - var(--cg-safe-top) - var(--cg-safe-bottom));
  max-height:calc(100dvh - var(--cg-safe-top) - var(--cg-safe-bottom));
  max-width:calc(100vw - var(--cg-safe-left) - var(--cg-safe-right));
  width:calc(100vw - var(--cg-safe-left) - var(--cg-safe-right));
  padding:16px;margin:0;
 }
}