.agent-rollout { margin: 1.5rem 0 2rem; }
.agent-rollout-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.agent-rollout-heading h3 { margin: 0 0 0.35rem; }
.agent-rollout-heading select { max-width: 15rem; padding: 0.35rem; border: 1px solid #c6d7d3; border-radius: 5px; background: #fff; color: #33454e; }
.agent-rollout-intro { margin: 0 0 0.55rem; font-size: 0.86rem; }
.agent-replay { overflow: hidden; border: 1px solid #dce6e4; border-radius: 9px; background: #fff; box-shadow: 0 2px 10px #172d3b12; }
.agent-episode-result { padding: 0.4rem 0.8rem; color: #33454e; background: #f4f9f6; font-size: 0.78rem; font-weight: 700; }
.agent-video-wrap { position: relative; display: flex; justify-content: center; background: #eef3f1; }
.agent-video-wrap video { display: block; width: auto; max-width: 100%; height: min(40vh, 340px); aspect-ratio: 3 / 2; background: #172d3b; pointer-events: none; }
.agent-video-note { position: absolute; top: 0.65rem; left: 0.65rem; max-width: calc(100% - 1.3rem); padding: 0.25rem 0.5rem; border-radius: 4px; background: #172d3bd9; color: #fff; font-size: 0.75rem; pointer-events: none; }
.agent-progress-wrap { padding: 0.55rem 0.8rem 0.35rem; }
.agent-progress { display: grid; gap: 1px; height: 8px; align-items: stretch; cursor: pointer; touch-action: manipulation; }
.agent-progress:focus-visible { outline: 2px solid #155799; outline-offset: 3px; }
.agent-progress-segment { min-width: 0; }
.agent-progress-segment:hover { outline: 1px solid #20343d; }
.agent-progress-segment.is-current { position: relative; z-index: 1; outline: 2px solid #20343d; transform: scaleY(1.6); }
.agent-progress-segment.model, .agent-progress-legend .model::before { background: #4f9fcd; }
.agent-progress-segment.tool, .agent-progress-legend .tool::before { background: #9b7ac4; }
.agent-progress-segment.robot, .agent-progress-legend .robot::before { background: #27a778; }
.agent-progress-segment.context, .agent-progress-legend .context::before { background: #ac9e6b; }
.agent-progress-legend { display: flex; gap: 0.8rem; margin-top: 0.38rem; color: #66747a; font-size: 0.68rem; }
.agent-progress-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
.agent-progress-legend span::before { content: ''; width: 0.48rem; height: 0.48rem; border-radius: 2px; }
.agent-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid #e3eae7; }
.agent-step-nav button { padding: 0.4rem 0.7rem; border: 1px solid #c8d8d2; border-radius: 5px; background: #f6faf8; color: #155799; font: inherit; font-size: 0.82rem; cursor: pointer; }
.agent-step-nav button:hover:not(:disabled), .agent-step-nav button:focus-visible { border-color: #159957; background: #edf7f1; }
.agent-step-nav button:disabled { opacity: 0.42; cursor: default; }
.agent-step-count { color: #33454e; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.agent-step-detail { min-height: 7rem; max-height: 27vh; overflow-y: auto; padding: 0.65rem 0.85rem; color: #33454e; font-size: 0.84rem; }
.agent-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; }
.agent-kind { display: inline-block; min-width: 4.1rem; padding: 0.14rem 0.4rem; border-radius: 4px; text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; }
.agent-kind.model { background: #e8f2f8; color: #155799; }
.agent-kind.tool { background: #f1edf8; color: #67499a; }
.agent-kind.robot { background: #e4f3ed; color: #157551; }
.agent-kind.context { background: #f2f1e9; color: #746f3d; }
.agent-detail-time { color: #66747a; font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.agent-step-detail h4 { margin: 0.3rem 0 0.2rem; color: #33454e; font-size: 1rem; }
.agent-step-detail .agent-usage { margin: 0.3rem 0; color: #526375; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.agent-step-detail p { margin: 0.4rem 0; }
.agent-step-detail .agent-intent strong { color: #33454e; }
.agent-muted { color: #6f7b80; }
.agent-controller { color: #526375; font-size: 0.8rem; }
.agent-step-detail details { margin: 0.55rem 0 0; }
.agent-step-detail details summary { color: #155799; cursor: pointer; }
.agent-step-detail details p { max-width: 70ch; }
.agent-command summary { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.35rem; }
.agent-command summary::before { content: '▸'; }
.agent-command[open] summary::before { content: '▾'; }
.agent-command-label, .agent-command-preview { grid-column: 2; }
.agent-command-preview { overflow: hidden; color: #33454e; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.agent-command[open] .agent-command-preview { display: none; }
.agent-step-detail pre { overflow-x: auto; margin: 0.5rem 0 0; padding: 0.65rem; border-radius: 5px; background: #f4f7f6; color: #263c43; font-size: 0.78rem; }
@media (max-width: 42rem) {
  .agent-rollout-heading { display: block; }
  .agent-rollout-heading select { margin: 0.2rem 0 0.6rem; }
  .agent-video-wrap video { height: min(32vh, 260px); }
  .agent-step-nav button { padding: 0.35rem 0.4rem; }
}