/* liquid-glass.css
 *
 * mono liquid glass material. replaces the old .sg-glass / .sg-lens-layer rules that lived in
 * chrome/assets/site.css and mono-assets/toolbar.css.
 *
 * cost model:
 *   - surface, rim, sheen and bevel are static paint (gradients, masked ring, inset shadows)
 *   - backdrop-filter only on the nav pill, the appearance menu, the search field and the
 *     (transient) games menu. one cheap blur each, no svg filter on the big ones
 *   - real edge refraction (svg displacement map) is applied by chrome/assets/lens.js to the
 *     small elements only, chromium desktop only, and switches itself off on slow devices
 *
 * markup contract is unchanged: class "sg-glass" plus data-mono-glass on the element.
 *
 * gotcha: an ancestor with opacity < 1, filter, mask or will-change: opacity/filter cuts off
 * the backdrop and the glass goes flat.
 */

:root {
  /* low on purpose so the refraction stays visible. fine detail under a lens needs 0 to 2px.
     raise to 8 to 14px for a frostier look. */
  --sg-blur: 2px;
  --sg-menu-blur: 12px;

  /* small floating surfaces: mostly clear, the backdrop provides the colour */
  --sg-glass-top: rgba(30, 32, 40, 0.30);
  --sg-glass-bot: rgba(18, 20, 26, 0.20);
  --sg-glass-strong-top: rgba(30, 32, 40, 0.42);
  --sg-glass-strong-bot: rgba(18, 20, 26, 0.30);

  /* large menu: dense enough to read text over anything, light blur on top */
  --sg-menu-top: rgba(40, 40, 44, 0.88);
  --sg-menu-bot: rgba(24, 24, 26, 0.88);

  --sg-rim-hi: rgba(255, 255, 255, 0.62);
  --sg-rim-lo: rgba(255, 255, 255, 0.24);
  --sg-rim-mid: rgba(255, 255, 255, 0.07);
  --sg-glow: rgba(255, 255, 255, 0.08);
  --sg-bounce: rgba(255, 255, 255, 0.12);
  --sg-shadow: rgba(0, 0, 0, 0.5);

  /* set per element by lens.js when the lens is active, otherwise a no-op */
  --sg-lens: saturate(1);
}

:root[data-theme="light"] {
  --sg-glass-top: rgba(255, 255, 255, 0.55);
  --sg-glass-bot: rgba(255, 255, 255, 0.28);
  --sg-glass-strong-top: rgba(255, 255, 255, 0.70);
  --sg-glass-strong-bot: rgba(255, 255, 255, 0.42);
  --sg-menu-top: rgba(255, 255, 255, 0.88);
  --sg-menu-bot: rgba(246, 246, 248, 0.88);
  --sg-rim-hi: rgba(255, 255, 255, 0.95);
  --sg-rim-lo: rgba(0, 0, 0, 0.14);
  --sg-rim-mid: rgba(0, 0, 0, 0.05);
  --sg-glow: rgba(255, 255, 255, 0.60);
  --sg-bounce: rgba(255, 255, 255, 0.50);
  --sg-shadow: rgba(0, 0, 0, 0.20);
}

/* ---------- base surface ---------- */

/* :where keeps specificity at zero so any existing position (fixed, sticky, absolute) wins.
   the rim and sheen pseudo elements only need a positioned parent. */
:where(.sg-glass) {
  position: relative;
}

.sg-glass {
  --_top: var(--sg-glass-top);
  --_bot: var(--sg-glass-bot);
  isolation: isolate;
  border: 1px solid transparent;
  background: linear-gradient(180deg, var(--_top), var(--_bot));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    inset 0 0 16px 1px var(--sg-glow),
    inset 0 -10px 18px -12px var(--sg-bounce),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 14px 32px -10px var(--sg-shadow);
}

.sg-glass.sg-glass-strong {
  --_top: var(--sg-glass-strong-top);
  --_bot: var(--sg-glass-strong-bot);
}

/* rim: 1px ring, lit from top left and bottom right like a bevelled edge */
.sg-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    var(--sg-rim-hi) 0%,
    var(--sg-rim-mid) 28%,
    rgba(255, 255, 255, 0.03) 50%,
    var(--sg-rim-mid) 72%,
    var(--sg-rim-lo) 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;
}

/* sheen: soft hotspot (follows the pointer on desktop) plus a faint diagonal glint */
.sg-glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(160px circle at var(--gx, 18%) var(--gy, -10%), rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(112deg, transparent 36%, rgba(255, 255, 255, 0.06) 44%, rgba(255, 255, 255, 0.02) 52%, transparent 60%);
}

/* ---------- small floating surfaces: blur + optional lens ---------- */

.sg-glass.top-bar,
.sg-glass.mh-preferences,
.sg-glass.glass-search {
  -webkit-backdrop-filter: blur(var(--sg-blur)) var(--sg-lens) saturate(1.7) brightness(1.1);
  backdrop-filter: blur(var(--sg-blur)) var(--sg-lens) saturate(1.7) brightness(1.1);
}

/* the appearance menu has text over arbitrary page content, so it gets the dense menu tint
   and a heavier blur than the nav pill */
.sg-glass.mh-preferences {
  --_top: var(--sg-menu-top);
  --_bot: var(--sg-menu-bot);
  -webkit-backdrop-filter: blur(var(--sg-menu-blur)) var(--sg-lens) saturate(1.5);
  backdrop-filter: blur(var(--sg-menu-blur)) var(--sg-lens) saturate(1.5);
}

/* ---------- games menu: big, so no svg filter, just a light blur on a dense tint ---------- */

.sg-glass.games-panel {
  --_top: var(--sg-menu-top);
  --_bot: var(--sg-menu-bot);
  -webkit-backdrop-filter: blur(var(--sg-menu-blur)) saturate(1.5);
  backdrop-filter: blur(var(--sg-menu-blur)) saturate(1.5);
  /* ::before is the hover bridge on this element, so the rim is a plain inset shadow */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1px 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 16px 1px var(--sg-glow),
    inset 0 -10px 18px -12px var(--sg-bounce),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 14px 32px -10px var(--sg-shadow);
}

.sg-glass.games-panel::before {
  background: none;
  padding: 0;
  -webkit-mask: none;
  mask: none;
}

:root[data-theme="light"] .sg-glass.games-panel {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 1px 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 16px 1px var(--sg-glow),
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 14px 32px -10px var(--sg-shadow);
}

/* the old svg lens layer is gone, hide any stale one */
.sg-lens-layer {
  display: none !important;
}

/* ---------- lens state ---------- */

/* lens.js sets data-sg-lens="off" when the lens is skipped or switched off on a slow device.
   the big menu also drops its blur there. */
:root[data-sg-lens="off"] .sg-glass {
  --sg-lens: saturate(1) !important;
}

:root[data-sg-lens="off"] .sg-glass.games-panel {
  --_top: rgba(40, 40, 44, 0.97);
  --_bot: rgba(24, 24, 26, 0.97);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

:root[data-sg-lens="off"][data-theme="light"] .sg-glass.games-panel {
  --_top: rgba(255, 255, 255, 0.97);
  --_bot: rgba(246, 246, 248, 0.97);
}

/* the user toggle has no rules of its own: off sets data-sg-lens="off", so it looks exactly like
   glass on with the lens unavailable */

/* ---------- fallbacks ---------- */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --sg-glass-top: rgba(46, 46, 50, 0.95);
    --sg-glass-bot: rgba(28, 28, 30, 0.95);
    --sg-glass-strong-top: rgba(46, 46, 50, 0.95);
    --sg-glass-strong-bot: rgba(28, 28, 30, 0.95);
    --sg-menu-top: rgba(46, 46, 50, 0.97);
    --sg-menu-bot: rgba(28, 28, 30, 0.97);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .sg-glass {
    background: var(--surface-elevated) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0.5px solid var(--separator) !important;
    box-shadow: var(--shadow-solid) !important;
  }
  .sg-glass::after {
    display: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --sg-rim-hi: rgba(255, 255, 255, 0.95);
    --sg-rim-lo: rgba(255, 255, 255, 0.6);
    --sg-rim-mid: rgba(255, 255, 255, 0.3);
  }
}