/* v13: presentation only. Queue, editor state and video elements keep their identity. */
body.studio-shell[data-page="create"] { --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; font-family:var(--font); }
body[data-page="create"] :is(button,input,select,textarea,h1,h2,h3,summary,.nd-mention-editor) { font-family:var(--font); letter-spacing:normal; }
body[data-page="create"] .top-context small { display:none; }
body[data-page="create"] .gen-category-bar { height:44px; padding:0 .75rem; gap:.375rem; background:var(--nd-page)!important; }
body[data-page="create"] .gen-category-bar [role=tab] { font-size:.875rem; min-height:32px; padding:.375rem .875rem; border-radius:6px; }
body[data-page="create"] .gen-workbench { display:block; height:calc(100% - 44px); }
body[data-page="create"] .gen-main { display:grid; height:100%; grid-template-columns:minmax(0,1fr) 4.5rem; grid-template-rows:minmax(9rem,1fr) auto; grid-template-areas:'viewer rail' 'composer composer'; gap:.5rem; padding:.5rem; }
body[data-page="create"] .gen-feed { grid-area:viewer; padding:0; overflow:auto; min-height:0; scrollbar-width:thin; }
body[data-page="create"] .gen-selected { border:0; margin:0; padding:0; background:transparent!important; overflow:visible; border-radius:0; }
body[data-page="create"] .gen-selected-head { padding:0 .125rem .75rem; min-height:30px; border:0; gap:.5rem; }
body[data-page="create"] .gen-selected-head h2 { font-size:.8125rem; font-weight:500; margin:0; color:var(--nd-ink); }
body[data-page="create"] .gen-selected-head h2:before { content:''; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:var(--nd-brand); box-shadow:0 0 12px #c9ff4f44; }
body[data-page="create"] .gen-selected-date { font-size:.75rem; color:var(--nd-secondary); }
body[data-page="create"] .gen-selected-content { display:block; }
body[data-page="create"] .gen-result-media { position:relative; padding:.5rem 0 0; border:0; background:transparent!important; }
body[data-page="create"] .gen-context-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.25rem; padding:0 .5rem; margin:0 0 -.625rem; pointer-events:none; }
body[data-page="create"] .gen-context-tags span { border:0!important; background:#c9ff4f!important; color:#142006!important; border-radius:5px; font-size:.6875rem; font-weight:600; line-height:1.2; padding:.375rem .4375rem; box-shadow:0 2px 12px #b6ff352c; }
body[data-page="create"] .gen-player-stage { aspect-ratio:16/10; max-height:none; min-height:9rem; border-radius:10px; border:1px solid var(--nd-border); background:var(--nd-panel)!important; }
body[data-page="create"] .gen-player-stage video { object-fit:contain; }
body[data-page="create"] .gen-result-actions { display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.5rem; }
body[data-page="create"] .gen-result-actions .btn { flex:1 1 0; min-width:0; min-height:44px; padding:.5rem .375rem; border:0; border-radius:6px; font-size:.75rem; }
body[data-page="create"] .gen-context { padding:0; margin-top:.625rem; border-top:1px solid var(--nd-border); }
body[data-page="create"] .gen-context summary { cursor:pointer; padding:.75rem .125rem; font-size:.875rem; color:var(--nd-secondary); }
body[data-page="create"] .gen-context:not([open]) > :not(summary) { display:none; }
body[data-page="create"] .gen-context-info { display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.75rem; color:var(--nd-secondary); margin-bottom:.625rem; }
body[data-page="create"] .gen-context-prompt { font-size:.875rem; line-height:1.6; max-height:10rem; }
body[data-page="create"] .gen-context-buttons { flex-wrap:wrap; margin:.75rem 0; }
body[data-page="create"] .gen-context-buttons .btn { min-height:44px; font-size:.8125rem; }
body[data-page="create"] .gen-context-refs { margin:0 0 .75rem; }
body[data-page="create"] .gen-job-error:empty, body[data-page="create"] #gen-history-status:empty { display:none; }
body[data-page="create"] .gen-job-error { font-size:.8125rem; margin:.75rem 0; }
body[data-page="create"] .gen-empty { min-height:12rem; padding:2rem 1rem; }
body[data-page="create"] .gen-empty h2 { font-size:1.125rem; font-weight:500; }
body[data-page="create"] .gen-empty p { font-size:.875rem; max-width:24rem; }
/* Right rail has its own bounded scroll. Wheel changes the visible row, not selection. */
.gen-history-rail { grid-area:rail; position:relative; min-width:0; min-height:0; display:flex; flex-direction:column; border-radius:10px; background:var(--nd-navigation); padding:.25rem; gap:.375rem; }
.gen-rail-head { flex:none; display:flex; flex-direction:column; gap:.375rem; align-items:center; padding-top:.25rem; }
.gen-rail-head > span:first-child { font-size:.6875rem; color:var(--nd-secondary); white-space:nowrap; }
.gen-rail-head b { font-weight:500; color:var(--nd-ink); }
.gen-rail-tools { display:flex; flex-wrap:wrap; justify-content:center; gap:.25rem; }
.gen-rail-tools :is(button,summary), .gen-rail-gallery { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:6px; background:transparent; color:var(--nd-secondary); cursor:pointer; }
.gen-rail-tools svg,.gen-rail-gallery svg { width:18px; height:18px; }
.gen-rail-search summary { list-style:none; }
.gen-rail-search summary::-webkit-details-marker { display:none; }
.gen-rail-search .gen-search { position:absolute; z-index:12; top:2rem; right:calc(100% + .5rem); width:min(16rem,calc(100vw - 6rem)); border:1px solid var(--nd-border); background:var(--nd-panel); border-radius:10px; padding:.75rem; box-shadow:0 12px 40px #0005; }
.gen-rail-search:not([open]) .gen-search { display:none; }
.gen-rail-search .gen-search span { display:block; font-size:.8125rem; margin-bottom:.5rem; }
.gen-rail-search .gen-search input { width:100%; min-height:44px; font-size:1rem; }
.gen-rail-gallery { flex:none; width:100%; }
body[data-page="create"] .gen-update-mark { font-size:0; height:3px; width:18px; border-radius:2px; background:var(--nd-brand); box-shadow:0 0 8px #c9ff4f44; }
body[data-page="create"] .gen-sheets { display:flex; flex-direction:column; gap:.5rem; flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scroll-snap-type:y mandatory; scrollbar-width:none; padding:2px; }
.gen-sheets::-webkit-scrollbar { display:none; }
body[data-page="create"] .gen-frame { position:relative; flex:none; width:100%; padding:0; border-radius:7px; scroll-snap-align:start; scroll-snap-stop:always; }
body[data-page="create"] .gen-frame-media { aspect-ratio:1; border-radius:7px; border:1px solid var(--nd-border); background:var(--nd-control)!important; }
body[data-page="create"] .gen-frame-media video { object-fit:cover; }
body[data-page="create"] .gen-frame-meta, body[data-page="create"] .gen-frame-prompt { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; }
.gen-frame-order { position:absolute; left:5px; bottom:5px; font-size:.625rem; padding:2px 4px; color:#fff!important; background:#000a; border-radius:3px; font-variant-numeric:tabular-nums; pointer-events:none; }
body[data-page="create"] .gen-frame.active .gen-frame-media { border-color:var(--nd-brand); box-shadow:inset 0 0 0 1px var(--nd-brand),0 0 10px #c9ff4f24; }
.gen-frame[data-state=processing]:after, .gen-frame[data-state=queued]:after { content:''; position:absolute; top:6px; right:6px; width:6px; height:6px; border-radius:50%; background:var(--nd-brand); animation:ndRailPulse 1.8s ease-in-out infinite; }
body[data-page="create"] .gen-no-results { padding:.375rem 0; font-size:.6875rem; text-align:center; overflow-wrap:anywhere; }
/* Compact prompt tools, generous editable area. */
body[data-page="create"] .gen-composer-wrap { grid-area:composer; padding:0; min-height:0; max-height:53dvh; overflow:auto; scrollbar-width:thin; }
body[data-page="create"] .gen-composer-wrap:before { display:none; }
body[data-page="create"] .gen-composer { max-width:none; border-radius:10px; box-shadow:none; padding:.75rem; margin:0; }
.gen-compose-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:.75rem; font-size:.8125rem; font-weight:500; }
.gen-compose-title span:last-child { color:var(--nd-secondary); font-size:.75rem; font-weight:400; }
body[data-page="create"] .nd-composer-grid { display:flex; flex-direction:column; gap:.5rem; }
body[data-page="create"] .nd-composer-tools { display:flex; align-items:center; gap:.375rem; border:0; padding:0; }
body[data-page="create"] .nd-composer-tools-title { display:none; }
body[data-page="create"] .nd-composer-tool-grid { display:flex; flex:none; gap:.25rem; }
body[data-page="create"] .nd-composer-tool { width:44px; min-height:44px; padding:0; font-size:1.125rem; border:0; background:transparent; color:var(--nd-secondary); }
body[data-page="create"] .nd-composer .gen-assistant { margin:0 0 0 auto; width:auto; min-height:44px; padding:0 .5rem; border:0; font-size:.75rem; }
body[data-page="create"] .nd-composer-live:empty { display:none; }
body[data-page="create"] .nd-composer-live { font-size:.75rem; margin:.25rem 0; }
body[data-page="create"] .nd-mention-editor { font-size:1rem; line-height:1.6; min-height:6.5rem; height:6.5rem; max-height:none; padding:.625rem; border-radius:7px; }
body[data-page="create"] .nd-composer-expanded .nd-mention-editor { height:24dvh; }
body[data-page="create"] .gen-prompt-meta { gap:.5rem; margin-top:.5rem; font-size:.6875rem; }
body[data-page="create"] .gen-prompt-meta #upload-hint { font-size:.6875rem; }
body[data-page="create"] .gen-composer-bar { position:static; display:grid; grid-template-columns:44px auto minmax(0,1fr); gap:.375rem; padding:.5rem 0 0; }
body[data-page="create"] :is(.gen-attach,.gen-library-button,.gen-settings-toggle) { min-height:44px; height:44px; min-width:0; padding:0 .625rem; border:0!important; border-radius:6px; font-size:.8125rem; }
body[data-page="create"] .gen-attach { width:44px; padding:0; }
body[data-page="create"] .gen-settings-toggle { justify-content:center; gap:.375rem; margin:0; }
body[data-page="create"] .gen-settings-toggle .gen-model-label { font-size:.8125rem; font-weight:500; }
body[data-page="create"] .gen-settings-toggle .gen-config-summary, body[data-page="create"] .gen-settings-word { display:none; }
body[data-page="create"] .gen-settings-toggle > span[aria-hidden] { display:inline; }
body[data-page="create"] .gen-composer-bar #generate-btn { grid-column:1/-1; width:100%; min-height:44px; margin:0; border-radius:6px; padding:.625rem; font-size:.875rem; box-shadow:0 3px 14px #c9ff4f16; }
body[data-page="create"] .gen-composer-price { padding:.375rem 0; font-size:.875rem; margin:0; }
body[data-page="create"] :is(#status,#availability):empty { display:none; }
body[data-page="create"] #availability { font-size:.75rem; margin:.5rem 0 0; }
body[data-page="create"] .nd-ref-heading { margin-bottom:.5rem; }
body[data-page="create"] .gen-ref-strip .ref { flex-basis:4.5rem; width:4.5rem; height:3.5rem; margin:0 0 .375rem; }
/* Settings no longer occupy a permanent column. */
body[data-page="create"] .gen-settings { position:fixed; right:0; top:0; bottom:0; width:20rem; max-width:calc(100vw - 2rem); z-index:45; visibility:hidden; transform:translateX(100%); transition:transform .22s ease,visibility .22s; }
body[data-page="create"].gen-settings-open .gen-settings { visibility:visible; transform:translateX(0); }
body[data-page="create"] .gen-settings-close { display:grid; width:44px; height:44px; }
body[data-page="create"] .gen-settings-foot .quote strong { font-size:1.5rem; }
body[data-page="create"] .gen-submit-feedback { padding:.625rem .75rem; margin:0 0 .75rem; border-radius:8px; }
body[data-page="create"] .gen-submit-feedback strong { font-size:.875rem; }
body[data-page="create"] .gen-submit-feedback p { font-size:.75rem; margin:.25rem 0; }
@media(min-width:720px) {
 body[data-page="create"] .gen-main { grid-template-columns:minmax(0,1fr) 5.75rem; gap:.75rem; padding:.75rem; }
 body[data-page="create"] .gen-feed { padding:.25rem .25rem 0; container-type:size; }
 body[data-page="create"] .gen-player-stage { width:100%; aspect-ratio:16/9; max-height:max(9rem,calc(100cqh - 10.5rem)); }
 body[data-page="create"] .gen-compose-title { display:none; }
 body[data-page="create"] .nd-composer:has(.nd-ref-heading[hidden]) .nd-mentions>p { display:none; }
 .gen-rail-head > span:first-child { font-size:.8125rem; }
 .gen-rail-tools { flex-wrap:nowrap; gap:0; }
 .gen-rail-tools :is(button,summary) { width:38px; height:36px; }
 body[data-page="create"] .gen-context-tags span { font-size:.75rem; padding:.4375rem .625rem; }
 body[data-page="create"] .gen-result-actions .btn { flex:0 1 auto; min-height:36px; padding:.5rem .875rem; font-size:.8125rem; }
 body[data-page="create"] .gen-composer-bar { grid-template-columns:36px auto auto minmax(10rem,1fr); }
 body[data-page="create"] .gen-composer-bar #generate-btn { grid-column:auto; min-height:36px; height:36px; }
 body[data-page="create"] :is(.gen-attach,.gen-library-button,.gen-settings-toggle) { height:36px; min-height:36px; }
 body[data-page="create"] .gen-attach { width:36px; }
 body[data-page="create"] .nd-composer-tool { width:36px; min-height:32px; }
 body[data-page="create"] .nd-composer .gen-assistant { min-height:32px; }
 body[data-page="create"] .gen-composer-wrap { max-height:48dvh; }
}
/* v14: the result stays above the prompt at every viewport width. */
@media(min-width:1180px) {
 body[data-page="create"] .gen-main { grid-template-columns:minmax(0,1fr) 6rem; grid-template-areas:'viewer rail' 'composer rail'; gap:.75rem; padding:.75rem 1rem; }
 body[data-page="create"] .nd-mention-editor { font-size:.9375rem; }
 body[data-page="create"] .nd-composer-expanded .nd-mention-editor { font-size:1rem; }
}
@media(pointer:coarse) { body[data-page="create"] :is(.gen-attach,.gen-library-button,.gen-settings-toggle,.nd-composer-tool,.gen-assistant,.gen-result-actions .btn), .gen-rail-tools :is(button,summary) { min-height:44px; } }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
 body[data-page="create"] :is(button,a,summary,.gen-attach) { transition:background .16s ease,color .16s ease,box-shadow .2s ease,transform .2s ease; }
 body[data-page="create"] :is(.gen-attach,.gen-library-button,.gen-settings-toggle,.gen-result-actions .btn,.nd-composer-tool):not(:disabled):hover { transform:translateY(-2px); box-shadow:0 5px 14px #0003; }
 body[data-page="create"] #generate-btn:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 4px 22px #c9ff4f38; }
 body[data-page="create"] .gen-frame:hover { transform:scale(.96); }
 .gen-rail-tools :is(button,summary):hover,.gen-rail-gallery:hover { background:var(--nd-control); color:var(--nd-ink); }
 body[data-page="create"] .gen-frame:active { transform:scale(.92); }
}
body[data-page="create"] :is(.gen-frame,.gen-rail-gallery,.gen-rail-tools button,.gen-rail-tools summary):focus-visible { outline:2px solid var(--nd-brand); outline-offset:2px; }
@keyframes ndRailPulse { 50% { opacity:.35; } }
@media(prefers-reduced-motion:reduce) { body[data-page="create"] *,body[data-page="create"] *:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* Keep the small-screen viewer and its actions visible above the composer. */
body[data-page="create"] .nd-composer-tools { flex-wrap:wrap; }
body[data-page="create"] .nd-composer-live { flex:1 0 100%; }
body[data-page="create"] .gen-settings-toggle .gen-model-label { display:inline; }
body[data-page="create"] .gen-settings :is(.field-label,.gen-setting-field>span,.gen-model-card small) { font-size:.8125rem; }
body[data-page="create"] .gen-settings :is(select,.gen-ratios button) { font-size:.875rem; min-height:44px; }
body[data-page="create"] .gen-settings-foot :is(p,small,.quote-balance,.quote-balance b) { font-size:.75rem; }
@media(max-width:719px) {
 body[data-page="create"] .gen-compose-title { display:none; }
 body[data-page="create"] .gen-prompt-meta #upload-hint { display:none; }
 body[data-page="create"] .gen-prompt-meta { justify-content:flex-end; }
 body[data-page="create"] .nd-composer:has(.nd-ref-heading[hidden]) .nd-mentions>p { display:none; }
 body[data-page="create"] .nd-mention-editor { height:6rem; min-height:6rem; }
 body[data-page="create"] .gen-category-bar [role=tab] { min-height:44px; border-radius:0; }
 body[data-page="create"] .gen-settings-toggle .gen-model-label { font-size:.75rem; }
}
@media(pointer:coarse) {
 body[data-page="create"] .gen-composer-bar #generate-btn { min-height:44px; height:44px; }
 body[data-page="create"] .gen-category-bar [role=tab], .gen-rail-tools :is(button,summary) { min-height:44px; min-width:44px; }
}
@media(pointer:coarse) and (min-width:720px) and (max-width:1179px) { body[data-page="create"] .gen-main { grid-template-columns:minmax(0,1fr) 6rem; } }