/* Shared by preview and live pages. Prompts scroll; model/submit controls stay put. */
.editor-scroll>.field{margin-bottom:15px}
.editor-scroll>.field:has(#prompt),.editor-scroll>.field:has(.batch-editor){display:flex;flex-direction:column}
.creation-submit-bar.is-single{display:contents}

@media (min-width:900px) and (min-height:800px){
  body:has(.work-layout){height:100dvh;overflow:hidden}
  .shell:has(.work-layout){height:100dvh;display:flex;flex-direction:column;min-height:0}
  .shell:has(.work-layout)>.topbar{flex:none}
  #workspace:has(.work-layout){flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-top:16px;padding-bottom:12px}
  #workspace:has(.work-layout)>.page-heading{flex:none;margin-bottom:12px}
  .work-layout{flex:1;min-height:0;overflow:hidden}
  .work-layout>.editor,.work-layout>.result-panel{height:100%;min-height:0;position:static;overflow:hidden;align-self:stretch;padding:16px}
  .editor>.panel-heading,.editor>.creation-submit-bar,.creation-submit-bar.is-single>.parameter-section,.creation-submit-bar.is-single>.generate-area{flex:none}
  .editor>.panel-heading{margin-bottom:12px}
  .editor-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;outline-offset:-2px}
  .editor-scroll:has(#prompt){display:flex;flex-direction:column}
  .editor-scroll>.compact-reference{margin-bottom:0}
  .editor-scroll:has(#prompt) .field-title{margin-bottom:4px}
  .editor-scroll>.field:has(#prompt){flex:1 0 180px;margin-bottom:8px}
  .editor-scroll:has(#prompt) .text-wrap{min-height:0;flex:1}
  .editor-scroll:has(#prompt) .text-footer{flex:none;padding-top:4px}
  /* Budget each batch row from the real content viewport, not the window. */
  .editor-scroll:has(.batch-editor){container-type:size;scroll-snap-type:y mandatory;scroll-padding-top:48px}
  .editor-scroll>.field:has(.batch-editor)>.field-title{position:sticky;top:0;z-index:6;min-height:48px;margin:0;padding:8px 4px;background:var(--dz-surface);border-bottom:1px solid var(--dz-border)}
  .editor .prompt-row{height:calc(100cqh - 56px);min-height:180px;flex:none;scroll-snap-align:start;scroll-snap-stop:always}
  .editor .prompt-row>.rich-prompt{min-height:0;overflow-y:auto;scrollbar-gutter:stable;overscroll-behavior:auto;flex:1 1 0}
  .editor .prompt-row>.row-top{flex:none}
  .editor .prompt-row .compact-reference-body{max-height:clamp(64px,25cqh,190px)}
  .editor-scroll .batch-hint{min-height:34px;padding:8px 4px;scroll-snap-align:end;scroll-snap-stop:always}
  .editor-scroll textarea#prompt,.editor-scroll #single-rich-prompt{min-height:130px;flex:1;resize:none;overflow:auto}
  .editor .parameter-section{padding-top:10px}
  .editor .parameter-section .advanced[open]{max-height:90px;overflow-y:auto;overscroll-behavior:contain}
  .editor .generate-area{margin-top:10px;padding-top:10px}
  .creation-submit-bar.is-single,.creation-submit-bar.is-batch{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end;border-top:1px solid var(--dz-border);padding-top:8px}
  .creation-submit-bar.is-single .parameter-section,.creation-submit-bar.is-batch .parameter-section,.editor:has([data-param-select=duration]) .creation-submit-bar.is-single .parameter-section,.editor:has([data-param-select=duration]) .creation-submit-bar.is-batch .parameter-section{grid-template-columns:minmax(180px,1.35fr) minmax(0,4fr);gap:8px;border:0;padding:0;margin:0}
  .creation-submit-bar.is-single .parameter-section>.field-title,.creation-submit-bar.is-batch .parameter-section>.field-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .creation-submit-bar.is-single .parameter-grid,.creation-submit-bar.is-batch .parameter-grid{gap:7px}
  .creation-submit-bar.is-single .model-field>span,.creation-submit-bar.is-single .parameter-field>span,.creation-submit-bar.is-batch .model-field>span,.creation-submit-bar.is-batch .parameter-field>span{font-size:10px;margin-bottom:3px}
  .creation-submit-bar.is-single .model-select,.creation-submit-bar.is-single .parameter-field select,.creation-submit-bar.is-single .parameter-grid .stepper,.creation-submit-bar.is-batch .model-select,.creation-submit-bar.is-batch .parameter-field select,.creation-submit-bar.is-batch .parameter-grid .stepper{height:36px;font-size:12px}
  .creation-submit-bar.is-single .model-status,.creation-submit-bar.is-batch .model-status{display:none}
  .creation-submit-bar.is-single .generate-area,.creation-submit-bar.is-batch .generate-area{display:flex;align-items:flex-end;gap:10px;border:0;margin:0;padding:0}
  .creation-submit-bar.is-single .generate-area .cost,.creation-submit-bar.is-batch .generate-area .cost{min-width:220px;gap:0;text-align:right;white-space:nowrap;font-size:11px;line-height:1.45}
  .creation-submit-bar.is-single .generate-area .cost strong,.creation-submit-bar.is-batch .generate-area .cost strong{font-size:12px}
  .creation-submit-bar.is-single .generate-area .primary,.creation-submit-bar.is-batch .generate-area .primary{min-width:184px;height:40px;padding-inline:18px;font-size:13px}
  .creation-submit-bar.is-single .generate-area .save-state,.creation-submit-bar.is-batch .generate-area .save-state{display:none}
  .result-panel>.panel-heading,.result-panel>.filter-row,.result-panel>.batchbar,.result-panel>.result-bottom{flex:none}
  .result-panel>.task-grid{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .result-panel>.request-warning{max-height:90px;overflow-y:auto;flex:none}
  .shell:has(.work-layout)>footer{flex:none;margin-top:0;padding-top:6px;padding-bottom:6px}
}

@media (min-width:900px) and (min-height:800px) and (max-width:1450px){
  .creation-submit-bar.is-single,.creation-submit-bar.is-batch{grid-template-columns:1fr}
  .creation-submit-bar.is-single .generate-area,.creation-submit-bar.is-batch .generate-area{justify-content:flex-end}
}

@media (min-width:900px) and (min-height:800px) and (max-height:900px){
  .editor .creation-tools .import-storyboard{height:40px;min-height:40px;padding:6px 12px}
  .editor .creation-tools .creation-mode-switch{padding:2px}
  .editor .creation-tools .creation-mode-switch button{min-height:34px;padding:5px 12px}
}

/* Keep the estimate to a clear total and one compact calculation line. */
.editor .generate-area .cost.cost-preview{min-width:160px;gap:2px;white-space:normal;line-height:1.4}
.editor .generate-area .cost.cost-preview strong{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;font-weight:500}
.cost-preview .estimate-label{font-size:12px;color:var(--muted);font-weight:400}
.cost-preview .estimate-amount{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent)}
.cost-preview #estimate-count{font-size:12px;color:var(--muted)}