/* Global scrollbar theme (Firefox + WebKit) */
:root{
  /* Firefox */
  scrollbar-color: var(--border) transparent; /* thumb | track */
  scrollbar-width: thin;
}

/* Scrollable areas that should show the styled bar */
html, body, .left, .right, #canvases {
  scrollbar-color: var(--muted-2) transparent;
  scrollbar-width: thin; /* Firefox */
}

/* WebKit browsers (Chrome, Edge, Safari) */
*::-webkit-scrollbar{
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track{
  background: linear-gradient(180deg, var(--panel), var(--panel-elev));
  border-left: 1px solid var(--border);
}

*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #152032, #0f1a2b); /* subtle, dark */
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
              inset 0 -1px 0 rgba(0,0,0,.35);
}

/* Hover/active states */
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #1a2a44, #14233a);
  border-color: #20304a;
}

*::-webkit-scrollbar-thumb:active{
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(96,165,250,.18) inset;
}

/* Corner between vertical & horizontal bars */
*::-webkit-scrollbar-corner{
  background: var(--panel-elev);
}

/* Make small screens a bit slimmer */
@media (max-width: 700px){
  *::-webkit-scrollbar{ width: 8px; height: 8px; }
}