/* tour.css — Coach-mark engine styles for the Stack Tour.
 *
 * INERT by default: no selectors fire until .tour-overlay is present in the
 * DOM (injected by tour.js). Default blue+topnav chrome is byte-identical
 * before and after this sheet loads.
 *
 * Design-system rules:
 *   - --ds-* tokens only — no raw hex, no var(--primary).
 *   - Motion via --ds-motion-* / --ds-ease-*; honor prefers-reduced-motion.
 *   - Scrim is non-blocking (pointer-events:none); only the popover captures.
 *   - z-index ladder: scrim 9000, spotlight 9010, popover 9020.
 */

/* ── Scrim ─────────────────────────────────────────────────────────────────
   Light, non-blocking overlay. pointer-events:none keeps the page interactive
   so the user can freely dismiss or scroll without clicking the popover. */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Translucent dark tint from the text-ink token (no raw color literal) —
     matches the codebase's color-mix scrim pattern (e.g. chat.css). */
  background: color-mix(in srgb, var(--ds-text-primary) 34%, transparent);
  pointer-events: none;
  /* Fade in */
  animation: tour-scrim-in var(--ds-motion-med) var(--ds-ease-enter) both;
}

@keyframes tour-scrim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tour-overlay { animation: none; }
}

/* ── Spotlight host ─────────────────────────────────────────────────────────
   The tour-spotlight class is added to the anchor element while a step is
   active. It lifts the target above the scrim and gives it a backing plate +
   an animated gradient ring. */
.tour-spotlight {
  position: relative;
  z-index: 9010 !important;
  /* A normal panel radius — NOT the pill radius: on a large tabs+table zone a
     pill radius rounds the corners by half its height and reads as a blob.
     --ds-radius-lg isn't a declared token, so carry the 12px fallback (same as
     chat.css) — without it border-radius resolves to 0 and the ring goes square. */
  border-radius: var(--ds-radius-lg, 12px);
  /* Backing plate (white gap) + a clean primary ring, so the target reads
     lifted off the dimmed page regardless of the surface behind it. */
  /* Opaque light fill so the lifted target never shows the dark scrim through
     a transparent / background-less zone (e.g. the My Stack search+sort+table
     band, which otherwise reads dark grey because the scrim bleeds through). */
  background: var(--ds-surface);
  box-shadow:
    0 0 0 6px var(--ds-surface),
    0 0 0 8px var(--ds-assistant);
  outline: none;
}

/* A z-index on `.tour-spotlight` only outranks the scrim (9000) if the
   spotlighted element is NOT inside another positioned ancestor with its own
   z-index — e.g. the rail (`position: fixed; z-index: 40`, rail.css). Such an
   ancestor creates its own stacking context, and `.tour-spotlight`'s 9010 is
   then resolved INSIDE that context (painted at the ancestor's z-index, 40),
   never against the root-level scrim. tour.js walks up from the anchor to
   find that ancestor and adds this class for the step's duration, promoting
   the whole context to just above the scrim (9000 < 9011 < the popover's
   9020, so the popover still renders on top of everything). Removed when the
   step ends — the rail's normal z-index: 40 is otherwise untouched. */
.tour-lifts-ancestor {
  z-index: 9011 !important;
}

/* ── Popover ─────────────────────────────────────────────────────────────────
   role="dialog" aria-modal="false". Sits above scrim + spotlight.
   pointer-events:auto so only the popover captures interactions. */
.tour-popover {
  position: fixed;
  z-index: 9020;
  width: min(380px, calc(100vw - 24px));
  /* Vertical counterpart to the width clamp above: without it, a card taller
     than the space either side of its anchor gets pinned at the viewport top
     by the JS positioning fallback and spills past the bottom edge with no
     way to reach the rest of it. The header/footer stay put; only the body
     (below) scrolls, so title + actions are always visible. */
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 16px;
  box-shadow: var(--ds-shadow-lg);
  pointer-events: auto;
  /* Slide + fade entrance */
  animation: tour-pop-in var(--ds-motion-med) var(--ds-ease-enter) both;
  overflow: hidden;
}

@keyframes tour-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tour-popover { animation: none; }
}

/* Header strip — Agnes orb + label */
.tour-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ds-border-light);
  flex-shrink: 0;
}

.tour-popover-header-orb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-assistant-soft);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.tour-popover-header-orb svg {
  width: 16px;
  height: 16px;
  color: var(--ds-assistant);
}

.tour-popover-header-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Body — title + description + bullets. Only this region scrolls when the
   card exceeds the popover's max-height; header + footer stay pinned. */
.tour-popover-body {
  padding: 14px 16px 12px;
  overflow-y: auto;
  min-height: 0;
}

.tour-popover-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-text-primary);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.tour-popover-desc {
  font-size: 14px;
  color: var(--ds-text-secondary);
  margin: 0 0 10px;
  line-height: 1.6;
}

.tour-popover-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tour-popover-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ds-text-secondary);
  line-height: 1.5;
}

.tour-popover-point::before {
  content: '';
  flex-shrink: 0;
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-assistant);
}

/* Footer — progress dots (left) + action buttons (right) */
.tour-popover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ds-border-light);
  flex-shrink: 0;
}

/* Single-step coach-mark: no progress dots, so the lone action row would
   otherwise land at flex-start under space-between. */
.tour-popover-footer--solo {
  justify-content: flex-end;
}

/* Progress dots */
.tour-dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-border);
  transition: background var(--ds-motion-fast) var(--ds-ease-standard),
              transform var(--ds-motion-fast) var(--ds-ease-standard);
}

.tour-dot.on {
  background: var(--ds-assistant);
  transform: scale(1.3);
}

/* Action buttons row */
.tour-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Shared base for all tour buttons */
.tour-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  padding: 6px 12px;
  transition:
    background var(--ds-motion-fast) var(--ds-ease-standard),
    color var(--ds-motion-fast) var(--ds-ease-standard),
    opacity var(--ds-motion-fast) var(--ds-ease-standard);
  white-space: nowrap;
}

.tour-btn:focus-visible {
  outline: var(--ds-focus-outline);
  outline-offset: var(--ds-focus-outline-offset);
}

/* "I'll explore on my own" — ghost */
.tour-btn-end {
  background: transparent;
  color: var(--ds-text-muted);
}

.tour-btn-end:hover {
  background: var(--ds-surface-dim);
  color: var(--ds-text-secondary);
}

/* Back */
.tour-btn-back {
  background: var(--ds-surface-dim);
  color: var(--ds-text-secondary);
}

.tour-btn-back:hover {
  background: var(--ds-surface-sunken);
  color: var(--ds-text-primary);
}

.tour-btn-back:disabled {
  opacity: 0.38;
  cursor: default;
}

/* Next / Done */
.tour-btn-next {
  background: var(--ds-assistant);
  color: var(--ds-text-inverse);
}

.tour-btn-next:hover {
  background: var(--ds-assistant-dark);
}

/* Final choice — "Finish onboarding" (primary) */
.tour-btn-finish {
  background: var(--ds-assistant);
  color: var(--ds-text-inverse);
}

.tour-btn-finish:hover {
  background: var(--ds-assistant-dark);
}

/* Final choice — "Connect my AI tools" (secondary) */
.tour-btn-connect {
  background: var(--ds-surface-dim);
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-border);
}

.tour-btn-connect:hover {
  background: var(--ds-surface-sunken);
}

/* ── Compact mode (≈phone widths) ─────────────────────────────────────────
   tour.css previously had no width breakpoint at all — every dimension below
   was a desktop constant, and the final step's button stacking (moved into
   this block) had a comment claiming it was for "small screens" while
   actually applying unconditionally at every width, including desktop. */
@media (max-width: 600px) {
  .tour-popover-header {
    padding: 11px 14px 8px;
    gap: 7px;
  }

  .tour-popover-header-orb {
    width: 24px;
    height: 24px;
  }

  .tour-popover-body {
    padding: 12px 14px 10px;
  }

  .tour-popover-title {
    font-size: 15px;
    margin: 0 0 6px;
  }

  .tour-popover-desc {
    font-size: 13px;
    line-height: 1.5;
  }

  .tour-popover-footer {
    padding: 8px 14px 12px;
  }

  /* Both the regular-step and final-step action rows get an explicit narrow
     layout instead of relying on flex-wrap: full-width, stacked, and tall
     enough to clear the 44px touch-target minimum — rather than wrapping
     one-per-line at whatever width each label happens to need. */
  .tour-popover-footer,
  .tour-popover--final .tour-popover-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .tour-actions,
  .tour-popover--final .tour-actions {
    flex-direction: column;
    gap: 6px;
  }

  .tour-actions .tour-btn,
  .tour-popover--final .tour-actions .tour-btn {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 8px 14px;
    font-size: 14px;
  }

  .tour-dots {
    justify-content: center;
  }
}

.tour-popover--final .tour-dots {
  justify-content: center;
  margin-top: 4px;
}

/* Paper theme — tighter radius; shadow via the design-system token (the
   default popover already uses --ds-shadow-lg; paper takes the softer md). */
[data-theme="paper"] .tour-popover {
  border-radius: 14px;
  box-shadow: var(--ds-shadow-md);
}

[data-theme="paper"] .tour-spotlight {
  box-shadow:
    0 0 0 6px var(--ds-surface),
    0 0 0 8px var(--ds-assistant);
}