.trajectory-viewer { --record-tool:#70538e; --record-read:#3d6f5e; --record-key:#3d688a; }
:root[data-theme="dark"] .trajectory-viewer { --record-tool:#c3acdf; --record-read:#99beb0; --record-key:#98b9d4; }
.record-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.record-modes { display:flex; gap:3px; padding:3px; border-radius:9px; background:var(--surface); }
.record-modes button { border:0; border-radius:6px; padding:8px 12px; font:13px/1.3 var(--font); background:transparent; color:var(--muted); }
.record-modes button[aria-pressed="true"] { color:var(--text); background:var(--bg); box-shadow:0 1px 4px #0001; }
.record-controls select { min-height:38px; max-width:100%; border:1px solid var(--line); border-radius:7px; padding:7px 10px; background:var(--bg); color:var(--text); font:13px var(--font); }
.record-counts { margin:12px 0 18px; color:var(--muted); font:12px/1.6 var(--font); }
.record-timeline { max-height:560px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding-right:14px; scroll-padding:16px; }
.record-event { display:grid; grid-template-columns:78px minmax(0,1fr); gap:18px; position:relative; padding:0 0 26px; }
.record-event::before { content:''; position:absolute; left:38px; top:50px; bottom:6px; width:1px; background:var(--line); }
.record-who { display:flex; align-items:center; flex-direction:column; gap:3px; color:var(--agent-color,var(--muted)); font:500 12px/1.4 var(--font); }
.record-who .traj-avatar { width:36px; height:36px; }
.record-who small { font:11px var(--mono); color:var(--muted); }
.record-content { padding:0 0 5px; min-width:0; }
.record-open { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; padding:0; width:100%; border:0; background:transparent; color:var(--text); text-align:left; font-family:var(--font); }
.record-type { grid-column:1; justify-self:start; padding:2px 7px; border-radius:4px; font-size:11px; color:var(--event-color,var(--agent-color)); background:color-mix(in srgb,var(--event-color,var(--agent-color)) 8%,var(--bg)); }
.record-event[data-event-kind="read"] { --event-color:var(--record-read); }
.record-event[data-event-kind="action"] { --event-color:var(--record-tool); }
.record-open strong { grid-column:1; grid-row:2; font-size:15px; line-height:1.55; font-weight:500; }
.record-open time { grid-column:2; grid-row:1; color:var(--muted); font:11px/1.5 var(--mono); }
.record-open:hover strong { text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px; }
.record-message { margin:9px 0 0; padding:13px 16px; border-left:2px solid var(--agent-color); border-radius:0 8px 8px 0; background:color-mix(in srgb,var(--agent-color) 5%,var(--bg)); }
.record-message p { margin:0; font:14px/1.7 var(--font); color:var(--text); overflow-wrap:anywhere; }
.record-message .traj-token { font-size:.85em; background:var(--bg); }
.record-message .traj-token.is-id,.run-hover .traj-token.is-id { display:inline-block; max-width:18ch; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; vertical-align:bottom; }
.record-original-link { display:block; margin:10px 0 0 auto; padding:3px 0; border:0; background:none; color:var(--muted); font:12px/1.5 var(--font); text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:3px; }
.record-original-link:hover { color:var(--text); }
.record-readers { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; color:var(--muted); font:11px/1.5 var(--font); }
.record-readers button { display:inline-flex; gap:5px; align-items:center; padding:3px 7px; border:1px solid color-mix(in srgb,var(--agent-color) 25%,var(--bg)); border-radius:5px; color:var(--agent-color,var(--text)); background:color-mix(in srgb,var(--agent-color) 6%,var(--bg)); font:500 12px/1.5 var(--font); }
.record-readers button:hover { border-color:currentColor; }
.record-readers small { font:10px var(--mono); color:var(--muted); }
.record-unread,.record-action-copy { margin:8px 0 0; color:var(--muted); font:12px/1.6 var(--font); }
.record-failed { margin:7px 0 0; color:var(--risk); font:12px/1.6 var(--font); }
.record-message .record-unread { margin-top:9px; font-size:11px; color:var(--muted); }
.record-detail { margin:24px 0; padding:20px; border:1px solid var(--line); border-radius:10px; scroll-margin-top:110px; }
.record-detail[hidden] { display:none; }
.record-detail > header { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.record-detail h4 { margin:0; font:500 17px var(--font); }
.record-detail header button { border:0; border-radius:50%; width:36px; height:36px; font-size:24px; background:var(--surface); color:var(--text); }
.record-source-event + .record-source-event { margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.record-source-event h5 { margin:0 0 12px; font:500 14px/1.6 var(--font); }
.record-author,.record-message-meta strong { color:var(--agent-color); font-weight:600; }
.record-message-meta { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:0 0 8px; color:var(--muted); font:12px/1.6 var(--font); }
.record-message-meta .record-read-label { color:var(--record-read); }
.record-original-message { margin:14px 0; padding:14px 16px; border-left:2px solid var(--agent-color); border-radius:0 8px 8px 0; background:color-mix(in srgb,var(--agent-color) 5%,var(--bg)); }
.record-original-message blockquote { margin:0; padding:0; border:0; white-space:pre-wrap; overflow-wrap:anywhere; font:15px/1.8 var(--font); color:var(--text); }
.record-final { padding:12px 14px; border-left:2px solid var(--agent-color); background:color-mix(in srgb,var(--agent-color) 4%,var(--bg)); white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.7 var(--font); }
.record-tool { margin-top:14px; }
.record-tool summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; cursor:pointer; font:12px/1.5 var(--font); color:var(--muted); }
.record-tool summary code { color:var(--record-tool); background:color-mix(in srgb,var(--record-tool) 8%,var(--bg)); border-radius:4px; padding:3px 7px; font:12px/1.5 var(--mono); overflow-wrap:anywhere; min-width:0; }
.record-tool[data-failed] .record-status { color:var(--risk); }
.record-tool summary::before { content:'▸'; }
.record-tool[open] summary::before { content:'▾'; }
.record-tool dl { margin:12px 0 0; }
.record-tool dl > div { display:grid; grid-template-columns:minmax(110px,1fr) minmax(0,4fr); gap:12px; margin:12px 0; }
.record-tool dt { overflow-wrap:anywhere; color:var(--record-key); font:12px/1.7 var(--mono); }
.record-tool dd { margin:0; overflow-wrap:anywhere; font:13px/1.7 var(--font); }
.record-tool pre { margin:0; padding:12px; background:color-mix(in srgb,var(--record-tool) 5%,var(--bg)); border-radius:6px; white-space:pre-wrap; overflow-wrap:anywhere; max-height:400px; overflow:auto; font:12px/1.65 var(--mono); }
.record-detail .traj-token.is-id,.record-message .traj-token.is-id { color:var(--record-key); background:color-mix(in srgb,var(--record-key) 8%,var(--bg)); border-bottom:0; }
.record-run { margin:28px 0 0; }
.record-run figcaption { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:baseline; margin:0 0 14px; }
.record-run figcaption strong { font:550 20px/1.3 var(--font); letter-spacing:-.03em; }
.record-run figcaption span { color:var(--muted); font:13px/1.5 var(--font); }
.record-dot-key { display:flex; flex-wrap:wrap; gap:8px 18px; margin-bottom:14px; font:12px/1.5 var(--font); color:var(--muted); }
.record-dot-key span { display:flex; gap:7px; align-items:center; }
.record-dot-key i { width:9px; height:9px; border-radius:50%; background:var(--dot); }
.record-run [data-kind="message"] { --dot:#3d688a; }
.record-run [data-kind="read"] { --dot:#3d7b66; }
.record-run [data-kind="important"] { --dot:#ad7532; }
:root[data-theme="dark"] .record-run [data-kind="message"] { --dot:#98b9d4; }
:root[data-theme="dark"] .record-run [data-kind="read"] { --dot:#99beb0; }
:root[data-theme="dark"] .record-run [data-kind="important"] { --dot:#d6b071; }
.record-run-scroll { overflow-x:auto; scrollbar-width:thin; overscroll-behavior-x:contain; padding-block:8px; }
.record-grid { --record-step:19px; display:grid; width:max-content; grid-template-columns:86px calc(var(--record-turns) * var(--record-step)); grid-template-rows:24px repeat(4,60px); }
.record-axis { grid-column:2; position:relative; font:11px/20px var(--mono); color:var(--muted); }
.record-axis span { position:absolute; transform:translateX(-50%); }
.record-actor { grid-column:1; position:sticky; left:0; z-index:2; display:flex; flex-direction:column; justify-content:center; background:var(--bg); color:var(--agent-color,var(--text)); font:12px/1.6 var(--font); }
.record-actor b { font-weight:500; }
.record-actor small { color:var(--muted); font-size:11px; }
.record-lane { display:grid; grid-column:2; grid-template-columns:repeat(var(--record-turns),var(--record-step)); }
.record-turn { display:flex; align-items:center; justify-content:center; border:0; padding:0; background:transparent; }
.record-turn i { width:13px; height:13px; border-radius:50%; background:var(--dot,var(--icon)); opacity:.4; }
.record-turn:not([data-kind="ordinary"]) i { opacity:1; }
.record-turn:hover i,.record-turn.is-selected i { opacity:1; outline:2px solid var(--agent-color,var(--accent)); outline-offset:2px; }
.record-turn-summary { margin-top:14px; color:var(--muted); font:13px/1.7 var(--font); overflow-wrap:anywhere; }
.record-turn-summary strong { font-weight:500; color:var(--text); }
.record-turn-summary ul { margin:7px 0 0; padding-left:18px; }
.record-turn-summary p { margin:7px 0 0; }
.record-loading { padding:28px 0; color:var(--muted); font:14px/1.7 var(--font); }
.record-retry { padding:8px 14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:7px; }
@media(max-width:600px) {
 .record-event { grid-template-columns:46px minmax(0,1fr); gap:12px; }
 .record-event::before { left:22px; }
 .record-who { font-size:10px; }
 .record-who .traj-avatar { width:30px; height:30px; }
 .record-who small { font-size:10px; }
 .record-timeline { padding-right:6px; max-height:510px; }
 .record-open { gap:4px 6px; }
 .record-open strong { font-size:14px; }
 .record-open time { font-size:10px; }
 .record-message { padding:11px 12px; }
 .record-message p { font-size:13px; }
 .record-modes button { font-size:12px; padding:8px 10px; }
 .record-detail { padding:15px; }
 .record-original-message { padding:11px 12px; }
 .record-tool dl > div { grid-template-columns:minmax(0,1fr); gap:5px; }
 .record-original-message blockquote { font-size:14px; }
}
.case-picker { grid-template-columns:minmax(0,1fr); gap:8px; }
.case-picker label span { color:var(--muted); font-weight:400; font-size:12px; }
.record-coordinate { min-width:0; }
.record-coordinate .traj-chapters { gap:24px; overflow-x:auto; }
.record-coordinate .traj-chapters button { font:13px/1.5 var(--font); white-space:nowrap; }
.record-coordinate [data-map-stage="outcome"] { color:var(--risk); }
.record-coordinate .traj-message-route { opacity:.28; }
.record-coordinate .traj-message-route.is-active { opacity:1; }
.coordinate-summary { min-height:94px; margin:16px 0 0; padding:12px 14px; background:var(--surface); border-radius:8px; color:var(--muted); overflow-wrap:anywhere; font:13px/1.6 var(--font); }
.coordinate-summary strong { color:var(--text); font-weight:500; }
.coordinate-summary p { margin:5px 0 0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.coordinate-summary small { display:block; margin:5px 0 0; font-size:12px; }
.record-log { margin-top:22px; }
.record-log > summary { cursor:pointer; color:var(--text); font:500 14px/1.6 var(--font); padding:8px 0; }
.record-log[open] > summary { margin-bottom:12px; }
.record-coordinate .traj-node-label { max-width:70px; overflow:hidden; text-overflow:ellipsis; }
@media(max-width:600px) {
 .case-picker label span { display:block; margin-top:3px; }
 .record-coordinate .traj-chapters { gap:10px; }
 .record-coordinate .traj-node-label { max-width:52px; font-size:9px; }
}

.record-coordinate .traj-lane-label[data-lane="channel"] { text-align:center; }
.record-coordinate [data-map-stage="outcome"][aria-current] { color:var(--risk); border-bottom-color:var(--risk); }

/* Separate touch targets without changing the recorded turn positions. */
@media (max-width:800px), (pointer:coarse) {
 .record-grid { --record-step:44px; }
 .record-modes button,.record-original-link,.record-readers button,.record-open,.record-tool summary,.record-log > summary { min-height:44px; box-sizing:border-box; }
 .record-readers button { min-width:44px; justify-content:center; }
 .record-detail header button { width:44px; height:44px; flex-shrink:0; }
 .record-controls select { min-height:44px; font-size:16px; }
 .record-coordinate .traj-chapters button { min-height:44px; }
}
@media (max-width:600px) {
 .record-modes { width:100%; box-sizing:border-box; }
 .record-modes button { flex:1; font-size:14px; padding:8px 6px; }
 .record-open time { grid-column:1; grid-row:3; font-size:12px; }
 .record-open strong { font-size:15px; }
 .record-message p,.record-original-message blockquote,.record-final { font-size:15px; }
 .record-original-link,.record-action-copy { font-size:14px; }
 .record-who,.record-who small { font-size:11px; }
 .record-timeline { max-height:min(510px,65svh); }
 .record-tool pre,.record-tool dd { font-size:13px; }
 .record-detail,.record-source-event { min-width:0; overflow-wrap:anywhere; }
 .coordinate-summary p { display:block; overflow:visible; }
}

/* Show the relationship map first, followed by every recorded turn. */
.record-run { margin-top:18px; }
.record-grid { width:100%; --record-step:max(16px, calc((100% - 86px) / var(--record-turns))); grid-template-columns:86px minmax(0,1fr); }
.record-axis { width:100%; }
.record-axis span { left:calc((var(--axis-turn) - .5) * 100% / var(--record-turns)); }
.record-lane { grid-template-columns:repeat(var(--record-turns),minmax(0,1fr)); }
.record-turn { min-height:44px; }
.record-turn-summary:empty { display:none; }
dialog.record-detail { position:fixed; inset:0; margin:auto; width:min(820px,calc(100vw - 40px)); max-height:80dvh; box-sizing:border-box; overflow:auto; padding:24px; color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px #0003; overscroll-behavior:contain; }
dialog.record-detail:not([open]) { display:none; }
dialog.record-detail::backdrop { background:rgb(15 23 30 / .36); }
dialog.record-detail > header { position:sticky; top:-24px; z-index:2; background:var(--bg); padding:12px 0; }
dialog.record-detail header button { cursor:pointer; flex-shrink:0; }
@media(max-width:800px) {
 .record-grid { grid-template-columns:34px repeat(4,minmax(0,1fr)); grid-template-rows:54px repeat(var(--record-turns),44px); width:100%; }
 .record-actor { grid-row:1!important; position:static; align-items:center; font-size:11px; }
 .record-actor[data-agent="A"] { grid-column:2; }
 .record-actor[data-agent="B"] { grid-column:3; }
 .record-actor[data-agent="C"] { grid-column:4; }
 .record-actor[data-agent="D"] { grid-column:5; }
 .record-lane { display:contents; }
 .record-turn { grid-column:calc(var(--actor-index) + 1); grid-row:calc(var(--turn-index) + 1); width:100%; height:44px; }
 .record-axis { grid-column:1; grid-row:2 / -1; position:relative; }
 .record-axis span { left:50%!important; top:calc((var(--axis-turn) - .5) * 44px - 10px); }
 .record-run-scroll { overflow:visible; }
 dialog.record-detail { width:calc(100vw - 20px); max-height:88dvh; padding:16px; border-radius:12px; }
 dialog.record-detail > header { top:-16px; }
}

.record-zoom { margin-left:auto; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--muted); padding:8px 12px; font-size:12px!important; }
.record-grid.is-expanded { min-width:calc(86px + var(--record-turns) * 24px); }
.record-turn i { width:var(--record-dot,13px); height:var(--record-dot,13px); }
@media(max-width:800px) {
 .record-zoom { display:none; }
 .record-grid.is-expanded { min-width:0; }
 .record-turn i { width:13px; height:13px; }
}

.record-axis span:last-child { transform:translateX(-100%); }
.record-turn:focus-visible { outline:none; }
.record-turn:focus-visible i { outline:2px solid var(--agent-color,var(--accent)); outline-offset:2px; opacity:1; }
@media(max-width:800px) { .record-axis span:last-child { transform:translateX(-50%); } }

.record-map-section { margin:0 0 18px; padding:16px; background:color-mix(in srgb,var(--discovery) 6%,var(--bg)); border-radius:10px; }
.record-map-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin-bottom:10px; }
.record-map-heading h4 { margin:0; color:var(--text); font:550 22px/1.3 var(--font); }
.record-map-heading p { margin:0; color:var(--muted); font:12px/1.5 var(--font); }
@media(max-width:600px) { .record-map-section { padding:12px; } }