/* ============================================================
   滚动条 - Liquid Glass
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    /* 悬浮 */
    border: 2px solid transparent;
    border-radius: 5px;
    background-clip: padding-box;
    
    /* 玻璃本体 */
    background-color: rgba(120, 120, 120, 0.3);
    
    /* 玻璃质感：顶部高光 */
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.1) 30%,
        transparent 50%
    );
    
    /* 立体感 */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05),
        0 2px 4px rgba(0, 0, 0, 0.1);
    
    transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(130, 130, 130, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(0, 0, 0, 0.06),
        0 3px 6px rgba(0, 0, 0, 0.12);
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(110, 110, 110, 0.38);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

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

/* 深色模式 */
[data-user-color-scheme="dark"] ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.05) 30%,
        transparent 50%
    );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-user-color-scheme="dark"] ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.4);
}

[data-user-color-scheme="dark"] ::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 120, 120, 0.3) transparent;
}

[data-user-color-scheme="dark"] * {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}