/* quiet scroll: the macos treatment for every scroller on the site.
   no track, no arrows, a thin rounded dawn-tinted thumb that exists only
   while the page is actually moving, then leaves. the gutter stays a
   constant width so nothing in the layout ever shifts.
   element-specific scrollbar rules (hidden chat logs etc.) are more
   specific than these universal ones and keep their own behavior. */

/* firefox: thin, and invisible until scrolling (scrollbar-color inherits) */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 231, 214, 0) transparent;
}
html[data-scrolling] {
  scrollbar-color: rgba(237, 231, 214, 0.25) transparent;
}

/* webkit: transparent track always, thumb only while scrolling.
   the 4px transparent border + padding-box clip makes a slim floating pill
   inside a 12px gutter, like the macos overlay thumb. */
*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  background: transparent;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
*::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 999px;
  border: 4px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
}

/* the thumb appears while anything scrolls, and stays grabbable under the
   pointer even at rest so the gutter never turns into a dead zone */
html[data-scrolling] *::-webkit-scrollbar-thumb {
  background-color: rgba(237, 231, 214, 0.22);
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(237, 231, 214, 0.38);
}
*::-webkit-scrollbar-thumb:active {
  background-color: rgba(237, 231, 214, 0.5);
}