/*
 * fixeo-rafi-os-v1.css — RAFI OS rfos-v2a
 * Namespace: rfos-* exclusively
 *
 * The definitive RAFI Hero.
 * Not a search form. Not a widget. A person.
 */

/* ── Tokens ──────────────────────────────────────────────────── */
:root {
  --rfos-indigo:      rgb(72, 100, 255);
  --rfos-indigo-ring: rgba(72, 100, 255, 0.32);
  --rfos-indigo-halo: rgba(72, 100, 255, 0.26);
  --rfos-pink:        rgb(225, 48, 108);
  --rfos-pink-halo:   rgba(225, 48, 108, 0.30);
  --rfos-green:       rgb(32, 201, 151);
  --rfos-green-ring:  rgba(32, 201, 151, 0.32);
  --rfos-green-halo:  rgba(32, 201, 151, 0.22);
  --rfos-text:        rgba(232, 234, 240, 0.95);
  --rfos-muted:       rgba(232, 234, 240, 0.35);
  --rfos-border:      rgba(255, 255, 255, 0.08);
}

/* ══════════════════════════════════════════════════════════════
   HERO RECOMPOSITION
   section#home gets .rfos-hero-recomposed on RAFI mount.
   This removes everything that isn't RAFI.
══════════════════════════════════════════════════════════════ */

section#home.rfos-hero-recomposed {
  /* Remove decorative motion from hero-section itself */
}

section#home.rfos-hero-recomposed .hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  /* More vertical space — the silence makes RAFI feel important */
  padding-top: 0 !important;
}

/* RAFI stage — first. Always. */
section#home.rfos-hero-recomposed .rfos-stage-wrap {
  order: 1 !important;
  width: 100% !important;
}

/* Reply field — second */
section#home.rfos-hero-recomposed #hero-quick-search {
  order: 2 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* Trust whisper — third */
section#home.rfos-hero-recomposed .rfos-trust-whisper {
  order: 3 !important;
}

/* Everything that was in the hero — gone */
section#home.rfos-hero-recomposed .hero-title {
  display: none !important;
}
section#home.rfos-hero-recomposed .hero-subtitle {
  display: none !important;
}
section#home.rfos-hero-recomposed .hero-city-smart {
  display: none !important;
}
section#home.rfos-hero-recomposed .fxlps-signals {
  display: none !important;
}
section#home.rfos-hero-recomposed .hero-secondary-link-wrap {
  display: none !important;
}

/* Bubbles and blobs — suppressed here too as safety net
   (they're removed from DOM, this is belt-and-suspenders) */
section#home.rfos-hero-recomposed .hero-bubble,
section#home.rfos-hero-recomposed .hero-blob {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════
   THE RAFI STAGE
   .rfos-stage-wrap — injected into .hero-content before #hero-quick-search
══════════════════════════════════════════════════════════════ */

.rfos-stage-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Breathing room. The silence around RAFI is intentional. */
  padding: 0 0 32px;
  /* Spring entrance */
  opacity: 0;
  transform: translateY(20px);
  animation: rfos-arrive 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.10s both;
}

/* ── Avatar wrap + halo ─────────────────────────────────────── */
.rfos-avatar-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Space between avatar and name */
  margin-bottom: 18px;
  /* Halo extends beyond avatar bounds */
  padding: 20px;
}

/* The halo.
   RAFI's presence made visible. The only moving element in the hero.
   It was there before the visitor arrived.
   Everything breathes at the same rate — 4.8s. One organism. */
.rfos-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 48% 44%,
    rgba(72, 100, 255, 0.28) 0%,
    rgba(72, 100, 255, 0.12) 38%,
    rgba(72, 100, 255, 0.04) 60%,
    transparent 75%
  );
  filter: blur(22px);
  pointer-events: none;
  animation: rfos-halo-breathe 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  transition: background 0.8s ease;
}

/* Avatar — the face of RAFI.
   A sphere with depth. Internal light. Material presence.
   Not flat. Not a circle. An object that occupies space. */
.rfos-avatar {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(110, 140, 255, 0.18) 0%,
      rgba(72, 100, 255, 0.06) 50%,
      transparent 70%
    ),
    rgba(12, 14, 40, 0.88);
  border: 1.5px solid rgba(72, 100, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(140, 160, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 8px 28px rgba(72, 100, 255, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation:
    rfos-avatar-breathe 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    rfos-float          9.6s ease-in-out 0.4s infinite;
  transition: border-color 0.5s ease;
  flex-shrink: 0;
}

/* Specular highlight — top-left gleam.
   Fixed. Not animated. Creates the light source illusion. */
.rfos-avatar::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 18%;
  width: 26%;
  height: 14%;
  border-radius: 50%;
  background: rgba(180, 200, 255, 0.11);
  filter: blur(3px);
  pointer-events: none;
  z-index: 2;
}

/* Bottom rim light — subtle depth */
.rfos-avatar::after {
  content: '';
  position: absolute;
  bottom: 9%;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(72, 100, 255, 0.18) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
}

.rfos-avatar img {
  width: 92px;
  height: 92px;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 3;
  animation: rfos-img-arrive 0.35s ease 0.55s both;
}

/* ── Identity — RAFI name + live dot ───────────────────────── */
.rfos-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  opacity: 0;
  animation: rfos-identity-in 0.4s ease 0.50s both;
}

.rfos-identity-name {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(72, 100, 255, 0.78);
  line-height: 1;
}

/* Live dot — breathes with RAFI but offset by half-cycle.
   When avatar inhales (brightens), dot softens. Natural balance. */
.rfos-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rfos-green);
  box-shadow: 0 0 4px rgba(32, 201, 151, 0.35);
  flex-shrink: 0;
  animation: rfos-dot-breathe 4.8s cubic-bezier(0.45, 0, 0.55, 1) 2.4s infinite;
}

/* ── Greeting — the most important copy on the page ────────── */
.rfos-greeting {
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--rfos-text);
  line-height: 1.52;
  letter-spacing: -0.012em;
  text-align: center;
  max-width: 460px;
  padding: 0 12px;
  margin: 0 0 4px;
  transition: opacity 0.55s ease;
  min-height: 2.2em;
  opacity: 0;
  animation: rfos-greeting-in 0.45s ease 0.65s both;
}

.rfos-greeting b,
.rfos-greeting strong {
  color: #ffffff;
  font-weight: 700;
}

/* Cursor — RAFI's open invitation.
   Never disappears in idle state.
   Slow blink: 1.4s. Patient. Comfortable. Not nervous. */
.rfos-cursor {
  display: inline-block;
  width: 2px;
  height: 0.95em;
  background: rgba(72, 100, 255, 0.55);
  border-radius: 1px;
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: rfos-cursor-wait 1.4s ease-in-out infinite;
}

/* During typewriter — faster, more energetic */
.rfos-cursor.rfos-cursor--typing {
  animation: rfos-cursor-blink 0.9s step-end infinite;
}

/* When RAFI is engaged (listening/understood/ready) — hidden */
.rfos-cursor.rfos-cursor--hidden {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}

/* ── Category badge ─────────────────────────────────────────── */
.rfos-badge {
  /* Only appears when RAFI has understood something */
  display: none;
  margin-top: 8px;
  opacity: 0;
  animation: rfos-badge-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rfos-badge.visible {
  display: flex;
  opacity: 1;
}

.rfos-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px 4px 8px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 700;
  /* Default: indigo (listening/understood) */
  background: rgba(72, 100, 255, 0.10);
  border: 1px solid rgba(72, 100, 255, 0.22);
  color: rgba(140, 162, 255, 0.95);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

/* Badge states */
.rfos-stage--ready .rfos-badge-pill {
  background: rgba(32, 201, 151, 0.09);
  border-color: rgba(32, 201, 151, 0.22);
  color: rgba(32, 201, 151, 0.95);
}
.rfos-stage--urgent .rfos-badge-pill {
  background: rgba(225, 48, 108, 0.10);
  border-color: rgba(225, 48, 108, 0.22);
  color: rgba(245, 110, 155, 0.95);
}

/* ── Divider — separates RAFI from the reply field ─────────── */
.rfos-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent 100%
  );
  margin-top: 28px;
  /* Hidden by default — only shown when recomposed */
  display: none;
}
section#home.rfos-hero-recomposed .rfos-divider {
  display: block;
}

/* ── Trust whisper — injected below #hero-quick-search ─────── */
/* Two facts. Barely there. Just enough. */
.rfos-trust-whisper {
  font-size: 0.70rem;
  font-weight: 400;
  color: var(--rfos-muted);
  text-align: center;
  letter-spacing: 0.01em;
  margin-top: 14px;
  padding: 0 16px;
  opacity: 0;
  animation: rfos-whisper-in 0.5s ease 1.1s both;
}

/* ══════════════════════════════════════════════════════════════
   STATE VARIATIONS
   Applied to .rfos-stage-wrap by JS
══════════════════════════════════════════════════════════════ */

/* ── Idle (default) ── */
/* Avatar breathing synchronized to 4.8s rfos-avatar-breathe + rfos-float */

/* ── Listening — active, present, alive ── */
.rfos-stage--listening .rfos-avatar {
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(100, 132, 255, 0.24) 0%,
      rgba(72, 100, 255, 0.08) 50%,
      transparent 70%
    ),
    rgba(10, 12, 38, 0.88);
  animation:
    rfos-avatar-listen  1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    rfos-float          9.6s ease-in-out 0.4s infinite;
}
.rfos-stage--listening .rfos-halo {
  background: radial-gradient(
    ellipse at 48% 44%,
    rgba(72, 100, 255, 0.38) 0%,
    rgba(72, 100, 255, 0.14) 38%,
    rgba(72, 100, 255, 0.04) 60%,
    transparent 75%
  );
  animation: rfos-halo-listen 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── Urgent — internal light shifts to warm pink ── */
.rfos-stage--urgent .rfos-avatar {
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(255, 100, 150, 0.22) 0%,
      rgba(225, 48, 108, 0.06) 50%,
      transparent 70%
    ),
    rgba(28, 8, 18, 0.90);
  animation:
    rfos-avatar-urgent  1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite,
    rfos-float          9.6s ease-in-out 0.4s infinite;
}
.rfos-stage--urgent .rfos-halo {
  background: radial-gradient(
    ellipse at 48% 44%,
    rgba(225, 48, 108, 0.36) 0%,
    rgba(225, 48, 108, 0.12) 38%,
    rgba(225, 48, 108, 0.04) 60%,
    transparent 75%
  );
  animation: rfos-halo-urgent 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ── Ready — the most important state.
   Internal light shifts to green. Float continues — alive, not frozen.
   Breathing slows to 8s. Almost imperceptible. RAFI is settled. ── */
.rfos-stage--ready .rfos-avatar {
  background:
    radial-gradient(
      ellipse at 35% 30%,
      rgba(80, 220, 170, 0.20) 0%,
      rgba(32, 201, 151, 0.06) 50%,
      transparent 70%
    ),
    rgba(8, 22, 18, 0.88);
  border-color: rgba(32, 201, 151, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(100, 240, 190, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 8px 28px rgba(32, 201, 151, 0.14),
    0 2px 8px rgba(0, 0, 0, 0.16);
  /* Float only — no ring pulse. Confidence is quiet. */
  animation: rfos-float 9.6s ease-in-out 0.4s infinite;
}
.rfos-stage--ready .rfos-halo {
  background: radial-gradient(
    ellipse at 48% 44%,
    rgba(32, 201, 151, 0.22) 0%,
    rgba(32, 201, 151, 0.08) 42%,
    transparent 70%
  );
  /* Very slow. Almost still. */
  animation: rfos-halo-breathe 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* ══════════════════════════════════════════════════════════════
   QSM INPUT OVERRIDE
   Scoped to rfos-hero-recomposed.
   The reply field should feel like an answer, not a search form.
══════════════════════════════════════════════════════════════ */

section#home.rfos-hero-recomposed #hero-quick-search {
  width: 100%;
  max-width: 100%;
}

/* Input focus: indigo, not pink */
section#home.rfos-hero-recomposed .qsm-bar-card:focus-within {
  border-color: rgba(72, 100, 255, 0.44) !important;
  box-shadow:
    0 0 0 4px rgba(72, 100, 255, 0.08),
    0 12px 28px rgba(0, 0, 0, 0.12) !important;
}

/* Placeholder: RAFI's voice, not a search prompt */
section#home.rfos-hero-recomposed #qsm-input-nlp::placeholder {
  color: rgba(255, 255, 255, 0.32) !important;
  font-style: italic;
}

/* Attention pulse — fires once after typewriter, then never again */
section#home.rfos-hero-recomposed.rfos-input-invite .qsm-bar-card {
  animation: rfos-input-invite 1.2s ease-out both;
}

/* ══════════════════════════════════════════════════════════════
   H1 TRANSITION BAND
   After hero, before trust section.
   The promise the rest of the page keeps.
══════════════════════════════════════════════════════════════ */
.rfos-h1-band {
  /* Homepage narrative v2: H1 remains in DOM for SEO crawlers
     but is visually hidden — Chapter 2 replaces it immediately below hero */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.rfos-h1-band h1,
.rfos-h1-band .rfos-h1-text {
  font-size: clamp(1.45rem, 3.2vw, 2.10rem);
  font-weight: 600;
  line-height: 1.30;
  letter-spacing: -0.018em;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   FALLBACK LINK BAND
   Below hero. Honest secondary path.
══════════════════════════════════════════════════════════════ */
.rfos-fallback-band {
  /* Removed from visual flow — secondary path lives in artisan onboarding section */
  display: none;
}

.rfos-fallback-link {
  font-size: 0.80rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.36);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  min-height: 44px;
}
.rfos-fallback-link:hover { color: rgba(255, 255, 255, 0.58); }

/* ══════════════════════════════════════════════════════════════
   MODAL — RAFI CONVERSATION HEADER
   Continuity: same RAFI, larger canvas.
══════════════════════════════════════════════════════════════ */
.rfos-conv-header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 15px 18px 13px;
  background: linear-gradient(
    135deg,
    rgba(72, 100, 255, 0.06) 0%,
    transparent 100%
  );
  border-bottom: 1px solid var(--rfos-border);
  opacity: 0;
  transform: translateY(-3px);
  animation: rfos-fadein 0.20s ease 0.04s both;
}

.rfos-conv-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(72, 100, 255, 0.08);
  border: 1.5px solid rgba(72, 100, 255, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rfos-conv-avatar img { width: 34px; height: 34px; object-fit: contain; display: block; }

.rfos-conv-body { flex: 1; min-width: 0; }
.rfos-conv-name {
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(72, 100, 255, 0.72); margin-bottom: 3px;
}
.rfos-conv-msg {
  font-size: 0.86rem; font-weight: 500; color: var(--rfos-text);
  line-height: 1.50; min-height: 1.3em; transition: opacity 0.16s;
}
.rfos-conv-msg b, .rfos-conv-msg strong { color: #fff; font-weight: 700; }

/* Timeline */
.rfos-timeline { display: flex; align-items: center; gap: 0; margin-top: 9px; }
.rfos-tl-step  { display: flex; align-items: center; gap: 4px; flex: 1; }
.rfos-tl-dot   {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--rfos-border); background: transparent;
  flex-shrink: 0; transition: background 0.2s, border-color 0.2s;
}
.rfos-tl-step.done .rfos-tl-dot   { background: var(--rfos-indigo); border-color: var(--rfos-indigo); }
.rfos-tl-step.active .rfos-tl-dot { background: rgba(72,100,255,0.30); border-color: var(--rfos-indigo); }
.rfos-tl-label {
  font-size: 0.63rem; font-weight: 600; color: var(--rfos-muted);
  transition: color 0.2s; white-space: nowrap;
}
.rfos-tl-step.done .rfos-tl-label,
.rfos-tl-step.active .rfos-tl-label { color: rgba(232,234,240,0.80); }
.rfos-tl-sep { height: 1px; flex: 1; background: var(--rfos-border); margin: 0 4px; }
.rfos-tl-step.done + .rfos-tl-sep { background: var(--rfos-indigo); }

/* ══════════════════════════════════════════════════════════════
   SUMMARY, THINKING, CONFIRMATION — unchanged from v1f
══════════════════════════════════════════════════════════════ */

/* Summary */
.rfos-summary {
  display: none; align-items: center; gap: 11px; padding: 13px 15px;
  margin: 11px 0 0;
  background: rgba(72, 100, 255, 0.05);
  border: 1px solid rgba(72, 100, 255, 0.16);
  border-radius: 12px;
  animation: rfos-fadein 0.20s ease both;
}
.rfos-summary.visible { display: flex; }
.rfos-summary-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(72,100,255,0.08); border: 1px solid rgba(72,100,255,0.20);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rfos-summary-avatar img { width: 28px; height: 28px; object-fit: contain; }
.rfos-summary-content { flex: 1; min-width: 0; }
.rfos-summary-text { font-size: 0.83rem; font-weight: 500; color: var(--rfos-text); line-height: 1.45; margin-bottom: 8px; }
.rfos-summary-text b, .rfos-summary-text strong { color: #fff; font-weight: 700; }
.rfos-summary-confirm-btn {
  display: block; width: 100%; padding: 11px 20px;
  background: linear-gradient(135deg, #E1306C, #833AB4);
  color: #fff; border: none; border-radius: 10px;
  font-size: 0.91rem; font-weight: 800; cursor: pointer; text-align: center;
  box-shadow: 0 6px 18px rgba(225,48,108,0.22);
  transition: filter 0.14s, box-shadow 0.14s; min-height: 44px;
}
.rfos-summary-confirm-btn:hover { filter: brightness(1.07); box-shadow: 0 8px 22px rgba(225,48,108,0.30); }
.rfos-summary-confirm-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#request-modal.rfos-summary-active .request-submit-btn { opacity: 0.36; pointer-events: none; }

/* Thinking */
.rfos-thinking {
  display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 13px; padding: 38px 22px;
  text-align: center; min-height: 200px;
}
.rfos-thinking.visible { display: flex; }
.rfos-thinking-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(72,100,255,0.08); border: 1.5px solid rgba(72,100,255,0.20);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  animation: rfos-thinking-breathe 1.8s ease-in-out infinite;
}
.rfos-thinking-avatar img { width: 44px; height: 44px; object-fit: contain; }
.rfos-thinking-label { font-size: 0.86rem; font-weight: 500; color: var(--rfos-text); }
.rfos-thinking-dots { display: flex; gap: 6px; align-items: center; }
.rfos-thinking-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(72,100,255,0.55);
  animation: rfos-dot-bounce 1.0s ease-in-out infinite;
}
.rfos-thinking-dot:nth-child(2) { animation-delay: 0.17s; }
.rfos-thinking-dot:nth-child(3) { animation-delay: 0.34s; }

/* Confirmation */
.rfos-confirmation {
  display: none; flex-direction: column; align-items: center; gap: 7px;
  padding: 22px 18px 14px; text-align: center;
  border-bottom: 1px solid var(--rfos-border); margin-bottom: 14px;
  animation: rfos-fadein 0.26s ease both;
}
.rfos-confirmation.visible { display: flex; }
.rfos-confirmation-avatar {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(72,100,255,0.10), rgba(32,201,151,0.07));
  border: 2px solid rgba(32,201,151,0.26);
  display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 3px;
}
.rfos-confirmation-avatar img { width: 58px; height: 58px; object-fit: contain; }
.rfos-confirmation-title { font-size: 1.10rem; font-weight: 800; color: #fff; margin: 0; letter-spacing: -0.01em; }
.rfos-confirmation-sub { font-size: 0.82rem; color: var(--rfos-muted); margin: 0; line-height: 1.55; max-width: 290px; }
.rfos-confirmation-steps { display: flex; align-items: center; gap: 5px; margin-top: 5px; flex-wrap: wrap; justify-content: center; }
.rfos-conf-step { display: flex; align-items: center; gap: 4px; font-size: 0.74rem; font-weight: 600; color: var(--rfos-muted); }
.rfos-conf-step-icon {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(32,201,151,0.12); border: 1px solid rgba(32,201,151,0.22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.60rem; color: var(--rfos-green); flex-shrink: 0;
}
.rfos-conf-sep { font-size: 0.68rem; color: var(--rfos-border); }

/* Modal active states */
#request-modal.rfos-active .modal-header,
#request-modal.rfos-active .request-modal-header { border-bottom: none; padding-bottom: 0; }

/* ══════════════════════════════════════════════════════════════
   KEYFRAMES
   Core principle: everything breathes at 4.8s.
   Same duration. No drift. One organism.
══════════════════════════════════════════════════════════════ */

/* Stage arrival — spring */
@keyframes rfos-arrive {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Image arrives after ring */
@keyframes rfos-img-arrive {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1.00); }
}

/* Identity fades in */
@keyframes rfos-identity-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Greeting arrives */
@keyframes rfos-greeting-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Trust whisper */
@keyframes rfos-whisper-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Generic fadein */
@keyframes rfos-fadein {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge spring in */
@keyframes rfos-badge-in {
  from { opacity: 0; transform: translateY(3px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1.00); }
}

/* ── The breath — 4.8s. Everything synchronized to this. ──────
   Not a scale animation. An internal expansion.
   The sphere brightens and deepens as it inhales.
   Like lungs filling with air. */

/* Avatar breath — primary breathing element */
@keyframes rfos-avatar-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(140, 160, 255, 0.12),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20),
      0 6px 22px rgba(72, 100, 255, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.18);
    border-color: rgba(72, 100, 255, 0.24);
  }
  /* Inhale — internal light warms */
  50% {
    box-shadow:
      inset 0 1px 0 rgba(150, 172, 255, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.16),
      0 12px 38px rgba(72, 100, 255, 0.20),
      0 3px 12px rgba(0, 0, 0, 0.14);
    border-color: rgba(72, 100, 255, 0.40);
  }
}

/* Halo breath — same 4.8s, expands as avatar inhales */
@keyframes rfos-halo-breathe {
  0%, 100% {
    transform: scale(1.00);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.14);
    opacity: 1.00;
  }
}

/* Float — micro-movement. RAFI occupies space.
   9.6s = 2 breath cycles. Misaligned intentionally
   so float and breath are never in perfect sync — organic. */
@keyframes rfos-float {
  0%, 100% { transform: translateY(0px);   }
  30%       { transform: translateY(-2px);  }
  70%       { transform: translateY(1px);   }
}

/* Live dot breath — phase-offset 2.4s (half-cycle).
   When avatar inhales (brightens), dot softens.
   When avatar exhales, dot brightens.
   They balance each other. */
@keyframes rfos-dot-breathe {
  0%, 100% { opacity: 0.90; transform: scale(1.00); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}

/* Cursor — slow blink while RAFI waits.
   1.4s. Smooth ease-in-out. Comfortable. Patient. */
@keyframes rfos-cursor-wait {
  0%, 100% { opacity: 0.65; }
  50%       { opacity: 0.08; }
}

/* Cursor during typewrite — step-end gives classic terminal feel */
@keyframes rfos-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── State: listening ── */
/* Avatar gets more active ring — same keyframe, different values via state class */
@keyframes rfos-avatar-listen {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(140, 160, 255, 0.16),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18),
      0 0 0 4px rgba(72, 100, 255, 0.09),
      0 10px 36px rgba(72, 100, 255, 0.18);
    border-color: rgba(72, 100, 255, 0.55);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(150, 172, 255, 0.24),
      inset 0 -1px 0 rgba(0, 0, 0, 0.14),
      0 0 0 9px rgba(72, 100, 255, 0.04),
      0 14px 46px rgba(72, 100, 255, 0.26);
    border-color: rgba(72, 100, 255, 0.72);
  }
}

@keyframes rfos-halo-listen {
  0%, 100% { transform: scale(1.05); opacity: 0.85; }
  50%       { transform: scale(1.20); opacity: 1.00; }
}

/* ── State: urgent ── */
@keyframes rfos-avatar-urgent {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 100, 150, 0.14),
      inset 0 -1px 0 rgba(0, 0, 0, 0.20),
      0 0 0 4px rgba(225, 48, 108, 0.10),
      0 10px 36px rgba(225, 48, 108, 0.20);
    border-color: rgba(225, 48, 108, 0.55);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 120, 165, 0.22),
      inset 0 -1px 0 rgba(0, 0, 0, 0.16),
      0 0 0 9px rgba(225, 48, 108, 0.04),
      0 14px 46px rgba(225, 48, 108, 0.30);
    border-color: rgba(225, 48, 108, 0.72);
  }
}

@keyframes rfos-halo-urgent {
  0%, 100% { transform: scale(1.06); opacity: 0.88; }
  50%       { transform: scale(1.22); opacity: 1.00; }
}

/* Thinking */
@keyframes rfos-thinking-breathe {
  0%, 100% { opacity: 0.86; }
  50%       { opacity: 1.00; }
}
@keyframes rfos-dot-bounce {
  0%, 80%, 100% { transform: scale(0.75); opacity: 0.45; }
  40%            { transform: scale(1.25); opacity: 1.00; }
}

/* Input attention pulse — fires once. Never loops. */
@keyframes rfos-input-invite {
  0%   { box-shadow: 0 0 0 0   rgba(72, 100, 255, 0.00); }
  35%  { box-shadow: 0 0 0 5px rgba(72, 100, 255, 0.10); }
  100% { box-shadow: 0 0 0 0   rgba(72, 100, 255, 0.00); }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
  .rfos-stage-wrap { padding-bottom: 36px; }
  .rfos-avatar-wrap { padding: 24px; }
  .rfos-avatar { width: 128px; height: 128px; }
  .rfos-avatar img { width: 106px; height: 106px; }
  .rfos-greeting { font-size: 1.36rem; max-width: 500px; }
  .rfos-h1-band h1, .rfos-h1-band .rfos-h1-text { font-size: 2.10rem; }
}

@media (max-width: 1023px) {
  .rfos-avatar { width: 108px; height: 108px; }
  .rfos-avatar img { width: 88px; height: 88px; }
  .rfos-greeting { font-size: 1.22rem; }
}

@media (max-width: 767px) {
  .rfos-stage-wrap { padding-bottom: 24px; }
  .rfos-avatar-wrap { padding: 18px; margin-bottom: 14px; }
  .rfos-avatar { width: 96px; height: 96px; }
  .rfos-avatar img { width: 78px; height: 78px; }
  .rfos-greeting {
    font-size: 1.14rem;
    max-width: 100%;
    padding: 0 6px;
    min-height: 1.8em;
  }
  .rfos-identity { margin-bottom: 11px; }
  .rfos-identity-name { font-size: 0.62rem; }
  .rfos-trust-whisper { font-size: 0.68rem; margin-top: 12px; }
  .rfos-h1-band { padding: 24px 16px 0; }
  .rfos-h1-band h1, .rfos-h1-band .rfos-h1-text { font-size: 1.45rem; }
  .rfos-fallback-band { padding: 8px 16px 0; }
  /* Modal compact */
  .rfos-conv-header { padding: 11px 13px; }
  .rfos-conv-avatar { width: 34px; height: 34px; }
  .rfos-conv-avatar img { width: 28px; height: 28px; }
  .rfos-conv-msg { font-size: 0.81rem; }
  .rfos-tl-label { display: none; }
  .rfos-tl-dot { width: 6px; height: 6px; }
  .rfos-thinking { padding: 26px 14px; min-height: 170px; }
  .rfos-confirmation-avatar { width: 56px; height: 56px; }
  .rfos-confirmation-avatar img { width: 46px; height: 46px; }
  .rfos-summary { flex-direction: column; align-items: flex-start; gap: 7px; }
  .rfos-summary-text { font-size: 0.79rem; }
}

@media (max-width: 380px) {
  .rfos-stage-wrap { padding-bottom: 18px; }
  .rfos-avatar-wrap { padding: 14px; }
  .rfos-avatar { width: 84px; height: 84px; }
  .rfos-avatar img { width: 68px; height: 68px; }
  .rfos-greeting { font-size: 1.04rem; }
  .rfos-h1-band h1, .rfos-h1-band .rfos-h1-text { font-size: 1.28rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rfos-stage-wrap,
  .rfos-conv-header,
  .rfos-summary,
  .rfos-confirmation,
  .rfos-trust-whisper,
  .rfos-identity,
  .rfos-greeting       { animation: none; opacity: 1; transform: none; }

  .rfos-avatar,
  .rfos-stage--listening .rfos-avatar,
  .rfos-stage--urgent    .rfos-avatar,
  .rfos-stage--ready     .rfos-avatar  { animation: none; }

  .rfos-halo,
  .rfos-stage--listening .rfos-halo,
  .rfos-stage--urgent    .rfos-halo,
  .rfos-stage--ready     .rfos-halo   { animation: none; }

  .rfos-live-dot         { animation: none; opacity: 0.85; }
  /* Cursor stays visible at rest — just no blink */
  .rfos-cursor           { animation: none; opacity: 0.55; }
  .rfos-cursor.rfos-cursor--hidden { opacity: 0; }
  .rfos-thinking-avatar  { animation: none; }
  .rfos-thinking-dot     { animation: none; }
  .rfos-avatar img       { animation: none; opacity: 1; }
}