/* ========================================
   Custom Audio Player (Cadeo)
   ======================================== */

.cadeo-audio-player {
    /* Two-row grid so the progress bar gets full horizontal space on the
       first row while the time labels and speed control sit underneath.
       Keeps the bar usable in narrow containers (event-modal sidebar) and
       scales to long durations without any element spilling off the edge. */
    display: grid;
    /* 2-column, 2-row layout sized for the 224px event-modal sidebar
       (184px usable after 20px padding each side):
         col 1 — play button (auto, 28px)
         col 2 — progress bar / times (minmax 0, 1fr)
       Row 1: play + progress bar
       Row 2: play + meta (current time / duration at opposite ends)
       The speed button is lifted out of this grid and absolutely
       positioned up in the section header next to "Recording". */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
        "play progress"
        "play meta";
    align-items: center;
    column-gap: 8px;
    row-gap: 4px;
    padding: 6px 8px;
    background: var(--surface-secondary);
    border-radius: var(--radius-lg);
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.cap-play-btn {
    grid-area: play;
    /* play button spans the progress + meta rows; align-self:start
       pins it to the top of that span so it sits level with the
       progress bar rather than floating between progress and times. */
    align-self: start;
}
.cap-progress-container {
    grid-area: progress;
    /* Belt-and-braces against content inside pushing the column wider. */
    min-width: 0;
    overflow: hidden;
}
/* Speed button floats up to sit on the same row as the "Recording"
   section label — anchored to #eventRecordingSection (position:relative).
   Pulled out of the audio player's grid so the player itself is just
   two compact rows (progress bar + times). */
#eventRecordingSection .cap-speed-btn {
    position: absolute;
    top: 0;
    right: 0;
}
/* Times share the meta cell which now spans the full progress-bar
   width — plenty of room for two H:MM:SS labels at opposite ends. */
.cap-time-current,
.cap-time-duration { grid-area: meta; }
.cap-time-current { justify-self: start; }
.cap-time-duration { justify-self: end; }

.cap-play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius-circle);
    background: var(--accent-fill);
    color: white;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-in-out), background var(--duration-fast) var(--ease-in-out), opacity var(--duration-fast) var(--ease-in-out);
    flex-shrink: 0;
}

.cap-play-btn:hover {
    transform: scale(1.05);
}

.cap-play-btn:active {
    transform: scale(0.95);
}

.cap-play-btn svg {
    width: 14px;
    height: 14px;
}

.cap-time {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cap-time-duration {
    color: var(--text-tertiary);
}

.cap-progress-container {
    flex: 1;
    position: relative;
    padding: var(--space-3) 0;
    cursor: pointer;
    /* Was min-width: 60px which pushed the whole row wider than the
       narrow event-modal sidebar and spilled the speed button off the
       right edge. 0 lets the progress bar absorb all remaining width
       reduction before any other element has to shrink or clip. */
    min-width: 0;
}

.cap-progress-bar {
    position: relative;
    height: 4px;
    background: var(--border-light);
    border-radius: var(--radius-sm);
    overflow: visible;
}

.cap-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-sm);
    transition: width var(--duration-fast) var(--ease-in-out);
}

.cap-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent-blue);
    border-radius: var(--radius-sm);
    z-index: 1;
}

.cap-progress-handle {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    background: var(--accent-blue);
    border: 2px solid white;
    border-radius: var(--radius-circle);
    transform: translate(-50%, -50%);
    z-index: 2;
    cursor: grab;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-in-out);
    box-shadow: var(--shadow-1);
}

.cap-progress-container:hover .cap-progress-handle {
    opacity: 1;
}

.cap-progress-handle:active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.1);
}

.cap-progress-hover-time {
    position: absolute;
    bottom: 100%;
    margin-bottom: 4px;
    padding: 3px 6px;
    background: var(--bg-elevated, #333);
    color: white;
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-sm);
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.cap-speed-btn {
    padding: 3px 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-in-out);
    min-width: 42px;
}

.cap-speed-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-medium, var(--border-light));
}

/* Legacy Native Audio Player (fallback) */
.recording-audio-player {
    width: 100%;
    height: 40px;
    border-radius: var(--radius-md);
}

.recording-meta {
    display: none;
}

.recording-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.recording-action-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.recording-action-btn:hover {
    background: var(--bg-hover);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.recording-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.recording-action-btn.is-processing svg {
    animation: spin 1s linear infinite;
}

/* Transcription Status */
.transcription-status {
    padding: 12px;
    background: var(--surface-secondary);
    border-radius: var(--radius-md);
}

.transcription-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.transcription-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent-blue);
    border-radius: var(--radius-circle);
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}