body {
    font-family: 'Inter', sans-serif;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* Style for the concertina effect */
.details-view {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    overflow: hidden;
}
.details-view.open {
    max-height: 1000px; /* Adjust as needed */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Waveform styling */
.waveform {
    display: flex;
    align-items: center;
    height: 60px;
    width: 100%;
    background: #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.waveform-bar {
    background-color: #4f46e5;
    width: 3px;
    margin-right: 2px;
    display: inline-block;
    animation: waveform-pulse 1.5s infinite ease-in-out;
    animation-play-state: paused;
}
.waveform-bar:nth-child(odd) {
     animation-delay: 0.2s;
}
.waveform-bar:nth-child(even) {
    animation-delay: 0.5s;
}
.playing .waveform-bar {
    animation-play-state: running;
}

@keyframes waveform-pulse {
    0% { height: 10%; }
    50% { height: 100%; }
    100% { height: 10%; }
}

.filter-btn.active {
    background-color: #4f46e5;
    color: white;
}