/* ===== Scroll To Top (Streaming Top) — compact circle + purple progress ring (crisp) ===== */

/* Hide common duplicate buttons from plugins/themes */
#scrollUp, .scroll-to-top, .scrolltop, .to-top, .cd-top,
a[href="#top"].scroll-top, a#toTop, #back-to-top { display:none !important; }

:root{
  --o1-stt-size: 50px;        /* compact desktop size */
  --o1-stt-ring-w: 4px;       /* ring thickness (INTEGER for crisp edges) */
  --o1-stt-gap: 2px;          /* cushion between ring & button (INTEGER) */
  --o1-stt-soft: 6px;         /* softness of glows/blur */
  --o1-stt-deg: 0deg;         /* set by JS: 0deg..360deg */
}

/* Button container (perfect circle) */
#o1-scrolltop{
  position: fixed;
  right: clamp(12px, 2vw, 18px);
  bottom: clamp(12px, 2vw, 18px);
  z-index: 9999;
  width: var(--o1-stt-size);
  height: var(--o1-stt-size);
  border-radius: 9999px;
  display: grid; place-items: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  /* glossy button core */
  background: radial-gradient(120% 120% at 28% 28%, #7c3aed 0%, #6366f1 60%, #4f46e5 100%);
  box-shadow:
    0 12px 24px rgba(79,70,229,.35),
    inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0; pointer-events: none;
  transform: translateY(8px) scale(.96);
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  will-change: transform;
}

/* Visible state */
#o1-scrolltop.show{ opacity:1; pointer-events:auto; transform: translateY(0) scale(1); }
#o1-scrolltop:active{ transform: translateY(0) scale(.97); }
#o1-scrolltop:focus-visible{
  outline:0;
  box-shadow:
    0 0 0 3px rgba(99,102,241,.45),
    0 12px 24px rgba(79,70,229,.35),
    inset 0 0 0 1px rgba(255,255,255,.20);
}

/* Up chevron (Font Awesome) */
#o1-scrolltop .o1-icon{ font-size: 16px; line-height: 1; }

/* =========================================================================
   Progress ring — solid purple arc + faint remainder, with crisp spacing
   ========================================================================= */
#o1-scrolltop::before{
  content: "";
  position: absolute;
  /* Draw the ring outside the button by exactly (ring + gap) */
  inset: calc((var(--o1-stt-ring-w) + var(--o1-stt-gap)) * -1);
  border-radius: 9999px;

  /* Solid purple arc (visible progress) + faint remainder */
  background: conic-gradient(
    #8b5cf6 var(--o1-stt-deg),
    rgba(255,255,255,.16) 0
  );

  /* Mask to keep a precise ring with integer math to avoid anti-alias wobble */
  /* Outer (full disc) minus inner circle -> ring */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;     /* Safari */
          mask-composite: exclude; /* Others */
  padding: var(--o1-stt-ring-w);

  /* Extra crispness: tiny hairline + subtle drop */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 6px 18px rgba(99,102,241,.22);
  pointer-events: none;
}

/* Inner halo (smooth cushion, no dark gap) */
#o1-scrolltop::after{
  content:"";
  position:absolute;
  inset: calc(var(--o1-stt-gap) * -1);
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgba(255,255,255,.14), rgba(255,255,255,0) 72%);
  filter: blur(calc(var(--o1-stt-soft) * .25));
  pointer-events:none;
}

/* Mobile tweaks */
@media (max-width: 640px){
  :root{
    --o1-stt-size: 44px;
    --o1-stt-ring-w: 4px;   /* keep integer */
    --o1-stt-gap: 2px;      /* keep integer */
    --o1-stt-soft: 5px;
  }
  #o1-scrolltop{
    box-shadow:
      0 8px 18px rgba(79,70,229,.35),
      inset 0 0 0 1px rgba(255,255,255,.18);
  }
  #o1-scrolltop .o1-icon{ font-size: 14px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #o1-scrolltop{ transition: none; }
}



/* ===== Modern Scrollbar Styling (Streaming Top theme) ===== */

/* For WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 14px;   /* not too thin */
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #0B0E17;               /* dark base */
  border-radius: 10px;
  margin: 4px;                       /* spacing inside track */
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8b5cf6, #6366f1);
  border-radius: 10px;
  border: 3px solid #0B0E17;         /* spacing between thumb & track */
  box-shadow: 0 0 10px rgba(124, 58, 237, 0.4); /* subtle glow */
  transition: all 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #a78bfa, #818cf8);
  box-shadow: 0 0 14px rgba(124, 58, 237, 0.6);
}

/* Firefox */
* {
  scrollbar-width: auto;                        /* auto but styled */
  scrollbar-color: #7c3aed #0B0E17;             /* thumb | track */
}