/* ─────────────────────────────────────────────────────────────────────────
   QuoteChecker — Quotey-guided tour engine styles (public/lib/qc-tour.js).

   The mascot IS the interface: Quotey flies the page on banked arcs, lands
   beside the spotlighted control, points at it, and narrates from a compact
   speech bubble. Shared by the Pro dashboard tour (public/pro/tour.js) and
   the free audit pages (public/lib/free-tour.js). Everything lives under
   .qc-tour-* so nothing here can restyle the host page.
   ───────────────────────────────────────────────────────────────────────── */

/* Full-screen click-catcher: swallows page clicks while the tour is open.
   VISUALLY transparent — dimming comes from the ring's cutout shadow. */
.qc-tour-dim {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: transparent;
}

/* The spotlight: a transparent window over the target, dimmed everywhere
   else via a giant box-shadow. */
.qc-tour-ring {
  position: fixed;
  z-index: 10051;
  border-radius: 14px;
  border: 1px solid rgba(var(--qct-rgb, 47, 233, 255), 0.85);
  box-shadow:
    0 0 0 9999px rgba(1, 8, 14, 0.52),
    0 0 22px rgba(var(--qct-rgb, 47, 233, 255), 0.35);
  pointer-events: none;
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}

.qc-tour-ring.qc-tour-ring-hidden {
  border-color: transparent;
  box-shadow: 0 0 0 9999px rgba(1, 8, 14, 0.52);
}

/* ── Quotey the actor ──────────────────────────────────────────────────── */

.qc-tour-actor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10053;
  width: 92px;
  pointer-events: none;
  will-change: transform;
}

.qc-tour-actor-img {
  height: 92px;
  width: auto;
  display: block;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 14px rgba(var(--qct-rgb, 47, 233, 255), 0.22));
}

/* Grounded contact shadow — shrinks/fades while airborne (JS-animated). */
.qc-tour-shadow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10052;
  width: 64px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(1, 10, 16, 0.65), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Flight trail. */
.qc-tour-sparkle {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10052;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, rgb(var(--qct-rgb, 47, 233, 255)) 35%, #fff) 0%,
    rgba(var(--qct-rgb, 47, 233, 255), 0.55) 60%,
    transparent
  );
  box-shadow: 0 0 10px rgba(var(--qct-rgb, 47, 233, 255), 0.75);
  pointer-events: none;
}

/* ── Speech bubble ─────────────────────────────────────────────────────── */

.qc-tour-bubble {
  position: fixed;
  z-index: 10054;
  width: min(300px, calc(100vw - 32px));
  background: linear-gradient(155deg, rgba(6, 30, 42, 0.97), rgba(2, 12, 22, 0.99));
  color: var(--text, #e8f6fb);
  border: 1px solid rgba(var(--qct-rgb, 47, 233, 255), 0.4);
  border-radius: 14px;
  padding: 0.85rem 1rem 0.75rem;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.65), 0 0 26px rgba(var(--qct-rgb, 47, 233, 255), 0.12);
  font-family: var(--font, 'IBM Plex Mono', monospace);
  opacity: 0;
}

.qc-tour-kicker {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent, #2fe9ff);
  margin: 0 0 0.3rem;
}

.qc-tour-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text, #e8f6fb);
}

.qc-tour-body {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #b8d7e2;
}

.qc-tour-dots {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.qc-tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--qct-rgb, 47, 233, 255), 0.22);
}

.qc-tour-dot.is-active {
  background: var(--accent, #2fe9ff);
  box-shadow: 0 0 8px rgba(var(--qct-rgb, 47, 233, 255), 0.6);
}

.qc-tour-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qc-tour-btn {
  font: 700 0.74rem/1.2 var(--font, 'IBM Plex Mono', monospace);
  border-radius: 9px;
  padding: 0.42rem 0.8rem;
  cursor: pointer;
  background: rgba(4, 20, 30, 0.7);
  color: var(--text, #e8f6fb);
  border: 1px solid rgba(var(--qct-rgb, 47, 233, 255), 0.3);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.qc-tour-btn:hover {
  background: rgba(var(--qct-rgb, 47, 233, 255), 0.1);
  border-color: rgba(var(--qct-rgb, 47, 233, 255), 0.6);
}

.qc-tour-btn-primary {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, rgb(var(--qct-rgb, 47, 233, 255)) 80%, #04202e),
    rgb(var(--qct-rgb, 47, 233, 255))
  );
  color: #04121c;
  border: 0;
  box-shadow: 0 8px 20px -10px rgba(var(--qct-rgb, 47, 233, 255), 0.55);
}

.qc-tour-btn-primary:hover {
  filter: brightness(1.08);
}

.qc-tour-skip {
  margin-left: auto;
  background: none;
  border: none;
  color: #7fa3b0;
  font: 600 0.7rem/1.2 var(--font, 'IBM Plex Mono', monospace);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.qc-tour-skip:hover { color: var(--text, #e8f6fb); }

/* Relaunch pill (bottom-left, mirroring Quotey's corner bottom-right). */
.qc-tour-launch {
  position: fixed;
  left: 20px;
  bottom: 20px;
  /* Above all page chrome (audit consoles, sticky bars) but below the tour
     overlay stack (10050+). margin:0 pins the pill to the corner even on
     pages whose generic `button { margin }` rules would shove a
     bottom-anchored fixed button up off its spot. */
  z-index: 10040;
  margin: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(4, 30, 44, 0.88), rgba(2, 12, 24, 0.94));
  color: var(--accent, #2fe9ff);
  border: 1px solid rgba(var(--qct-rgb, 47, 233, 255), 0.45);
  font: 600 13px/1.2 var(--font, 'IBM Plex Mono', monospace);
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--qct-rgb, 47, 233, 255), 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.qc-tour-launch:hover {
  background: linear-gradient(145deg, rgba(6, 42, 60, 0.94), rgba(3, 18, 32, 0.96));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(var(--qct-rgb, 47, 233, 255), 0.3);
}

.qc-tour-launch:focus-visible {
  outline: 2px solid rgba(var(--qct-rgb, 47, 233, 255), 0.85);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .qc-tour-ring { transition: none; }
  .qc-tour-bubble { opacity: 1; }
}

@media (max-width: 640px) {
  .qc-tour-actor { width: 72px; }
  .qc-tour-actor-img { height: 72px; }
  .qc-tour-launch { left: 12px; bottom: 12px; padding: 8px 12px; }
}