/* ========================================
   CROSS-BROWSER SCROLLBAR STYLES - FIXED
   ======================================== */

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #8B0000 #f5f5f5;
}

/* Chrome, Edge, Safari (WebKit browsers) */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    transition: width 0.35s ease, height 0.35s ease;
}

::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 10px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        #CD5C5C 0%,
        #A52A2A 40%,
        #8B0000 70%,
        #4A0000 100%
    );
    border: 2px solid #f5f5f5;
    min-height: 40px;
    transition: all 0.3s ease;
}

/* Hover effect on thumb */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #E97474 0%,
        #B22222 40%,
        #8B0000 70%,
        #5C0000 100%
    );
    border-width: 1px;
    box-shadow: 0 0 8px rgba(139, 0, 0, 0.4);
}

/* Active/Click effect on thumb */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        #B22222 0%,
        #8B0000 40%,
        #6B0000 70%,
        #3D0000 100%
    );
    border-width: 1px;
}

/* Scrollbar corner */
::-webkit-scrollbar-corner {
    background: #f5f5f5;
}

/* ========================================
   EXPAND ON HOVER - FIXED VERSION
   ======================================== */

/* Use JavaScript class or body hover for better support */
body:hover ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Horizontal scrollbar */
::-webkit-scrollbar:horizontal {
    height: 6px;
    transition: height 0.35s ease;
}

body:hover ::-webkit-scrollbar:horizontal {
    height: 10px;
}

::-webkit-scrollbar-thumb:horizontal {
    background: linear-gradient(
        90deg,
        #CD5C5C 0%,
        #A52A2A 40%,
        #8B0000 70%,
        #4A0000 100%
    );
}

::-webkit-scrollbar-thumb:horizontal:hover {
    background: linear-gradient(
        90deg,
        #E97474 0%,
        #B22222 40%,
        #8B0000 70%,
        #5C0000 100%
    );
}

/* ========================================
   FALLBACK & EXTRA SUPPORT
   ======================================== */

/* Internet Explorer & Legacy Edge */
body {
    -ms-overflow-style: scrollbar;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    html {
        scrollbar-color: #A52A2A #1a1a1a;
    }
    
    ::-webkit-scrollbar-track {
        background: #1a1a1a;
        box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1);
    }
    
    ::-webkit-scrollbar-thumb {
        border-color: #1a1a1a;
    }
    
    ::-webkit-scrollbar-corner {
        background: #1a1a1a;
    }
}

.scrollbar-ready ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-ready:hover ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}