/* Resolve colors on each scrolling element so live theme changes follow Converse. */
* {
    --messenger-scroll-track: var(--background-color, #efefef);
    --messenger-scroll-thumb: color-mix(in srgb, var(--foreground-color, #666) 55%, var(--background-color, #efefef));
    --messenger-scroll-hover: color-mix(in srgb, var(--foreground-color, #666) 75%, var(--background-color, #efefef));
    scrollbar-color: var(--messenger-scroll-thumb) var(--messenger-scroll-track);
    scrollbar-width: thin;
}

/* These project dialogs have their own dark surfaces outside Converse's theme root. */
:is(.messenger-search-dialog, .ms-forward),
:is(.messenger-search-dialog, .ms-forward) * {
    --messenger-scroll-track: #282a36;
    --messenger-scroll-thumb: #92939d;
    --messenger-scroll-hover: #c4c4cb;
}

@supports selector(::-webkit-scrollbar) {
    /* Chromium's standard scrollbar-color overrides its custom scrollbar parts. */
    * { scrollbar-color: auto; scrollbar-width: auto; }
    *::-webkit-scrollbar { width: 12px; height: 12px; }
    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-corner { background: var(--messenger-scroll-track); }
    *::-webkit-scrollbar-thumb {
        background: var(--messenger-scroll-thumb);
        border: 3px solid var(--messenger-scroll-track);
        border-radius: 9px;
        min-height: 28px;
        min-width: 28px;
    }
    *::-webkit-scrollbar-thumb:hover { background: var(--messenger-scroll-hover); }
    *::-webkit-scrollbar-thumb:active { background: var(--foreground-color, #92939d); }
    *::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
}

@media (forced-colors: active) {
    * { scrollbar-color: auto !important; scrollbar-width: auto !important; }
    *::-webkit-scrollbar-track,
    *::-webkit-scrollbar-corner { background: Canvas !important; }
    *::-webkit-scrollbar-thumb { background: ButtonText !important; border-color: Canvas !important; }
}