/* Guided tour spotlight (js/guide.js). Above the assistant widget.
   The layer fades in with .is-visible, fades only the bubble out with .is-leaving before moving
   to another page (the spotlight carries over), and fades everything out with .is-closing. */
.guide-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  font-family: var(--font-ui, Inter, Arial, sans-serif);
}

/* One full-screen shade; js/guide.js cuts the spotlight out of it with clip-path. Clicks are
   blocked everywhere except through the spotlight. */
.guide-shade {
  position: fixed;
  inset: 0;
  background: rgb(20 31 38 / 58%);
  opacity: 0;
  -webkit-backdrop-filter: blur(0) saturate(1);
  backdrop-filter: blur(0) saturate(1);
  pointer-events: auto;
  transition:
    opacity var(--duration-slow, 450ms) var(--ease-out, ease-out),
    backdrop-filter var(--duration-slow, 450ms) var(--ease-out, ease-out),
    -webkit-backdrop-filter var(--duration-slow, 450ms) var(--ease-out, ease-out);
}
.guide-layer.is-visible .guide-shade {
  opacity: 1;
  -webkit-backdrop-filter: blur(3px) saturate(0.7);
  backdrop-filter: blur(3px) saturate(0.7);
}
.guide-layer.is-closing .guide-shade { transition-duration: var(--duration-base, 300ms); }

.guide-ring {
  position: fixed;
  border: 2px solid var(--teal, #1ba098);
  box-shadow: 0 0 0 4px rgb(27 160 152 / 25%), 0 0 28px rgb(27 160 152 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base, 300ms) var(--ease-out, ease-out);
}
.guide-ring[hidden] { display: none; }
.guide-layer.is-visible .guide-ring { opacity: 1; }
/* The ring stays up while leaving for another page, which picks it up in the same place. */
.guide-layer.is-closing .guide-ring { opacity: 0; }
/* A ripple once the spotlight lands on something. */
.guide-ring.is-pulsing::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--teal, #1ba098);
  border-radius: inherit;
  animation: guide-ripple 1.1s var(--ease-out, ease-out) 2;
}
@keyframes guide-ripple {
  from { inset: -2px; opacity: 0.9; }
  to { inset: -16px; opacity: 0; border-radius: calc(var(--guide-radius, 10px) + 14px); }
}

.guide-bubble {
  position: fixed;
  box-sizing: border-box;
  padding: 14px 16px 12px;
  border-radius: var(--radius-lg, 12px);
  color: var(--ink, #425664);
  background: #fff;
  box-shadow: var(--shadow-float, 0 8px 24px rgb(0 0 0 / 18%));
  pointer-events: auto;
  transition:
    opacity var(--duration-base, 300ms) var(--ease-out, ease-out),
    transform var(--duration-base, 300ms) var(--ease-out, ease-out);
}
/* Hidden until its first step is rendered. */
.guide-bubble:not(.is-new) { visibility: hidden; }
.guide-bubble.is-new { animation: guide-bubble-in 360ms var(--ease-out, ease-out); }
.guide-layer:is(.is-leaving, .is-closing) .guide-bubble { opacity: 0; transform: translateY(6px) scale(0.98); }
@keyframes guide-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
}

.guide-meter {
  height: 3px;
  margin: -2px 0 10px;
  overflow: hidden;
  border-radius: var(--radius-pill, 999px);
  background: var(--neutral-soft, #f1f4f5);
}
.guide-meter[hidden] { display: none; }
.guide-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--teal, #1ba098);
  transition: width var(--duration-slow, 450ms) var(--ease-in-out, ease-in-out);
}

.guide-progress { margin: 0 0 4px; font-size: 12px; color: var(--muted, #66767f); }
.guide-progress:empty { display: none; }
.guide-text { margin: 0; font-size: 15px; line-height: 1.45; }

.guide-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.guide-actions button {
  padding: 7px 14px;
  border: 1px solid var(--border, #d8dce1);
  border-radius: var(--radius-md, 8px);
  color: var(--ink, #425664);
  background: #fff;
  font: 500 14px var(--font-ui, Inter, Arial, sans-serif);
  cursor: pointer;
  transition: background var(--duration-fast, 160ms);
}
.guide-actions button:hover { background: var(--teal-tint, #ebf6f5); }
.guide-actions .guide-exit { margin-right: auto; border-color: transparent; }
.guide-actions .guide-next { border-color: var(--teal-strong, #0f7d77); color: #fff; background: var(--teal-strong, #0f7d77); }
.guide-actions .guide-next:hover { background: var(--teal-hover, #0b6a65); }
.guide-actions button[hidden] { display: none; }
.guide-actions button:focus-visible { outline: 2px solid var(--teal, #1ba098); outline-offset: 2px; }
@media (pointer: coarse) {
  .guide-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .guide-shade, .guide-ring, .guide-bubble, .guide-meter span { transition: none; }
  .guide-bubble.is-new, .guide-ring.is-pulsing::after { animation: none; }
}