body {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

.dark body,
body.dark {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2310b981' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM6 30V20h10V10h10V0h10v10h10v10h10v10H50v10H40v10H30v10H20v-10H10V30H6zM16 20v10h10V20H16zm10 10v10h10V30H26zm10-10v10h10V20H36zm10 10v10h10V30H46z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

*,
*::before,
*::after {
    transition-property: background-color, border-color;
    transition-duration: 300ms;
}

#sidebar::-webkit-scrollbar {
    width: 4px;
}
#sidebar::-webkit-scrollbar-track {
    background: transparent;
}
#sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}

@keyframes waveform {
    0%, 100% { height: 20%; }
    50% { height: 80%; }
}

.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.waveform-bar {
    animation: waveform 1.2s ease-in-out infinite;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}