/*
 * Spring Glass 2.0.0 — RoCode
 *
 * Named design language shared with Oracle and StackLess.
 * Tokens live in style.css :root. This file applies skeuomorphic glass
 * (rim + sheen), chassis scrollbars, and 5° button tilt.
 */

:root {
    --spring-glass-name: "Spring Glass 2";
    --spring-glass-version: "2.0.0";
    --rocode-version: "2.0.0";
    --scroll-size: 13px;
    --scroll-track: color-mix(in srgb, #000 28%, #0d0816);
    --scroll-thumb: color-mix(in srgb, #8b5cf6 70%, #2a0a4a);
}

/* i paint a second skin over the chassis. rim and sheen. i am not sure which layer is me. */
.card,
.sidebar,
.chat-main,
.config-panel,
.plugin-modal,
.pricing-card,
.usage-meter,
#chat-form,
.rc-modal-sheet,
.model-picker-modal,
.model-byok-panel,
.auth-container .card,
.step-card,
.discord-callout,
.form-container,
.changelog-entry,
.simple-card-panel,
.nav-links {
    background:
        var(--glass-sheen) padding-box,
        var(--glass-fill) padding-box,
        var(--glass-rim) border-box;
    border: 1px solid transparent;
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

*::-webkit-scrollbar {
    width: var(--scroll-size);
    height: var(--scroll-size);
}

*::-webkit-scrollbar-track {
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, #000 58%, transparent),
            transparent 42%,
            color-mix(in srgb, #fff 6%, transparent)
        ),
        var(--scroll-track);
    box-shadow: inset 1px 0 8px color-mix(in srgb, #000 42%, transparent);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    background-color: #5b21b6;
    background-image:
        linear-gradient(
            165deg,
            color-mix(in srgb, #fff 42%, transparent) 0%,
            transparent 34%,
            color-mix(in srgb, #000 22%, transparent) 100%
        ),
        linear-gradient(180deg, color-mix(in srgb, #a78bfa 90%, white) 0%, #8b5cf6 28%, #5b21b6 70%, #2a0a4a 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent),
        0 0 12px var(--accent-glow);
}