/* Final optical finish. The document wallpaper, layout, visibility and text
   layers remain owned by the application. Load after all page styles. */
html.liquid-glass {
    --lg-surface: rgba(255, 255, 255, .06);
    --lg-soft: rgba(255, 255, 255, .045);
    --lg-reflection: linear-gradient(128deg, rgba(255, 255, 255, .105), transparent 42%, rgba(255, 255, 255, .025));
    --lg-border: rgba(255, 255, 255, .45);
    --lg-highlight: inset 0 0 0 1px rgba(255, 255, 255, .23);
    --lg-shadow: 0 0 20px -7px rgba(46, 68, 92, .20), var(--lg-highlight);
    --lg-floating-shadow: 0 0 28px -8px rgba(46, 68, 92, .22), var(--lg-highlight);
    --lg-selected: linear-gradient(150deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .1) 58%, rgba(205, 225, 246, .15));
    --lg-optical-tint: rgba(248, 252, 255, .1);
    --lg-navigation-surface: linear-gradient(145deg, rgba(255, 255, 255, .16), transparent 48%, rgba(255, 255, 255, .025)), rgba(248, 252, 255, .13);
}

html.liquid-glass[data-theme="dark"] {
    --lg-surface: rgba(20, 33, 50, .1);
    --lg-soft: rgba(17, 29, 43, .075);
    --lg-reflection: linear-gradient(128deg, rgba(206, 226, 250, .035), transparent 42%, rgba(179, 205, 238, .012));
    --lg-border: rgba(212, 231, 254, .12);
    --lg-highlight: inset 0 0 0 1px rgba(222, 239, 255, .05);
    --lg-shadow: 0 0 20px -7px rgba(0, 0, 0, .36), var(--lg-highlight);
    --lg-floating-shadow: 0 0 28px -8px rgba(0, 0, 0, .42), var(--lg-highlight);
    --lg-selected: linear-gradient(150deg, rgba(208, 228, 255, .13), rgba(147, 186, 230, .055) 58%, rgba(95, 148, 205, .1));
    --lg-optical-tint: rgba(15, 27, 43, .14);
    --lg-navigation-surface: linear-gradient(145deg, rgba(206, 229, 255, .045), transparent 48%, rgba(179, 211, 247, .012)), rgba(16, 29, 45, .23);
}

/* Broad surfaces have a quiet center, a fine rim and a centered soft shadow. */
html.liquid-glass body :is(.sidebar, .top-bar, .mobile-dock-card),
html.liquid-glass body.mobile-document-scroll :is(.top-bar, .sidebar.open, .mobile-dock-card) {
    background: var(--lg-navigation-surface) !important;
    box-shadow: var(--lg-floating-shadow) !important;
}
html.liquid-glass body .mobile-dock-card { position: relative; }

/* A masked 1px ring does not whiten the panel center or cover its contents.
   These hosts have no existing ::after decoration. Their positioning stays
   unchanged, including sticky headers and the fixed mobile navigation parent. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    html.liquid-glass body :is(.top-bar, .mobile-dock-card)::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        padding: 1px;
        border-radius: inherit;
        pointer-events: none;
        background: var(--lg-border);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }
}

/* Selected destinations sit within the navigation as one clear capsule;
   unselected destinations continue to use the application's quiet treatment. */
html.liquid-glass body .sidebar .nav-item.active,
html.liquid-glass body .mobile-dock-card .mobile-dock-btn.is-active {
    background: var(--lg-selected) !important;
    border: 1px solid var(--lg-border) !important;
    color: var(--lg-accent) !important;
    box-shadow: var(--lg-highlight) !important;
}
html.liquid-glass body .sidebar .nav-item.active { border-radius: 15px !important; }
html.liquid-glass body .mobile-dock-card .mobile-dock-btn.is-active { border-radius: 999px !important; }

/* Only the optional background span is refracted. Applying the SVG filter to
   the host itself would also bend text, icons and menus. */
html.liquid-glass body :is(.top-bar.lg-optical-host, .mobile-dock-card.lg-optical-host),
html.liquid-glass body.mobile-document-scroll :is(.top-bar.lg-optical-host, .mobile-dock-card.lg-optical-host) {
    isolation: isolate;
    background: var(--lg-optical-tint) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.liquid-glass body .lg-optical-host > span.lg-optical-backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    background: var(--lg-reflection);
    -webkit-backdrop-filter: var(--lg-refraction, blur(0px)) blur(6px) saturate(125%);
    backdrop-filter: var(--lg-refraction, blur(0px)) blur(6px) saturate(125%);
}

/* Keep one material boundary around the Emby connection surface. The inputs
   retain their stable inset material and readable foreground colors. */
html.liquid-glass body #emby-setup-panel .emby-setup-form {
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
html.liquid-glass body.lg-login-page .login-card { box-shadow: var(--lg-floating-shadow) !important; }

/* Mobile keyboard transitions use the existing solid, low-cost header path. */
html.liquid-glass body .top-bar.mobile-input-active,
html.liquid-glass body.mobile-document-scroll .top-bar.mobile-input-active,
html.liquid-glass body .top-bar.lg-optical-host.mobile-input-active,
html.liquid-glass body.mobile-document-scroll .top-bar.lg-optical-host.mobile-input-active {
    background: var(--lg-elevated) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html.liquid-glass body .top-bar.mobile-input-active > span.lg-optical-backdrop { display: none !important; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html.liquid-glass {
        --lg-surface: #f4f8fd;
        --lg-soft: #edf3f9;
        --lg-navigation-surface: #f4f8fd;
        --lg-optical-tint: #f4f8fd;
    }
    html.liquid-glass[data-theme="dark"] {
        --lg-surface: #1c2b40;
        --lg-soft: #17263b;
        --lg-navigation-surface: #1c2b40;
        --lg-optical-tint: #1c2b40;
    }
    html.liquid-glass body .lg-optical-host > span.lg-optical-backdrop { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    html.liquid-glass {
        --lg-surface: #f4f8fd;
        --lg-soft: #edf3f9;
        --lg-navigation-surface: #f4f8fd;
        --lg-optical-tint: #f4f8fd;
    }
    html.liquid-glass[data-theme="dark"] {
        --lg-surface: #1c2b40;
        --lg-soft: #17263b;
        --lg-navigation-surface: #1c2b40;
        --lg-optical-tint: #1c2b40;
    }
    html.liquid-glass body .lg-optical-host > span.lg-optical-backdrop,
    html.liquid-glass body :is(.top-bar, .mobile-dock-card)::after { display: none !important; }
}
@media (forced-colors: active) {
    html.liquid-glass,
    html.liquid-glass[data-theme="dark"] {
        --lg-surface: Canvas;
        --lg-soft: Canvas;
        --lg-navigation-surface: Canvas;
        --lg-optical-tint: Canvas;
        --lg-selected: Canvas;
        --lg-accent: Highlight;
    }
    html.liquid-glass body .lg-optical-host > span.lg-optical-backdrop,
    html.liquid-glass body :is(.top-bar, .mobile-dock-card)::after { display: none !important; }
    html.liquid-glass body :is(.sidebar, .top-bar, .mobile-dock-card) { border-color: CanvasText !important; box-shadow: none !important; }
}