.agent-recording { grid-column: 1 / -1; min-width: 0; border-top: var(--stroke) solid var(--border); padding-top: var(--space-5); }
.agent-recording-content { max-width: 48rem; }
.agent-recording-heading { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; color: var(--text); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.agent-recording-duration { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
.agent-recording audio { display: block; width: 100%; min-width: 0; height: 3.375rem; border-radius: var(--radius-pill); }
.agent-recording .agent-recording-caption { font-size: max(.8125rem, var(--text-xs)); color: var(--text-muted); margin: var(--space-3) 0; }
.agent-recording .agent-recording-error { font-size: var(--text-sm); color: var(--text); margin-top: var(--space-3); }
.agent-recording summary { cursor: pointer; font-size: var(--text-sm); color: var(--text); min-height: var(--control-sm); align-content: center; }
.agent-recording summary:focus-visible, .agent-recording audio:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.agent-recording-transcript { margin-top: var(--space-2); }
.agent-recording-transcript > summary { width: fit-content; }
.agent-recording-transcript ol { list-style: none; padding: 0; margin-top: var(--space-4); display: grid; gap: var(--space-4); }
.recording-turn { padding-left: var(--space-4); border-left: var(--stroke) solid var(--border); }
.recording-turn--agent { border-color: var(--accent); }
.recording-turn > span { font-size: max(.8125rem, var(--text-xs)); color: var(--text); }
.recording-turn p { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--text); }
.agent-recording-result { margin-block: var(--space-5); padding: var(--space-4); background: var(--surface); border: var(--stroke) solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.agent-recording-result strong { color: var(--text); }
.agent-recording-result p { margin-top: var(--space-2); font-size: var(--text-sm); }
.agent-recording--compact { margin-bottom: var(--space-4); padding-top: 0; }
.agent-recording--compact > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); list-style: none; }
.agent-recording--compact > summary::-webkit-details-marker { display: none; }
.agent-recording--compact > summary > span { color: var(--accent); }
.agent-recording--compact[open] > summary > span { transform: rotate(90deg); }
.agent-recording--compact .agent-recording-content { padding-bottom: var(--space-3); }