/* Waveform container */
#waveform {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    background: #1e293b; /* dark theme bg */
    position: relative;
    overflow: hidden;
}

/* Played portion color */
.wave-played {
    background-color: #22d3ee !important; /* cyan for played */
}

/* Region selection highlight */
.wavesurfer-region {
    background-color: rgba(99, 102, 241, 0.25) !important;
    border-left: 3px solid #facc15; /* left handle */
    border-right: 3px solid #facc15; /* right handle */
    cursor: ew-resize;
}

/* Region drag handle circles (optional) */
.wavesurfer-region-handle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #facc15;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: ew-resize;
}

/* Playhead */
.wavesurfer-cursor {
    width: 3px !important;
    background-color: #f43f5e !important; /* red for visibility */
}

/* Optional: add hover effect on region edges */
.wavesurfer-region:hover {
    background-color: rgba(99, 102, 241, 0.35);
}
/* Waveform container */
#waveform {
    width: 100%;
    height: 160px;
    border-radius: 12px;
    background: #1e293b; /* dark bg */
    position: relative;
    overflow: hidden;
}

/* Full region styling */
.wavesurfer-region {
    background-color: rgba(99, 102, 241, 0.25) !important; /* semi-transparent highlight */
    border-left: 4px solid #facc15; /* left handle */
    border-right: 4px solid #facc15; /* right handle */
    cursor: ew-resize;
}

/* Playhead */
.wavesurfer-cursor {
    width: 3px !important;
    background-color: #f43f5e !important;
}
/* Waveform animated background bars */
#waveBg div {
    flex: 1;
    background: linear-gradient(to top, #ff3b3b, #ff6b6b, #ff8a8a); /* red gradient */
    opacity: 0.3;
    border-radius: 2px;
    animation: pulse 1s infinite ease-in-out;
}