/* Vistazo's os-theme-vistazo (packages/ui/src/os-theme.css): a 6px pill in a 12px track, hidden at rest and laid
   over the content. Global because OverlayScrollbars generates the scrollbar elements outside any scoped CSS.
   --sb-top-inset / --sb-bottom-inset come from Scroll's TopInset / BottomInset, so a sticky header can push the
   track down. */
.os-scrollbar.os-theme-vistazo {
  z-index: 20;
  --os-size: 12px;
  --os-padding-perpendicular: 3px;
  --os-padding-axis: 3px;
  --os-track-border-radius: 9999px;
  --os-handle-border-radius: 9999px;
  --os-handle-bg: rgb(0 0 0 / .35);
  --os-handle-bg-hover: rgb(0 0 0 / .5);
  --os-handle-bg-active: rgb(0 0 0 / .6);
  --os-handle-min-size: 32px;
  cursor: pointer;
}

/* The few scrollers that aren't a Scroll (markdown code blocks in agent replies, the editor canvas, textareas) get
   the thin native bar in the overlay pill's colour, so nothing shows the full-width classic bar. :where keeps it at
   zero specificity, under any component rule such as scrollbar-width: none. */
:where(*) { scrollbar-width: thin; scrollbar-color: rgb(0 0 0 / .35) transparent; }

/* scroll.js flags a bar while the pointer is over its strip; three classes to beat the library's
   .os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden. */
.os-scrollbar.os-theme-vistazo.os-strip-hover { opacity: 1; visibility: visible; }

.os-scrollbar-vertical.os-theme-vistazo {
  top: var(--sb-top-inset, 0px);
  bottom: var(--sb-bottom-inset, 0px);
}

/* Bars a Gutter Scroll placed in the shell's .scroll-gutter (scroll.js): only the vertical one belongs there, and
   --sb-top-inset / --sb-bottom-inset on the slot (set by scroll.js) line its track up with the scroller, which may
   start below a header or end above a footer. On the frameless window the seam is the drag frame, so the bar opts
   out or dragging the pill would move the window. */
.scroll-gutter .os-scrollbar-horizontal { display: none; }

html.hs-frameless .os-scrollbar { -webkit-app-region: no-drag; app-region: no-drag; }