/* ============================================================
   ToneGrid — app-wide custom scrollbar
   Faithful reproduction of the assistant-ui / shadcn ScrollArea look:
   a thin, fully-rounded, "floating" thumb on a transparent track,
   theme-aware via html[data-theme]. Applied globally so every page and
   every inner scroll container shares one consistent scrollbar.
   Linked from includes/meta.php and includes/header.php.
   ============================================================ */
:root{
  --tg-sb-size: 10px;                        /* ~ shadcn w-2.5 / h-2.5 */
  --tg-sb-track: transparent;
  /* default theme = dark */
  --tg-sb-thumb: rgba(226, 232, 240, 0.22);
  --tg-sb-thumb-hover: rgba(226, 232, 240, 0.42);
}
html[data-theme="light"]{
  --tg-sb-thumb: rgba(15, 23, 42, 0.22);
  --tg-sb-thumb-hover: rgba(15, 23, 42, 0.40);
}

/* Firefox + standards-track */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--tg-sb-thumb) var(--tg-sb-track);
}

/* WebKit / Blink — Chrome, Edge, Safari, in-app webviews */
::-webkit-scrollbar{
  width: var(--tg-sb-size);
  height: var(--tg-sb-size);
}
::-webkit-scrollbar-track{
  background: var(--tg-sb-track);
}
::-webkit-scrollbar-thumb{
  background: var(--tg-sb-thumb);
  border-radius: 9999px;
  border: 2px solid transparent;             /* inset gap => floating thumb */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background: var(--tg-sb-thumb-hover);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner{ background: transparent; }
::-webkit-scrollbar-button{ width: 0; height: 0; display: none; }