/* 0.18 Desktop Studio — layout ownership belongs to docks, not page cards. */
:root {
  --studio-gap: 2px; --panel-padding: 6px; --control-height: 26px;
  --font-family-studio: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-size-micro: 10px; --font-size-label: 11px; --font-size-body: 12px;
  --radius-sharp: 2px; --radius-panel: 4px; --border-studio: 1px solid #282828;
  --bg-app-root: #0e0e0e; --bg-panel: #181818; --bg-panel-header: #202020;
  --bg-control: #2a2a2a; --bg-control-hover: #353535; --bg-accent: #0078d4;
  --text-primary: #e0e0e0; --text-secondary: #909090; --text-accent: #38adf8;
}
html:has(body.desktop-studio), body.desktop-studio {
  width: 100%; height: 100vh; height: 100dvh; overflow: hidden !important;
  margin: 0; padding: 0; position: static !important;
  background: var(--bg-app-root); color: var(--text-primary);
  font: 12px/1.4 var(--font-family-studio);
  --paper: #e0e0e0; --muted: #909090; --cyan: #38adf8; --gold: #38adf8;
  --line: #282828; --shadow: none;
}
body.desktop-studio .noise, .studio-legacy { display: none !important; }
body.desktop-studio.ai-tools-open::before { display: none; }
body.desktop-studio dialog { max-width: min(640px,calc(100vw - 16px)); max-height: calc(100dvh - 16px); padding: 8px; border: var(--border-studio); border-radius: 4px; background: #181818; color: #e0e0e0; }
body.desktop-studio dialog :is(h1,h2,h3) { font-size: 12px; }
body.desktop-studio dialog :is(button,input,select,summary) { min-height: 26px; height: 26px; padding: 0 6px; border-radius: 2px; font-size: 11px; }
body.desktop-studio dialog :is(article,section,.format-card,.privacy-banner) { padding: 6px; border-radius: 2px; }
body.desktop-studio .studio-container {
  display: grid; grid-template-rows: 36px minmax(0, 1fr) 220px;
  width: 100%; height: 100vh; height: 100dvh; min-height: 0 !important;
  gap: 2px; padding: 0; margin: 0 !important; overflow: hidden; background: #0e0e0e;
}
.studio-container *, .studio-container *::before, .studio-container *::after { box-sizing: border-box; }
body.desktop-studio .studio-main-workarea {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 280px;
  min-height: 0; min-width: 0; width: 100%; max-width: none; margin: 0; padding: 0; gap: 2px; overflow: hidden;
}
.studio-container .dock-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #181818; border: var(--border-studio); border-radius: 0; }
.studio-container .dock-panel-header { flex: 0 0 28px; min-height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; background: #202020; border-bottom: var(--border-studio); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #909090; }
.studio-container .dock-topbar { display: flex; align-items: center; gap: 8px; padding: 0 6px; min-width: 0; border-bottom: var(--border-studio); background: #181818; }
.studio-container .dock-top-actions, #dockUtilities, #dockMonitorActions { display: flex; align-items: center; gap: 4px; }
.studio-container .dock-top-actions { margin-left: auto; flex-shrink: 0; }
.studio-container .brand { display: flex; gap: 5px; padding: 0; border: 0; background: none; }
.studio-container .brand-mark { width: 24px; height: 24px; min-width: 24px; border: 0; border-radius: 2px; background: none; box-shadow: none; }
.studio-container .brand-mark img { width: 24px; height: 24px; object-fit: contain; }
.studio-container .brand-mark i, .studio-container .brand-copy small { display: none; }
.studio-container .brand-copy strong { font-size: 10px; letter-spacing: .3px; white-space: nowrap; }
#dockProjectTitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 40px; border-left: var(--border-studio); padding-left: 8px; }
#dockProjectTitle strong { font-size: 12px; font-weight: 500; }
#dockSaveState { color: #909090; font-size: 10px; white-space: nowrap; }
.studio-container .dock-mode-label { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.studio-container button, .studio-container select, .studio-container input:not([type="range"]):not([type="file"]), .studio-container summary, .studio-container .editor-import-button {
  min-height: 26px; height: 26px; max-height: 28px; margin: 0; padding: 0 6px;
  border: var(--border-studio); border-radius: 2px; box-shadow: none;
  background: #2a2a2a; color: #e0e0e0; font: 11px/1.2 var(--font-family-studio);
}
.studio-container button { cursor: pointer; }
.studio-container button:hover, .studio-container summary:hover { background: #353535; }
.studio-container button:disabled { opacity: .4; cursor: not-allowed; }
.studio-container :focus-visible { outline: 2px solid #38adf8; outline-offset: -2px; }
.studio-container button.active, .studio-container button[aria-selected="true"], .studio-container button[aria-pressed="true"] { color: #38adf8; border-color: #0078d4; background: #182c3d; }
.studio-container .dock-export, .studio-container .primary-cta { background: #0078d4; border-color: #0078d4; color: white; }
.studio-container input[type="range"] { height: 24px; min-height: 0; padding: 0; margin: 0; accent-color: #38adf8; }
.studio-container .dock-tabs { display: flex; flex-wrap: wrap; flex-shrink: 0; gap: 2px; padding: 4px; background: #202020; border-bottom: var(--border-studio); }
.studio-container .dock-tabs button { flex: 1 0 auto; background: transparent; border-color: transparent; }
.studio-container #dockLibrary .dock-tabs button { flex-basis: 28%; }
.studio-container .dock-tabs button[aria-selected="true"] { border-bottom: 2px solid #38adf8; color: #38adf8; background: #2a2a2a; }
.studio-container .dock-pane-host { flex: 1; min-height: 0; overflow: hidden; }
.studio-container .dock-pane { height: 100%; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; scrollbar-color: #555 #181818; }
.studio-container [hidden], .studio-container .hidden { display: none !important; }
.studio-container .dock-pane .view { display: block; height: auto !important; min-height: 0 !important; max-height: none !important; width: 100%; padding: 0 !important; margin: 0; overflow: visible; }
.studio-container .page-title, .studio-container .create-card-heading, .studio-container .ai-workbench-head > div, .studio-container .private-ai-page-title { display: none; }
.studio-container .dock-pane :is(article, .create-card, .clip-inspector, .trend-form, .trend-results, .ai-workbench, .ai-console-layout, .private-ai-console, .studio-panel, .record-settings-body, .connected-ai-hub, .ai-response, .signal-card, .memory-card) {
  max-width: 100%; min-width: 0; border-radius: 2px; box-shadow: none; background: #181818; padding: 6px; gap: 6px; margin: 0 0 6px;
}
.studio-container .dock-pane :is(h1,h2,h3,h4,p) { margin: 0 0 6px; font-size: 12px; line-height: 1.4; }
.studio-container .dock-pane :is(div,article,section,aside,form,details) { border-radius: 2px !important; box-shadow: none !important; }
.studio-container .dock-pane :is(h1,h2,h3,h4,strong,b) { font-size: 12px; }
.studio-container .dock-pane :is(.ai-workbench-head,.ai-tool-tabs,.ai-inputs,.ai-empty-state,.creator-memory-control,.private-ai-gate,.private-ai-history,.private-ai-project-link,.ai-result-body,.prompt-library-drawer,.ai-advanced-drawer,.prompt-workspace) { padding: 6px !important; gap: 6px; }
.studio-container .dock-pane :is(small, label, .field-label, .editor-setting>span) { font-size: 11px; line-height: 1.4; }
.studio-container .dock-pane :is(.field-label,.editor-setting) { display: grid; gap: 4px; margin-bottom: 6px; }
.studio-container .dock-pane :is(.two-fields,.three-fields,.studio-device-grid,.trend-workspace,.ai-console-layout,.create-source-row,.provider-launch-grid,.memory-grid,.connected-ai-provider-grid) { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
.studio-container .dock-pane textarea { width: 100%; min-height: 60px; max-height: 200px; resize: vertical; margin: 0; padding: 6px; border: var(--border-studio); border-radius: 2px; background: #2a2a2a; color: #e0e0e0; font: 12px/1.4 var(--font-family-studio); }
.studio-container .dock-pane :is(input,select) { max-width: 100%; min-width: 0; width: 100%; }
.studio-container .dock-pane :is(.create-action-row,.trend-action-row,.filter-row,.signal-actions,.aspect-buttons,.inspector-actions,.drawer-tool-grid) { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.studio-container .dock-pane :is(.source-choice,.capture-card) { display: flex; align-items: center; gap: 4px; width: 100%; }
.studio-container .source-choice small, .studio-container .capture-card small { display: none; }
.studio-container .source-choice strong, .studio-container .capture-card strong { font-size: 11px; }
.studio-container .dock-help { font-size: 11px; color: #909090; }
#dockMediaList { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: var(--border-studio); }
#dockMediaList button { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.studio-container .dock-pane :is(.hook-option,.memory-stats>div) { padding: 6px; border-radius: 2px; }
.studio-container .dock-pane blockquote { font-size: 12px; padding: 0 0 0 6px; margin: 0 0 6px; }
.studio-container button :is(span,b,strong) { font-size: inherit; }
.studio-container .editor-side-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 0; border: 0; background: none; margin: 8px 0; }
.studio-container .editor-side-tool { display: flex; justify-content: flex-start; gap: 6px; }
.studio-container .editor-side-tool span { font-size: 11px; }
.studio-container .docked-menu { position: static; display: block; }
.studio-container .docked-menu > summary { display: none; }
.studio-container .docked-menu > .editor-menu-panel { display: grid; position: static; width: 100%; min-width: 0; max-height: none; padding: 0; gap: 6px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.studio-container .dock-monitor { position: relative; }
#dockEditMonitor { display: grid; grid-template-rows: minmax(0,1fr) 34px; flex: 1; min-height: 0; overflow: hidden; }
#dockPreviewWell { display: grid; place-items: center; min-height: 0; min-width: 0; overflow: hidden; background: #0e0e0e; }
body.desktop-studio .studio-container #editorPreview { width: var(--dock-preview-width, 100px); height: var(--dock-preview-height, 178px); min-height: 0; max-height: none; max-width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
/* Overlay typography is content, not UI: retain the user's chosen title size. */
.studio-container #editorPreview :is(#editorOverlayResizeHandle,#editorTextResizeHandle) { min-height: 24px; width: 24px; height: 24px; }
.studio-container .editor-preview-empty { padding: 8px; gap: 4px; align-content: center; }
.studio-container .editor-preview-empty > span { width: 26px; height: 26px; border-radius: 2px; }
.studio-container .editor-preview-empty small { font-size: 11px; }
.studio-container .editor-playback-bar { display: grid; grid-template-columns: 26px 26px auto minmax(0,1fr) auto 48px; width: 100%; height: 34px; padding: 4px 6px; gap: 4px; background: #202020; }
.studio-container .editor-playback-bar span { font-size: 10px; }
#dockImportStatus:has(.hidden) { display: none; }
#dockImportStatus { flex-shrink: 0; }
.studio-container .editor-import-status { margin: 0; padding: 4px 6px; font-size: 11px; }
#dockTimeline { overflow: hidden; min-height: 0; }
body.desktop-studio .studio-container .timeline-dock { display: grid; grid-template-rows: 32px minmax(0,1fr); height: 220px !important; min-height: 0; max-height: none; resize: none; padding: 0; overflow: hidden; background: #181818; border: var(--border-studio); border-radius: 0; }
.studio-container .timeline-toolbar { position: static; height: 32px; min-height: 0; padding: 2px 6px; gap: 6px; background: #202020; overflow-x: auto; }
.studio-container .timeline-tools { flex-shrink: 0; gap: 4px; }
.studio-container .timeline-tools label { display: flex !important; font-size: 11px; }
.studio-container #editorMuteButton { display: block !important; }
.studio-container .timeline-toolbar strong { font-size: 10px; text-transform: uppercase; }
.studio-container .timeline-toolbar span { font-size: 10px; white-space: nowrap; }
.studio-container .timeline-scroll { min-height: 0; max-height: none; height: 100%; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: auto; }
.studio-container .timeline-footer { display: none; }
.studio-container .timeline-track { min-height: 30px; height: 30px; background: #181818; border-color: #282828; }
.studio-container .timeline-track-label { background: #202020; border-color: #282828; }
.studio-container .timeline-track-label b { font-size: 10px; }
.studio-container .timeline-track-label small { font-size: 9px; }
.studio-container :is(.editor-timeline,.editor-audio-timeline,.editor-overlay-timeline,.editor-text-timeline) { min-height: 30px; height: 30px; padding-top: 2px; padding-bottom: 2px; }
.studio-container :is(.timeline-clip,.timeline-audio-clip,.timeline-overlay-clip,.timeline-text-clip) { top: 2px !important; height: 26px; min-height: 26px; padding-top: 2px; padding-bottom: 2px; border-radius: 2px; box-shadow: none; }
.studio-container :is(.timeline-clip,.timeline-audio-clip,.timeline-overlay-clip,.timeline-text-clip) strong { font-size: 10px; }
.studio-container .timeline-clip small { display: none; }
.studio-container .timeline-ruler { height: 20px; background-color: #202020; }
.studio-container .timeline-ruler span { top: 2px; font-size: 10px; }
#dockRecordMonitor { display: grid; grid-template-columns: minmax(0,1fr) 196px; flex: 1; min-height: 0; overflow: hidden; background: #0e0e0e; }
.studio-container .studio-camera-column { display: grid; grid-template-rows: minmax(0,1fr) auto; height: 100%; min-height: 0; gap: 0; }
#dockRecordWell { display: grid; place-items: center; min-width: 0; min-height: 0; overflow: hidden; background: #0e0e0e; }
.studio-container .desktop-recorder-quick-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; gap: 10px; padding: 12px 10px; overflow-y: auto; border-left: 1px solid #303030; background: linear-gradient(180deg,#17191d,#101114); scrollbar-width: thin; }
.studio-container .desktop-recorder-quick-panel header { display: grid; gap: 3px; padding: 2px 2px 8px; border-bottom: 1px solid #2d3036; }
.studio-container .desktop-recorder-quick-panel header span { display: grid; gap: 2px; }
.studio-container .desktop-recorder-quick-panel header b { color: #f1f3f5; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.studio-container .desktop-recorder-quick-panel header small { color: #8f98a3; font-size: 9px; line-height: 1.35; }
.studio-container .desktop-recorder-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.studio-container .desktop-recorder-quick-grid button { display: grid; height: 64px; max-height: none; min-width: 0; grid-template-rows: 27px auto; place-items: center; gap: 4px; padding: 7px 4px; border-color: #323741; border-radius: 8px; background: linear-gradient(145deg,#252a32,#191c22); color: #dfe5eb; box-shadow: inset 0 1px rgba(255,255,255,.04); }
.studio-container .desktop-recorder-quick-grid button:hover { border-color: rgba(56,173,248,.7); background: linear-gradient(145deg,#293746,#1b2631); color: #fff; }
.studio-container .desktop-recorder-quick-grid button:active { transform: translateY(1px); }
.studio-container .desktop-recorder-quick-grid button b { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: rgba(56,173,248,.11); color: #58bcfa; font-size: 16px; }
.studio-container .desktop-recorder-quick-grid button span { max-width: 100%; overflow: hidden; font-size: 9px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.studio-container .studio-frame { width: var(--dock-record-width,100px); height: var(--dock-record-height,56px); min-height: 0 !important; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #0e0e0e; }
.studio-container .studio-controls { position: static; width: 100%; padding: 4px 6px; margin: 0; border-radius: 0; gap: 4px; background: #202020; box-shadow: none; }
.studio-container .studio-main-controls { gap: 4px; }
.studio-container .record-button { width: 52px; min-width: 0; }
.studio-container .record-button i { width: 12px; height: 12px; border-radius: 2px; }
.studio-container .record-project-timeline { display: none; }
.studio-container .studio-source-controls { padding: 0; gap: 4px; flex-wrap: wrap; }
.studio-container .studio-source-controls label { font-size: 11px; }
.studio-container .record-settings-drawer { border: 0; border-radius: 0; }
.studio-container .record-settings-drawer > summary { display: none; }
.studio-container .record-settings-body { display: grid; }
/* Neutralize old full-page AI positioning; each module owns its own scroll. */
.studio-container #dock-pane-prompts :is(.ai-workbench,.ai-console-layout,.private-ai-console,.private-ai-chat-shell,.private-ai-main,.ai-chat-panel) { position: static; height: auto; min-height: 0; max-height: none; inset: auto; width: 100%; }
.studio-container #dock-pane-prompts .private-ai-tools-rail { position: static; width: 100%; max-height: none; transform: none; box-shadow: none; }
.studio-container #dock-pane-prompts .private-ai-tools-rail:not(.open) { display: none; }
body.desktop-studio.ai-tools-open .studio-container #dock-pane-prompts .private-ai-tools-rail { display: block; }
.studio-container #dock-pane-prompts .ai-tool-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.studio-container #dock-pane-prompts :is(.ai-console-layout,.ai-console,.ai-presence,.ai-chat-window,.ai-inputs,.ai-chat-composer,.dock-ai-history) { grid-area: auto !important; position: static !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: auto !important; max-height: none; margin: 0 0 6px; padding: 6px; border-radius: 2px; background: #181818; box-shadow: none; }
.studio-container #dock-pane-prompts .ai-console-layout { display: flex !important; flex-direction: column; gap: 6px; padding: 0; }
.studio-container #dock-pane-prompts .ai-console { display: flex; flex-direction: column; padding: 0; }
.studio-container #dock-pane-prompts .ai-chat-window { min-height: 100px !important; max-height: 240px; overflow: auto; border: var(--border-studio); }
.studio-container #dock-pane-prompts .ai-empty-state { padding: 6px; gap: 4px; min-height: 0; height: auto; }
.studio-container #dock-pane-prompts .ai-empty-state > span { display: none; }
.studio-container #dock-pane-prompts .ai-input-switch { display: flex; flex-wrap: wrap; gap: 4px; }
.studio-container #dock-pane-prompts .voice-input-wrap { display: flex; flex-direction: column; gap: 4px; }
.studio-container #dock-pane-prompts #aiContext { padding: 6px !important; min-height: 70px !important; }
.studio-container #dock-pane-prompts .ai-composer-actions { position: static; display: flex; justify-content: flex-end; gap: 4px; transform: none; }
.studio-container #dock-pane-prompts .ai-composer-actions button { min-width: 40px; width: auto; }
.studio-container #dock-pane-prompts .ai-model-switcher-panel { position: static; width: 100%; padding: 6px; border-radius: 2px; }
.studio-container #dock-pane-prompts .ai-presence-orb { display: none; }
.studio-container .timeline-empty { min-height: 0; height: 26px; display: flex; justify-content: flex-start; align-items: center; padding: 2px 6px; gap: 6px; border-radius: 2px; }
.studio-container .timeline-empty small { display: none; }
.studio-container .timeline-empty { width: 100%; cursor: pointer; color: var(--muted); background: transparent; }
.studio-container .timeline-empty:hover { border-color: var(--cyan); color: var(--paper); }
.studio-container .timeline-clip { position: relative; }
.studio-container .timeline-quick-delete { position: absolute; top: 2px; right: 2px; z-index: 8; display: grid !important; width: 22px !important; height: 22px !important; min-height: 0; place-items: center; padding: 0; border: 1px solid rgba(255,110,130,.5); border-radius: 3px; background: rgba(35,12,17,.92); color: #ff9eaa; font-size: 15px; line-height: 1; }
.studio-container .memory-card-actions .danger-action { color: #ff9eaa; border-color: rgba(255,110,130,.45); }
.studio-container #dock-pane-prompts :is(.private-ai-composer,.ai-chat-composer,.private-chat-composer) { position: static; width: 100%; padding: 6px; border-radius: 2px; }
.studio-container .dock-top-actions [data-dock-drawer] { display: none; }
@media (max-width: 1100px) {
  body.desktop-studio .studio-main-workarea { grid-template-columns: 240px minmax(0,1fr); position: relative; }
  .studio-container #dockInspector { display: none; position: absolute; right: 0; top: 0; bottom: 0; width: 280px; z-index: 40; }
  .studio-container[data-drawer="inspector"] #dockInspector { display: flex; }
  .studio-container .dock-top-actions [data-dock-drawer="inspector"] { display: block; }
  #dockSaveState { display: none; }
}
@media (max-width: 760px) {
  body.desktop-studio .studio-container { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); grid-template-rows: 36px minmax(0,1fr) 220px; }
  body.desktop-studio .studio-main-workarea { grid-template-columns: minmax(0,1fr); }
  .studio-container #dockLibrary { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: min(280px,85vw); z-index: 40; }
  .studio-container[data-drawer="library"] #dockLibrary { display: flex; }
  .studio-container .dock-top-actions [data-dock-drawer="library"] { display: block; }
  .studio-container .brand-copy, #dockProjectTitle, .studio-container .dock-mode-label { font-size: 0; }
  .studio-container .brand-copy, #dockSaveState, #installButton, #dockProjectTitle { display: none; }
  .studio-container .dock-topbar { gap: 4px; }
  .studio-container .dock-top-actions { gap: 3px; }
  .studio-container .timeline-toolbar>div:first-child { display: none; }
  .studio-container .timeline-tools { width: max-content; }
  #dockRecordMonitor { grid-template-columns: minmax(0,1fr); }
  .studio-container .desktop-recorder-quick-panel { display: none; }
}
@media (prefers-reduced-motion: reduce) { .studio-container * { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }