/* =====================================================================
   M-OS SCROLLBAR SYSTEM
   ---------------------------------------------------------------------
   Global rule for the authenticated M-OS environment:
   - never expose the browser's default scrollbar styling;
   - every visible scrollbar inherits the active M-OS color/theme;
   - intentional hidden/gesture scrollers may stay hidden;
   - supports Chromium/WebKit + Firefox.
   ===================================================================== */

:root {
    --mos-scrollbar-size: 8px;
    --mos-scrollbar-track: rgba(var(--mws-primary-rgb), .055);
    --mos-scrollbar-track-hover: rgba(var(--mws-primary-rgb), .085);
    --mos-scrollbar-thumb: rgba(var(--mws-primary-rgb), .66);
    --mos-scrollbar-thumb-accent: rgba(var(--mws-accent-rgb), .54);
    --mos-scrollbar-thumb-hover: rgba(var(--mws-primary-rgb), .92);
    --mos-scrollbar-thumb-hover-accent: rgba(var(--mws-accent-rgb), .76);
}

/* Firefox. This includes the root/browser page scrollbar when a M-OS page
   genuinely needs document scrolling. More specific page rules loaded later
   may still opt out with scrollbar-width:none. */
html,
body,
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mos-scrollbar-thumb) var(--mos-scrollbar-track);
}

/* Chromium / Edge / Safari. */
*::-webkit-scrollbar {
    width: var(--mos-scrollbar-size);
    height: var(--mos-scrollbar-size);
}

*::-webkit-scrollbar-track {
    border-radius: 999px;
    background: var(--mos-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    min-width: 36px;
    min-height: 36px;
    border: 2px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--mos-scrollbar-thumb),
            var(--mos-scrollbar-thumb-accent)
        );
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            var(--mos-scrollbar-thumb-hover),
            var(--mos-scrollbar-thumb-hover-accent)
        );
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--mws-primary);
    background-clip: padding-box;
}

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

/* Reusable opt-out for gesture-driven horizontal strips and any future M-OS
   component that should scroll without a visible bar. */
.mos-scrollbar-hidden,
[data-mos-scrollbar="hidden"] {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.mos-scrollbar-hidden::-webkit-scrollbar,
[data-mos-scrollbar="hidden"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Touch users primarily swipe, so the visual bar can be a little slimmer
   while remaining fully themed when the browser renders it. */
@media (pointer: coarse) {
    :root {
        --mos-scrollbar-size: 6px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-ui-reduce-motion="off"]) {
        scroll-behavior: auto;
    }
}