/* ════════════════════════════════════════════════════════════════════════
   Tour — overlay styles for the guided spotlight engine (tour.js).
   Vendored from the guided-tour skill + rethemed to the GIMS "Watery" house
   style (deep-water dim, aqua ring, tan-framed green bubble, blue CTA, gnome
   narrator). Tokens from watery.css with safe fallbacks.
   ════════════════════════════════════════════════════════════════════════ */

.tour-root {
  position: fixed; inset: 0; pointer-events: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tour-dimp {
  position: fixed;
  background: var(--tour-dim, rgba(3, 12, 9, 0.74));
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-ring {
  position: fixed; pointer-events: none;
  border-radius: var(--tour-radius, 10px);
  box-shadow: 0 0 0 2px var(--tour-ring, #2dd4bf),
              0 0 0 6px rgba(45, 212, 191, 0.28),
              0 0 22px 4px rgba(45, 212, 191, 0.35);
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Narrator (gnome avatar + speech bubble + controls) ──────────────────── */
.tour-narrator {
  position: fixed; display: flex; align-items: flex-end; gap: 0;
  pointer-events: auto; filter: drop-shadow(0 18px 40px rgba(2, 14, 11, 0.6));
  transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1), top 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  animation: tour-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes tour-pop { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }

.tour-avatar {
  width: 92px; height: 96px; object-fit: contain; object-position: bottom; flex: 0 0 auto;
  margin: 0 -10px -2px 0; position: relative; z-index: 1;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 20px rgba(244, 201, 135, 0.18));
  animation: tour-bob 3.4s ease-in-out infinite;
}
@keyframes tour-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.tour-bubble {
  background: linear-gradient(180deg, var(--card, #11362a) 0%, var(--surface, #0e2a23) 100%);
  border: 2px solid var(--card-edge, rgba(216, 189, 138, 0.55));
  border-radius: var(--radius-lg, 16px); padding: 14px 16px 12px; min-width: 248px;
  box-shadow: var(--shadow-lg, 0 14px 44px rgba(2, 14, 11, 0.6));
  position: relative;
}
.tour-title { font-size: 14.5px; font-weight: 700; color: var(--text, #e8f4ee); margin-bottom: 5px; letter-spacing: 0.2px; }
.tour-text { font-size: 13px; line-height: 1.55; color: var(--text-mid, #a6cabd); }
.tour-text b { color: var(--text, #fff); }

.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.tour-grow { flex: 1; }
.tour-progress { font-size: 11px; font-weight: 600; color: var(--text-soft, #6f988b); letter-spacing: 0.4px; }

.tour-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: var(--radius-sm, 8px); color: var(--text-mid, #a6cabd);
  border: 1px solid var(--border2, rgba(140, 230, 200, 0.3)); background: var(--surface2, rgba(20, 58, 48, 0.5));
  transition: transform 0.12s, border-color 0.15s, color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tour-btn:hover { color: var(--text, #fff); border-color: var(--accent, #2dd4bf); transform: translateY(-1px); }
.tour-skip { border-color: transparent; background: transparent; color: var(--text-soft, #6f988b); padding: 7px 8px; }
.tour-skip:hover { color: var(--text-mid, #c2d0e6); transform: none; }
.tour-primary {
  color: #fff; border: none;
  background: linear-gradient(135deg, var(--blue-cta-1, #1d56c9) 0%, var(--blue-cta-2, #2970d8) 100%);
  box-shadow: 0 4px 16px var(--blue-glow, rgba(79, 157, 255, 0.36));
}
.tour-primary:hover { box-shadow: 0 6px 22px var(--blue-glow, rgba(79, 157, 255, 0.55)); }

/* ── Peek / "view the whole page" — a pill pinned just below the bubble's bottom-right corner
   (positioned by the engine's _positionPeek; the right/bottom below is only an initial fallback).
   Fades the spotlight + hides the narrator so the visitor sees + scrolls the real page. */
.tour-peek {
  position: fixed; right: 16px; bottom: 16px; z-index: 9100; pointer-events: auto;
  background: var(--card, #11362a); color: var(--text-mid, #c2d7cd);
  border: 1px solid var(--card-edge, rgba(216, 189, 138, 0.5));
  box-shadow: 0 8px 24px rgba(2, 14, 11, 0.55);
}
.tour-peek:hover { color: var(--text, #fff); border-color: var(--accent, #2dd4bf); }

.tour-peeking .tour-dimp { opacity: 0 !important; pointer-events: none !important; }
.tour-peeking .tour-ring { opacity: 0 !important; }
.tour-peeking .tour-narrator { display: none !important; }   /* only the Resume pill remains */
/* while peeking, the Resume pill glows in the screen's bottom-right corner so it's easy to find */
.tour-peeking .tour-peek { animation: tour-peek-glow 1.5s ease-in-out infinite; }
@keyframes tour-peek-glow {
  0%, 100% { box-shadow: 0 6px 20px rgba(45, 212, 191, 0.55); }
  50%      { box-shadow: 0 6px 28px rgba(45, 212, 191, 0.92), 0 0 0 6px rgba(45, 212, 191, 0.18); }
}

@media (max-width: 560px) {
  .tour-avatar { width: 60px; height: 60px; }
  .tour-bubble { min-width: 0; }
}