/* site/css/replay-player.css */
.replay-player { border: 1px solid var(--border-color); border-radius: var(--radius); padding: var(--space-3); }
.replay-beats { min-height: 200px; display: flex; flex-direction: column; gap: var(--space-2); }
.replay-beat { padding: var(--space-2) var(--space-3); border-radius: var(--radius); max-width: 80%; }
.replay-beat--role-customer { background: var(--bg-secondary); align-self: flex-start; }
.replay-beat--role-agent { background: var(--accent); color: #fff; align-self: flex-end; }
.replay-beat--tool_call, .replay-beat--tool_result { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); align-self: center; }
.replay-beat--callout { border-left: 3px solid var(--accent); background: var(--bg-secondary); align-self: stretch; }
.replay-player--steps .replay-beats { flex-direction: row; overflow-x: auto; }
.replay-controls { margin-top: var(--space-3); display: flex; gap: var(--space-2); }
.replay-beat--role-operator { background: #3a3f4b; color: #fff; align-self: flex-start; }
.replay-beat--metric { display: flex; flex-direction: column; align-items: center; background: var(--bg-secondary); border: 1px solid var(--accent); }
.replay-metric-label { font-size: 0.8rem; color: var(--text-secondary); }
.replay-metric-value { font-size: 1.6rem; font-weight: 700; color: var(--accent); }