/* Scale content once; viewport scroll hosts, canvas pixels and backdrops stay in screen coordinates. */
@media(min-width:901px){
 #view-brand-assets .ba-heading,
 #view-brand-assets.ba-screen-brief .ba-brief,
 #view-brand-assets.ba-screen-brief .ba-results-panel,
 #view-brand-assets.ba-screen-editor .ba-layers > *,
 #view-brand-assets.ba-screen-editor .ba-brush-side > *,
 #view-brand-assets .ba-summary,
 #view-brand-assets .ba-model,
 #view-studio .gs-hero,
 #view-studio [data-account-ribbon],
 #view-studio .gs-flow > .gs-step,
 #view-studio .gs-flow > .gs-production-tools,
 #view-studio .gs-path,
 #view-studio .gs-sidebar .gs-planner > :not(.gs-planner-log-wrap),
 #view-studio .gs-sidebar .gs-planner-messages > *{
  zoom:var(--creative-ui-scale,1);
  width:calc(100% / var(--creative-ui-scale,1));
  box-sizing:border-box;
 }
 /* Block auto sizing accounts for CSS zoom and the flow's scrollbar/padding. */
 #view-studio .gs-flow > .gs-step,
 #view-studio .gs-flow > .gs-production-tools{width:auto;min-width:0;overflow-wrap:anywhere}
 #view-brand-assets .ba-toolbar > *{zoom:var(--creative-ui-scale,1);width:auto;max-width:calc(100% / var(--creative-ui-scale,1))}
 #view-brand-assets .ba-layout{gap:calc(16px * var(--creative-ui-scale,1))}
 #view-brand-assets.ba-screen-editor .ba-layout,
 #view-brand-assets .ba-layers,
 #view-brand-assets .ba-brush-side{gap:calc(12px * var(--creative-ui-scale,1))}
 #view-brand-assets.ba-screen-editor .ba-layers{padding:0}
 #view-brand-assets.ba-screen-editor .ba-layers > .ba-side-section,
 #view-brand-assets.ba-screen-editor .ba-brush-side > .ba-side-section{padding:16px}
 #view-brand-assets.ba-screen-editor .ba-layers .ba-describe textarea{min-height:150px;line-height:1.5;resize:vertical}
 #view-brand-assets.ba-screen-editor .ba-layers .ba-edit-review,
 #view-brand-assets.ba-screen-editor .ba-brush-side .ba-edit-review{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px;align-items:center}
 #view-brand-assets.ba-screen-editor .ba-layers [data-ba="generate-image"],
 #view-brand-assets.ba-screen-editor .ba-brush-side [data-ba="generate-image"]{white-space:nowrap}
 #view-brand-assets.ba-screen-editor .ba-stage{height:clamp(300px,calc(100dvh - var(--shell-header-height,80px) - var(--workspace-bar-height,0px) - 200px * var(--creative-ui-scale,1)),1100px)}
 #view-studio .gs-layout{gap:calc(18px * var(--creative-ui-scale,1))}
 #view-studio .gs-sidebar{gap:calc(16px * var(--creative-ui-scale,1))}
 #view-studio .gs-sidebar .gs-planner{padding:calc(12px * var(--creative-ui-scale,1))}
 #view-studio .gs-flow .gs-product-workspace{max-height:calc(22dvh / var(--creative-ui-scale,1))}

 /* Only dialog interiors scale, so overlays still cover the complete viewport. */
 #view-brand-assets .ba-results-dialog{
  zoom:var(--creative-ui-scale,1);
  width:min(1100px,calc((100vw - 48px) / var(--creative-ui-scale,1)));
  max-height:calc(88dvh / var(--creative-ui-scale,1));
 }
 #view-brand-assets .ba-results-dialog .ba-image-slot img{max-height:calc(55dvh / var(--creative-ui-scale,1))}
 #view-brand-assets .ba-progress-popup{width:min(calc(420px * var(--creative-ui-scale,1)),calc(100vw - 32px))}
 #view-brand-assets .ba-progress-popup > *{zoom:var(--creative-ui-scale,1);width:calc(100% / var(--creative-ui-scale,1));box-sizing:border-box}
 #view-brand-assets .ba-image-loading > div{zoom:var(--creative-ui-scale,1)}
 #view-studio .gs-modal,
 #view-studio .gs-quick-planner{zoom:var(--creative-ui-scale,1);max-height:calc((100dvh - 88px) / var(--creative-ui-scale,1))}
 #view-studio .gs-modal.gs-modal-prompt{height:calc((100dvh - 88px) / var(--creative-ui-scale,1))}
 #view-studio .gs-quick-shell{width:min(calc(1240px * var(--creative-ui-scale,1)),100%);grid-template-columns:minmax(0,calc(360px * var(--creative-ui-scale,1))) minmax(0,1fr);gap:calc(18px * var(--creative-ui-scale,1))}
 #view-studio .gs-quick-shell > *{width:calc(100% / var(--creative-ui-scale,1));box-sizing:border-box}
 #view-studio .gs-quick-planner .gs-planner-messages{max-height:calc(35dvh / var(--creative-ui-scale,1))}
}
@media(min-width:1201px){
 #view-brand-assets.ba-screen-editor .ba-layout{grid-template-columns:calc(390px * var(--creative-ui-scale,1)) minmax(0,1fr) calc(390px * var(--creative-ui-scale,1))}
}
@media(min-width:1350px){
 #view-studio .gs-layout{grid-template-columns:calc(480px * var(--creative-ui-scale,1)) minmax(0,1fr)}
}

/* The generation workspace scrolls down within its frame, never sideways. */
#view-studio .gs-flow{overflow-x:hidden}
#view-studio .gs-step-body{min-width:0}
#view-studio .gs-step-body :is(input,select,textarea,video,img){min-width:0;max-width:100%}