/* 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 Glas-Lupe, durch die man die Spur gebrochen sieht
 *     (.sg-lens, von slider-glass.js gesteuert). Andere Browser: 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;
  background:
    linear-gradient(to right, #9d4bf5 0, #c084fc 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. Nur beim Loslassen der Glas-Lupe gleiten beide
   gemeinsam (gleiche Dauer und Kurve wie .sg-lens.settle) auf den eingerasteten Wert. */
input[type="range"].sg-settle { transition: --pr .3s cubic-bezier(.22,1,.36,1); }

/* 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%, #f7f4fc 55%, #ece6f6 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(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%, #f7f4fc 55%, #ece6f6 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(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(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-Lupe (nur Chromium) ───────────────────────────────────────────── */
.sg-lens {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 36px;
  height: 22px;
  margin: -11px 0 0 -18px;           /* Mittelpunkt = Knopfmitte */
  border-radius: 999px;
  pointer-events: none;
  visibility: hidden;
  scale: 1;
  background: linear-gradient(180deg, #ffffff 0%, #f7f4fc 55%, #ece6f6 100%);
  box-shadow: 0 2px 7px rgba(0,0,0,0.42), 0 0 0 0.5px rgba(0,0,0,0.22);
  transition:
    scale .42s cubic-bezier(.34,1.56,.64,1),
    background .22s ease,
    box-shadow .22s ease;
  will-change: translate, scale;
}
.sg-lens.on, .sg-lens.settle { visibility: visible; }
.sg-lens.on {
  scale: 1.62;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.06) 100%);
  -webkit-backdrop-filter: url(#sg-lens-f);
  backdrop-filter: url(#sg-lens-f);
  box-shadow:
    inset 0 1px 0.5px rgba(255,255,255,0.95),
    inset 0 -1px 1px rgba(255,255,255,0.4),
    inset 0 0 0 0.5px rgba(255,255,255,0.45),
    inset 0 0 6px rgba(255,255,255,0.12),
    0 10px 22px -8px rgba(0,0,0,0.55);
}
/* beim Loslassen schrumpft die Lupe zurück und wird wieder weiß, dann übernimmt der echte Knopf */
.sg-lens.settle {
  transition:
    translate .3s cubic-bezier(.22,1,.36,1),
    scale .3s cubic-bezier(.34,1.3,.64,1),
    background .18s ease,
    box-shadow .18s ease;
}

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