#session-diagram{position:relative;box-sizing:border-box;overflow:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;background:var(--page);color:var(--ink);min-width:0;padding:8px 8px 12px;--graph-detail-surface:var(--surface);--graph-detail-ink:var(--ink);--graph-detail-muted:var(--muted);--graph-detail-line:var(--line);--graph-detail-alt:var(--tab-surface)}
#session-diagram h1{font:600 20px/1.25 system-ui;margin:0 0 10px;color:var(--ink);letter-spacing:-.03em}
#session-diagram button:not(.graph-annotation-note button){background:var(--surface);color:var(--ink);border:1px solid var(--line);font-size:12px;padding:7px 10px;white-space:nowrap}
.diagram-workspace{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px;align-items:stretch;min-height:0;flex:1;overflow:hidden}
#session-diagram [data-drawing]{min-width:0;min-height:0;height:100%;overflow:auto;scrollbar-gutter:stable;user-select:text}
#session-diagram [data-drawing] > svg:not(.graph-annotation-ink){display:block;width:100%;height:auto;min-width:280px;max-height:none}
#session-diagram [data-status]{color:var(--muted);font-size:13px;margin:0;padding:6px 8px}
#session-diagram[data-state=failed] [data-status]{color:var(--danger)}
#session-diagram[data-state=missing] [data-status]{color:var(--danger);background:var(--surface)}
#session-diagram[data-state=missing] .diagram-workspace{display:none}
#session-diagram[data-representation=webpage] .diagram-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#session-diagram[data-representation=webpage] graph-detail-overlay{display:none}
.model-webpage-host{width:100%;height:100%;min-height:240px}
.model-webpage-host iframe{display:block;width:100%;height:100%;min-height:240px;border:0;background:var(--page);color:var(--ink)}
#session-diagram graph-detail-overlay{position:static;height:100%;min-height:0;--graph-detail-height:100%}
body.diagram-split #slow-lane{min-width:0}
#session-diagram[data-state=empty] .diagram-workspace{display:none}
#session-diagram[data-state=empty]{min-height:0}
#session-diagram [data-node-id]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media(max-width:1000px){.diagram-workspace{grid-template-columns:minmax(0,1fr)}#session-diagram{padding:8px 0 20px}.diagram-workspace{gap:10px}#session-diagram h1{font-size:18px}}

#session-diagram{container-type:inline-size}
#session-diagram [data-run-state]{color:var(--danger);background:var(--surface);border-left:3px solid var(--danger);padding:8px 12px;overflow-wrap:anywhere}
#session-diagram [data-drawing] > svg:not(.graph-annotation-ink){flex:none}
@container(max-width:1050px){.diagram-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(70px,1fr) minmax(0,130px)}}



#session-diagram[hidden]{display:none}
.diagram-heading{display:flex;align-items:flex-start;gap:12px;flex:none;margin-bottom:10px}
#session-diagram .diagram-heading h1{flex:1;min-width:0;margin:0}

#session-diagram-pane{position:sticky;top:var(--diagram-pane-top,0px);z-index:7;background:var(--page);color:var(--ink);min-width:0;border-bottom:3px solid var(--accent);box-shadow:0 5px 0 var(--page)}
#session-diagram-pane[hidden]{display:none}
#session-diagram-pane.is-split{height:var(--diagram-pane-height,40vh);display:flex;flex-direction:column}
#session-diagram-pane.is-split #session-diagram{flex:1;min-height:0;display:flex;flex-direction:column}
body.diagram-split #session-notes{top:var(--diagram-text-top,45vh)}
body.diagram-split #messages{scroll-margin-top:calc(var(--diagram-text-top,45vh) + 12px)}

#session-diagram .diagram-feedback{position:absolute;bottom:8px;left:8px;right:8px;z-index:2;max-height:35%;overflow:auto;background:var(--page);color:var(--ink)}
#session-diagram [data-status]:empty{display:none}

#session-diagram{--graph-annotation-surface:var(--surface);--graph-annotation-ink:var(--ink);--graph-annotation-blue:var(--accent);--graph-annotation-red:var(--danger);--graph-annotation-green:var(--skin-good,var(--ink))}

#session-diagram h1,.diagram-feedback{flex:none}

#session-split-divider{position:absolute;left:0;right:0;bottom:-5px;height:12px;z-index:8;cursor:row-resize;touch-action:none}
#session-split-divider:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--tab-surface)}
#session-diagram-pane:not(.is-split) #session-split-divider{display:none}

#session-diagram-votes{position:relative;margin-left:auto;align-items:center;gap:4px;border:0;overflow:visible}
#session-diagram-votes:not([hidden]){display:flex}
#session-diagram-votes[hidden]{display:none}
#session-diagram-votes button{display:inline-flex;align-items:center;justify-content:center;padding:6px;min-width:32px;min-height:32px;color:var(--muted);background:var(--surface);box-shadow:none}
#session-diagram-votes .fs-icon{width:18px;height:18px}
#session-diagram-votes button:is(:hover,:focus-visible),#session-diagram-votes button[aria-pressed=true]{color:var(--ink)}
#session-diagram-votes button[aria-pressed=true]{background:var(--tab-selected,var(--surface));outline:2px solid var(--accent);outline-offset:-2px}
#session-diagram-votes button:disabled{opacity:.5}
#session-diagram-votes [data-vote-status]{position:absolute;right:0;top:100%;z-index:10;width:max-content;max-width:min(280px,70vw);padding:4px 6px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:4px;font-size:12px;overflow-wrap:anywhere}
#session-diagram-votes [data-vote-status]:empty{display:none}

@container(max-width:1050px){#session-diagram:not([data-detail-active=true]) .diagram-workspace{grid-template-rows:minmax(70px,1fr)}#session-diagram:not([data-detail-active=true]) graph-detail-overlay{display:none}}

#session-diagram-votes button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

#session-diagram [data-history]{flex:none;font-size:12px;color:var(--muted);padding-top:5px}

/* Wide workspaces give Diagram, Text and Progress the full reading height. */
body.diagram-columns{--progress-expanded-width:clamp(220px,18vw,280px)}
body.diagram-columns #slow-lane{padding-left:calc(var(--diagram-column-width) + 12px)}
body.diagram-columns #session-diagram-pane{position:fixed;left:calc(var(--session-sidebar) + var(--console-inline-gutter));width:var(--diagram-column-width);border-bottom:0;border-right:3px solid var(--accent);box-shadow:none}
body.diagram-columns #session-split-divider{left:auto;right:-5px;top:0;bottom:0;width:12px;height:auto;cursor:col-resize}
body.diagram-columns #session-notes{top:12px;width:var(--workspace-progress-width)}
body.diagram-columns #slow-lane:has(>#session-notes)>:is(#messages,#messages-more){width:calc(100% - var(--workspace-progress-width) - 24px)}

.diagram-zoom-bounds{position:relative;overflow:hidden;margin:0 auto}
.diagram-zoom-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.diagram-zoom-stage>svg:not(.graph-annotation-ink){display:block;height:auto;max-height:none}
.diagram-zoom-controls{flex:none;align-self:flex-start;display:flex;gap:2px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:6px}
.diagram-zoom-controls[hidden]{display:none}
#session-diagram .diagram-zoom-controls button{min-width:32px;min-height:32px;padding:4px 7px;border:0;background:var(--surface);color:var(--ink);font:600 13px/1 system-ui}
#session-diagram .diagram-zoom-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

#session-model-page{display:inline-block;padding:6px 0;margin-bottom:6px;color:var(--accent);background:var(--page);font-size:13px}
#session-model-page[hidden]{display:none}