.call-audio { padding: 12px 20px 15px; background: #faf8fd; border-block: 1px solid var(--comment-line); flex-shrink: 0; }
.call-audio .comment-audio-controls { display: grid; grid-template-columns: 42px minmax(0, 1fr) 72px; align-items: center; column-gap: 12px; row-gap: 0; margin: 0; padding: 0; background: none; }
.call-audio .comment-play { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; background: var(--comment-accent); color: white; border: 0; font-size: 21px; padding: 0; }
.call-audio .comment-play:hover, .call-audio .comment-play:focus-visible { background: #6034d6; color: white; }
.call-audio .comment-track { position: relative; flex: 1; min-width: 0; height: 44px; }
.call-audio .comment-track-bars { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 2px; overflow: hidden; }
.call-audio .comment-track-bars i { width: 2px; min-width: 1px; flex: 0 1 2px; border-radius: 2px; background: #d5c5f8; }
.call-audio .comment-track-bars i.is-played { background: var(--comment-accent); }
.call-audio .comment-track input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.call-audio .comment-track { border-radius: 6px; isolation: isolate; }
.call-audio .comment-track input { z-index: 1; }
.call-audio .comment-track-markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.call-audio .comment-marker { position: absolute; top: 0; transform: translateX(-50%); height: 100%; width: 24px; padding: 0; border: 0; background: transparent; pointer-events: auto; }
.call-audio .comment-marker::after { content: ''; display: block; width: 14px; height: 14px; margin: auto; background: white; border: 2px solid var(--comment-accent); border-radius: 50%; box-shadow: 0 0 0 3px var(--audio-surface); }
.call-audio .comment-marker.is-cluster::after { box-shadow: 3px 0 0 -1px var(--audio-surface), 5px 0 0 -1px var(--comment-accent); }
.call-audio .comment-speed { width: 72px; height: 28px; padding: 0 3px; flex-shrink: 0; border: 1px solid #e5dff0; border-radius: 6px; color: #485276; background: white; font-size: 11px; }
.call-audio .comment-audio-times { grid-column: 2; grid-row: 2; display: flex; justify-content: space-between; margin: 0; color: var(--comment-muted); font: 11px/1.6 ui-monospace, monospace; }
.call-audio .comment-track-hint { margin: 12px 0 0; color: var(--comment-muted); font-size: 11px; line-height: 1.6; }
.call-audio .comment-marker-choices { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; max-height: 110px; overflow-y: auto; }
.call-audio { --comment-accent: #7042e8; --comment-muted: #7c819a; --comment-line: #efedf6; --audio-surface: #faf8fd; min-width: 0; max-width: 100%; }
.call-audio audio, .call-audio [hidden] { display: none !important; }
.call-audio.call-audio--list, .call-audio.call-audio--detail { --audio-surface: #fff; width: 100%; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.call-audio--drawer { width: 100%; }
.call-audio .call-audio-extra { padding: 0; width: 30px; height: 34px; flex: 0 0 30px; display: inline-flex; justify-content: center; align-items: center; color: #7042e8; background: #f0eaff; border: 0; border-radius: 8px; }
.call-audio:not(.call-audio--drawer) .comment-audio-controls { grid-template-columns: 24px minmax(0, 1fr) 56px; column-gap: 8px; }
.call-audio.call-audio--detail .comment-audio-controls { grid-template-columns: 24px minmax(0, 1fr) 56px 24px; }
.call-audio:not(.call-audio--drawer) .comment-play { width: 24px; height: 24px; font-size: 16px; }
.call-audio:not(.call-audio--drawer) .comment-track { height: 24px; }
.call-audio:not(.call-audio--drawer) .comment-track-bars i { transform: scaleY(.5); }
.call-audio:not(.call-audio--drawer) .comment-audio-times { line-height: 12px; }
/* The app shell enlarges all selects below 992px; keep this compact control sized to its label. */
.call-audio:not(.call-audio--drawer) .comment-speed { width: 56px; height: 24px; font-size: 11px !important; }
.call-audio:not(.call-audio--drawer) .call-audio-extra { width: 24px; height: 24px; }
.call-audio .call-audio-error { font-size: 12px; margin: 8px 0 0; color: #b42318; overflow-wrap: anywhere; }
.call-audio--drawer.has-error { background: #fff6f5; }
.call-audio .comment-track:focus-within, .call-audio .comment-track :focus, .call-audio .comment-speed:focus { outline: none !important; box-shadow: none !important; }
.comments-keyboard-navigation .call-audio .comment-track:focus-within, .comments-keyboard-navigation .call-audio .comment-speed:focus { background-color: #eee7fb; }
.comments-keyboard-navigation .call-audio .comment-marker:focus::after { background-color: #e3d5ff; }
.call-audio .comment-marker-choices .btn:focus-visible, .call-audio .comment-play:focus-visible, .call-audio .call-audio-extra:focus-visible { outline: 2px solid #7042e8; outline-offset: 2px; }
@media (min-width: 768px) {
    .call-audio:not(.call-audio--drawer) .comment-play { min-width: 24px; min-height: 24px; }
    .call-audio:not(.call-audio--drawer) .comment-marker { min-width: 24px; min-height: 24px; }
    .call-audio:not(.call-audio--drawer) .comment-speed { min-width: 56px; min-height: 24px; }
    .call-audio:not(.call-audio--drawer) .call-audio-extra { min-width: 24px; min-height: 24px; }
}
@media (max-width: 767.98px) {
    .call-audio .comment-play, .call-audio .comment-speed, .call-audio .comment-marker, .call-audio .call-audio-extra, .call-audio .comment-marker-choices .btn { min-width: 44px; min-height: 44px; }
    .call-audio .comment-play { flex-basis: 44px; }
    .call-audio .call-audio-extra { flex-basis: 44px; }
    .call-audio .comment-audio-controls { grid-template-columns: 44px minmax(0, 1fr) 72px; column-gap: 8px; }
    .call-audio:not(.call-audio--drawer) .comment-audio-controls { grid-template-columns: 44px minmax(0, 1fr) 56px; }
    .call-audio.call-audio--detail .comment-audio-controls { grid-template-columns: 44px minmax(0, 1fr) 56px 44px; }
    .call-audio:not(.call-audio--drawer) .comment-track { height: 44px; }
    .call-audio .comment-speed { font-size: 12px; }
    .call-audio--drawer { padding-inline: 16px; }
}