/* GPTGenie · Schieberegler im Liquid-Glass-Stil (iOS 26)
 *
 * Einzige Stelle für das Aussehen ALLER Regler (Einstellungen, Pinsel, Fast Scan, PDF-Editor, Zoom).
 *   · In Ruhe: dünne Spur mit lila Füllung (--p = Anteil, setzt page-ui.js / slider-glass.js), weißer Pillen-Knopf.
 *   · Beim Ziehen (Chrome/Edge): der Knopf wird zu einer großen, klaren Glas-Linse wie im WWDC-Video, durch die man
 *     die Spur gebrochen sieht (.sg-lens, Bewegung und Federn steuert slider-glass.js). Safari (iPhone) und Firefox:
 *     dieselbe Linse ohne Brechung (.sg-lens-soft). Ganz ohne backdrop-filter: der Knopf wird nur etwas größer.
 * Maße des Knopfes müssen zu THUMB_W/THUMB_H in slider-glass.js passen.
 */
/* --pr als Zahl registrieren, damit die Füllung weich gleiten kann */
@property --pr { syntax: '<number>'; inherits: false; initial-value: 0.5; }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;              /* wie bisher; Einstellungen, Editor usw. setzen ihre eigene Breite */
  height: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  /* Füllung mit rundem Ende (sieht man durch die Glas-Linse, wie im WWDC-Video) */
  background:
    radial-gradient(circle 3px at var(--sg-stop) 50%, rgb(var(--a-c084fc,192,132,252)) 92%, transparent 100%),
    linear-gradient(to right, rgb(var(--a-9d4bf5,157,75,245)) 0, rgb(var(--a-c084fc,192,132,252)) var(--sg-stop), rgba(255,255,255,0.13) var(--sg-stop)) !important;
  --sg-stop: calc(18px + (100% - 36px) * var(--pr, 0.5));   /* Knopfmitte (Knopf 36px breit) */
  box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.45), inset 0 0 0 0.5px rgba(255,255,255,0.05) !important;
  touch-action: pan-y;
}
/* Die Füllung hängt immer fest an der Knopfmitte (beim Ziehen an der Linsenmitte, setzt slider-glass.js). */

/* Knopf: weiße Pille mit weicher Kante */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, rgb(var(--a-f7f4fc,247,244,252)) 55%, rgb(var(--a-ece6f6,236,230,246)) 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 0 0.5px rgba(0,0,0,0.22), inset 0 -1px 1px rgba(var(--a-6e46a0,110,70,160),0.16);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
input[type="range"]::-moz-range-thumb {
  width: 36px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: linear-gradient(180deg, #ffffff 0%, rgb(var(--a-f7f4fc,247,244,252)) 55%, rgb(var(--a-ece6f6,236,230,246)) 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 0 0.5px rgba(0,0,0,0.22);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }

/* Ohne Glas-Lupe (Safari, Firefox): Knopf wird beim Ziehen etwas größer */
html:not(.sg-lens-on) input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.14); }
input[type="range"]:active::-moz-range-thumb { transform: scale(1.14); }

/* Mit Glas-Lupe: der echte Knopf verschwindet, solange die Lupe über ihm liegt */
input[type="range"].sg-active::-webkit-slider-thumb { opacity: 0; }

input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 0 3px rgba(var(--a-c084fc,192,132,252),0.7); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 0 3px rgba(var(--a-c084fc,192,132,252),0.7); }
input[type="range"]:disabled { opacity: .45; cursor: not-allowed; }
input[type="range"]:disabled::-webkit-slider-thumb { cursor: not-allowed; }

/* ── Glas-Linse (Chromium mit Brechung, Safari/Firefox ohne) ──────────────────────────────────────────────
   Echte Größe 66×40 (wie LW/LH in slider-glass.js), in Ruhe per scale() genau auf Knopfgröße 36×22 verkleinert.
   Drei Ebenen: Schatten · Glas (bricht den Hintergrund, KEIN äußerer Schatten, sonst verschiebt Chrome die Brechung)
   · weiße Pille (deckt in Ruhe alles ab, blendet beim Aufploppen aus). Lage, Größe und Deckkraft setzt slider-glass.js. */
.sg-lens {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 66px;
  height: 40px;
  margin: -20px 0 0 -33px;           /* Mittelpunkt = Knopfmitte */
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.sg-lens.on { visibility: visible; }
.sg-lens > i { position: absolute; inset: 0; border-radius: 999px; }
.sg-lens-sh {
  opacity: 0;
  box-shadow: 0 12px 26px -8px rgba(0,0,0,0.55), 0 3px 8px -2px rgba(0,0,0,0.28);
}
.sg-lens-g {
  -webkit-backdrop-filter: url(#sg-lens-g);
  backdrop-filter: url(#sg-lens-g);
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 50%);
  /* Glasrand wie im iOS-Video: oben eine feine Lichtkante, rundherum eine klare dünne Kante, dazu Farbsäume
     (links oben blau, rechts unten gelb/rosa), so wie Glas das Licht an der Kante aufspaltet. Nur innen: kein Versatz. */
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.85),
    inset 0 -1px 1px rgba(255,255,255,0.4),
    inset 1.6px 1.2px 1px -0.4px rgba(70,150,255,0.55),
    inset -1.6px -1.2px 1px -0.4px rgba(255,190,90,0.5),
    inset -1.2px 0.6px 1.2px -0.4px rgba(255,110,190,0.35),
    inset 0 0 0 0.75px rgba(255,255,255,0.5),
    inset 0 0 12px rgba(255,255,255,0.06);
}
/* Safari (iPhone) und Firefox: kein SVG-Filter möglich. Klares Glas wie im Video: kaum Unschärfe, keine Aufhellung
   (sonst wird die Linse auf hellem Grund milchig weiß), dafür eine deutliche dünne Kante mit Farbsäumen. */
html.sg-lens-soft .sg-lens-g {
  -webkit-backdrop-filter: blur(0.35px) saturate(1.35);
  backdrop-filter: blur(0.35px) saturate(1.35);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(90% 70% at 50% 100%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 60%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.9),
    inset 0 -1px 1px rgba(255,255,255,0.45),
    inset 1.6px 1.2px 1px -0.4px rgba(70,150,255,0.6),
    inset -1.6px -1.2px 1px -0.4px rgba(255,190,90,0.55),
    inset -1.2px 0.6px 1.2px -0.4px rgba(255,110,190,0.4),
    inset 0 0 0 0.75px rgba(120,130,150,0.35),
    inset 0 0 0 1.5px rgba(255,255,255,0.35),
    inset 0 0 14px rgba(255,255,255,0.1);
}
/* weiße Pille wie der echte Knopf (Schatten auf 66×40 hochgerechnet, damit er verkleinert genau passt) */
.sg-lens-w {
  background: linear-gradient(180deg, #ffffff 0%, rgb(var(--a-f7f4fc,247,244,252)) 55%, rgb(var(--a-ece6f6,236,230,246)) 100%);
  box-shadow: 0 3.6px 12.7px rgba(0,0,0,0.42), 0 0 0 0.9px rgba(0,0,0,0.22), inset 0 -1.8px 1.8px rgba(var(--a-6e46a0,110,70,160),0.16);
}

@media (prefers-reduced-motion: reduce) {
  input[type="range"]::-webkit-slider-thumb { transition: none; }
  input[type="range"]::-moz-range-thumb { transition: none; }
}