/* Neon Purple→Orange Flicker Scrollbar (sidebar only)
   - Works in Chromium/Safari for animated thumb
   - Firefox falls back to static color (no scrollbar animation support)
   - Add this LAST in extra_css
*/

:root{
  --sb-purple:#8a3cf4;
  --sb-orange:#ff7e33;
  --sb-track:transparent;
  --sb-width:12px;
}

/* Firefox fallback (static) */
.md-sidebar--primary .md-sidebar__scrollwrap{
  scrollbar-width: thin;
  scrollbar-color: var(--sb-purple) var(--sb-track);
}

/* WebKit/Chromium */
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar{
  width: var(--sb-width);
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-track{
  background: var(--sb-track);
}
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb{
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  background: linear-gradient(var(--sb-purple), var(--sb-orange));
  box-shadow:
    0 0 6px rgba(138,60,244,.55),
    0 0 12px rgba(255,126,51,.35);
  animation: sb-flicker 1.25s infinite steps(12, end);
}

/* Slightly stronger on hover */
.md-sidebar--primary .md-sidebar__scrollwrap::-webkit-scrollbar-thumb:hover{
  animation-duration: .9s;
}

/* Flicker animation: vary glow intensity and shift gradient angle a bit */
@keyframes sb-flicker {
  0%   { box-shadow: 0 0 4px rgba(138,60,244,.40), 0 0 8px rgba(255,126,51,.25);   background: linear-gradient(180deg, var(--sb-purple), var(--sb-orange)); }
  12%  { box-shadow: 0 0 10px rgba(138,60,244,.75), 0 0 16px rgba(255,126,51,.55); background: linear-gradient(190deg, var(--sb-purple), var(--sb-orange)); }
  25%  { box-shadow: 0 0 5px rgba(138,60,244,.45), 0 0 9px rgba(255,126,51,.30);   background: linear-gradient(170deg, var(--sb-purple), var(--sb-orange)); }
  37%  { box-shadow: 0 0 12px rgba(138,60,244,.85), 0 0 22px rgba(255,126,51,.65); background: linear-gradient(200deg, var(--sb-purple), var(--sb-orange)); }
  50%  { box-shadow: 0 0 7px rgba(138,60,244,.55), 0 0 12px rgba(255,126,51,.40);  background: linear-gradient(175deg, var(--sb-purple), var(--sb-orange)); }
  62%  { box-shadow: 0 0 14px rgba(138,60,244,.9),  0 0 26px rgba(255,126,51,.70); background: linear-gradient(205deg, var(--sb-purple), var(--sb-orange)); }
  75%  { box-shadow: 0 0 6px rgba(138,60,244,.5),   0 0 10px rgba(255,126,51,.35); background: linear-gradient(185deg, var(--sb-purple), var(--sb-orange)); }
  87%  { box-shadow: 0 0 11px rgba(138,60,244,.8),  0 0 20px rgba(255,126,51,.60); background: linear-gradient(195deg, var(--sb-purple), var(--sb-orange)); }
  100% { box-shadow: 0 0 6px rgba(138,60,244,.55), 0 0 12px rgba(255,126,51,.35); background: linear-gradient(180deg, var(--sb-purple), var(--sb-orange)); }
}