/* Creation and result workspace: compact controls, truthful states, restrained motion. */
html[data-theme="light"] {
  --studio-bg: #f7f8fa;
  --studio-side: #f0f2f6;
  --studio-panel: #fff;
  --studio-panel-2: #f4f5f8;
  --studio-panel-3: #e9ecf2;
  --studio-line: #e3e6ec;
  --studio-line-strong: #cbd1dc;
  --studio-text: #20252e;
  --studio-muted: #626b78;
  --studio-quiet: #828b98;
  --studio-accent: #4c5ec0;
  --studio-accent-strong: #394caa;
  --studio-accent-soft: #edf0ff;
  --studio-focus: #4c5ec0;
  --studio-focus-soft: rgba(76, 94, 192, .13);
  --studio-shadow-soft: 0 6px 24px rgba(28, 38, 68, .05);
}
html[data-theme="dark"] {
  --studio-bg: #14171d;
  --studio-side: #1b1f27;
  --studio-panel: #1c212a;
  --studio-panel-2: #252b36;
  --studio-panel-3: #303746;
  --studio-line: #343b49;
  --studio-line-strong: #4c5566;
  --studio-text: #f1f3f7;
  --studio-muted: #b4bbc7;
  --studio-quiet: #858e9e;
  --studio-accent: #91a0ee;
  --studio-accent-strong: #aab6ff;
  --studio-accent-soft: #293253;
  --studio-focus: #aab6ff;
  --studio-focus-soft: rgba(145, 160, 238, .18);
  --studio-shadow-soft: 0 8px 28px rgba(0, 0, 0, .13);
}

/* Navigation remains stable when the rail is collapsed. */
#sidebar, #sidebar:hover { background: var(--studio-side); color: var(--studio-text); border-right: 1px solid var(--studio-line); transition: background-color .16s ease, border-color .16s ease; }
#sidebar .brand-name, #sidebar .user-email { color: var(--studio-text); }
#sidebar .brand-sub, #sidebar .user-balance { color: var(--studio-quiet); }
#sidebar .nav-item { border: 0; color: var(--studio-muted); transition: background-color .16s ease, color .16s ease; }
#sidebar .nav-item:hover { background: var(--studio-panel-3); color: var(--studio-text); }
#sidebar .nav-item.active { background: var(--studio-accent-soft); color: var(--studio-accent); box-shadow: none; }
#sidebar .nav-item.active::before { background: var(--studio-accent); box-shadow: none; }
#sidebar .user-card { border-top: 1px solid var(--studio-line); }
#sidebar .rail-toggle { background: var(--studio-panel); border-color: var(--studio-line-strong); box-shadow: 0 2px 6px rgba(28,38,68,.06); }
#sidebar.rail, #sidebar.rail:hover { width: 72px; min-width: 72px; box-shadow: none; }
#sidebar.rail .brand-text, #sidebar.rail:hover .brand-text { display: none !important; }
#sidebar.rail .brand-mark { display: grid; }
#sidebar.rail .nav-item, #sidebar.rail:hover .nav-item { width: 100%; padding: 0; justify-content: center; }
#sidebar.rail .nav-item span, #sidebar.rail:hover .nav-item span,
#sidebar.rail .nav-new, #sidebar.rail .user-info { display: none !important; }
#sidebar.rail #railToggle, #sidebar.rail:hover #railToggle { display: grid !important; }
#sidebar.rail #railToggle svg { transform: rotate(180deg); }

/* Typography and row geometry are shared by every desktop navigation state. */
@media (min-width: 761px) {
  #sidebar .nav-item {
    height: 49px;
    min-height: 49px;
    max-height: 49px;
    font-size: 13px;
    line-height: 1.5;
  }
}
@media (min-width: 921px) {
  #sidebar:not(.rail) .nav-item { padding: 0 13px; }
}

/* Keep a sparse asset library useful without forcing three undersized cards. */
#viewAssets .asset-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* The top bar owns desktop model and media selection. */
.studio-topbar { border-bottom: 1px solid var(--studio-line); }
.top-model-chip, .top-mode-switch { background: var(--studio-panel); border: 1px solid var(--studio-line); box-shadow: none; }
.top-model-chip:hover, .topbar-settings:hover { border-color: var(--studio-line-strong); background: var(--studio-panel-2); }
.top-model-icon { background: var(--studio-accent-soft); color: var(--studio-accent); }
.top-mode-switch .mode-slider { background: var(--studio-accent); box-shadow: none; transition: transform .18s ease; }
.top-mode-switch .mode-btn.active { color: #fff; }
html[data-theme="dark"] .top-mode-switch .mode-btn.active { color: #151923; }

/* One clear focus surface and compact parameter controls. */
#stage > #composer, body.reference-workspace #dock #composer {
  border: 1px solid var(--studio-line-strong);
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow-soft);
}
#stage > #composer:focus-within, body.reference-workspace #dock #composer:focus-within {
  border-color: var(--studio-focus);
  box-shadow: 0 0 0 3px var(--studio-focus-soft);
}
#composer .prompt-input, #composer .prompt-input:focus, #composer .prompt-input:focus-visible {
  outline: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
#composer .composer-upload { border: 1px solid var(--studio-line-strong); background: var(--studio-panel-2); }
#composer .composer-upload:hover { border-color: var(--studio-accent); background: var(--studio-accent-soft); }
#composer .chips > .chip { height: 47px; min-height: 47px; border: 1px solid var(--studio-line); background: var(--studio-panel-2); transition: border-color .16s ease, background-color .16s ease; }
#composer .chips > .chip:hover { border-color: var(--studio-line-strong); background: var(--studio-panel-3); transform: none; }
#composer .chips > .chip:disabled { opacity: .48; cursor: not-allowed; }
#composer .chips > .chip::before { color: var(--studio-quiet); }
#composer .chips .chip-label { color: var(--studio-text); }
#composer .composer-bar > .send-btn {
  width: 47px; min-width: 47px; height: 47px;
  border-radius: 11px; background: var(--studio-accent); color: #fff;
  box-shadow: none; transition: background-color .16s ease, transform .16s ease;
}
html[data-theme="dark"] #composer .composer-bar > .send-btn { color: #151923; }
#composer .composer-bar > .send-btn:hover:not(:disabled) { background: var(--studio-accent-strong); box-shadow: none; transform: translateY(-1px); }
#composer .composer-bar > .send-btn.loading { animation: none; opacity: .65; }
#composer .submission-status { margin-top: 9px; color: var(--studio-muted); font-size: 11px; }
.dock-options-toggle { display: none; }
@media (min-width: 761px) {
  #composer #modelChip, body.reference-workspace #dock #modelChip { display: none !important; }
}

/* All selection panels share one simple, readable treatment. */
.model-panel, .pop-panel, .advanced-panel, .reference-link-panel {
  border: 1px solid var(--studio-line-strong);
  border-radius: 12px; background: var(--studio-panel);
  box-shadow: 0 18px 48px rgba(25, 34, 58, .16);
  animation: none;
}
.model-panel-head, .advanced-head { border-bottom: 1px solid var(--studio-line); }
.model-group { color: var(--studio-quiet); }
.model-item, .pop-item { border-radius: 8px; transition: background-color .14s ease; }
.model-item:hover, .model-item.selected, .pop-item:hover, .pop-item.selected { background: var(--studio-accent-soft); }
.model-item.selected .model-item-name, .pop-item.selected { color: var(--studio-accent); }
.toast { animation: none; border-radius: 9px; box-shadow: 0 8px 28px rgba(20,28,48,.14); }

/* Give appearance choices enough width to read as controls instead of tiny swatches. */
#settingsModal.modal-mask { background: rgba(11, 16, 29, .54); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#settingsModal .modal { width: min(100%, 620px); max-width: 620px; animation: none; }
#settingsModal .theme-options { border: 0; gap: 10px; }
#settingsModal .theme-opt { min-width: 0; min-height: 92px; padding: 13px; border-radius: 10px; }
#settingsModal .theme-opt b { font-size: 13px; }
#settingsModal .theme-opt small { font-size: 11px; line-height: 1.4; }

/* The workspace keeps real status visible without a fake percentage or a giant spinner. */
body.reference-workspace #stage { padding-top: 19px; padding-bottom: 24px; }
body.reference-workspace #stage .results-head, body.reference-workspace #stage .results { width: min(100%, 1100px); }
body.reference-workspace #stage .results-head { margin: 0 auto 15px; }
body.reference-workspace #stage .results { margin: 0 auto; }
body.reference-workspace .project-day { margin: 0 0 10px; }
body.reference-workspace .generation-project { margin-bottom: 23px; padding-top: 13px; }
body.reference-workspace .project-head { min-height: 47px; margin-bottom: 12px; }
body.reference-workspace .project-preview-stack { width: 47px; height: 42px; }
body.reference-workspace .project-source, body.reference-workspace .project-sigil { width: 41px; height: 41px; border-radius: 9px; }
body.reference-workspace .project-source-2 { left: 11px; }
body.reference-workspace .project-copy h2 { font-size: 15px; }
body.reference-workspace .project-copy p { margin-top: 3px; line-height: 1.45; }
body.reference-workspace #stage .project-output-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-content: start; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) { grid-template-columns: minmax(0, 1fr); justify-content: start; }
body.reference-workspace #stage .project-output-grid .card { animation: none; box-shadow: none; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card.r-wide:not(:has(.card-generating)) { width: min(100%, 720px, calc(50dvh * 16 / 9)); min-height: 0; max-height: 50dvh; margin: 0; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card.r-square:not(:has(.card-generating)) { width: min(100%, 440px, 50dvh); min-height: 0; max-height: 50dvh; margin: 0; }
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card.r-tall:not(:has(.card-generating)) { width: min(100%, 360px, calc(50dvh * 3 / 4)); min-height: 0; max-height: 50dvh; margin: 0; }
body.reference-workspace #stage .project-output-grid .card:has(.card-generating) {
  width: 100%; height: 104px !important; min-height: 104px !important; max-height: 104px !important;
  aspect-ratio: auto !important; border: 1px solid var(--studio-line); border-radius: 11px;
  background: var(--studio-panel); cursor: default;
}
body.reference-workspace #stage .project-output-grid:has(> .card:only-child) > .card:has(.card-generating) { max-width: 100%; }
.card-generating, .project-output-grid .card-generating {
  display: flex; height: 100%; min-height: 0; padding: 17px 20px;
  gap: 14px; align-items: center; justify-content: flex-start; flex-direction: row;
  background: transparent;
}
.card-generating::before, .gen-ring, .gen-bar { display: none; }
.gen-indicator { display: flex; width: 38px; min-width: 38px; height: 38px; gap: 3px; align-items: center; justify-content: center; border-radius: 9px; background: var(--studio-accent-soft); }
.gen-indicator i { width: 3px; height: 10px; border-radius: 3px; background: var(--studio-accent); opacity: .6; }
.gen-indicator i:nth-child(2) { height: 16px; opacity: 1; }
.gen-indicator i:nth-child(3) { height: 7px; }
.gen-text { display: flex; min-width: 0; min-height: 0; gap: 4px; align-items: flex-start; flex-direction: column; text-align: left; }
.gen-status { color: var(--studio-text); font-size: 13px; font-weight: 650; line-height: 1.3; }
.gen-model { display: block; color: var(--studio-muted); font-size: 11px; line-height: 1.35; }
.gen-hint { margin-left: auto; color: var(--studio-quiet); font-size: 11px; text-align: right; }

/* A shallow composition dock leaves room for the actual work. */
body.reference-workspace #dock {
  flex: 0 0 auto; padding: 9px 22px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--studio-line); background: var(--studio-bg);
  box-shadow: 0 -8px 28px rgba(23, 33, 56, .045); backdrop-filter: none;
}
body.reference-workspace #dock #composer { width: min(100%, 1100px); margin: 0 auto; padding: 8px 11px; border-radius: 11px; box-shadow: none; }
body.reference-workspace #dock .composer-input-row { min-height: 40px; gap: 10px; }
body.reference-workspace #dock #composer .composer-upload { width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; }
body.reference-workspace #dock #composer .composer-upload svg { width: 18px; height: 18px; }
body.reference-workspace #dock #composer .composer-writing .prompt-input { height: 40px; min-height: 40px; max-height: 80px; padding: 9px 0 0; font-size: 13px; resize: none; }
body.reference-workspace #dock #composer .composer-writing .prompt-input { margin: 0; }
body.reference-workspace #dock #composer .prompt-counter { display: none; }
body.reference-workspace #dock #composer .composer-bar { margin-top: 5px; padding-top: 6px; }
body.reference-workspace #dock #composer .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
body.reference-workspace #dock #composer .chips > .chip { display: inline-flex; width: auto; min-width: auto; max-width: none; height: 30px; min-height: 30px; padding: 0 9px; gap: 6px; flex: 0 0 auto; border-radius: 7px; }
body.reference-workspace #dock #composer .chips > .chip::before { display: none; }
body.reference-workspace #dock #composer .chips .chip-label { font-size: 11px; line-height: 1.2; }
body.reference-workspace #dock #composer .composer-bar > .send-btn { width: 32px; min-width: 32px; height: 32px; border-radius: 8px; }
body.reference-workspace #dock #composer .send-btn svg { width: 16px; height: 16px; }
body.reference-workspace #dock #composer .submission-status { margin-top: 3px; }
body.reference-workspace #dock #composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}
body.reference-workspace #dock #composer .composer-input-row { grid-column: 1; }
body.reference-workspace #dock #composer .composer-bar {
  position: static; grid-column: 2; display: flex; margin: 0; padding: 0;
  gap: 6px; align-items: center; border: 0;
}
body.reference-workspace #dock #composer .dock-options-toggle {
  display: inline-flex; height: 36px; padding: 0 12px;
  align-items: center; justify-content: center; border: 1px solid var(--studio-line);
  border-radius: 8px; background: var(--studio-panel-2); color: var(--studio-muted);
  font-size: 11px; white-space: nowrap;
}
body.reference-workspace #dock #composer .dock-options-toggle:hover,
body.reference-workspace #dock #composer .dock-options-toggle[aria-expanded="true"] {
  border-color: var(--studio-line-strong); background: var(--studio-accent-soft); color: var(--studio-accent);
}
body.reference-workspace #dock #composer .chips {
  position: absolute; right: 0; bottom: calc(100% + 8px); left: 0; z-index: 34;
  display: none; width: 100%; max-height: min(50dvh, 210px); padding: 10px;
  gap: 7px; flex-wrap: wrap; overflow-x: auto; overflow-y: auto;
  border: 1px solid var(--studio-line-strong); border-radius: 10px;
  background: var(--studio-panel); box-shadow: 0 14px 36px rgba(24, 34, 58, .13);
}
body.reference-workspace #dock #composer.options-open .chips { display: flex; }
body.reference-workspace #dock #composer .composer-bar > .send-btn { width: 36px; min-width: 36px; height: 36px; }
body.reference-workspace #dock #composer .submission-status { grid-column: 1 / -1; }

@media (max-width: 920px) and (min-width: 761px) {
  #sidebar, #sidebar:hover, #sidebar.rail, #sidebar.rail:hover { width: 72px; min-width: 72px; }
  #sidebar .brand-text { display: none !important; }
  #sidebar .brand-mark { display: grid; }
}
@media (max-width: 760px) {
  #settingsModal .theme-options { grid-template-columns: 1fr; }
  #settingsModal .theme-opt { min-height: 68px; }
  #settingsModal .theme-swatch { height: 42px; }
  #sidebar, #sidebar:hover, #sidebar.rail, #sidebar.rail:hover { width: 100%; min-width: 100%; }
  #sidebar .side-bottom, #sidebar.rail .side-bottom { display: none !important; }
  #sidebar.rail .nav-item span, #sidebar.rail:hover .nav-item span { display: inline !important; }
  #sidebar.rail #railToggle { display: none !important; }
  #stage > #composer { box-shadow: none; }
  #composer .chips > .chip { height: 42px; min-height: 42px; }
  body.reference-workspace #stage { padding-top: 69px; padding-bottom: 20px; }
  body.reference-workspace #stage .project-output-grid { grid-template-columns: 1fr; }
  body.reference-workspace #stage .project-output-grid .card:has(.card-generating) { height: 92px !important; min-height: 92px !important; max-height: 92px !important; }
  .gen-hint { display: none; }
  body.reference-workspace #dock { padding: 7px 9px max(8px, env(safe-area-inset-bottom)); }
  body.reference-workspace #dock #composer { padding: 7px 8px; }
  body.reference-workspace #dock #composer .chips > .chip { height: 30px; min-height: 30px; }
  body.reference-workspace #dock #kindMini { display: flex !important; height: 30px; min-height: 30px; flex: 0 0 auto; }
  body.reference-workspace #dock #modelChip { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .top-mode-switch .mode-slider, #sidebar, #composer .chips > .chip, #composer .composer-bar > .send-btn { transition: none !important; }
}