/* Shared editor chrome and typography; only design-specific layout lives here. */
#aiDesignEditor { display:flex; flex:1; flex-direction:column; min-height:0; overflow:clip; container:design-editor / size; }
#imageStudio:has(#aiDesignEditor) { overflow:clip; }
.design-workspace,.design-main-column,.design-preview-column { display:flex; flex:1; min-width:0; min-height:0; overflow:clip; }
.design-main-column,.design-preview-column { flex-direction:column; }
#imageStudio .design-stage { display:flex; flex:1; min-height:0; overflow:clip; }
#designPreviewArea { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:16px 24px; overflow:clip; }
#designEmpty { width:100%; max-height:100%; overflow:auto; overscroll-behavior:contain; }
#imageStudio #aiDesignEditor #studioEmpty { position:relative; inset:auto; min-height:0; padding:12px; }
#imageStudio #aiDesignEditor button:focus-visible { outline:none; background-color:var(--menu-hover); }
#imageStudio #designExamples { display:flex; justify-content:safe center; gap:12px; margin:12px auto 0; max-width:100%; overflow-x:auto; overscroll-behavior:contain; }
#imageStudio #designExamples button { flex:0 0 120px; width:120px; color:var(--muted); scroll-snap-align:start; }
#imageStudio #designExamples .design-example-art { height:150px; border:1px solid #eee; border-radius:5px; }
#imageStudio #studioWelcome .design-welcome-instruction { line-height:1.4; }
#designCanvasWrap { position:relative; flex:none; box-shadow:0 6px 24px #0000000d; }
#designCanvasWrap>#designBox { margin:0; position:absolute; left:0; top:0; }
#imageStudio #designStatus { min-height:24px; max-height:72px; overflow:auto; overscroll-behavior:contain; color:var(--muted); font-size:15px; line-height:24px; padding:0 8px; }
#imageStudio .design-share { width:auto; min-width:44px; padding:0 10px; gap:6px; }
#imageStudio #designMenu[data-kind=utility] { width:192px; }
#imageStudio #designMenu[data-kind=editors] { width:280px; max-height:calc(var(--viewport) - 64px); overflow:auto; overscroll-behavior:contain; }
#imageStudio #designExploration[data-mode=variations] { position:static; inset:auto; margin:0; padding:0; width:auto; height:100%; align-self:stretch; max-width:none; max-height:none; border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; flex:0 0 280px; min-width:0; min-height:0; overflow:clip; border-right:1px solid #eee; background:#fff; }
#imageStudio .design-panel-nav { display:flex; flex:none; align-items:center; padding:0 8px; min-height:48px; }
#imageStudio #designPanelHeading { display:flex; align-items:center; gap:8px; flex:1; min-width:0; padding:0 4px; font-size:16px; color:var(--muted); }
#imageStudio #designPanelHeading svg { flex:none; width:18px; height:18px; }
#imageStudio :is(#designPanelBack,#designCloseLooks) { width:44px; min-width:44px; height:48px; }
#designPanelBack svg { transform:rotate(180deg); }
#imageStudio #designPanelContent { display:flex; flex-direction:column; flex:1; min-height:0; padding:0 10px 10px; overflow:clip; }
#imageStudio :is(#designVariationsPanel,#designImagesPanel) { display:flex; flex-direction:column; flex:1; min-height:0; }
#imageStudio .design-panel-scroll { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
#imageStudio .design-panel-note { color:var(--muted); font-size:15px; padding:4px 2px 10px; }
#imageStudio #designExploration button:hover:not(#designMore,#designImageCreate,.studio-primary) { background-color:var(--menu-hover); }
#imageStudio .design-setting-sample { margin-left:auto; max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
#imageStudio #designExploration .studio-option { min-height:44px; font-size:15px; }
#imageStudio .design-direction-custom { display:flex; flex-direction:column; gap:8px; padding:0; }
#imageStudio #designCustomDirection { width:100%; min-height:48px; height:66px; padding:8px; border:1px solid #e5e3e7; border-radius:6px; font:16px/24px 'Source Sans Pro',sans-serif; resize:none; }
#imageStudio .design-direction-custom .studio-primary { align-self:flex-end; min-height:44px; padding:8px 16px; border-radius:6px; }
#imageStudio #designBackgroundDirection svg { transform:rotate(-90deg); }
#imageStudio .design-palettes,#imageStudio .design-fonts { display:grid; gap:0; padding:0; }
#imageStudio :is(.design-palette,.design-font,.design-look) { position:relative; border-radius:5px; }
#imageStudio .design-look[aria-pressed=true] { background:var(--menu-hover); color:#403c43; }
#imageStudio .design-choice-check { display:block; visibility:hidden; flex:none; }
#imageStudio [aria-pressed=true]>.design-choice-check,#imageStudio [aria-pressed=true]>.design-choice-title>.design-choice-check { visibility:visible; }
#imageStudio .design-choice-check svg { width:16px; height:16px; }
#imageStudio .studio-option>.design-palette-colors { display:flex; gap:0; width:54px; height:24px; border:1px solid #ddd; border-radius:4px; overflow:hidden; flex:none; }
.design-palette-colors i { flex:1; height:100%; }
.design-palette-colors i:first-child { flex:2; }
.design-palette-label { flex:1; }
#imageStudio .design-custom-color { padding:0 10px; cursor:pointer; }
#designCustomColor { width:44px; height:44px; padding:0; border:0; background:none; flex:none; }
#imageStudio .design-font-sample { font-size:16px; line-height:1.4; }
#imageStudio .design-font-body { margin-left:auto; color:var(--muted); font-size:16px; line-height:1.4; }
#imageStudio .design-looks { display:flex; flex-direction:column; gap:8px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:2px; }
#imageStudio .design-look { flex:none; width:100%; padding:8px; }
#imageStudio .design-look-art { position:relative; display:block; height:168px; overflow:hidden; pointer-events:none; }
#imageStudio .design-look-art>.ai-design-canvas { position:absolute; }
#imageStudio .design-choice-title { display:flex; align-items:center; justify-content:space-between; min-height:30px; gap:6px; padding-top:4px; }
#imageStudio .design-look-label { display:block; font-size:15px; text-align:left; }
#imageStudio .design-look-unavailable { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:15px; padding:8px; }
#imageStudio #designExploreStatus { font-size:15px; color:var(--muted); padding:6px 0; max-height:60px; overflow:auto; }
#imageStudio :is(#designMore,#designImageCreate) { display:flex; align-items:center; justify-content:center; flex:none; gap:8px; min-height:44px; margin-top:8px; padding:8px; border-radius:5px; background:var(--accent); color:white; font-size:15px; }
.design-more-price { display:flex; align-items:center; gap:4px; }
.design-more-price img { width:14px; height:14px; transform:translateY(1px); }
#aiDesignEditor .studio-composer-row { justify-content:space-between; container:design-composer / inline-size; }
#imageStudio #designComposerChoices { flex:1; gap:4px; }
#imageStudio .design-composer-control { display:flex; align-items:center; justify-content:center; flex:none; width:auto; min-width:44px; min-height:44px; padding:0 6px; }
#imageStudio .design-control-value { max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#imageStudio .design-composer-control[hidden], #imageStudio #designSettings[hidden] { display:none; }
#imageStudio #designSettings { display:flex; align-items:center; justify-content:center; flex:none; width:44px; min-height:44px; padding:0 8px; }
#imageStudio #designCreate { position:relative; }
#imageStudio #designCreate::before { content:""; position:absolute; inset:-6px; }
#imageStudio #designControls { height:46px; margin-bottom:6px; }
#imageStudio #designToolbar button { font-size:14px; min-height:44px; }
#imageStudio #designToolbar .ws-toolbar-handle { min-width:32px; }
#imageStudio #designToolbar button:focus-visible { background:rgba(255,255,255,.16); outline:none; }
#imageStudio #designImageForm { flex:none; padding-top:8px; }
#imageStudio #designImagePrompt { display:block; width:100%; height:56px; max-height:96px; min-height:48px; padding:4px 2px; resize:none; border:0; outline:none; font:16px/24px 'Source Sans Pro',sans-serif; overflow:auto; background:white; }
#imageStudio #designImageCreate { width:100%; margin-top:4px; }
#imageStudio #designImageProgress { width:18px; height:18px; }
#imageStudio #designImageStatus { flex:none; font-size:15px; color:var(--muted); max-height:48px; overflow:auto; overscroll-behavior:contain; padding:4px 2px; }
#imageStudio .design-asset-art { background-color:#fafafa; background-image:conic-gradient(#eee 25%,transparent 0 50%,#eee 0 75%,transparent 0); background-size:16px 16px; overflow:hidden; }
#imageStudio .design-asset-art img { display:block; width:100%; height:100%; object-fit:contain; }
#imageStudio #designImageChoices .design-asset-art { height:120px; }
#imageStudio .design-image-targets { display:flex; flex:none; gap:8px; padding:4px 2px 8px; overflow:auto; overscroll-behavior:contain; }
#imageStudio .design-image-targets button { flex:0 0 48px; width:48px; height:48px; border:2px solid transparent; border-radius:5px; padding:2px; }
#imageStudio .design-image-targets [aria-pressed=true] { border-color:#403c43; }
#aiDesignEditor #studioPrompt { max-height:max(24px,min(168px,calc(var(--viewport) - 310px))); }
#aiDesignEditor[data-panel-typing=true] :is(#designImageTargets,#designImageChoices) { display:none; }
@media(max-width:760px) {
  #designPreviewArea { padding:12px; }
  #imageStudio .design-share { width:44px; padding:0; }
  #imageStudio .design-share-label { display:none; }
  #imageStudio #designExamples { gap:8px; }
  #imageStudio #designExamples button { flex-basis:82px; width:82px; }
  #imageStudio #designExamples .design-example-art { height:104px; }
  #imageStudio .design-look { padding:6px; }
}
@media(max-width:380px) { #imageStudio #aiDesignEditor #studioEmpty { padding-left:0; padding-right:0; } #imageStudio #designToolbar button:not(.ws-toolbar-handle) { width:44px; padding:0; } #imageStudio #designToolbar button>span:last-child { display:none; } }
@container design-editor (max-height:600px) {
  #imageStudio #designComposerWrap { padding:4px 12px 6px; }
  #imageStudio #designControls { height:44px; margin-bottom:0; }
  #imageStudio #designForm { padding:0; }
  #aiDesignEditor .studio-composer-row { margin-top:4px; }
  #imageStudio #designStatus { min-height:0; max-height:24px; }
  #imageStudio #designStatus:empty { display:none; }
  #designPreviewArea { padding:4px 12px; }
}
@media(max-width:760px),(max-height:500px) {
  #imageStudio #designExploration[data-mode=variations] { position:fixed; inset:auto; width:340px; max-width:calc(100% - 16px); height:auto; margin:0; border:1px solid #ddd; border-radius:11px; padding:12px; box-shadow:0 10px 35px #0000001c; flex:none; }
  #imageStudio #designExploration::backdrop { background:transparent; }
  #imageStudio #designPanelContent { padding:0; }
  #imageStudio #designExploration .design-looks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:8px; }
  #imageStudio #designExploration .design-look-art { height:140px; }
  #imageStudio #designImageChoices .design-look-art { height:84px; }
  #imageStudio #designImageChoices:has(>:only-child) { grid-template-columns:1fr; }
  #imageStudio #designImageForm { padding-top:4px; }
  #imageStudio #designImagePrompt { height:48px; }
}
@media(min-width:500px) and (max-height:500px) {
  #imageStudio #aiDesignEditor #studioWelcome { display:grid; grid-template-columns:minmax(290px,1fr) minmax(0,1fr); align-items:center; column-gap:20px; }
  #imageStudio #aiDesignEditor #studioWelcome .studio-welcome-brand { grid-column:1; }
  #imageStudio #aiDesignEditor #studioWelcome h2,#imageStudio #aiDesignEditor #studioWelcome p { grid-column:1; }
  #imageStudio #aiDesignEditor #designExamples { grid-column:2; grid-row:1/4; margin:0; }
  #imageStudio #designExamples button { flex-basis:96px; width:96px; }
  #imageStudio #designExamples .design-example-art { height:120px; }
}

/* Composer choices open beside their trigger; only Variations reserves canvas space. */
#imageStudio #designExploration[data-mode=composer] { position:fixed; inset:auto; margin:0; padding:12px; width:300px; height:auto; max-width:calc(100% - 16px); border:1px solid #ddd; border-radius:11px; box-shadow:0 10px 35px #0000001c; display:flex; flex-direction:column; overflow:clip; }
#imageStudio #designExploration[data-mode=composer] .design-panel-nav { padding:0; min-height:44px; margin-bottom:8px; }
#imageStudio #designExploration[data-mode=composer] :is(#designPanelBack,#designCloseLooks) { height:44px; }
#imageStudio #designExploration[data-mode=composer] #designPanelHeading { padding:0; }
#imageStudio #designExploration[data-mode=composer] #designPanelContent { padding:0; flex:1 1 auto; }
#imageStudio #designExploration[data-mode=composer] .design-looks { display:flex; }
#imageStudio #designExploration[data-mode=composer] #designImageChoices .design-asset-art { height:100px; }

/* Each panel owns its scroll; opening a sketch or menu never scrolls the shell. */
#imageStudio #designExploration { overscroll-behavior:contain; }
#imageStudio .design-panel-scroll,#imageStudio .design-looks { -webkit-overflow-scrolling:touch; }
#imageStudio.design-sketching #designToolbar { visibility:hidden; }
#imageStudio .sketch-toolbar > button[data-sketch=done], #imageStudio .sketch-toolbar > button[data-sketch=done]:hover { color:#ffb4ab; }
#imageStudio #designForm .design-sketch-reference { min-width:0; }
#imageStudio #designForm .design-sketch-reference [data-reference-edit] { min-width:0; }
#imageStudio .design-text-form { display:flex; flex-direction:column; gap:12px; }
#imageStudio .design-text-form label { display:flex; flex-direction:column; gap:4px; color:var(--muted); }
#imageStudio .design-text-form textarea { width:100%; min-height:66px; padding:8px; border:1px solid #e5e3e7; border-radius:6px; font:16px/24px 'Source Sans Pro',sans-serif; resize:vertical; }
#imageStudio .design-text-form .studio-primary { align-self:flex-end; min-height:44px; padding:8px 16px; border-radius:6px; }
#imageStudio #designBackgroundPanel input[type=color] { width:44px; height:44px; padding:0; border:0; background:none; }
#designCanvasWrap .itemBox { cursor:pointer; }
#imageStudio #designForm [data-reference-edit] { display:flex; align-items:center; gap:8px; }
#imageStudio #designForm [data-reference-edit] canvas { flex:none; max-width:36px; max-height:36px; }
#imageStudio #designForm [data-reference-edit] span { overflow:hidden; text-overflow:ellipsis; }

#imageStudio .design-composer-control svg { width:18px; height:18px; }
#imageStudio .design-composer-control [data-icon=chevron] svg { width:11px; height:11px; }
#imageStudio .design-layout-label { flex:1; text-align:left; }

/* Goal and Style lead the brief; Customize contains the existing editing controls. */
#imageStudio .design-primary-control { display:flex; align-items:center; flex:0 1 auto; gap:5px; min-width:44px; min-height:44px; border-radius:6px; white-space:nowrap; color:var(--muted); font-size:13px; }
#imageStudio .design-primary-control svg { width:18px; height:18px; }
#imageStudio .design-primary-value { max-width:130px; overflow:hidden; text-overflow:ellipsis; color:#38363b; }
#imageStudio .design-primary-control [data-icon=chevron] svg,#imageStudio #designSettings [data-icon=chevron] svg { width:11px; height:11px; }
#imageStudio #designSettings { width:auto; min-width:44px; min-height:44px; margin-left:auto; padding:0; gap:5px; border-radius:6px; white-space:nowrap; color:var(--muted); font-size:13px; }
#imageStudio #designSettings [data-icon=sliders] svg { width:18px; height:18px; }
#imageStudio #designSettings[aria-expanded=true] [data-icon=chevron] svg { transform:rotate(180deg); }
#imageStudio :is(.design-primary-control,#designSettings):hover,#imageStudio .design-primary-control[aria-expanded=true] { background:var(--menu-hover); }
#imageStudio #designCustomizeRow { display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-top:4px; }
#imageStudio #designCustomizeRow > button:first-child { padding-left:0; }
#imageStudio #designSettingsPanel .studio-option > span:first-of-type { flex:1; text-align:left; }
#imageStudio #designSettingsPanel .studio-option > svg:last-child { width:11px; height:11px; transform:rotate(-90deg); }
#imageStudio #designExploration[data-presentation=customize] { width:340px; }
#imageStudio #designExploration[data-presentation=customize]::backdrop { background:#0003; }
#imageStudio #designExploration[data-presentation=customize] .studio-option { font-size:16px; }
@media(max-width:760px) {
  #imageStudio #designComposerChoices { gap:2px; }
  #imageStudio .design-primary-control { padding:3px 6px; font-size:16px; }
  #imageStudio .design-primary-value { max-width:96px; line-height:20px; }
  #imageStudio #designSettings { width:44px; height:44px; padding:0; justify-content:center; }
  #imageStudio #designSettings :is(.design-customize-label,[data-icon=chevron]) { display:none; }
}