/* One theme-aware scrollbar appearance for the document, results and dialogs.
   Scrolling itself stays browser-managed: wheel, touch and keyboard keep working. */
:root {
  --scroll-thumb:#9671df;
  --scroll-thumb-end:#7544e9;
  --scroll-thumb-hover:#6431d0;
}
html[data-theme="dark"] {
  --scroll-thumb:#9c7ad8;
  --scroll-thumb-end:#b99aff;
  --scroll-thumb-hover:#cbb4ff;
}

/* Chromium / Opera / Edge / Safari: transparent rail and rounded pill grip.
   Do not set the standard color/width here: they override these detailed styles. */
@supports selector(::-webkit-scrollbar) {
  * {scrollbar-width:auto;scrollbar-color:auto}
  ::-webkit-scrollbar {width:4px;height:4px;background:transparent}
  ::-webkit-scrollbar-track,::-webkit-scrollbar-track-piece {
    background:transparent;border:0;box-shadow:none;
  }
  ::-webkit-scrollbar-thumb {
    min-height:36px;min-width:36px;
    border:0;border-radius:999px;
    background:linear-gradient(180deg,var(--scroll-thumb),var(--scroll-thumb-end));
    background-clip:padding-box;
  }
  ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active {
    background:var(--scroll-thumb-hover);background-clip:padding-box;
  }
  ::-webkit-scrollbar-button {display:none;width:0;height:0}
  ::-webkit-scrollbar-corner {background:transparent}
}

/* Firefox exposes color and width through the standard scrollbar API. */
@supports not selector(::-webkit-scrollbar) {
  * {scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent}
}
/* Keep the rail geometry stable, but reveal the grip only after the welcome. */
html:not([data-intro="ready"]) {
  --scroll-thumb:transparent;
  --scroll-thumb-end:transparent;
  --scroll-thumb-hover:transparent;
}
/* Overlay only the document; music results keep their original internal grip. */
html.has-overlay-scrollbar,html.has-overlay-scrollbar body {
  scrollbar-width:none!important;scrollbar-gutter:auto!important;
}
html.has-overlay-scrollbar::-webkit-scrollbar,
html.has-overlay-scrollbar body::-webkit-scrollbar {display:none;width:0;height:0}
@supports selector(::-webkit-scrollbar) {
  .music-results::-webkit-scrollbar {width:12px;height:12px}
  .music-results::-webkit-scrollbar-thumb {border:3px solid transparent}
}
.dream-scroll-grip {
  position:fixed;top:0;right:0;width:12px;z-index:110;
  background:none;border:0;padding:0;touch-action:none;user-select:none;
}
.dream-scroll-grip::after {
  content:"";position:absolute;inset:0 0 0 auto;width:4px;border-radius:999px;
  background:linear-gradient(180deg,var(--scroll-thumb),var(--scroll-thumb-end));
}
.dream-scroll-grip:hover::after,.dream-scroll-grip.is-dragging::after {
  background:var(--scroll-thumb-hover);
}
.dream-scroll-grip:focus-visible {outline:1px solid var(--scroll-thumb-hover);outline-offset:-1px}
.dream-scroll-grip[hidden],html:not([data-intro="ready"]) .dream-scroll-grip {display:none}
@media (forced-colors:active) {
  * {scrollbar-color:auto}
  ::-webkit-scrollbar-thumb {
    background:Highlight;background-clip:padding-box;
    forced-color-adjust:none;
  }
  html:not([data-intro="ready"]),html:not([data-intro="ready"]) * {
    scrollbar-color:transparent transparent;
  }
  html:not([data-intro="ready"])::-webkit-scrollbar-thumb,
  html:not([data-intro="ready"]) ::-webkit-scrollbar-thumb {
    background:transparent;
  }
  .dream-scroll-grip::after {background:Highlight;forced-color-adjust:none}
}