/* =========================================================
   LIQUID GLASS CONTROLS — iOS 26 inputs & buttons
   Loaded LAST, after every other stylesheet. Re-skins every
   interactive control (buttons + text fields) with the
   signature iOS 26 Liquid Glass material:
     • capsule geometry
     • deep frosted blur + saturation boost
     • lensing rim (bright top edge, dark bottom refraction)
     • inner glass glow + floating shadow
     • springy jelly press + focus bloom
   Pure CSS overlay — no markup / JS changes required.
   ========================================================= */

:root {
    /* control-specific glass tokens */
    --lgc-blur: 24px;
    --lgc-sat: 190%;
    --lgc-fill:    rgba(255, 255, 255, 0.07);
    --lgc-fill-hi: rgba(255, 255, 255, 0.13);
    --lgc-fill-in: rgba(0, 0, 0, 0.22);          /* input well */
    --lgc-stroke:  rgba(255, 255, 255, 0.16);
    --lgc-rim-top: rgba(255, 255, 255, 0.35);    /* lens catch-light */
    --lgc-rim-bot: rgba(255, 255, 255, 0.07);
    --lgc-text: var(--text, #f4f4f6);
    --lgc-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* the layered "lens" shadow every glass control shares */
    --lgc-lens:
        inset 0 1px 0 var(--lgc-rim-top),
        inset 0 -1px 0 var(--lgc-rim-bot),
        inset 1.5px 0 1px -1px rgba(255, 255, 255, 0.16),
        inset -1.5px 0 1px -1px rgba(255, 255, 255, 0.16),
        inset 0 0 14px -6px rgba(255, 255, 255, 0.10),
        0 8px 24px -12px rgba(0, 0, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.25);
    --lgc-lens-input:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 2px 6px rgba(0, 0, 0, 0.30),
        inset 1px 0 1px -0.5px rgba(255, 255, 255, 0.07),
        inset -1px 0 1px -0.5px rgba(255, 255, 255, 0.07),
        0 1px 0 rgba(255, 255, 255, 0.06);
}

body:is([data-theme="white"], [data-theme="nord"]) {
    --lgc-fill:    rgba(255, 255, 255, 0.50);
    --lgc-fill-hi: rgba(255, 255, 255, 0.72);
    --lgc-fill-in: rgba(255, 255, 255, 0.55);
    --lgc-stroke:  rgba(255, 255, 255, 0.85);
    --lgc-rim-top: rgba(255, 255, 255, 0.95);
    --lgc-rim-bot: rgba(255, 255, 255, 0.40);
    --lgc-lens:
        inset 0 1px 0 var(--lgc-rim-top),
        inset 0 -1px 0 var(--lgc-rim-bot),
        inset 0 0 14px -6px rgba(255, 255, 255, 0.55),
        0 10px 26px -14px rgba(30, 30, 60, 0.35),
        0 1px 3px rgba(30, 30, 60, 0.12);
    --lgc-lens-input:
        inset 0 1px 2px rgba(30, 30, 60, 0.10),
        inset 0 2px 6px rgba(30, 30, 60, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.8);
}

/* =========================================================
   BUTTONS — every tappable control becomes a glass capsule
   ========================================================= */
.btn,
.icon-btn,
.link-btn,
.tiny-btn,
.acc-btn,
.fr-btn,
.apptop-btn,
.emoji-trigger,
.attach-trigger,
.close-btn,
.btn-secondary,
button.mini-input {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.02) 45%,
            rgba(255, 255, 255, 0.00) 60%,
            rgba(255, 255, 255, 0.05)
        ),
        var(--lgc-fill) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens) !important;
    color: var(--lgc-text);
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        border-color 0.22s ease;
}

.wb-tbtn,
.yt-tbtn,
.sb-tbtn {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    color: var(--lgc-text);
    transition: background 0.18s ease, border-color 0.18s ease, filter 0.18s ease !important;
}

.btn:hover,
.icon-btn:hover,
.link-btn:hover,
.tiny-btn:hover,
.acc-btn:hover,
.fr-btn:hover,
.apptop-btn:hover,
.close-btn:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.04) 45%,
            rgba(255, 255, 255, 0.01) 60%,
            rgba(255, 255, 255, 0.08)
        ),
        var(--lgc-fill-hi) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    transform: translateY(-1px);
}

.wb-tbtn:hover,
.yt-tbtn:hover,
.sb-tbtn:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    transform: none !important;
}

.emoji-trigger:hover,
.attach-trigger:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.04) 45%,
            rgba(255, 255, 255, 0.01) 60%,
            rgba(255, 255, 255, 0.08)
        ),
        var(--lgc-fill-hi) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
}

.btn:active,
.acc-btn:active,
.wb-tbtn:active,
.yt-tbtn:active,
.sb-tbtn:active,
.fr-btn:active { transform: scale(0.955); }

.icon-btn:active,
.link-btn:active,
.tiny-btn:active,
.apptop-btn:active,
.emoji-trigger:active,
.attach-trigger:active,
.close-btn:active { transform: scale(0.90); }

/* keyboard focus ring — soft accent bloom, iOS style */
.btn:focus-visible,
.icon-btn:focus-visible,
.link-btn:focus-visible,
.tiny-btn:focus-visible,
.acc-btn:focus-visible,
.wb-tbtn:focus-visible,
.yt-tbtn:focus-visible,
.sb-tbtn:focus-visible,
.fr-btn:focus-visible,
.dock-btn:focus-visible {
    outline: none !important;
    box-shadow:
        var(--lgc-lens),
        0 0 0 4px color-mix(in oklab, var(--accent) 32%, transparent) !important;
}

/* -------- PRIMARY — tinted liquid glass, not flat paint ------- */
.btn-primary,
.fr-btn-primary,
.yt-load {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.00) 62%,
            rgba(255, 255, 255, 0.10)
        ),
        color-mix(in oklab, var(--accent) 62%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 45%, white 32%) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12),
        inset 0 0 18px -6px rgba(255, 255, 255, 0.25),
        0 10px 30px -10px color-mix(in oklab, var(--accent) 72%, transparent),
        0 2px 6px -2px rgba(0, 0, 0, 0.35) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-primary:hover,
.fr-btn-primary:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.36),
            rgba(255, 255, 255, 0.10) 40%,
            rgba(255, 255, 255, 0.02) 62%,
            rgba(255, 255, 255, 0.14)
        ),
        color-mix(in oklab, var(--accent) 74%, transparent) !important;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 18px -6px rgba(255, 255, 255, 0.3),
        0 14px 36px -10px color-mix(in oklab, var(--accent) 85%, transparent),
        0 2px 6px -2px rgba(0, 0, 0, 0.35) !important;
}
.yt-load:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.36),
            rgba(255, 255, 255, 0.10) 40%,
            rgba(255, 255, 255, 0.02) 62%,
            rgba(255, 255, 255, 0.14)
        ),
        color-mix(in oklab, var(--accent) 74%, transparent) !important;
    transform: none !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 0 18px -6px rgba(255, 255, 255, 0.3),
        0 14px 36px -10px color-mix(in oklab, var(--accent) 85%, transparent),
        0 2px 6px -2px rgba(0, 0, 0, 0.35) !important;
}
.btn-primary:active,
.fr-btn-primary:active,
.yt-load:active { transform: scale(0.965); }

/* -------- GHOST / SECONDARY — thinner glass -------- */
.btn-ghost,
.btn-secondary,
.cv-nick-edit {
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.06), transparent 50%, rgba(255,255,255,0.03)),
        rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--lgc-stroke) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.20),
        0 4px 14px -8px rgba(0, 0, 0, 0.4) !important;
}

/* -------- DOCK BUTTONS — clear glass, lit when active -------- */
.dock-btn {
    border-radius: 999px !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        border-color 0.22s ease;
}
.dock-btn:hover {
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.12), transparent 55%, rgba(255,255,255,0.05)),
        var(--lgc-fill-hi) !important;
    border-color: var(--lgc-stroke);
    box-shadow: var(--lgc-lens);
}
.dock-btn.active, .dock-btn.on {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 0 16px -5px rgba(255, 255, 255, 0.25),
        0 6px 20px -6px color-mix(in oklab, var(--accent) 70%, transparent) !important;
}

/* -------- DISABLED — glass goes matte -------- */
.btn:disabled,
.icon-btn:disabled,
.dock-btn:disabled,
.acc-btn:disabled,
.fr-btn:disabled {
    opacity: 0.45;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    transform: none !important;
}

/* =========================================================
   TEXT FIELDS — recessed glass wells with focus bloom
   ========================================================= */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="email"],
textarea,
select,
.mini-input,
.acc-input,
.dm-input,
.fr-input,
.yt-input {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
    color: var(--lgc-text);
    caret-color: var(--accent);
    transition:
        border-color 0.22s ease,
        box-shadow 0.28s ease,
        background 0.22s ease;
}

/* multiline fields keep soft rounded-rect corners */
textarea,
textarea.mini-input {
    border-radius: 20px !important;
}

input::placeholder,
textarea::placeholder,
.mini-input::placeholder {
    color: color-mix(in oklab, var(--lgc-text) 45%, transparent);
}

/* focus — the well lights up from within + accent bloom */
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus,
.mini-input:focus,
.acc-input:focus,
.dm-input:focus,
.fr-input:focus,
.yt-input:focus {
    outline: none !important;
    border-color: color-mix(in oklab, var(--accent) 65%, white 20%) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent 40%),
        color-mix(in oklab, var(--accent) 7%, var(--lgc-fill-in)) !important;
    box-shadow:
        var(--lgc-lens-input),
        0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent),
        0 4px 22px -6px color-mix(in oklab, var(--accent) 35%, transparent) !important;
}

/* chat composer — one shared glass capsule; inner input stays naked */
.chat-input-wrap {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
    transition: border-color 0.22s ease, box-shadow 0.28s ease;
}
.chat-input-wrap:focus-within {
    border-color: color-mix(in oklab, var(--accent) 65%, white 20%) !important;
    box-shadow:
        var(--lgc-lens-input),
        0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent) !important;
}
.chat-input-wrap input,
.chat-input-wrap #chatInput {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.chat-input-wrap input:focus { box-shadow: none !important; }

/* welcome-card composer fields — the .cv-field CONTAINER is the
   visible control; the inner input must stay naked. style.css sets
   high-specificity !important rules on these, so we out-specify them. */
.cv-field {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
    padding: 10px 20px;
    transition: border-color 0.22s ease, box-shadow 0.28s ease, background 0.22s ease;
}
.cv-field:focus-within {
    border-color: color-mix(in oklab, var(--accent) 65%, white 20%) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.06), transparent 40%),
        color-mix(in oklab, var(--accent) 7%, var(--lgc-fill-in)) !important;
    box-shadow:
        var(--lgc-lens-input),
        0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent),
        0 4px 22px -6px color-mix(in oklab, var(--accent) 35%, transparent) !important;
}
.welcome-card .cv-field input[type="text"],
.welcome-card .cv-field input[type="password"],
.cv-field input[type="text"],
.cv-field input[type="password"],
.cv-field input {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.welcome-card .cv-field input[type="text"]:focus,
.welcome-card .cv-field input[type="password"]:focus,
.cv-field input:focus {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* nickname row on the welcome card — same recessed glass */
.cv-nick-row {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
}

/* selects keep the capsule but get a bit of breathing room */
select,
select.mini-input {
    padding-right: 30px;
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--lgc-text) 50%),
        linear-gradient(135deg, var(--lgc-text) 50%, transparent 50%) !important;
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px) !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    background-color: var(--lgc-fill-in) !important;
}
select option {
    background: #1b1c20;
    color: var(--lgc-text);
}
body:is([data-theme="white"], [data-theme="nord"]) select option {
    background: #fff;
    color: #16171a;
}

/* color picker — round glass chip */
input[type="color"],
.color-input {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    box-shadow: var(--lgc-lens);
    overflow: hidden;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* range sliders — glowing filled track + sleek accent thumb */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--accent, #6366f1) 0%,
        var(--accent, #6366f1) var(--range-percent, var(--value, 50%)),
        rgba(255, 255, 255, 0.12) var(--range-percent, var(--value, 50%)),
        rgba(255, 255, 255, 0.12) 100%
    );
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.08);
    outline: none;
    cursor: pointer;
    transition: filter 0.15s ease;
}

input[type="range"]:hover {
    filter: brightness(1.15);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--accent, #6366f1);
    box-shadow: 0 0 10px var(--accent-soft, rgba(99, 102, 241, 0.5)), 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: grab;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, background-color 0.15s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 14px var(--accent-soft, rgba(99, 102, 241, 0.7)), 0 3px 8px rgba(0, 0, 0, 0.5);
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.35);
    cursor: grabbing;
    background: #ffffff;
    box-shadow: 0 0 18px var(--accent, #6366f1), 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Firefox track & thumb */
input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent, #6366f1), var(--accent-hover, #818cf8));
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--accent, #6366f1);
    box-shadow: 0 0 10px var(--accent-soft, rgba(99, 102, 241, 0.5)), 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: grab;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.2);
    box-shadow: 0 0 14px var(--accent-soft, rgba(99, 102, 241, 0.7)), 0 3px 8px rgba(0, 0, 0, 0.5);
}

input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.35);
    cursor: grabbing;
    box-shadow: 0 0 18px var(--accent, #6366f1), 0 4px 12px rgba(0, 0, 0, 0.6);
}


/* checkboxes — frosted squircles that fill with accent */
input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 21px;
    height: 21px;
    border-radius: 7px;
    border: 1px solid var(--lgc-stroke);
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.10), transparent 50%),
        var(--lgc-fill-in);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease;
    vertical-align: middle;
}
input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 11px;
    transform: scale(0);
    transition: transform 0.3s var(--lgc-spring);
    clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 16%, 84% 4%, 40% 72%);
    background: #fff;
}
input[type="checkbox"]:checked {
    background:
        linear-gradient(to bottom, rgba(255,255,255,0.28), transparent 55%),
        color-mix(in oklab, var(--accent) 75%, transparent);
    border-color: color-mix(in oklab, var(--accent) 55%, white 25%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 4px 14px -4px color-mix(in oklab, var(--accent) 65%, transparent);
}
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 26%, transparent);
}

/* =========================================================
   REMAINING CONTROLS — full app coverage
   (tile / screen-share / watch-party / friends / DM /
    account chip / themes / misc buttons & fields)
   ========================================================= */

/* -------- small utility buttons — mini glass chips -------- */
.st-cbtn,
.tile-ctrl-btn,
.row-menu-btn,
.chat-row-menu .row-menu-btn,
.fr-x,
.fr-mini,
.dm-x,
.demo-btn {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.02) 45%,
            rgba(255, 255, 255, 0.00) 60%,
            rgba(255, 255, 255, 0.05)
        ),
        var(--lgc-fill) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens) !important;
    color: var(--lgc-text) !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        border-color 0.22s ease;
}
.st-cbtn:hover,
.tile-ctrl-btn:hover,
.row-menu-btn:hover,
.chat-row-menu .row-menu-btn:hover,
.fr-x:hover,
.fr-mini:hover,
.dm-x:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.04) 45%,
            rgba(255, 255, 255, 0.01) 60%,
            rgba(255, 255, 255, 0.08)
        ),
        var(--lgc-fill-hi) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    color: var(--lgc-text) !important;
    transform: translateY(-1px);
}
.st-cbtn:active,
.tile-ctrl-btn:active,
.row-menu-btn:active,
.chat-row-menu .row-menu-btn:active,
.fr-x:active,
.fr-mini:active,
.dm-x:active { transform: scale(0.90); }

/* danger row-menu button keeps its red hover, but stays glassy */
.chat-row-menu .row-menu-btn.danger:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent 55%),
        rgba(248, 113, 113, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #fca5a5 !important;
}

/* lit "active" state — accent glows through the glass */
.st-cbtn.active,
.tile-ctrl-btn.active {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.00) 62%,
            rgba(255, 255, 255, 0.10)
        ),
        color-mix(in oklab, var(--accent) 62%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 45%, white 32%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 16px -5px rgba(255, 255, 255, 0.25),
        0 6px 20px -6px color-mix(in oklab, var(--accent) 70%, transparent) !important;
}

/* -------- reaction picker — round glass on hover -------- */
.rp-btn {
    border-radius: 999px !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease;
}
.rp-btn:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%),
        color-mix(in oklab, var(--accent) 20%, var(--lgc-fill)) !important;
    box-shadow: var(--lgc-lens);
    transform: scale(1.18);
}
.rp-btn:active { transform: scale(0.95); }

/* -------- scroll-to-newest — floating accent glass pill -------- */
.scroll-down-btn {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.00) 62%,
            rgba(255, 255, 255, 0.10)
        ),
        color-mix(in oklab, var(--accent) 62%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 45%, white 32%) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 18px -6px rgba(255, 255, 255, 0.25),
        0 10px 30px -10px color-mix(in oklab, var(--accent) 72%, transparent),
        0 2px 6px -2px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.scroll-down-btn:active { transform: scale(0.955) !important; }
.scroll-down-btn .sd-count {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* -------- watch-party provider pills + catalog tabs -------- */
.wp-prov,
.wp-cat-tab {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent 50%, rgba(255, 255, 255, 0.04)),
        var(--lgc-fill) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 4px 14px -8px rgba(0, 0, 0, 0.4);
    color: var(--lgc-text) !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        border-color 0.22s ease,
        color 0.22s ease;
}
.wp-prov:hover,
.wp-cat-tab:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.13), transparent 50%, rgba(255, 255, 255, 0.06)),
        var(--lgc-fill-hi) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    transform: none !important;
}
.wp-prov:active,
.wp-cat-tab:active { transform: scale(0.95); }
.wp-prov.active,
.wp-cat-tab.active {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.28), transparent 55%, rgba(255, 255, 255, 0.10)),
        color-mix(in oklab, var(--accent) 62%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 45%, white 32%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 18px -6px color-mix(in oklab, var(--accent) 70%, transparent) !important;
}
/* uakino keeps its amber identity, rendered in glass */
.wp-prov-uakino {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent 50%, rgba(255, 255, 255, 0.04)),
        rgba(255, 196, 0, 0.16) !important;
    border-color: rgba(255, 196, 0, 0.40) !important;
}
.wp-prov-uakino:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.15), transparent 50%, rgba(255, 255, 255, 0.06)),
        rgba(255, 196, 0, 0.26) !important;
}
.wp-prov-uakino.active {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.35), transparent 55%, rgba(255, 255, 255, 0.12)),
        rgba(245, 166, 35, 0.80) !important;
    border-color: rgba(255, 220, 130, 0.75) !important;
    color: #1a1205 !important;
    text-shadow: none;
}

/* watch-party catalog search — recessed glass well */
.wp-cat-search input {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
    color: var(--lgc-text);
    caret-color: var(--accent);
    transition: border-color 0.22s ease, box-shadow 0.28s ease, background 0.22s ease;
}
.wp-cat-search input:focus {
    outline: none !important;
    border-color: color-mix(in oklab, var(--accent) 65%, white 20%) !important;
    box-shadow:
        var(--lgc-lens-input),
        0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent) !important;
}

/* -------- friends panel: tabs + primary actions -------- */
.fr-tab {
    border-radius: 999px !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        color 0.22s ease;
}
.fr-tab:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent 55%),
        var(--lgc-fill) !important;
    color: var(--lgc-text);
}
.fr-tab.active {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 55%, rgba(255, 255, 255, 0.06)),
        color-mix(in oklab, var(--accent) 26%, transparent) !important;
    border-color: color-mix(in oklab, var(--accent) 40%, transparent) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 4px 14px -8px color-mix(in oklab, var(--accent) 55%, transparent);
    color: #fff !important;
}
.fr-tab:active { transform: scale(0.96); }

/* join / accept — accent glass */
.fr-mini.fr-join,
.fr-mini.fr-ok,
.dm-send {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.00) 62%,
            rgba(255, 255, 255, 0.10)
        ),
        color-mix(in oklab, var(--accent) 62%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent) 45%, white 32%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 6px 18px -6px color-mix(in oklab, var(--accent) 65%, transparent) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.fr-mini.fr-join:hover,
.fr-mini.fr-ok:hover,
.dm-send:hover {
    filter: none !important;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.36),
            rgba(255, 255, 255, 0.10) 40%,
            rgba(255, 255, 255, 0.02) 62%,
            rgba(255, 255, 255, 0.14)
        ),
        color-mix(in oklab, var(--accent) 74%, transparent) !important;
    transform: translateY(-1px);
}
.dm-send {
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease;
}
.dm-send:active { transform: scale(0.90); }

/* decline / delete — red-tinted glass on hover */
.fr-mini.fr-no:hover,
.fr-mini.fr-del:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.10), transparent 55%),
        rgba(248, 113, 113, 0.22) !important;
    border-color: rgba(248, 113, 113, 0.55) !important;
    color: #fca5a5 !important;
}

/* -------- account chip — glass capsule -------- */
.acc-chip {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.09), transparent 50%, rgba(255, 255, 255, 0.05)),
        var(--lgc-fill) !important;
    -webkit-backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    backdrop-filter: blur(var(--lgc-blur)) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens) !important;
    transition:
        transform 0.4s var(--lgc-spring),
        background 0.22s ease,
        box-shadow 0.25s ease,
        border-color 0.22s ease;
}
.acc-chip:hover {
    background:
        linear-gradient(to bottom, rgba(255, 255, 255, 0.14), transparent 50%, rgba(255, 255, 255, 0.08)),
        var(--lgc-fill-hi) !important;
    border-color: rgba(255, 255, 255, 0.26) !important;
    transform: translateY(-1px);
}
.acc-chip:active { transform: scale(0.96); }
.acc-chip.is-auth {
    border-color: color-mix(in oklab, var(--accent) 55%, white 20%) !important;
    box-shadow:
        var(--lgc-lens),
        0 0 14px -4px color-mix(in oklab, var(--accent) 45%, transparent) !important;
}

/* -------- theme swatches — round glass gems -------- */
.theme-option {
    border-radius: 999px !important;
    border: 1px solid var(--lgc-stroke) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        0 3px 10px -4px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.4s var(--lgc-spring),
        border-color 0.22s ease,
        box-shadow 0.25s ease;
}
.theme-option:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px) scale(1.06);
}
.theme-option:active { transform: scale(0.92); }
.theme-option.active {
    border-color: color-mix(in oklab, var(--accent) 60%, white 25%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent),
        0 4px 12px -4px color-mix(in oklab, var(--accent) 55%, transparent);
}

/* -------- inline chat message editing — glass well -------- */
.chat-edit-input,
input.chat-edit-input,
textarea.chat-edit-input {
    border-radius: 14px !important;
    border: 1px solid var(--lgc-stroke) !important;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.10), transparent 40%),
        var(--lgc-fill-in) !important;
    -webkit-backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    backdrop-filter: blur(16px) saturate(var(--lgc-sat));
    box-shadow: var(--lgc-lens-input);
    color: var(--lgc-text);
    caret-color: var(--accent);
    transition: border-color 0.22s ease, box-shadow 0.28s ease;
}
.chat-edit-input:focus {
    outline: none !important;
    border-color: color-mix(in oklab, var(--accent) 65%, white 20%) !important;
    box-shadow:
        var(--lgc-lens-input),
        0 0 0 4px color-mix(in oklab, var(--accent) 24%, transparent) !important;
}

/* -------- about-page demo button — accent liquid glass -------- */
.demo-btn {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.28),
            rgba(255, 255, 255, 0.06) 40%,
            rgba(255, 255, 255, 0.00) 62%,
            rgba(255, 255, 255, 0.10)
        ),
        color-mix(in oklab, var(--accent, #4d8dff) 62%, transparent) !important;
    border: 1px solid color-mix(in oklab, var(--accent, #4d8dff) 45%, white 32%) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 0 18px -6px rgba(255, 255, 255, 0.25),
        0 10px 30px -10px color-mix(in oklab, var(--accent, #4d8dff) 72%, transparent),
        0 2px 6px -2px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.demo-btn:hover {
    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.36),
            rgba(255, 255, 255, 0.10) 40%,
            rgba(255, 255, 255, 0.02) 62%,
            rgba(255, 255, 255, 0.14)
        ),
        color-mix(in oklab, var(--accent, #4d8dff) 74%, transparent) !important;
    transform: translateY(-1px);
}
.demo-btn:active { transform: scale(0.965) !important; }

/* =========================================================
   FALLBACKS & ACCESSIBILITY
   ========================================================= */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .btn, .icon-btn, .link-btn, .tiny-btn, .acc-btn,
    .wb-tbtn, .yt-tbtn, .sb-tbtn, .fr-btn, .apptop-btn,
    .st-cbtn, .tile-ctrl-btn, .row-menu-btn, .fr-x, .fr-mini,
    .dm-x, .wp-prov, .wp-cat-tab, .fr-tab, .acc-chip, .demo-btn {
        background: color-mix(in oklab, var(--bg, #101114) 78%, white 8%) !important;
    }
    input[type="text"], input[type="password"], textarea, select,
    .mini-input, .acc-input, .dm-input, .fr-input, .chat-input-wrap,
    .wp-cat-search input, .chat-edit-input {
        background: color-mix(in oklab, var(--bg, #101114) 88%, black 8%) !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .btn, .icon-btn, .link-btn, .tiny-btn, .acc-btn, .dock-btn,
    .wb-tbtn, .yt-tbtn, .sb-tbtn, .fr-btn, .apptop-btn,
    .st-cbtn, .tile-ctrl-btn, .row-menu-btn, .fr-x, .fr-mini,
    .dm-x, .dm-send, .wp-prov, .wp-cat-tab, .fr-tab, .acc-chip,
    .scroll-down-btn, .demo-btn,
    input, textarea, select, .mini-input, .chat-input-wrap, .cv-nick-row {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .icon-btn, .link-btn, .tiny-btn, .acc-btn, .dock-btn,
    .wb-tbtn, .yt-tbtn, .sb-tbtn, .fr-btn, .apptop-btn,
    .st-cbtn, .tile-ctrl-btn, .row-menu-btn, .rp-btn, .fr-x, .fr-mini,
    .dm-x, .dm-send, .wp-prov, .wp-cat-tab, .fr-tab, .acc-chip,
    .theme-option, .scroll-down-btn, .demo-btn,
    input[type="checkbox"]::before,
    input[type="range"]::-webkit-slider-thumb {
        transition: none !important;
    }
}