/* Enhanced scrollbar styling with gradient and glow effects */

/* Basic scrollbar styling */
::-webkit-scrollbar {
    width: 14px !important;
    background-color: rgba(0, 0, 0, 0.03) !important;
    transition: width 0.3s ease !important;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    border: 3px solid transparent !important;
    background-clip: content-box !important;
    box-shadow: inset 0 0 6px rgba(83, 109, 254, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

::-webkit-scrollbar-track::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle, rgba(83, 109, 254, 0.1) 0%, transparent 70%);
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: track-pulse 3s infinite alternate;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--primary-color), #4361ee) !important;
    border-radius: 8px !important;
    border: 3px solid transparent !important;
    background-clip: content-box !important;
    min-height: 40px !important;
    box-shadow: 0 0 3px rgba(83, 109, 254, 0.5) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #536dfe, #3f51b5) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 10px rgba(83, 109, 254, 0.6) !important;
    border: 2px solid transparent !important;
}

/* Scrollbar glow when active */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #6a7dff, #5a67ff) !important;
    box-shadow: 0 0 12px rgba(83, 109, 254, 0.9) !important;
    border: 2px solid transparent !important;
}

/* Gradient overlay for thumb */
::-webkit-scrollbar-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    border-radius: 8px;
}

/* Animated glow effect */
@keyframes track-pulse {
    0% { opacity: 0.2; background-position: center top; }
    50% { opacity: 0.3; background-position: center center; }
    100% { opacity: 0.1; background-position: center bottom; }
}

/* Dark theme overrides */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background-color: rgba(20, 25, 45, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(83, 109, 254, 0.1) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #536dfe, #3f51b5) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #6a7dff, #536dfe) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #7b8bff, #6a7dff) !important;
    box-shadow: 0 0 12px rgba(83, 109, 254, 0.9) !important;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] * {
    scrollbar-color: #536dfe rgba(20, 25, 45, 0.1);
}