.buzz-sidebar-scrollbar {
  scrollbar-color: transparent transparent;
}

.buzz-sidebar-scrollbar:hover {
  scrollbar-color: var(
      --buzz-sidebar-scrollbar-thumb,
      hsl(var(--sidebar-border) / 0.8)
    )
    transparent;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.buzz-sidebar-scrollbar::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
}

.buzz-sidebar-scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: var(
    --buzz-sidebar-scrollbar-thumb,
    hsl(var(--sidebar-border) / 0.8)
  );
}

/* Channel activity keeps its chrome outside the scrolling surface. The slim,
 * low-contrast thumb belongs only to the activity list beneath the header. */
.buzz-channel-activity-scrollbar {
  scrollbar-gutter: stable;
}

.buzz-channel-activity-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.buzz-channel-activity-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.buzz-channel-activity-scrollbar::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: hsl(var(--foreground) / 0.15);
  border: 2px solid transparent;
  border-radius: 999px;
}

/*
 * Main-content scroll areas that have sticky blurred chrome inside them.
 * Native overlay scrollbars paint UNDER composited descendants
 * (backdrop-filter + z-index) in WKWebView, so the thumb looks cut off
 * behind the blur bar. A custom scrollbar occupies its own gutter outside
 * the content box, so sticky children can no longer cover it.
 */
/*
 * NOTE: no `scrollbar-color` here on purpose — when the standard property is
 * set, engines ignore the `::-webkit-scrollbar` pseudo styles and fall back
 * to overlay scrollbars, which reintroduces the bug.
 */
.buzz-content-scrollbar {
  scrollbar-gutter: stable;
}

.buzz-content-scrollbar::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.buzz-content-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

/* The native thumb stays permanently transparent (but grabbable — the hit
 * area is real). Visibility while scrolling is handled by a separate overlay
 * indicator element positioned over the gutter, because WebKit does not
 * re-resolve `::-webkit-scrollbar` styles when classes/attributes on the
 * scroller change dynamically. */
.buzz-content-scrollbar::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: transparent;
  border: 3px solid transparent;
  border-radius: 999px;
}

/* Scrollbar-part pseudo-classes are resolved by the scrollbar itself, so
 * these DO update dynamically — keep the thumb visible under the pointer. */
.buzz-content-scrollbar::-webkit-scrollbar-thumb:hover,
.buzz-content-scrollbar::-webkit-scrollbar-thumb:active {
  background-color: hsl(var(--border) / 0.9);
}