#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;overscroll-behavior:contain;scrollbar-gutter:stable;user-select:text}
#session-diagram [data-drawing] > svg:not(.graph-annotation-ink){display:block;width:100%;height:auto;min-width:0;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:is([data-representation=webpage],[data-representation=super]) .diagram-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#session-diagram:is([data-representation=webpage],[data-representation=super]) 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-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;flex-wrap:wrap;align-items:flex-start;gap:12px;flex:none;margin-bottom:10px}
#session-diagram .diagram-heading h1{flex:1;min-width:0;margin:0}
/* Flag's row height is reserved so showing it cannot move the drawing. */
#session-diagram:not([data-representation=super]) .diagram-heading{min-height:34px}
/* @lat: [[super-chart#Design]] */
/* Decision: AGENTS.md Decisions > Session mix */
#session-diagram[data-representation=super] .diagram-heading{gap:0;margin-bottom:0}
#session-diagram[data-representation=super] .diagram-heading h1{display:none}

#session-diagram-pane{position:fixed;left:calc(var(--session-sidebar) + var(--console-inline-gutter));width:var(--diagram-column-width);top:var(--diagram-pane-top,0px);z-index:7;background:var(--page);color:var(--ink);min-width:0;border-right:3px solid var(--accent)}
#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 #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;right:-5px;top:0;bottom:0;width:12px;z-index:8;cursor:col-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}

@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}}

/* Desktop keeps Model and Text beside each other, with readable pane minima. */
body.diagram-columns{min-width:calc(var(--session-sidebar) + 2 * var(--console-inline-gutter) + 556px)}
body.diagram-columns #slow-lane{padding-left:calc(var(--diagram-column-width) + 12px)}

.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}

/* The composer belongs below Model; Text can use the full height beside it. */
body.diagram-columns #composer-dock{width:var(--diagram-column-width)}
body.diagram-columns #composer .composer-actions{flex-wrap:wrap}
body.diagram-columns #slow-lane:has(>#messages:not([hidden])):has(>#composer-dock:not([hidden])){padding-bottom:calc(24px + var(--conversation-scroll-tail,0px))}
body.diagram-columns #messages>.message.user:is([data-provenance="human"],.routed-user-request){max-height:min(25vh,180px);overflow:auto;overscroll-behavior:contain}
body.diagram-columns #messages>.message.user.latest-human-prompt{position:sticky;top:12px;z-index:3;max-height:min(37.5vh,270px)}

/* Keep the action row stable when Send makes Stop available. */
body.diagram-columns #stop-response[hidden]{display:inline-flex!important;visibility:hidden;pointer-events:none}

/* Mobile device policy comes from app.js, never the window width. Keep the
   drawing mounted at its real size while Text is shown. */
#session-view-tabs{position:sticky;z-index:8;display:flex;gap:4px;padding:4px;background:var(--page);color:var(--ink);overscroll-behavior:contain}
#session-view-tabs[hidden]{display:none}
#session-view-tabs button{flex:1;min-height:36px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:14px}
#session-view-tabs button[aria-pressed=true]{background:var(--tab-selected,var(--surface));color:var(--accent);border-color:var(--accent)}
body.mobile-model-tabs #session-diagram-pane{display:flex!important;flex-direction:column;left:var(--mobile-model-left);right:var(--console-inline-gutter);width:auto;height:var(--diagram-pane-height);border:0;visibility:hidden;pointer-events:none}
body.mobile-model-tabs #session-diagram{display:flex;flex:1;min-height:0;flex-direction:column;padding:8px 0}
body.mobile-model-tabs #session-split-divider{display:none}
body.mobile-model-active{overflow:hidden;overscroll-behavior:none}
body.mobile-model-active #session-diagram-pane{visibility:visible;pointer-events:auto}
body.mobile-model-active #session-view-tabs{position:fixed;left:var(--mobile-model-left);right:var(--console-inline-gutter)}
body.mobile-model-active #slow-lane>:is(#messages,#messages-more,#super-session-routes,#resume){visibility:hidden;pointer-events:none}
body[data-super-view="overview"].mobile-model-tabs #session-diagram-pane{display:flex!important}

body.mobile-model-tabs :is(.model-webpage-host,.model-webpage-host iframe){min-height:0!important}

#session-diagram[data-representation=activity] .diagram-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
#session-diagram[data-representation=activity] graph-detail-overlay{display:none}

/* Decision: AGENTS.md Decisions > Canvas widgets */
.session-report{box-sizing:border-box;padding:14px;color:var(--ink);background:transparent;font:400 17px/1.55 system-ui;overflow-wrap:anywhere}
.session-report p{margin:0 0 16px}.session-report h2{font-size:20px}
.session-report a{color:var(--accent);cursor:pointer}
.session-report .message-decoration{--decoration-ink:var(--ink);font:inherit}

.model-webpage-host{position:relative}

/* Decision: AGENTS.md Decisions > Diagram flag */
#session-diagram .diagram-zoom-controls{align-items:center;flex-wrap:wrap}
#session-diagram .diagram-zoom-controls a{color:var(--accent);background:var(--surface);padding:4px 7px;font-size:12px}
#session-diagram .diagram-flag-status{color:var(--ink);background:var(--surface);font-size:12px;max-width:100%;overflow-wrap:anywhere}
#session-diagram .diagram-zoom-controls button[aria-pressed=true]{color:var(--danger);background:var(--surface)}
#session-diagram .diagram-zoom-controls button:disabled{opacity:.65}

/* Decision: AGENTS.md Decisions > Canvas widgets */
#session-diagram[data-representation=report] .diagram-workspace{display:flex;flex-direction:column;gap:0}
#session-diagram[data-representation=report] graph-detail-overlay{display:none}
#session-diagram[data-representation=report] [data-drawing]{flex:1;min-height:0}
.session-report-host{display:flex;box-sizing:border-box;min-height:100%;height:100%;padding:24px;overflow:auto;color:var(--ink);background:var(--page)}
.session-report-host .session-report{flex:none;width:100%;max-width:44rem;margin:auto;padding:0}
@media(max-width:600px){.session-report-host{padding:16px}}