/**
 * Overlay scrollbar pills — native bars stay as a no-JS fallback.
 * `html.bp-scrollbars-ready` hides the browser chrome; handles are portaled.
 */

html.bp-scrollbars-ready,
html.bp-scrollbars-ready *{
  scrollbar-width: none !important;
}

html.bp-scrollbars-ready *::-webkit-scrollbar{
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

#bp-scrollbars{
  pointer-events: none;
}

.bp-scrollbar-handle{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: none;
  box-sizing: border-box;
  border-radius: 999px;
  --bp-scrollbar-fill: color-mix(in srgb, var(--c-text-muted, #6b7280) 58%, transparent);
  --bp-scrollbar-fill-hover: color-mix(in srgb, var(--c-text, #374151) 52%, transparent);
  background: var(--bp-scrollbar-fill);
  pointer-events: none;
  opacity: 0;
  transition: none !important;
}

html:has(.dash) .bp-scrollbar-handle,
html:has(.dashboard-stage) .bp-scrollbar-handle{
  --bp-scrollbar-fill: var(--scrollbar-thumb, var(--c-primary, #5050ff));
  --bp-scrollbar-fill-hover: var(--scrollbar-thumb-hover, var(--c-primary, #5050ff));
}

html.bp-scrollbars-ready .bp-scrollbar-handle.is-visible{
  display: block;
  opacity: 1;
  pointer-events: auto;
}

html.bp-scrollbars-ready .bp-scrollbar-handle:hover,
html.bp-scrollbars-ready .bp-scrollbar-handle.is-dragging{
  background: var(--bp-scrollbar-fill-hover);
}