/*!
 * Wuffi Pet — Modern Scrollbar (theme-aware)
 * Webkit (Chrome/Safari/Edge) + Firefox + sidebar variants
 */

/* ═════════════════════════════════════════════════════════════════
   GLOBAL SCROLLBAR — Page level
   ═════════════════════════════════════════════════════════════════ */
html {
  scrollbar-width: thin;
  scrollbar-color: #7c3aed transparent;
}
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0;
}
html::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6c3eff 0%, #b57cff 100%);
  border-radius: 20px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s ease;
}
html::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8350ff 0%, #c98fff 100%);
  background-clip: padding-box;
}
html::-webkit-scrollbar-corner {
  background: transparent;
}

/* ═════════════════════════════════════════════════════════════════
   SIDEBAR (slim variant) — used in dashboard sidebars + dropdown menus
   ═════════════════════════════════════════════════════════════════ */
.wf-dash-sidebar,
.wfb-toc,
.sp-style-2-highlights,
.wfa-tool-list,
.sp-chat-list,
.sp-conversation-list {
  scrollbar-width: thin;
  scrollbar-color: #6c3eff transparent;
}
.wf-dash-sidebar::-webkit-scrollbar,
.wfb-toc::-webkit-scrollbar,
.sp-style-2-highlights::-webkit-scrollbar,
.wfa-tool-list::-webkit-scrollbar,
.sp-chat-list::-webkit-scrollbar,
.sp-conversation-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.wf-dash-sidebar::-webkit-scrollbar-track,
.wfb-toc::-webkit-scrollbar-track,
.sp-style-2-highlights::-webkit-scrollbar-track,
.wfa-tool-list::-webkit-scrollbar-track,
.sp-chat-list::-webkit-scrollbar-track,
.sp-conversation-list::-webkit-scrollbar-track {
  background: transparent;
}
.wf-dash-sidebar::-webkit-scrollbar-thumb,
.wfb-toc::-webkit-scrollbar-thumb,
.sp-style-2-highlights::-webkit-scrollbar-thumb,
.wfa-tool-list::-webkit-scrollbar-thumb,
.sp-chat-list::-webkit-scrollbar-thumb,
.sp-conversation-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6c3eff 0%, #b57cff 100%);
  border-radius: 10px;
}

/* ═════════════════════════════════════════════════════════════════
   ARTICLE / READING — keep slim but accent-colored
   ═════════════════════════════════════════════════════════════════ */
.wfb-article-content,
.wfa-tool-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 185, 35, 0.6) transparent;
}
.wfb-article-content::-webkit-scrollbar,
.wfa-tool-content::-webkit-scrollbar {
  width: 8px;
}
.wfb-article-content::-webkit-scrollbar-thumb,
.wfa-tool-content::-webkit-scrollbar-thumb {
  background: rgba(255, 185, 35, 0.55);
  border-radius: 8px;
}

/* ═════════════════════════════════════════════════════════════════
   MOBILE — keep native feel (touch scroll)
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (pointer: coarse) {
  html::-webkit-scrollbar { width: 0; height: 0; display: none; }
  html { scrollbar-width: none; }
}