/* ============================================================================
   user_tutorials/tour.css — the interactive first-run tour (tour.js).

   Spotlight = ONE fixed box placed over the target: bright-blue rounded
   border, and a huge box-shadow spread dims everything around it (the cutout
   stays undimmed). The spotlight is pointer-events:none, so the app under the
   tour stays fully clickable — including the highlighted element itself.
   z-order: spotlight 96 · callout 97 · skip pill 98 — above every app surface
   (menus 60, chat 70), below Quick Look (100) and toasts (110).
   ========================================================================== */

#tour-hl {
  position: fixed; z-index: 96; pointer-events: none;
  border: 3px solid var(--brand-blue, #3b82f6);
  border-radius: 12px;
  box-shadow: 0 0 0 200vmax rgba(5, 9, 16, .55), 0 2px 28px rgba(59, 130, 246, .55);
}
:root[data-theme="light"] #tour-hl {
  box-shadow: 0 0 0 200vmax rgba(43, 36, 22, .42), 0 2px 28px rgba(59, 130, 246, .5);
}
/* Arrival pulse — a ring that swells and fades (transform/opacity only). */
#tour-hl::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit;
  border: 3px solid var(--brand-blue, #3b82f6);
  animation: tour-pulse 1.8s var(--ease-out, ease-out) infinite;
}
@keyframes tour-pulse {
  0% { transform: scale(1); opacity: .9; }
  70%, 100% { transform: scale(1.07); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #tour-hl::after { animation: none; opacity: 0; } }

/* Target-less steps (welcome / finish) and the wait between steps: the
   spotlight collapses to a point, so the dim covers the whole screen. */
#tour-hl.tour-hl--none { left: 50%; top: 40%; width: 0; height: 0; border-color: transparent; }
#tour-hl.tour-hl--none::after { display: none; }

/* ---- skip pill: always at the very top of the page ------------------------
   Floating and centered (not full-width) so it never covers the bell / chat
   buttons pinned top-right on desktop, or the avatar in the mobile header. */
#tour-top {
  position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; z-index: 98;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  padding: 5px 6px 5px 14px; border-radius: 999px;
  background: var(--rail-blur); backdrop-filter: blur(12px);
  border: 1px solid var(--hairline-strong); box-shadow: var(--sh-2);
  animation: tour-fade .3s var(--ease-out, ease-out);
  white-space: nowrap;
}
/* When the spotlight lands on a header element the pill would cover (the
   bell / chat launcher on phones), tour.js drops it just below the header. */
#tour-top.tour-top--dodge { top: calc(62px + env(safe-area-inset-top)); }
#tour-top b { font-size: 13px; }
#tour-top .tour-count {
  font-family: var(--mono); font-size: 11.5px; color: var(--text2);
  font-variant-numeric: tabular-nums;
}

/* ---- callout: the little explanation beside the highlighted element ------- */
#tour-tip {
  position: fixed; z-index: 97;
  width: min(320px, calc(100vw - 24px));
  padding: 14px 16px; border-radius: var(--r-l, 14px);
  background: var(--bg2); border: 1px solid var(--hairline-strong);
  box-shadow: var(--sh-3);
}
#tour-tip.in { animation: tour-fade .24s var(--ease-out, ease-out); }
@keyframes tour-fade { from { opacity: 0; } }

.tour-tip-title { display: block; font: 650 15px/1.3 var(--font-display, inherit); margin-bottom: 4px; }
.tour-tip-body { font-size: 13px; line-height: 1.5; color: var(--text2); }
.tour-tip-hint { margin-top: 8px; font-size: 12.5px; font-weight: 650; color: var(--brand-blue, #3b82f6); }
.tour-tip-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* Arrow: a rotated square in the card's own surface, aimed at the target.
   --ax / --ay are set by tour.js so it keeps pointing at the target's centre
   even after the card is clamped to the viewport edge. */
#tour-tip::before {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--bg2); border: 1px solid var(--hairline-strong);
  transform: rotate(45deg);
}
#tour-tip[data-place="below"]::before { top: -7px;  left: var(--ax, 24px); border-bottom: 0; border-right: 0; }
#tour-tip[data-place="above"]::before { bottom: -7px; left: var(--ax, 24px); border-top: 0; border-left: 0; }
#tour-tip[data-place="right"]::before { left: -7px;  top: var(--ay, 18px); border-top: 0; border-right: 0; }
#tour-tip[data-place="left"]::before  { right: -7px; top: var(--ay, 18px); border-bottom: 0; border-left: 0; }
#tour-tip:not([data-place])::before, #tour-tip[data-place=""]::before { display: none; }

/* Welcome / finish: a centered card, no arrow. */
#tour-tip.tour-tip--center {
  left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px)); text-align: center;
}
.tour-tip--center .tour-tip-actions { justify-content: center; }

/* Intent chooser: stack the path buttons full-width instead of a right-aligned row. */
.tour-tip-actions--stack { flex-direction: column; align-items: stretch; }
.tour-tip-actions--stack .tour-choice { width: 100%; justify-content: flex-start; text-align: left; }

/* While the tour runs, the proactive chat greeting stays out of the way — it
   floats near the top and lands inside/over spotlights (chat.js re-shows it on
   a later visit if it was never dismissed). */
body.tour-on .chat-greet { display: none !important; }

/* Phones: a JS-positioned floater fights the keyboard-less small viewport, so
   the callout pins to whichever end of the screen the target is NOT in
   (tour.js picks the class). Above the tab bar at the bottom end. */
@media (max-width: 640px) {
  #tour-tip.tour-tip--pin-bottom,
  #tour-tip.tour-tip--pin-top {
    left: 12px; right: 12px; width: auto; transform: none;
  }
  #tour-tip.tour-tip--pin-bottom { top: auto; bottom: calc(var(--tabbar-h, 58px) + 12px); }
  #tour-tip.tour-tip--pin-top { top: calc(56px + env(safe-area-inset-top)); bottom: auto; }
  #tour-tip.tour-tip--pin-bottom::before, #tour-tip.tour-tip--pin-top::before { display: none; }
}