/* Bundle reader: multi-video swipe hint. NO CSS animations on the root — Tailwind CDN
 * Preflight (prefers-reduced-motion) sets * { animation-duration, transition-duration: 0.01ms !important },
 * which collapses any keyframe/timed UI to a single frame. Visibility window is JS-driven (setTimeout). */

/* Middle of the lower half of the viewport (~summary band), not flush to top. */
.reader-swipe-hint-root {
  position: fixed;
  left: 0;
  right: auto;
  top: calc(0.75 * var(--reader-layout-h, 100vh));
  transform: translateY(-50%);
  bottom: auto;
  width: var(--reader-layout-w, 100vw);
  max-width: var(--reader-layout-w, 100vw);
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 5990;
  pointer-events: none;
}

@supports (height: 100dvh) {
  .reader-swipe-hint-root {
    top: calc(0.75 * var(--reader-layout-h, 100dvh));
  }
}

/* Kill Tailwind * motion resets; do NOT set opacity/visibility here — inline attrs broke .--hide in Chrome. */
#reader-swipe-hint-root.reader-swipe-hint-root {
  animation: none !important;
  animation-name: none !important;
  transition: none !important;
  isolation: isolate !important;
}

/* Extra class so this always beats the base #id rule when hiding. */
#reader-swipe-hint-root.reader-swipe-hint-root.reader-swipe-hint--hide {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.35s ease, visibility 0.35s ease !important;
}

.reader-swipe-hint-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1.15rem 0.7rem 1rem;
  border-radius: 9999px;
  max-width: min(100%, calc(var(--reader-layout-w, 100vw) - 1.5rem));
  background: linear-gradient(
    145deg,
    rgba(67, 56, 202, 0.98) 0%,
    rgba(49, 46, 129, 0.98) 45%,
    rgba(30, 27, 75, 0.99) 100%
  );
  border: 2px solid rgba(199, 210, 254, 0.65);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.55),
    0 0 32px rgba(99, 102, 241, 0.55),
    0 0 56px rgba(129, 140, 248, 0.35);
}

.reader-swipe-hint-text {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.reader-swipe-hint-arrows {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  color: #e0e7ff;
  filter: drop-shadow(0 0 8px rgba(165, 180, 252, 0.95));
}

.reader-swipe-hint-arrows svg {
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}