/* Bounds shared by native dialogs and Flowbite overlays. */
.studio-shell dialog:not(.studio-modal-top-layer){
 position:fixed!important;
 box-sizing:border-box;
 max-width:calc(var(--studio-viewport-width, 100vw) - 24px)!important;
 max-height:calc(var(--studio-viewport-height, 100dvh) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))!important;
 top:var(--studio-viewport-top, 0px)!important;
 bottom:max(0px, calc(100vh - var(--studio-viewport-top, 0px) - var(--studio-viewport-height, 100dvh)))!important;
 overflow:auto;overscroll-behavior:contain;
}
.studio-shell :is(div.fixed[id$="-modal"], div.fixed[role="dialog"], .studio-modal-top-layer>div){
 box-sizing:border-box;
 top:var(--studio-viewport-top, 0px)!important;bottom:auto!important;left:0!important;right:0!important;
 width:100%!important;height:var(--studio-viewport-height, 100dvh)!important;max-height:none!important;
 padding:max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
 align-items:flex-start!important;overflow-y:auto!important;overflow-x:hidden;overscroll-behavior:contain;
}
.studio-shell :is(div.fixed[id$="-modal"], div.fixed[role="dialog"], .studio-modal-top-layer>div)>div.relative{
 min-width:0;max-height:none!important;margin-block:auto;flex-shrink:0;
}
@media(max-width:767px){
 .studio-shell :is(div.fixed[id$="-modal"], div.fixed[role="dialog"], .studio-modal-top-layer>div)>div.relative{padding:0;max-width:100%}
 .studio-shell :is(dialog, div.fixed[id$="-modal"]) :is(h2,h3){overflow-wrap:anywhere;min-width:0}
 .studio-shell :is(dialog, div.fixed[id$="-modal"]) iframe{max-width:100%}
 .studio-shell :is(dialog footer, div.fixed[id$="-modal"] .rounded-b){flex-wrap:wrap;gap:8px}
}

/* Tall mobile dialogs start inside the visible viewport and keep headers in reach. */
@media(max-width:767px){
 .studio-shell dialog:not(.studio-modal-top-layer){
  top:calc(var(--studio-viewport-top,0px) + max(12px,env(safe-area-inset-top,0px)))!important;
  bottom:auto!important;margin-block:0!important;
 }
 .studio-shell :is(div.fixed[id$="-modal"],div.fixed[role="dialog"],.studio-modal-top-layer>div)>div.relative{
  margin-block:0;flex-shrink:0;
 }
 .studio-shell :is(div.fixed[id$="-modal"],div.fixed[role="dialog"],.studio-modal-top-layer>div)>div.relative>div.relative{
  max-height:calc(var(--studio-viewport-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;
 }
 .studio-shell :is(dialog.analytics-delete-scope,dialog.sc-clear-dialog,.pd-preview-dialog)>header,
 .studio-shell :is(div.fixed[id$="-modal"],div.fixed[role="dialog"],.studio-modal-top-layer>div)>div.relative>div.relative>.border-b:first-child{
  position:sticky;top:0;z-index:3;background:var(--studio-surface,#fff);
 }
 .studio-shell :is(dialog,.pd-preview-dialog)>header{flex-shrink:0}
 .studio-shell :is(dialog,.pd-preview-dialog)>header>:is(h2,h3,div){min-width:0}
 .studio-shell :is(dialog,.pd-preview-dialog)>header>button{flex-shrink:0}
}