/* Shared appearance controls and compact canvas editing. */
.theme-trigger, #platform-shell .theme-trigger { display: inline-grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--muted); cursor: pointer; }
.theme-trigger svg, #platform-shell .theme-trigger svg { width: 18px; height: 18px; }
.theme-trigger:hover, #platform-shell .theme-trigger:hover { color: var(--text); background: var(--panel-2); }
.theme-menu { position: fixed; z-index: 10000; width: 168px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); box-shadow: 0 8px 28px #0002; }
.theme-menu[hidden] { display: none; }
.theme-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 9px 12px; border: 0; border-radius: 6px; background: none; color: var(--text); font-size: 13px; text-align: left; }
.theme-menu button:hover, .theme-menu button:focus-visible { background: var(--panel-2); outline: 1px solid var(--focus-ring); outline-offset: -1px; }
.theme-menu button > span:last-child { visibility: hidden; }
.theme-menu button[aria-checked="true"] > span:last-child { visibility: visible; }
.canvas-top-controls .topbar-right { display: flex; align-items: flex-start; }
.canvas-top-controls .theme-trigger { order: 2; width: 32px; height: 32px; flex-basis: 32px; padding: 7px; }
.canvas-top-controls .platform-canvas-entry { order: 3; }
.home-brand .brand-logo { width: 31px; height: 34px; flex: none; }
.home-sidebar, .home-topbar { border-color: var(--line); }
.home-composer { background: var(--panel); border-color: var(--line); }
#platform-shell #home-prompt:is(:focus, :focus-visible) { outline: none; box-shadow: none; border: 0; }
.composer-prompt:is(:focus, :focus-visible) { outline: none; box-shadow: none; background: transparent; }
.composer-prompt-wrap:focus-within { box-shadow: inset 0 -1px var(--focus-ring); }
.video-composer:has(.composer-prompt:focus), [data-theme="light"] .video-composer:has(.composer-prompt:focus), .agent-composer:focus-within { border-color: var(--focus-ring); box-shadow: none; }
/* The preview stays on the canvas; this panel only holds the selected node's controls. */
.composer-overlay-card, [data-theme="light"] .composer-overlay-card { width: min(510px, calc(100vw - 96px)); max-height: calc(100dvh - 92px); border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 8px 28px #0003; backdrop-filter: none; }
.composer-overlay-card::before { display: none; }
.flow-node.selected > .node-media, .flow-node.selected .pool-top, .flow-node.selected .video-trim-card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 4px 16px #0002; }
.composer-overlay-card.node-focus-image, [data-theme="light"] .composer-overlay-card.node-focus-image { width: min(280px, calc(100vw - 24px)); }
.composer-overlay-card.node-focus-video, [data-theme="light"] .composer-overlay-card.node-focus-video { width: min(360px, calc(100vw - 24px)); }
.composer-overlay-card:has(.media-tool-panel), [data-theme="light"] .composer-overlay-card:has(.media-tool-panel) { width: min(510px, calc(100vw - 96px)); }
#node-layer .video-trim-card { grid-template-rows: minmax(0, 1fr); }
.node-focus-header, [data-theme="light"] .node-focus-header { grid-template-columns: 18px minmax(0, 1fr) 28px; min-height: 40px; gap: 8px; padding: 6px 10px; background: transparent; border-color: var(--line); }
.node-focus-kind { width: 18px; height: 18px; background: none; border: 0; border-radius: 0; }
.node-focus-kind svg { width: 16px; height: 16px; }
.node-focus-header strong, [data-theme="light"] .node-focus-header strong { font-size: 12px; font-weight: 500; color: var(--text); }
.node-focus-header .composer-close { width: 28px; height: 28px; font-size: 20px; }
.node-focus-body, [data-theme="light"] .node-focus-body { padding: 8px 12px 12px; background: transparent; scrollbar-gutter: auto; }
.node-focus-editor, .node-focus-inspector, [data-theme="light"] .node-focus-editor, [data-theme="light"] .node-focus-inspector { padding: 0; border: 0; border-radius: 0; background: none; }
.node-focus-function, .node-focus-pool { display: block; }
.node-focus-function .pool-properties, .node-focus-function .video-trim-editor,
[data-theme="light"] .node-focus-function .pool-properties, [data-theme="light"] .node-focus-function .video-trim-editor { border: 0; padding: 8px 0; background: transparent; border-radius: 0; }
.composer-overlay .composer-tool-row { min-height: 30px; }
.composer-overlay .composer-bottom-bar { flex-wrap: wrap; gap: 5px; }
.composer-overlay .composer-bottom-left { flex: 1; width: auto; }
.composer-overlay .composer-bottom-actions { margin-left: auto; }
.composer-overlay .composer-flyout.open > .composer-popover { position: static; width: 100%; max-height: 260px; box-shadow: none; margin-block: 6px; }
.composer-overlay .node-subfunctions, [data-theme="light"] .composer-overlay .node-subfunctions { margin-top: 0; padding: 0; border: 0; background: transparent; }
.composer-overlay .node-subfunctions button { font-size: 11px; min-height: 34px; }
.node-focus-function .pool-properties > div { max-height: 260px; overflow: auto; }
.composer-overlay .video-composer { gap: 6px; grid-template-columns: minmax(0, 1fr); }
.composer-overlay .video-composer > * { min-width: 0; }
.composer-overlay .video-composer:not(.node-cloud-composer) .composer-tool-row { display: none; }
.composer-overlay .composer-bottom-bar { flex-wrap: nowrap; align-items: flex-end; }
.composer-overlay .composer-compact-trigger { max-width: 245px; }

/* Light surfaces retain the same hierarchy and accent as dark surfaces. */
[data-theme="light"] #platform-shell:is(.platform-home, .platform-account) { --home-sidebar: #f1f2ee; --home-muted: #62696b; }
[data-theme="light"] #platform-shell :is(.home-nav button, .home-modes button, .home-reference-button, .home-quick-start button, .home-section-heading > button, .home-view-switch button, .home-filters button, .home-footer button, .account-text-button, .account-tabs > button, .account-ledger-filters button) { color: var(--muted); }
[data-theme="light"] #platform-shell :is(.home-nav button:hover, .account-text-button:hover) { color: var(--text); }
[data-theme="light"] #platform-shell :is(.home-nav button.is-active, .home-account.is-active, .account-tabs > button[aria-selected="true"], .home-empty-inline button, .home-gallery-empty button, .home-form-message) { color: #806000; }
[data-theme="light"] .home-heading h1 span, [data-theme="light"] .home-heading-mark { color: #997400; }
[data-theme="light"] #platform-shell :is(.home-modes button[aria-pressed="true"], .home-start-button, .account-primary) { color: #292619; }
[data-theme="light"] .home-avatar { background: #e9e4d5; color: #806000; }
[data-theme="light"] #platform-shell :is(.home-eyebrow, .home-compose-tag, .home-composer-meta, .home-shortcut, .home-quick-start > span, .home-project-copy small, .home-gallery-note, .home-idea-caption small, .home-footer, .home-location > span, .account-profile-eyebrow, .account-profile p, .account-summary-copy small, .account-tabs > span, .account-project-caption small, .account-footer, .account-job-list small, .account-capabilities span, .account-asset-types > span, .account-security-aside ul) { color: #62696b; }
[data-theme="light"] #home-prompt::placeholder { color: #747b7c; }
[data-theme="light"] #platform-shell :is(.home-section-heading p, .account-device-note, .account-help-card p, .account-credit-guide p) { color: #62696b; }
[data-theme="light"] #platform-shell .home-canvas-entry { background: #e9ece3; border-color: #d2d7ca; }
[data-theme="light"] .home-canvas-top { color: var(--text); }
[data-theme="light"] :is(.home-canvas-top > span, .home-canvas-bottom, .home-canvas-copy) { color: #56624e; }
[data-theme="light"] .home-mini-canvas rect { fill: #d9dfd2; stroke: #879080; }
[data-theme="light"] #platform-shell .home-quick-start button { border-color: var(--line); }
[data-theme="light"] #platform-shell .home-recent-project { background: var(--panel); border-color: var(--line); }
[data-theme="light"] #platform-shell .home-recent-project:hover { background: var(--panel-2); border-color: #a1a7a7; }
[data-theme="light"] :is(.home-project-cover, .home-view-switch, .home-asset-visual, .home-skeleton-row i) { background: #e8ebeb; border-color: var(--line); }
[data-theme="light"] #platform-shell .home-view-switch button[aria-pressed="true"] { background: white; color: var(--text); }
[data-theme="light"] #platform-shell .home-filters button[aria-pressed="true"] { background: #dedfd7; color: #272821; }
[data-theme="light"] :is(.home-reference-dialog, .home-reference-dialog footer) { background: var(--panel); border-color: var(--line); }
[data-theme="light"] #platform-shell .home-reference-options > button { border-color: var(--line); }
[data-theme="light"] .home-idea-use, [data-theme="light"] .account-project-open, [data-theme="light"] .account-asset-type { color: #fff; }
[data-theme="light"] .account-profile { background: #eceee5; border-color: #d6d9ce; }
[data-theme="light"] .account-profile-avatar { background: #e2dcc7; border-color: #cec5a0; color: #74612d; box-shadow: inset 0 0 0 5px #eae6d8; }
[data-theme="light"] .account-profile-plan, [data-theme="light"] .account-plan { color: #74612d; border-color: #cbc1a0; }
[data-theme="light"] .account-summary { background: #f9faf6; }
[data-theme="light"] :is(.account-summary-icon, .account-job-icon) { background: #e8ebe3; color: #66705d; }
[data-theme="light"] .account-panel { background: var(--panel); border-color: var(--line); }
[data-theme="light"] .account-project-cover { background: #e7ebec; border-color: var(--line); }
[data-theme="light"] .account-wallet { background: #f2eeda; border-color: #d9d0aa; }
[data-theme="light"] :is(.account-wallet-heading > span:first-child, .account-balance > strong, .account-wallet-buckets strong) { color: #625124; }
[data-theme="light"] :is(.account-balance > span, .account-balance small, .account-wallet-buckets span, .account-payment-note), [data-theme="light"] #platform-shell .account-wallet-note { color: #756844; }
[data-theme="light"] #platform-shell .account-wallet-actions button { color: #756025; }
[data-theme="light"] .account-device-icon { background: #e8efe6; color: #536e51; border-color: #c7d4c4; }
[data-theme="light"] :is(.account-device-status small, .account-capabilities strong, .account-job-status.is-completed, .account-ledger td.is-positive) { color: #4e6b4c; }
[data-theme="light"] .account-job-status { color: #62696b; }
[data-theme="light"] .account-job-status.is-failed { color: #a34839; }
[data-theme="light"] .account-job-status:is(.is-running, .is-queued) { color: #866218; }
[data-theme="light"] .account-asset-types b, [data-theme="light"] .account-credit-guide strong { color: var(--text); }
[data-theme="light"] .account-help-card { background: #eef0e8; border-color: #c8cdbb; }
[data-theme="light"] :is(.account-help-card > svg, .account-security-aside > svg, .account-credit-guide > div > span) { color: #747549; }
[data-theme="light"] #platform-shell .account-data-notice { color: #795a22; background: #faf0dc; border-color: #dac79e; }
[data-theme="light"] #platform-shell .account-ledger-filters [aria-pressed="true"] { background: #eeead8; border-color: #c3b785; color: #78602c; }
[data-theme="light"] .account-ledger th { background: #eef0ef; color: #62696b; }
[data-theme="light"] .account-ledger td { color: var(--text); }
[data-theme="light"] .account-ledger td small { color: #62696b; }
[data-theme="light"] #platform-shell.platform-account #platform-account-root .platform-button { background: #f0f2ef; border-color: var(--line); color: var(--text); }
[data-theme="light"] #platform-shell.platform-account #platform-account-root .platform-primary { background: var(--home-yellow); color: #292619; }
[data-theme="light"] #platform-shell.platform-account #platform-account-root input { background: #f9faf8; }
@media (max-width: 820px) {
  .composer-overlay-card { left: var(--node-focus-left); top: var(--node-focus-top); right: auto; width: min(510px, calc(100vw - 96px)); border-radius: 12px; }
  .composer-overlay .composer-bottom-left { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); }
  .composer-overlay .composer-flyout { display: contents; }
  .composer-overlay .composer-flyout.open > .composer-popover { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 680px) {
  .composer-overlay-card, [data-theme="light"] .composer-overlay-card { width: calc(100vw - 24px); }
  .composer-overlay .composer-bottom-bar { flex-wrap: wrap; }
  .composer-overlay .composer-bottom-left { flex: 1 1 100%; grid-template-columns: max-content minmax(0, 1fr); }
  .composer-overlay .composer-compact-trigger { max-width: 100%; }
  .home-top-actions { gap: 10px; }
  .theme-trigger, #platform-shell .theme-trigger { height: 32px; width: 32px; flex-basis: 32px; padding: 6px; }
  .home-brand .brand-logo { width: 26px; height: 28px; }
  #platform-shell.platform-home .home-top-actions .home-top-button { display: none; }
}

.composer-overlay .composer-bottom-left { display: grid; grid-template-columns: minmax(130px, 1fr) max-content minmax(110px, 1.25fr); gap: 2px; align-items: center; }
.composer-overlay .composer-flyout { display: contents; }
.composer-overlay .composer-flyout.reference-panel > .composer-compact-trigger { grid-column: 2; grid-row: 1; }
.composer-overlay .composer-flyout.settings-panel > .composer-compact-trigger { grid-column: 3; grid-row: 1; }
.composer-overlay .composer-compact-trigger { min-width: 0; width: 100%; padding-inline: 6px; }
.composer-overlay .composer-compact-trigger > svg { flex-shrink: 0; }
.composer-overlay .composer-trigger-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.composer-overlay .composer-flyout.open > .composer-popover { grid-column: 1 / -1; grid-row: 2; }
.composer-overlay .node-cloud-composer .composer-bottom-left { grid-template-columns: minmax(0, 1fr); }
.composer-overlay .node-toolbar-main:empty { display: none; }
.composer-overlay .frame-tool { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 0; }
.composer-overlay .frame-tool button { min-height: 36px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 11px; }
.composer-overlay .frame-tool button:hover { background: var(--panel-2); }
@media (max-width: 680px) {
  .composer-overlay .composer-bottom-left { grid-template-columns: minmax(0, 1fr) max-content; }
  .composer-overlay .composer-flyout.settings-panel > .composer-compact-trigger { grid-column: 1 / -1; grid-row: 2; }
  .composer-overlay .composer-flyout.open > .composer-popover { grid-row: 3; }
}

#node-layer .node-toolbar-main:empty { display: none; }
#node-layer .node-toolbar-end:empty { display: none; }
#node-layer .node-subfunctions { min-width: 0; width: max-content; max-width: calc(100vw - 24px); overflow-x: auto; background: var(--panel); border-color: var(--line); }
#node-layer .node-toolbar-main, #node-layer .node-toolbar-end { flex-shrink: 0; }
#node-layer .node-subfunctions button { color: var(--text); font-size: 11px; }
#node-layer .node-subfunctions button:hover, #node-layer .node-subfunctions button.active { background: var(--panel-2); color: var(--text); }
#node-layer .node-toolbar-main:empty + .node-toolbar-end { margin-left: 0; padding-left: 0; border-left: 0; }
@media (max-width: 680px) {
  #node-layer .node-subfunctions button { padding-inline: 6px; font-size: 10px; }
  #node-layer .node-toolbar-main button > svg { display: none; }
}

/* Long prompts stay in the same editor when switching writing space. */
.composer-overlay .node-focus-card:is(.node-focus-image_stage, .node-focus-video_stage, .node-focus-audio_stage) { width: min(580px, calc(100vw - 96px)); }
.composer-overlay .node-focus-header { grid-template-columns: 18px minmax(0, 1fr) auto; }
.node-focus-actions { display: flex; align-items: center; gap: 8px; }
.node-focus-actions .prompt-size-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.node-focus-actions .prompt-size-toggle svg { width: 14px; height: 14px; }
.node-focus-actions .prompt-size-toggle:hover { color: var(--text); background: var(--panel-2); }
.node-focus-actions .prompt-size-toggle:focus-visible { outline: 1px solid var(--muted); outline-offset: 1px; }
.composer-overlay .node-focus-card .video-composer .composer-prompt-wrap { min-height: 0; max-height: none; }
.composer-overlay .node-focus-card .video-composer .composer-prompt { min-height: 160px; max-height: 280px; padding: 10px 4px; font-size: 14px; line-height: 1.8; font-weight: 400; overscroll-behavior: contain; }
.composer-overlay .node-focus-card.prompt-expanded { width: min(760px, calc(100vw - 96px)); }
.composer-overlay.prompt-modal-open { position: fixed; z-index: 500; inset: 0; pointer-events: auto; background: #0007; }
.composer-overlay.prompt-modal-open .node-focus-card { max-height: calc(100dvh - 32px); box-shadow: 0 20px 80px #0005; }
.composer-overlay .node-focus-card .composer-flyout.open > .composer-popover { position: fixed; z-index: 600; bottom: auto; width: min(360px, calc(100vw - 24px)); margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: 0 10px 36px #0003; }
.composer-overlay .node-focus-card.prompt-expanded .video-composer .composer-prompt { height: clamp(240px, calc(100dvh - 330px), 560px); min-height: 0; max-height: none; font-size: 15px; line-height: 1.9; padding: 14px 6px; }
@media (max-width: 680px) {
  .composer-overlay .node-focus-card:is(.node-focus-image_stage, .node-focus-video_stage, .node-focus-audio_stage),
  .composer-overlay .node-focus-card.prompt-expanded { width: calc(100vw - 24px); }
  .node-focus-actions { gap: 4px; }
  .node-focus-actions .prompt-size-toggle { min-height: 36px; padding-inline: 6px; }
  .composer-overlay .node-focus-card.prompt-expanded .video-composer .composer-prompt { height: clamp(200px, calc(100dvh - 360px), 560px); }
}