/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #B19CD9 0%, #8B00FF 100%);
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #9400D3 0%, #FF1493 100%);
}

/* Dark mode scrollbar */
.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8B00FF 0%, #FF1493 100%);
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF1493 0%, #FF69B4 100%);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #B19CD9 transparent;
}

.dark * {
    scrollbar-color: #8B00FF transparent;
}

/* Apply custom scrollbar to specific containers */
#leftSidebar,
#rightSidebar,
.overflow-y-auto {
    /* Chrome/Safari/Edge */
    &::-webkit-scrollbar {
        width: 6px;
    }
    
    &::-webkit-scrollbar-track {
        background: transparent;
    }
    
    &::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #B19CD9 0%, #8B00FF 100%);
        border-radius: 20px;
    }
    
    &::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #9400D3 0%, #FF1493 100%);
    }
    
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #B19CD9 transparent;
}