/* Shared by the portal and standalone sign-in/security pages. Native scrolling
   stays intact; the sidebar keeps its existing custom drag target and geometry. */
:root {
  --scroll-accent:var(--sidebar-accent-foreground,var(--accent));
  --scroll-thumb:color-mix(in srgb,var(--scroll-accent) 65%,transparent);
  --scroll-thumb-hover:color-mix(in srgb,var(--scroll-accent) 85%,transparent);
}
:where(*) { scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent; }

/* Chromium/WebKit allow the sidebar's rounded, narrow visual thumb inside a
   wider draggable gutter. Firefox uses the equivalent native thin scrollbar. */
@supports selector(::-webkit-scrollbar) {
  :where(*) { scrollbar-width:auto; scrollbar-color:auto; }
  ::-webkit-scrollbar { width:10px; height:10px; }
  ::-webkit-scrollbar-track,::-webkit-scrollbar-corner { background:transparent; }
  ::-webkit-scrollbar-thumb {
    background:var(--scroll-thumb);
    border:3px solid transparent;
    background-clip:padding-box;
    border-radius:999px;
    min-height:32px;
    min-width:32px;
  }
  ::-webkit-scrollbar-thumb:hover { background-color:var(--scroll-thumb-hover); }
  ::-webkit-scrollbar-thumb:active { background-color:var(--scroll-accent); }
  ::-webkit-scrollbar-button { display:none; }
}

/* Radix ScrollArea uses its own thumb; keep its native wheel/touch handling. */
[data-slot=scroll-area-thumb] { background:var(--scroll-thumb); border-radius:999px; }
[data-slot=scroll-area-scrollbar]:hover [data-slot=scroll-area-thumb] { background:var(--scroll-thumb-hover); }
[data-slot=scroll-area-scrollbar]:active [data-slot=scroll-area-thumb] { background:var(--scroll-accent); }

@media(forced-colors:active) {
  :where(*) { scrollbar-color:auto; }
  ::-webkit-scrollbar-thumb { background-color:ButtonText; }
  [data-slot=scroll-area-thumb] { background:ButtonText; }
}