/* Coinseed Studio. Layout matched to the supplied 778 reference screenshots.
   Existing Open Generative AI components remain subject to
   OPEN-GENERATIVE-AI-LICENSE.txt (MIT). */
:root {
  --bg: #0f0f12; --ink: #f5fbff; --muted: #8c99a0;
  --line: #ffffff0c; --border: #292b33; --cyan: #00cae0;
  --red: #f3a0ac; --amber: #dfb55f; --sidebar-width: 273px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px; color: var(--ink); background: var(--bg); color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
a { color: inherit; text-decoration: none; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea):focus-visible { outline: 2px solid #71dce8; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon.small { width: 14px; height: 14px; }
.ui-symbol { filter: invert(.75); opacity: .9; }
.eyebrow { margin: 0; color: #85858e; font-size: 9px; font-weight: 500; letter-spacing: 1.4px; }
.quiet { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 0; border: 0; background: transparent; color: #a4abb5; font-size: 12px; }
.quiet:hover { color: #e8edf3; }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 10px 18px; border: 0; border-radius: 8px; background: #50bed3; color: #f5fbff; font-size: 12px; font-weight: 550; }
.primary:hover:not(:disabled) { background: #62cede; }
.primary:disabled { background: #34434a; color: #9aafb8; opacity: .6; }

/* Full-height, resizable model navigation. */
.studio-shell { display: grid; grid-template-columns: var(--sidebar-width, 273px) minmax(0,1fr); width: 100%; height: 100dvh; min-width: 0; background: var(--bg); }
.model-sidebar { position: relative; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; height: 100dvh; border-right: 1px solid #25262c; background: #111114; overflow: clip; }
.sidebar-brand { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex: 0 0 90px; min-width: 0; padding: 16px 13px 16px 20px; border-bottom: 1px solid #ffffff05; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 20px; font-weight: 600; letter-spacing: .2px; color: #64d0e0; }
.brand img { display: block; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; }
.brand > span { min-width: 0; white-space: nowrap; }
.brand small { display: block; margin-top: 3px; color: #7b7c85; font-size: 10px; font-weight: 400; letter-spacing: .5px; }
.icon-button, .sidebar-toggle { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff08; border-radius: 50%; background: #202126; color: #a8abb6; }
.icon-button:hover, .sidebar-toggle:hover { background: #2a2d34; color: #f1f4fa; }
#sidebar-close .icon { width: 16px; height: 16px; transform: rotate(180deg); }
.sidebar-toggle { position: fixed; top: 27px; left: 13px; z-index: 24; }
.sidebar-toggle[aria-expanded=true] { display: none; }
.sidebar-toggle .icon { width: 16px; height: 16px; }
.studio-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 4px; align-items: center; flex: 0 0 84px; padding: 10px 8px; border-bottom: 1px solid #ffffff07; }
.mode-tabs { display: contents; }
.studio-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 62px; padding: 7px 3px; border: 0; border-radius: 12px; background: transparent; color: #85858f; font-size: 11px; }
.studio-nav button .icon { width: 23px; height: 23px; stroke-width: 1.5; }
.studio-nav button:hover { color: #d0d3dd; background: #1a1b21; }
.studio-nav button[aria-selected=true] { background: #183037; color: #70c7d9; }
.studio-nav #api-button { color: #d6b13f; white-space: nowrap; }
.model-search { display: flex; align-items: center; flex: 0 0 55px; min-width: 0; padding: 9px 13px; }
.model-search input { width: 100%; min-width: 0; height: 33px; padding: 7px 11px; border: 1px solid #665629; border-radius: 8px; background: #26231b; color: #dce2e7; font-size: 12px; }
.model-search input::placeholder { color: #888574; }
.model-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #41434b transparent; padding: 4px 12px 8px; }
.model-group { margin: 0; }
.model-group-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.model-choice { position: relative; display: flex; align-items: flex-start; gap: 11px; width: 100%; min-width: 0; height: 78px; margin: 0 0 3px; padding: 11px 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: #f2f3f6; text-align: left; }
.model-choice:hover { background: #25262c; }
.model-choice[aria-pressed=true] { background: #333438; }
.model-symbol { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; margin-top: 3px; }
.model-symbol img { display: block; width: 32px; height: 32px; object-fit: contain; }
.model-symbol .icon { width: 28px; height: 28px; color: #a9b8ce; }
.model-choice-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.model-choice-name { display: block; min-width: 0; padding-right: 65px; overflow: hidden; color: #f1f1f4; font-size: 13px; font-weight: 550; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.model-choice-kind { display: none; }
.model-choice-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-top: 3px; padding-right: 15px; overflow: hidden; color: #a0a0aa; font-size: 12px; line-height: 17px; }
.model-availability { display: inline-flex; align-items: center; justify-content: center; min-height: 20px; padding: 3px 6px; border: 1px solid #ffffff0b; border-radius: 4px; color: #a0a4ad; background: #25272e; font-size: 9px; line-height: 1.2; white-space: nowrap; }
.model-choice .model-availability { position: absolute; top: 11px; right: 9px; }
.model-availability[data-status=ready] { color: #94d6b6; border-color: #35896433; background: #285a455c; }
.model-availability[data-status=locked] { color: #beaf90; background: #39342b; }
.model-availability[data-status=checking] { color: #c1bccb; }
.selected-model-mark { position: absolute; right: 10px; bottom: 8px; width: 26px; color: #b8bdc5; font-size: 9px; line-height: 1.2; text-align: center; }
.model-empty { flex: 1; margin: 0; padding: 24px 18px; color: #9ca0ac; font-size: 12px; text-align: center; line-height: 1.8; }
.sidebar-note { flex: 0 0 auto; max-height: 40px; padding: 4px 13px; overflow-y: auto; color: #797c86; font-size: 10px; line-height: 1.6; }
.sidebar-note p { margin: 0; }
.sidebar-account { display: flex; align-items: center; gap: 6px; flex: 0 0 88px; min-width: 0; margin-top: auto; padding: 13px 11px; border-top: 1px solid #ffffff08; background: #121215; }
.account { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; min-height: 61px; padding: 9px 10px; border: 1px solid #ffffff06; border-radius: 15px; background: #222328; color: #e3e4eb; font-size: 13px; text-align: left; }
.account > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: #373a43; color: #b6d3d9; font-size: 13px; }
.wallet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 69px; min-height: 60px; padding: 9px 8px; border: 1px solid #604b21; border-radius: 12px; background: #2c2517; color: #e2b94d; font-size: 11px; }
.wallet strong { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sidebar-resizer { position: absolute; top: 0; right: -3px; z-index: 5; width: 7px; height: 100%; cursor: col-resize; }
.sidebar-resizer:hover, .sidebar-resizer:focus-visible { background: #8ecbd340; outline: none; }
body.sidebar-resizing { cursor: col-resize; user-select: none; }
.studio-shell[data-sidebar-collapsed=true] { grid-template-columns: 0 minmax(0,1fr); }
.studio-shell[data-sidebar-collapsed=true] .model-sidebar { visibility: hidden; width: 0; pointer-events: none; border: 0; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 29; border: 0; background: #0009; }

/* The model introduction and the bottom composer share the entire workspace. */
.workspace { position: relative; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; height: 100dvh; margin: 0; padding: 0; background: var(--bg); overflow: hidden; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 90px; height: 90px; padding: 18px 20px; background: transparent; }
.task-entry { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 136px; min-height: 36px; padding: 8px 16px; border: 0; border-radius: 21px; background: #f9cd38; color: #342912; font-size: 13px; font-weight: 600; box-shadow: 0 0 15px #ddac2738; }
.task-entry .icon { width: 16px; height: 16px; }
.task-entry:hover { background: #ffd951; }
.workspace-links { display: flex; align-items: center; gap: 12px; }
.round-action { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid #61552980; border-radius: 50%; background: #242315; color: #e1ba4e; }
.round-action .icon { width: 22px; height: 22px; stroke-width: 1.7; }
.round-action:hover { background: #343124; }
#library-button { border-color: #40504b; background: #1d2d30; color: #65c9d3; }
.workspace-links a { border-color: #3c3d51; background: #21222f; color: #9fa3db; }
.studio-shell[data-sidebar-collapsed=true] .task-entry { margin-left: 43px; }
.notice { position: absolute; top: 78px; right: 22px; z-index: 1; max-width: min(400px,calc(100% - 44px)); margin: 0; color: #858994; font-size: 10px; line-height: 1.7; text-align: right; }
.notice:empty { display: none; }
.notice.ready { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.notice.error { color: var(--red); }
.pending-notice { flex: 0 0 auto; width: calc(100% - 36px); max-width: 700px; margin: 0 auto 10px; padding: 10px 14px; border: 1px solid #796237; border-radius: 10px; background: #292215; color: #dfc17f; font-size: 11px; line-height: 1.7; }
.pending-notice p { margin: 4px 0; }
.pending-notice .quiet { margin-right: 12px; color: #efd494; font-size: 11px; }
.creation-grid { display: flex; flex: 1 1 auto; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; }
.result-panel { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-width: 0; min-height: 0; }
.result-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 28px; }
.result-panel:has(.empty-result) .result-heading, .result-panel:has(.empty-result) .result-meta { display: none; }
.status-label { color: #969da8; font-size: 11px; }
.status-label.busy { color: var(--amber); }
.result-stage { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; position: relative; min-width: 0; min-height: 0; overflow: auto; }
.result-panel:has(.empty-result) .result-stage { overflow: visible; }
.empty-result { align-self: flex-start; width: 100%; min-width: 0; padding: 0 24px; text-align: center; }
.model-hero-logo { display: block; width: 128px; height: 128px; margin: -5px auto 42px; object-fit: contain; }
.model-introduction { width: min(584px,100%); margin: 0 auto; }
.model-introduction h1 { display: none; }
#model-summary { min-height: 81px; margin: 0; padding: 16px 20px; border: 1px solid #2e373a; border-radius: 11px; background: #181c1d; color: #d9dbe1; font-size: 13px; font-weight: 400; line-height: 1.85; text-align: left; }
.result-stage.has-media { width: calc(100% - 56px); margin: 4px auto; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
.result-stage > img, .result-stage > video { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.result-stage > video { width: 100%; height: 100%; }
.result-stage audio { width: min(100% - 30px,520px); margin: 24px auto; }
.result-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; padding: 10px 28px; color: #8c93a0; font-size: 10px; }
.ready-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.ready-actions a { color: #7ad7e6; font-size: 11px; }
.loading-detail, .result-error { max-width: 660px; padding: 24px; color: #a6adb9; text-align: center; font-size: 13px; line-height: 1.8; }
.loading-detail p:first-child { color: #e4e8ee; font-size: 17px; }
.result-error { color: var(--red); }
.artifact-gallery { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); grid-auto-rows: 100%; gap: 16px; min-width: 0; min-height: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.artifact-gallery figure { display: grid; grid-template-rows: minmax(0,1fr) auto; min-width: 0; min-height: 0; height: 100%; margin: 0; }
.artifact-gallery :is(img,video) { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; max-height: 100%; object-fit: contain; }
.artifact-gallery figcaption { padding: 8px; color: #8fd6e1; text-align: center; font-size: 11px; }

/* The reference caps the input at 70rem (1176px at its desktop scale).
   Floating tool rails sit outside that width and never move its center. */
.editor.composer-778 { position: relative; flex: 0 0 auto; width: 100%; min-width: 0; margin: 0; padding: 0 75.6px 21px; }
.composer-frame { position: relative; display: block; width: min(1176px,100%); min-width: 0; margin-inline: auto; }
.composer-type-rail, .composer-tools-rail { position: absolute; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0; border: 1px solid #25272d; border-radius: 25px; background: #181a1e; }
.composer-type-rail { left: -65px; width: 44px; }
.composer-tools-rail { right: -65px; width: 40px; }
.composer-type-rail button, .composer-tools-rail button { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 34px; padding: 0; border: 1px solid #ffffff08; border-radius: 50%; background: #22252b; color: #a1a6b1; font-size: 13px; }
.composer-type-rail button:hover, .composer-tools-rail button:hover { background: #333944; color: #e5eff8; }
.composer-type-rail button[aria-pressed=true] { border-color: #356870; background: #20363d; color: #8bd5e1; }

.composer-type-rail .icon, .composer-tools-rail .icon { width: 17px; height: 17px; }
.composer-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 189px; margin: 0; padding: 16px 14px 10px; border: 1px solid #21232a; border-radius: 20px; background: #1b1c21; }
.composer-billing { position: absolute; top: -17px; right: 13px; max-width: calc(100% - 26px); padding: 6px 12px; border: 1px solid #24262c; border-radius: 18px; background: #1c1e22; color: #a58d55; font-size: 11px; line-height: 1.5; }
.composer-main { display: flex; flex: 1 1 auto; align-items: flex-start; gap: 18px; min-width: 0; min-height: 90px; }
.composer-reference { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: center; gap: 0 15px; flex: 0 0 224px; width: 224px; min-width: 0; margin-top: 10px; padding: 0 7px; }
.reference-extras { display: contents; }
.composer-reference .reference-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 72px; min-width: 0; margin: 0; padding: 8px 3px; border: 1px solid #34363e; border-radius: 3px; background: #292b31; color: #777d87; font-size: 10px; line-height: 1.5; }
#upload-zone { transform: rotate(-7deg); }
.reference-extra[data-open-assets=video] { transform: rotate(0deg); }
.reference-extra[data-open-assets=audio] { transform: rotate(7deg); }
.composer-reference .reference-tile:hover, .composer-reference .reference-tile.drag { border-color: #677481; background: #32363f; color: #c2cad6; }
.composer-reference .reference-tile > .icon { width: 19px; height: 19px; padding: 0; border: 0; background: none; color: #a4a8b2; }
.upload-copy { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.upload-copy strong { color: inherit; font-size: 10px; font-weight: 400; }
.upload-copy small { font-size: 9px; }
#reference-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 3px; background: #191b21; }
.file-row { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 10px 0 0; color: #949ca9; font-size: 10px; }
.file-row > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-row .quiet { flex-shrink: 0; padding: 3px 0; font-size: 10px; }
.composer-prompt { position: relative; flex: 1 1 auto; min-width: 0; }
.field-heading { position: absolute; top: -11px; right: 0; color: #737985; font-size: 9px; line-height: 1.3; }
#prompt-count { opacity: .65; font-variant-numeric: tabular-nums; }
textarea { display: block; width: 100%; min-width: 0; min-height: 90px; margin: 0; padding: 0; resize: none; border: 0; border-radius: 4px; background: transparent; color: #e8ecf2; font-size: 13px; line-height: 1.65; }
#prompt { height: 90px; max-height: 90px; overflow-y: auto; overscroll-behavior: contain; }
textarea::placeholder { color: #747b83; }
textarea:focus-visible { outline: 1px solid #64c2d24a; outline-offset: 4px; }
.composer-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }
.composer-toolbar, .video-settings, .media-control-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.composer-toolbar { flex: 1; }
.model-badge, .fixed-setting, .control { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 29px; max-width: 100%; padding: 5px 10px; border: 1px solid #ffffff03; border-radius: 6px; background: #292b33; color: #c5cad4; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.model-badge { max-width: 200px; }
.model-badge > span { overflow: hidden; text-overflow: ellipsis; }
.model-badge .icon, .control .icon { width: 14px; height: 14px; color: #b0b7c2; }
.model-badge:hover { background: #373b46; }
.chip-chevron { width: 9px !important; height: 9px !important; transform: rotate(90deg); }
#output-count { color: #d2c27b; background: #393420; }
#generation-kind { color: #d5c28f; }
#formal-settings { max-width: 235px; overflow: hidden; text-overflow: ellipsis; }
.size-grid { display: inline-flex; min-width: 0; margin: 0; padding: 0; border: 0; }
.control select { min-width: 0; max-width: 160px; min-height: 19px; padding: 0; border: 0; background: transparent; color: #d4d9e3; font-size: 11px; }
.control select option { background: #292b33; color: #d4d9e3; }
#image-size { max-width: 150px; }
#orientation { max-width: 106px; }
.composer-toolbar:has(#media-toolbar:not([hidden])) #generation-kind,
.composer-toolbar:has(#media-count-field:not([hidden])) #output-count { display: none; }
.composer-submit-stack { position: relative; flex: 0 0 36px; width: 36px; height: 36px; }
#examples-toggle { position: absolute; right: 0; bottom: 45px; z-index: 2; display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 0; border-radius: 50%; background: #f88018; color: #fff; font-size: 9px; line-height: 1.3; }
#examples-toggle:hover, #examples-toggle[aria-expanded=true] { background: #ff9a36; }
#examples-list { position: absolute; right: 0; bottom: 83px; z-index: 4; display: flex; flex-direction: column; gap: 6px; width: 190px; padding: 8px; border: 1px solid #424750; border-radius: 10px; background: #292b33; box-shadow: 0 8px 22px #0006; }
#examples-list button { min-height: 34px; padding: 7px 10px; border: 0; border-radius: 6px; background: #343844; color: #d5dbe7; text-align: left; font-size: 11px; }
#examples-list button:hover { background: #454d5a; }
.primary.generate-orb { display: grid; place-items: center; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--cyan); color: #fff; }
.primary.generate-orb:hover:not(:disabled) { background: #29d9e9; }
.primary.generate-orb:disabled { background: var(--cyan); color: #fff; opacity: .45; }
.generate-orb .icon { width: 19px; height: 19px; transform: rotate(-90deg); }
.form-message { margin: 8px 0 0; color: var(--red); font-size: 11px; line-height: 1.7; }
.form-message:empty { display: none; }
.form-message.ok { color: #93cdd7; }
.composer-note { display: none; }

/* Real Media attachments, specs and output choices. */
.media-controls { min-width: 0; max-height: min(140px,24dvh); margin: 0 0 10px; padding: 0 0 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #41434b transparent; border-bottom: 1px solid #ffffff09; }
.media-spec-message { margin: 0 0 8px; color: #a3a9b6; font-size: 11px; line-height: 1.7; }
.media-spec-message[data-status=locked] { color: #d6b879; }
.media-spec-message[data-status=ready] { display: none; }
.media-spec-message[data-status=ready][data-show-help=true] { display: block; }
.media-controls:has([data-show-help=true]) { max-height: min(200px,30dvh); }
.media-controls:has(#media-spec-message[data-status=ready]):has(#media-reference-slots:empty):has(#media-source-field[hidden]):has(#media-voice-ref-field[hidden]):has(#media-audio-fields[hidden]) { display: none; }
.media-reference-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.media-reference-slots:empty { display: none; }
.media-ref-slot { display: flex; align-items: center; gap: 7px; flex: 0 1 190px; min-width: 0; min-height: 54px; padding: 7px; border: 1px solid #3a3d46; border-radius: 8px; background: #252830; }
.media-ref-slot img { width: 38px; height: 38px; border-radius: 5px; object-fit: contain; }
.media-ref-slot .quiet { min-width: 0; padding: 5px 0; color: #bdc5d2; font-size: 11px; white-space: normal; overflow-wrap: anywhere; }
.media-ref-name { min-width: 0; max-width: 65px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #919aa8; font-size: 10px; }
.media-source-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; margin-top: 8px; color: #a9b0bf; font-size: 11px; }
.media-source-field span { min-width: 0; overflow-wrap: anywhere; }
.media-source-field .quiet { min-height: 32px; padding: 6px 9px; border: 1px solid #343943; border-radius: 6px; background: #272b33; font-size: 11px; }
.media-control-row input { width: 100px; max-width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: inherit; font-size: 11px; }
.media-instructions-label { display: block; margin-top: 10px; color: #a1a9b8; font-size: 11px; }
#media-instructions { height: 58px; min-height: 58px; margin-top: 5px; padding: 8px; border: 1px solid #3c414b; border-radius: 7px; background: #24272f; font-size: 12px; }

/* Fullscreen uses the same editor rather than a second form. */
body.composer-editing { overflow: hidden; }
.editor.composer-778:is(:fullscreen,.composer-expanded) { position: fixed; inset: 12px; z-index: 40; display: flex; flex-direction: column; width: auto; height: calc(100dvh - 24px); min-height: 0; margin: 0; padding: 20px; overflow: auto; border: 1px solid #363b45; border-radius: 16px; background: #111216; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-frame { display: grid; flex: 1; grid-template-columns: 44px minmax(0,1fr) 40px; gap: 10px; width: 100%; min-height: 0; align-items: stretch; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-card { min-height: 0; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-main { flex: 1; min-height: 0; align-items: stretch; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-reference { align-self: flex-start; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-prompt { display: flex; flex-direction: column; min-height: 0; }
.editor.composer-778:is(:fullscreen,.composer-expanded) #prompt { flex: 1; height: auto; max-height: none; min-height: 180px; }
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-type-rail,
.editor.composer-778:is(:fullscreen,.composer-expanded) .composer-tools-rail { position: static; align-self: flex-end; }
.editor.composer-778:fullscreen { inset: 0; width: 100vw; height: 100dvh; padding: 24px; border: 0; border-radius: 0; }
.editor.composer-778::backdrop { background: #0f0f12; }
.composer-edit-backdrop { position: fixed; inset: 0; z-index: 39; border: 0; background: #0009; }

/* Native dialogs retain all account, API, pricing, history and asset actions. */
dialog { width: calc(100% - 32px); max-width: 660px; max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow-y: auto; border: 1px solid #34353e; border-radius: 14px; background: #1a1a20; color: var(--ink); box-shadow: 0 20px 65px #0009; }
dialog::backdrop { background: #0009; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dialog-heading .eyebrow { margin-bottom: 7px; }
.dialog-heading h2 { margin: 0 0 10px; font-size: 19px; font-weight: 600; }
.close { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 1px solid #ffffff08; border-radius: 50%; background: #24262d; color: #aaaeba; font-size: 22px; }
.close:hover { color: #fff; background: #353942; }
.dialog-copy, .help { color: #a2a9b8; font-size: 12px; line-height: 1.8; }
.help { font-size: 10px; }
.api-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 18px 0; }
.api-code-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; }
pre { padding: 14px; border: 1px solid #30333d; border-radius: 8px; background: #111217; color: #adcbd2; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; line-height: 1.8; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; max-width: calc(100% - 24px); padding: 11px 17px; border: 1px solid #40626c; border-radius: 10px; background: #25373d; color: #d3ebf0; font-size: 12px; transform: translateX(-50%); }
#pricing-dialog { max-width: 800px; }
.pricing-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; }
.pricing-card { min-width: 0; padding: 15px; border: 1px solid #383b45; border-radius: 10px; background: #212329; }
.pricing-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pricing-card h3 { margin: 0; font-size: 13px; font-weight: 600; }
.pricing-availability { color: #9aa3b3; font-size: 9px; white-space: nowrap; }
.pricing-amount { display: block; margin: 12px 0 9px; color: #dde8ef; font-size: 19px; font-weight: 600; }
.pricing-spec, .pricing-addon { margin: 6px 0; color: #a5adbb; font-size: 11px; line-height: 1.8; }
.pricing-addon-state { margin: 7px 0 0; color: #979fad; font-size: 10px; }
.pricing-rules { margin-top: 16px; padding-top: 10px; border-top: 1px solid #3a3c45; }
.pricing-rules p { margin: 6px 0; color: #a9b0be; font-size: 11px; line-height: 1.8; }
/* Task history is an anchored panel beneath its trigger, not a modal. */
#history-dialog { position: absolute; inset: 73.5px auto auto 21px; z-index: 25; width: 436.8px; max-width: calc(100% - 42px); max-height: min(772.8px,calc(100% - 96.6px)); margin: 0; padding: 0; overflow: hidden; border: 1px solid #ffffff1a; border-radius: 12.6px; background: rgba(24,26,32,.98); box-shadow: 0 14px 40px #0006; }
#history-dialog[open] { display: flex; flex-direction: column; }
#history-dialog::backdrop { background: transparent; backdrop-filter: none; }
.history-section { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 0; }
.history-panel-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 12.6px 14.7px 8.4px; }
.history-panel-heading h2 { margin: 0; color: #e5c670; font-size: 16.8px; font-weight: 500; }
#history-dialog .history-close { position: static; flex: 0 0 33.6px; width: 33.6px; height: 33.6px; border: 1px solid #ffffff0c; border-radius: 10px; background: #ffffff05; color: #c8c9ce; font-size: 19px; }
#history-dialog .history-close:hover { background: #ffffff0d; }
.history-search { position: relative; display: flex; flex: 0 0 auto; align-items: center; gap: 7px; height: 33.6px; margin: 0 14.7px 8.4px; padding: 0 10.5px; border: 1px solid #ffffff12; border-radius: 8.4px; background: #ffffff04; color: #a4a7b0; }
.history-search:focus-within { border-color: #71dce8; outline: 1px solid #71dce8; outline-offset: 0; }
.history-search .icon { width: 13px; height: 13px; }
#history-search { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; color: #d8dae1; font-size: 12.6px; }
#history-search::placeholder { color: #878992; }
.history-filters { display: grid; flex: 0 0 auto; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6.3px; margin: 2.1px 14.7px 10.5px; }
.history-filters :is(label,input,select) { min-width: 0; max-width: 100%; }
.history-filters :is(input,select) { display: block; width: 100%; height: 34.6px; padding: 6px 9px; border: 1px solid #ffffff12; border-radius: 7.4px; background: #202228; color: #bbbec8; font-size: 12.6px; }
.history-filters input[type=date] { color-scheme: dark; }
.history-filters .history-date-control { display: flex; align-items: center; gap: 5px; height: 34.6px; padding: 0 8px; border: 1px solid #ffffff12; border-radius: 7.4px; background: #202228; }
.history-date-control > span { flex: 0 0 auto; color: #9399a6; font-size: 9px; white-space: nowrap; }
.history-date-control:focus-within { border-color: #71dce8; outline: 1px solid #71dce8; outline-offset: 0; }
.history-filters .history-date-control input { flex: 1 1 auto; width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; color: #cbd0da; font-size: 10.5px; }
.history-date-control input::-webkit-calendar-picker-indicator { width: 12px; height: 12px; margin: 0; padding: 0; opacity: .75; }
.history-filters option { background: #202228; color: #dce0e8; }
.history-panel-meta { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; min-height: 31.5px; padding: 0 14.7px; border-bottom: 1px solid #ffffff0b; color: #9296a3; font-size: 11.55px; }
.history-panel-actions { display: flex; align-items: center; gap: 5px; }
.history-panel-actions button { display: grid; place-items: center; width: 25.2px; height: 25.2px; min-height: 0; padding: 4px; border: 1px solid #ffffff0d; border-radius: 6px; background: #ffffff05; color: #acb0bd; }
.history-panel-actions button:hover { background: #ffffff0c; color: #e2e5eb; }
.history-panel-actions .icon { width: 13px; height: 13px; }
.history-list { display: flex; flex: 1 1 auto; flex-direction: column; gap: 8.4px; min-height: 0; padding: 8.4px 10.5px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #41434b transparent; }
.history-list:has(.empty-history) { padding: 2.1px 14.7px 14.7px; }
.empty-history { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8.4px; min-height: 96.6px; padding: 16px; color: #9197a7; text-align: center; }
.empty-history > .icon { width: 24px; height: 24px; color: #7f8799; }
.empty-history strong { font-size: 13.65px; font-weight: 400; }
.empty-history p { display: none; }
.history-card { flex: 0 0 auto; min-width: 0; padding: 12px; border: 1px solid #ffffff0e; border-radius: 8.4px; background: #1e2129; }
.history-card-head, .history-card-body, .history-card-foot { display: flex; align-items: center; gap: 8px; }
.history-card-head, .history-card-foot { justify-content: space-between; }
.history-card-body { min-width: 0; }
.history-icon { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: #2d424a; color: #94d4df; }
.history-icon.video { background: #383146; color: #b6a7d0; }
.history-title { margin: 0 0 5px; font-size: 12px; font-weight: 550; }
.history-date { color: #969faf; font-size: 9px; }
.history-state { padding: 4px 6px; border-radius: 5px; background: #2a463d; color: #9ed7bd; font-size: 10px; white-space: nowrap; }
.history-state.busy { background: #493b22; color: #e3bc76; }
.history-state.failed { background: #493039; color: var(--red); }
.task-id { margin: 13px 0; color: #909bae; font-family: ui-monospace,monospace; font-size: 9px; overflow-wrap: anywhere; }
.history-card-foot { padding-top: 9px; border-top: 1px solid #363c46; }
.history-card-foot > span { color: #a0a9b8; font-size: 9px; }
.history-card-foot .quiet { padding: 4px 0; font-size: 11px; }
.current-task { border-color: #58b2c2; }
.progress-bar { height: 3px; margin: 10px 0; overflow: hidden; border-radius: 3px; background: #3a424d; }
.progress-bar span { display: block; height: 100%; background: var(--cyan); }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 18px; color: #a0a9b8; font-size: 11px; }
.pagination .quiet { min-height: 40px; }
#history-dialog .pagination { flex: 0 0 auto; gap: 15px; margin: 0; padding: 5px 10.5px; border-top: 1px solid #ffffff0b; font-size: 10px; }
#history-dialog .pagination .quiet { min-height: 29px; padding: 5px 0; font-size: 10px; }

/* Asset library follows the source modal's compact header and tabs. */
#asset-dialog { width: min(686px,calc(100vw - 32px)); max-width: 686px; height: min(560px,85dvh); max-height: 85dvh; padding: 15px; overflow: hidden; border-radius: 13px; background: #1a1a20; }
#asset-dialog[open] { display: flex; flex-direction: column; gap: 9px; }
#asset-dialog .asset-dialog-header { order: 0; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; margin: -3px 0 1px; }
#asset-dialog .asset-dialog-header .eyebrow { display: none; }
#asset-dialog .asset-dialog-header h2 { margin: 0; font-size: 14px; font-weight: 550; }
#asset-dialog #close-assets { flex-basis: 36px; border: 0; background: transparent; font-size: 20px; }
#asset-dialog .asset-kind-tabs, #asset-dialog .asset-library-tabs { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 6px; }
#asset-dialog .asset-library-tabs { order: 1; }
#asset-dialog .asset-library-tabs button { flex: 1 1 0; min-height: 33px; padding: 6px 12px; border: 1px solid #35353d; border-radius: 7px; background: #1a1a20; color: #e1e2e8; font-size: 12px; }
#asset-dialog .asset-library-tabs button[aria-pressed=true] { background: #50bed3; border-color: #50bed3; color: #fff; }
#asset-dialog .asset-library-toolbar { order: 2; display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 7px; }
#asset-dialog .asset-library-toolbar label { flex: 1 1 160px; min-width: 0; }
#asset-search { width: 100%; min-width: 0; height: 34px; padding: 7px 10px; border: 1px solid #34353d; border-radius: 5px; background: #1c1d23; color: #e2e6ef; font-size: 12px; }
#asset-search::placeholder { color: #7d838d; }
#asset-dialog #asset-refresh { min-height: 34px; padding: 6px 9px; border: 1px solid #35353d; border-radius: 5px; font-size: 11px; }
#asset-dialog .primary { min-height: 34px; padding: 6px 11px; border-radius: 5px; font-size: 11px; }
#asset-dialog .asset-kind-tabs { order: 3; gap: 6px; }
#asset-dialog .asset-kind-tabs button { min-height: 29px; padding: 5px 12px; border: 1px solid #35363f; border-radius: 18px; background: #1b1c21; color: #c0c5d0; font-size: 11px; }
#asset-dialog .asset-kind-tabs button[aria-pressed=true] { border-color: #50bed3; background: #50bed3; color: #fff; }
#asset-dialog .asset-status { order: 4; flex: 0 0 auto; margin: 3px 0; padding: 6px 9px; border: 1px solid #3f414a; border-radius: 5px; background: #22242a; color: #a5b0c0; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
#asset-dialog .asset-status:empty { display: none; }
#asset-dialog .asset-status.error { color: var(--red); border-color: #74444f; }
#asset-dialog .asset-grid { order: 5; display: grid; flex: 1 1 auto; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: max-content; align-content: start; gap: 9px; min-width: 0; min-height: 0; padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4b505d transparent; }
#asset-dialog .asset-grid:empty { display: none; }
#asset-dialog .asset-card { display: flex; flex-direction: column; min-width: 0; min-height: 44px; padding: 5px; border: 1px solid #383c46; border-radius: 8px; background: #22242b; color: #e1e6ee; text-align: left; }
#asset-dialog .asset-card:hover:not(:disabled) { border-color: #667281; }
#asset-dialog .asset-card[aria-pressed=true] { border-color: #50bed3; background: #28353c; }
#asset-dialog .asset-card-thumb { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 5px; background: #14161b; }
#asset-dialog .asset-card-thumb img, #asset-dialog .asset-card-thumb video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
#asset-dialog .asset-card-thumb .icon { width: 30px; height: 30px; color: #a8b4c6; }
#asset-dialog .asset-card-thumb audio { width: 100%; max-width: 100%; height: 36px; }
#asset-dialog .asset-card-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 8px 3px 4px; }
#asset-dialog .asset-card-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: #dce2ec; font-size: 11px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
#asset-dialog .asset-card-copy :is(small,p,span) { margin: 0; color: #9ea9ba; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
#asset-dialog .asset-empty { order: 5; display: flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 90px; padding: 25px 18px; color: #b8bfcc; text-align: center; font-size: 13px; line-height: 1.8; }
#asset-dialog .asset-page-controls { order: 6; display: flex; flex: 0 0 auto; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0; padding: 12px 0 0; border-top: 1px solid #34353f; color: #9aa5b6; font-size: 10px; }
#asset-dialog .asset-page-controls button:not(.primary) { min-height: 34px; padding: 6px 9px; border: 1px solid #353842; border-radius: 5px; background: #1e2027; color: #aeb9c8; font-size: 10px; }
#asset-dialog #asset-use { margin-left: auto; }

@media (max-width: 1100px) and (min-width: 761px) {
  .composer-reference { flex-basis: 195px; width: 195px; gap: 0 10px; }
  .composer-card { padding-inline: 12px; }
  .composer-main { gap: 12px; }
  .model-badge { max-width: 150px; }
  .workspace-links { gap: 8px; }
  .round-action { width: 44px; height: 44px; }
}
@media (max-width: 900px) {
  #history-dialog { left: 16px; width: calc(100% - 32px); max-width: calc(100% - 32px); max-height: calc(100% - 76px); }
}
@media (max-width: 760px) {
  .studio-shell, .studio-shell[data-sidebar-collapsed=true] { grid-template-columns: minmax(0,1fr); }
  .workspace { grid-column: 1; }
  .model-sidebar, .studio-shell[data-sidebar-collapsed=true] .model-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(273px,calc(100vw - 36px)); height: 100dvh; border-right: 1px solid #353740; visibility: hidden; pointer-events: none; transform: translateX(-100%); }
  body.sidebar-open .model-sidebar, body.sidebar-open .studio-shell[data-sidebar-collapsed=true] .model-sidebar { visibility: visible; pointer-events: auto; transform: translateX(0); }
  .sidebar-toggle { top: 27px; left: 13px; }
  .sidebar-toggle[aria-expanded=true] { display: none; }
  .sidebar-resizer { display: none; }
  .topbar { flex-basis: 90px; height: 90px; padding: 18px 12px 18px 20px; }
  .task-entry, .studio-shell[data-sidebar-collapsed=true] .task-entry { margin-left: 42px; }
  .workspace-links { gap: 5px; }
  .round-action { width: 36px; height: 36px; }
  .round-action .icon { width: 17px; height: 17px; }
  .workspace-links a { display: none; }
  .notice { top: 79px; right: 13px; max-width: 190px; font-size: 9px; }
  .empty-result { padding-inline: 20px; }
  .model-hero-logo { width: 90px; height: 90px; margin: -35px auto 4px; }
  #model-summary { min-height: 81px; padding: 12px 14px; font-size: 13px; line-height: 1.7; }
  .model-introduction { width: 100%; }
  .result-stage.has-media { width: calc(100% - 24px); }
  .result-heading { margin: 5px 15px; }
  .result-meta { padding: 7px 14px; }
  .artifact-gallery { grid-template-columns: repeat(auto-fit,minmax(min(160px,100%),1fr)); gap: 10px; }
  .editor.composer-778 { padding: 0 8px 9px; }
  .composer-frame { position: relative; display: block; width: 100%; margin: 0; }
  .composer-type-rail { display: none; }
  .composer-card { min-height: 225px; max-height: min(52dvh,410px); padding: 17px 14px 54px; overflow-y: auto; border-radius: 18px; }
  .composer-billing { top: -1px; right: 9px; padding: 3px 8px; font-size: 9px; border-radius: 0 0 10px 10px; }
  .composer-main { flex-direction: column; gap: 15px; min-height: 0; }
  .composer-reference { flex: 0 0 auto; width: 224px; max-width: 100%; margin: 5px 0 0; padding-inline: 5px; gap: 0 15px; }
  .composer-reference .reference-tile { height: 66px; }
  .composer-prompt { flex: 0 0 auto; width: 100%; }
  #prompt { height: 66px; min-height: 66px; max-height: 66px; font-size: 13px; }
  .field-heading { top: -10px; font-size: 8px; }
  .composer-bottom { gap: 7px; margin-top: 12px; }
  .composer-toolbar, .video-settings, .media-control-row { gap: 6px; }
  .composer-toolbar { width: 100%; }
  .model-badge, .fixed-setting, .control { min-height: 32px; padding: 6px 8px; font-size: 10px; }
  .model-badge { max-width: 180px; }
  .control select { max-width: 140px; font-size: 10px; }
  .composer-submit-stack { position: absolute; right: 14px; bottom: 13px; flex-basis: 36px; }
  #examples-toggle { bottom: 44px; }
  #examples-list { width: min(190px,calc(100vw - 55px)); }
  .composer-tools-rail { position: absolute; right: 64px; bottom: 13px; z-index: 2; flex-direction: row; gap: 5px; width: auto; padding: 0; border: 0; background: transparent; }
  .composer-tools-rail button { width: 36px; height: 36px; }
  .media-controls { margin-bottom: 9px; padding-bottom: 7px; }
  .media-ref-slot { flex-basis: 150px; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) { inset: 8px; width: auto; height: calc(100dvh - 16px); padding: 12px 8px; }
  .editor.composer-778:fullscreen { inset: 0; width: 100vw; height: 100dvh; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-frame { grid-template-columns: minmax(0,1fr); gap: 0; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-card { max-height: none; flex: 1; padding-bottom: 60px; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-main { flex: 1; min-height: 0; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-prompt { flex: 1; min-height: 0; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) #prompt { min-height: 160px; }
  .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-tools-rail { position: absolute; align-self: auto; }
  dialog { padding: 18px; border-radius: 12px; }
  .close { flex-basis: 44px; width: 44px; height: 44px; }
  .pricing-list { grid-template-columns: 1fr; }
  .api-links { gap: 12px; }
  #asset-dialog { width: calc(100vw - 20px); height: min(600px,85dvh); padding: 13px; }
  #asset-dialog #close-assets { flex-basis: 44px; min-width: 44px; height: 44px; }
  #asset-dialog .asset-dialog-header { min-height: 40px; }
  #asset-dialog .asset-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #asset-dialog .asset-library-tabs button { min-height: 40px; }
  #asset-dialog .asset-library-toolbar label { flex-basis: 100%; }
  #asset-search { height: 40px; }
  #asset-dialog #asset-refresh, #asset-dialog .primary, #asset-dialog .asset-page-controls button:not(.primary) { min-height: 40px; }
  #asset-dialog #asset-upload { margin-left: auto; }
  #asset-dialog .asset-kind-tabs button { min-height: 34px; }
  #asset-dialog #asset-use { flex: 1 1 110px; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 14px; padding-right: 8px; gap: 5px; }
  .task-entry, .studio-shell[data-sidebar-collapsed=true] .task-entry { width: 123px; margin-left: 42px; padding-inline: 10px; }
  .workspace-links { gap: 4px; }
  .round-action { width: 32px; height: 32px; }
  .empty-result { padding-inline: 14px; }
  #model-summary { padding: 10px 12px; font-size: 12px; }
  .composer-card { padding-inline: 11px; }
  .composer-reference { width: 215px; }
  .model-badge { max-width: 150px; }
}
@media (max-width: 760px) and (max-height: 500px) {
  .workspace { overflow-y: auto; }
  .creation-grid { flex: 0 0 auto; min-height: calc(100dvh - 90px); }
  .result-panel { flex: 0 0 auto; min-height: 165px; }
  .model-hero-logo { width: 64px; height: 64px; margin: 0 auto 10px; }
  #model-summary { min-height: 60px; padding: 9px 12px; font-size: 12px; }
  .editor.composer-778 { margin-top: 12px; }
  .composer-card { min-height: 210px; max-height: none; }
}
@media (max-height: 500px) {
  .model-sidebar { overflow-y: auto; overflow-x: hidden; }
  .model-list { flex: 0 0 auto; min-height: 150px; max-height: 280px; }
  #history-dialog { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #41434b transparent; }
  #history-dialog .history-section, #history-dialog .history-list { flex: 0 0 auto; }
  #history-dialog .history-list { overflow: visible; }
}
@media (max-height: 620px) and (min-width: 761px) {
  .topbar { flex-basis: 76px; height: 76px; padding-top: 14px; padding-bottom: 14px; }
  .model-hero-logo { width: 96px; height: 96px; margin: -3px auto 15px; }
  #model-summary { min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
  .sidebar-brand { flex-basis: 76px; }
  .studio-nav { flex-basis: 70px; padding-top: 5px; padding-bottom: 5px; }
  .studio-nav button { min-height: 58px; }
  .sidebar-note { max-height: 25px; }
  .sidebar-account { flex-basis: 76px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-height: 560px), (max-width: 700px) and (max-height: 700px) {
  #asset-dialog { height: auto; max-height: 85dvh; overflow-y: auto; }
  #asset-dialog .asset-grid { flex: 0 0 auto; overflow: visible; }
  #asset-dialog .asset-empty { flex: 0 0 auto; min-height: 130px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

#muse-controls select,#muse-controls textarea,#muse-controls input{max-width:100%;width:100%;box-sizing:border-box}#muse-image-preview{display:block;max-width:160px;max-height:120px;object-fit:contain;margin-top:8px}#muse-image-preview[hidden]{display:none}

#muse-controls{font-size:12px;max-height:220px}#muse-controls>label{display:flex;align-items:center;gap:12px;color:#a1a9b8}#muse-controls select{width:auto;min-width:150px;border:1px solid #34363e;border-radius:6px;padding:6px;background:#292b33;color:#e8ecf2}#muse-image-field{margin-top:10px}#muse-image-field label{display:block;margin-bottom:6px;color:#a1a9b8}#muse-controls input::file-selector-button{border:1px solid #34363e;border-radius:6px;padding:6px 10px;background:#292b33;color:#e8ecf2;margin-right:8px}#muse-controls details{margin-top:8px;color:#a1a9b8}#muse-extra{min-height:50px;padding-top:8px}#muse-controls summary{cursor:pointer}
#muse-image-field:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:4px 12px;align-items:center}#muse-image-field>label,#muse-image-field>input,#muse-image-field>button{grid-column:1}#muse-image-field>button{justify-self:start}#muse-image-preview{grid-column:2;grid-row:1/4;width:110px;max-height:72px;margin:0}#muse-controls{max-height:200px}


/* Coinseed shared select polish, 2026-10-16. */
/* Shared select presentation. The original select remains the value source. */
.studio-select { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.studio-select .studio-native-select { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; clip-path: inset(50%); pointer-events: none; }
.studio-select-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 74px; min-height: 34px; margin: 0; padding: 7px 11px; border: 1px solid #ffffff12; border-radius: 9px; background: #272a32; box-shadow: inset 0 1px 0 #ffffff03; color: #dce2ed; font: inherit; font-size: 12px; font-weight: 500; line-height: 18px; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.studio-select-trigger:hover:not(:disabled) { border-color: #ffffff23; background: #303540; color: #f0f3fa; }
.studio-select-trigger[aria-expanded=true] { border-color: #638cf578; background: #2b3242; box-shadow: 0 0 0 2px #638cf50d; }
.studio-select-trigger:focus-visible { outline: 2px solid #8ba9fa; outline-offset: 2px; }
.studio-select-trigger:disabled { opacity: .43; cursor: not-allowed; }
.studio-select-value { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.studio-select-chevron { display: block; flex: 0 0 12px; width: 12px; height: 12px; color: #929bab; transition: transform .16s ease, color .16s ease; }
.studio-select-trigger[aria-expanded=true] .studio-select-chevron { transform: rotate(180deg); color: #a9bef4; }
.control:has(> .studio-select) { gap: 7px; min-height: 34px; padding: 0 0 0 10px; border: 1px solid #ffffff0c; border-radius: 9px; background: #272a32; color: #99a2b3; font-size: 11px; transition: background .16s ease, border-color .16s ease; }
.control:has(> .studio-select):hover { border-color: #ffffff20; background: #303540; }
.control:has(> .studio-select-trigger[aria-expanded=true]),
.control:has(.studio-select-trigger[aria-expanded=true]) { border-color: #638cf56b; background: #2b3242; }
.control > .studio-select { flex: 0 1 auto; max-width: 214px; }
.control > .studio-select > .studio-select-trigger { min-height: 32px; min-width: 57px; padding: 6px 10px 6px 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-size: 11px; }
.control > .studio-select > .studio-select-trigger:hover { background: transparent; }
.control > .studio-select > .studio-select-trigger:focus-visible { outline-offset: 1px; }
.control > .icon { color: #99a2b3; }
.native-media-settings .studio-select { max-width: min(270px, 100%); }
#muse-controls > label > .studio-select { min-width: 145px; }
#muse-controls > .control > .studio-select { min-width: 0; }
.history-filters .studio-select { display: flex; width: 100%; max-width: none; }
.history-filters .studio-select-trigger { min-width: 0; min-height: 35px; border-radius: 8px; background: #20232b; font-size: 12px; }
.studio-select:has(#cu-model) { display: flex; width: 100%; max-width: none; }
.studio-select:has(#cu-model) .studio-select-trigger { min-width: 0; }
.studio-select-menu { position: fixed; inset: auto; top: var(--select-menu-top, 0px); left: var(--select-menu-left, 0px); z-index: 40; width: var(--select-menu-width, 240px); max-width: calc(100vw - 20px); max-height: var(--select-menu-max-height, 340px); margin: 0; padding: 0; overflow: hidden; border: 1px solid #ffffff17; border-radius: 13px; background: #21252e; box-shadow: 0 16px 48px #0007, inset 0 1px 0 #ffffff04; color: #dce2ed; color-scheme: dark; }
.studio-select-menu[hidden] { display: none !important; }
.studio-select-menu:focus { outline: none; }
.studio-select-menu:popover-open { animation: studio-select-enter .14s ease-out; }
.studio-select-menu::backdrop { background: transparent; }
.studio-select-title { margin: 0; padding: 10px 13px 8px; border-bottom: 1px solid #ffffff08; color: #929bad; font-size: 10px; font-weight: 500; line-height: 16px; }
.studio-select-options { max-height: calc(var(--select-menu-max-height, 340px) - 40px); padding: 5px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #485162 transparent; }
.studio-select-option { position: relative; display: block; width: 100%; min-height: 35px; margin: 1px 0; padding: 8px 33px 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #d4dce9; font-size: 12px; font-weight: 400; line-height: 19px; text-align: left; white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: background .12s ease, color .12s ease; }
.studio-select-option:hover:not([aria-disabled=true]),
.studio-select-option.is-active:not([aria-disabled=true]) { background: #ffffff0b; color: #f0f3fa; }
.studio-select-option[aria-selected=true] { background: #638cf51a; color: #b9ccff; font-weight: 500; }
.studio-select-option[aria-selected=true]:hover,
.studio-select-option[aria-selected=true].is-active { background: #638cf52b; color: #cbd9ff; }
.studio-select-option[aria-selected=true]::after { position: absolute; top: calc(50% - 6px); right: 13px; width: 5px; height: 9px; border: solid #91adfa; border-width: 0 1.7px 1.7px 0; content: ''; transform: rotate(45deg); }
.studio-select-option[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
.studio-select-group { padding: 10px 10px 5px; color: #7f8b9e; font-size: 10px; font-weight: 500; line-height: 15px; }
.studio-select-group:not(:first-child) { margin-top: 4px; border-top: 1px solid #ffffff08; }
@keyframes studio-select-enter { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .studio-select-trigger { min-height: 36px; font-size: 12px; }
  .control:has(> .studio-select) { min-height: 33px; padding-left: 8px; }
  .control > .studio-select { max-width: min(196px, 59vw); }
  .control > .studio-select > .studio-select-trigger { min-height: 31px; padding-right: 8px; font-size: 11px; }
  .studio-select-option { min-height: 40px; padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
  .studio-select-menu { border-radius: 12px; }
  .studio-select-title { padding-top: 11px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-select-trigger, .studio-select-chevron, .studio-select-option { transition: none; }
  .studio-select-menu:popover-open { animation: none; }
}


/* Music shares the compact composer controls. */
.music-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; }
.music-controls > label { display:flex; align-items:center; gap:8px; color:#aeb5c3; font-size:11px; }
.music-controls input { min-width:0; width:160px; min-height:30px; padding:5px 8px; border:1px solid #ffffff12; border-radius:7px; background:#292b33; color:#e5e9f0; font:inherit; }
.music-controls input[type=number] { width:84px; }
.music-controls input:focus-visible { outline:2px solid #75c5d5; outline-offset:2px; }
.music-controls > p { flex-basis:100%; margin:0; max-width:720px; color:#9da6b7; font-size:11px; line-height:1.6; }

/* One mode rail follows the active composer, including chat and native media. */
.workspace .composer-type-rail { display:flex; }
.workspace .composer-type-rail button { min-height:32px; height:32px; }
.workspace .composer-type-rail button:disabled { opacity:.45; cursor:default; }
.workspace .chat-panel { padding-inline:76px; }
.workspace .chat-form { position:relative; }
.workspace .chat-form .composer-type-rail,
.workspace .native-media-form .composer-type-rail { left:-65px; bottom:0; }
.image-reference-shell { position:relative; display:flex; flex-direction:column; align-items:center; flex:0 0 88px; width:88px; min-width:0; padding:9px 4px 0; }
.image-reference-shell .reference-tile { position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; flex-shrink:0; width:72px; height:83px; margin:0; padding:8px 3px; overflow:hidden; transform:rotate(-7deg); border:1px solid #3b3e47; border-radius:4px; background:#292b31; color:#9aa2ae; font-size:10px; line-height:1.5; }
.image-reference-shell .reference-tile > .icon { width:19px; height:19px; color:#a4acb9; }
.image-reference-shell .reference-tile:hover:not(:disabled) { border-color:#738292; color:#d0d8e2; background:#323843; }
.image-reference-shell .reference-tile:disabled { opacity:.65; cursor:default; }
.image-reference-shell .reference-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#191b21; }
.image-reference-help { max-width:88px; margin:10px 0 0; padding:0; color:#929aa7; font-size:9px; line-height:1.6; text-align:center; }
.image-reference-clear { min-height:24px; margin-top:2px; padding:0 3px; font-size:10px; }
.native-media-input-row { display:flex; align-items:flex-start; gap:17px; min-width:0; }
.native-media-input-row .native-media-prompt { flex:1 1 auto; min-width:0; }
#muse-image-ratio-field { max-width:180px; margin:0; font-size:11px; }
#muse-image-ratio-field select { max-width:140px; }
@media(max-width:760px) {
  .workspace .chat-panel { padding-inline:12px; }
  .workspace .composer-type-rail,
  .workspace .chat-form .composer-type-rail,
  .workspace .native-media-form .composer-type-rail { position:static; display:flex; flex-direction:row; justify-content:flex-start; align-self:flex-start; width:max-content; max-width:100%; margin:0 0 11px; padding:4px; gap:5px; border-radius:12px; }
  .workspace .composer-type-rail button { width:36px; height:36px; min-height:36px; }
  .workspace .composer-type-rail .icon { width:17px; height:17px; }
  .image-reference-shell { flex-basis:84px; width:84px; padding-top:8px; }
  .image-reference-shell .reference-tile { width:68px; height:75px; }
  .composer-main:has(> .image-reference-shell:not([hidden])) { flex-direction:row; gap:14px; }
  .composer-main:has(> .image-reference-shell:not([hidden])) .composer-prompt { flex:1 1 auto; min-width:0; width:auto; }
  .native-media-input-row { gap:13px; }
  #muse-image-ratio-field { max-width:170px; }
}


/* Readable controls: choices look interactive, fixed facts live in the model guide. */
.workspace .composer-toolbar { gap:8px; }
.workspace :is(#output-count,#formal-settings),
.workspace .native-media-settings > .model-badge,
.workspace label.is-fixed-parameter { display:none !important; }
.workspace #video-settings.is-fixed-specification { display:none !important; }
.workspace #generation-kind { min-height:0; margin:0; padding:0 2px; border:0; background:none; color:#a7b2c4; font-size:12px; }
.workspace :is(.composer-toolbar,.native-media-settings) .control,
.workspace #muse-controls > label:has(select) { gap:7px; min-height:36px; padding-left:10px; border:1px solid #ffffff12; border-radius:9px; background:#272a32; color:#a8b2c3; font-size:12px; }
.workspace :is(.composer-toolbar,.native-media-settings) .control > .studio-select,
.workspace #muse-controls > label > .studio-select { min-width:0; max-width:236px; }
.workspace :is(.composer-toolbar,.native-media-settings) .control > .studio-select > .studio-select-trigger,
.workspace #muse-controls > label > .studio-select > .studio-select-trigger { min-height:34px; padding:7px 10px 7px 0; border:0; background:transparent; box-shadow:none; color:#e0e5ef; font-size:12px; }
.workspace #composer-model-switch { min-height:36px; padding:7px 10px; border:1px solid #ffffff12; border-radius:9px; background:#252a34; color:#dce5f6; font-size:12px; }
.workspace #composer-model-switch > .icon:first-child { width:16px; height:16px; color:#a8bce9; }
.workspace #composer-model-switch .chip-chevron { width:12px; height:12px; }
.workspace .composer-topline { position:relative; display:flex; flex:0 0 auto; justify-content:flex-end; align-items:center; gap:12px; width:100%; min-width:0; min-height:30px; margin:0 0 12px; }
.workspace .composer-topline > .composer-billing { position:static; inset:auto; flex:0 1 auto; min-width:0; max-width:calc(100% - 112px); margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#c1a56c; font-size:11px; line-height:1.6; text-align:right; white-space:normal; overflow-wrap:anywhere; }
.workspace .composer-assets { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:6px; min-height:30px; margin:0; padding:5px 9px; border:1px solid #ffffff17; border-radius:8px; background:#242831; color:#c5cfdf; font:inherit; font-size:11px; line-height:18px; white-space:nowrap; }
.workspace .composer-assets .icon { width:16px; height:16px; color:#a9b9d5; }
.workspace .composer-assets:hover:not(:disabled) { background:#303744; border-color:#758ca644; color:#edf2fa; }
.workspace .composer-assets:disabled { opacity:.45; cursor:default; }
.workspace .composer-assets:focus-visible { outline:2px solid #8ba9fa; outline-offset:2px; }
.workspace-links .workspace-models-link { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 9px; border:1px solid transparent; border-radius:9px; color:#b5bfce; font-size:12px; text-decoration:none; }
.workspace-links .workspace-models-link:hover { border-color:#ffffff12; background:#242832; color:#edf2fa; }
.workspace-links .workspace-models-link .icon { width:17px; height:17px; }
.workspace-links .round-action .icon { width:18px; height:18px; }
.workspace .model-introduction { width:min(590px,100%); margin:0 auto; text-align:left; }
.workspace .model-introduction .model-welcome-title { display:block; margin:0 0 13px; color:#e3e8f0; font-size:19px; font-weight:500; line-height:1.4; text-align:center; letter-spacing:.01em; }
.workspace .model-guide { display:grid; gap:9px; margin:0; }
.workspace .model-guide > div { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:baseline; gap:15px; }
.workspace .model-guide dt { margin:0; color:#91a1b6; font-size:12px; font-weight:500; line-height:1.8; white-space:nowrap; }
.workspace .model-guide :is(dd,#model-summary) { margin:0; color:#bdc7d6; font-size:14px; font-weight:400; line-height:1.8; overflow-wrap:anywhere; text-wrap:pretty; }
.workspace .model-guide #model-summary { min-height:0; margin:0; padding:0; border:0; background:none; text-align:left; }
.workspace .model-guide > div:last-child dd { color:#bca77e; }
.workspace :is(.empty-result,.model-welcome) > img { width:76px; height:76px; margin:0 auto 16px; border:0; border-radius:0; object-fit:contain; }
.workspace .chat-empty.model-welcome,
.workspace .native-media-empty.model-welcome { gap:0; padding:12px 18px; }
.workspace .empty-result { padding-top:6px; }
.upscale-input-guide { display:flex; align-items:flex-start; gap:13px; padding:12px 0; }
.upscale-input-guide > .icon { flex:0 0 28px; width:28px; height:28px; color:#8bafd4; }
.upscale-input-guide strong { color:#cbd5e3; font-size:14px; font-weight:500; line-height:1.5; }
.upscale-input-guide p { margin:6px 0 0; color:#96a5b9; font-size:12px; line-height:1.7; }
@media(max-width:760px) {
  .workspace .composer-type-rail { gap:5px; }
  .workspace .composer-topline { gap:9px; margin-bottom:13px; }
  .workspace .composer-topline > .composer-billing { max-width:calc(100% - 99px); font-size:10px; }
  .workspace .composer-assets { gap:5px; min-height:31px; padding:5px 7px; font-size:10px; }
  .workspace .composer-assets .icon { width:15px; height:15px; }
  .workspace :is(.composer-toolbar,.native-media-settings) .control,
  .workspace #muse-controls > label:has(select) { font-size:11px; min-height:35px; padding-left:9px; }
  .workspace :is(.composer-toolbar,.native-media-settings) .control > .studio-select > .studio-select-trigger,
  .workspace #muse-controls > label > .studio-select > .studio-select-trigger { min-height:33px; font-size:11px; }
  .workspace #composer-model-switch { min-height:35px; font-size:11px; }
  .workspace .model-introduction .model-welcome-title { margin-bottom:13px; font-size:17px; }
  .workspace .model-guide { gap:8px; }
  .workspace .model-guide > div { grid-template-columns:43px minmax(0,1fr); gap:10px; }
  .workspace .model-guide dt { font-size:12px; }
  .workspace .model-guide :is(dd,#model-summary) { font-size:13px; line-height:1.7; }
  .workspace :is(.empty-result,.model-welcome) > img { width:54px; height:54px; margin-bottom:13px; }
  .workspace .chat-empty.model-welcome,
  .workspace .native-media-empty.model-welcome { padding-inline:0; }
  .workspace-links .workspace-models-link { gap:5px; padding-inline:5px; font-size:11px; }
  .workspace-links .workspace-models-link .icon { width:16px; height:16px; }
}

/* Keep the file action readable when chat metadata shares a narrow toolbar. */
.workspace .chat-toolbar > span:first-child { display:flex; align-items:center; gap:8px; min-width:0; }
.workspace #chat-add-file { flex-shrink:0; white-space:nowrap; }
@media(max-width:760px) {
  .workspace .chat-toolbar > span:first-child { flex:0 0 auto; max-width:none; }
  .workspace .chat-keyboard-hint { display:none; }
}

/* Welcome copy stays inside a scrollable stage even on short, narrow screens. */
.workspace .chat-empty.model-welcome,
.workspace .native-media-empty.model-welcome { height:auto; min-height:100%; justify-content:flex-start; justify-content:safe center; }
.workspace .model-welcome > img,
.workspace .model-welcome > .model-introduction { flex-shrink:0; }
.workspace .native-media-preview:has(> .native-media-empty:not([hidden])) { overflow-y:auto; overscroll-behavior:contain; }
.workspace .result-panel:has(.empty-result) .result-stage { align-items:flex-start; overflow:auto; overscroll-behavior:contain; }
.workspace .empty-result { flex:0 0 auto; }
.workspace-links .workspace-models-link { flex-shrink:0; white-space:nowrap; }
@media(max-width:380px) {
  .workspace-links .workspace-models-link { width:32px; justify-content:center; padding-inline:0; }
  .workspace-links .workspace-models-link > span { display:none; }
}

/* A single composer surface, with one accent and three clear working rows. */
.workspace .composer-frame { position:relative; border:1px solid #343c4c; border-radius:18px; background:#1c2029; box-shadow:0 7px 25px #0c101c26; }
.workspace :is(.composer-card,.native-media-form,.chat-form) { min-height:244px; padding:16px 18px 14px 88px; border-radius:18px; background:#1c2029; box-shadow:none; }
.workspace .composer-card { border:0; border-radius:inherit; }
.workspace :is(.native-media-form,.chat-form) { border:1px solid #343c4c; }
.workspace .composer-type-rail,
.workspace .chat-form .composer-type-rail,
.workspace .native-media-form .composer-type-rail { position:absolute; top:14px; bottom:14px; left:12px; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:5px; width:57px; max-width:none; margin:0; padding:1px 8px 1px 0; border:0; border-right:1px solid #ffffff0b; border-radius:0; background:none; }
.workspace .composer-type-rail button { display:flex; flex-direction:column; justify-content:center; align-items:center; flex:0 0 38px; gap:3px; width:45px; height:38px; min-height:38px; padding:3px; border:1px solid transparent; border-radius:8px; background:transparent; color:#929fb4; transition:background .18s,color .18s,border-color .18s; }
.workspace .composer-type-rail button:hover:not(:disabled) { background:#293142; color:#d2dfff; }
.workspace .composer-type-rail button[aria-pressed=true] { border-color:#638cf536; background:#638cf51c; color:#b3caff; }
.workspace .composer-type-rail button:focus-visible { outline:2px solid #8ba9fa; outline-offset:1px; }
.workspace .composer-type-rail .icon { width:16px; height:16px; }
.workspace .composer-type-rail { z-index:1; }
.workspace .composer-mode-label { flex-shrink:0; font-size:10px; line-height:12px; font-weight:500; white-space:nowrap; }
.workspace .composer-topline { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:30px; margin:0 0 14px; padding:0 0 10px; border-bottom:1px solid #ffffff09; }
.workspace .composer-topline > .composer-billing { grid-column:2; max-width:none; color:#a6b3c8; font-size:12px; line-height:1.65; }
.workspace .composer-topline > .composer-assets { grid-column:3; border-color:#ffffff12; background:transparent; color:#bac7db; }
.workspace .composer-topline > .composer-assets:hover:not(:disabled) { border-color:#638cf550; background:#638cf50e; }
.workspace .composer-tools-rail { position:static; display:flex; grid-column:1; flex-direction:row; align-self:auto; align-items:center; gap:2px; width:auto; margin:0; padding:0; border:0; border-radius:0; background:none; }
.workspace .composer-tools-rail button { display:grid; place-items:center; width:28px; height:28px; min-height:28px; padding:5px; border:0; border-radius:6px; background:transparent; color:#8998b0; }
.workspace .composer-tools-rail button:hover:not(:disabled) { background:#2a3343; color:#c6d6ef; }
.workspace .composer-tools-rail button:focus-visible { outline:2px solid #8ba9fa; outline-offset:1px; }
.workspace .composer-tools-rail .icon { width:16px; height:16px; opacity:.8; }
.workspace .composer-main { gap:20px; min-height:106px; align-items:flex-start; }
.workspace .composer-prompt { align-self:stretch; min-height:106px; }
.workspace .composer-prompt .field-heading { top:auto; right:0; bottom:0; pointer-events:none; }
.workspace #prompt { height:106px; min-height:106px; max-height:106px; padding:1px 0 18px; font-size:14px; line-height:1.75; }
.workspace :is(#prompt,#native-media-input,#chat-input)::placeholder { color:#8491a5; }
.workspace :is(#native-media-input,#chat-input) { height:106px; min-height:106px; max-height:106px; font-size:14px; line-height:1.75; }
.workspace .image-reference-shell { flex-basis:82px; width:82px; padding:2px 3px 0; }
.workspace .image-reference-shell .reference-tile { width:67px; height:78px; border-color:#455064; background:#252c38; color:#aab5c7; }
.workspace .image-reference-help { max-width:82px; margin-top:8px; color:#96a2b5; font-size:10px; }
.workspace .composer-reference { align-self:flex-start; margin-top:2px; }
.workspace #video-options:has(> .reference-extras[hidden]) { flex:0 0 88px; width:88px; grid-template-columns:minmax(0,1fr); padding-inline:7px; }
.workspace .composer-reference .reference-tile { border-color:#455064; background:#252c38; }
.workspace .composer-bottom { align-items:center; flex-wrap:wrap; gap:12px; margin-top:13px; padding-top:12px; border-top:1px solid #ffffff0b; }
.workspace .composer-toolbar { flex:1 1 320px; align-items:center; gap:7px; }
.workspace :is(.composer-toolbar,.native-media-settings) .control,
.workspace #muse-controls > label:has(select) { min-height:34px; border-color:#414c605c; background:#252c38; }
.workspace #composer-model-switch { min-height:34px; border-color:#414c605c; background:#252c38; color:#d3def0; }
.workspace .composer-submit-stack { position:relative; inset:auto; display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:12px; width:auto; height:auto; margin-left:auto; }
.workspace #examples-toggle { position:static; display:inline-flex; width:auto; height:32px; min-height:32px; padding:5px 4px; border:0; border-radius:5px; background:transparent; color:#a3b2c9; font-size:12px; line-height:1.5; }
.workspace #examples-toggle:disabled { display:none; }
.workspace #examples-toggle:hover:not(:disabled),
.workspace #examples-toggle[aria-expanded=true] { background:transparent; color:#c9d9f5; }
.workspace #examples-list { bottom:calc(100% + 10px); right:0; width:200px; border-color:#3e4a5e; background:#252d3a; box-shadow:0 10px 25px #0e142b40; }
.workspace #examples-list button { background:transparent; color:#c7d2e5; font-size:12px; }
.workspace #examples-list button:hover { background:#638cf51c; }
.workspace :is(#generate-button,#native-media-send,#chat-send) { display:inline-flex; flex:0 0 auto; justify-content:center; align-items:center; gap:9px; width:auto; min-width:110px; height:38px; min-height:38px; padding:8px 15px; border:1px solid #8cacf949; border-radius:9px; background:#638cf5; color:#101d38; font-size:13px; font-weight:600; line-height:20px; white-space:nowrap; transition:background .18s,box-shadow .18s,transform .18s; }
.workspace :is(#generate-button,#native-media-send,#chat-send):hover:not(:disabled) { background:#7b9ff9; box-shadow:0 3px 12px #3559aa2b; }
.workspace :is(#generate-button,#native-media-send,#chat-send):active:not(:disabled) { transform:translateY(1px); }
.workspace :is(#generate-button,#native-media-send,#chat-send):focus-visible { outline:2px solid #a9c0fa; outline-offset:3px; }
.workspace :is(#generate-button,#native-media-send,#chat-send):disabled { background:#638cf5; color:#101d38; opacity:.46; }
.workspace #generate-button .icon { width:17px; height:17px; transform:none; }
.workspace :is(#native-media-send,#chat-send)::before { content:none; }
.workspace :is(#native-media-send,#chat-send)::after { content:'→'; font-size:18px; font-weight:400; line-height:18px; }
.workspace .native-media-tools,
.workspace .chat-toolbar { align-items:center; flex-wrap:wrap; gap:10px; margin-top:13px; padding-top:12px; border-top:1px solid #ffffff0b; }
.workspace .native-media-settings { flex:1 1 230px; gap:7px; }
.workspace .native-media-tools > :is(#native-media-count,#native-media-stop) { font-size:11px; }
.workspace #native-media-send { margin-left:auto; }
.workspace .chat-toolbar > div:last-child { margin-left:auto; gap:10px; }
.workspace #chat-add-file { min-height:32px; padding:5px 8px; border:1px solid #414c605c; border-radius:7px; background:#252c38; color:#c0cee4; font-size:12px; }
.workspace :is(.chat-keyboard-hint,#chat-count) { color:#8493aa; font-size:10px; }
.workspace .chat-context-details { font-size:11px; }
.workspace .chat-context-details summary { padding:7px 0; color:#96a6bf; cursor:pointer; }
.workspace .chat-context-details[open] > p { max-width:560px; margin:6px 0; color:#aab9cf; font-size:12px; line-height:1.7; }
.workspace .chat-files:empty { display:none; }
.workspace .chat-files { margin-top:8px; }
.workspace .native-media-input-row { align-items:flex-start; gap:20px; }
/* Compact setup rows keep capabilities and explanatory gates readable. */
.workspace :is(.media-controls,#h3-image-inputs) { max-height:min(136px,24dvh); margin:0 0 10px; padding:0 0 9px; border:0; border-bottom:1px solid #ffffff09; color:#a8b6cc; font-size:12px; line-height:1.6; }
.workspace #h3-reference-controls,
.workspace #h3-image-inputs { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-width:0; }
.workspace #h3-image-inputs > legend { display:none; }
.workspace :is(#h3-image-inputs,#h3-reference-controls) > .quiet { min-height:30px; padding:4px 8px; border:1px solid #414c605c; border-radius:7px; background:#252c38; font-size:11px; }
.workspace #h3-reference-controls > label:not(.control) { display:inline-flex; align-items:center; gap:7px; font-size:11px; }
.workspace #h3-reference-controls > label > input[type=checkbox] { flex:0 0 13px; width:13px; height:13px; margin:0; accent-color:#638cf5; }
.workspace :is(#h3-reference-controls,#h3-image-inputs) > :is(p,ol) { margin:0; color:#95a4bb; font-size:11px; line-height:1.6; }
.workspace :is(#h3-audio-list,#h3-image-list):empty { display:none; }
.workspace #h3-reference-help { flex:1 1 100%; }
.workspace #h3-image-help { flex:1 1 100%; }
.workspace #muse-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; }
.workspace #muse-controls > :is(label,p,details) { margin:0; }
.workspace #muse-controls > p { flex:1 1 320px; color:#95a4bb; font-size:11px; }
.workspace #muse-controls details { font-size:11px; }
.workspace #muse-image-field:not([hidden]) { flex:1 1 100%; margin:0; }
.workspace #media-audio-fields { display:flex; align-items:center; flex-wrap:wrap; gap:7px 14px; }
.workspace #media-audio-fields > .media-control-row { gap:8px; }
.workspace #media-audio-fields > p { flex:1 1 100%; margin:0; color:#95a4bb; font-size:11px; }
.workspace .composer-optional { flex:0 0 auto; color:#a2b3cd; font-size:12px; }
.workspace .composer-optional > summary { padding:7px 0; cursor:pointer; }
.workspace .composer-optional[open] { flex:1 1 100%; }
.workspace .composer-optional .media-instructions-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.workspace .composer-optional #media-instructions { height:44px; min-height:44px; max-height:64px; margin:0; padding:7px 9px; border-color:#3b485f; background:#232b37; font-size:13px; }
.workspace :is(.media-spec-message,.native-media-size-help) { font-size:11px; }
.workspace .native-media-size-help { margin:0; }
.workspace .upscale-input-guide { padding-top:6px; }
.workspace .upscale-input-guide strong { font-size:14px; }
/* The expanded editor is the same surface; its tool group stays in the header. */
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-frame { display:flex; flex-direction:column; min-height:0; padding:0; }
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-card { flex:1 1 auto; min-height:0; padding-left:88px; }
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-type-rail { position:absolute; align-self:auto; }
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-tools-rail { position:static; align-self:auto; }
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-main { flex:1 1 auto; }
.workspace .editor.composer-778:is(:fullscreen,.composer-expanded) #prompt { flex:1 1 auto; height:auto; min-height:180px; max-height:none; }
@media(max-width:760px) {
  .workspace .composer-frame { border-radius:15px; }
  .workspace :is(.composer-card,.native-media-form,.chat-form) { min-height:0; padding:11px 12px 12px; border-radius:15px; }
  .workspace .composer-card { max-height:min(62dvh,470px); overflow-y:auto; }
  .workspace .composer-type-rail,
  .workspace .chat-form .composer-type-rail,
  .workspace .native-media-form .composer-type-rail { position:static; flex-direction:row; justify-content:space-between; gap:3px; width:100%; max-width:100%; margin:0 0 10px; padding:0 0 9px; border:0; border-bottom:1px solid #ffffff0b; }
  .workspace .composer-frame > .composer-type-rail { width:calc(100% - 24px); margin:10px 12px 0; }
  .workspace .composer-type-rail button { flex:1 1 0; width:auto; height:34px; min-height:34px; padding:3px 4px; flex-direction:row; gap:4px; }
  .workspace .composer-type-rail .icon { width:15px; height:15px; }
  .workspace .composer-mode-label { font-size:11px; line-height:16px; }
  .workspace .composer-topline { gap:7px; min-height:28px; margin-bottom:12px; padding-bottom:9px; }
  .workspace .composer-topline > .composer-billing { font-size:10px; line-height:1.6; }
  .workspace .composer-topline > .composer-assets { width:28px; min-height:28px; padding:5px; }
  .workspace .composer-assets > span { display:none; }
  .workspace .composer-tools-rail { gap:0; }
  .workspace .composer-tools-rail button { width:26px; height:27px; min-height:27px; padding:5px; }
  .workspace .composer-tools-rail .icon { width:15px; height:15px; }
  .workspace .composer-main { gap:14px; min-height:96px; }
  .workspace .composer-prompt { min-height:96px; }
  .workspace :is(#prompt,#native-media-input,#chat-input) { height:96px; min-height:96px; max-height:96px; font-size:13px; }
  .workspace .image-reference-shell { flex-basis:68px; width:68px; padding-inline:2px; }
  .workspace .image-reference-shell .reference-tile { width:57px; height:70px; }
  .workspace .image-reference-help { width:68px; margin-top:7px; font-size:9px; }
  .workspace .composer-bottom { gap:10px; margin-top:10px; padding-top:10px; }
  .workspace .composer-toolbar { flex-basis:100%; gap:6px; }
  .workspace .composer-submit-stack { gap:13px; }
  .workspace :is(#generate-button,#native-media-send,#chat-send) { min-width:104px; height:37px; min-height:37px; padding:8px 13px; font-size:12px; }
  .workspace #examples-toggle { font-size:11px; }
  .workspace .native-media-tools,
  .workspace .chat-toolbar { gap:8px; }
  .workspace .native-media-settings { flex-basis:100%; }
  .workspace .chat-toolbar > span:first-child { margin-right:auto; }
  .workspace .chat-toolbar > div:last-child { gap:7px; }
  .workspace .chat-context-details { order:3; flex:1 1 100%; }
  .workspace .chat-context-details summary { padding:3px 0; }
  .workspace :is(.media-controls,#h3-image-inputs) { max-height:min(150px,24dvh); }
  .workspace #muse-controls > p { flex-basis:100%; }
  .workspace #media-audio-fields > .media-control-row { flex-wrap:wrap; }
  .workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-frame { display:flex; }
  .workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-card { padding:12px; }
  .workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-type-rail { position:static; }
  .workspace .editor.composer-778:is(:fullscreen,.composer-expanded) #prompt { min-height:160px; }
}
@media(prefers-reduced-motion:reduce) {
  .workspace .composer-type-rail button,
  .workspace :is(#generate-button,#native-media-send,#chat-send) { transition:none; }
}

/* Extra input settings scroll as a group; the prompt and action row remain distinct. */
.workspace .composer-configuration { flex:0 1 auto; min-height:0; max-height:148px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#46546a transparent; }
.workspace .composer-configuration > :is(.media-controls,#h3-image-inputs) { max-height:none; overflow:visible; }
@media(max-width:760px) {
  .workspace .composer-card { max-height:min(52dvh,430px); }
  .workspace .composer-configuration { max-height:112px; }
  .workspace .composer-main:has(> #video-options:not([hidden]) > .reference-extras[hidden]) { flex-direction:row; gap:14px; }
  .workspace .composer-main:has(> #video-options:not([hidden]) > .reference-extras[hidden]) .composer-prompt { flex:1 1 auto; min-width:0; width:auto; }
  .workspace .editor.composer-778:is(:fullscreen,.composer-expanded) .composer-card { max-height:none; }
}

/* A quiet edge separates scrollable setup from the writing surface. */
.workspace .composer-configuration { position:relative; --setup-fade:0px; scroll-padding-bottom:10px; }
.workspace .composer-configuration:has(> #h3-reference-controls:not([hidden]),> #h3-image-inputs:not([hidden]),> #muse-controls:not([hidden]),> #media-controls:not([hidden]) #media-audio-fields:not([hidden]),> #media-controls:not([hidden]) .media-ref-slot,> #media-controls:not([hidden]) .media-source-field:not([hidden]),> #media-controls:not([hidden]) [data-show-help=true]) { --setup-fade:10px; max-height:140px; margin-bottom:8px; padding-bottom:10px; border-bottom:1px solid #ffffff0b; }
.workspace .composer-configuration::after { content:''; display:block; position:sticky; bottom:0; height:var(--setup-fade); margin-top:calc(-1 * var(--setup-fade)); background:linear-gradient(to bottom,#1c202900,#1c2029); pointer-events:none; }
@media(max-width:760px) {
  .workspace .composer-configuration:has(> #h3-reference-controls:not([hidden]),> #h3-image-inputs:not([hidden]),> #muse-controls:not([hidden]),> #media-controls:not([hidden]) #media-audio-fields:not([hidden]),> #media-controls:not([hidden]) .media-ref-slot,> #media-controls:not([hidden]) .media-source-field:not([hidden]),> #media-controls:not([hidden]) [data-show-help=true]) { max-height:104px; }
}

/* Selected reference 04: smoked glass, fine spectral rim and low, diffused colour. */
.workspace .glass-dock{--dock-height:108px;position:relative;display:grid;grid-template-columns:var(--dock-height) minmax(0,1fr);gap:16px;align-items:start;width:100%;margin-top:48px;isolation:isolate}
.workspace .glass-dock.has-open-panel{z-index:35}
.workspace .glass-dock .glass-surface{position:relative;grid-column:2;box-sizing:border-box;width:100%;height:var(--dock-height);min-height:0;max-height:none;margin:0;padding:14px 20px 10px;border:1px solid transparent;border-radius:32px;overflow:visible;background:linear-gradient(115deg,rgba(25,25,29,.96),rgba(21,21,25,.93) 53%,rgba(28,27,25,.95)) padding-box,linear-gradient(115deg,#8963b88c,#8c748745 36%,#b48e5a69 67%,#a7bc7775) border-box;box-shadow:inset 0 1px 0 #ffffff0b,inset 0 -12px 28px -20px #cc719d60,0 8px 32px #0005;backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%)}
.workspace .glass-dock .glass-surface:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 8% 100%,#8251ba1f,transparent 46%),radial-gradient(ellipse at 57% 100%,#cf548124,transparent 43%),radial-gradient(ellipse at 97% 100%,#ba9d4820,transparent 35%);z-index:-1}
.workspace .glass-dock:after{content:"";position:absolute;z-index:-2;bottom:-8px;left:calc(var(--dock-height) + 60px);right:24px;height:36px;pointer-events:none;background:linear-gradient(100deg,#9356da15,#dc578b18,#b4b77d10);filter:blur(24px)}
.workspace .glass-dock .dock-context{position:absolute;top:-35px;right:8px;left:calc(var(--dock-height) + 16px);height:auto;min-height:24px;display:flex;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;gap:5px 12px;padding:0;margin:0;overflow:visible;pointer-events:auto}
.workspace .dock-current-model{font-size:12px;font-weight:550;color:#e1dce8;white-space:nowrap}
.workspace .dock-context .composer-billing{position:static;display:block;min-height:0;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font-size:11px;line-height:1.5;color:#bdabc7;text-align:right;white-space:normal;overflow-wrap:anywhere}
.workspace .glass-dock .dock-launcher{position:relative;grid-row:1;grid-column:1;height:var(--dock-height)}
.workspace .glass-dock .dock-orb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:var(--dock-height);height:var(--dock-height);min-width:0;margin:0;padding:0;border:1px solid #a79ab63a;border-radius:50%;color:#eee9f3;background:radial-gradient(circle at 32% 18%,#4d405645,#1b191e 63%);box-shadow:inset 0 1px 1px #ffffff14,0 8px 24px #0004;transition:border-color .2s,box-shadow .2s,transform .2s}
.workspace .glass-dock .dock-orb:hover,.workspace .glass-dock .dock-orb[aria-expanded=true]{border-color:#a897bc99;box-shadow:inset 0 1px 2px #ffffff1a,0 0 24px #8c69b51c;transform:translateY(-1px)}
.workspace .dock-orb .icon{width:25px;height:25px}.workspace .dock-orb-label{font-size:11px;letter-spacing:.08em}
.workspace .glass-dock :is(button,input,textarea,summary):focus-visible{outline:2px solid #b9a1d7;outline-offset:4px}
.workspace .glass-dock :is(.composer-main,.native-media-input-row,.native-media-prompt,.composer-prompt){display:block;position:static;width:100%;min-width:0;min-height:0;margin:0;padding:0;overflow:visible}
.workspace .glass-dock :is(#prompt,#native-media-input,#chat-input){position:static;display:block;box-sizing:border-box;width:100%;height:43px;min-height:43px;max-height:43px;padding:1px 4px;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;resize:none;overflow-y:auto;color:#e9e5ee;font-size:13px;line-height:21px;scrollbar-width:thin;scrollbar-color:#665d7170 transparent}
.workspace .glass-dock textarea::placeholder{color:#89828f;opacity:1}
.workspace .glass-dock :is(.field-heading,.composer-bottom,.native-media-tools,.chat-toolbar){display:contents}
.workspace .glass-dock .dock-actions{position:static;display:flex;align-items:center;gap:5px;width:100%;height:32px;min-height:0;margin:5px 0 0;padding:0;background:none;border:0}
.workspace .glass-dock .dock-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;position:static;width:auto;height:30px;min-height:30px;margin:0;padding:0 9px;border:0;border-radius:9px;background:transparent;color:#b7aebf;font-size:11px;line-height:1;box-shadow:none;white-space:nowrap;transition:background .16s,color .16s}
.workspace .glass-dock .dock-action:hover,.workspace .glass-dock .dock-action[aria-expanded=true]{background:#ffffff0a;color:#f3e9ff}
.workspace .dock-action .icon{width:17px;height:17px}.workspace .dock-action .ui-symbol{opacity:.8;filter:invert(1)}
.workspace .glass-dock .dock-actions :is(#generate-button,#native-media-send,#chat-send){position:static;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;gap:5px;width:auto;height:32px;min-height:32px;min-width:60px;max-width:180px;margin:0 0 0 auto;padding:0 13px;border:1px solid #a697b22b;border-radius:17px;background:#dcd2e8;color:#211b28;font-size:11px;font-weight:600;line-height:1;box-shadow:0 1px 8px #0003;transform:none}
.workspace .glass-dock .dock-actions :is(#generate-button,#native-media-send,#chat-send):disabled{opacity:.38;cursor:not-allowed}
.workspace .glass-dock #generate-button .icon{width:14px;height:14px;transform:rotate(-90deg)}
.workspace .glass-dock .dock-actions :is(#prompt-count,#native-media-count,#chat-count){position:static;order:0;width:auto;margin-left:auto;padding:0 7px;color:#81788b;font-size:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.workspace .glass-dock .dock-actions :is(#generate-button,#native-media-send,#chat-send){order:2;margin-left:3px}
.workspace .glass-dock :is(#native-media-stop,#chat-stop){order:1;margin-left:auto}
.workspace .glass-dock #examples-toggle{position:static;flex:0 0 auto;height:30px;min-height:30px;padding:0 9px;border:0;background:none;color:#9b91a6;font-size:11px}
.workspace .glass-dock :is(#composer-type-rail,#composer-model-switch,#native-media-model,.chat-keyboard-hint){display:none!important}
.workspace .glass-dock :is(.form-message,.native-media-feedback){position:absolute;top:calc(100% + 13px);left:18px;right:12px;height:auto;margin:0;font-size:11px;line-height:1.55}
.workspace .glass-dock .form-message:empty{display:none}.workspace .glass-dock .native-media-feedback{display:flex;gap:5px 12px;flex-wrap:wrap;align-items:center}
.workspace .glass-dock .native-media-feedback p{margin:0;font-size:10px}.workspace .glass-dock #examples-list{bottom:calc(100% + 12px);right:20px;z-index:40}
.workspace .composer-frame{display:block;padding:0;border:0;background:none;box-shadow:none;overflow:visible;min-height:0}
.workspace #composer-editor{padding:0 0 26px;overflow:visible}.workspace .composer-note{margin-left:124px;margin-top:28px;font-size:10px;opacity:.65}
.workspace .native-media-editor{padding-bottom:48px;overflow:visible}
.workspace .glass-dock .dock-panel{position:absolute;z-index:50;bottom:calc(100% + 48px);right:0;left:auto;box-sizing:border-box;width:min(560px,calc(100vw - var(--sidebar-width,273px) - 65px));max-height:min(490px,calc(100dvh - 210px));margin:0;padding:16px;border:1px solid #71697c66;border-radius:21px;background:linear-gradient(145deg,#26232bf7,#19181ffb);box-shadow:inset 0 1px 0 #ffffff0a,0 24px 80px #0009;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);overflow:auto;color:#d6cfdf;animation:dock-reveal .2s cubic-bezier(.2,.8,.2,1);transform-origin:bottom right;scrollbar-width:thin;scrollbar-color:#6a60784d transparent}
.workspace .glass-dock .dock-models{left:0;right:auto;width:min(450px,calc(100vw - var(--sidebar-width,273px) - 65px));bottom:calc(100% + 14px);transform-origin:bottom left}
.workspace .dock-launcher:before{content:"";position:absolute;left:0;bottom:100%;width:100%;height:18px}
.workspace .dock-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 12px;padding:0 0 9px;border-bottom:1px solid #ffffff0a}
.workspace .dock-panel-heading>strong{font-size:13px;font-weight:550;letter-spacing:.02em}
.workspace .dock-dismiss{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#ffffff05;color:#a99eb5;font-size:21px;line-height:1}
.workspace .dock-panel-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.workspace .dock-menu-hint{color:#a297ad;font-size:11px;line-height:1.65;margin:0 0 12px}
.workspace .dock-mode-tabs{display:flex;gap:3px;padding:4px;border-radius:12px;background:#0003;margin-bottom:12px}
.workspace .dock-mode-tabs button{flex:1;height:32px;border:0;border-radius:8px;background:none;color:#aca1b7;font-size:12px;padding:0 9px;transition:background .15s,color .15s}
.workspace .dock-mode-tabs button[aria-pressed=true]{background:#d8c8ed1c;color:#eee1ff;box-shadow:inset 0 1px 0 #ffffff0c}
.workspace .dock-model-search{box-sizing:border-box;width:100%;height:35px;padding:0 12px;border:1px solid #ffffff0c;border-radius:10px;background:#0002;color:#e4d9f0;font-size:12px;margin-bottom:10px}
.workspace .dock-model-list{display:flex;flex-direction:column;gap:3px}
.workspace .dock-model-option{display:flex;align-items:center;gap:12px;min-height:57px;width:100%;padding:9px;border:1px solid transparent;border-radius:11px;background:none;color:#d8cfdf;text-align:left}
.workspace .dock-model-option:hover{background:#ffffff06}.workspace .dock-model-option[aria-pressed=true]{background:#b29bc010;border-color:#9b82ad3d}
.workspace .dock-model-logo{display:block;width:31px;height:31px;object-fit:contain;border-radius:8px;padding:3px;background:#ffffff05}
.workspace .dock-model-copy{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0}.workspace .dock-model-copy strong{font-size:12px;font-weight:550}.workspace .dock-model-copy small{font-size:10px;color:#94899f}.workspace .dock-model-check{color:#c7addf;font-size:14px}
.workspace .dock-panel :is(.composer-configuration,.composer-toolbar,.native-media-settings,.media-controls,.media-control-row,.video-settings,.size-grid,.native-media-custom-fields,.dock-attachment-group){position:static;display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;width:100%;max-width:none;max-height:none;min-height:0;padding:0;margin:0;overflow:visible;border:0;border-radius:0;box-shadow:none;background:none;mask-image:none}
.workspace .dock-panel .composer-configuration{flex-direction:column}.workspace .dock-panel .composer-configuration:before,.workspace .dock-panel .composer-configuration:after{display:none}
.workspace .dock-panel :is(.control,label){height:auto;min-height:0;margin:0;padding:0;border:0;background:none;color:#b5a9bf;font-size:11px;line-height:1.6}
.workspace .dock-panel :is(.control,#muse-controls>label){display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.workspace .dock-panel .studio-select{max-width:100%}.workspace .dock-panel .studio-select-trigger{height:36px;min-height:36px;padding:0 11px;border:1px solid #ffffff0c;border-radius:10px;background:#ffffff05;font-size:12px}
.workspace .dock-panel :is(input[type=text],input[type=number],textarea){box-sizing:border-box;min-height:36px;max-width:100%;padding:8px 10px;border:1px solid #ffffff0f;border-radius:10px;background:#0002;color:#e5ddec;font-size:12px}
.workspace .dock-panel :is(p,.help,.media-spec-message,.native-media-size-help){width:100%;margin:0;line-height:1.65;font-size:11px;color:#a297ad;white-space:normal;overflow-wrap:anywhere}
.workspace .dock-panel :is(details,.native-media-help,.chat-context-details){position:static;display:block;width:100%;height:auto;max-width:none;padding:0;border:0;background:none}
.workspace .dock-panel summary{padding:5px 0;color:#beb0cb;font-size:12px;cursor:pointer}
.workspace .dock-panel :is(.image-reference-shell,.composer-reference){position:static;display:flex;flex-wrap:wrap;align-items:center;gap:12px;width:100%;max-width:100%;margin:0;padding:0;transform:none}
.workspace .dock-panel :is(.reference-tile,.reference-extra,.upload-zone){position:relative;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:auto;height:46px;min-width:120px;margin:0;padding:0 14px;border:1px solid #a68cb126;border-radius:12px;background:#b29ac409;color:#d2c3e0;transform:none;box-shadow:none}
.workspace .dock-panel .reference-tile img{position:static;width:34px;height:34px;object-fit:cover;border-radius:6px}.workspace .dock-panel .reference-extras{display:flex;gap:10px;flex-wrap:wrap;position:static;margin:0}
.workspace .dock-panel :is(.media-reference-slots,.media-source-field){display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:100%}
.workspace .dock-panel :is(button.quiet,.composer-assets){position:static;display:inline-flex;align-items:center;gap:7px;width:auto;min-height:34px;padding:6px 12px;border:1px solid #ffffff0d;border-radius:9px;background:#ffffff05;color:#c4b6cf;font-size:11px;box-shadow:none;transform:none}
.workspace .dock-panel :is(.image-reference-help,.file-row){position:static;width:100%;white-space:normal}.workspace .dock-panel .composer-tools-rail{position:static;display:flex;gap:8px;width:100%;padding-top:12px;border-top:1px solid #ffffff0a}
.workspace .dock-panel .composer-tools-rail button{position:static;width:34px;height:34px;padding:8px;border-radius:9px;background:#ffffff06;border:1px solid #ffffff0c}
.workspace .dock-panel #muse-image-preview{width:100px;height:72px;object-fit:contain}
.workspace .glass-dock #upscale-input-guide{height:43px;min-height:0;padding:0;gap:8px;margin:0;align-items:center}.workspace .glass-dock #upscale-input-guide p{display:none}.workspace .glass-dock #upscale-input-guide strong{font-size:12px;font-weight:400;color:#b4a8be}
.workspace .glass-dock [hidden],.workspace .glass-dock .dock-panel [hidden]{display:none!important}
.workspace .composer-expanded .glass-dock{margin-top:auto}.workspace .composer-expanded .glass-surface{--dock-height:180px;height:180px}.workspace .composer-expanded #prompt{height:115px;min-height:115px;max-height:115px}.workspace .composer-expanded .dock-launcher{height:180px;display:flex;align-items:center}
@keyframes dock-reveal{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:900px){.workspace .glass-dock{--dock-height:104px;gap:12px}.workspace .glass-dock .dock-panel{width:min(520px,calc(100vw - 48px))}.workspace .glass-dock .dock-models{width:min(420px,calc(100vw - 48px))}.workspace .dock-context .composer-billing{font-size:10px}.workspace .composer-note{margin-left:116px}}
@media(max-width:600px){.workspace .glass-dock{--dock-height:104px;gap:9px;grid-template-columns:64px minmax(0,1fr);margin-top:60px}.workspace .glass-dock .dock-launcher{height:104px;display:flex;align-items:center}.workspace .glass-dock .dock-orb{width:64px;height:64px;gap:5px}.workspace .dock-orb .icon{width:21px;height:21px}.workspace .dock-orb-label{font-size:10px}.workspace .glass-dock .glass-surface{padding:12px 12px 9px;border-radius:25px}.workspace .glass-dock .dock-context{left:0;right:3px;top:-47px;gap:3px 8px;max-height:42px;overflow:auto}.workspace .dock-context .composer-billing{font-size:10px}.workspace .glass-dock .dock-panel{max-height:calc(100dvh - 225px);bottom:calc(100% + 60px);width:calc(100vw - 32px);right:-1px;border-radius:18px;padding:14px}.workspace .glass-dock .dock-models{left:-2px;bottom:calc(100% + 60px);width:calc(100vw - 32px)}.workspace .glass-dock .dock-action{padding:0 6px}.workspace .glass-dock .dock-action span{display:none}.workspace .glass-dock .dock-actions{gap:3px}.workspace .glass-dock .dock-actions :is(#prompt-count,#native-media-count,#chat-count){display:none}.workspace .glass-dock #examples-toggle{padding:0 5px;font-size:10px}.workspace .glass-dock .dock-actions :is(#generate-button,#native-media-send,#chat-send){height:30px;min-height:30px;min-width:50px;padding:0 10px}.workspace .composer-note{margin-left:73px;font-size:9px}.workspace .dock-model-copy strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.workspace .glass-dock *{animation:none!important;transition:none!important}}

.workspace .glass-dock .dock-context{width:auto;max-width:none}
.workspace .glass-dock .dock-models{z-index:60}
@media(max-width:600px){.workspace .glass-dock{grid-template-columns:104px minmax(0,1fr)}.workspace .glass-dock .dock-orb{width:104px;height:104px}.workspace .composer-note{margin-left:113px}}

.workspace .dock-panel :is(.composer-toolbar,.media-control-row,.video-settings,.native-media-settings){flex:0 1 auto;height:auto;align-content:flex-start}
.workspace .dock-panel .composer-configuration{flex:0 1 auto;height:auto}
.workspace .composer-expanded .glass-dock{--dock-height:180px}

@media(max-width:600px){.workspace #composer-editor{width:100%;max-width:100%;box-sizing:border-box;padding:0 12px 26px}.workspace .composer-frame{width:100%;max-width:100%}.workspace .glass-dock .dock-models{left:0}.workspace .native-media-editor{padding-left:12px;padding-right:12px}.workspace #chat-panel>.glass-dock{width:calc(100% - 24px);margin-left:12px;margin-right:12px}}

.workspace :is(.native-media-editor,#chat-panel)>.glass-dock{max-width:1176px;margin-inline:auto}
.workspace #chat-panel>.glass-dock{width:100%;flex:0 0 auto;margin-bottom:26px}
@media(max-width:600px){.workspace #chat-panel>.glass-dock{width:100%;margin-inline:0;margin-bottom:26px}}

.workspace #composer-editor{padding:0 24px 26px}
.workspace .native-media-editor{padding:0 24px 48px}
.workspace #chat-panel{padding-inline:24px}
@media(max-width:600px){.workspace #composer-editor{padding:0 12px 26px}.workspace .native-media-editor{padding:0 12px 48px}.workspace #chat-panel{padding-inline:12px}}

/* Compact model launcher and readable, catalog-backed capability captions. */
.workspace .glass-dock{--dock-launcher-size:64px;--dock-gap:14px;grid-template-columns:var(--dock-launcher-size) minmax(0,1fr);gap:var(--dock-gap)}
.workspace .glass-dock .dock-launcher{display:flex;align-items:center;height:var(--dock-height)}
.workspace .glass-dock .dock-orb{width:var(--dock-launcher-size);height:var(--dock-launcher-size);min-height:var(--dock-launcher-size);gap:6px;border-radius:20px;border-color:#a79ab628;box-shadow:inset 0 1px 1px #ffffff0a,0 5px 16px #0003}
.workspace .glass-dock .dock-orb .icon{width:22px;height:22px}
.workspace .glass-dock .dock-orb-label{font-size:10px;letter-spacing:.04em}
.workspace .glass-dock .dock-context{left:calc(var(--dock-launcher-size) + var(--dock-gap))}
.workspace .glass-dock:after{left:calc(var(--dock-launcher-size) + 60px)}
.workspace .composer-note{margin-left:78px}
.workspace .dock-model-option{min-height:62px}
.workspace .dock-model-copy small{font-size:11px;line-height:1.55;color:#aca0b8;white-space:normal;overflow-wrap:anywhere}
.workspace .dock-model-availability{white-space:nowrap;color:#aca0b8}
.workspace .dock-model-availability[data-status=ready]{color:#a8c5b3}
@media(max-width:600px){.workspace .glass-dock{--dock-launcher-size:56px;--dock-gap:10px}.workspace .glass-dock .dock-orb{border-radius:17px}.workspace .glass-dock .dock-orb .icon{width:20px;height:20px}.workspace .glass-dock .dock-context{left:0}.workspace .composer-note{margin-left:66px}}

/* Shared composer geometry and a dedicated right-aligned action group. */
.workspace .native-media-editor{padding-bottom:26px}
.workspace .glass-dock .glass-surface{display:block}
.workspace .glass-dock :is(.composer-main,.native-media-input-row){height:43px;min-height:43px;max-height:43px}
.workspace .glass-dock .dock-actions{height:32px;min-height:32px;max-height:32px;margin-top:5px;flex-wrap:nowrap}
.workspace .glass-dock .dock-submit-controls{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto;margin-left:auto;min-width:0;height:32px}
.workspace .glass-dock .dock-submit-controls :is(#prompt-count,#native-media-count,#chat-count){margin-left:0;padding:0 4px}
.workspace .glass-dock .dock-submit-controls :is(#generate-button,#native-media-send,#chat-send,#native-media-stop,#chat-stop){margin-left:0}
.workspace .glass-dock :is(.form-message,.native-media-feedback){top:auto;bottom:calc(100% + 50px);left:0;right:0;max-height:90px;overflow-y:auto}
.workspace .composer-expanded .glass-dock .composer-main{height:115px;min-height:115px;max-height:115px}
@media(max-width:600px){.workspace .native-media-editor{padding-bottom:26px}.workspace .glass-dock .dock-submit-controls{gap:5px}}

/* Input states, optional one-third-height editing and tilted source cards. */
.workspace .glass-dock .dock-expand{position:absolute;top:13px;right:16px;display:grid;place-items:center;width:27px;height:27px;min-height:27px;padding:5px;border:1px solid #c5b5d129;border-radius:8px;background:#b7a4cb10;color:#cfc2df;box-shadow:none;z-index:2}
.workspace .glass-dock .dock-expand:hover{background:#c1aadb26;border-color:#c5b5d15c}
.workspace .glass-dock .dock-expand .icon{width:14px;height:14px}
.workspace .glass-dock .dock-expand[aria-expanded=true] .icon{transform:rotate(180deg)}
.workspace .glass-dock .has-expand-control :is(#prompt,#native-media-input,#chat-input){padding-right:35px}
.workspace .glass-dock.dock-editor-expanded{--dock-height:clamp(180px,33dvh,360px)}
.workspace .glass-dock.dock-editor-expanded .glass-surface{height:var(--dock-height);min-height:var(--dock-height);max-height:var(--dock-height)}
.workspace .glass-dock.dock-editor-expanded :is(.composer-main,.native-media-input-row,#prompt,#native-media-input,#chat-input){height:calc(var(--dock-height) - 65px);min-height:calc(var(--dock-height) - 65px);max-height:calc(var(--dock-height) - 65px)}
.workspace .glass-dock .dock-attachments .dock-panel-body{gap:17px 14px;padding:5px 4px 8px}
.workspace .dock-attachments .attachment-card.attachment-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;gap:10px;width:88px;min-width:88px;height:106px;min-height:106px;margin:7px 7px 8px;padding:12px 8px;border:1px dashed #b9aac445;border-radius:5px;background:linear-gradient(145deg,#c0a9d00d,#ffffff04);color:#c8bdcf;font-size:11px;line-height:1.55;text-align:center;white-space:normal;transform:rotate(-6deg);box-shadow:inset 0 1px 0 #ffffff08;transition:transform .18s,border-color .18s,background .18s}
.workspace .dock-attachments .attachment-card:before{content:'+';display:block;position:static;font-size:28px;font-weight:300;line-height:1;color:#baa8cb}
.workspace .dock-attachments .attachment-card:has(>.icon):before{display:none}
.workspace .dock-attachments .attachment-card.attachment-card:hover:not(:disabled){transform:rotate(-3deg) translateY(-2px);border-color:#d4bcdf88;background:#b99bce17;color:#eee5f7}
.workspace .dock-attachments .attachment-card.attachment-card:focus-visible{outline-offset:6px}
.workspace .dock-attachments .attachment-card>.icon{width:24px;height:24px}
.workspace .dock-attachments .attachment-card img{position:absolute;inset:3px;width:calc(100% - 6px);height:calc(100% - 6px);object-fit:contain;border-radius:3px;background:#19171d}
.workspace .dock-attachments .image-reference-shell{gap:7px}
.workspace .dock-attachments .image-reference-help{max-width:none;margin:0;text-align:left;font-size:11px}
.workspace .dock-attachments .media-ref-slot{flex:0 1 110px;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:0;padding:0;border:0;background:none}
.workspace .dock-attachments .media-ref-slot>img{width:64px;height:44px;object-fit:contain}
.workspace .dock-attachments .media-ref-name{max-width:108px}
.workspace .dock-attachments :is(.reference-extras,.dock-upscale-source){display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%}
.workspace .dock-attachments #muse-image-field>label,.workspace .dock-attachments #muse-image-field>input{display:none}
.workspace .dock-attachments #muse-image-field:not([hidden]){display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}
.workspace .dock-attachments #muse-image-field:after{content:'选择一张 PNG / JPEG / WebP 图片，最多4MiB；按所选方式用于首帧或主体与风格参考。';display:block;width:100%;color:#a99bb4;font-size:11px;line-height:1.65}
@media(max-width:600px){.workspace .glass-dock .dock-expand{top:11px;right:11px}.workspace .glass-dock.dock-editor-expanded :is(.composer-main,.native-media-input-row,#prompt,#native-media-input,#chat-input){height:calc(var(--dock-height) - 61px);min-height:calc(var(--dock-height) - 61px);max-height:calc(var(--dock-height) - 61px)}.workspace .dock-attachments .attachment-card.attachment-card{width:78px;min-width:78px;height:94px;min-height:94px}}

.workspace .dock-attachments .image-reference-shell{flex-direction:row;justify-content:flex-start}

.workspace .glass-dock #upscale-input-guide>div{min-width:0;overflow:hidden}.workspace .glass-dock #upscale-input-guide strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* First paint uses the approved glass shell while modules initialize. */
.workspace #composer-editor:has(>.composer-bootstrap)>.composer-frame{display:none}
.workspace #composer-editor>.composer-bootstrap{width:min(1176px,100%);margin-inline:auto;pointer-events:none}
.workspace .composer-bootstrap .bootstrap-prompt{height:43px;min-height:43px;margin:0;padding:1px 4px;color:#89828f;font-size:13px;line-height:21px}
.workspace .composer-bootstrap .bootstrap-send{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;height:32px;min-width:60px;margin-left:auto;padding:0 13px;border:1px solid #a697b22b;border-radius:17px;background:#dcd2e8;color:#211b28;font-size:11px;font-weight:600;opacity:.38}

/* Attachments and settings open immediately above the left side of their editor. */
.workspace .glass-dock :is(.dock-attachments,.dock-settings){left:0;right:auto;bottom:calc(100% + 12px);width:min(560px,calc(100vw - 32px));max-height:min(490px,calc(100dvh - var(--dock-height) - 145px));border:1px solid transparent;background:radial-gradient(ellipse at 5% 100%,#8e5cb324,transparent 48%),radial-gradient(ellipse at 55% 100%,#c75f8f1c,transparent 43%),radial-gradient(ellipse at 97% 100%,#bea35d1a,transparent 42%),linear-gradient(120deg,#201d26f5,#1a191ff5) padding-box,linear-gradient(115deg,#a17cc177,#8c748742 42%,#c3a36269,#a7bc7760) border-box;box-shadow:inset 0 1px 0 #ffffff0b,inset 0 -18px 32px -26px #cc719d60,0 14px 42px #0006;backdrop-filter:blur(28px) saturate(130%);-webkit-backdrop-filter:blur(28px) saturate(130%);transform-origin:bottom left}

/* Every empty model stage uses the same centered, fixed header geometry. */
.workspace .result-panel:has(.empty-result) .result-stage{display:flex;align-items:center;justify-content:center;padding:0;overflow:auto}
.workspace #native-media-panel:has(#native-media-empty:not([hidden])) .native-media-stage{position:relative;padding:0}
.workspace #native-media-panel:has(#native-media-empty:not([hidden])) .native-media-heading{position:absolute;top:10px;right:24px;left:24px;z-index:2}
.workspace #native-media-panel:has(#native-media-empty:not([hidden])) .native-media-preview{display:flex;align-items:center;justify-content:center;overflow:auto}
.workspace #native-media-panel:has(#native-media-empty:not([hidden])) .native-media-retention{position:absolute;bottom:0;left:24px;right:24px;margin:0;pointer-events:none}
.workspace #chat-panel:has(#chat-empty:not([hidden])){position:relative}
.workspace #chat-panel:has(#chat-empty:not([hidden])) .chat-heading{position:absolute;top:10px;left:24px;right:24px;z-index:2;padding:0}
.workspace #chat-panel:has(#chat-empty:not([hidden])) .chat-note{position:absolute;top:48px;left:24px;right:24px;z-index:2;padding:0}
.workspace #chat-panel:has(#chat-empty:not([hidden])) .chat-scroll{display:flex;align-items:center;justify-content:center;padding:0;scrollbar-gutter:auto}
.workspace #chat-panel:has(#chat-empty:not([hidden])) :is(.chat-status,#chat-ack){position:absolute;top:76px;left:24px;right:24px;z-index:2;width:auto;margin:0}
.workspace :is(.empty-result,.chat-empty.model-welcome,.native-media-empty.model-welcome){box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;align-self:center;flex:0 0 auto;width:min(668px,100%);height:320px;min-height:0;max-height:100%;margin:0 auto;padding:0 24px;text-align:center}
.workspace :is(.empty-result,.model-welcome)>img{display:block;flex:0 0 76px;width:76px;height:76px;margin:0 auto 18px;object-fit:contain}
.workspace :is(.empty-result,.model-welcome)>.model-introduction{display:grid;grid-template-rows:28px minmax(0,1fr);gap:14px;width:100%;height:calc(100% - 94px);min-height:0;margin:0}
.workspace .model-introduction .model-welcome-title{display:block;height:28px;min-height:28px;margin:0;font-size:19px;line-height:28px;text-align:center}
.workspace .model-introduction .model-guide{display:grid;grid-auto-rows:minmax(34px,auto);align-content:start;gap:10px;min-height:0;margin:0;overflow:auto;text-align:left;scrollbar-width:thin;scrollbar-color:#655d7170 transparent}
.workspace .model-guide>div{grid-template-columns:64px minmax(0,1fr);gap:16px}
@media(max-width:760px){.workspace :is(.empty-result,.chat-empty.model-welcome,.native-media-empty.model-welcome){height:300px;padding-inline:20px}.workspace :is(.empty-result,.model-welcome)>img{flex-basis:54px;width:54px;height:54px;margin-bottom:16px}.workspace :is(.empty-result,.model-welcome)>.model-introduction{height:calc(100% - 70px);grid-template-rows:26px minmax(0,1fr);gap:13px}.workspace .model-introduction .model-welcome-title{height:26px;min-height:26px;font-size:17px;line-height:26px}.workspace .model-guide>div{grid-template-columns:54px minmax(0,1fr);gap:12px}}
@media(max-width:600px){.workspace .glass-dock :is(.dock-attachments,.dock-settings){left:calc(-1 * (var(--dock-launcher-size) + var(--dock-gap)));right:auto;bottom:calc(100% + 12px);width:calc(100vw - 24px)}.workspace .composer-bootstrap .bootstrap-send{height:30px;padding-inline:10px}.workspace :is(.empty-result,.chat-empty.model-welcome,.native-media-empty.model-welcome){padding-inline:12px}.workspace #chat-panel:has(#chat-empty:not([hidden])) .chat-scroll{margin-inline:-12px;width:calc(100% + 24px)}}

.workspace #chat-panel .chat-scroll:has(>#chat-empty:not([hidden]))>#chat-messages:empty{display:none}

/* On phones the model/price line is part of the editor header; leave it clear below the panel. */
@media(max-width:600px){.workspace .glass-dock :is(.dock-attachments,.dock-settings){bottom:calc(100% + 48px);max-height:min(490px,calc(100dvh - var(--dock-height) - 175px))}}

/* Secondary creation tools share one row of equal square tiles. */
.studio-tool-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;align-items:stretch;margin-top:4px}
.studio-nav .studio-tool-grid>:is(button,a){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;grid-column:auto;aspect-ratio:1;width:100%;min-width:0;min-height:0;padding:8px 3px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--tool-ink);font-size:11px;line-height:1.25;white-space:nowrap;text-decoration:none;transition:background .16s,border-color .16s}
.studio-tool-grid #api-button{--tool-ink:#d6b13f}
.studio-tool-grid #reference-launch{--tool-ink:#c4dcc7}
.studio-tool-grid .motion-entry{--tool-ink:#b9a5ee}
.studio-nav .studio-tool-grid>:is(button,a) .icon{width:24px;height:24px;flex:0 0 24px;stroke-width:1.6}
.studio-nav .studio-tool-grid>:is(button,a):hover{background:#ffffff07;border-color:#ffffff14}
.studio-nav .studio-tool-grid>:is(button,a):focus-visible{outline:2px solid currentColor;outline-offset:-3px;background:#ffffff07}