/* ===== Studio visual system ===== */
:root {
  --bg: #0e0f12;
  --card: #15161a;
  --muted: #9ca3af;
  --text: #f4f4f5;
  --line: #27282d;
  --accent: #6366f1;
  --accent2: #8b5cf6;
  --danger: #f05268;
  --input-bg: #111216;
  --header-bg: rgba(14,15,18,.90);
  --footer-bg: rgba(14,15,18,.92);
  --border-light: rgba(255,255,255,.07);
  --btn-bg: rgba(255,255,255,.04);
  --btn-hover-bg: rgba(255,255,255,.08);
  --modal-bg: #15161a;
  --studio-canvas: #111216;
  --studio-panel: #15161a;
  --studio-soft: rgba(255,255,255,.035);
}
[data-theme="light"] {
  --bg: #f6f6f7;
  --card: #ffffff;
  --muted: #71717a;
  --text: #18181b;
  --line: #e5e7eb;
  --accent: #6366f1;
  --accent2: #7c3aed;
  --input-bg: #fafafa;
  --header-bg: rgba(255,255,255,.94);
  --footer-bg: rgba(246,246,247,.96);
  --border-light: rgba(24,24,27,.075);
  --btn-bg: rgba(24,24,27,.035);
  --btn-hover-bg: rgba(24,24,27,.065);
  --modal-bg: #ffffff;
  --studio-canvas: #fafafa;
  --studio-panel: #ffffff;
  --studio-soft: rgba(24,24,27,.025);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f6f6f7;
    --card: #ffffff;
    --muted: #71717a;
    --text: #18181b;
    --line: #e5e7eb;
    --accent: #6366f1;
    --accent2: #7c3aed;
    --input-bg: #fafafa;
    --header-bg: rgba(255,255,255,.94);
    --footer-bg: rgba(246,246,247,.96);
    --border-light: rgba(24,24,27,.075);
    --btn-bg: rgba(24,24,27,.035);
    --btn-hover-bg: rgba(24,24,27,.065);
    --modal-bg: #ffffff;
    --studio-canvas: #fafafa;
    --studio-panel: #ffffff;
    --studio-soft: rgba(24,24,27,.025);
  }
}
body { background: var(--bg) !important; }
body.studio-drawer-open { overflow: hidden; }

/* ===== Reduce top-level chrome ===== */
.topbar-right > a[href*="github.com"],
#donateBtn,
.studio-top-secondary { display: none !important; }
.studio-history-top-action { display: none !important; }
.studio-topbar .topbar-main {
  min-height: 56px !important;
  padding: 8px 16px !important;
}
.studio-topbar .brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
}
.studio-topbar .h1 { font-size: 16px !important; }
.studio-topbar .topbar-right { gap: 5px !important; }
.studio-topbar .top-icon-btn {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0 !important;
  justify-content: center;
  border-radius: 11px;
}
.studio-topbar .top-icon-btn > span:not(.studio-top-icon):not(.studio-count-badge) { display: none !important; }
.studio-topbar .status { margin-left: 6px; }
.studio-topbar .status .badge {
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

/* ===== More balanced desktop layout ===== */
.container.workspace-ready {
  width: 100% !important;
  max-width: 1920px !important;
  padding: 10px 12px 18px !important;
}
.workspace-shell {
  grid-template-columns: 64px minmax(0, 1fr) minmax(340px, 370px) !important;
  grid-template-rows: minmax(590px, calc(100vh - 158px)) auto !important;
  gap: 10px !important;
}

/* Rail: workflows + history only */
.workspace-rail {
  top: 66px !important;
  height: calc(100vh - 78px) !important;
  padding: 8px 6px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--studio-panel) 88%, transparent) !important;
  box-shadow: none !important;
}
.workspace-rail-mark { display: none !important; }
.workspace-rail-workflows { gap: 6px !important; }
.workspace-rail-button {
  min-height: 54px !important;
  padding: 6px 2px !important;
  border-radius: 12px !important;
}
.workspace-rail-button.is-active {
  border-color: rgba(99,102,241,.18) !important;
  background: rgba(99,102,241,.10) !important;
}
.workspace-rail-icon { font-size: 17px !important; }
.workspace-rail-label { font-size: 9.5px !important; }
.workspace-rail-utility {
  margin-top: auto !important;
  padding-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* Canvas becomes the visual center */
.workspace-output-card {
  padding: 12px !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--studio-canvas) !important;
  box-shadow: none !important;
}
.workspace-preview-summary {
  min-height: 40px !important;
  margin-bottom: 8px !important;
  padding: 0 2px 8px !important;
  border-bottom: 0 !important;
}
.workspace-preview-title > span { font-size: 14px !important; }
.workspace-preview-title > strong {
  color: var(--muted) !important;
  font-size: 11px !important;
  font-weight: 550 !important;
}
.workspace-preview-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.workspace-preview-action {
  min-height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  cursor: pointer;
}
.workspace-preview-action:hover {
  border-color: var(--border-light) !important;
  background: var(--btn-bg) !important;
  color: var(--text) !important;
}
.workspace-output-card > .row.row-between { display: none !important; }

#modelComparePanel:not([open]) { display: none !important; }
#modelComparePanel[open] {
  margin: 0 0 9px !important;
  border: 1px solid var(--border-light) !important;
  background: var(--studio-soft) !important;
}

.workspace-preview-empty {
  min-height: calc(100vh - 250px) !important;
  gap: 12px !important;
  padding: 28px !important;
  border: 0 !important;
  background: transparent !important;
}
.workspace-empty-art {
  width: 58px !important;
  height: 58px !important;
  border-radius: 18px !important;
  border-color: rgba(99,102,241,.14) !important;
  background: rgba(99,102,241,.07) !important;
  font-size: 24px !important;
}
.workspace-preview-empty strong { font-size: 17px !important; }
.workspace-preview-empty p {
  margin-top: 5px !important;
  font-size: 12px !important;
}

.workspace-output-card .output {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 12px !important;
}
.workspace-output-card .output .item {
  padding: 7px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: var(--studio-panel) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,.055) !important;
}
.workspace-output-card .output .item h3 {
  margin: 5px 5px 4px !important;
  font-size: 11px !important;
}
.workspace-output-card .output .item .meta {
  margin: 0 5px 6px !important;
  font-size: 10px !important;
}
.workspace-output-card .output img,
.workspace-output-card .output video {
  border-radius: 12px !important;
}
.studio-output-debug summary { font-size: 10px !important; }

/* ===== Inspector: show only what most users need ===== */
.workspace-inspector {
  border: 0 !important;
  border-radius: 18px !important;
  background: var(--studio-panel) !important;
  box-shadow: none !important;
}
.workspace-inspector-head {
  min-height: 52px !important;
  padding: 10px 13px !important;
}
.workspace-inspector-title { display: grid; gap: 0 !important; }
.workspace-inspector-head span { font-size: 9px !important; }
.workspace-inspector-head strong { font-size: 14px !important; }
.workspace-inspector-head-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.workspace-inspector-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--muted);
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.workspace-inspector-state.is-pass { background: rgba(34,197,94,.10); color: #16a34a; }
.workspace-inspector-state.is-experimental { background: rgba(245,158,11,.11); color: #d97706; }
.workspace-inspector-state.is-fail { background: rgba(239,68,68,.10); color: #dc2626; }
.workspace-inspector-state.is-custom { background: rgba(99,102,241,.10); color: var(--accent); }
.workspace-inspector-host {
  padding: 12px !important;
  max-height: calc(100vh - 130px) !important;
}
.workspace-inspector .mm-model-box,
.workspace-inspector .mp-panel {
  margin: 0 0 12px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.workspace-inspector .mp-panel:last-child { border-bottom: 0 !important; }
.studio-model-picker-grid {
  display: block !important;
  grid-template-columns: 1fr !important;
}
.studio-model-picker { width: 100%; }
.studio-model-picker .lab { margin-bottom: 6px !important; }
.studio-model-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 1px 0;
  padding: 0 2px;
}
.studio-model-summary > div { min-width: 0; display: grid; gap: 1px; }
.studio-model-summary strong {
  display: none;
}
.studio-model-summary span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.workspace-inspector .input,
.workspace-inspector .textarea,
.workspace-inspector .mp-control {
  min-height: 40px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
}
.workspace-inspector .mp-label,
.workspace-inspector .lab {
  color: var(--muted) !important;
  font-size: 11px !important;
}
.workspace-inspector .mp-title { font-size: 13px !important; }
.workspace-inspector .mp-head { margin-bottom: 8px !important; }
.workspace-inspector .mp-section { padding-top: 8px !important; }
.workspace-inspector .image-preview { max-height: 150px !important; }

.studio-model-developer-tools {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-light);
}
.studio-model-developer-tools > summary {
  color: var(--muted);
  font-size: 10px;
  cursor: pointer;
  list-style-position: inside;
}
.studio-model-developer-body {
  display: grid;
  gap: 9px;
  margin-top: 9px;
}
.studio-model-tech-note {
  width: 100%;
}
.studio-model-tech-note .lab { display: none !important; }
.studio-model-tech-note .hint {
  min-height: 0 !important;
  padding: 8px !important;
  border-radius: 9px;
  background: var(--studio-soft);
  font-size: 10px !important;
  line-height: 1.5;
}
.studio-model-developer-body > details {
  margin: 0 !important;
}
.studio-model-developer-body .mm-health-row {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 6px !important;
  margin: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.studio-model-developer-body .mm-health {
  width: 100% !important;
  min-width: 0 !important;
  font-size: 10px !important;
}
.studio-model-developer-body .mm-test-note { display: none !important; }
.studio-model-developer-body [data-video-trial-notice] {
  margin-top: 0 !important;
  font-size: 10px !important;
  line-height: 1.5;
}

/* ===== Prompt composer: compact and focused ===== */
.workspace-composer {
  bottom: 8px !important;
  padding: 8px 9px !important;
  border-color: color-mix(in srgb, var(--border-light) 72%, rgba(99,102,241,.12)) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--header-bg) 96%, transparent) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.13) !important;
}
.workspace-composer-top {
  display: none !important;
  margin: 0 !important;
}
.workspace-composer-slot {
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 7px !important;
  align-items: end !important;
}
.workspace-composer-input {
  min-height: 54px !important;
  max-height: 118px !important;
  padding: 10px 12px !important;
  resize: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.workspace-composer-actions {
  height: 48px !important;
  align-self: end !important;
}
.workspace-generate-button {
  width: 108px !important;
  min-width: 108px !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}
.workspace-composer .prompt-toolbox {
  margin: 0 0 3px !important;
}
.workspace-composer .prompt-toolbox-actions { gap: 3px !important; }
.workspace-composer .prompt-toolbox .btn {
  min-height: 28px;
  padding: 4px 8px !important;
  color: var(--muted);
  font-size: 10px !important;
}
.workspace-composer .prompt-toolbox .btn:hover { color: var(--text); }
.workspace-composer .prompt-template-bank {
  margin-bottom: 5px;
  max-height: 168px !important;
}

/* ===== Result workflow actions: visible on demand ===== */
.studio-result-card { position: relative; overflow: visible; }
.studio-result-actions {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 5px;
  margin: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.studio-result-card:hover .studio-result-actions {
  opacity: 1;
  transform: translateY(0);
}
.studio-result-action {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(18,18,22,.80);
  color: #fff;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
  backdrop-filter: blur(12px);
}
.studio-result-action:hover { background: rgba(99,102,241,.88); }

/* ===== Settings / badges / toast ===== */
.studio-settings-developer { display: none !important; }
.studio-settings-extras {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--border-light);
  border-radius: 13px;
  background: var(--btn-bg);
}
.studio-settings-section-title { margin-bottom: 8px; font-size: 11px; font-weight: 800; }
.studio-settings-links { display:flex; gap:7px; flex-wrap:wrap; }
.studio-settings-tip { margin-top: 9px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.studio-count-badge {
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border-radius: 999px;
  background: #ef4444;
  color: white;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.top-icon-btn .studio-count-badge { position: absolute; top: 1px; right: 1px; }
.top-icon-btn { position: relative; }
.workspace-rail-button .studio-count-badge { position: absolute; top: 4px; right: 6px; }
.workspace-rail-button { position: relative; }

.studio-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 1800;
  max-width: min(420px, calc(100vw - 28px));
  padding: 9px 12px;
  border: 1px solid var(--border-light);
  border-radius: 11px;
  background: var(--header-bg);
  color: var(--text);
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: .18s ease;
  font-size: 10px;
  backdrop-filter: blur(16px);
}
.studio-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.studio-toast-ok { border-color: rgba(34,197,94,.34); }
.studio-toast-err { border-color: rgba(239,68,68,.36); }

@media (max-width: 1180px) {
  .workspace-shell { grid-template-columns: 60px minmax(0,1fr) 330px !important; }
}

@media (max-width: 900px) {
  .studio-history-top-action { display: inline-flex !important; }
  .studio-topbar .status { display: none !important; }
  .container.workspace-ready { padding: 8px 8px 92px !important; }
  .workspace-shell {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(500px, auto) auto !important;
  }
  .workspace-rail {
    top: 60px !important;
    width: 100% !important;
    height: auto !important;
    padding: 4px !important;
    border: 1px solid var(--border-light) !important;
    background: var(--header-bg) !important;
  }
  .workspace-rail-utility { display: none !important; }
  .workspace-rail-button { min-height: 44px !important; }
  .workspace-inspector-host { max-height: calc(82dvh - 52px) !important; }
  .workspace-composer-top {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 4px !important;
  }
  .workspace-composer-caption { display: none; }
  .studio-inspector-toggle { display: inline-flex !important; min-height: 28px; padding: 3px 9px !important; font-size: 10px !important; }
  .workspace-composer-input { min-height: 52px !important; max-height: 100px !important; }
  .workspace-generate-button { width: 92px !important; min-width: 92px !important; }
  .studio-result-actions { position: static; margin-top: 6px; opacity: 1; transform: none; }
  .studio-result-action { flex: 1; color: var(--text); background: var(--btn-bg); border-color: var(--border-light); }
  .studio-toast { bottom: 108px; }
}

@media (max-width: 560px) {
  .studio-topbar .h1 { font-size: 13px !important; }
  .studio-topbar .top-icon-btn { width: 34px; min-width: 34px; height: 34px; }
  .workspace-output-card { padding: 8px !important; }
  .workspace-preview-title > strong { display: none; }
  .workspace-preview-empty { min-height: 330px !important; }
  .workspace-composer { padding: 7px !important; }
  .workspace-composer-slot { grid-template-columns: minmax(0,1fr) 84px !important; }
  .workspace-generate-button { width: 84px !important; min-width: 84px !important; padding: 0 8px !important; }
}