/* XMM liquid glass buttons — pure CSS + tiny spring script, works in Chrome, Safari, Firefox, Edge.
   No SVG-filter backdrops (Chromium-only). Blur uses standard + -webkit- backdrop-filter with a solid fallback. */
:root{
  --lg-fill-a:rgba(255,255,255,.17);--lg-fill-b:rgba(255,255,255,.06);
  --lg-rim:rgba(255,255,255,.22);--lg-rim-top:rgba(255,255,255,.55);--lg-shade:rgba(0,0,0,.34);
  --lg-spec:rgba(255,255,255,.55);
}
:root[data-lg-theme="light"]{
  --lg-fill-a:rgba(255,255,255,.78);--lg-fill-b:rgba(255,255,255,.42);
  --lg-rim:rgba(0,0,0,.09);--lg-rim-top:rgba(255,255,255,.95);--lg-shade:rgba(40,30,10,.14);
  --lg-spec:rgba(255,255,255,.95);
}

/* ---- no visible hitbox, ring, outline, flash or text-select on any control ---- */
*{-webkit-tap-highlight-color:rgba(0,0,0,0)}
button,[role=button],a.pill,a.cta,a.btn,a.cap,.lnk,.chip,.btn,.icon-btn,.circle,.send,.mode,.sug,.nav-i,.chat-i,.r-i,.bn{
  outline:none!important;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;-webkit-appearance:none;appearance:none;
}
button:focus,button:focus-visible,[role=button]:focus,a:focus,a:focus-visible{outline:none!important;box-shadow:none}
button::-moz-focus-inner{border:0;padding:0}
button:focus-visible[data-lg],a:focus-visible[data-lg]{filter:brightness(1.25)}

/* ---- motion: every control gets the same spring (driven by glass.js through individual transform props,
        so existing transforms on the element are never overwritten) ---- */
[data-lgm]{
  scale:var(--lg-sx,1) var(--lg-sy,1);translate:var(--lg-tx,0px) var(--lg-ty,0px);rotate:var(--lg-r,0deg);
  transform-origin:var(--lg-ox,50%) var(--lg-oy,50%);
  will-change:scale,translate;backface-visibility:hidden;
}
[data-lgm].lg-up{z-index:30}

/* ---- the glass itself ---- */
[data-lg]{
  isolation:isolate;
  -webkit-backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);
  backdrop-filter:blur(20px) saturate(1.8) brightness(1.06);
  border:0!important;
  box-shadow:
    inset 0 1px 0 var(--lg-rim-top),
    inset 0 -1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px var(--lg-rim),
    inset 0 -8px 14px -8px rgba(255,255,255,.14),
    0 8px 22px -6px var(--lg-shade),
    0 1px 3px rgba(0,0,0,.18);
  transition:background .18s,box-shadow .18s,color .18s,opacity .18s!important;
}
[data-lg]:where(:not(.on):not([aria-pressed="true"]):not([aria-selected="true"])){
  background:linear-gradient(180deg,var(--lg-fill-a),var(--lg-fill-b));
}
/* dark solid pill (primary actions) keeps its colour but gets the glass rim + gloss */
[data-lg].lg-solid{
  background:linear-gradient(180deg,rgba(70,70,74,.96),rgba(14,14,16,.96))!important;color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.1),0 10px 24px -8px rgba(0,0,0,.5),0 1px 3px rgba(0,0,0,.3);
}
[data-lg].lg-white{
  background:linear-gradient(180deg,#fff,#e9e9ee)!important;color:#000!important;
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.06),0 8px 22px -8px rgba(0,0,0,.5);
}
/* light moving across the glass — follows the finger / cursor */
[data-lg]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at var(--lg-px,50%) var(--lg-py,0%),var(--lg-spec),rgba(255,255,255,0) 62%);
  opacity:0;transition:opacity .2s;
}
[data-lg].lg-hot::after{opacity:.5}
[data-lg].lg-down::after{opacity:.85}
[data-lg].lg-down{background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.14))}
[data-lg].lg-solid.lg-down{background:linear-gradient(180deg,rgba(112,112,118,.98),rgba(42,42,46,.98))!important}
[data-lg].lg-white.lg-down{background:linear-gradient(180deg,#e4e4ea,#d2d2da)!important}
:root[data-lg-theme="light"] [data-lg].lg-down:not(.lg-solid){background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(235,232,224,.8))}
[data-lgm]:not([data-lg]).lg-down{opacity:.7}

/* browsers with no backdrop blur at all: opaque glass instead of a see-through hole */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  [data-lg]:where(:not(.lg-solid):not(.lg-white)){background:linear-gradient(180deg,rgba(60,60,66,.97),rgba(34,34,38,.97))}
  :root[data-lg-theme="light"] [data-lg]:where(:not(.lg-solid):not(.lg-white)){background:linear-gradient(180deg,#fff,#eeeae2)}
}
@media (prefers-reduced-motion:reduce){[data-lgm]{scale:1 1!important;translate:0 0!important;rotate:0deg!important}}