/**
 * EVIL — scrollbar globali (Firefox + WebKit/Blink)
 * Caricare dopo system-theme.css su tutte le pagine.
 */
:root {
  --evil-scrollbar-size: 10px;
  --evil-scrollbar-size-touch: 12px;
  --evil-scrollbar-track: rgba(6, 8, 14, 0.92);
  --evil-scrollbar-track-edge: rgba(255, 255, 255, 0.05);
  --evil-scrollbar-thumb: rgba(0, 255, 156, 0.38);
  --evil-scrollbar-thumb-mid: rgba(125, 211, 252, 0.28);
  --evil-scrollbar-thumb-end: rgba(245, 158, 11, 0.42);
  --evil-scrollbar-thumb-hover: rgba(0, 255, 156, 0.72);
  --evil-scrollbar-thumb-active: #00ff9c;
  --evil-scrollbar-border: rgba(6, 8, 14, 0.85);
}

/* Firefox */
html,
body,
body.evil-theme {
  scrollbar-width: thin;
  scrollbar-color: var(--evil-scrollbar-thumb) var(--evil-scrollbar-track);
}

@media (pointer: coarse) {
  html,
  body,
  body.evil-theme {
    scrollbar-width: auto;
    scrollbar-color: var(--evil-scrollbar-thumb-hover) var(--evil-scrollbar-track);
  }
}

/* WebKit / Blink — viewport + tutti i contenitori scrollabili */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--evil-scrollbar-size);
  height: var(--evil-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: var(--evil-scrollbar-track);
  border-left: 1px solid var(--evil-scrollbar-track-edge);
  border-radius: 999px;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    var(--evil-scrollbar-thumb) 0%,
    var(--evil-scrollbar-thumb-mid) 52%,
    var(--evil-scrollbar-thumb-end) 100%
  );
  border: 2px solid var(--evil-scrollbar-border);
  border-radius: 999px;
  min-height: 40px;
  box-shadow: inset 0 0 6px rgba(0, 255, 156, 0.12);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    var(--evil-scrollbar-thumb-hover) 0%,
    rgba(125, 211, 252, 0.45) 55%,
    rgba(245, 158, 11, 0.62) 100%
  );
  box-shadow:
    inset 0 0 8px rgba(0, 255, 156, 0.2),
    0 0 10px rgba(0, 255, 156, 0.15);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background: var(--evil-scrollbar-thumb-active);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: var(--evil-scrollbar-track);
}

/* Track verticale con margine su pannelli interni (modali, nav mobile, terminali) */
header nav.active::-webkit-scrollbar-track,
.vlab-modal__body::-webkit-scrollbar-track,
.vlab-terminal__body::-webkit-scrollbar-track,
.ir-timeline::-webkit-scrollbar-track,
.am-feed-list::-webkit-scrollbar-track,
.ha-feed-list::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(9, 14, 24, 0.88);
}

@media (pointer: coarse) {
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: var(--evil-scrollbar-size-touch);
    height: var(--evil-scrollbar-size-touch);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    transition: none;
  }
}