:root {
  color-scheme: light dark;
  --bg: var(--vscode-editor-background, #f6f7fb);
  --panel: var(--vscode-sideBar-background, #ffffff);
  --surface: var(--vscode-editorWidget-background, #ffffff);
  --fg: var(--vscode-editor-foreground, #222c43);
  --muted: var(--vscode-descriptionForeground, #66738a);
  --border: var(--vscode-panel-border, #dce2ec);
  --accent: var(--vscode-button-background, #5148d8);
  --accent-fg: var(--vscode-button-foreground, #ffffff);
  --focus: var(--vscode-focusBorder, #7168ec);
  --hover: var(--vscode-list-hoverBackground, color-mix(in srgb, var(--fg) 7%, var(--panel)));
  --selected: var(--vscode-list-inactiveSelectionBackground, #ebedfb);
  --danger: var(--vscode-errorForeground, #ce3d48);
  --warning: var(--vscode-editorWarning-foreground, #a66a16);
  --line: var(--vscode-descriptionForeground, #8a96ad);
  --edge-incoming: #0869b3;
  --edge-outgoing: #a24d00;
  --edge-shared: #8540aa;
  --shadow: 0 8px 28px #13234412;
  font-family: var(--vscode-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif);
  font-size: 13px;
}

/* Only the standalone Web/Desktop shell opts into the shared Wiki theme.
   Native webviews keep the VS Code variables and never set data-theme here. */
html[data-theme="light"] {
  color-scheme:light;
  --bg:#f6f7fb; --panel:#ffffff; --surface:#ffffff; --fg:#222c43;
  --muted:#5d6b82; --border:#d3dbe7; --accent:#5148d8; --accent-fg:#ffffff;
  --focus:#665ce1; --hover:#edf0f6; --selected:#ebedfb; --line:#7b879b;
  --danger:#b72f3e; --warning:#8b560b; --ide-positive:#137f4f;
}

* { box-sizing: border-box; }
html, body, #app { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
body { color: var(--fg); background: var(--bg); }
button, select, textarea { font: inherit; color: inherit; }
button, summary, select { -webkit-tap-highlight-color: transparent; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); cursor: pointer; white-space: nowrap; line-height: 1.35; }
button:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, summary:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:active:not(:disabled) { transform: translateY(1px); }
[hidden] { display: none !important; }
h1, h2, h3, h4, p { margin: 0; }
.studio { height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 340px; overflow: hidden; }
.studio-header { flex: 0 0 44px; height: 44px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); background: var(--panel); z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap; }
.brand strong { font-size: 16px; letter-spacing: -.5px; }
.studio-beta-badge { display: inline-flex; align-items: center; flex-shrink: 0; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--warning); color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); font-size: 10px; font-weight: 700; line-height: 1.35; letter-spacing: .2px; }
.studio-tab-beta { display: inline-flex; align-items: center; padding: 0 5px; border-radius: 999px; border: 1px solid var(--warning); color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); font-size: 9px; font-weight: 700; line-height: 1.4; }
.extension-version { flex-shrink: 0; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--accent); color: var(--accent-fg); border-radius: 9px; font-weight: 800; font-size: 12px; letter-spacing: -1px; }
.header-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
#project-title { max-width: 300px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.save-state { color: var(--muted); font-size: 11px; }
.header-actions { display: flex; align-items: center; flex-shrink: 0; gap: 7px; }
.button-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.button-primary:hover:not(:disabled) { background: var(--vscode-button-hoverBackground, #4239c1); border-color: var(--accent); }
.icon-button { padding: 4px; min-width: 28px; width: 28px; height: 28px; min-height: 28px; background: transparent; border-color: transparent; font-size: 18px; }
.advanced-menu { position: relative; }
.advanced-menu summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px; cursor: pointer; border-radius: 4px; }
.advanced-menu summary::-webkit-details-marker { display: none; }
.advanced-menu[open] summary { background: var(--hover); }
.advanced-menu > div { position: absolute; top: calc(100% + 8px); right: 0; width: 180px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.advanced-menu button { border: 0; width: 100%; justify-content: flex-start; }
.studio-body { display: flex; flex: 1; min-width: 0; min-height: 0; position: relative; overflow: hidden; }
.conversation { display: flex; flex-direction: column; flex: 0 0 330px; width: 330px; min-width: 0; min-height: 0; border-right: 1px solid var(--border); background: var(--panel); }
.conversation-heading { flex-shrink: 0; display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 23px 20px 18px; }
.eyebrow { display: block; font-size: 10px; font-weight: 650; letter-spacing: .5px; color: var(--muted); margin-bottom: 6px; }
.conversation-heading h1 { font-size: 15px; font-weight: 650; letter-spacing: -.3px; line-height: 1.45; }
.conversation-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 14px 20px 20px; }
.conversation-scroll::-webkit-scrollbar, .test-panel::-webkit-scrollbar, .work-inspector::-webkit-scrollbar { width: 7px; }
.conversation-scroll::-webkit-scrollbar-thumb, .test-panel::-webkit-scrollbar-thumb, .work-inspector::-webkit-scrollbar-thumb { background: var(--vscode-scrollbarSlider-background, #c8d0dd); border-radius: 8px; }
.task-summary { border: 1px solid var(--border); border-radius: 7px; margin-bottom: 24px; padding: 10px 12px; font-size: 12px; }
.task-summary summary { cursor: pointer; color: var(--muted); }
.task-summary summary span { float: right; font-size: 11px; }
.task-summary p { font-weight: 600; margin: 12px 0 5px; overflow-wrap: anywhere; }
.task-summary > div > span { color: var(--muted); font-size: 11px; }
.messages { display: flex; flex-direction: column; gap: 23px; }
.message { min-width: 0; }
.message-label { font-size: 10px; color: var(--muted); font-weight: 700; margin-bottom: 7px; letter-spacing: .2px; }
.message-user { margin-left: 19px; }
.message-user .message-label { text-align: right; padding-right: 2px; }
.message-text { padding: 13px 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 0 9px 9px 9px; line-height: 1.8; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-user .message-text { background: var(--selected); border-radius: 9px 0 9px 9px; }
/* The model wrote an AI proposal summary before the official check ran: the caption keeps that wording apart from the live check. */
.message-evidence { margin-top: 5px; padding: 0 2px; font-size: 11px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.composer { flex: 0 0 auto; padding: 16px 18px; border-top: 1px solid var(--border); background: var(--panel); }
.composer label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.composer textarea { display: block; width: 100%; height: 85px; min-height: 60px; max-height: 130px; resize: none; padding: 11px 12px; line-height: 1.6; border: 1px solid var(--vscode-input-border, var(--border)); border-radius: 7px; background: var(--vscode-input-background, var(--bg)); color: var(--vscode-input-foreground, var(--fg)); outline-offset: 1px; }
.composer textarea::placeholder { color: var(--vscode-input-placeholderForeground, var(--muted)); opacity: .85; }
.composer-footer { display: flex; align-items: center; gap: 8px; min-width: 0; padding-top: 10px; }
.model-button { border: 0; padding: 3px 0; min-height: 24px; font-size: 11px; background: transparent; color: var(--muted); min-width: 0; justify-content: flex-start; }
#model-name { max-width: 112px; text-overflow: ellipsis; overflow: hidden; }
.model-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--accent); }
.keyboard-hint { font-size: 9px; color: var(--muted); margin-left: auto; white-space: nowrap; }
.send-button { min-width: 61px; padding: 5px 9px; }
.cancel-button { margin-left: auto; }
.workspace { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.status-badge.error { color: var(--danger); border-color: var(--danger); }
.status-badge.busy { border-style: dashed; }
.error-banner { padding: 10px 24px; font-size: 12px; color: var(--danger); background: var(--surface); border-bottom: 1px solid var(--danger); line-height: 1.6; flex: 0 0 auto; max-height: 110px; overflow-y: auto; white-space: pre-wrap; }
.count { font-size: 10px; background: var(--selected); border-radius: 10px; padding: 1px 6px; }
.count:empty { display: none; }
.flow-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.canvas-region { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.graph-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; background-color: var(--bg); background-image: radial-gradient(var(--border) .9px, transparent .9px); background-size: 20px 20px; cursor: grab; outline-offset: -3px; }
.graph-viewport.hand-tool, .graph-viewport.hand-tool .work-node, .graph-viewport.hand-tool button { cursor: grab; }
.graph-viewport.dragging, .graph-viewport.panning, .graph-viewport.panning .work-node, .graph-viewport.panning button { cursor: grabbing; user-select: none; }
.graph-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.graph-edges { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.graph-edges marker path { fill: var(--line); stroke: none; }
.graph-edges #reset-arrow path { fill: var(--warning); }
.graph-edge > path { fill: none; stroke: var(--line); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.graph-edge.edge-back > path { stroke: var(--warning); stroke-dasharray: 6 5; stroke-width: 1.3; opacity: .8; }
.graph-edge > .edge-label-leader { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; stroke-linecap: round; stroke-linejoin: round; opacity: .65; marker-start: none; marker-mid: none; marker-end: none; }
.graph-edge text { fill: var(--muted); font-size: 13px; font-family: var(--vscode-editor-font-family, Consolas, monospace); paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linecap: round; }
html[data-theme="dark"], body.vscode-dark, body.vscode-high-contrast { --edge-incoming:#76beff; --edge-outgoing:#ffba70; --edge-shared:#d5a5ff; }
.graph-edge.edge-incoming { --edge-direction-color:var(--edge-incoming); }
.graph-edge.edge-outgoing { --edge-direction-color:var(--edge-outgoing); }
.graph-edge.edge-shared { --edge-direction-color:var(--edge-shared); }
.graph-edge:is(.edge-incoming,.edge-outgoing,.edge-shared) > path { stroke:var(--edge-direction-color); stroke-width:2.5; opacity:1; }
.graph-edge:is(.edge-incoming,.edge-outgoing,.edge-shared) > .edge-label-leader { stroke:var(--edge-direction-color); opacity:.85; }
.graph-edge:is(.edge-incoming,.edge-outgoing,.edge-shared) text { fill:var(--edge-direction-color); font-weight:600; }
.graph-edges #selected-incoming-arrow path { fill:var(--edge-incoming); }
.graph-edges #selected-outgoing-arrow path { fill:var(--edge-outgoing); }
.graph-edges #selected-shared-arrow path { fill:var(--edge-shared); }
.work-node { position: absolute; width: 272px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: 0 2px 5px #00000008; padding: 14px; cursor: pointer; user-select: none; }
.work-node:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.work-node.selected { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 4px 12px #0000000b; }
.node-heading { display: flex; gap: 7px; align-items: flex-start; margin-bottom: 12px; min-height: 22px; }
.node-sequence { flex: 0 0 22px; display: flex; align-items: center; justify-content: center; height: 22px; color: var(--muted); font-size: 10px; background: var(--bg); border-radius: 5px; font-variant-numeric: tabular-nums; }
.node-heading h3 { font-size: 15px; font-weight: 650; line-height: 22px; letter-spacing: -.15px; overflow-wrap: anywhere; flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.node-name-compact { display:none; }
.node-detail-button { flex-shrink: 0; width: 24px; min-width: 24px; height: 24px; padding: 0; min-height: 24px; margin: -1px -3px -1px 0; border: 0; background: transparent; font-size: 19px; color: var(--muted); }
.node-relations-button:not([hidden]) { display:inline-flex; align-items:center; gap:2px; flex:0 0 auto; min-width:0; min-height:23px; padding:2px 4px; border-color:var(--border); background:var(--surface); color:var(--muted); font-size:10px; line-height:15px; }
.node-relations-button[hidden] { display:none; }
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .node-relations-button { display:none!important; }
.relation-display-note { margin:6px 0 10px; color:var(--muted); font-size:11px; line-height:1.5; }
.graph-status .relation-display-toggle { flex:0 0 auto; min-height:22px; padding:2px 6px; font-size:10px; border-color:var(--border); color:var(--fg); background:var(--surface); }
.node-meta { display: flex; align-items: center; justify-content: space-between; min-height: 21px; padding-left: 29px; margin-bottom: 6px; }
.node-meta > span:first-child { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.node-meta small { font-size: 11px; color: var(--muted); font-weight: 400; }
.node-type { font-size: 10px; color: var(--muted); border: 1px solid var(--border); padding: 2px 5px; border-radius: 4px; }
.node-condition { display: flex; align-items: center; gap: 6px; height: 25px; overflow: hidden; font-size: 10px; min-width: 0; }
.node-condition > span:first-child { flex-shrink: 0; color: var(--muted); padding: 2px 4px; background: var(--bg); border-radius: 3px; }
.node-condition .condition-copy { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; color: var(--muted); }
.node-calls { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.calls-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; min-height: 25px; border: 0; background: transparent; font-size: 10px; color: var(--muted); margin-bottom: 4px; }
.calls-toggle b { font-weight: 600; color: var(--fg); margin-left: 5px; }
.call-list { display: flex; flex-direction: column; gap: 4px; }
.call-item { display: flex; gap: 7px; align-items: center; width: 100%; min-height: 48px; border-color: var(--border); border-radius: 5px; padding: 6px 8px; background: var(--bg); text-align: left; min-width: 0; }
.call-order { font-size: 10px; color: var(--muted); min-width: 10px; }
.call-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.call-copy strong { font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-copy small { font-size: 9px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-copy .call-relation { color: var(--fg); font-weight: 600; line-height: 14px; }
.call-copy .call-condition { line-height: 16px; }
.call-arrow { color: var(--muted); font-size: 14px; flex-shrink: 0; }
.call-item:disabled { opacity: 1; border-style: dashed; color: var(--muted); }
.call-unresolved .call-arrow { color: var(--warning); }
.zoom-controls { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); padding: 3px; border-radius: 8px; z-index: 2; }
.zoom-controls button { border: 0; background: transparent; min-width: 30px; min-height: 29px; padding: 3px 7px; border-radius: 4px; font-size: 17px; }
.zoom-controls #zoom-reset { min-width: 52px; font-size: 11px; font-variant-numeric: tabular-nums; }
.zoom-controls > span { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.canvas-guide { position: absolute; right: 20px; bottom: 25px; color: var(--muted); font-size: 10px; pointer-events: none; display: flex; gap: 8px; }
.canvas-guide span { opacity: .5; }
.graph-status { height: 30px; flex: 0 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 0 20px; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: 10px; }
.edge-legend { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.edge-legend i { display: inline-block; width: 18px; border-top: 1px solid var(--line); }
.edge-legend i.dashed { margin-left: 7px; border-top: 1px dashed var(--warning); }
.edge-legend > span { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.edge-legend > span[hidden] { display:none; }
.edge-legend i.incoming { border-color:var(--edge-incoming); border-top-width:2px; }
.edge-legend i.outgoing { border-color:var(--edge-outgoing); border-top-width:2px; }
.edge-legend i.shared { border-color:var(--edge-shared); border-top-width:2px; }
.empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; text-align: center; pointer-events: none; padding: 20px; }
.empty-state > button { pointer-events: auto; }
.empty-symbol { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--accent); font-size: 27px; margin-bottom: 7px; }
.empty-state h3 { font-size: 18px; font-weight: 600; }
.empty-state p { line-height: 1.8; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.text-button { border: 0; background: transparent; font-size: 12px; color: var(--muted); padding: 2px 8px; }
.work-inspector { position: absolute; top: 14px; right: 14px; bottom: 65px; width: 300px; max-width: calc(100% - 28px); padding: 18px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); box-shadow: var(--shadow); overflow-y: auto; z-index: 3; }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.inspector-heading .eyebrow { margin: 0; }
.work-inspector h3 { font-size: 19px; line-height: 1.4; overflow-wrap: anywhere; }
.work-inspector dl { margin: 20px 0; }
.work-inspector dt { font-size: 10px; color: var(--muted); margin: 13px 0 5px; }
.work-inspector dd { margin: 0; line-height: 1.6; font-size: 12px; overflow-wrap: anywhere; white-space: pre-wrap; }
.work-inspector h4 { font-size: 12px; border-top: 1px solid var(--border); padding-top: 17px; margin-bottom: 12px; }
.work-inspector h4 span { float: right; color: var(--muted); }
.inspector-call { width: 100%; flex-direction: column; align-items: flex-start; white-space: normal; text-align: left; padding: 10px; gap: 5px; margin-bottom: 6px; }
.inspector-call strong { font-size: 12px; overflow-wrap: anywhere; }
.inspector-call span { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.inspector-call small { font-size: 10px; color: var(--muted); margin-top: 3px; }
.inspector-note { margin-top: 20px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
.test-panel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 25px; }
.test-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.test-heading h3 { font-size: 17px; margin-bottom: 7px; }
.test-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; }
.test-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 19px; margin-bottom: 15px; }
.test-card-title { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 13px; }
.test-card-title h4 { font-size: 13px; }
.test-card-title > span { font-size: 10px; color: var(--muted); }
.test-card p { font-size: 12px; line-height: 1.9; color: var(--muted); white-space: pre-wrap; }
.diagnostics, .execution-events { padding: 0; margin: 0; list-style: none; }
.diagnostic, .execution-events li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.6; }
.diagnostic:first-child, .execution-events li:first-child { border: 0; }
.diagnostic > span { color: var(--warning); font-size: 16px; }
.diagnostic-error > span { color: var(--danger); }
.diagnostic strong, .execution-events strong { font-weight: 500; overflow-wrap: anywhere; }
.diagnostic small, .execution-events small { display: block; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; font-size: 10px; }
.execution-events > li > span { min-width: 45px; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mobile-chat, .close-conversation { display: none; }

@media (max-width: 1200px) {
  .conversation { width: 300px; flex-basis: 300px; }
  .canvas-guide { display: none; }
  .keyboard-hint { display: none; }
  .send-button { margin-left: auto; }
}

@media (max-width: 920px) {
  .studio-header { padding: 0 13px; gap: 8px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 14px; }
  #project-title { max-width: 180px; }
  .conversation { position: absolute; top: 0; bottom: 0; left: 0; z-index: 4; width: 320px; max-width: calc(100vw - 32px); box-shadow: 10px 0 32px #00000020; transform: translateX(-105%); transition: transform 160ms ease; }
  .conversation-open .conversation { transform: translateX(0); }
  .mobile-chat, .close-conversation { display: inline-flex; }
}

@media (max-width: 660px) {
  .brand strong { display: none; }
  .header-divider { display: none; }
  #project-title { max-width: 120px; font-size: 11px; }
  .save-state { display: none; }
  .header-actions { gap: 3px; }
  .header-actions > button { font-size: 11px; padding: 5px 7px; }
  .advanced-menu summary { padding: 5px; font-size: 11px; }
  .graph-status { padding: 0 12px; font-size: 9px; }
  .edge-legend { display: none; }
  .zoom-controls { left: 12px; bottom: 12px; }
  .test-panel { padding: 17px 13px; }
  .test-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .empty-state h3 { font-size: 15px; }
}

@media (max-height: 620px) {
  .conversation-heading { padding-top: 14px; padding-bottom: 12px; }
  .conversation-heading .eyebrow { display: none; }
  .composer { padding: 11px 16px; }
  .composer textarea { height: 62px; min-height: 50px; }
  .composer-footer { padding-top: 7px; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
.vscode-high-contrast .work-node, .vscode-high-contrast-light .work-node { border-width: 2px; }
.vscode-high-contrast .call-item, .vscode-high-contrast-light .call-item { border-width: 1px; }

/* Request feedback stays next to the composer instead of disappearing in history. */
.activity-card { flex: 0 0 auto; margin: 0 14px 10px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); min-width: 0; }
.activity-card.is-working { border-color: var(--focus); background: var(--vscode-editorWidget-background, var(--surface)); }
.activity-main { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.activity-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.activity-copy strong { font-size: 12px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
.activity-copy > span { font-size: 10px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.activity-symbol { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--focus); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.is-working .activity-symbol { border: 2px solid var(--border); border-top-color: var(--focus); border-right-color: var(--focus); border-radius: 50%; animation: activity-spin 1s linear infinite; }
.activity-card.is-failed .activity-symbol { color: var(--danger); }
.activity-card.is-complete .activity-symbol { color: var(--vscode-testing-iconPassed, #238653); }
#activity-elapsed { flex: 0 0 auto; font-size: 10px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.activity-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.activity-actions button { min-height: 25px; font-size: 10px; padding: 4px 7px; }
#cancel-button { margin-left: auto; }
.composer-footer { flex-wrap: wrap; }
.keyboard-hint { display: block; flex: 1 0 100%; order: 3; font-size: 10px; margin: 3px 0 0; line-height: 1.5; }
.send-button { margin-left: auto; }
#send-button:disabled { opacity: .55; }
.new-response { flex: 0 0 auto; align-self: center; border-radius: 20px; margin: -5px 0 9px; padding: 5px 12px; min-height: 27px; font-size: 11px; border-color: var(--focus); color: var(--fg); box-shadow: var(--shadow); }
.error-banner, .notice-banner { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 18px; }
.error-banner > span, .notice-banner > span { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.banner-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.error-banner button, .notice-banner button { font-size: 11px; min-height: 27px; padding: 3px 7px; color: inherit; }
.notice-banner { flex: 0 0 auto; background: var(--surface); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 12px; line-height: 1.6; max-height: 100px; overflow-y: auto; }
.editing-guide { position: absolute; top: 12px; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 7px 9px 7px 12px; border: 1px solid var(--focus); border-radius: 7px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow); z-index: 2; font-size: 11px; }
#editing-label { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
.editing-guide > button { font-size: 10px; padding: 3px 6px; min-height: 25px; flex-shrink: 0; }
.editing-dot { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--focus); animation: editing-dot-pulse 1.5s ease-in-out infinite; }
.work-node.is-editing { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 2px; animation: work-edit-pulse 1.5s ease-in-out infinite; }
.work-node.is-changed { border-color: var(--vscode-testing-iconPassed, #238653); outline: 2px solid var(--vscode-testing-iconPassed, #238653); outline-offset: 2px; }
.work-activity-badge { position: absolute; right: 10px; top: -12px; border: 1px solid var(--focus); background: var(--focus); color: var(--vscode-button-foreground, #fff); border-radius: 4px; padding: 3px 7px; font-size: 11px; font-weight: 600; line-height: 16px; }
.is-changed > .work-activity-badge { background: var(--vscode-testing-iconPassed, #238653); border-color: var(--vscode-testing-iconPassed, #238653); color: var(--vscode-button-foreground, #fff); }
.mobile-chat.is-busy::after { content: ''; position: absolute; right: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--focus); }
.mobile-chat { position: relative; }
.zoom-controls #zoom-reset { min-width: 66px; }
.attach-images { flex: 0 0 auto; min-height: 28px; padding: 4px 6px; font-size: 11px; border-color: transparent; background: transparent; color: var(--muted); }
.image-attachments { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.image-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 5px 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; background: var(--surface); }
.image-chip .image-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.image-chip small { color: var(--muted); white-space: nowrap; }
.image-chip button { padding: 0; width: 20px; min-height: 20px; border: 0; background: transparent; }
.probe-summary { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: 9px 16px; padding: 16px 0; font-size: 12px; }
.probe-summary dt { color: var(--muted); }
.probe-summary dd { margin: 0; overflow-wrap: anywhere; }
.probe-questions { padding-left: 20px; font-size: 12px; line-height: 1.8; }
.official-probe-result[data-verdict="VERIFIED_PASS"] { border-color: var(--vscode-testing-iconPassed, #238653); }
.official-probe-result[data-verdict="COMPILED_UNVERIFIED"] { border-color: var(--warning); }
.official-probe-result[data-verdict="VERIFIED_FAIL"], .official-probe-result[data-verdict="COMPILE_FAILED"] { border-color: var(--danger); }
@keyframes activity-spin { to { transform: rotate(360deg); } }
@keyframes work-edit-pulse { 0%, 100% { box-shadow: 0 0 0 3px transparent; } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--focus) 40%, transparent); } }
@keyframes editing-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 660px) {
  .editing-guide { left: 10px; right: 10px; max-width: calc(100% - 20px); font-size: 10px; }
  .editing-guide > button { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  .error-banner, .notice-banner { padding-left: 12px; padding-right: 12px; font-size: 11px; }
}
@media (max-height: 620px) {
  .activity-card { padding: 8px 10px; margin-bottom: 6px; }
  .activity-copy > span { font-size: 9px; }
  .activity-actions { padding-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .work-node.is-editing { outline: 3px solid var(--focus); outline-offset: 3px; }
  .is-working .activity-symbol { border: 2px solid var(--focus); border-radius: 3px; }
}

/* Readable large graphs: the camera and saved node positions are independent. */
#node-search { background: var(--bg); color: var(--fg); border: 1px solid var(--border); outline-color: var(--focus); width: 100%; min-height: 30px; padding: 5px 9px; border-radius: 5px; font-size: 12px; }
.node-results { position: absolute; top: calc(100% + 5px); left: 0; right: 0; max-height: min(320px, 45vh); overflow-y: auto; overscroll-behavior: contain; padding: 4px; border: 1px solid var(--focus); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); z-index: 7; }
.node-results button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px; border: 0; text-align: left; }
.node-results button strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.node-results small, .node-results > span { color: var(--muted); font-size: 10px; }
.node-results > span { display: block; padding: 8px; }
.work-node { cursor: grab; touch-action: none; }
.work-node.node-dragging { cursor: grabbing; z-index: 4; box-shadow: var(--shadow); }
.layout-group { position: absolute; pointer-events: none; border: 1px dashed var(--border); background: var(--surface); opacity: .55; border-radius: 12px; }
.layout-group > span { position: absolute; top: 9px; left: 13px; font-size: 12px; font-weight: 600; color: var(--muted); }
#retry-layout-save { color: var(--warning); }
.minimap-panel { position: absolute; right: 16px; bottom: 16px; width: 182px; height: 118px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); z-index: 2; padding: 6px; }
#graph-minimap { display: block; width: 100%; height: 86px; cursor: crosshair; overflow: hidden; touch-action: none; }
#graph-minimap rect[data-map-work] { fill: var(--muted); opacity: .65; cursor: pointer; }
#graph-minimap rect.selected { fill: var(--focus); opacity: 1; }
#minimap-viewport { fill: var(--focus); fill-opacity: .10; stroke: var(--focus); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#minimap-caption { display: block; text-align: center; color: var(--muted); font-size: 9px; line-height: 17px; }
.overview-hint { position: absolute; top: 52px; left: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; font-size: 10px; color: var(--muted); z-index: 2; }
.overview-hint button { font-size: 10px; margin-left: 6px; padding: 4px 7px; min-height: 25px; }
.overview .work-node .node-meta, .overview .work-node .node-calls, .overview .work-node .node-condition { display: none; }
/* Semantic detail changes typography only. Fixed card bounds still anchor edges. */
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .work-node :is(.node-meta,.node-calls,.node-condition,.node-edit-button,.node-detail-button,.node-sequence) { display:none!important; }
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .node-heading { position:absolute; inset:12px; display:flex; align-items:center; justify-content:center; min-height:0; margin:0; pointer-events:none; }
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .node-heading h3 { flex:none; width:100%; margin:0; text-align:center; font-size:min(var(--semantic-title-size,28px),calc((var(--node-height,100px) - 24px)/2.3)); line-height:1.15; letter-spacing:0; -webkit-line-clamp:2; }
.graph-viewport[data-node-detail="overview"] .node-heading { inset:6px; }
.graph-viewport[data-node-detail="overview"] .node-heading h3 { display:block; font-size:min(var(--semantic-title-size,56px),var(--semantic-title-fit,96px),calc((var(--node-height,100px) - 12px)/1.2)); white-space:normal; }
.graph-viewport[data-node-detail="overview"] .node-heading h3:has(.node-name-compact > small) { font-size:min(var(--semantic-title-size,56px),var(--semantic-title-fit,96px),calc((var(--node-height,100px) - 12px)/2.8)); }
.graph-viewport[data-node-detail="overview"] .node-name-full { display:none; }
.graph-viewport[data-node-detail="overview"] .node-name-compact { display:flex; flex-direction:column; align-items:center; gap:.12em; }
.graph-viewport[data-node-detail="overview"] .node-name-compact > small { display:block; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--muted); font-size:.42em; line-height:1.15; }
.graph-viewport[data-node-detail="overview"] .node-name-compact > span { display:-webkit-box; width:100%; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; line-height:1.15; }
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .work-node.selected { outline:var(--semantic-outline-size,2px) solid var(--focus); outline-offset:var(--semantic-outline-size,2px); }
.graph-viewport:is([data-node-detail="summary"],[data-node-detail="overview"]) .work-node[data-mils-phase]::after { border-width:var(--semantic-outline-size,2px); inset:var(--semantic-outline-size,2px); }
.graph-viewport[data-node-detail="summary"] :is(.mils-work-state,.work-activity-badge) { font-size:var(--semantic-badge-size,16px); line-height:1.15; white-space:nowrap; max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; }
.graph-viewport[data-node-detail="overview"] :is(.mils-work-state,.work-activity-badge) { top:calc(-1 * var(--semantic-status-size,16px)); width:var(--semantic-status-size,16px); height:var(--semantic-status-size,16px); padding:0; border-radius:50%; font-size:0; line-height:0; overflow:hidden; }
.graph-viewport[data-node-detail="overview"] .mils-work-state { background:var(--mils-color); }
.canvas-guide { right: 211px; bottom: 25px; max-width: calc(100% - 450px); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1100px) { .canvas-guide { display: none; } }
@media (max-width: 660px) {
  .minimap-panel { width: 126px; height: 91px; right: 10px; bottom: 54px; padding: 4px; }
  #graph-minimap { height: 62px; }
  #minimap-caption { font-size: 8px; line-height: 15px; }
  .overview-hint { top: 48px; left: 10px; }
}

/* One toolbar keeps the canvas directly under the global document header. */
.header-actions > button { min-height: 29px; padding: 4px 9px; font-size: 12px; }
.header-actions { gap: 5px; }
.advanced-menu summary { min-height: 29px; gap: 4px; padding: 5px 7px; font-size: 12px; }
.advanced-menu #undo-button { font-size: 12px; }
.status-badge { display: inline-block; max-width: 115px; padding: 3px 7px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 11px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-toolbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 auto; min-height: 40px; height: auto; min-width: 0; gap: 9px; row-gap: 0; padding: 0 10px; border-bottom: 1px solid var(--border); background: var(--surface); z-index: 4; }
.view-tabs { display: flex; min-height: 38px; align-self: stretch; align-items: stretch; gap: 2px; flex: 0 0 auto; min-width: 0; }
.view-tabs > button[role="tab"] { border: 0; border-radius: 0; background: transparent; border-bottom: 2px solid transparent; padding: 0 9px; font-size: 12px; font-weight: 600; color: var(--muted); }
.view-tabs > button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--focus); }
.flow-tools { display: flex; align-items: center; justify-content: flex-end; flex: 1 1 350px; min-width: 0; min-height: 35px; padding: 3px 0; gap: 6px; }
.flow-tools > button { flex: 0 0 auto; min-height: 28px; font-size: 12px; }
.toolbar-icon { width: 29px; height: 29px; min-height: 29px; min-width: 29px; padding: 4px; background: transparent; border-color: transparent; }
#view-options-toggle { font-size: 20px; }
#scope-summary { flex: 0 1 230px; min-width: 0; max-width: 230px; overflow: hidden; padding: 4px 7px; border-color: transparent; background: transparent; color: var(--muted); }
#breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#layout-select { flex: 0 1 145px; min-width: 115px; max-width: 145px; height: 29px; padding: 3px 5px; font-size: 12px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--fg); }
.node-search-shell { min-width: 110px; flex: 1 1 155px; max-width: 220px; }
.node-search-box { position: relative; min-width: 0; width: 100%; }
#node-search { min-height: 28px; height: 28px; padding: 4px 8px; }
#search-toggle { display: none; }
.view-options { position: absolute; right: 8px; top: calc(100% + 5px); width: 300px; max-width: calc(100% - 16px); max-height: calc(100vh - 110px); overflow-y: auto; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); z-index: 8; }
.view-options-heading { display: flex; justify-content: space-between; align-items: center; margin: -3px -3px 9px 0; }
.view-options-heading strong { font-size: 12px; }
.view-options > label { display: block; margin: 9px 0 5px; font-size: 11px; color: var(--muted); }
.view-options > select { display: block; width: 100%; min-height: 31px; border: 1px solid var(--border); border-radius: 5px; padding: 5px 7px; background: var(--bg); color: var(--fg); }
.view-option-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 13px; }
.view-option-actions > button { min-height: 30px; font-size: 12px; padding: 5px 7px; }
.view-option-actions > button[aria-pressed="true"] { border-color: var(--focus); background: var(--selected); }
.layout-feedback { position: absolute; top: 8px; right: 12px; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 24px); z-index: 2; }
.layout-notice { padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px; font-size: 10px; line-height: 16px; color: var(--muted); background: var(--surface); white-space: nowrap; }
.layout-notice.is-error { color: var(--danger); border-color: var(--danger); }
.layout-feedback > button { min-height: 25px; padding: 3px 6px; font-size: 10px; }
@media (max-width: 1100px) {
  #scope-summary { display: none; }
  .node-search-shell { min-width: 29px; max-width: 29px; flex: 0 0 29px; }
  #search-toggle { display: inline-flex; }
  .node-search-box { display: none; }
  .search-open .node-search-box { display: block; position: absolute; left: 8px; right: 8px; top: calc(100% + 5px); width: auto; padding: 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); z-index: 8; }
  .search-open .node-results { left: -1px; right: -1px; }
}
@media (max-width: 660px) {
  .studio-header { padding: 0 10px; }
  .header-actions > button { font-size: 12px; padding: 4px 7px; }
  .status-badge { max-width: 85px; }
  .workspace-toolbar { padding: 0 8px; gap: 6px; }
  .flow-tools { gap: 4px; }
  .view-tabs > button[role="tab"] { padding: 0 7px; }
  #layout-select { flex-basis: 140px; }
}
@media (max-width: 420px) {
  .studio-header { padding: 0 8px; }
  .brand-mark { display: none; }
  #project-title { max-width: 90px; }
  .status-badge { max-width: 70px; }
  .view-tabs > button[role="tab"] { padding: 0 6px; }
  #work-count { display: none; }
  #layout-select { flex-basis: 130px; min-width: 110px; }
  .flow-tools { gap: 1px; }
}

/* A single current set follows the conversation without growing the composer. */
.recommendations { margin-top: 20px; padding-bottom: 3px; }
.recommendations-heading { display: block; margin-bottom: 8px; font-size: 11px; color: var(--muted); }
.recommendation-cards { display: flex; flex-direction: column; gap: 7px; }
.recommendation-card { width: 100%; min-height: 54px; display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 10px 11px; text-align: left; white-space: normal; border-radius: 7px; background: var(--surface); }
.recommendation-label { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.recommendation-label > span { flex: 0 0 auto; color: var(--muted); font-weight: 400; }
.recommendation-prompt { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.recommendation-card:disabled { opacity: .55; }

/* Call navigation overlays the canvas and leaves the compact toolbar intact. */
.call-navigation { position: absolute; top: 10px; left: 12px; max-width: min(600px, calc(100% - 24px)); padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); z-index: 4; }
.call-navigation-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.call-navigation-actions > button { min-height: 29px; padding: 5px 8px; font-size: 12px; }
#call-return-flow { max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-color: var(--focus); color: var(--fg); font-weight: 600; text-align: left; }
#call-step-back { background: transparent; border-color: transparent; color: var(--muted); }
.call-trail { display: flex; align-items: center; list-style: none; margin: 5px 0 -2px; padding: 0; gap: 2px; max-width: 100%; overflow-x: auto; }
.call-trail > li { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; max-width: 100%; gap: 2px; }
.call-trail > li + li::before { content: '›'; padding: 0 3px; color: var(--muted); }
.call-trail button, .call-trail [aria-current] { min-height: 24px; padding: 3px 5px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.call-trail button { border-color: transparent; background: transparent; color: var(--muted); }
.call-trail [aria-current] { font-weight: 600; }
.call-origin-choices { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; max-height: min(240px, 45vh); overflow-y: auto; }
.call-origin-choices > button { justify-content: flex-start; white-space: normal; text-align: left; padding: 7px 8px; font-size: 12px; }
.canvas-region:has(#call-navigation:not([hidden])) .editing-guide { top: 115px; }
@media (max-width: 660px) {
  .call-navigation { top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 6px; }
  .call-trail button, .call-trail [aria-current] { max-width: 170px; }
}

/* Shared workbench: project / canvas / AI. The host only supplies ports. */
html[data-theme="dark"] { --bg:#191b20; --panel:#22252b; --surface:#292d35; --fg:#e5e9f2; --muted:#a0aabc; --border:#3a404b; --accent:#267bc1; --accent-fg:#fff; --focus:#55b4ff; --selected:#303f55; --line:#9ca8b9; --danger:#ff9292; }
html[data-theme="dark"] { color-scheme:dark; --warning:#f0c375; }
.studio-body { display:grid; grid-template-columns:200px minmax(0,1fr) 340px; }
.project-panel { grid-column:1; grid-row:1; display:flex; flex-direction:column; min-height:0; overflow:auto; background:var(--panel); border-right:1px solid var(--border); }
.project-panel-heading { display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:4px 12px; border-bottom:1px solid var(--border); }
.project-panel-heading button { border:0; background:transparent; }
#project-tree { padding:10px 6px; overflow:auto; min-height:0; flex:1; }
#project-tree button { width:100%; text-align:left; justify-content:flex-start; border:0; background:transparent; padding:7px 8px; overflow-wrap:anywhere; }
#project-tree .project-flow { padding-left:22px; color:var(--muted); font-size:12px; }
#project-tree .project-flow.active { background:var(--selected); color:var(--fg); }
#project-tree small { margin-left:auto; }
.project-empty,.starter-library p { color:var(--muted); font-size:12px; padding:10px; line-height:1.7; }
.starter-library { border-top:1px solid var(--border); padding:12px 8px; }
.starter-library h3 { font-size:11px; color:var(--muted); padding:4px 8px 10px; }
.starter-library button { display:block; width:100%; border:0; background:transparent; text-align:left; padding:8px; }
.host-status { font-size:10px; color:var(--muted); padding:8px 12px; overflow-wrap:anywhere; }
.workspace { grid-column:2; grid-row:1; }
.conversation { grid-column:3; grid-row:1; width:auto; flex:initial; border-right:0; border-left:1px solid var(--border); overflow:hidden; }
.ai-pane { display:flex; flex:1; flex-direction:column; min-height:0; overflow:hidden; }
.ai-pane[hidden],#inspector-pane[hidden] { display:none; }
.side-tabs { display:flex; min-height:40px; border-bottom:1px solid var(--border); padding:0 10px; flex-shrink:0; }
.side-tabs button { border:0; border-radius:0; background:transparent; color:var(--muted); padding:8px 12px; }
.side-tabs button[aria-pressed="true"] { color:var(--fg); border-bottom:2px solid var(--accent); }
#inspector-pane { min-height:0; overflow:auto; flex:1; }
#inspector-pane .work-inspector { position:static; width:auto; max-height:none; height:auto; border:0; border-radius:0; box-shadow:none; background:transparent; padding:16px; }
.property-empty { color:var(--muted); line-height:1.8; padding:20px; }
.conversation-heading { padding:14px 16px 12px; }
.conversation-scroll { padding-left:14px; padding-right:10px; }
.composer { padding:12px; }
.file-menu > div { left:0; right:auto; }
.file-menu small { margin-left:auto; color:var(--muted); }
.scada-panel { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; overflow:hidden; }
.scada-panel[hidden] { display:none; }
.projection-heading { display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); }
.projection-heading span { color:var(--muted); font-size:11px; }
.projection-heading button { margin-left:auto; }
#scada-status { padding:24px; color:var(--muted); }
.scada-viewport { position:relative; flex:1; min-height:0; overflow:hidden; background:#f8fafc; touch-action:none; outline:none; cursor:grab; }
.scada-viewport:focus-visible { box-shadow:inset 0 0 0 2px var(--focus); }
.scada-world { position:absolute; left:0; top:0; transform-origin:0 0; }
#scada-frame { display:block; border:0; background:#f8fafc; pointer-events:none; }
.scada-tab-state { font-size:10px; color:var(--muted); margin-left:3px; }
.scada-panel.has-preview #scada-status { padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel); flex-shrink:0; }
.projection-heading { flex-wrap:wrap; }
.projection-heading #scada-back-flow { margin-left:auto; }
.projection-heading #refresh-scada { margin-left:0; }
.projection-heading #generate-scada { margin-left:0; }
#source-dialog { color:var(--fg); background:var(--panel); border:1px solid var(--border); border-radius:8px; max-width:90vw; width:850px; max-height:85vh; padding:0; }
#source-dialog::backdrop { background:#0008; }
.source-heading { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border); }
#source-content { padding:18px; white-space:pre-wrap; overflow:auto; max-height:65vh; font:12px/1.7 var(--vscode-editor-font-family,monospace); }
@media (max-width:1200px) {
  .studio-body { grid-template-columns:minmax(0,1fr) 320px; }
  .project-panel { display:none; }
  .workspace { grid-column:1; }
  .conversation { grid-column:2; }
}
@media (max-width:920px) {
  .studio-body { display:flex; }
  .workspace { flex:1; }
  .conversation { position:absolute; left:auto; right:0; width:330px; max-width:calc(100vw - 28px); transform:translateX(105%); box-shadow:-10px 0 32px #0005; }
  .conversation-open .conversation { transform:translateX(0); }
}

.file-menu a { display:block; color:var(--fg); text-decoration:none; padding:8px; font-size:12px; }
.file-menu a[hidden] { display:none; }

/* VS Code editor and native assistant sidebar share behavior, not pane space. */
.view-role-editor .studio-body { grid-template-columns:200px minmax(0,1fr); }
.view-role-editor .conversation { display:none; }
.view-role-editor #ai-pane,.view-role-editor .side-tabs,.view-role-editor #toggle-conversation { display:none; }
.view-role-editor.properties-open .studio-body { grid-template-columns:200px minmax(0,1fr) 300px; }
.view-role-editor.properties-open .conversation { display:flex; position:static; grid-column:3; grid-row:1; width:auto; max-width:none; transform:none; box-shadow:none; }
.editor-properties-heading { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid var(--border); }
.view-role-editor #inspector-pane { display:flex; flex-direction:column; }
.view-role-editor #inspector-pane .work-inspector { overflow:auto; flex:1; min-height:0; }
.view-role-editor #inspector-pane[hidden] { display:none; }

.view-role-assistant { min-width:0; width:100%; background:var(--panel); }
.view-role-assistant .studio-header,.view-role-assistant .project-panel,.view-role-assistant .workspace,.view-role-assistant .side-tabs,.view-role-assistant #inspector-pane,.view-role-assistant .close-conversation { display:none; }
.view-role-assistant .studio-body { display:flex; flex-direction:column; width:100%; }
.view-role-assistant .conversation { position:static; display:flex; flex:1; width:100%; max-width:none; min-width:0; border:0; transform:none; box-shadow:none; transition:none; }
.view-role-assistant .ai-pane { width:100%; }
.view-role-assistant .conversation-heading { padding:10px 12px 6px; align-items:center; }
.view-role-assistant .conversation-heading .eyebrow { display:none; }
.view-role-assistant .conversation-heading h1 { font-size:14px; }
.assistant-context { padding:0 12px 10px; color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex-shrink:0; }
.view-role-assistant .conversation-scroll { padding:0 10px 14px; }
.view-role-assistant .composer { padding:10px; }
.view-role-assistant #request-input { min-height:84px; max-height:30vh; }
.view-role-assistant .composer-footer { flex-wrap:wrap; gap:6px; }
.view-role-assistant .model-button { flex:1; min-width:0; max-width:none; }
.view-role-assistant .keyboard-hint { display:block; flex:0 0 100%; order:4; font-size:10px; }
.view-role-assistant .attach-images span { display:none; }
.view-role-assistant .activity-card { margin:0 10px 8px; max-height:34vh; overflow:auto; }
.view-role-assistant .error-banner,.view-role-assistant .notice-banner { margin:0 10px 8px; flex-shrink:0; }
.view-role-assistant .banner-actions { flex-wrap:wrap; }
.view-role-assistant .recommendations { margin-top:14px; }

@media (max-width:1200px) {
  .view-role-editor .studio-body { grid-template-columns:minmax(0,1fr); }
  .view-role-editor.properties-open .studio-body { grid-template-columns:minmax(0,1fr) 300px; }
  .view-role-editor.properties-open .conversation { grid-column:2; }
}
@media (max-width:760px) {
  .view-role-editor.properties-open .studio-body { grid-template-columns:minmax(0,1fr); }
  .view-role-editor.properties-open .conversation { position:absolute; top:0; bottom:0; right:0; width:min(320px,calc(100% - 36px)); border-left:1px solid var(--border); box-shadow:-8px 0 24px #0003; z-index:4; }
}

.view-options > .navigation-preference { display:flex; align-items:center; gap:7px; color:var(--fg); margin-top:13px; cursor:pointer; }
.navigation-preference input { accent-color:var(--accent); flex:none; }
.canvas-shortcuts { margin-top:11px; border-top:1px solid var(--border); padding-top:9px; font-size:11px; color:var(--muted); }
.canvas-shortcuts summary { cursor:pointer; color:var(--fg); }
.canvas-shortcuts dl { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:6px 10px; margin:10px 0; }
.canvas-shortcuts dt,.canvas-shortcuts dd { margin:0; overflow-wrap:anywhere; }
.canvas-shortcuts p { margin:8px 0 0; line-height:1.5; }

/* MILS state is independent from selection, AI edit outlines and layout. */
#mils-launch { flex:none; }
#mils-launch button { min-height:24px; padding:2px 7px; font-size:10px; }
#graph-summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.mils-transport { flex:0 0 auto; min-width:0; display:flex; align-items:center; gap:6px; min-height:41px; padding:5px 10px; border-top:1px solid var(--border); background:var(--surface); }
.mils-transport button { min-height:28px; padding:3px 7px; font-size:11px; }
#mils-play { min-width:90px; }
.mils-transport select { max-width:62px; min-width:53px; height:28px; color:var(--fg); background:var(--bg); border:1px solid var(--border); border-radius:4px; font-size:11px; }
#mils-seek { min-width:40px; flex:1; accent-color:var(--accent); }
#mils-clock { flex:none; min-width:117px; font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.mils-status { flex:0 1 175px; min-width:0; max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--muted); }
.mils-feed { display:inline-flex; align-items:center; gap:4px; min-width:0; padding-left:6px; margin-left:2px; border-left:1px solid var(--border); }
.mils-feed[hidden] { display:none; }
.mils-feed #mils-feed-auto[aria-pressed="true"] { color:var(--accent-fg, #fff); background:var(--accent, #2f6fd6); border-color:var(--accent, #2f6fd6); }
.mils-feed select { max-width:110px; min-width:70px; }
.mils-feed-summary { flex:0 1 auto; min-width:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; }
.work-node[data-mils-phase]::after { content:''; position:absolute; inset:3px; border:2px solid var(--mils-color); border-radius:6px; pointer-events:none; opacity:.8; }
[data-mils-phase="Ready"],[data-mils-phase="Unissued"] { --mils-color:var(--vscode-disabledForeground,#89939f); }
[data-mils-phase="Going"],[data-mils-phase="Running"] { --mils-color:var(--vscode-testing-iconPassed,#31bb79); }
[data-mils-phase="Finish"],[data-mils-phase="Succeeded"] { --mils-color:var(--vscode-testing-iconPassed,#31bb79); }
[data-mils-phase="Blocked"],[data-mils-phase="Pending"],[data-mils-phase="Bypassed"],[data-mils-phase="Cancelled"],[data-mils-phase="Interrupted"] { --mils-color:var(--vscode-editorWarning-foreground,#d7a43d); }
[data-mils-phase="Fault"],[data-mils-phase="Failed"] { --mils-color:var(--vscode-editorError-foreground,#ef6a6a); }
.work-node[data-mils-phase="Going"]::after { animation:mils-going-pulse 1.8s ease-in-out infinite; }
.mils-work-state { position:absolute; left:12px; top:-10px; padding:1px 5px; border:1px solid var(--mils-color); border-radius:4px; color:var(--mils-color); background:var(--surface); font-size:10px; line-height:16px; }
.call-item[data-mils-phase],.inspector-call[data-mils-phase] { position:relative; box-shadow:inset 3px 0 0 var(--mils-color); }
.call-item[data-mils-phase] .call-copy strong { padding-right:55px; }
.mils-call-state { position:absolute; right:23px; top:5px; font-size:9px; color:var(--mils-color); line-height:13px; background:var(--bg); padding-left:3px; }
.graph-edge.mils-fired > path { stroke-width:3.8px; filter:drop-shadow(0 0 4px currentColor); }
@keyframes mils-going-pulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .work-node[data-mils-phase="Going"]::after { animation:none; opacity:1; } }
@media (max-width:700px) { .mils-transport { flex-wrap:wrap; gap:5px; padding:5px 8px; } #mils-seek { order:5; flex:1 1 calc(100% - 135px); } #mils-clock { order:6; min-width:113px; } .mils-status { flex:1; max-width:none; } .mils-feed { order:4; } .mils-feed-summary { max-width:150px; } }

/* One shared playback bar; Pro owns its opaque frame camera. */
.playback-slot { display:contents; }
#scada-mils-launch { flex:none; }
#scada-mils-launch button { min-height:24px; padding:2px 7px; font-size:10px; }
.scada-pro-host { position:absolute; inset:0; min-width:0; min-height:0; background:var(--bg); }
.scada-pro-host iframe { display:block; width:100%; height:100%; border:0; }
.scada-pro-candidate { visibility:hidden; pointer-events:none; }

/* Keep a hidden candidate laid out while Flow remains active; never reparent a live iframe. */
.workspace { position:relative; }
.scada-panel[hidden].preparing-pro { display:flex !important; position:absolute; inset:0; visibility:hidden; pointer-events:none; }

/* DS-SILS is a separate strict execution lens; existing MILS/SCADA styles stay scoped. */
.sils-panel { flex:1; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; }
.sils-panel[hidden] { display:none; }
.clipboard-image-status { margin:0 0 7px; color:var(--muted); font-size:11px; overflow-wrap:anywhere; }
.clipboard-image-status[data-kind="error"] { color:var(--danger, #d77b83); }
.image-chip-preview { display:block; width:42px; height:35px; object-fit:contain; border-radius:4px; background:var(--panel); flex-shrink:0; }
.three-d-panel { display:flex; flex-direction:column; overflow:hidden; }
.three-d-mode-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0; border-bottom:1px solid var(--border); padding:8px 12px; }
.three-d-mode-bar button { padding:5px 10px; }
.three-d-mode-bar button[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:var(--selection, var(--panel)); }
.three-d-mode-bar > span { color:var(--muted); font-size:11px; }
.flow-3d-panel { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; }
.flow-3d-panel[hidden], #sils-demo-panel[hidden] { display:none; }
#sils-demo-panel { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.flow-3d-heading { display:flex; align-items:center; flex-wrap:wrap; gap:8px; flex-shrink:0; padding:9px 12px; }
.flow-3d-heading strong { font-size:13px; overflow-wrap:anywhere; margin-right:auto; }
.flow-3d-heading button { padding:4px 8px; font-size:11px; }
.flow-3d-status { flex-shrink:0; margin:0; padding:0 12px 9px; color:var(--muted); font-size:12px; overflow-wrap:anywhere; }
.flow-3d-viewport { position:relative; flex:1; min-width:0; min-height:260px; overflow:hidden; }
#flow-3d-viewport { display:flex; flex-direction:column; min-height:0; overflow:auto; }
.flow-3d-view { display:flex; flex:1; flex-direction:column; height:100%; min-height:430px; min-width:0; }
.flow-3d-view > .flow-3d-viewport { min-height:300px; flex:1 0 300px; touch-action:none; cursor:grab; }
.flow-3d-view > .flow-3d-viewport[data-drag="orbit"] { cursor:all-scroll; }
.flow-3d-view > .flow-3d-viewport[data-drag="move"] { cursor:grabbing; }
.flow-3d-device[data-placed="user"] strong::after { content:" · 직접 배치"; font-weight:normal; color:var(--muted); font-size:10px; }
.flow-3d-view .flow-3d-heading { gap:6px; padding:6px 12px; }
.flow-3d-heading select { font:inherit; padding:4px 6px; max-width:130px; }
.flow-3d-heading > span { color:var(--muted); font-size:11px; }
.flow-3d-devices { display:flex; gap:7px; flex-wrap:wrap; flex-shrink:0; padding:9px 12px; }
.flow-3d-device { display:flex; flex:1 1 150px; min-width:0; flex-direction:column; align-items:flex-start; gap:3px; padding:8px 10px; text-align:left; border:1px solid var(--border); border-radius:7px; background:var(--panel); }
.flow-3d-device strong { font-size:12px; overflow-wrap:anywhere; }
.flow-3d-device span,.flow-3d-device small { font-size:10px; color:var(--muted); overflow-wrap:anywhere; }
.flow-3d-device[data-phase="Going"] { border-color:var(--accent); box-shadow:inset 3px 0 var(--accent); }
.flow-3d-device[data-phase="Finish"] { border-color:#39a773; }
.flow-3d-device[data-phase="Fault"] { border-color:var(--danger, #d77b83); }
.flow-3d-note { margin:0; flex-shrink:0; padding:0 12px 9px; color:var(--muted); font-size:10px; line-height:1.5; }
#flow-3d-playback-slot, #flow-3d-mils-launch { flex-shrink:0; }
#flow-3d-mils-launch:not([hidden]) { display:flex; padding:9px 12px; border-top:1px solid var(--border); }
@media(max-width:700px) { .three-d-mode-bar { gap:6px; padding:6px 8px; } .three-d-mode-bar > span { width:100%; } .flow-3d-heading { padding:7px 8px; } .flow-3d-status { padding:0 8px 7px; font-size:11px; } }
.sils-panel-content { padding:20px; color:var(--fg); }
.sils-panel-heading { display:flex; gap:20px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.sils-panel-heading h3 { margin:0; font-size:18px; }
.sils-panel-heading p { margin:7px 0 17px; color:var(--muted); font-size:13px; }
.sils-source-badge { border:1px solid var(--border); border-radius:6px; padding:5px 9px; font-size:12px; white-space:nowrap; }
.sils-setup { display:flex; flex-direction:column; gap:15px; padding:16px; border:1px solid var(--border); border-radius:8px; }
.sils-source-actions,.sils-controls { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.sils-source-actions label { display:flex; gap:8px; align-items:center; font-size:12px; }
.sils-source-actions select,.sils-entry input { padding:6px 8px; background:var(--panel); color:var(--fg); border:1px solid var(--border); border-radius:4px; }
.sils-file-inputs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:14px; }
.sils-file-inputs label { display:flex; flex-direction:column; gap:6px; min-width:0; font-size:12px; }
.sils-file-inputs input { max-width:100%; font:inherit; }
.sils-file-inputs span { color:var(--muted); overflow-wrap:anywhere; }
.sils-entry { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.sils-source-preview summary { cursor:pointer; font-size:12px; }
.sils-source-preview label { display:block; font-size:12px; margin-top:10px; }
.sils-source-preview textarea { display:block; width:100%; min-height:140px; margin-top:7px; padding:9px; resize:vertical; color:var(--fg); background:var(--panel); border:1px solid var(--border); border-radius:4px; font:12px/1.7 ui-monospace,Consolas,monospace; }
.sils-source-preview textarea[readonly] { opacity:.8; }
.sils-controls { margin-top:15px; }
.sils-controls [data-sils="run"] { background:var(--accent); color:var(--accent-fg); }
.sils-panel-notice { margin:12px 0; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.sils-panel-notice[data-kind="error"] { color:var(--vscode-errorForeground,#e58888); }
.sils-panel-display { margin-top:16px; border-radius:10px; overflow:hidden; }

#scada-viewport:has(.scada-pro-host) > .zoom-controls { top:48px; right:12px; bottom:auto; left:auto; }
#scada-viewport:has(.scada-pro-host.scada-hmi-open,.scada-pro-host.scada-hover-open) > .zoom-controls { visibility:hidden; pointer-events:none; }

/* The native assistant follows the active editor; document, view and edit intent
   stay visible without adding another toolbar to the canvas. */
.assistant-context { padding:0 12px 10px; white-space:normal; display:flex; flex-direction:column; gap:5px; min-width:0; }
.assistant-document,.assistant-location-row,.assistant-selected-row { display:flex; align-items:center; gap:7px; min-width:0; }
.assistant-document strong { min-width:0; flex:1; color:var(--fg); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#assistant-save-state { flex-shrink:0; font-size:10px; }
#assistant-save-state.is-unsaved { color:var(--warning); }
#assistant-project-name,#assistant-scope { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
#assistant-project-name { font-size:10px; }
#assistant-scope { flex:1; font-size:10px; }
.assistant-context button { min-height:24px; padding:2px 5px; font-size:11px; line-height:1.5; border:1px solid transparent; background:transparent; color:var(--vscode-textLink-foreground,var(--accent)); border-radius:4px; }
.assistant-context button:hover { background:var(--hover); border-color:var(--border); }
#assistant-location { flex-shrink:0; padding-left:0; }
#assistant-selected-work { justify-content:flex-start; min-width:0; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; padding-left:0; }
#assistant-edit-selected { flex-shrink:0; border-color:var(--border); color:var(--fg); }
.composer-target { display:flex; align-items:center; gap:5px; min-width:0; margin:-2px 0 7px; color:var(--muted); font-size:10px; }
.composer-target.has-target { color:var(--vscode-textLink-foreground,var(--accent)); }
#composer-target-label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#clear-edit-target { min-height:20px; flex-shrink:0; border:0; background:transparent; padding:1px 5px; font-size:15px; line-height:17px; color:var(--muted); }
.inspector-edit-ai { width:100%; margin:0 0 12px; font-size:12px; text-align:center; }
button.status-badge { min-height:0; font-family:inherit; margin:0; flex-shrink:1; min-width:0; cursor:pointer; }
button.status-badge:disabled { opacity:1; cursor:default; }
button.status-badge:not(:disabled):hover { background:var(--hover); }
.status-badge[data-tone="success"] { color:var(--vscode-testing-iconPassed,var(--ide-positive,#137f4f)); border-color:currentColor; }
.status-badge[data-tone="warning"] { color:var(--warning); border-color:currentColor; }
.status-badge[data-tone="error"] { color:var(--danger); border-color:currentColor; }

[data-theme="dark"] { --ide-positive:#69c99c; }

/* Keep the existing node bounds while making its selected edit action visible. */
.node-edit-button { position:absolute; top:-30px; right:-1px; min-height:24px; padding:3px 9px; border-color:var(--focus); background:var(--accent); color:var(--vscode-button-foreground,#fff); font-size:11px; font-weight:600; white-space:nowrap; box-shadow:0 2px 7px #0002; z-index:3; cursor:pointer; }
.node-edit-button:hover:not(:disabled),.node-edit-button:focus-visible { background:var(--vscode-button-hoverBackground,var(--accent)); }
#empty-create { min-width:132px; }

/* A disabled action explains its current prerequisite without shifting controls. */
.button-feedback-tooltip{position:fixed;z-index:10000;max-width:min(340px,calc(100vw - 16px));padding:8px 11px;border:1px solid var(--border,#607080);border-radius:6px;background:var(--vscode-editorHoverWidget-background,#26313a);color:var(--vscode-editorHoverWidget-foreground,#fff);box-shadow:0 4px 16px #0005;font-size:12px;line-height:1.5;white-space:normal;pointer-events:none;overflow-wrap:anywhere}
.button-feedback-tooltip[hidden]{display:none!important}
.button-feedback-announcement{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.action-ack{outline:2px solid var(--vscode-focusBorder,#57acde)!important;outline-offset:1px;animation:action-received .45s ease-out}
@keyframes action-received{from{filter:brightness(1.25)}to{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.action-ack{animation:none}}

.scada-scene-layout{display:flex;flex:1;min-width:0;min-height:0;overflow:hidden}
.scada-scene-layout>.scada-viewport{min-width:0}
.mils-monitor-panel{position:relative;display:flex;flex-direction:column;width:310px;flex:0 0 310px;min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--border);background:var(--panel)}
.mils-monitor-panel[hidden]{display:none}
#close-mils-monitor{position:absolute;right:6px;top:7px;z-index:1;min-width:28px;min-height:28px;padding:2px 6px}
#mils-monitor-content{display:flex;flex:1;min-height:0;min-width:0}
.mils-monitor{display:flex;flex:1;min-width:0;min-height:0;flex-direction:column;font-size:11px;color:var(--fg)}
.mils-monitor__header{padding:12px 36px 8px 12px;border-bottom:1px solid var(--border)}
.mils-monitor__heading{font-size:13px;margin:0 0 5px;font-weight:600}
.mils-monitor__status,.mils-monitor__sample,.mils-monitor__engine{color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
.mils-monitor__controls{padding:8px 10px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.mils-monitor__search{width:100%;min-width:0;padding:6px 8px;background:var(--surface);border:1px solid var(--border);color:var(--fg);border-radius:4px}
.mils-monitor__tabs{display:flex;padding:0 8px;gap:3px;border-bottom:1px solid var(--border)}
.mils-monitor__tab{flex:1;border:0;border-radius:0;padding:7px 4px;font-size:11px;color:var(--muted)}
.mils-monitor__tab[aria-selected=true]{color:var(--fg);border-bottom:2px solid var(--accent)}
.mils-monitor__summary,.mils-monitor__count,.mils-monitor__clipped{padding:6px 12px;color:var(--muted)}
.mils-monitor__list{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:3px 8px}
.mils-monitor__row{display:block;width:100%;text-align:left;margin:0 0 5px;border:1px solid var(--border);border-radius:5px;padding:8px;background:var(--surface);font-size:11px;white-space:normal;color:var(--fg)}
.mils-monitor__row[data-phase=Going],.mils-monitor__row[data-phase=Running]{border-left:3px solid #3bbf9c}
.mils-monitor__row[data-phase=Finish],.mils-monitor__row[data-phase=Succeeded]{border-left:3px solid #68aef1}
.mils-monitor__row[data-phase=Fault],.mils-monitor__row[data-phase=Failed]{border-left:3px solid #e47a7a}
.mils-monitor__row[data-changed=true]{box-shadow:inset 2px 0 var(--accent)}
.mils-monitor p{margin:0}
.mils-monitor__name,.mils-monitor__path,.mils-monitor__meta,.mils-monitor__binding{display:block}
.mils-monitor__name{font-weight:600;overflow-wrap:anywhere}
.mils-monitor__path,.mils-monitor__meta,.mils-monitor__binding{color:var(--muted);font-size:10px;overflow-wrap:anywhere;line-height:1.5}
.mils-monitor__phase{display:flex;align-items:center;gap:5px;margin:4px 0}
.mils-monitor__dot{display:inline-block;width:6px;height:6px;flex-shrink:0;border-radius:50%;background:currentColor}
.mils-monitor__bits{display:flex;gap:5px;margin:5px 0}
.mils-monitor__bit{display:inline-flex;gap:4px;align-items:center;padding:2px 5px;border:1px solid var(--border);border-radius:3px;color:var(--muted);font-variant-numeric:tabular-nums}
.mils-monitor__bit[data-value="1"]{color:#6bd7b8;border-color:#3b8c77;background:#153b302e}
.mils-monitor__empty,.mils-monitor__notice{padding:12px;color:var(--muted);line-height:1.6}
.mils-monitor__history-row{padding:7px 4px;border-bottom:1px solid var(--border);overflow-wrap:anywhere}
.mils-monitor__footnote{flex-shrink:0;padding:8px 12px;border-top:1px solid var(--border);color:var(--muted);font-size:10px;line-height:1.5}
@media(max-width:1050px){.mils-monitor-panel{width:280px;flex-basis:280px}}
@media(max-width:800px){.scada-scene-layout{flex-direction:column}.mils-monitor-panel{width:100%;flex:0 0 340px;max-height:65%;border-left:0;border-top:1px solid var(--border)}.projection-heading{flex-wrap:wrap}.mils-monitor__list{padding:3px 8px}}

.mils-monitor__sample,.mils-monitor__engine{padding:2px 12px;font-size:10px}
.mils-monitor__notice{padding:4px 12px;font-size:10px}
@media(max-width:800px){.mils-monitor__header{display:flex;gap:8px;align-items:baseline;padding:7px 36px 6px 10px}.mils-monitor__heading{margin:0;font-size:12px}.mils-monitor__status{font-size:10px}.mils-monitor__engine,.mils-monitor__notice{display:none}.mils-monitor__controls{padding:5px 8px;gap:4px}.mils-monitor__search{padding:4px 7px}.mils-monitor__tab{padding:5px 4px}.mils-monitor__summary,.mils-monitor__count,.mils-monitor__clipped{padding:3px 10px}.mils-monitor__footnote{padding:5px 10px;font-size:10px;line-height:1.3}}

/* Web/Desktop use the same left AI workspace as the IDE's external sidebar.
   Properties are independent, so inspecting a Work never replaces a conversation. */
.view-role-workbench { min-width:0; --studio-ai-width:320px; --studio-project-width:190px; --studio-properties-width:0px; }
.view-role-workbench.ai-closed { --studio-ai-width:0px; }
.view-role-workbench.project-closed { --studio-project-width:0px; }
.view-role-workbench.properties-open { --studio-properties-width:300px; }
.view-role-workbench.properties-overlay { --studio-properties-width:0px; }
.view-role-workbench .studio-body { display:grid; grid-template-columns:var(--studio-ai-width) var(--studio-project-width) minmax(0,1fr) var(--studio-properties-width); }
.view-role-workbench .conversation { grid-column:1; grid-row:1; position:static; width:auto; max-width:none; transform:none; transition:none; border-left:0; border-right:1px solid var(--border); box-shadow:none; }
.view-role-workbench .project-panel { grid-column:2; grid-row:1; display:flex; }
.view-role-workbench .workspace { grid-column:3; grid-row:1; container:studio-canvas / inline-size; }
.view-role-workbench .side-tabs { display:none; }
.view-role-workbench .properties-panel { grid-column:4; grid-row:1; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border-left:1px solid var(--border); background:var(--panel); }
.view-role-workbench #inspector-pane { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.view-role-workbench #inspector-pane .work-inspector { flex:1; min-height:0; overflow:auto; }
.view-role-workbench .inspector-heading { display:none; }
.view-role-workbench .editor-properties-heading { flex-shrink:0; }
.view-role-workbench .close-conversation { display:inline-flex; flex-shrink:0; }
.view-role-workbench #toggle-conversation,.view-role-workbench #toggle-project { display:inline-flex; align-items:center; gap:5px; width:auto; min-width:29px; height:29px; padding:4px 7px; font-size:11px; border:1px solid transparent; }
.view-role-workbench .panel-toggle svg { width:15px; height:15px; }
.view-role-workbench .panel-toggle[aria-pressed="true"] { background:var(--selected); border-color:var(--border); }
.view-role-workbench .project-panel-heading { gap:3px; }
.view-role-workbench .project-panel-heading strong { margin-right:auto; }
.view-role-workbench #close-project { width:24px; min-width:24px; padding:2px; font-size:16px; }
.view-role-workbench.project-drawer .project-panel { position:absolute; grid-column:1 / -1; left:var(--studio-ai-width); top:0; bottom:0; width:230px; max-width:calc(100% - 28px); z-index:10; border-right:1px solid var(--border); box-shadow:8px 0 24px #0004; }
.view-role-workbench.properties-overlay .properties-panel { position:absolute; grid-column:1 / -1; right:0; top:0; bottom:0; width:300px; max-width:calc(100% - 28px); z-index:10; box-shadow:-8px 0 24px #0004; }
#panel-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; padding:0; background:#0005; z-index:9; cursor:default; }
@media(max-width:1200px) {
  .view-role-workbench:not(.ai-closed) { --studio-ai-width:300px; }
}
@media(max-width:920px) {
  .view-role-workbench { --studio-ai-width:0px; --studio-project-width:0px; --studio-properties-width:0px; }
  .view-role-workbench:not(.ai-closed) { --studio-ai-width:0px; }
  .view-role-workbench .conversation { position:absolute; grid-column:1 / -1; top:0; bottom:0; left:0; right:auto; width:340px; max-width:calc(100% - 28px); z-index:10; border-right:1px solid var(--border); box-shadow:8px 0 24px #0004; }
  .view-role-workbench.project-drawer .project-panel { left:0; }
}
@container studio-canvas (max-width:680px) {
  .view-role-workbench .workspace-toolbar { flex-wrap:wrap; height:auto; min-height:40px; flex:0 0 auto; gap:0; }
  .view-role-workbench .view-tabs { flex:0 0 100%; min-height:38px; overflow-x:auto; scrollbar-width:thin; }
  .view-role-workbench .view-tabs > button { flex-shrink:0; }
  .view-role-workbench .flow-tools { flex:0 0 100%; min-height:35px; padding:3px 0; }
}
@media(max-width:660px) {
  .view-role-workbench .panel-toggle-label { display:none; }
  .view-role-workbench .brand { gap:4px; }
  .view-role-workbench .studio-beta-badge { padding:1px 4px; font-size:9px; }
  .view-role-workbench #project-title { max-width:50px; }
  .view-role-workbench .status-badge { max-width:52px; }
  .view-role-workbench .header-actions { gap:1px; }
  .view-role-workbench .header-actions > button { padding:4px 5px; }
  .view-role-workbench .file-menu summary,.view-role-workbench .advanced-menu summary { padding:5px 4px; }
}

/* The readable-scale action shares the reserved camera-control area instead of
   covering titles and detail buttons in a fitted or manually panned diagram. */
.zoom-controls .overview-hint { position:static; display:flex; align-items:center; margin:0; padding:0; border:0; border-radius:0; box-shadow:none; background:transparent; font-size:0; }
.zoom-controls .overview-hint button { margin:0; min-height:29px; padding:3px 7px; font-size:10px; }
.zoom-controls:has(.overview-hint:not([hidden])) #zoom-reset { display:none; }

@media(max-height:620px) {
  .activity-copy strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .activity-copy > span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .activity-card { padding:8px 10px; }
  .view-role-assistant .conversation-heading { padding:8px 10px 4px; }
  .view-role-assistant .assistant-context { padding:0 10px 7px; gap:3px; }
  .view-role-assistant #assistant-project-name { display:none; }
  .view-role-assistant .composer { padding:8px 10px; }
  .view-role-assistant .composer label { margin-bottom:6px; }
  .view-role-assistant #request-input { height:58px; min-height:52px; max-height:20vh; }
  .view-role-assistant .composer-footer { padding-top:5px; }
  .view-role-assistant .activity-card { margin:0 10px 6px; max-height:112px; }
  .view-role-assistant .error-banner,.view-role-assistant .notice-banner { margin:10px 0; padding:8px; }
}

@media(max-width:420px) {
  .status-badge { flex-shrink:0 !important; }
}

/* On a short narrow screen, the scene keeps its own useful area. Monitor and
   HMI temporarily use that area instead of squeezing the equipment to a strip. */
@media(max-width:660px) and (max-height:620px) {
  .workspace:has(#scada-panel:not([hidden])) > .notice-banner { max-height:48px; padding:6px 10px; }
  #scada-panel { position:relative; }
  #scada-panel .projection-heading { flex-wrap:nowrap; padding:5px 8px; gap:5px; min-height:38px; }
  #scada-panel .projection-heading strong { font-size:12px; white-space:nowrap; }
  #scada-version,#scada-back-flow { display:none; }
  #scada-panel .projection-heading button { font-size:10px; padding:4px 6px; min-height:28px; white-space:nowrap; }
  #scada-panel .projection-heading #refresh-scada { margin-left:auto; }
  #scada-panel .mils-transport { gap:3px; padding:4px 6px; }
  #scada-panel .mils-status { display:none; }
  #scada-panel > .graph-status { height:28px; flex-basis:28px; padding:0 8px; }
  #scada-panel .scada-scene-layout { position:relative; overflow:hidden; }
  #scada-panel .mils-monitor-panel { position:absolute; inset:0 0 0 auto; width:min(310px,calc(100% - 20px)); max-height:none; height:auto; border:1px solid var(--border); box-shadow:-8px 0 24px #0005; z-index:6; }
  #scada-panel:has(.scada-hmi-open) { position:absolute; inset:0; z-index:20; background:var(--bg); }
  #scada-panel:has(.scada-hmi-open) > .projection-heading,
  #scada-panel:has(.scada-hmi-open) > #scada-status,
  #scada-panel:has(.scada-hmi-open) > #scada-playback-slot,
  #scada-panel:has(.scada-hmi-open) > .graph-status,
  #scada-panel:has(.scada-hmi-open) .mils-monitor-panel { display:none; }
}

html[data-theme] dialog[aria-label="AI 연결 설정"] input { background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:4px; }
html[data-theme="light"] .button-feedback-tooltip { background:var(--surface); color:var(--fg); border-color:var(--border); }
html[data-theme="light"] .sils-panel-notice[data-kind="error"] { color:var(--danger); }

/* The project tree is an anchored menu. No saved dock preference reserves a column. */
.view-role-workbench { --studio-project-width:0px; }
.view-role-editor .studio-body { grid-template-columns:minmax(0,1fr); }
.view-role-editor .workspace { grid-column:1; }
.view-role-editor.properties-open .studio-body { grid-template-columns:minmax(0,1fr) 300px; }
.view-role-editor.properties-open .conversation { grid-column:2; }
.studio .project-panel { display:none; }
.studio.project-popover-open .project-panel { position:fixed; inset:auto; display:flex; grid-column:auto; grid-row:auto; min-height:0; max-width:calc(100vw - 20px); height:auto; z-index:40; border:1px solid var(--border); border-radius:9px; box-shadow:0 12px 32px #0005; overflow:auto; overscroll-behavior:contain; }
.studio .project-panel[hidden] { display:none; }
.studio .project-panel-heading { flex-shrink:0; gap:6px; }
.studio .project-panel-heading strong { margin-right:auto; }
.studio #toggle-project { display:inline-flex; align-items:center; gap:5px; width:auto; min-width:29px; height:29px; padding:4px 7px; font-size:11px; }
.studio #toggle-project[hidden] { display:none; }
.studio #toggle-project[aria-expanded="true"] { background:var(--selected); border-color:var(--border); }
.studio #project-tree { flex:0 0 auto; }
.studio .project-panel .starter-library { flex:0 0 auto; margin-top:0; }
.studio .project-panel .starter-library[hidden] { display:none; }
.studio #close-project { flex-shrink:0; width:26px; min-width:26px; padding:3px; }
@media(max-width:700px) { .view-role-editor #toggle-project .panel-toggle-label { display:none; } }
@media(max-width:800px) { .view-role-editor.properties-open .studio-body { grid-template-columns:minmax(0,1fr); } }
html[data-theme="light"] [data-mils-phase="Ready"],html[data-theme="light"] [data-mils-phase="Unissued"] { --mils-color:#5d6b82; }
html[data-theme="light"] [data-mils-phase="Going"],html[data-theme="light"] [data-mils-phase="Running"],html[data-theme="light"] [data-mils-phase="Finish"],html[data-theme="light"] [data-mils-phase="Succeeded"] { --mils-color:#14734f; }
html[data-theme="light"] [data-mils-phase="Blocked"],html[data-theme="light"] [data-mils-phase="Pending"],html[data-theme="light"] [data-mils-phase="Bypassed"],html[data-theme="light"] [data-mils-phase="Cancelled"],html[data-theme="light"] [data-mils-phase="Interrupted"] { --mils-color:var(--warning); }
html[data-theme="light"] [data-mils-phase="Fault"],html[data-theme="light"] [data-mils-phase="Failed"] { --mils-color:var(--danger); }
html[data-theme="light"] .mils-monitor__row[data-phase="Going"],html[data-theme="light"] .mils-monitor__row[data-phase="Running"] { border-left-color:#14734f; }
html[data-theme="light"] .mils-monitor__row[data-phase="Finish"],html[data-theme="light"] .mils-monitor__row[data-phase="Succeeded"] { border-left-color:#2366a2; }
html[data-theme="light"] .mils-monitor__row[data-phase="Fault"],html[data-theme="light"] .mils-monitor__row[data-phase="Failed"] { border-left-color:var(--danger); }
html[data-theme="light"] .mils-monitor__bit[data-value="1"] { color:#116a4f; border-color:#3a8c72; background:#e7f5ed; }

/* Model projections use the full canvas; four modes share one source and scope. */
.model-viewers-panel { display:flex; flex:1; min-width:0; min-height:0; flex-direction:column; overflow:hidden; }
.model-viewers-panel[hidden] { display:none; }
.model-viewers-heading { display:flex; flex:none; align-items:center; gap:8px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--surface); font-size:11px; }
.model-viewers-heading select { min-width:0; max-width:65%; font-size:12px; }
.model-viewers-heading button { margin-left:auto; white-space:nowrap; }
.model-viewers-content { flex:1; min-width:0; min-height:0; overflow:hidden; }

.request-limit { margin:4px 0 2px; color:var(--muted); font-size:11px; line-height:1.4; }
.request-limit.at-limit { color:var(--warning); }

/* Compact document commands and context tools share the same hierarchy in every host. */
.studio-header .brand { flex:1 1 auto; overflow:hidden; }
.studio-header .header-actions { gap:4px; }
.file-menu > div { left:auto; right:0; width:254px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 65px); overflow-y:auto; overscroll-behavior:contain; }
.file-menu .menu-group-label { display:block; padding:9px 8px 4px; color:var(--muted); font-size:10px; font-weight:650; }
.file-menu .menu-group-label:not(:first-child) { border-top:1px solid var(--border); margin-top:5px; }
.file-menu button { min-height:31px; font-size:12px; white-space:normal; text-align:left; }
.file-menu small { margin-left:auto; color:var(--muted); }
.file-menu #open-control-ir { gap:5px; }
.view-tabs { overflow-x:auto; scrollbar-width:thin; }
.view-tabs > button { flex-shrink:0; }
.flow-tools { flex-basis:360px; }
#scope-summary { flex:0 1 170px; max-width:170px; }
.node-search-shell { flex:0 0 29px; min-width:29px; max-width:29px; position:relative; }
#search-toggle { display:flex; }
.node-search-shell:not(.search-open) .node-search-box { display:none; }
.node-search-shell.search-open .node-search-box { display:block; position:absolute; top:calc(100% + 6px); left:auto; right:0; width:min(300px,calc(100vw - 32px)); padding:7px; border:1px solid var(--border); border-radius:7px; background:var(--surface); box-shadow:var(--shadow); z-index:9; }
.model-viewers-heading { display:contents; }
.model-viewers-heading select { flex:1 1 100px; min-width:80px; max-width:230px; }
.model-viewers-heading button { margin-left:0; flex:none; min-height:30px; padding:4px 7px; font-size:12px; }
.model-viewers-heading button[hidden] { display:none; }
@media(max-width:620px) {
  .studio-header .header-divider,.studio-header .studio-beta-badge,.studio-header .save-state { display:none; }
  .studio-header #project-title { max-width:120px; }
  .studio-header .status-badge { max-width:74px; }
  .model-views-bar { gap:4px; padding:4px 6px; }
  .model-viewers-heading select { max-width:180px; }
  .model-views-context { flex-basis:100%; }
  .model-views-context select { flex:1; max-width:none; }
  .model-views-context button { flex:none; padding:5px; }
}

@media(max-width:360px) {
  .file-menu > div { position:fixed; top:48px; left:8px; right:auto; max-width:calc(100vw - 16px); }
}

@media(max-width:620px) {
  .node-search-shell { position:static; }
  .node-search-shell.search-open .node-search-box { left:8px; right:8px; top:calc(100% + 5px); width:auto; }
}

/* Primary work: Flow / 3D, with specialist views shown only while in use. */
.workspace-toolbar,.view-role-workbench .workspace-toolbar { flex-wrap:nowrap; gap:6px; min-height:40px; }
.view-tabs,.view-role-workbench .view-tabs { flex:0 1 auto; min-height:38px; overflow:visible; }
.flow-tools,.view-role-workbench .flow-tools { flex:1 1 auto; min-height:35px; gap:4px; }
#scope-summary { display:inline-flex; flex:0 1 180px; max-width:180px; }
.workspace-advanced { margin-left:auto; flex:none; }
.workspace-advanced > summary { color:var(--muted); }
.workspace-advanced[open] > summary { color:var(--fg); }
.workspace-advanced > div { width:252px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 110px); overflow:auto; overscroll-behavior:contain; z-index:12; }
.workspace-advanced button,.workspace-advanced a { min-height:31px; font-size:12px; text-align:left; white-space:normal; }
.workspace-advanced a { display:block; padding:7px 9px; color:var(--fg); text-decoration:none; }
.workspace-advanced [aria-pressed=true] { color:var(--accent); background:var(--selected); }
.advanced-menu .menu-group-label { display:block; padding:8px 8px 4px; color:var(--muted); font-size:10px; font-weight:650; }
.advanced-menu .menu-group-label:not(:first-child) { border-top:1px solid var(--border); margin-top:5px; }
.layout-option-controls { display:flex; align-items:center; gap:6px; }
.layout-option-controls #layout-select { flex:1; max-width:none; min-width:0; }
.layout-option-controls #reapply-layout { flex:none; }
.scope-options { margin-top:12px; font-size:11px; }
.scope-options > summary { padding:5px 0; color:var(--muted); cursor:pointer; }
.scope-options label { display:block; color:var(--muted); margin:7px 0 4px; }
.scope-options select { width:100%; min-height:30px; border:1px solid var(--border); background:var(--bg); border-radius:5px; }
/* The primary playback row has a single continuous timeline. */
.playback-slot { position:relative; z-index:3; }
.mils-transport { gap:7px; flex-wrap:nowrap; }
#mils-seek { order:0; min-width:36px; flex:1 1 auto; }
#mils-clock { order:0; flex:0 0 auto; min-width:0; font-size:10px; }
.playback-advanced { flex:none; }
.playback-advanced > summary { padding:3px 8px; min-height:28px; font-size:17px; }
.playback-advanced > div { top:auto; bottom:calc(100% + 8px); width:278px; max-width:calc(100vw - 20px); max-height:calc(100dvh - 130px); overflow:auto; overscroll-behavior:contain; z-index:12; }
.playback-step-actions { display:flex; gap:5px; }
.playback-step-actions > button { width:auto; flex:1; justify-content:center; }
.playback-advanced label { display:block; color:var(--muted); padding:8px 8px 4px; font-size:11px; }
.playback-advanced #mils-speed { width:100%; max-width:none; }
.playback-advanced .mils-feed { display:flex; flex-direction:column; align-items:stretch; margin:0; padding:0; gap:5px; }
.playback-advanced .mils-feed > button { justify-content:flex-start; }
.playback-advanced .mils-feed select { max-width:none; width:100%; }
.playback-advanced .mils-feed-summary { max-width:none; white-space:normal; font-size:11px; padding:5px; }
.playback-advanced .mils-status { display:block; max-width:none; padding:8px 5px; white-space:normal; font-size:11px; }
/* The document already names the scene; camera tools belong to the scene. */
#sils-panel:not([data-mode=demo]) > .three-d-mode-bar { display:none; }
#sils-panel[data-mode=demo] #three-d-demos { display:none; }
#flow-3d-panel > .flow-3d-heading { display:none; }
#flow-3d-panel[data-issue=true] > .flow-3d-heading { display:flex; padding:4px 10px 0; }
#flow-3d-title,#flow-3d-back { display:none; }
#flow-3d-panel > .flow-3d-status:not([hidden]) { padding:6px 10px; font-size:11px; }
@media(max-width:700px) {
  .workspace-toolbar,.view-role-workbench .workspace-toolbar { gap:3px; padding:0 6px; }
  .view-tabs > button[role=tab] { padding:0 7px; }
  #scope-summary { flex:0 1 100px; max-width:100px; padding:4px; }
  .flow-tools,.view-role-workbench .flow-tools { padding:3px 0; gap:1px; }
  .mils-transport { gap:4px; padding:5px 6px; }
  #mils-play { max-width:125px; padding:3px 5px; }
  #mils-clock { max-width:124px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@container studio-canvas (max-width:680px) {
  .view-role-workbench .view-tabs { flex:0 1 auto; }
  .view-role-workbench .flow-tools { flex:1 1 auto; }
}
/* Entering a Work shows its DAG directly, without another analysis-mode strip. */
.model-views[data-view=dag] > .model-views-bar { display:none; }
#model-viewers-back { display:none; }

.mils-transport:has(> .mils-status) { flex-wrap:wrap; }
.mils-transport > .mils-status { flex:1 0 100%; max-width:none; white-space:normal; color:var(--warning); padding:5px 7px; border-left:2px solid var(--warning); overflow-wrap:anywhere; }