/* Shared input hierarchy: idea first, compact optional reference, then controls. */
.agent-form.is-generating .studio-intent-help:empty{display:none}
.agent-form.is-generating .generator-workspace{padding-top:24px}
.agent-form.is-generating .generator-input.has-optional-reference{display:flex;flex-direction:column}
.has-optional-reference>.extra-direction-toggle{order:0}
.has-optional-reference>.prompt-content{order:1}
.has-optional-reference>.reference-area{order:2}
.agent-form.is-generating .reference-area{align-items:stretch}
.agent-form.is-generating.requires-image:not(.has-style-library):not(.is-animate) .generator-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.agent-form.is-generating.requires-image:not(.has-style-library):not(.is-animate) .generator-input{padding-right:28px;border-right:1px solid #e0e6d8}
.reference-surface{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:stretch;gap:14px;width:100%;min-width:0}
.reference-area.has-reference .reference-surface{grid-template-columns:1fr}
.agent-form.is-generating .reference-requirement{text-align:left;margin:0 0 10px}
.agent-form.is-generating .reference-note{text-align:left;margin-top:8px}
.reference-samples{display:flex;flex-direction:column;gap:9px;justify-content:center}
.reference-samples>span{font-size:10px;color:#849078;line-height:1.3;text-align:center}
.reference-sample-choices{display:flex;flex-direction:column;gap:8px}
.reference-sample{display:block;position:relative;padding:3px!important;border:1px solid #dce5d2!important;border-radius:12px;background:#fffef8;cursor:pointer;transition:border-color .15s,transform .15s;line-height:0}
.reference-sample img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:8px}
.reference-sample:hover{border-color:#75936a!important;transform:translateY(-2px)}
.reference-sample:focus-visible{outline:2px solid #356449;outline-offset:3px}
.reference-sample:disabled{opacity:.55;cursor:wait}
.reference-sample.loading:after{content:'';position:absolute;inset:calc(50% - 9px);border:2px solid #fff;border-top-color:#356449;border-radius:50%;animation:sample-spin .7s linear infinite}
@keyframes sample-spin{to{transform:rotate(360deg)}}
.agent-form.is-generating .optional-reference .reference-surface{display:flex;align-items:center;gap:18px}
.agent-form.is-generating .optional-reference .reference-drop{display:flex;flex:none;justify-content:center;min-height:40px!important;padding:8px 13px;border:1px dashed #c7d4b9;border-radius:10px;background:#f8faf3;color:#58734d;font-size:11px}
.optional-reference .reference-samples{flex-direction:row;align-items:center;gap:10px;margin-left:auto}
.optional-reference .reference-sample-choices{flex-direction:row;gap:6px}
.optional-reference .reference-sample{width:42px;flex:none;padding:2px!important;border-radius:9px}
.optional-reference .reference-sample img{border-radius:6px}
.agent-form.is-generating .optional-reference.has-reference .reference-preview{display:flex;flex-direction:row;gap:12px;align-items:center;width:100%;padding:8px 42px 8px 8px;min-height:60px;text-align:left}
.agent-form.is-generating .optional-reference.has-reference .reference-preview img{width:48px;height:48px;flex:none;object-fit:cover}
.agent-form.is-generating .optional-reference.has-reference .reference-preview strong{flex:1;max-width:none;min-width:0}
.agent-form.is-generating .optional-reference.has-reference #remove-reference{top:50%;transform:translateY(-50%)}
.agent-form.is-generating .generator-input textarea{height:112px;min-height:112px}
.agent-form.is-generating .animation-presets{gap:8px;margin-bottom:18px}
.agent-form.is-generating .animation-preset{min-height:49px;padding:11px 12px}
.agent-form.is-generating .animation-preset small,.agent-form.is-generating .character-output-grid small{display:none}
.agent-form.is-generating .animation-preset:first-child{grid-column:auto}
.agent-form.is-generating .character-output-group{margin-bottom:18px}
.agent-form.is-generating .character-output-grid button{padding:12px 14px;display:flex;align-items:center;gap:9px}
.character-output-icon{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.agent-form.is-generating .generator-extra>summary{font-size:11px}
.agent-mode-label{font-size:13px;font-weight:600;color:#356449;margin-right:auto}
.agent-form.unified-agent .creation-intent>.mode-picker{display:none}
.creative-agent .creative-agent-heading{display:none}
@media(max-width:700px){.reference-surface{grid-template-columns:minmax(0,1fr) 62px;gap:10px}.optional-reference .reference-surface{flex-wrap:wrap}.optional-reference .reference-samples>span{font-size:9px}.agent-form.is-generating .character-output-grid button{padding:10px}.agent-form.is-generating .optional-reference.has-reference .reference-preview strong{display:none}.agent-form.is-generating .optional-reference.has-reference .replace-reference{margin-right:auto}.reference-sample:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.reference-sample{transition:none}.reference-sample.loading:after{animation:none}}
@media(max-width:800px){.agent-form.is-generating.requires-image:not(.has-style-library):not(.is-animate) .generator-workspace{grid-template-columns:1fr;gap:18px}.agent-form.is-generating.requires-image:not(.has-style-library):not(.is-animate) .generator-input{padding-right:0;border-right:0}}

/* First-screen hierarchy: title, input and action before supporting content. */
body.tool-page .studio-hero{padding-top:16px;padding-bottom:28px}
body.tool-page .studio-intro{margin-bottom:18px}
body.tool-page .studio-intro h1{font-size:clamp(28px,3vw,40px);line-height:1.18;margin-top:0;margin-bottom:10px}
body.tool-page .studio-intro>p:last-child{font-size:14px;line-height:1.5;margin-top:8px}
body.tool-page .page-breadcrumb{margin-bottom:12px}
body.tool-page.authenticated-workspace .workspace-banner{min-height:0;padding:16px 22px;margin-bottom:16px;grid-template-columns:minmax(0,1fr) 160px;border-radius:16px}
body.tool-page .workspace-banner h1{font-size:28px;max-width:none}
body.tool-page .workspace-banner p{margin-top:6px;font-size:12px;max-width:none}
body.tool-page .workspace-frame-grid{grid-template-rows:30px 30px;gap:6px;transform:none}
body.tool-page .generator-heading{display:none}
body.tool-page .agent-form.is-generating .generator-workspace{padding:18px 22px;gap:20px}
body.tool-page .agent-form.is-generating .generator-input textarea{height:128px;min-height:128px;font-size:16px}
body.tool-page .agent-form.is-generating .generator-controls{padding:14px;gap:12px}
body.tool-page .agent-form.is-generating .composer-toolbar{padding:12px 22px!important}
body.tool-page .creative-agent{padding:18px 22px}
body.tool-page .creative-agent>textarea{min-height:128px;height:128px;font-size:16px}
body.tool-page .creative-agent-controls{padding:12px;gap:10px}
body.tool-page .inspiration-row{padding-top:12px;margin-top:0}
@media(max-width:700px){
 body.tool-page .studio-hero,body.tool-page.authenticated-workspace .studio-hero{padding:12px 14px 24px}
 body.tool-page .studio-intro h1{font-size:28px}
 body.tool-page .studio-intro>p:last-child{line-height:1.45}
 body.tool-page.authenticated-workspace .workspace-banner{padding:12px 15px;grid-template-columns:1fr;min-height:0;margin-bottom:12px}
 body.tool-page .workspace-banner h1{font-size:24px}
 body.tool-page .workspace-banner p{margin-top:4px}
 body.tool-page .workspace-frame-grid{display:none}
 body.tool-page .agent-form.is-generating .generator-workspace{padding:14px;gap:14px}
 body.tool-page .agent-form.is-generating .generator-input textarea{height:104px;min-height:104px}
 body.tool-page .agent-form.is-generating .generator-controls{padding:12px}
 body.tool-page .agent-form.is-generating .composer-toolbar{padding:12px 14px!important}
 body.tool-page .creative-agent{padding:14px}
 body.tool-page .creative-agent>textarea{height:112px;min-height:112px}
 body.tool-page .creation-workspace{gap:10px}
}

/* Bound visual pickers so examples do not push the primary action below the fold. */
body.tool-page .agent-form.is-generating .creation-intent{padding:12px 18px!important}
body.tool-page .agent-form.is-generating .style-grid{max-height:140px;margin-bottom:10px;grid-template-columns:repeat(5,minmax(0,1fr))}
body.tool-page .agent-form.is-generating .reference-drop{min-height:130px}
body.tool-page .agent-form.is-generating .reference-preview img{height:130px}
body.tool-page .agent-form.is-generating .style-library-heading{margin-bottom:8px}
body.tool-page .agent-form.is-generating .style-filters{margin-bottom:8px}
body.tool-page .agent-form.is-generating .generator-extra:not([open])>:not(summary){display:none}
body.tool-page .agent-form.is-generating .generator-controls{align-content:start}
body.tool-page .agent-form.is-generating .character-output-group{margin-bottom:10px}
body.tool-page .agent-form.is-generating .character-output-grid button{padding:9px 10px}
@media(max-width:700px){body.tool-page .agent-form.is-generating .style-grid{max-height:100px;grid-template-columns:repeat(5,minmax(0,1fr))}body.tool-page .agent-form.is-generating .reference-drop{min-height:96px}body.tool-page .agent-form.is-generating .reference-preview img{height:96px}body.tool-page .agent-form.is-generating .generator-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}body.tool-page .agent-form.is-generating .generator-extra{margin-top:7px}body.tool-page .agent-form.is-generating .generator-input{padding-right:0;border:0}}

body.tool-page.authenticated-workspace .workspace-banner{padding:12px 18px}
body.tool-page .agent-form.is-generating .generator-controls{gap:6px;padding:10px}
body.tool-page .agent-form.is-generating .style-grid{max-height:100px}
body.tool-page .agent-form.is-generating .style-filters button{padding:4px 9px}
body.tool-page .agent-form.is-generating .animation-presets{gap:6px;margin-bottom:10px}
body.tool-page .agent-form.is-generating .animation-preset{min-height:38px;padding:8px}
body.tool-page .agent-form.is-generating .animation-controls-title{margin-bottom:8px}
body.tool-page .agent-form.is-generating .composer-toolbar{position:sticky;bottom:8px;z-index:12;background:#fffef9;border:1px solid #e0e6d8;border-radius:12px;margin:0 12px 10px;padding:9px 14px!important;box-shadow:0 4px 14px #2947350c}
@media(max-width:700px){body.tool-page .agent-form.is-generating .generator-workspace{padding:12px;gap:10px}body.tool-page .agent-form.is-generating .generator-controls{gap:5px}body.tool-page .agent-form.is-generating .composer-toolbar{bottom:8px}body.tool-page .agent-form.is-generating .reference-note{margin-top:5px}}

/* Make choices readable on narrow workspaces without horizontal overflow. */
.generator-controls,.generator-fields,.generator-options{min-width:0}.character-output-grid{min-width:0}.character-output-grid button{min-width:0;white-space:normal;overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:1400px){.agent-form .character-output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.agent-form .character-output-grid button{width:100%}}
@media(max-width:700px){.agent-form .style-grid,body.tool-page .agent-form.is-generating .style-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:360px;gap:10px}.style-grid button{min-width:0}.style-grid button span{font-size:12px;line-height:1.35}.agent-form .character-output-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.agent-form .generator-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.agent-form .generator-fields>*{min-width:0}.agent-form .composer-footer{position:sticky;bottom:0;background:#fffef8f5;backdrop-filter:blur(10px);z-index:4;padding:12px 0}.agent-form .composer-footer button{min-height:46px}}

.input-guidance{margin:12px 0;padding-left:18px;color:#617561;font-size:13px;line-height:1.65}.input-guidance li+li{margin-top:4px}

.source-comparison{margin:12px 0;color:#365e47;font-size:14px}.source-comparison summary{cursor:pointer;padding:8px 0}.source-comparison img{display:block;max-width:100%;max-height:400px;object-fit:contain;margin:12px auto;border-radius:12px}