/* Browser-safe Liquid Glass: fixed top light, stable rim, contextual tint, no cursor-following spotlight. */
.liquid-surface {
  --glass-tint: var(--glass-rgb);
  --glass-strength: var(--glass-alpha);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(155deg,
      rgba(var(--glass-tint), calc(var(--glass-strength) + .06)) 0%,
      rgba(var(--glass-tint), var(--glass-strength)) 52%,
      rgba(var(--glass-tint), calc(var(--glass-strength) - .05)) 100%);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 1px rgba(255,255,255,.30),
    inset 0 -1px 1px var(--glass-occlusion);
  -webkit-backdrop-filter: blur(24px) saturate(155%) brightness(103%);
  backdrop-filter: blur(24px) saturate(155%) brightness(103%);
}
.liquid-surface::before,
.liquid-surface::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
/* Specular sheen from a fixed overhead light. */
.liquid-surface::before {
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 44%),
    radial-gradient(100% 38% at 50% -8%, rgba(255,255,255,.20), transparent 70%);
  opacity: .72;
}
/* Refractive-looking optical rim: brightest at the top, quiet elsewhere. */
.liquid-surface::after {
  z-index: 3;
  padding: 1px;
  background: linear-gradient(180deg, var(--glass-rim) 0%, var(--glass-rim-low) 34%, var(--glass-rim-low) 72%, color-mix(in srgb,var(--glass-rim) 38%,transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .70;
}
.liquid-surface > * { position: relative; z-index: 2; }

/* Larger structural glass should feel thicker than small controls. */
.sidebar.liquid-surface { --glass-strength: var(--glass-alpha-strong); -webkit-backdrop-filter: blur(34px) saturate(150%) brightness(102%); backdrop-filter: blur(34px) saturate(150%) brightness(102%); }
.topbar.liquid-surface, .tabbar.liquid-surface, .search-sheet.liquid-surface { -webkit-backdrop-filter: blur(28px) saturate(175%) brightness(104%); backdrop-filter: blur(28px) saturate(175%) brightness(104%); }

/* Optional progressive-enhancement flag. Chromium can support URL backdrop filters; fallback stays intact. */
html.supports-backdrop-refraction .liquid-surface[data-refract="true"] {
  filter: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .liquid-surface { background: rgba(var(--glass-rgb), .92); }
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-surface { background: var(--surface-raised); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-contrast: more) {
  .liquid-surface { border-color: color-mix(in srgb, var(--text) 36%, transparent); }
}
@media (forced-colors: active) {
  .liquid-surface { background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .liquid-surface::before, .liquid-surface::after { display: none; }
}

/* Chromium progressive enhancement: bend only the glass rim, leave the center optically calm. */
.liquid-surface.has-refraction {
  -webkit-backdrop-filter: blur(24px) saturate(160%) brightness(103%) var(--refract-filter);
  backdrop-filter: blur(24px) saturate(160%) brightness(103%) var(--refract-filter);
}
.sidebar.liquid-surface.has-refraction {
  -webkit-backdrop-filter: blur(34px) saturate(150%) brightness(102%) var(--refract-filter);
  backdrop-filter: blur(34px) saturate(150%) brightness(102%) var(--refract-filter);
}

/* v2 optics: quiet interior + edge refraction + interaction-only gel flare. */
.liquid-surface {
  --gel-x: 50%;
  --gel-y: 50%;
  --gel-opacity: 0;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.liquid-surface::before {
  background:
    radial-gradient(64% 120% at var(--gel-x) var(--gel-y), rgba(255,255,255,calc(.20 * var(--gel-opacity))), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.21) 0%, rgba(255,255,255,.045) 20%, rgba(255,255,255,0) 45%),
    radial-gradient(100% 38% at 50% -8%, rgba(255,255,255,.18), transparent 70%);
}
.liquid-surface.is-gel-active {
  --gel-opacity: 1;
  border-color: color-mix(in srgb, var(--glass-border) 72%, white 28%);
  box-shadow:
    var(--shadow-2),
    inset 0 1px 1px rgba(255,255,255,.40),
    inset 0 -1px 1px var(--glass-occlusion),
    0 0 0 1px rgba(255,255,255,.08);
}

/* URL displacement filters are optional; keep the fallback visually complete. */
.liquid-surface.has-refraction {
  -webkit-backdrop-filter: blur(22px) saturate(162%) brightness(103%) var(--refract-filter);
  backdrop-filter: blur(22px) saturate(162%) brightness(103%) var(--refract-filter);
}
.sidebar.liquid-surface.has-refraction {
  -webkit-backdrop-filter: blur(31px) saturate(150%) brightness(102%) var(--refract-filter);
  backdrop-filter: blur(31px) saturate(150%) brightness(102%) var(--refract-filter);
}