::-webkit-scrollbar {
    width: 9px;
    background: #2b004e;
}

::-webkit-scrollbar-track {
    background: #2b004e;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(0, 195, 255, 0.1), rgba(0, 126, 237, 0.5), rgba(0, 65, 199, 0.9));
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 10px #0084ff, inset 0 0 6px rgba(255, 255, 255, 0.3);
    animation: water-effect 2s infinite;
    position: relative;
    overflow: hidden;
}

::-webkit-scrollbar-thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
    border-radius: 10px 10px 0 0;
    z-index: 2;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(72, 215, 255, 0.3), rgba(32, 159, 255, 0.7), rgba(0, 102, 255, 1));
    box-shadow: 0 0 20px #0084ff, inset 0 0 10px rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transform: scaleX(1.1);
    transition: all 0.3s ease;
}

@keyframes water-effect {
    0% {
        background: linear-gradient(to bottom, rgba(0, 195, 255, 0.1), rgba(0, 126, 237, 0.5), rgba(0, 65, 199, 0.9));
        box-shadow: 0 0 10px #0084ff, inset 0 0 6px rgba(255, 255, 255, 0.3);
    }
    50% {
        background: linear-gradient(to bottom, rgba(72, 215, 255, 0.2), rgba(32, 159, 255, 0.6), rgba(0, 102, 255, 1));
        box-shadow: 0 0 15px #0084ff, inset 0 0 8px rgba(255, 255, 255, 0.4);
    }
    100% {
        background: linear-gradient(to bottom, rgba(0, 195, 255, 0.1), rgba(0, 126, 237, 0.5), rgba(0, 65, 199, 0.9));
        box-shadow: 0 0 10px #0084ff, inset 0 0 6px rgba(255, 255, 255, 0.3);
    }
}