/* liquid-glass.css — clear, thick, 3D-reading liquid glass material.
 * Pair with liquid-lens.js for real edge refraction in Chromium.
 * Anatomy (see references/3d-glass-anatomy.md): clear body · edge lens band ·
 * Fresnel rim · inner bevel light/shade · specular hotspot · contact + ambient shadow.
 */
:root {
  --lg-radius: 28px;
  --lg-tint: rgba(255, 255, 255, .05);      /* body tint: 3–8% — glass is CLEAR, not frosted */
  --lg-rim: rgba(255, 255, 255, .70);       /* brightest rim (light side) */
  --lg-rim-soft: rgba(255, 255, 255, .18);  /* rim on the shadow side */
  --lg-bevel-hi: rgba(255, 255, 255, .22);  /* inner bevel light */
  --lg-bevel-lo: rgba(0, 0, 0, .16);        /* inner bevel shade = thickness */
  --lg-shadow: rgba(0, 0, 0, .30);
  --lg-edge-glow: rgba(255, 255, 255, .30); /* light trapped inside the bevel (L01 notification rim) */
  --lg-lx: 72%;                              /* light position (pointer can drive these) */
  --lg-ly: 0%;
}
[data-theme="dark"], .lg-dark {
  --lg-tint: rgba(255, 255, 255, .035);
  --lg-rim: rgba(235, 240, 248, .55);
  --lg-rim-soft: rgba(235, 240, 248, .12);
  --lg-bevel-hi: rgba(255, 255, 255, .14);
  --lg-bevel-lo: rgba(0, 0, 0, .35);
  --lg-shadow: rgba(0, 0, 0, .55);
  --lg-edge-glow: rgba(235, 240, 248, .18);
}

.lg {
  position: relative;
  isolation: isolate;
  border-radius: var(--lg-radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 38%, rgba(255,255,255,.03)),
    var(--lg-tint);
  /* Fallback / non-Chromium: light blur only. liquid-lens.js overrides this with url(#lens). */
  -webkit-backdrop-filter: blur(5px) saturate(1.35) brightness(1.05);
          backdrop-filter: blur(5px) saturate(1.35) brightness(1.05);
  box-shadow:
    inset 0 1px 0 var(--lg-rim),                       /* top specular rim */
    inset 0 -1px 0 rgba(255,255,255,.28),              /* bottom rim catching floor light */
    inset 1px 0 0 var(--lg-rim-soft), inset -1px 0 0 var(--lg-rim-soft),
    inset 0 14px 22px -14px var(--lg-bevel-hi),        /* light entering the top bevel */
    inset 0 -18px 26px -18px var(--lg-bevel-lo),       /* shade inside the bottom bevel = thickness */
    inset 0 0 18px -6px var(--lg-edge-glow),           /* soft light trapped along the whole edge band */
    0 1px 1px rgba(0,0,0,.10),                         /* contact */
    0 22px 48px -18px var(--lg-shadow);                /* soft ambient lift */
}
/* Fresnel rim: a 1.25px gradient border, brightest where light hits (top-right by default). */
.lg::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background: conic-gradient(from 210deg at 50% 50%,
    rgba(255,255,255,.15), rgba(255,255,255,.85) 60deg, rgba(255,255,255,.25) 120deg,
    rgba(255,255,255,.06) 200deg, rgba(255,255,255,.45) 290deg, rgba(255,255,255,.15));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* Specular hotspot on the curved corner + faint inner sheen. */
.lg::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(min(120px, 30%) min(44px, 24%) at var(--lg-lx) var(--lg-ly), rgba(255,255,255,.5), rgba(255,255,255,0) 72%),
    radial-gradient(120% 70% at 30% -10%, rgba(255,255,255,.14), transparent 60%);
  mix-blend-mode: screen;
}
.lg > * { position: relative; z-index: 1; }

/* Pills, lenses, knobs: thicker bevel reads as a solid droplet. */
.lg-pill { border-radius: 999px; }
.lg-knob {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.35), rgba(255,255,255,.04) 45%, rgba(255,255,255,.08));
}

/* 2.5D slab: tilt in perspective + visible edge thickness on the far side of the tilt. */
.lg-scene { perspective: 1200px; }
.lg-slab {
  --thick: 6px;
  transform: rotateX(var(--rx, 10deg)) rotateY(var(--ry, -16deg));
  transform-style: flat;
  box-shadow:
    inset 0 1px 0 var(--lg-rim), inset 0 -1px 0 rgba(255,255,255,.28),
    inset 0 14px 22px -14px var(--lg-bevel-hi), inset 0 -18px 26px -18px var(--lg-bevel-lo),
    inset 0 0 18px -6px var(--lg-edge-glow),
    1px 1px 0 rgba(255,255,255,.45), 2px 2px 0 rgba(255,255,255,.22),
    3px 3px 0 rgba(255,255,255,.12), var(--thick) var(--thick) 0 rgba(255,255,255,.06),  /* side face */
    0 30px 60px -20px var(--lg-shadow);
}

@media (prefers-reduced-transparency: reduce) {
  .lg { background: rgba(28,30,34,.92); -webkit-backdrop-filter: none; backdrop-filter: none !important; }
}