/* ════════════════════════════════════════════════════════════════════════
   Tour — overlay styles for the guided spotlight engine (tour.js).
   Themed for the Nocturne house style by default (dark navy dim, blue→purple
   accent ring). Override the CSS custom properties on `.tour-root` — or pass
   { dim, ring } to Tour.start() — to retheme.
   ════════════════════════════════════════════════════════════════════════ */

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

/* the four "picture-frame" dim panels around the spotlight hole */
.tour-dimp {
  position: fixed;
  background: var(--tour-dim, rgba(6, 10, 20, 0.74));
  backdrop-filter: blur(1.5px);
  pointer-events: auto;
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* highlight ring around the live control */
.tour-ring {
  position: fixed; pointer-events: none;
  border-radius: var(--tour-radius, 10px);
  box-shadow: 0 0 0 2px var(--tour-ring, #4f6ef7),
              0 0 0 6px rgba(79, 110, 247, 0.28),
              0 0 22px 4px rgba(79, 110, 247, 0.35);
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Narrator (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(0, 0, 0, 0.55));
  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: 86px; height: 86px; object-fit: contain; flex: 0 0 auto;
  margin: 0 -10px -6px 0; position: relative; z-index: 1;
  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, #16223c 0%, #111a2c 100%);
  border: 1px solid rgba(79, 110, 247, 0.35);
  border-radius: 14px; padding: 14px 16px 12px; min-width: 240px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  position: relative;
}
.tour-title { font-size: 14.5px; font-weight: 700; color: #fff; margin-bottom: 5px; letter-spacing: 0.2px; }
.tour-text { font-size: 13px; line-height: 1.55; color: #c2d0e6; }
.tour-text b { color: #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: #647a9e; letter-spacing: 0.4px; }

.tour-btn {
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  padding: 7px 13px; border-radius: 7px; color: #c2d0e6;
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  transition: transform 0.12s, border-color 0.15s, color 0.15s, box-shadow 0.15s, background 0.15s;
}
.tour-btn:hover { color: #fff; border-color: #4f6ef7; transform: translateY(-1px); }
.tour-skip { border-color: transparent; background: transparent; color: #647a9e; padding: 7px 8px; }
.tour-skip:hover { color: #c2d0e6; transform: none; }
.tour-primary {
  color: #fff; border: none;
  background: linear-gradient(135deg, #4f6ef7 0%, #7c3aed 100%);
  box-shadow: 0 4px 16px rgba(79, 110, 247, 0.4);
}
.tour-primary:hover { box-shadow: 0 6px 22px rgba(79, 110, 247, 0.55); }

/* host hook: while a tour is running, body has .tour-on (host can reveal
   hover-only affordances, e.g. `body.tour-on .row-action { opacity: 1 }`). */

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