/* Project studio only. Existing source, revision and runtime behavior stays in the clients. */
#studio-view {
  --shell-bg: #171719;
  --shell-panel: #111114;
  --shell-raised: #1e1e21;
  --shell-hover: #2c2c30;
  --shell-text: #f9f6f9;
  --shell-muted: #b2b1bc;
  --shell-line: #2c2c30;
  --shell-control: #73737b;
  --shell-accent: #51b0ff;
  --shell-action: #2389ff;
  --shell-on-action: #071521;
  --shell-warning: #f5d19a;
  --shell-danger: #ffb4b4;
  --shell-chat-width: var(--studio-chat, 450px);
  --ink: var(--shell-text);
  --muted: var(--shell-muted);
  --line: var(--shell-line);
  --paper: var(--shell-panel);
  --surface: var(--shell-bg);
  --primary: var(--shell-accent);
  display: flex !important;
  flex-direction: column;
  flex: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100dvh;
  padding: 0 !important;
  color: var(--shell-text);
  background: var(--shell-bg);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  color-scheme: dark;
}
body.workspace-mode:has(#studio-view:not([hidden])) { height: 100dvh; overflow: hidden; background: var(--shell-bg, #171719); }
body.workspace-mode:has(#studio-view:not([hidden])) > .site-header { display: none; }
body.workspace-mode:has(#studio-view:not([hidden])) > main { display: flex; flex: 1; width: 100%; height: 100dvh; min-height: 0; max-width: none; margin: 0; padding: 0; }
#studio-view[hidden], #studio-view [hidden] { display: none !important; }
#studio-view :is(button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--shell-accent); outline-offset: 3px; }
#studio-view :is(button, input, textarea, select) { font: inherit; }
#studio-view :is(button, summary) { touch-action: manipulation; }
#studio-view button:disabled { cursor: not-allowed; opacity: .5; }
#studio-view .button { min-height: 32px; padding: 6px 10px; font-size: 12px; line-height: 1.5; border-radius: 6px; }
#studio-view .button-outline { color: var(--shell-text); background: transparent; border: 1px solid var(--shell-control); }
#studio-view .button-primary { color: var(--shell-on-action); background: var(--shell-action); border: 1px solid var(--shell-action); box-shadow: none; }
#studio-view .button-primary:hover:not(:disabled) { background: var(--shell-accent); border-color: var(--shell-accent); color: var(--shell-on-action); }
#studio-view .button-outline:hover:not(:disabled), #studio-view .text-button:hover:not(:disabled) { color: var(--shell-text); background: var(--shell-hover); }
#studio-view .text-button { min-height: 32px; padding: 5px 8px; color: var(--shell-muted); border-radius: 6px; font-size: 12px; line-height: 1.5; }
#studio-view .icon-button { width: 32px; height: 32px; min-width: 32px; min-height: 32px; color: var(--shell-muted); background: transparent; border: 0; border-radius: 6px; }
#studio-view .icon-button:hover:not(:disabled) { color: var(--shell-text); background: var(--shell-hover); }

/* One aligned project header, above both columns. */
#studio-view .studio-header { display: grid; grid-template-columns: minmax(320px, var(--shell-chat-width)) minmax(0, 1fr) max-content; align-items: center; gap: 0; flex: none; min-height: 50px; margin: 0; padding: 0 16px 0 0; border: 0; background: var(--shell-bg); }
#studio-view .studio-project-heading { display: flex; align-items: center; gap: 9px; width: auto; min-width: 0; padding-left: 8px; padding-right: 16px; }
#studio-view .studio-shell-brand { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--shell-text); font-weight: 650; font-size: 14px; letter-spacing: -.025em; white-space: nowrap; }
#studio-view .studio-shell-brand > span { color: var(--shell-accent); }
#studio-view .studio-project-heading > div { min-width: 0; flex: 1; }
#studio-view #project-name { width: 100%; min-width: 0; height: 32px; padding: 5px 7px; color: var(--shell-text); background: transparent; border: 1px solid transparent; border-radius: 5px; font-size: 13px; font-weight: 500; text-overflow: ellipsis; }
#studio-view #project-name:hover { border-color: var(--shell-control); }
#studio-view .studio-header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; width: auto; padding: 0; }
#studio-view .mode-status { max-width: 78px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; border: 0; color: var(--shell-muted); font-size: 11px; }
#studio-view .preview-toolbar { position: static; display: flex; align-items: center; justify-content: flex-start; gap: 5px; flex-wrap: wrap; min-width: 0; min-height: 50px; padding: 0 10px 0 0; border: 0; background: transparent; }
#studio-view .preview-tabs { display: flex; flex: none; gap: 2px; min-width: 0; padding: 3px; border: 1px solid var(--shell-line); border-radius: 18px; background: var(--shell-panel); }
#studio-view .preview-tabs > button { min-width: 0; min-height: 30px; padding: 5px 10px; background: transparent; border: 0; border-radius: 15px; color: var(--shell-muted); font-size: 12px; line-height: 1.5; white-space: nowrap; }
#studio-view .preview-tabs > button[aria-selected=true] { background: #102c42; color: #79c2ff; }
#studio-view .preview-tabs > button:hover:not(:disabled) { color: var(--shell-text); }
#studio-view .studio-app-entry { display: flex; align-items: center; flex: none; }
#studio-view #workspace-open { min-height: 32px; font-size: 12px; color: var(--shell-muted); white-space: nowrap; }
#studio-view .device-controls { display: flex; gap: 2px; padding: 0; margin-left: auto; }
#studio-view .device-controls .icon-button { width: 28px; min-width: 28px; height: 30px; min-height: 30px; }
#studio-view .device-controls svg { width: 17px; height: 17px; stroke: currentColor; }
#studio-view .device-controls [aria-pressed=true] { color: var(--shell-accent); background: var(--shell-hover); }
#studio-view .mobile-workspace-tabs { display: none; }

/* The page list belongs to tools; the conversation and workbench remain visible. */
#studio-view .studio-layout { display: grid !important; grid-template-columns: minmax(320px, var(--shell-chat-width)) minmax(0, 1fr) !important; gap: 0; flex: 1; height: auto !important; min-height: 0; padding: 0 16px 16px 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
#studio-view #workspace-chat { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; position: relative; order: initial; width: auto; min-width: 0; height: 100% !important; min-height: 0 !important; max-height: none; padding: 12px 16px 0 !important; border: 0; border-radius: 0; background: transparent; overflow: hidden; }
#studio-view .chat-heading { display: flex; align-items: center; gap: 9px; flex: none; margin: 0 0 10px; padding: 0; }
#studio-view .chat-mark { width: 22px; height: 22px; padding: 0; background: transparent; color: var(--shell-accent); font-size: 20px; }
#studio-view .chat-heading h2 { margin: 0; color: var(--shell-text); font-size: 13px; font-weight: 600; line-height: 1.5; }
#studio-view .chat-heading p { margin: 0; color: var(--shell-muted); font-size: 12px; line-height: 1.5; }
#studio-view .studio-project-tools { flex: none; min-width: 0; border-top: 1px solid var(--shell-line); border-bottom: 1px solid var(--shell-line); }
#studio-view .studio-project-tools > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 5px 2px; color: var(--shell-muted); font-size: 12px; cursor: pointer; list-style: none; }
#studio-view .studio-project-tools > summary::-webkit-details-marker { display: none; }
#studio-view .studio-project-tools[open] > summary { color: var(--shell-text); }
#studio-view .studio-project-tools[open] > summary > span { transform: rotate(180deg); }
#studio-view .studio-tools-content { max-height: min(45dvh, 510px); min-width: 0; padding: 2px 1px 12px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#studio-view .studio-navigation { display: block !important; width: auto; height: auto; min-height: 0 !important; padding: 8px 0; color: var(--shell-text); background: transparent; border: 0; border-radius: 0; overflow: visible; }
#studio-view .studio-navigation .panel-resize-left { display: none !important; }
#studio-view .studio-nav-caption { margin: 0 0 8px; color: var(--shell-muted); font-size: 11px; }
#studio-view #studio-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-bottom: 12px; }
#studio-view #studio-sections > button { min-height: 34px; padding: 7px 9px; color: var(--shell-muted); border: 0; border-radius: 6px; background: transparent; text-align: left; font-size: 12px; line-height: 1.5; }
#studio-view #studio-sections > button:hover, #studio-view #studio-sections > button[aria-current=page] { color: var(--shell-text); background: var(--shell-hover); }
#studio-view .studio-page-heading { color: var(--shell-text); font-size: 12px; }
#studio-view .studio-page-row { gap: 5px; }
#studio-view .studio-page-row button { min-height: 32px; color: var(--shell-muted); font-size: 12px; }
#studio-view .studio-page-row button[aria-current=true] { color: var(--shell-accent); background: var(--shell-hover); }
#studio-view .studio-workspace-heading { gap: 8px; min-height: 0; padding: 8px 0; background: transparent; border: 0; font-size: 12px; }
#studio-view .studio-workspace-heading > div { min-width: 0; max-width: none; }
#studio-view .studio-workspace-heading small { color: var(--shell-muted); font-size: 11px; }
#studio-view .studio-workspace-heading .button { max-width: 55%; font-size: 11px; }
#studio-view .studio-milestones { flex-wrap: wrap; overflow: visible; gap: 4px; margin: 0; padding: 8px 0; background: transparent; border-color: var(--shell-line); }
#studio-view .studio-milestone { min-height: 28px; padding: 4px 6px; color: var(--shell-muted); font-size: 11px !important; }
#studio-view .studio-milestone[aria-current=step] { color: var(--shell-accent); background: var(--shell-hover); }
#studio-view .studio-milestone[data-complete=true] { color: var(--shell-text); }
#studio-view :is(.quality-report, .job-usage, .studio-secondary-tools, .quick-editor) { max-height: none; margin: 7px 0 0; padding: 8px 10px; border: 1px solid var(--shell-line); border-radius: 6px; background: var(--shell-panel); color: var(--shell-text); font-size: 12px; }
#studio-view :is(.quality-report, .job-usage, .studio-secondary-tools, .quick-editor) > summary { cursor: pointer; color: var(--shell-muted); font-size: 12px; }
#studio-view .quality-report > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
#studio-view #quality-summary { color: var(--shell-muted); font-size: 11px; }
#studio-view .quality-content { padding: 10px 0 0; }
#studio-view :is(.quality-content p, .quality-content li, .usage-values p, .usage-attempt) { color: var(--shell-muted); font-size: 12px; line-height: 1.6; }
#studio-view .quality-content .button { margin-top: 7px; }
#studio-view .quality-stages { display: block; margin: 8px 0; }
#studio-view .quality-stages li { margin-bottom: 8px; background: transparent; border-color: var(--shell-line); }
#studio-view .editor-secondary-actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 0; }
#studio-view .editor-secondary-actions > button { text-align: left; }
#studio-view .studio-style-control { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 12px 0 0; color: var(--shell-muted); font-size: 12px; }
#studio-view :is(.studio-style-control select, .quick-editor input, .quick-editor textarea, .studio-chat-tools input) { max-width: 100%; padding: 7px 9px; color: var(--shell-text); background: var(--shell-raised); border: 1px solid var(--shell-control); border-radius: 6px; font-size: 13px; }
#studio-view .quick-editor label { display: block; margin-top: 10px; color: var(--shell-muted); font-size: 12px; }
#studio-view .studio-feedback { flex: none; max-height: 95px; margin: 0 0 8px; padding: 8px 10px; overflow: auto; color: var(--shell-text); border: 1px solid var(--shell-line); border-radius: 6px; background: var(--shell-raised); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#studio-view .studio-feedback:empty { display: none; }
#studio-view .studio-feedback[data-error=true] { color: var(--shell-danger); }
#studio-view .job-panel { display: block; flex: none; max-height: 175px; margin: 10px 0 0; padding: 10px 12px; overflow: auto; color: var(--shell-text); background: var(--shell-raised); border: 1px solid var(--shell-line); border-radius: 7px; }
#studio-view .job-panel strong { font-size: 13px; }
#studio-view .job-panel p { margin: 5px 0; color: var(--shell-muted); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#studio-view .job-actions { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 5px; }
#studio-view #job-cancel { color: var(--shell-danger); }
#studio-view .studio-job-history { flex: none; max-height: 115px; margin-top: 10px; overflow: auto; color: var(--shell-muted); font-size: 12px; }
#studio-view .studio-job-history summary { min-height: 28px; cursor: pointer; }
#studio-view .studio-job-history-row { padding: 6px 4px; color: var(--shell-muted); border-color: var(--shell-line); font-size: 12px; }
#studio-view #chat-log { flex: 1; min-height: 70px !important; max-height: none; padding: 18px 0 10px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
#studio-view .chat-message { padding: 12px 0; background: transparent; border: 0; border-radius: 0; color: var(--shell-text); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#studio-view .chat-message :is(strong, .message-role) { color: var(--shell-muted); font-size: 12px; }
#studio-view .chat-message.user { margin: 0 0 12px 36px; padding: 10px 12px; background: var(--shell-raised); border: 1px solid var(--shell-line); border-radius: 8px; color: var(--shell-text); }
#studio-view .chat-message pre { max-width: 100%; overflow: auto; background: var(--shell-panel); color: var(--shell-text); }
#studio-view .studio-chat-tools { flex: none; margin: 7px 0 9px; border: 0; color: var(--shell-muted); }
#studio-view .studio-chat-tools > div { display: flex; flex-wrap: wrap; gap: 5px; }
#studio-view .studio-chat-tools button { min-height: 30px; padding: 5px 8px; border: 1px solid var(--shell-line); border-radius: 6px; background: transparent; color: var(--shell-muted); font-size: 12px; }
#studio-view .studio-chat-tools button[aria-pressed=true] { border-color: var(--shell-control); background: var(--shell-hover); color: var(--shell-text); }
#studio-view .studio-chat-tools p { margin: 7px 0 0; color: var(--shell-muted); font-size: 12px; line-height: 1.5; }
#studio-view .studio-chat-tools .studio-region-context { padding: 8px 10px; border: 1px solid var(--shell-control); border-left: 3px solid var(--shell-accent); border-radius: 6px; color: var(--shell-text); background: var(--shell-raised); overflow-wrap: anywhere; }
#studio-view .studio-chat-tools label { color: var(--shell-muted); font-size: 12px; }
#studio-view #edit-form { flex: none; width: 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--shell-control); border-radius: 9px; background: var(--shell-raised); }
#studio-view #edit-form:focus-within { border-color: var(--shell-accent); }
#studio-view .studio-composer-label { display: block; color: var(--shell-muted); font-size: 12px; line-height: 1.5; }
#studio-view #edit-prompt { display: block; width: 100%; min-height: 72px; max-height: 150px; margin: 0; padding: 7px 0; resize: vertical; color: var(--shell-text); background: transparent; border: 0; font-size: 14px; line-height: 1.5; }
#studio-view #edit-prompt::placeholder { color: var(--shell-muted); opacity: 1; }
#studio-view .edit-form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; background: transparent; border: 0; }
#studio-view .edit-form-bottom .button { min-height: 32px; padding: 5px 12px; font-size: 12px; }
#studio-view .editor-note { flex: none; margin: 7px 0 0; color: var(--shell-muted); font-size: 11px; line-height: 1.5; }
#studio-view .panel-resize-right { top: 0; right: -6px; bottom: 0; left: auto; width: 12px; min-width: 12px; min-height: 24px; border: 0; border-radius: 0; background: transparent; z-index: 5; }
#studio-view .panel-resize-right:hover, #studio-view .panel-resize-right:focus-visible { background: var(--shell-accent); }

/* The preview is the available workbench, rather than a card below reports. */
#studio-view #workspace-preview { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0 !important; height: 100% !important; border: 1px solid var(--shell-line); border-radius: 9px; background: var(--shell-panel); overflow: hidden; }
#studio-view .studio-selection-bar { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; min-height: 38px; padding: 4px 10px; background: var(--shell-panel); border-bottom: 1px solid var(--shell-line); }
#studio-view .studio-selection-bar span { order: 1; flex: 1 0 100%; min-width: 0; min-height: 3em; color: var(--shell-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
#studio-view :is(#studio-select-block, #studio-annotate) { white-space: nowrap; }
#studio-view :is(#studio-select-block, #studio-annotate)[aria-pressed=true] { color: var(--shell-accent); background: var(--shell-hover); box-shadow: inset 0 0 0 1px currentColor; }
#studio-view #preview-container { position: relative; display: flex; justify-content: center; align-items: stretch; flex: 1 !important; width: 100%; height: auto !important; min-height: 0 !important; padding: 0; overflow: auto; background: var(--shell-panel); }
#studio-view #preview-frame { display: block; height: 100% !important; min-height: 0; max-width: 100%; margin: 0 auto; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
#studio-view .empty-preview { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; color: var(--shell-muted); background: var(--shell-panel); text-align: center; }
#studio-view .empty-preview > span { color: var(--shell-accent); font-size: 36px; }
#studio-view .empty-preview h3 { margin: 15px 0 6px; color: var(--shell-text); font-size: 20px; }
#studio-view .empty-preview p { color: var(--shell-muted); font-size: 14px; line-height: 1.5; }
#studio-view #code-panel { display: flex; flex: 1; min-width: 0; min-height: 0; background: var(--shell-panel); color: var(--shell-text); }
#studio-view #code-editor { flex: 1; width: 100%; min-height: 0; padding: 20px; color: var(--shell-text); background: var(--shell-panel); border: 0; border-radius: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.6; tab-size: 2; }
#studio-view .code-toolbar { display: flex; flex: none; align-items: center; flex-wrap: wrap; gap: 5px 12px; padding: 10px 12px; color: var(--shell-muted); background: var(--shell-raised); border-top: 1px solid var(--shell-line); }
#studio-view .code-toolbar p { flex: 1; min-width: 160px; color: var(--shell-muted); font-size: 12px; line-height: 1.5; }
#studio-view .studio-artifact-panel { flex: 1; min-width: 0; min-height: 0; padding: 24px; overflow: auto; color: var(--shell-text); background: var(--shell-panel); }
#studio-view .studio-artifact-panel > h2 { color: var(--shell-text); font-size: 24px; }
#studio-view :is(.studio-panel-intro, .studio-caption, .brief-field small, .studio-review-finding p, .studio-design-card p, .human-action-card p) { color: var(--shell-muted); }
#studio-view :is(.brief-overview, .studio-design-card, .studio-change, .studio-human-action, .human-action-card, .studio-review-finding, .studio-feature) { color: var(--shell-text); background: var(--shell-raised); border-color: var(--shell-line); }
#studio-view .brief-field { color: var(--shell-text); }
#studio-view :is(.brief-field input, .brief-field textarea, .brief-field select) { color: var(--shell-text); background: var(--shell-panel); border-color: var(--shell-control); }
#studio-view .studio-change-comparison pre { color: var(--shell-text); background: var(--shell-panel); }
#studio-view .studio-warning { color: var(--shell-warning); background: var(--shell-raised); border-color: var(--shell-control); }

@media (max-width: 1250px) and (min-width: 901px) {
  #studio-view { --shell-chat-width: min(var(--studio-chat, 450px), 360px); }
  #studio-view .studio-shell-brand { font-size: 12px; }
  #studio-view .studio-project-heading { gap: 6px; }
  #studio-view .mode-status { display: none; }
  #studio-view .studio-header-actions { gap: 4px; }
  #studio-view .studio-header-actions .button { padding: 6px 7px; font-size: 11px; }
  #studio-view .preview-tabs > button { padding: 5px 7px; font-size: 11px; }
  #studio-view #workspace-open { padding: 5px; font-size: 11px; }
  #studio-view .device-controls .icon-button { width: 25px; min-width: 25px; }
}
@media (max-width: 900px) {
  #studio-view { height: 100dvh; min-height: 0; }
  #studio-view .studio-header { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 5px; padding: 6px 10px 0; }
  #studio-view .studio-project-heading { padding: 0; }
  #studio-view .studio-shell-brand { font-size: 14px; }
  #studio-view #project-name { min-height: 44px; }
  #studio-view .studio-header-actions { grid-row: 2; width: 100%; justify-content: flex-start; gap: 5px; flex-wrap: wrap; }
  #studio-view .studio-header-actions .button { min-height: 44px; padding: 8px 9px; font-size: 12px; }
  #studio-view .mode-status { display: none; }
  #studio-view .preview-toolbar { grid-row: 3; min-height: 44px; padding: 0; gap: 5px; flex-wrap: wrap; }
  #studio-view .preview-tabs { flex: 1 0 185px; min-width: 185px; border-radius: 7px; }
  #studio-view .preview-tabs > button { flex: 1; min-height: 44px; padding: 8px; border-radius: 5px; font-size: 12px; }
  #studio-view #workspace-open { min-height: 44px; padding: 8px; font-size: 12px; }
  #studio-view .device-controls { margin-left: auto; }
  #studio-view .device-controls .icon-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  #studio-view .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  #studio-view .mobile-workspace-tabs { display: flex; align-items: stretch; flex: none; gap: 5px; margin: 6px 10px; padding: 4px; border: 1px solid var(--shell-line); border-radius: 7px; background: var(--shell-panel); }
  #studio-view .mobile-workspace-tabs button { flex: 1; min-height: 44px; padding: 7px 10px; border-radius: 5px; color: var(--shell-muted); background: transparent; font-size: 13px; }
  #studio-view .mobile-workspace-tabs button[aria-selected=true] { color: var(--shell-text); background: var(--shell-hover); }
  #studio-view .studio-layout { display: block !important; flex: 1; height: auto !important; min-height: 0; padding: 0 10px 10px; }
  #studio-view #workspace-chat, #studio-view #workspace-preview { display: none !important; height: 100% !important; min-height: 0 !important; max-height: none; }
  #studio-view .studio-layout[data-mobile-panel=preview] #workspace-preview { display: flex !important; }
  #studio-view .studio-layout[data-mobile-panel=chat] #workspace-chat, #studio-view .studio-layout[data-mobile-panel=pages] #workspace-chat { display: flex !important; }
  #studio-view #workspace-chat { padding: 10px 3px 0 !important; border-radius: 0; overflow-y: auto; overscroll-behavior: contain; }
  #studio-view .chat-heading p { display: none; }
  #studio-view .studio-tools-content { max-height: 30dvh; }
  #studio-view #studio-sections > button { min-height: 44px; font-size: 13px; }
  #studio-view .studio-project-tools > summary { min-height: 44px; font-size: 13px; }
  #studio-view .studio-chat-tools { margin: 5px 0; }
  #studio-view .studio-chat-tools button { min-height: 44px; }
  #studio-view .job-panel { max-height: 120px; margin-top: 5px; }
  #studio-view .studio-job-history { max-height: 70px; margin-top: 5px; }
  #studio-view #chat-log { min-height: 60px !important; padding: 10px 0; }
  #studio-view #edit-prompt { min-height: 72px; max-height: 110px; font-size: 16px; }
  #studio-view .edit-form-bottom .button, #studio-view .edit-form-bottom .text-button { min-height: 44px; }
  #studio-view .studio-selection-bar { min-height: 44px; padding: 4px 6px; }
  #studio-view .studio-selection-bar .text-button { min-height: 44px; }
  #studio-view .studio-selection-bar span { font-size: 12px; }
  #studio-view #preview-container { flex: 1 !important; height: auto !important; min-height: 0 !important; }
  #studio-view #preview-frame { min-height: 0; }
  #studio-view .studio-artifact-panel { overflow: auto; padding: 18px 14px; }
  #studio-view .panel-resize { display: none !important; }
  #studio-view .code-toolbar .button { min-height: 44px; }
}
@media (max-height: 650px) and (min-width: 901px) {
  #studio-view #workspace-chat { overflow-y: auto; overscroll-behavior: contain; }
  #studio-view .chat-heading p, #studio-view .editor-note { display: none; }
  #studio-view .studio-tools-content { max-height: 30dvh; }
  #studio-view .job-panel { max-height: 105px; }
  #studio-view .studio-job-history { max-height: 65px; }
  #studio-view #edit-prompt { min-height: 60px; max-height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  #studio-view *, #studio-view *::before, #studio-view *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: more) {
  #studio-view { --shell-muted: #f9f6f9; --shell-line: #73737b; --shell-control: #b2b1bc; }
  #studio-view :is(input, textarea, select, .button-outline, #edit-form) { border-width: 2px; }
}
@media (forced-colors: active) {
  #studio-view { color: CanvasText; background: Canvas; }
  #studio-view :is(button, summary) { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
  #studio-view :is(input, textarea, select) { color: FieldText; background: Field; border-color: FieldText; }
  #studio-view :is(button, input, textarea, select, summary):focus-visible { outline-color: Highlight; }
  #studio-view .preview-tabs > button[aria-selected=true], #studio-view .mobile-workspace-tabs button[aria-selected=true] { color: HighlightText; background: Highlight; }
}

/* Text-only notifications occupy a status row rather than covering the composer or Apply. */
body.workspace-mode:has(#studio-view:not([hidden])) { display: flex; flex-direction: column; }
body.workspace-mode:has(#studio-view:not([hidden])) > main { flex: 1; height: auto; min-height: 0; }
body.workspace-mode:has(#studio-view:not([hidden])) #studio-view { flex: 1; height: auto; min-height: 0; }
body.workspace-mode:has(#studio-view:not([hidden])) > #status-message {
  position: static;
  order: 1;
  flex: none;
  width: 100%;
  max-width: none;
  max-height: 16dvh;
  margin: 0;
  padding: 7px 16px;
  border: 0;
  border-top: 1px solid #73737b;
  border-radius: 0;
  background: #171719;
  color: #b2b1bc;
  box-shadow: none;
  transform: none;
  font-size: 12px;
  line-height: 1.5;
  overflow: auto;
  overflow-wrap: anywhere;
  pointer-events: none;
}
body.workspace-mode:has(#studio-view:not([hidden])) > #status-message:empty { display: block; height: 0; padding: 0; border: 0; overflow: hidden; }
body.workspace-mode:has(#studio-view:not([hidden])) > #status-message[data-error=true] { color: #ffb4b4; }
@media (forced-colors: active) {
  body.workspace-mode:has(#studio-view:not([hidden])) > #status-message { color: CanvasText; background: Canvas; border-color: CanvasText; }
}

/* Owner-only lead inbox: long customer messages remain readable on narrow screens. */
.studio-leads-controls{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.studio-leads-controls button{min-height:44px}.studio-leads-list{list-style:none;padding:0;margin:16px 0}.studio-lead{border:1px solid var(--shell-line,#53667e);border-radius:10px;padding:16px;margin:12px 0;background:var(--shell-raised,#172331)}.studio-lead h3{margin:0 0 8px}.studio-lead p{margin:8px 0;overflow-wrap:anywhere}.studio-lead-message{white-space:pre-wrap}.studio-leads-status[data-error=true]{color:#ffb4b4}@media(max-width:600px){.studio-leads-controls{flex-direction:column}.studio-leads-controls button{width:100%}}

.studio-leads-dialog{width:min(880px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:20px;overflow:auto;color:#f3f6fb;background:#101820;border:1px solid #71849e;border-radius:14px;font:16px/1.5 system-ui,sans-serif}.studio-leads-dialog::backdrop{background:#000b}.studio-leads-dialog-header{position:sticky;top:-20px;display:flex;justify-content:space-between;gap:16px;align-items:start;background:#101820;padding:12px 0;z-index:1}.studio-leads-dialog-header h2{margin:0;font-size:24px}.studio-leads-dialog .button{min-height:44px;color:#fff;background:#214b78;border:1px solid #9ab4d2}.studio-leads-dialog :focus-visible{outline:3px solid #79baff;outline-offset:3px}.studio-leads-dialog .button:disabled{opacity:.55}.studio-leads-dialog .studio-caption{color:#c2d0e2}

#project-leads-open{min-width:0;white-space:nowrap;padding:6px 10px}.studio-leads-label-compact{display:none}@media(max-width:700px){#project-leads-open{font-size:12px;padding:6px 8px}.studio-leads-label-wide{display:none}.studio-leads-label-compact{display:inline}}

.studio-leads-dialog .button:not(:disabled):is(:hover,:focus-visible){background:#2b5c90;color:#fff;border-color:#b9d4f3}

.studio-leads-capacity[data-warning=true]{padding:12px;border:1px solid #eec071;border-radius:8px;color:#ffe0a8;background:#382c19}

/* A held generation result is inspection-only, independent of the saved editor. */
.studio-job-result-dialog{width:min(1120px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:20px;border:1px solid #85858f;border-radius:12px;background:#171719;color:#f9f6f9;font:16px/1.5 system-ui,sans-serif;overflow:auto;box-sizing:border-box}
.studio-job-result-dialog::backdrop{background:#000b}
.studio-job-result-heading{position:sticky;top:-20px;display:flex;align-items:start;justify-content:space-between;gap:16px;padding:12px 0;background:#171719;z-index:1}
.studio-job-result-heading h2{font-size:24px;line-height:1.3;margin:0;overflow-wrap:anywhere}
.studio-job-result-dialog h3{font-size:18px;margin:20px 0 8px}
.studio-job-result-dialog p,.studio-job-result-dialog li{overflow-wrap:anywhere}
.studio-job-result-dialog ul{padding-left:24px}
.studio-job-result-notice{padding:12px;border:1px solid #a58d69;border-radius:6px;background:#30291f;color:#ffe0ac}
.studio-job-result-caption{color:#c8c6d0;font-size:14px}
.studio-job-result-page-control{display:grid;gap:6px;margin-top:20px}
.studio-job-result-page-control select{min-width:0;max-width:100%;min-height:44px;padding:8px;border:1px solid #8d8d97;border-radius:6px;background:#242428;color:#f9f6f9;font:inherit}
.studio-job-result-dialog iframe{display:block;width:100%;height:500px;border:1px solid #8d8d97;border-radius:6px;background:white;box-sizing:border-box}
.studio-job-result-downloads{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.studio-job-result-dialog .button{min-height:44px;white-space:normal;color:#f9f6f9;background:#29292f;border:1px solid #92929b}
.studio-job-result-dialog .button:hover{background:#37373e}
.studio-job-result-dialog :focus-visible{outline:3px solid #79baff;outline-offset:3px}
@media(max-width:600px){.studio-job-result-dialog{padding:16px}.studio-job-result-heading{top:-16px;gap:12px}.studio-job-result-heading h2{font-size:21px}.studio-job-result-downloads{flex-direction:column}.studio-job-result-downloads .button{width:100%}.studio-job-result-dialog iframe{height:420px}}