/* Custom scrollbar.
 *
 * Rests the native scrollbar to match the dark indigo theme: thin
 * rounded thumb in the accent color, transparent track, hover and
 * active states. Three vendor prefixes are needed:
 *   - ::-webkit-scrollbar-*    WebKit / Blink / Safari / Chromium <121
 *   - scrollbar-width / color  Firefox + Chromium >=121
 *
 * The widget's own scroll containers (.table-wrap, .bell-list, etc.)
 * also pick this up, so they stay consistent.
 *
 * Width is 10px which is the sweet spot: thick enough to hit on
 * touchpads, thin enough to feel minimal on desktop. */

html {
    /* Firefox + Chromium 121+ */
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
}

/* WebKit / Blink / Safari. Two sets because the spec changed the
 * selector for "corner" support; we cover both old and modern. */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
    /* The track is fully transparent so the page bg shows through,
     * but we add a tiny margin so the thumb doesn't touch the
     * viewport edge. */
    margin: 2px;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.15s ease;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bright);
    background-clip: padding-box;
    border: 2px solid transparent;
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active {
    background: var(--accent);
    background-clip: padding-box;
    border: 2px solid transparent;
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}

/* In-app scroll containers (sidebar, modals, table-wrap, bell
 * list, etc.) get the same look but with a subtle track so the
 * scroll affordance is visible inside dark cards where the page
 * bg would otherwise be invisible. */
.sidebar::-webkit-scrollbar,
.pm-modal-panel::-webkit-scrollbar,
.bell-menu::-webkit-scrollbar,
.bell-list::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.bell-foot::-webkit-scrollbar,
.tabs-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.sidebar::-webkit-scrollbar-track,
.pm-modal-panel::-webkit-scrollbar-track,
.bell-menu::-webkit-scrollbar-track,
.bell-list::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.bell-foot::-webkit-scrollbar-track,
.tabs-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 999px;
    margin: 4px;
}
.sidebar::-webkit-scrollbar-thumb,
.pm-modal-panel::-webkit-scrollbar-thumb,
.bell-menu::-webkit-scrollbar-thumb,
.bell-list::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.bell-foot::-webkit-scrollbar-thumb,
.tabs-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 999px;
    border: 0;
    background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover,
.pm-modal-panel::-webkit-scrollbar-thumb:hover,
.bell-menu::-webkit-scrollbar-thumb:hover,
.bell-list::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.bell-foot::-webkit-scrollbar-thumb:hover,
.tabs-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--accent-bright);
}

.sidebar,
.pm-modal-panel,
.bell-menu,
.bell-list,
.table-wrap,
.bell-foot,
.tabs-list,
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) rgba(255, 255, 255, 0.03);
}