/* ═══════════════════════════════════════════════════════════════════
   ink-ls · Guide (interactive agent)
   Minimalistic by design. One thing on screen at a time:
     · agent avatar (top, idle-breathing)
     · question text (typed out, letter by letter)
     · answer bubbles (fade up with stagger when typing settles)
   Everything is centered, generous whitespace, no boxes.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page wrap ──────────────────────────────────────────────────── */
.guide-page {
  flex: 1;
  min-width: 0;
  width: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 620px;
  gap: 36px;
}

/* ═══════════════════════════════════════════════════════
   Avatar
   ═══════════════════════════════════════════════════════ */
.agent-icon {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* Soft exterior halo that swells in sympathy with the SVG's
     internal breathing. The blob itself never moves — the click
     reaction dodges only the FACE features inside the blob. */
  animation: agentHalo 4200ms ease-in-out infinite;
}
.agent-icon .agent-icon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes agentHalo {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(0, 81, 255, 0.28)); }
  50%      { filter: drop-shadow(0 14px 30px rgba(0, 81, 255, 0.42)); }
}

/* ═══════════════════════════════════════════════════════
   Question text + typing cursor
   ═══════════════════════════════════════════════════════ */
.agent-msg {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--fg);
  min-height: 1.35em;
  /* Pre-wrap preserves the newlines used in some questions. */
  white-space: pre-wrap;
}
.agent-msg-text {
  /* Wrapped so the cursor sits flush against the last char. */
}

/* Blinking caret while text streams in. Fades out once typing ends. */
.agent-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.agent.is-typing .agent-cursor {
  opacity: 1;
  animation: agentCaret 900ms steps(2, end) infinite;
}
@keyframes agentCaret {
  50% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   Answer bubbles
   ═══════════════════════════════════════════════════════ */
.agent-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
}

.agent-bubble {
  /* Pill button — generous, soft, friendly. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  background: var(--bg-elev);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition:
    background   200ms ease,
    border-color 200ms ease,
    color        200ms ease;
  /* Each bubble fades up with a per-button delay set inline by JS. */
  animation: bubbleIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bubbleIn {
  to { opacity: 1; transform: translateY(0); }
}

.agent-bubble:hover {
  border-color: var(--accent);
  background: rgba(0, 81, 255, 0.10);
  color: #fff;
}

/* Picked bubble briefly flashes accent before the next question
   replaces it — feels like the agent "heard" you. */
.agent-bubble.picked {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* When transitioning to the next question we slide the existing
   bubbles out of the way. */
.agent-bubbles.leaving .agent-bubble {
  animation: bubbleOut 220ms ease forwards;
}
@keyframes bubbleOut {
  to { opacity: 0; transform: translateY(-6px); }
}

/* ═══════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .guide-page { padding: 32px 16px; }
  .agent { gap: 28px; }
  .agent-icon { width: 72px; height: 72px; }
  .agent-msg { font-size: 22px; }
  .agent-bubbles { flex-direction: column; align-items: stretch; }
  .agent-bubble { padding: 13px 20px; font-size: 15px; }
}