/* Shared by the app sidebar and public inquiry message field. */
:root {
    --scrollbar-track: rgba(255, 255, 255, 0.025);
    --scrollbar-thumb: rgba(148, 163, 184, 0.46);
    --scrollbar-thumb-hover: rgba(94, 234, 212, 0.66);
}

:root[data-theme="dark"] {
    --scrollbar-track: rgba(255, 255, 255, 0.035);
    --scrollbar-thumb: rgba(148, 163, 184, 0.58);
    --scrollbar-thumb-hover: rgba(45, 212, 191, 0.78);
}

.ui-scrollbar {
    color-scheme: light;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

:root[data-theme="dark"] .ui-scrollbar {
    color-scheme: dark;
}

/* Chromium otherwise lets standard properties override the button-free skin. */
@supports selector(::-webkit-scrollbar) {
    .ui-scrollbar {
        scrollbar-color: auto;
        scrollbar-width: auto;
    }
}

.ui-scrollbar::-webkit-scrollbar {
    width: 0.48rem;
}

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

.ui-scrollbar::-webkit-scrollbar-thumb {
    min-height: 2.8rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--scrollbar-thumb);
    background-clip: padding-box;
}

.ui-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

.ui-scrollbar::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.ui-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
}