/* Approved studio presentation, layered over the existing application components.
   The original operations and data model remain in app.js / worker/index.js. */
@font-face { font-family: Instrument; src: url('/fonts/instrument-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Instrument; src: url('/fonts/instrument-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Instrument; src: url('/fonts/instrument-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: Fraunces; src: url('/fonts/fraunces-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Fraunces; src: url('/fonts/fraunces-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Fraunces; src: url('/fonts/fraunces-italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root {
  color-scheme: dark;
  --sans: Instrument, system-ui, sans-serif;
  --bg: #080809; --bg-sunken: #141415; --bg-raise: #1b1b1d; --bg-panel: #252425; --bg-hi: #353133;
  --ink: #f3f1ed; --ink-dim: #d0ceca; --ink-mute: #a9a7a2; --ink-faint: #a9a7a2;
  --line-soft: #302e2f; --line: #3d3938; --line-strong: #77716d;
  --accent: #e0a850; --accent-quiet: #e0a850; --accent-ink: #171311; --brain-commentary: #d4b989;
  --ok: #9fe084; --danger: #ff947f; --radius: 12px; --radius-lg: 14px;
  --glass: rgba(26,23,23,.84); --glow: rgba(139,77,47,.42); --canvas-top: #302725;
}
html[data-theme=mono] { --glow: transparent; --canvas-top: #363636; --glass: rgba(24,24,25,.86); }
html { font-size: 100%; }
body::after { content: none; }
body { background: #080809; }
[hidden] { display: none !important; }
h1,h2,h3 { font-weight: 400; letter-spacing: -.025em; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: fixed; top: -80px; left: 90px; z-index: 250; padding: 12px; background: var(--accent); color: var(--accent-ink); }
.skip-link:focus { top: 12px; }
.btn,.ghost,.btn-text { min-height: 38px; border-radius: 8px; font-size: .875rem; padding: .45rem .8rem; }
.btn:hover { transform: none; }
.btn:disabled,.ghost:disabled { opacity: .6; cursor: default; }
.btn.small,.ghost.small { min-height: 34px; font-size: .875rem; padding: .3rem .55rem; }
.btn-text { color: var(--ink-dim); }
.ghost { border-color: var(--line-strong); }
.faint,.model-chip,.scene-num,.cap,.attach-label,.receipt summary,.receipt div { font-size: .75rem; line-height: 1.5; }
.model-chip { font-weight: 400; }
.muted { color: var(--ink-dim); }
input[type=text],input[type=password],textarea,select { font-size: .875rem; border-color: var(--line-strong); border-radius: 8px; }
input,select { min-height: 40px; }
textarea { line-height: 1.6; }
input::placeholder,textarea::placeholder { color: var(--ink-mute); opacity: 1; }
option,optgroup { background: #202022; color: var(--ink); }
label { font-size: .875rem; }

/* Global contour and project-local navigation. */
.studio-shell { display: grid; grid-template-columns: 72px minmax(0,1fr); height: 100dvh; min-height: 560px; }
.global-rail { display: flex; flex-direction: column; align-items: center; padding: 22px 6px 16px; gap: 12px; background: #080809; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 40px; margin-bottom: 28px; color: var(--accent); }
.brand-mark .kf-beats { width: 34px; height: 34px; }
.kf-beats rect { animation: none; }
.think-row .kf-beats rect { animation: kfripple 1.3s ease-in-out infinite; }
.rail-link { width: 60px; min-height: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; color: var(--ink-mute); background: none; border: 0; border-radius: 10px; font: .75rem var(--sans); cursor: pointer; }
.rail-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rail-link:hover,.rail-link.current { background: #242324; color: var(--ink); text-decoration: none; }
.rail-spacer { flex: 1; }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #625d57; background: #252321; color: var(--ink); font-size: .75rem; }
.studio-frame { margin: 10px 12px 12px 0; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #59514a70; border-radius: 18px; display: flex; flex-direction: column; background: radial-gradient(ellipse 70% 47% at 72% -7%,var(--glow),transparent 90%),linear-gradient(170deg,var(--canvas-top),#211e1e 42%,#141415 75%); box-shadow: inset 0 1px 0 #ffffff0c,0 20px 60px #0004; }
html[data-theme=mono] .studio-frame { background: linear-gradient(160deg,#363636,#242424 40%,#141415 83%); }
.masthead { display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 0 22px; border-bottom: 1px solid #ffffff0b; background: #10101135; flex-shrink: 0; }
.masthead .crumb { flex: 1; min-width: 0; font-size: .875rem; color: var(--ink-dim); overflow-wrap: anywhere; }
.crumb a { color: var(--ink-dim); }
.crumb a:hover { color: var(--accent); }
.masthead .who { font-size: .75rem; color: var(--ink-mute); }
.studio-frame>.tabs { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 22px; margin: 0; flex-shrink: 0; border-bottom: 1px solid #ffffff0b; background: #15141426; overflow-x: auto; }
.tabs .tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 11px; margin: 0; font-size: .875rem; color: var(--ink-dim); white-space: nowrap; }
.tabs .tab:hover { background: #ffffff06; text-decoration: none; }
.tabs .tab.active { color: var(--ink); }
.nav-divider { height: 16px; min-width: 1px; background: #625b535f; margin: 0 12px; }
.studio-frame>.wrap { width: 100%; max-width: none; margin: 0; padding: 30px clamp(20px,4vw,64px) 48px; overflow-y: auto; min-height: 0; flex: 1; scrollbar-gutter: stable; }
.wrap>.page-head,.wrap>#tabBody,.wrap>.project-grid,.wrap>.project-brand-row { max-width: 1240px; margin-inline: auto; }
.page-head { align-items: flex-start; gap: 18px; margin-bottom: 24px; }
.page-head h1 { font-size: 2rem; margin: 5px 0 8px; }
.page-head p { font-size: .875rem; line-height: 1.6; margin: 0; }
.page-head>button { margin-top: 24px; }
.page-head>div:last-child { flex-wrap: wrap; }
.panel,.card,.skill-row { background: var(--glass); border-color: #55504b70; }
.panel-head { padding: 14px 16px; border-color: #ffffff0b; }
.panel-head h2 { font-size: 1.35rem; }
.panel-body { padding: 14px 16px; }

/* Projects: one actual select, concentric corners and an even inset. */
.project-brand-row { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.project-brand-row img { width: 144px; }
.project-brand-row .faint { border-left: 1px solid #6c6256; padding-left: 18px; }
.project-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.project-card { display: flex; flex-direction: column; padding: 12px; border-radius: 20px; overflow: hidden; color: var(--ink); transition: border-color .18s,transform .18s; }
.project-card:hover { background: var(--glass); border-color: #b29371; transform: translateY(-2px); text-decoration: none; }
.project-cover { aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; min-width: 0; background: #101011; display: grid; }
.project-cover>img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.project-cover>img.fit-contain { object-fit: contain; padding: 14%; box-sizing: border-box; }
.cover-edit { display: flex; gap: 14px; align-items: flex-start; }
.cover-preview { flex: none; width: 200px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #101011; border: 1px solid var(--line); display: grid; place-items: center; }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-preview img.fit-contain { object-fit: contain; padding: 14%; box-sizing: border-box; }
.cover-preview .faint { text-align: center; padding: 10px; font-size: .75rem; }
.cover-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.cover-fit { margin-top: 2px; }
.project-empty { display: grid; align-content: center; justify-items: center; gap: 8px; color: var(--ink-dim); }
.project-empty>span { font: italic 1.35rem var(--serif); }
.project-empty small { font: .75rem var(--sans); color: var(--ink-mute); }
.project-info { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 12px 8px 8px; }
.project-info h2 { font-size: 1.45rem; line-height: 1.2; }
.project-info p { font-size: .875rem; margin: 5px 0 0; }
.project-counts { display: flex; gap: 14px; font-size: .875rem; color: var(--ink-dim); }
.project-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #ffffff0c; margin-top: auto; padding-top: 12px; font-size: .75rem; color: var(--ink-mute); }
.scene-card .body h3 { font-size: 1.25rem; }
.scene-desc { font-size: .875rem; line-height: 1.6; }
.scene-thumb { background: #101011; }
.cap.st-draft,.cap.st-review { color: var(--ink-dim); background: #242324; border-color: var(--line-strong); }
.cap.st-locked { color: var(--ok); background: #9fe08409; border-color: #9fe08460; }
.status-cycle { min-height: 32px; }
.asset-card .asset-desc { font: .875rem/1.6 var(--sans); }
.asset-card .asset-refline { margin: 10px 0 0; font: .875rem/1.5 var(--sans); color: var(--ink-dim); }
.asset-card .asset-thumbs img { height: 100px; max-width: 100%; object-fit: contain; background: #101011; }

/* Full-height working surface; all existing controls stay attached to their objects. */
.studio-frame>.wrap.wrap-wide { padding: 22px; overflow: hidden; display: flex; }
.scene-layout { display: grid; grid-template-columns: minmax(0,1fr) 25.5rem; gap: 22px; align-items: stretch; flex: 1; min-width: 0; min-height: 0; }
.work-scroll { min-width: 0; min-height: 0; overflow-y: auto; padding-right: 6px; scrollbar-gutter: stable; }
.work-scroll,.chat-scroll,.wrap { scrollbar-width: thin; scrollbar-color: #73696088 transparent; }
.work-scroll>.page-head { margin: 0 0 18px; }
.work-scroll>.page-head h1 { font-size: 2rem; }
.canvas-context { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(220px,1fr); gap: 14px; margin-bottom: 24px; align-items: stretch; }
.canvas-panel { min-width: 0; border: 1px solid #504a4470; border-radius: 12px; background: #101011; overflow: hidden; }
.select-strip { margin: 0; gap: 8px; }
.select-slot,.select-slot.has-img { flex: 1; min-width: 0; min-height: 228px; aspect-ratio: auto; border: 0; border-radius: 0; background-color: #101011; }
.select-slot { font: italic 1.3rem var(--serif); letter-spacing: -.02em; text-transform: none; }
.select-slot.has-img img { width: 100%; height: 228px; max-height: none; object-fit: contain; background: #101011; }
.select-slot .tag { font: .75rem var(--mono); }
.frame-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin: 0; padding: 7px; border-top: 1px solid var(--line-soft); }
.frame-actions .btn-text { min-height: 32px; font-size: .75rem; padding: .3rem .45rem; }
.frame-remove { width: 30px; height: 30px; font-size: .75rem; }
.canvas-context .context-panel { margin: 0; min-width: 0; }
.context-panel .panel-head { padding: 14px 14px 10px; border: 0; }
.context-panel .panel-head h2 { font: 500 .875rem var(--sans); letter-spacing: 0; }
.context-panel .panel-body { padding: 0 14px 12px; }
.refs summary { font: .75rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.scene-refs .refs summary { padding-top: 0; }
.scene-assets { gap: 8px; padding-top: 12px; }
.context-assets-label { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.ref-inspect { padding: 0; border: 0; background: #101011; cursor: zoom-in; border-radius: 5px; }
/* Handle fields: the wrapper is the box, the @ sits inside it, the input is borderless — so the box aligns with sibling fields. */
.head-actions { display: flex; gap: 10px; align-items: center; }
.handle-edit { display: inline-flex; align-items: center; gap: 0; padding: 0 0 0 .5rem; min-height: 32px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg-raise); font: .75rem var(--mono); color: var(--ink-mute); margin-left: 6px; vertical-align: middle; }
.handle-edit:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--ring); }
.handle-edit > input, .handle-edit > input:focus { width: 7.5em; min-height: 30px; padding: .1rem .45rem .1rem .15rem; font: .75rem var(--mono); color: var(--ink); border: 0; border-radius: 0 8px 8px 0; background: transparent; box-shadow: none; outline: none; }
.ref-thumb { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ref-thumb .handle-edit { margin-left: 0; min-height: 28px; }
.ref-thumb .handle-edit > input { width: 6.5em; min-height: 26px; }
.video-fields .handle-edit { width: 100%; margin-left: 0; }
.video-fields .handle-edit > input { flex: 1; width: auto; }
.video-fields select { border-radius: 8px; min-height: 32px; }
/* Checkboxes and radios are not text fields: no minimum height, native size. */
input[type=checkbox], input[type=radio] { min-height: 0; width: 1rem; height: 1rem; margin: 0; flex: none; }
.host-row { justify-content: space-between; }
.host-row .host-name { flex: 1; }
.host-row select { width: 11em; font-size: .8125rem; padding: .25rem .5rem; }
.host-hint { margin-left: 6px; white-space: nowrap; }
.video-list { display: grid; gap: 6px; }
.video-ref { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #ffffff0a; }
.video-poster { position: relative; flex: none; width: 96px; height: 54px; border: 0; padding: 0; background: #101011; border-radius: 6px; overflow: hidden; cursor: pointer; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-poster::after { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; text-shadow: 0 1px 4px #000; }
.video-dur { position: absolute; right: 4px; bottom: 3px; font: .6875rem var(--mono); color: var(--ink); background: #000a; padding: 0 4px; border-radius: 3px; }
.video-fields { flex: 1; min-width: 0; display: grid; gap: 6px; }
.video-fields select, .video-fields input { font-size: .8125rem; padding: .3rem .5rem; min-height: 32px; }
.ref-add-video { width: auto; padding: 0 12px; font-size: .8125rem; }
.lightbox video { max-width: 92vw; max-height: 86vh; border-radius: 8px; background: #000; }
.passport-link { width: 100%; display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #ffffff0a; }
.passport-link>img { width: 40px; height: 44px; object-fit: contain; background: #101011; border-radius: 6px; }
.passport-link>a { flex: 1; min-width: 0; color: var(--ink); font-size: .875rem; }
.passport-link small { display: block; color: var(--ink-mute); font-size: .75rem; }
.passport-link .chip-del { min-width: 30px; min-height: 30px; padding: 0; }
.status-locked { color: var(--ok); }
.context-project-link { font-size: .75rem; color: var(--ink-dim); display: block; padding-top: 12px; }
.asset-chip .chip-del { opacity: 1; font-size: .75rem; min-width: 24px; min-height: 24px; }
.ref-thumb .ref-del { opacity: 1; width: 24px; height: 24px; font-size: .75rem; }
.passport label { display: block; margin-bottom: 10px; }
.passport textarea { font: .875rem/1.6 var(--sans); }
/* Save state: filled amber = do this next; outlined "Saved ✓" = done (same idiom as saved prompt cards). */
#saveDescriptor.saved, #saveDescriptor.saved:disabled { opacity: 1; background: transparent; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); cursor: default; }
.passport textarea.dirty { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.passport .unsaved { color: var(--accent-quiet); }
.passport-usage { margin-top: 12px; font-size: .875rem; line-height: 1.6; color: var(--ink-dim); }
.passport-usage a { color: var(--ink); margin-right: 12px; }
/* Locked passport = canon view: single column, working surfaces folded into Build history. */
.scene-layout.canon { grid-template-columns: minmax(0,1fr); }
.build-history { margin-top: 8px; border: 1px solid #504a4470; border-radius: 12px; background: #101011; }
.build-history>summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font: 500 .9375rem var(--sans); color: var(--ink); }
.build-history>summary::-webkit-details-marker { display: none; }
.build-history>summary::before { content: "▸"; color: var(--ink-mute); }
.build-history[open]>summary::before { content: "▾"; }
.build-history>summary .faint { font-weight: 400; }
.history-layout { display: grid; grid-template-columns: minmax(0,1fr) 25.5rem; gap: 16px; padding: 0 16px 16px; align-items: start; }
.history-layout .prompt-panel { margin: 0; }
.history-layout .chat { display: flex; flex-direction: column; height: 640px; }
@media (max-width: 980px) { .history-layout { grid-template-columns: 1fr; } }
.prompt-panel { background: transparent; border: 0; box-shadow: none; }
.prompt-panel>.panel-head { padding: 0 0 13px; border: 0; }
.prompt-panel>.panel-body { padding: 0; }
.prompt-card { position: relative; border: 1px solid #514b4570; border-radius: 11px; background: #181819; padding-left: 6px; margin-bottom: 12px; --verdict: #5b5956; }
.prompt-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--verdict); }
.prompt-card.v-worked { border-left-color: #514b4570; --verdict: var(--ok); }
.prompt-card.v-close { border-left-color: #514b4570; --verdict: #b6b3ad; }
.prompt-card.v-dead { border-left-color: #514b4570; --verdict: var(--danger); }
.prompt-card .bar { background: #070708; padding: 10px 14px; min-height: 44px; gap: 10px; flex-wrap: wrap; }
.prompt-card .bar .model-chip { font: 500 .875rem var(--sans); letter-spacing: 0; text-transform: none; }
.prompt-card .bar .faint { font-size: .75rem; }
.prompt-card pre { font: .875rem/1.6 var(--sans); color: var(--ink); background: #181819; padding: 14px 16px; box-shadow: none; overflow-wrap: anywhere; }
.prompt-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; padding: 6px 10px; border-top: 1px solid #ffffff0a; }
.prompt-actions .star { margin-left: auto; }
.prompt-more { position: relative; }
.prompt-more summary { list-style: none; cursor: pointer; min-width: 34px; min-height: 34px; display: grid; place-items: center; }
.prompt-more[open] { display: flex; align-items: center; }
.prompt-card .note-text,.prompt-card .note-input { font-size: .875rem; line-height: 1.6; }
.prompt-card .note-text { border: 0; padding: 4px 0; min-height: 32px; background: none; color: inherit; text-align: left; cursor: pointer; }
.output-inspect { padding: 0; border: 0; background: none; cursor: zoom-in; }
.prompt-card .note-row { align-items: center; }
.star { min-width: 34px; min-height: 34px; font-size: 1rem; }
.verdict { font: .75rem/1.3 var(--sans); min-height: 32px; padding: .35rem .55rem; }
.prompt-filter { display: flex; gap: 4px; padding: 0 0 12px; }
.prompt-filter button[aria-pressed=true] { background: #2f2b2a; color: var(--ink); }

/* Three voices: user, warm-gold commentary, and compact mono prompt artifact. */
.chat { position: static; top: auto; min-height: 0; max-height: none; background: #0b0b0c; border: 1px solid #49423d; border-radius: 14px; box-shadow: 0 22px 48px -20px #0009; overflow: hidden; }
.chat>.panel-head { flex-shrink: 0; }
.brain-heading { display: flex; align-items: center; gap: 8px; }
.brain-heading .kf-beats { width: 26px; height: 26px; }
.chat-scroll { min-height: 0; padding: 18px 16px; gap: 20px; }
.msg { max-width: 100%; width: 100%; }
.msg .who { font: .75rem/1.5 var(--sans); letter-spacing: 0; text-transform: none; display: flex; gap: 6px; align-items: center; margin-bottom: 7px; }
.msg .who .kf-beats { width: 20px; height: 20px; }
.msg.user { align-self: stretch; text-align: left; }
.msg.user .bubble { display: block; font: .875rem/1.6 var(--sans); background: #232324; border: 1px solid #343233; border-radius: 12px 12px 3px 12px; padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.assistant .bubble { font: .875rem/1.6 var(--sans); }
.msg.assistant .bubble p,.assistant-prose { font: .875rem/1.6 var(--sans); color: var(--brain-commentary); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-prompt-card { background: #141415; border: 1px solid #3d3938; border-radius: 10px; margin: 12px 0; box-shadow: none; }
.cp-head { background: #1b1b1d; padding: 9px 13px; display: flex; justify-content: space-between; gap: 8px; }
.cp-head .model-chip { font: .75rem var(--sans); letter-spacing: 0; text-transform: none; }
.chat-prompt-card pre { font: .8125rem/1.6 var(--mono); color: var(--ink); padding: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-foot { justify-content: space-between; padding: 8px 10px; }
.chat-input { flex-shrink: 0; margin: 0 12px 12px; padding: 12px; border: 1px solid #78716a; border-radius: 12px; background: #1b1b1c; gap: 10px; }
.chat-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px #e0a85035; }
.chat-input textarea { font: .875rem/1.6 var(--sans); border: 0; border-radius: 0; padding: 0; background: none; min-height: 62px; max-height: 260px; resize: vertical; }
.composer-label { display: block; font-size: .75rem; color: var(--ink-mute); }
.chat-input .row { flex-wrap: wrap; }
.chat-input select { min-height: 34px; font-size: .875rem; }
.chat-type-options { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; border-top: 1px solid #ffffff13; padding-top: 10px; }
.chat-type-options>span { margin-right: 8px; }
.chat-type-options button { min-height: 32px; padding: 4px 8px; }
.chat-type-options button[aria-pressed=true] { background: #3a3430; color: var(--ink); }
.composer-hint { font-size: .75rem; color: var(--ink-mute); }
.iteration-source { border: 1px solid #e0a85050; background: #e0a85009; border-radius: 8px; padding: 8px 10px; display: flex; gap: 8px; align-items: center; font-size: .75rem; }
.iteration-source>span { flex: 1; }
.stream-text { white-space: normal; font-size: .875rem; }
.stream-text.streaming::after { content: none; }
.stream-text.streaming>:last-child::after { content: '▎'; color: var(--accent); animation: kfblink 1s steps(1) infinite; }
.stream-text.streaming>.chat-prompt-card:last-child::after { display: none; }
.stream-text.streaming>.chat-prompt-card:last-child pre::after { content: '▎'; color: var(--accent); animation: kfblink 1s steps(1) infinite; }
.stream-error { border: 1px solid #ff947f50; border-radius: 8px; padding: 10px; color: var(--danger); font: .875rem/1.6 var(--sans); }
.think-status { font-size: .875rem; }
.think-timer { font-size: .75rem; }

/* Secondary surfaces retain the existing workflow and gain the same legibility. */
.login { background: radial-gradient(ellipse at 70% 0,var(--glow),transparent 65%),#101011; }
.login-card { width: min(440px,100%); padding: 32px; border: 1px solid #59514a70; border-radius: 20px; background: #141415dd; }
.skill-row .content pre { font: .875rem/1.6 var(--sans); }
.skill-row .scope { font-size: .75rem; }
.pref-row { font-size: .875rem; min-height: 36px; }
.modal { background: #252425; border-color: #77716d; }
.modal .field>label { font-size: .875rem; text-transform: none; letter-spacing: 0; }
.modal-wide { width: min(800px,100%); }
.lightbox { background: #0b0b0cf5; }
.lightbox-close { position: fixed; top: 20px; right: 20px; }
#updateBanner { max-width: calc(100vw - 24px); flex-wrap: wrap; border-radius: 12px; }

@media (max-width: 1340px) {
  .scene-layout { grid-template-columns: minmax(0,1fr) 23rem; gap: 16px; }
  .canvas-context { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .studio-shell { height: auto; min-height: 100dvh; }
  .global-rail { position: sticky; top: 0; height: 100dvh; }
  .studio-frame { min-height: calc(100dvh - 22px); }
  .studio-frame>.wrap.wrap-wide { overflow: visible; }
  .scene-layout { grid-template-columns: 1fr; }
  .work-scroll { overflow: visible; padding: 0; }
  .chat { min-height: 540px; max-height: 85dvh; }
  .canvas-context { grid-template-columns: minmax(0,1.4fr) minmax(220px,1fr); }
}
@media (max-width: 680px) {
  .studio-shell { grid-template-columns: 60px minmax(0,1fr); }
  .global-rail { padding-inline: 0; }
  .rail-link { width: 52px; }
  .studio-frame { margin-right: 6px; border-radius: 12px; }
  .masthead { padding: 10px 14px; }
  .masthead .who { display: none; }
  .studio-frame>.tabs { padding-inline: 8px; gap: 0; }
  .tabs .tab { padding-inline: 8px; }
  .nav-divider { margin-inline: 5px; }
  .studio-frame>.wrap,.studio-frame>.wrap.wrap-wide { padding: 20px 12px; }
  .project-grid,.canvas-context { grid-template-columns: 1fr; }
  .grid { grid-template-columns: minmax(0,1fr); }
  .page-head { flex-wrap: wrap; }
  .page-head>button { margin: 0; }
  .project-brand-row { flex-wrap: wrap; }
  .project-brand-row .faint { border: 0; padding: 0; }
  .prompt-card .bar .faint { flex-basis: 100%; order: 3; }
  .overlay { padding: 12px; }
  .modal { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .project-card:hover { transform: none; }
}

/* Setup strip on the Projects page until a host is set; link-style buttons for the composer's host line. */
.setup-strip { border: 1px solid #e0a85050; background: #e0a85009; border-radius: 8px; padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-size: .8125rem; margin-bottom: 14px; flex-wrap: wrap; }
.setup-strip > span { flex: 1; min-width: 240px; }
.setup-strip .btn { min-height: 32px; }
button.link { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
button.link:hover { color: var(--ink); }

/* Email sign-in and the Account modal's member list. */
.login-h { font-size: 1.35rem; margin: 0 0 6px; }
.login-card .faint { line-height: 1.45; }
.member-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.member-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid #ffffff14; border-radius: 8px; font-size: .85rem; }
.studio-pick { margin: 4px 6px 4px 0; }