/* ==========================================================================
   skiper-scroll.css — styles for the vanilla "skiper1" overlay scrollbar.
   Thin track at rest, thickens on hover/scroll; rounded draggable handle;
   floating progress card. Native scrollbars on the host should be hidden so
   this is the only visible scroll affordance.
   ========================================================================== */

/* Hide the native scrollbar on elements that carry a skiper overlay. */
.skiper-host {
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge/IE */
}
.skiper-host::-webkit-scrollbar { width: 0; height: 0; }

.skiper-scroll {
  position: absolute;
  top: 8px;
  bottom: 8px;
  right: 6px;
  width: 14px;
  z-index: 20;
  pointer-events: none;            /* track re-enables it */
  opacity: 0;
  transition: opacity .25s ease;
}
/* Reveal on activity (scroll/drag) or when hovering the scroll area's host. */
.skiper-scroll.is-active,
.skiper-host:hover > .skiper-scroll,
.skiper-host:hover .skiper-scroll { opacity: 1; }
.skiper-scroll.is-idle-empty { display: none; }

.skiper-track {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  width: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-faint, #94a3b8) 22%, transparent);
  pointer-events: auto;
  cursor: pointer;
  transition: width .18s ease, background .18s ease;
}
.skiper-scroll:hover .skiper-track,
.skiper-scroll.is-dragging .skiper-track { width: 10px; }

.skiper-handle {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #2563eb) 70%, var(--text-muted, #64748b));
  box-shadow: 0 1px 3px rgba(15, 23, 42, .25);
  cursor: grab;
  transition: background .18s ease, transform .04s linear;
  will-change: transform;
}
.skiper-scroll:hover .skiper-handle { background: var(--accent, #2563eb); }
.skiper-scroll.is-dragging .skiper-handle { cursor: grabbing; background: var(--accent, #2563eb); }

/* Floating progress card — the "scroll card" from skiper1. */
.skiper-card {
  position: absolute;
  right: 20px;
  transform: translateY(-50%);
  padding: 3px 8px;
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace);
  color: #fff;
  background: color-mix(in srgb, var(--accent, #2563eb) 92%, #000);
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) scale(.9);
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .28);
}
.skiper-card::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: inherit;
}
.skiper-scroll:hover .skiper-card,
.skiper-scroll.is-dragging .skiper-card { opacity: 1; transform: translateY(-50%) scale(1); }

/* Card on the LEFT of the track (used when the track hugs the container edge,
   e.g. Code Genie compare panes where the diff rail occupies the far right). */
.skiper-scroll--cardleft .skiper-card { right: auto; left: 20px; }
.skiper-scroll--cardleft .skiper-card::after { right: auto; left: -4px; }

@media (prefers-reduced-motion: reduce) {
  .skiper-scroll, .skiper-track, .skiper-handle, .skiper-card { transition: none; }
}