/* ==========================================================================
   Liquidform — Liquid Glass theme
   Loaded LAST on every page so it layers over each page's own styles.
   1. Tokens   2. Ambient background   3. Glass surfaces   4. Controls
   5. Hover glint animation            6. Misc polish
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
    --lg-blur: 24px;
    --lg-saturate: 190%;
    --lg-fill: linear-gradient(135deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.05) 42%,
        rgba(255, 255, 255, 0.04) 60%,
        rgba(255, 255, 255, 0.11) 100%);
    --lg-fill-strong: linear-gradient(135deg,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.07) 60%,
        rgba(255, 255, 255, 0.16) 100%);
    --lg-edge:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10),
        inset 1px 0 0 rgba(255, 255, 255, 0.18),
        inset -1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 0 22px rgba(255, 255, 255, 0.05);
    --lg-drop: 0 10px 34px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.25);
    --lg-border: 1px solid rgba(255, 255, 255, 0.16);

    /* Re-point each page's own variables at glass values */
    --panel-bg: rgba(255, 255, 255, 0.07);
    --panel-hover: rgba(255, 255, 255, 0.13);
    --panel: rgba(255, 255, 255, 0.07);
    --surface: rgba(255, 255, 255, 0.08);
    --surface-hover: rgba(255, 255, 255, 0.15);
    --surface-active: rgba(255, 255, 255, 0.2);
    --border: rgba(255, 255, 255, 0.14);
    --border-light: rgba(255, 255, 255, 0.16);
    --border-hover: rgba(255, 255, 255, 0.32);
    --shadow-soft: 0 10px 34px rgba(0, 0, 0, 0.38);
    --accent-dim: rgba(255, 255, 255, 0.14);

    /* One palette for the whole site */
    --bg-gradient-start: #141417;
    --bg-gradient-end: #09090b;
    --bg-start: #141417;
    --bg-end: #09090b;
    --bg: #09090b;
    --text: #fafafa;
    --text-soft: #a1a1aa;
    --text-muted: #a1a1aa;
    --accent: #a5b4fc;
    --accent-ink: #0b0b18;
    --accent-glow: rgba(165, 180, 252, 0.14);
    --pluto: #a5b4fc;
    --discord: #a5b4fc;
    --danger: #f87171;
    --error: #f87171;
    --success: #6ee7b7;
}

/* 2. Ambient background (gives the glass something to refract) ------------- */
html {
    background: #07070c;
}

body {
    background: transparent;
}

#app {
    background: transparent;
}

html::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(38vmax 38vmax at 14% 18%, rgba(99, 102, 241, 0.50), transparent 62%),
        radial-gradient(34vmax 34vmax at 86% 14%, rgba(236, 72, 153, 0.34), transparent 62%),
        radial-gradient(44vmax 44vmax at 72% 92%, rgba(20, 184, 166, 0.38), transparent 62%),
        radial-gradient(30vmax 30vmax at 8% 88%, rgba(245, 158, 11, 0.24), transparent 62%);
    filter: blur(28px);
    animation: lg-drift 32s ease-in-out infinite alternate;
}

@keyframes lg-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(2%, -3%, 0) scale(1.06); }
    100% { transform: translate3d(-3%, 2%, 0) scale(1.02); }
}

/* 3. Glass surfaces ---------------------------------------------------------- */
.search-card,
.modal-content,
.init-box,
.settings-card,
.card,
.gate-card,
.vm-card,
.link-display,
.player,
.sidebar,
.message-content,
.msg .bubble,
.shortcut-icon,
.tab,
.nav,
footer {
    background: var(--lg-fill);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    border: var(--lg-border);
    box-shadow: var(--lg-edge), var(--lg-drop);
}

.modal-content,
.init-box,
.settings-card,
.gate-card,
.card {
    background: var(--lg-fill-strong);
    -webkit-backdrop-filter: blur(34px) saturate(200%);
    backdrop-filter: blur(34px) saturate(200%);
}

/* Bars / strips: keep the edge highlight on one side only */
.nav {
    border-radius: 0;
    border-width: 0 0 1px 0;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25);
}

footer {
    border-width: 1px 0 0 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.sidebar {
    border-width: 0 1px 0 0;
}

.tab {
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.12), inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.tab:hover {
    background: var(--lg-fill-strong);
}

.tab.active {
    background: var(--lg-fill-strong);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Settings pieces */
.settings-sidebar {
    background: rgba(255, 255, 255, 0.04);
    border-right-color: rgba(255, 255, 255, 0.1);
}

.settings-header,
.settings-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

.wisp-option,
.cloak-opt,
.bm-item {
    background: var(--lg-fill);
    border: var(--lg-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.wisp-option:hover,
.cloak-opt:hover,
.bm-item:hover {
    background: var(--lg-fill-strong);
    border-color: rgba(255, 255, 255, 0.32);
}

.wisp-option.active,
.cloak-opt.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.55);
}

.sidebar-item.active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-right-color: rgba(255, 255, 255, 0.7);
}

/* Overlays: frosted, lighter so the glass underneath still reads */
.modal-overlay,
.wisp-settings-modal,
#init-overlay,
.overlay,
.player-overlay,
.iframe-overlay,
.gate {
    background: rgba(8, 8, 14, 0.45);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
}

.message-container,
.loader {
    background: rgba(8, 8, 14, 0.4);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}

.iframe-container,
.iframe-loading {
    background: transparent;
}

/* 4. Controls ------------------------------------------------------------------ */
input.bar,
.search-box select,
.composer input,
.gate-card input,
.custom-input-group input,
select.settings-select {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

input.bar,
.composer input,
.gate-card input,
.custom-input-group input,
select.settings-select {
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

input.bar:focus,
.composer input:focus,
.gate-card input:focus,
.custom-input-group input:focus {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.12), 0 0 24px rgba(180, 190, 255, 0.25);
}

.search-box select {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* Glass buttons (neutral ones) */
.btn,
.btn-ghost,
.tubi-btn.secondary,
.btn.secondary,
.vm-launch,
.home-button,
.new-tab,
.new-chat-btn,
#skip-btn,
.settings-select,
.welcome-video-sound {
    background: var(--lg-fill);
    border: var(--lg-border);
    box-shadow: var(--lg-edge), 0 4px 14px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    color: var(--text, #fff);
}

.btn:hover,
.btn-ghost:hover:not(:disabled),
.tubi-btn.secondary:hover,
.btn.secondary:hover,
.vm-launch:hover,
.home-button:hover,
.new-tab:hover,
.new-chat-btn:hover,
#skip-btn:hover {
    background: var(--lg-fill-strong);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.vm-card:hover .vm-launch {
    background: var(--lg-fill-strong);
}

/* Accent buttons: tinted glass instead of flat fills */
.btn-primary,
.tubi-btn:not(.secondary),
.btn:not(.secondary):not(.btn-ghost):not(.btn-primary),
.custom-input-group button,
.send-btn {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -10px 18px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Nav icon buttons stay minimal but get a glass puck on hover */
.nav button:hover,
#home-btn-nav:hover,
#bookmark-btn:hover,
.icon-btn:hover,
.close-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Home tiles */
.shortcut-icon {
    border-radius: 22px;
}

.shortcut:hover .shortcut-icon {
    background: var(--lg-fill-strong);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: var(--lg-edge), 0 14px 30px rgba(0, 0, 0, 0.42);
}

.toggle-switch.active {
    background: rgba(255, 255, 255, 0.55);
}

/* 5. Hover glint --------------------------------------------------------------- */
/* :where() keeps specificity at 0 so it never overrides a page's own positioning
   (e.g. the absolutely-positioned bookmark / home buttons keep position:absolute). */
:where(button,
       .btn,
       .tubi-btn,
       .vm-launch,
       .vm-card,
       .home-button,
       .shortcut-icon,
       .tab,
       .new-tab,
       .sidebar-item,
       .wisp-option,
       .cloak-opt,
       .bm-item,
       .player-actions button,
       .iframe-controls button) {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

:where(button,
       .btn,
       .tubi-btn,
       .vm-launch,
       .vm-card,
       .home-button,
       .shortcut-icon,
       .tab,
       .new-tab,
       .sidebar-item,
       .wisp-option,
       .cloak-opt,
       .bm-item)::after {
    content: "";
    position: absolute;
    top: -60%;
    bottom: -60%;
    left: -70%;
    width: 38%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.10) 30%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.10) 70%,
        rgba(255, 255, 255, 0) 100%);
    transform: translateX(0) skewX(-22deg);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: soft-light;
}

button:hover::after,
.btn:hover::after,
.tubi-btn:hover::after,
.vm-launch:hover::after,
.vm-card:hover::after,
.home-button:hover::after,
.tab:hover::after,
.new-tab:hover::after,
.sidebar-item:hover::after,
.wisp-option:hover::after,
.cloak-opt:hover::after,
.bm-item:hover::after,
.shortcut:hover .shortcut-icon::after {
    animation: lg-glint 0.85s cubic-bezier(0.4, 0, 0.2, 1) 1;
}

button:disabled:hover::after {
    animation: none;
}

@keyframes lg-glint {
    0%   { transform: translateX(0) skewX(-22deg);     opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { transform: translateX(520%) skewX(-22deg);  opacity: 0; }
}

/* Soft-light can wash out on very dark fills; add a normal-blend sheen too */
button:hover::before,
.btn:hover::before,
.tubi-btn:hover::before,
.home-button:hover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
    z-index: 4;
}

/* The tiny remove badge and loading bars shouldn't glint or clip */
.shortcut-remove::after,
.shortcut-remove::before {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    html::before { animation: none; }
    button:hover::after,
    .btn:hover::after,
    .tubi-btn:hover::after,
    .vm-launch:hover::after,
    .vm-card:hover::after,
    .home-button:hover::after,
    .tab:hover::after,
    .new-tab:hover::after,
    .sidebar-item:hover::after,
    .wisp-option:hover::after,
    .cloak-opt:hover::after,
    .bm-item:hover::after,
    .shortcut:hover .shortcut-icon::after {
        animation: none;
    }
}

/* 6. Polish -------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.32); background-clip: padding-box; }

::selection { background: rgba(160, 175, 255, 0.35); }

/* Browsers without backdrop-filter: fall back to a more opaque tint */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .search-card, .modal-content, .init-box, .settings-card, .card, .gate-card,
    .vm-card, .player, .sidebar, .tab, .nav, footer, .shortcut-icon {
        background: rgba(40, 42, 58, 0.85);
    }
}


/* 7. Custom dropdowns ---------------------------------------------------------- */
.cs-wrap { position: relative; display: inline-block; }
.cs-native { position: absolute !important; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.cs-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
    min-width: 120px; padding: 9px 14px;
    font: 500 0.9rem/1.2 'Inter', system-ui, sans-serif; color: var(--text);
    background: var(--lg-fill); border: var(--lg-border); border-radius: 14px;
    box-shadow: var(--lg-edge), 0 4px 14px rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%);
    cursor: pointer; transition: border-color .2s ease, background .2s ease;
}
.cs-btn:hover, .cs-btn.open { background: var(--lg-fill-strong); border-color: rgba(255, 255, 255, 0.4); }
.cs-btn:focus-visible { outline: none; box-shadow: var(--lg-edge), 0 0 0 3px var(--accent-glow); }
.cs-caret { font-size: 0.65rem; color: var(--text-soft); transition: transform .2s ease; }
.cs-btn.open .cs-caret { transform: rotate(180deg); }
.cs-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-menu {
    position: fixed; z-index: 2147483000; padding: 6px; overflow-y: auto;
    background: linear-gradient(135deg, rgba(40, 42, 62, 0.92), rgba(18, 18, 30, 0.94));
    border: var(--lg-border); border-radius: 16px;
    box-shadow: var(--lg-edge), 0 18px 48px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%);
    animation: cs-pop .14s ease-out; font-family: 'Inter', system-ui, sans-serif;
}
@keyframes cs-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.cs-item {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 9px 12px; border-radius: 10px; color: var(--text); font-size: 0.9rem; cursor: pointer; white-space: nowrap;
}
.cs-item i { font-size: 0.7rem; color: var(--accent); opacity: 0; }
.cs-item.selected i { opacity: 1; }
.cs-item.active { background: rgba(255, 255, 255, 0.12); }
.cs-item.selected { color: var(--accent); }
.search-box .cs-btn { min-width: 0; border-radius: 24px; padding: 8px 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .cs-menu { animation: none; } }