/* ============================================================================
   First-run guided tour — a roaming pixel-Clawd who runs between UI elements,
   stops beside each one, and explains it in a typewriter speech bubble.
   The layer is click-through so the user can try out the viewport, orbit, settings
   and the build-steps list WHILE the tour runs; only the "New design" button is
   disabled (it would start a blank design and end the tour) until it finishes.
   ========================================================================== */

#tourLayer { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }

/* keep the "New design" / import cards inert during the tour so an absent-minded
   click on the highlighted button can't abandon the walkthrough */
body.tour-active #designGrid .newcard { pointer-events: none; }

/* "Take the tour" affordance injected into the gallery header */
.tour-replay {
  padding: 6px 12px; font: 600 12px 'Space Grotesk', sans-serif; cursor: pointer;
  color: var(--dim, #5a6270); background: var(--panel, #fff);
  border: 1px solid var(--line, #e1ddd2); border-radius: 9px;
}
.tour-replay:hover { color: var(--txt, #1d2230); border-color: var(--accent, #d9262c); }
body.tour-active #tipKey,
body.tour-active #tipPrompt { display: none !important; }   /* tour covers these */

/* ---- spotlight ring that glides to whatever Clawd is describing ---- */
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 3px var(--accent, #d9262c),
              0 0 0 7px rgba(217, 38, 44, .22),
              0 0 26px 8px rgba(217, 38, 44, .30);
  transition: left .55s cubic-bezier(.5, .08, .2, 1), top .55s cubic-bezier(.5, .08, .2, 1),
              width .55s cubic-bezier(.5, .08, .2, 1), height .55s cubic-bezier(.5, .08, .2, 1),
              opacity .3s ease;
}
.tour-spot.show { opacity: 1; animation: tour-spot-breathe 2.4s ease-in-out infinite; }
@keyframes tour-spot-breathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent, #d9262c), 0 0 0 7px rgba(217, 38, 44, .22), 0 0 22px 6px rgba(217, 38, 44, .26); }
  50%      { box-shadow: 0 0 0 3px var(--accent, #d9262c), 0 0 0 8px rgba(46, 111, 224, .26), 0 0 30px 10px rgba(217, 38, 44, .38); }
}

/* ---- the roaming buddy ---- */
#tourBuddy {
  position: fixed; left: 0; top: 0; width: 84px; pointer-events: none; z-index: 10002;
  filter: drop-shadow(0 6px 7px rgba(30, 35, 48, .22));
  transition: left .85s cubic-bezier(.42, .04, .22, 1), top .85s cubic-bezier(.42, .04, .22, 1);
  --dir: 1;
}
#tourBuddy .tb-lean { display: block; transform-origin: 50% 90%; transition: transform .2s ease; }
#tourBuddy.running .tb-lean { transform: rotate(calc(var(--dir) * 7deg)); }
#tourBuddyArt { width: 84px; height: auto; display: block; overflow: visible; }
#tourBuddyArt .tb-flip { transform-box: fill-box; transform-origin: 50% 50%; }
#tourBuddy[data-face="-1"] #tourBuddyArt .tb-flip { transform: scaleX(-1); }

/* idle: gentle 2-frame bob + blink (mirrors the in-chat buddy) */
#tourBuddyArt .root { animation: tbd-bob 1.6s steps(1, end) infinite; }
@keyframes tbd-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1px); } }
#tourBuddyArt .eye { transform-box: fill-box; transform-origin: 50% 100%; animation: tbd-blink 4.6s steps(1, end) infinite; }
@keyframes tbd-blink { 0%, 90%, 100% { transform: scaleY(1); } 93%, 97% { transform: scaleY(.5); } }
#tourBuddyArt .eyes-happy, #tourBuddyArt .mouth-o, #tourBuddyArt .mouth-happy,
#tourBuddyArt .tb, #tourBuddyArt .spark { opacity: 0; }

/* running: quick bob, scurrying legs, mouth open in a determined "go" */
#tourBuddy.running #tourBuddyArt .root { animation: tbd-run 0.34s steps(1, end) infinite; }
@keyframes tbd-run { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
#tourBuddy.running #tourBuddyArt .leg { animation: tbd-step .3s steps(1, end) infinite; }
#tourBuddy.running #tourBuddyArt .leg.lb { animation-delay: -.15s; }
@keyframes tbd-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
#tourBuddy.running #tourBuddyArt .mouth-o { opacity: 1; }
#tourBuddy.running #tourBuddyArt .arm-l { transform: translateY(-1px); }
#tourBuddy.running #tourBuddyArt .arm-r { transform: translateY(1px); }

/* cheer: a couple of hops + sparkles when the tour finishes */
#tourBuddy.cheer #tourBuddyArt .root { animation: tbd-hop 1s steps(1, end) 2; }
@keyframes tbd-hop { 0%, 40%, 80%, 100% { transform: translateY(0); } 15%, 55% { transform: translateY(-7px); } }
#tourBuddy.cheer #tourBuddyArt .eye { opacity: 0; animation: none; }
#tourBuddy.cheer #tourBuddyArt .eyes-happy,
#tourBuddy.cheer #tourBuddyArt .mouth-happy { opacity: 1; }
#tourBuddy.cheer #tourBuddyArt .arm-l,
#tourBuddy.cheer #tourBuddyArt .arm-r { transform: translateY(-4px); }
#tourBuddy.cheer #tourBuddyArt .spark { animation: tbd-spark 1s steps(1, end) infinite; }
#tourBuddy.cheer #tourBuddyArt .spark.s2 { animation-delay: .12s; }
#tourBuddy.cheer #tourBuddyArt .spark.s3 { animation-delay: .24s; }
#tourBuddy.cheer #tourBuddyArt .spark.s4 { animation-delay: .36s; }
#tourBuddy.cheer #tourBuddyArt .spark.s5 { animation-delay: .48s; }
@keyframes tbd-spark { 0%, 100% { opacity: 0; transform: translateY(0); } 25%, 60% { opacity: 1; } 80% { opacity: 0; transform: translateY(-2px); } }

/* ---- speech bubble ---- */
.tour-bubble {
  position: fixed; left: 0; top: 0; box-sizing: border-box; z-index: 10001;
  width: 300px; max-width: calc(100vw - 28px);
  background: var(--panel, #fff); color: var(--txt, #1d2230);
  border: 1px solid var(--line, #e1ddd2); border-top: 3px solid var(--accent, #d9262c);
  border-radius: 14px; padding: 13px 15px 11px;
  font: 13.5px/1.55 'Space Grotesk', system-ui, -apple-system, sans-serif;
  box-shadow: 0 14px 44px rgba(30, 35, 48, .20); pointer-events: auto;
  opacity: 0; transform: translateY(6px) scale(.97); transform-origin: center bottom;
  transition: opacity .26s ease, transform .26s cubic-bezier(.3, .9, .3, 1.3);
}
.tour-bubble.show { opacity: 1; transform: translateY(0) scale(1); }
.tour-bubble .tb-name {
  font-size: 10.5px; letter-spacing: .9px; text-transform: uppercase;
  color: var(--accent, #d9262c); font-weight: 700; margin-bottom: 3px;
}
.tour-bubble .tb-text { min-height: 1.55em; }
.tour-bubble .tb-text .caret {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px;
  background: var(--accent, #d9262c); margin-left: 1px; animation: tb-caret .8s steps(1) infinite;
}
@keyframes tb-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
/* side note — a smaller, italic aside (e.g. the API-key tip) that fades in below the body */
.tour-bubble .tb-note {
  display: none; margin-top: 7px;
  font-size: 11.5px; font-style: italic; font-weight: 400; line-height: 1.5;
  color: var(--dim, #5a6270);
  opacity: 0; transition: opacity .25s ease;
}
.tour-bubble .tb-note.show { display: block; }
.tour-bubble .tb-note.show.ready { opacity: 1; }
/* ---- "dive into a model" fork: one button per starter build ---- */
.tour-bubble .tb-choices { display: none; flex-direction: column; gap: 8px; margin-top: 11px; opacity: 0; transition: opacity .25s ease; }
.tour-bubble .tb-choices.show { display: flex; }
.tour-bubble .tb-choices.show.ready { opacity: 1; }
.tour-bubble .tb-choice {
  width: 100%; text-align: left; padding: 9px 12px; cursor: pointer;
  font: 600 12.5px 'Space Grotesk', sans-serif; color: var(--txt, #1d2230);
  background: var(--panel, #fff); border: 1px solid var(--line, #e1ddd2); border-radius: 9px;
  transition: border-color .15s ease, color .15s ease, transform .05s ease;
}
.tour-bubble .tb-choice:hover { border-color: var(--accent, #d9262c); color: var(--accent, #d9262c); }
.tour-bubble .tb-choice:active { transform: translateY(1px); }

.tour-bubble .tb-foot {
  display: flex; align-items: center; gap: 12px; margin-top: 11px;
  opacity: 0; transition: opacity .25s ease;
}
.tour-bubble .tb-foot.ready { opacity: 1; }
.tour-bubble .tb-count { font-size: 11px; color: var(--dim, #5a6270); }
.tour-bubble .tb-skip {
  font-size: 11.5px; color: var(--dim, #5a6270); text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0;
}
.tour-bubble .tb-skip:hover { color: var(--txt, #1d2230); text-decoration: underline; }
/* ghost "Back" button — its auto margin right-aligns the back+next cluster, so it
   keeps Next pinned right even when it's hidden (visibility, not display) on step 1 */
.tour-bubble .tb-back {
  margin-left: auto; padding: 6px 12px; font: 600 12.5px 'Space Grotesk', sans-serif;
  color: var(--dim, #5a6270); background: var(--panel, #fff);
  border: 1px solid var(--line, #e1ddd2); border-radius: 9px; cursor: pointer;
}
.tour-bubble .tb-back:hover { color: var(--txt, #1d2230); border-color: var(--accent, #d9262c); }
.tour-bubble .tb-back:active { transform: translateY(1px); }
.tour-bubble .tb-next {
  padding: 6px 14px; font: 600 12.5px 'Space Grotesk', sans-serif;
  color: #fff; background: var(--accent, #d9262c); border: 0; border-radius: 9px; cursor: pointer;
  box-shadow: 0 2px 10px rgba(217, 38, 44, .35);
}
.tour-bubble .tb-next:hover { filter: brightness(1.06); }
.tour-bubble .tb-next:active { transform: translateY(1px); }

/* the little tail that points from the bubble toward Clawd (any of 4 edges) */
.tour-bubble .tb-tail {
  position: absolute; width: 14px; height: 14px; background: var(--panel, #fff);
  border: 1px solid var(--line, #e1ddd2); transform: rotate(45deg);
}
.tour-bubble.tail-down  .tb-tail { bottom: -8px; margin-left: -7px; border-width: 0 1px 1px 0; }
.tour-bubble.tail-up    .tb-tail { top: -8px; margin-left: -7px; border-width: 1px 0 0 1px; }
.tour-bubble.tail-left  .tb-tail { left: -8px; right: auto; margin-top: -7px; border-width: 1px 0 0 1px; }
.tour-bubble.tail-right .tb-tail { right: -8px; left: auto; margin-top: -7px; border-width: 0 1px 1px 0; }

@media (prefers-reduced-motion: reduce) {
  #tourBuddy { transition: none; }
  #tourBuddyArt .root, #tourBuddyArt .eye, #tourBuddyArt .leg,
  .tour-spot.show, #tourBuddy.cheer #tourBuddyArt .spark { animation: none !important; }
  .tour-bubble { transition: opacity .15s ease; transform: none; }
  .tour-bubble.show { transform: none; }
  .tour-bubble .tb-text .caret { animation: none; }
}