::-webkit-scrollbar {
    width: 12px;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0);
    border-radius: 6px;
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.9);
}

.show-scrollbar ::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.7);
}

html {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

html.show-scrollbar {
    scrollbar-color: rgba(128, 128, 128, 0.7) transparent;
}



let scrollTimeout;

function showScrollbar() {
    document.documentElement.classList.add('show-scrollbar');
    
    clearTimeout(scrollTimeout);
    scrollTimeout = setTimeout(() => {
        document.documentElement.classList.remove('show-scrollbar');
    }, 2000);
}

window.addEventListener('scroll', showScrollbar);
window.addEventListener('wheel', showScrollbar);
window.addEventListener('touchmove', showScrollbar);

// Изначально скрыт
document.documentElement.classList.remove('show-scrollbar');