/* Hide native scrollbars only after JS has verified the replacement. */
html.msb-active, html.msb-active > body { scrollbar-width: none !important; }
html.msb-active::-webkit-scrollbar, html.msb-active > body::-webkit-scrollbar { width: 0 !important; }
html.msb-dragging, html.msb-dragging > body { user-select: none !important; cursor: grabbing !important; }
/* The theme's smooth behavior must not delay an actively dragged thumb. */
html.msb-instant, html.msb-instant > body { scroll-behavior: auto !important; }
#master-scrollbar-rail {
    all: initial; --msb-ready: 1; box-sizing: border-box;
    position: fixed; inset: auto var(--msb-right, 4px) var(--msb-bottom, 14px) auto;
    top: var(--msb-top, 14px); width: 24px; z-index: 9990;
    display: block; margin: 0; padding: 0; border: 0; border-radius: 16px;
    direction: ltr; writing-mode: horizontal-tb; cursor: pointer;
    opacity: 1; touch-action: none; user-select: none;
    transition: opacity .2s ease; -webkit-tap-highlight-color: transparent;
}
#master-scrollbar-rail[hidden] { display: none !important; }
#master-scrollbar-rail::before, #master-scrollbar-rail::after { display: none !important; }
#master-scrollbar-rail .msb-track,
#master-scrollbar-rail .msb-progress,
#master-scrollbar-rail .msb-thumb {
    all: initial; box-sizing: border-box; position: absolute; top: 0;
    right: 0; display: block; width: var(--msb-width, 8px);
    border-radius: 999px; pointer-events: none; transition: width .18s ease;
}
#master-scrollbar-rail .msb-track { height: 100%; background: var(--msb-track, rgba(17,24,39,.1)); }
#master-scrollbar-rail .msb-progress { background: var(--msb-color, #7957d5); opacity: .2; }
#master-scrollbar-rail .msb-thumb {
    min-height: 44px; background: var(--msb-thumb, #7957d5);
    box-shadow: 0 2px 8px rgba(0,0,0,.14), inset 0 0 0 1px rgba(255,255,255,.22);
    cursor: grab;
}
#master-scrollbar-rail:is(:hover, :focus-visible, .msb-dragging) :is(.msb-track, .msb-progress, .msb-thumb) { width: var(--msb-hover-width, 12px); }
#master-scrollbar-rail:focus-visible { outline: 2px solid var(--msb-color, #7957d5); outline-offset: 3px; background: rgba(255,255,255,.8); }
#master-scrollbar-rail.msb-idle { opacity: .4; }
#master-scrollbar-rail:is(:hover, :focus, .msb-dragging) { opacity: 1; }
#master-scrollbar-rail .msb-percent {
    all: initial; box-sizing: border-box; position: absolute; top: 0; right: 34px;
    display: block; border-radius: 8px; padding: 6px 9px; white-space: nowrap;
    font: 600 12px/1.4 system-ui, sans-serif; color: #fff; background: #202436;
    box-shadow: 0 4px 16px rgba(0,0,0,.15); opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
}
#master-scrollbar-rail:is(:hover, :focus-visible, .msb-dragging) .msb-percent { opacity: 1; }
#master-scrollbar-rail .msb-percent[hidden], #master-scrollbar-rail .msb-progress[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
    #master-scrollbar-rail, #master-scrollbar-rail * { transition: none !important; }
}
@media print, (forced-colors: active) {
    #master-scrollbar-rail { display: none !important; }
    html.msb-active, html.msb-active > body { scrollbar-width: auto !important; }
    html.msb-active::-webkit-scrollbar, html.msb-active > body::-webkit-scrollbar { width: auto !important; }
}