/* Базовые стили */
body { margin: 0; }

/* ─── A11y baseline ──────────────────────────────────────────────────────
 * Visible focus ring for keyboard navigation. :focus-visible is shown only
 * when the browser detects keyboard-driven focus (Tab, arrows) — mouse
 * clicks don't trigger it, so the UI stays clean for pointer users while
 * remaining navigable for keyboard / screen-reader users.
 */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid #818cf8; /* indigo-400 */
  outline-offset: 2px;
  border-radius: 4px;
}

/* Range inputs and contenteditable need slightly more breathing room */
input[type="range"]:focus-visible,
[contenteditable]:focus-visible {
  outline-offset: 4px;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────
 * Users with vestibular disorders or motion sensitivity can opt out of
 * animations via OS settings. Honor that — collapse all animations and
 * transitions to near-zero so nothing appears to move, but state still
 * changes (vs. removing transitions entirely, which can cause layout
 * jumps on toggle-driven UI like our sidebar collapse).
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Custom scrollbars ──────────────────────────────────────────────────
 * Native scrollbars on Windows are wide, light, and fight the dark theme.
 * Tailwind's scrollbar-thin classes need a plugin we don't ship, so style
 * here directly. Firefox uses its own properties; both reach all scroll
 * containers (sidebar, highlights list, heatmap, modals).
 */
::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(17, 24, 39, 0.4); /* gray-900/40 */
}
::-webkit-scrollbar-thumb {
  background: rgba(75, 85, 99, 0.6); /* gray-600/60 */
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.85); /* gray-500/85 */
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Heatmap-specific: even thinner since it's a tight 64 px strip */
#heatmap-container::-webkit-scrollbar {
  height: 4px;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(75, 85, 99, 0.6) rgba(17, 24, 39, 0.4);
}

/* ─── Indeterminate progress bar ─────────────────────────────────────────
 * Used in the sidebar footer for operations whose total is unknown ahead
 * of time (chat download — Twitch GQL gives us cursor pagination, no
 * count). A 50%-wide indigo gradient slides inside the track to signal
 * "alive, working" without lying about percent-complete.
 */
@keyframes progress-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
.progress-indeterminate {
  width: 33%;
  background: linear-gradient(90deg, transparent, rgb(99, 102, 241), transparent);
  animation: progress-indeterminate 1.6s ease-in-out infinite;
}