/* Custom page scrollbar for the whole site (templates/base.html and apps/base.html).
   The native one is hidden in each page's <head>; static/js/page-scrollbar.js draws this one. */
.page-scrollbar {
    position: fixed;
    top: 0;
    right: 0;
    width: 14px;
    height: 100%;
    z-index: 10001;
    pointer-events: none;
}
.page-scrollbar-thumb {
    position: absolute;
    top: 0;
    right: 3px;
    width: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: auto;
    cursor: grab;
    transition: opacity 0.4s ease, width 0.2s ease;
}
body.dark .page-scrollbar-thumb, html.dark .page-scrollbar-thumb { background: rgba(255, 255, 255, 0.35); }
.page-scrollbar.active .page-scrollbar-thumb,
.page-scrollbar-thumb:hover,
.page-scrollbar-thumb.dragging { opacity: 1; }
.page-scrollbar-thumb:hover,
.page-scrollbar-thumb.dragging { width: 9px; }
.page-scrollbar-thumb.dragging { cursor: grabbing; }