/**
 * fx-request-flow-v4.css — fxrf4-v5p
 * RAFI Request Flow V5 — Premium Polish
 *
 * NAMESPACE: fxrf4-* exclusively
 * ZERO dependency on .modal, main.css, fixeo_v5_fixes.css
 * Mobile-first. One question per screen. RAFI present everywhere.
 */

/* ─── SCOPED RESET ───────────────────────────────────────────── */
#fxrf4-root *,
#fxrf4-root *::before,
#fxrf4-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── ROOT HOST ─────────────────────────────────────────────── */
#fxrf4-root {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 19000;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#fxrf4-root.fxrf4-active {
  display: block;
}

/* ─── BACKDROP ───────────────────────────────────────────────── */
#fxrf4-bd {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fxrf4-bd-in 200ms ease both;
}

@keyframes fxrf4-bd-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── DIALOG ─────────────────────────────────────────────────── */
#fxrf4-dialog {
  position: absolute;
  background: #090b16;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 460px;
  max-height: min(88vh, 680px);

  /* Calm, diffuse shadow — not heavy */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.32),
    0 20px 60px rgba(0, 0, 0, 0.44),
    0 0 0 0.5px rgba(255, 255, 255, 0.04) inset;

  animation: fxrf4-dialog-in 260ms cubic-bezier(0.34, 1.12, 0.64, 1) 80ms both;
}

@keyframes fxrf4-dialog-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ─── HEADER ─────────────────────────────────────────────────── */
#fxrf4-head {
  flex-shrink: 0;
  position: relative;
  /* Right padding: close button is 44px wide + 14px from edge = 58px. 62px gives 4px buffer. */
  padding: 22px 62px 20px 22px;
}

#fxrf4-rafi-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

/* Avatar ring */
#fxrf4-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(72, 100, 255, 0.10);
  border: 1.5px solid rgba(72, 100, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /*
   * Presence breathing — 4.8s period matches RAFI OS (LOCKED).
   * Opacity range tightened: 0.55→1 was perceptible; 0.72→0.94 is felt, not seen.
   * Easing: slightly earlier inflection (0.37,0,0.63,1) → feels organic, not mechanical.
   */
  animation: fxrf4-avatar-breathe 4.8s cubic-bezier(0.37, 0, 0.63, 1) infinite;
}

#fxrf4-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Fallback glyph shown when image fails */
#fxrf4-avatar-fallback {
  font-size: 0.80rem;
  font-weight: 800;
  color: rgba(72, 100, 255, 0.70);
  line-height: 1;
  letter-spacing: -0.02em;
  display: none;
}

#fxrf4-avatar.img-failed #fxrf4-avatar-fallback {
  display: block;
}

@keyframes fxrf4-avatar-breathe {
  /* Narrower range: felt subconsciously, never consciously noticed */
  0%, 100% { opacity: 0.72; }
  50%       { opacity: 0.94; }
}

#fxrf4-rafi-msg {
  flex: 1;
  min-width: 0;
}

.fxrf4-rafi-name {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(72, 100, 255, 0.75);
  margin-bottom: 4px;
  line-height: 1;
}

.fxrf4-rafi-name.is-urgent {
  color: rgba(210, 60, 60, 0.80);
}

.fxrf4-rafi-text {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.28;
  letter-spacing: -0.015em;
}

/* Typing cursor — blinks only while typing */
.fxrf4-rafi-text.is-typing::after {
  content: '|';
  display: inline-block;
  color: rgba(72, 100, 255, 0.55);
  animation: fxrf4-cursor 0.9s step-start infinite;
  margin-left: 1px;
}

@keyframes fxrf4-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── CLOSE BUTTON ───────────────────────────────────────────── */
#fxrf4-close {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.82rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s, color 0.15s;
  z-index: 2;
}

@media (hover: hover) {
  #fxrf4-close:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.60);
  }
}

#fxrf4-close:active {
  transform: translateY(-50%) scale(0.90);
  transition: transform 0.08s ease;
}

/* ─── PROGRESS LINE ──────────────────────────────────────────── */
#fxrf4-progress {
  flex-shrink: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
}

#fxrf4-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Full opacity — softness reads as a bug */
  background: rgba(72, 100, 255, 1);
  border-radius: 0 2px 2px 0;
  /* Faster — completes while new screen is still entering, feels synchronised */
  transition: width 260ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BODY ───────────────────────────────────────────────────── */
#fxrf4-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px 22px 16px;
  position: relative;
}

/* Screen content wrapper */
.fxrf4-screen {
  /* Shorter + smaller offset — feels native, not theatrical */
  animation: fxrf4-screen-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.fxrf4-screen.is-leaving {
  /* Smoother exit curve — content slides out, doesn't snap */
  animation: fxrf4-screen-out 160ms cubic-bezier(0.4, 0, 1, 0.6) both;
  pointer-events: none;
}

.fxrf4-screen.is-leaving-back {
  animation: fxrf4-screen-out-back 160ms cubic-bezier(0.4, 0, 1, 0.6) both;
  pointer-events: none;
}

@keyframes fxrf4-screen-in {
  /* 8px offset: just enough to show directionality without being showy */
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fxrf4-screen-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-8px); }
}

@keyframes fxrf4-screen-in-back {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fxrf4-screen-out-back {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(8px); }
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
#fxrf4-foot {
  flex-shrink: 0;
  padding: 20px 22px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ─── SERVICE CHIPS ──────────────────────────────────────────── */
.fxrf4-chips-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.fxrf4-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease,
    opacity 0.18s ease;
  position: relative;
  min-height: 64px;
}

.fxrf4-chip-icon {
  font-size: 1.50rem;
  line-height: 1;
  flex-shrink: 0;
  /* Calm deceleration — no spring on icon selection */
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.fxrf4-chip-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.80);
  line-height: 1.2;
  transition: color 0.15s;
}

@media (hover: hover) {
  .fxrf4-chip:hover {
    border-color: rgba(72, 100, 255, 0.28);
    background: rgba(72, 100, 255, 0.05);
  }
  .fxrf4-chip:hover .fxrf4-chip-label {
    color: rgba(255, 255, 255, 0.92);
  }
}

.fxrf4-chip.is-selected {
  border-color: rgba(72, 100, 255, 0.55);
  background: rgba(72, 100, 255, 0.09);
}

.fxrf4-chip.is-selected .fxrf4-chip-icon {
  /* Subtle — confirms selection without being decorative */
  transform: scale(1.05);
}

.fxrf4-chip.is-selected .fxrf4-chip-label {
  color: rgba(255, 255, 255, 0.97);
}

/* Selected indicator — small, unobtrusive */
.fxrf4-chip.is-selected::after {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 9px;
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(72, 100, 255, 0.65);
  /* No spring — arrives with quiet confidence */
  animation: fxrf4-check-appear 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxrf4-check-appear {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.fxrf4-chip.is-dimmed {
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.20s ease;
}

.fxrf4-chip.is-tapping {
  /* Barely perceptible — acknowledges touch without performing */
  transform: scale(1.015);
  transition: transform 0.10s ease;
}

/* "Autre chose" — full width, quiet invitation */
.fxrf4-chip.is-other {
  grid-column: 1 / -1;
  min-height: 50px;
  padding: 12px 16px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.09);
  justify-content: center;
}

.fxrf4-chip.is-other .fxrf4-chip-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}

@media (hover: hover) {
  .fxrf4-chip.is-other:hover .fxrf4-chip-label {
    color: rgba(255, 255, 255, 0.58);
  }
  .fxrf4-chip.is-other:hover {
    border-color: rgba(255, 255, 255, 0.18);
  }
}

/* "Autre chose" inline input */
.fxrf4-other-input-wrap {
  display: none;
  margin-top: 10px;
}

.fxrf4-other-input-wrap.is-visible {
  display: block;
  animation: fxrf4-screen-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ─── CITY CHIPS ─────────────────────────────────────────────── */
/* ─── CITY ROW ── base: horizontal scroll (no detected city) ─── */
.fxrf4-city-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
  margin-bottom: 18px;
  -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
  mask-image: linear-gradient(to right, black 88%, transparent 100%);
}

.fxrf4-city-row::-webkit-scrollbar {
  display: none;
}

/*
 * DETECTED CITY LAYOUT
 *
 * When a detected city is present (always first child, .is-detected),
 * switch from horizontal scroll to a two-zone vertical layout:
 *   Zone 1: detected city — full-width featured card (the obvious answer)
 *   Zone 2: remaining cities — compact horizontal wrap (alternatives)
 *
 * :has() is CSS Level 4. Supported: Chrome 105+, Safari 15.4+, Firefox 121+.
 * Graceful degradation: browsers without :has() keep the horizontal scroll layout.
 * No JS change required — .is-detected is already set by the existing render logic.
 */
.fxrf4-city-row:has(.fxrf4-city-chip.is-detected) {
  flex-wrap: wrap;
  overflow-x: visible;
  -webkit-mask-image: none;
  mask-image: none;
  gap: 0;
  row-gap: 10px;
}

/* ── Non-detected chips (zone 2) — compact horizontal row ─── */
.fxrf4-city-row:has(.fxrf4-city-chip.is-detected) .fxrf4-city-chip:not(.is-detected) {
  flex: 0 0 auto;
}

/* ── Wrap the non-detected chips as a sub-row ── */
/* The detected chip is width:100% → forces a break.
   The 5 remaining chips sit on a new line, left-aligned with natural spacing. */
.fxrf4-city-row:has(.fxrf4-city-chip.is-detected) .fxrf4-city-chip:nth-child(2) {
  margin-left: 0;
}

/* Horizontal gap between zone-2 chips */
.fxrf4-city-row:has(.fxrf4-city-chip.is-detected) .fxrf4-city-chip:not(.is-detected) + .fxrf4-city-chip:not(.is-detected) {
  margin-left: 8px;
}

/* Left-to-right stagger entry */
.fxrf4-city-row .fxrf4-city-chip {
  animation: fxrf4-chip-enter 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.fxrf4-city-row .fxrf4-city-chip:nth-child(1) { animation-delay: 0ms; }
.fxrf4-city-row .fxrf4-city-chip:nth-child(2) { animation-delay: 30ms; }
.fxrf4-city-row .fxrf4-city-chip:nth-child(3) { animation-delay: 50ms; }
.fxrf4-city-row .fxrf4-city-chip:nth-child(4) { animation-delay: 70ms; }
.fxrf4-city-row .fxrf4-city-chip:nth-child(5) { animation-delay: 90ms; }
.fxrf4-city-row .fxrf4-city-chip:nth-child(6) { animation-delay: 110ms; }

@keyframes fxrf4-chip-enter {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─── CITY CHIPS ─────────────────────────────────────────────── */
.fxrf4-city-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 11px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

@media (hover: hover) {
  .fxrf4-city-chip:hover {
    border-color: rgba(72, 100, 255, 0.32);
    background: rgba(72, 100, 255, 0.06);
    color: rgba(255, 255, 255, 0.92);
  }
}

.fxrf4-city-chip.is-selected {
  border-color: rgba(72, 100, 255, 0.60);
  background: rgba(72, 100, 255, 0.11);
  color: rgba(255, 255, 255, 0.97);
}

/*
 * DETECTED CITY — featured card
 *
 * Full-width, card shape (not pill), slightly taller, centred text.
 * The dominant element on the screen — the obvious answer for ~80% of users.
 * One heartbeat pulse on entry confirms this is a personalised suggestion.
 */
.fxrf4-city-chip.is-detected {
  width: 100%;
  flex-shrink: 0;
  border-radius: 16px;
  border-color: rgba(72, 100, 255, 0.50);
  background: rgba(72, 100, 255, 0.07);
  padding: 18px 20px;
  min-height: 58px;
  justify-content: center;
  font-size: 0.96rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  animation: fxrf4-city-pulse 800ms ease-out 400ms 1 both;
}

@keyframes fxrf4-city-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(72, 100, 255, 0.28); }
  60%  { box-shadow: 0 0 0 8px rgba(72, 100, 255, 0); }
  100% { box-shadow: none; }
}

@media (hover: hover) {
  .fxrf4-city-chip.is-detected:hover {
    border-color: rgba(72, 100, 255, 0.65);
    background: rgba(72, 100, 255, 0.12);
    color: rgba(255, 255, 255, 0.98);
  }
}

.fxrf4-city-chip.is-more {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.44);
  font-size: 0.80rem;
}

/* City select */
.fxrf4-select-wrap {
  position: relative;
  margin-bottom: 18px;
}

.fxrf4-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.28);
  pointer-events: none;
}

.fxrf4-select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.90);
  font-size: 0.96rem;
  font-weight: 500;
  padding: 14px 40px 14px 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.16s;
}

.fxrf4-select:focus {
  border-color: rgba(72, 100, 255, 0.50);
}

.fxrf4-select option {
  background: #1a1c30;
  color: rgba(255, 255, 255, 0.92);
}

/* ─── URGENCY CARDS ──────────────────────────────────────────── */
/*
 * Three scheduling options. Visual hierarchy communicates priority level
 * at a glance — the user should never have to read to understand urgency.
 *
 * Hierarchy achieved through:
 *   - "Maintenant" (.is-urgent): taller min-height, stronger border, readable meta
 *   - Descending border opacity: 0.12 → 0.09 → 0.07
 *   - Meta text at 0.50 opacity (was 0.34 — barely readable)
 */
.fxrf4-urgency-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.fxrf4-urgency-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.15s, background 0.15s;
  min-height: 66px;
}

/* "Aujourd'hui" — medium priority, slightly lighter border */
.fxrf4-urgency-card:nth-child(2) {
  border-color: rgba(255, 255, 255, 0.07);
}

/* "Plus tard" — lowest priority, most subdued */
.fxrf4-urgency-card:nth-child(3) {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

@media (hover: hover) {
  .fxrf4-urgency-card:hover {
    border-color: rgba(72, 100, 255, 0.25);
    background: rgba(72, 100, 255, 0.04);
  }
}

.fxrf4-urgency-card.is-selected {
  border-color: rgba(72, 100, 255, 0.55);
  background: rgba(72, 100, 255, 0.09);
}

.fxrf4-urgency-card.is-urgent.is-selected {
  border-color: rgba(210, 60, 60, 0.55);
  background: rgba(210, 60, 60, 0.07);
}

/*
 * "Maintenant" (.is-urgent) — the primary option.
 * Taller, slightly stronger border presence.
 * Communicates: "this is the important choice."
 */
.fxrf4-urgency-card.is-urgent {
  min-height: 72px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
}

@media (hover: hover) {
  .fxrf4-urgency-card.is-urgent:hover {
    border-color: rgba(72, 100, 255, 0.30);
    background: rgba(72, 100, 255, 0.06);
  }
}

.fxrf4-urgency-card.is-tapping {
  transform: scale(0.98);
  transition: transform 0.08s ease;
}

.fxrf4-urgency-icon {
  font-size: 1.40rem;
  flex-shrink: 0;
  line-height: 1;
  width: 32px;
  text-align: center;
}

.fxrf4-urgency-label {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  line-height: 1.2;
}

.fxrf4-urgency-meta {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  /* Increased from 0.34 — meta is the key differentiator between options */
  color: rgba(255, 255, 255, 0.50);
  margin-top: 3px;
  line-height: 1.3;
}

/* Stagger drop-in — purposeful, not decorative */
.fxrf4-urgency-cards .fxrf4-urgency-card {
  /* Smooth deceleration — arrives without overshooting */
  animation: fxrf4-card-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fxrf4-urgency-cards .fxrf4-urgency-card:nth-child(1) { animation-delay: 0ms; }
.fxrf4-urgency-cards .fxrf4-urgency-card:nth-child(2) { animation-delay: 50ms; }
.fxrf4-urgency-cards .fxrf4-urgency-card:nth-child(3) { animation-delay: 100ms; }

@keyframes fxrf4-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── PHONE INPUT ────────────────────────────────────────────── */
.fxrf4-phone-wrap {
  position: relative;
  margin-bottom: 12px;
}

.fxrf4-phone-prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.42);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 1;
  line-height: 1;
  /* Fixed width prevents emoji rendering variance from shifting the number */
  min-width: 74px;
  white-space: nowrap;
}

.fxrf4-phone-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.30rem;
  font-weight: 500;
  line-height: 1;
  /* Left pad: 16px edge + ~74px prefix + 10px gap = 100px */
  padding: 20px 52px 20px 100px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.20s ease, background 0.20s ease;
  letter-spacing: 0.02em;
}

.fxrf4-phone-input::placeholder {
  color: rgba(255, 255, 255, 0.18);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.fxrf4-phone-input:focus {
  border-color: rgba(72, 100, 255, 0.50);
  background: rgba(72, 100, 255, 0.04);
}

.fxrf4-phone-input.is-valid {
  border-color: rgba(32, 201, 151, 0.48);
}

.fxrf4-phone-input.is-error {
  border-color: rgba(210, 60, 60, 0.55);
  animation: fxrf4-shake 0.30s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* Valid checkmark */
.fxrf4-phone-valid-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(32, 201, 151, 0.70);
  font-size: 1.00rem;
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.fxrf4-phone-valid-icon.is-visible {
  opacity: 1;
  /* Arrives decisively — no spring bounce; validation feels earned, not flashy */
  animation: fxrf4-valid-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxrf4-valid-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.5); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

@keyframes fxrf4-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-3px); }
  80%       { transform: translateX(2px); }
}

/* Error hint — soft fade in with delay */
.fxrf4-hint {
  font-size: 0.74rem;
  color: rgba(210, 80, 80, 0.80);
  margin-top: 8px;
  padding-left: 4px;
  line-height: 1.4;
  display: none;
}

.fxrf4-hint.is-visible {
  display: block;
  animation: fxrf4-hint-in 0.20s ease 80ms both;
}

@keyframes fxrf4-hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Returning user — pre-filled number */
.fxrf4-prefill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 18px;
  background: rgba(72, 100, 255, 0.07);
  border: 1.5px solid rgba(72, 100, 255, 0.16);
  border-radius: 16px;
  margin-bottom: 12px;
}

.fxrf4-prefill-number {
  font-size: 1.10rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.03em;
}

.fxrf4-prefill-change {
  font-size: 0.74rem;
  font-weight: 600;
  color: rgba(72, 100, 255, 0.60);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 10px;
  border-radius: 8px;
  transition: color 0.14s, background 0.14s;
}

@media (hover: hover) {
  .fxrf4-prefill-change:hover {
    color: rgba(72, 100, 255, 0.85);
    background: rgba(72, 100, 255, 0.09);
  }
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.fxrf4-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: none;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
  line-height: 1.2;
}

.fxrf4-btn:active {
  transform: scale(0.97);
  transition: transform 0.08s ease;
}

.fxrf4-btn:disabled {
  opacity: 0.36;
  cursor: not-allowed;
  transform: none !important;
}

.fxrf4-btn-primary {
  height: 54px;
  background: rgba(72, 100, 255, 0.94);
  color: #fff;
  letter-spacing: 0.005em;
}

@media (hover: hover) {
  .fxrf4-btn-primary:hover:not(:disabled) {
    background: rgba(72, 100, 255, 1);
  }
}

.fxrf4-btn-primary.is-urgent {
  background: rgba(210, 48, 48, 0.92);
}

@media (hover: hover) {
  .fxrf4-btn-primary.is-urgent:hover:not(:disabled) {
    background: rgba(210, 48, 48, 1);
  }
}

/* Loading dots */
.fxrf4-btn-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.fxrf4-btn-dots span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.80);
  animation: fxrf4-dot-pulse 1.2s ease-in-out infinite;
}

.fxrf4-btn-dots span:nth-child(2) { animation-delay: 0.18s; }
.fxrf4-btn-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes fxrf4-dot-pulse {
  0%, 100% { transform: scale(0.80); opacity: 0.45; }
  50%       { transform: scale(1.00); opacity: 1; }
}

.fxrf4-btn-back {
  height: 40px;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 8px;
  border-radius: 12px;
  transition: color 0.15s;
}

@media (hover: hover) {
  .fxrf4-btn-back:hover {
    color: rgba(255, 255, 255, 0.52);
  }
}

/* ─── INTERSTITIAL ───────────────────────────────────────────── */
#fxrf4-interstitial {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0 16px;
  text-align: center;
}

.fxrf4-inter-dots {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.fxrf4-inter-dots span {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(72, 100, 255, 0.50);
  animation: fxrf4-inter-breathe 1.8s ease-in-out infinite;
}

.fxrf4-inter-dots span:nth-child(2) { animation-delay: 0.32s; }
.fxrf4-inter-dots span:nth-child(3) { animation-delay: 0.64s; }

@keyframes fxrf4-inter-breathe {
  0%, 100% { transform: scale(0.68); opacity: 0.28; }
  50%       { transform: scale(1.00); opacity: 1; }
}

.fxrf4-inter-line2 {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.22);
  margin-top: 12px;
  opacity: 0;
  transition: opacity 0.40s ease;
}

.fxrf4-inter-line2.is-visible {
  opacity: 1;
}

/* ─── SUCCESS SCREEN ─────────────────────────────────────────── */
#fxrf4-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px 10px;
}

.fxrf4-check-ring {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
}

.fxrf4-check-ring-inner {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(32, 201, 151, 0.08);
  border: 1.5px solid rgba(32, 201, 151, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.80rem;
  /* Smooth deceleration — arrives with quiet confidence, no bounce */
  animation: fxrf4-ring-in 320ms cubic-bezier(0.22, 1, 0.36, 1) 60ms both;
}

@keyframes fxrf4-ring-in {
  from { transform: scale(0.20); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.fxrf4-check-ring-ripple {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(32, 201, 151, 0.22);
  /* Smaller expansion — one quiet exhale, not a burst */
  animation: fxrf4-ripple 480ms ease-out 280ms 1 both;
  pointer-events: none;
}

@keyframes fxrf4-ripple {
  from { transform: scale(0.90); opacity: 0.42; }
  to   { transform: scale(1.28); opacity: 0; }
}

.fxrf4-success-tag {
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(72, 100, 255, 0.60);
  margin-bottom: 8px;
  /* Tighter cascade — elements arrive as a cohesive group, not a parade */
  animation: fxrf4-fade-up 240ms ease 300ms both;
}

.fxrf4-success-title {
  font-size: 1.12rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.96);
  line-height: 1.28;
  margin-bottom: 12px;
  animation: fxrf4-fade-up 240ms ease 360ms both;
}

.fxrf4-success-body {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.48);
  line-height: 1.58;
  max-width: 288px;
  margin: 0 auto 24px;
  animation: fxrf4-fade-up 240ms ease 420ms both;
}

.fxrf4-success-ref {
  font-family: 'SF Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.22);
  margin-bottom: 20px;
  animation: fxrf4-fade-up 240ms ease 480ms both;
}

.fxrf4-success-ref strong {
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.06em;
}

/* Three-step visual */
.fxrf4-success-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  width: 100%;
  animation: fxrf4-fade-up 240ms ease 540ms both;
}

.fxrf4-success-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  max-width: 88px;
}

.fxrf4-success-step-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(32, 201, 151, 0.06);
  border: 1.5px solid rgba(32, 201, 151, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
}

.fxrf4-success-step-dot.is-active {
  border-color: rgba(32, 201, 151, 0.42);
  background: rgba(32, 201, 151, 0.10);
  animation: fxrf4-step-pulse 2.6s ease-in-out 1s infinite;
}

@keyframes fxrf4-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(32, 201, 151, 0.22); }
  50%       { box-shadow: 0 0 0 5px rgba(32, 201, 151, 0); }
}

.fxrf4-success-step-lbl {
  font-size: 0.59rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
  text-align: center;
  line-height: 1.3;
  white-space: pre-line;
}

.fxrf4-success-step-sep {
  flex: 0 0 24px;
  height: 1px;
  background: rgba(32, 201, 151, 0.12);
  margin-top: 17px;
}

/* Success actions */
.fxrf4-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 0 2px;
  animation: fxrf4-fade-up 240ms ease 600ms both;
}

.fxrf4-btn-success-primary {
  height: 52px;
  background: rgba(72, 100, 255, 0.92);
  color: #fff;
  border-radius: 16px;
  font-size: 0.94rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s;
  letter-spacing: 0.005em;
}

@media (hover: hover) {
  .fxrf4-btn-success-primary:hover {
    background: rgba(72, 100, 255, 1);
  }
}

.fxrf4-btn-success-secondary {
  height: 40px;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.14s;
}

@media (hover: hover) {
  .fxrf4-btn-success-secondary:hover {
    color: rgba(255, 255, 255, 0.52);
  }
}

@keyframes fxrf4-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── MOBILE ≤640px — ADAPTIVE BOTTOM SHEET ─────────────────── */

/*
 * KEYBOARD-AWARE POSITIONING
 *
 * --fxrf4-kb-inset  : set by JS via visualViewport.resize listener (pixels from bottom)
 * .fxrf4-kb-active  : class on #fxrf4-dialog when keyboard is open
 *
 * On selection steps (step1, step2) the sheet stays at bottom:0.
 * On step3 (phone input), when the keyboard opens:
 *   – #fxrf4-dialog bottom lifts to --fxrf4-kb-inset + safe-area-inset-bottom
 *   – max-height expands to fill the remaining visual viewport
 *   – The sheet slides up in one calm transition (no bounce)
 *
 * Works on: iPhone Safari (visualViewport), Samsung Internet, Android Chrome.
 * visualViewport.resize is the only reliable cross-browser signal.
 * If visualViewport is unavailable we fall back to window.resize.
 */

@media (max-width: 640px) {
  #fxrf4-dialog {
    /* ── Sheet base position ── */
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;

    /* 94dvh = visual viewport on scroll-free open; avoids iOS address-bar calc */
    max-height: min(94dvh, 760px);

    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-top: 16px;

    /* Keyboard slide — single calm transition, no bounce */
    transition: bottom 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
                max-height 220ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

    animation: fxrf4-sheet-in 280ms cubic-bezier(0.32, 0.72, 0, 1) 60ms both;
  }

  /* When keyboard is active: lift sheet up, use remaining visual space */
  #fxrf4-dialog.fxrf4-kb-active {
    bottom: var(--fxrf4-kb-inset, 0px);
    /* Fill whatever visual space remains above the keyboard */
    max-height: calc(var(--fxrf4-vvh, 100dvh) - env(safe-area-inset-top, 0px) - 4px);
    /* Ensure #fxrf4-body can scroll if content taller than sheet */
  }

  /* Drag handle */
  #fxrf4-dialog::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.11);
    z-index: 10;
    pointer-events: none;
  }

  @keyframes fxrf4-sheet-in {
    from { transform: translateY(100%); opacity: 0.85; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  #fxrf4-head {
    padding: 14px 58px 16px 20px;
  }

  #fxrf4-body {
    padding: 20px 20px 12px;
  }

  #fxrf4-foot {
    padding: 14px 20px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }

  .fxrf4-btn-primary {
    height: 58px;
    font-size: 1.00rem;
  }

  .fxrf4-phone-input {
    font-size: 1.36rem;
    padding: 22px 52px 22px 100px;
  }

  /* Service chips — taller, thumb-friendly */
  .fxrf4-chip {
    min-height: 66px;
    padding: 15px 12px;
  }

  .fxrf4-chip-label {
    font-size: 0.85rem;
  }

  /* ── Focus mode: keyboard open on step 3 ── */
  /* When keyboard is active: compact RAFI header to save vertical space.
     RAFI stays visible — just tighter. Close button stays accessible. */
  #fxrf4-dialog.fxrf4-kb-active #fxrf4-head {
    padding: 8px 52px 10px 16px;
  }

  #fxrf4-dialog.fxrf4-kb-active #fxrf4-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
  }

  #fxrf4-dialog.fxrf4-kb-active #fxrf4-avatar img {
    width: 28px;
    height: 28px;
  }

  #fxrf4-dialog.fxrf4-kb-active .fxrf4-rafi-name {
    display: none;
  }

  #fxrf4-dialog.fxrf4-kb-active .fxrf4-rafi-text {
    font-size: 0.92rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.70);
  }

  #fxrf4-dialog.fxrf4-kb-active #fxrf4-body {
    padding: 12px 20px 8px;
  }

  /* Back button less prominent when keyboard is up */
  #fxrf4-dialog.fxrf4-kb-active .fxrf4-btn-back {
    opacity: 0;
    pointer-events: none;
  }
}

/* ─── CITY CHIPS — mobile refinements ───────────────────────── */
@media (max-width: 640px) {
  .fxrf4-city-row {
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 16px;
  }

  .fxrf4-city-chip {
    /* Taller, thumb-safe */
    padding: 13px 22px;
    font-size: 0.90rem;
    min-height: 46px;
  }

  /* Detected city on mobile — full-width card, same as desktop but thumb-optimised */
  .fxrf4-city-chip.is-detected {
    padding: 20px 20px;
    min-height: 62px;
    font-size: 0.98rem;
  }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #fxrf4-root *,
  #fxrf4-root *::before,
  #fxrf4-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── EMERGENCY MODE ─────────────────────────────────────────
   One restrained warm accent (amber). No red. No panic.
   Everything else inherits standard V5 visual language.
────────────────────────────────────────────────────────────── */

/* RAFI name label — emergency mode accent */
.fxrf4-rafi-name.is-emergency {
  color: rgba(234, 137, 54, 0.80);
}

/* ── Situation list — single-column, full-sentence items ──── */
.fxrf4-situation-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fxrf4-situation-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  min-height: 60px;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.12s ease,
    opacity 0.18s ease;
  position: relative;
}

@media (hover: hover) {
  .fxrf4-situation-item:hover {
    border-color: rgba(234, 137, 54, 0.28);
    background: rgba(234, 137, 54, 0.05);
  }
}

.fxrf4-situation-item.is-selected {
  border-color: rgba(234, 137, 54, 0.55);
  background: rgba(234, 137, 54, 0.08);
}

.fxrf4-situation-item.is-dimmed {
  opacity: 0.22;
  pointer-events: none;
  transition: opacity 0.20s ease;
}

.fxrf4-situation-item.is-tapping {
  /* Lighter than service chips — full-width items need less movement */
  transform: scale(1.01);
  transition: transform 0.10s ease;
}

.fxrf4-situation-icon {
  font-size: 1.40rem;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}

.fxrf4-situation-label {
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.25;
  flex: 1;
}

.fxrf4-situation-item.is-selected .fxrf4-situation-label {
  color: rgba(255, 255, 255, 0.97);
}

/* Selected indicator */
.fxrf4-situation-item.is-selected::after {
  content: '\2713';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.70rem;
  font-weight: 800;
  color: rgba(234, 137, 54, 0.70);
  /* Inherits same calm check-appear as service chips */
  animation: fxrf4-check-appear 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger drop-in — smooth deceleration, consistent with urgency cards */
.fxrf4-situation-list .fxrf4-situation-item {
  animation: fxrf4-card-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fxrf4-situation-list .fxrf4-situation-item:nth-child(1) { animation-delay: 0ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(2) { animation-delay: 40ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(3) { animation-delay: 80ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(4) { animation-delay: 120ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(5) { animation-delay: 160ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(6) { animation-delay: 200ms; }
.fxrf4-situation-list .fxrf4-situation-item:nth-child(7) { animation-delay: 240ms; }

/* ── Emergency primary button — amber accent ──────────────── */
.fxrf4-btn-primary.is-urgent {
  background: rgba(234, 137, 54, 0.92);
}

@media (hover: hover) {
  .fxrf4-btn-primary.is-urgent:hover:not(:disabled) {
    background: rgba(234, 137, 54, 1);
  }
}

/* ── Emergency success ring — amber ──────────────────────── */
.fxrf4-check-ring-inner.is-emergency {
  background: rgba(234, 137, 54, 0.08);
  border-color: rgba(234, 137, 54, 0.30);
}

.fxrf4-check-ring-ripple.is-emergency {
  border-color: rgba(234, 137, 54, 0.24);
}

/* ── Emergency active step dot — amber ───────────────────── */
.fxrf4-success-step-dot.is-active.is-emergency {
  border-color: rgba(234, 137, 54, 0.45);
  background: rgba(234, 137, 54, 0.10);
  animation: fxrf4-step-pulse-emergency 2.6s ease-in-out 1s infinite;
}

@keyframes fxrf4-step-pulse-emergency {
  0%, 100% { box-shadow: 0 0 0 0   rgba(234, 137, 54, 0.22); }
  50%       { box-shadow: 0 0 0 5px rgba(234, 137, 54, 0); }
}

/* ══════════════════════════════════════════════════════════════
   CITY SCREEN PREMIUM REFINEMENT — fxrf4-v5q
   CSS-only. No JS. No logic changes. No auto-advance changes.

   Three improvement axes:
     1. Mobile grid layout — 2-column balanced grid below 480px
     2. Premium chip depth — inner highlight + lower shadow
     3. Select integration — clear spacing, taller height, centred text
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PREMIUM DEPTH — all city chips ─────────────────────── */
/*
 * Subtle inner highlight (top-left) + soft lower shadow.
 * Values kept calm — RAFI visual identity, not neon.
 */
.fxrf4-city-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),   /* inner highlight */
    0 2px 8px rgba(0, 0, 0, 0.18);              /* gentle drop */
}

.fxrf4-city-chip.is-detected {
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.12),
    0 3px 12px rgba(72, 100, 255, 0.10);
}

.fxrf4-city-chip.is-selected {
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.14),
    0 3px 12px rgba(72, 100, 255, 0.10);
}

/* ── Pressed state — grounded, no bounce ──────────────────── */
.fxrf4-city-chip:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 4px rgba(0, 0, 0, 0.14);
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}

/* ── 2. MOBILE GRID — narrow screens ≤ 480px ──────────────── */
/*
 * Both detected and non-detected cases:
 * Convert all non-detected chips from horizontal scroll
 * to a balanced 2-column grid with equal widths and heights.
 *
 * Detected case: .is-detected stays full-width (zone 1).
 *   The remaining chips + "Autre ville" form a 2-column grid below.
 *
 * No-detect case: all chips (including "Autre ville") form
 *   a 2-column grid. "Autre ville" spans full width at bottom.
 *
 * :has() is already used by fxrf4-v5p so this is safe to extend.
 */
@media (max-width: 480px) {

  /* ── Base city-row → grid layout ── */
  .fxrf4-city-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
    padding-bottom: 0;
    margin-bottom: 14px;
  }

  /* Each chip fills its grid cell with equal height */
  .fxrf4-city-chip {
    flex-shrink: unset;
    white-space: normal;             /* allow label to wrap if needed */
    text-align: center;
    justify-content: center;         /* centre label in pill */
    min-height: 52px;                /* generous touch target */
    padding: 12px 10px;
  }

  /* Detected city — always full-width card, spans both columns */
  .fxrf4-city-chip.is-detected {
    grid-column: 1 / -1;
    padding: 18px 20px;
    min-height: 60px;
    text-align: center;
    justify-content: center;
  }

  /* "Autre ville →" — full-width at bottom, spans both columns */
  .fxrf4-city-chip.is-more {
    grid-column: 1 / -1;
    min-height: 48px;
    padding: 11px 16px;
    justify-content: center;
  }

  /* ── Override v5p horizontal-scroll rules for detected layout ── */
  /*
   * fxrf4-v5p uses :has(.is-detected) to add flex-wrap + margin rules.
   * In the grid context those rules interfere — reset them cleanly.
   */
  .fxrf4-city-row:has(.fxrf4-city-chip.is-detected) {
    display: grid;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
    flex-wrap: unset;
    row-gap: unset;
    gap: 8px;
  }

  .fxrf4-city-row:has(.fxrf4-city-chip.is-detected) .fxrf4-city-chip:not(.is-detected) {
    flex: unset;
    margin-left: 0 !important; /* reset v5p nth-child margin */
  }

  .fxrf4-city-row:has(.fxrf4-city-chip.is-detected) .fxrf4-city-chip:nth-child(2) {
    margin-left: 0 !important;
  }

  .fxrf4-city-row:has(.fxrf4-city-chip.is-detected)
    .fxrf4-city-chip:not(.is-detected) + .fxrf4-city-chip:not(.is-detected) {
    margin-left: 0 !important;
  }

}

/* ── Slightly larger gap on 390px+ — avoid compression ─────── */
@media (min-width: 390px) and (max-width: 480px) {
  .fxrf4-city-row {
    gap: 9px;
  }
  .fxrf4-city-chip {
    min-height: 54px;
  }
}

/* ── 3. SELECT INTEGRATION ─────────────────────────────────── */
/*
 * When "Autre ville" is tapped, the select appears via JS (display:block).
 * Add vertical breathing room + taller field + centred text.
 * Native select behaviour preserved — no replacement, no custom dropdown.
 */
.fxrf4-select-wrap {
  margin-top: 6px; /* base: slight extra space above */
}

.fxrf4-select {
  min-height: 52px;
  padding: 15px 40px 15px 18px;
  /* Vertical centring achieved via equal top/bottom padding */
}

/* Shift chevron down to match taller field */
.fxrf4-select-wrap::after {
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .fxrf4-select-wrap {
    margin-top: 10px;  /* generous separation from chips on mobile */
    margin-bottom: 14px;
  }

  .fxrf4-select {
    min-height: 54px;
    font-size: 0.96rem;
  }
}

/* ── Stagger delays — extend to cover 6 chips in grid ──────── */
/*
 * Existing delays cover :nth-child(1–6).
 * Grid renders same DOM order — stagger still applies correctly.
 * No change needed; confirmed by existing rules in v5o/v5p.
 */

/* ══════════════════════════════════════════════════════════════
   CITY SCREEN FINAL POLISH — fxrf4-v5r
   CSS-only. Zero JS. Zero logic. Zero dimension changes.
   Refinement-only: depth, rhythm, select integration, iOS.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. PREMIUM CHIP DEPTH — softer, more tactile ──────────── */
/*
 * Slightly brighter inner highlight (0.07→0.09 — still felt, not seen).
 * Drop kept at 8px but reduced opacity for less visual weight.
 * will-change: transform enables GPU compositing on iOS Safari
 * so the pressed translateY(1px) is perfectly smooth.
 */
.fxrf4-city-chip {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 2px 6px rgba(0, 0, 0, 0.16);
  will-change: transform;
  /* Include box-shadow in base transition so depth responds to state */
  transition:
    border-color 0.15s ease,
    background   0.15s ease,
    box-shadow   0.18s ease,
    color        0.15s ease;
}

/*
 * Detected city — fix: fxrf4-city-pulse ends at box-shadow:none,
 * which wipes the v5q depth shadow after the pulse completes.
 * Override the animation to land on the correct final depth state.
 */
@keyframes fxrf4-city-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(72, 100, 255, 0.28); }
  60%  { box-shadow: 0 0 0 8px rgba(72, 100, 255, 0);    }
  100% {
    box-shadow:
      inset 0 1px 0 rgba(72, 100, 255, 0.10),
      0 3px 10px rgba(72, 100, 255, 0.08);
  }
}

/* Detected — resting depth (after pulse lands) */
.fxrf4-city-chip.is-detected {
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.10),
    0 3px 10px rgba(72, 100, 255, 0.08);
}

/* Selected — consistent with detected but slightly more present */
.fxrf4-city-chip.is-selected {
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.12),
    0 3px 10px rgba(72, 100, 255, 0.09);
}

/* Pressed — collapses shadow toward surface, translateY already in v5q */
.fxrf4-city-chip:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.12);
  transition:
    transform    0.08s ease,
    box-shadow   0.08s ease;
}

/* ── 2. "AUTRE VILLE" — better integration ──────────────────── */
/*
 * Slightly more visible dashed border (0.08→0.11) so it reads as
 * part of the composition rather than an afterthought.
 * Still clearly secondary — dashed + muted text.
 */
.fxrf4-city-chip.is-more {
  border-color: rgba(255, 255, 255, 0.11);
}

@media (hover: hover) {
  .fxrf4-city-chip.is-more:hover {
    border-color: rgba(255, 255, 255, 0.20);
  }
}

/* ── 3. SELECT — softer border, better integration ──────────── */
/*
 * Resting border slightly lighter than chips (0.07 vs chip 0.09)
 * so the field reads as a different type of element — an invitation,
 * not a competitor to the chip grid.
 * Focus ring kept but slightly less aggressive.
 */
.fxrf4-select {
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 16px;   /* harmonise with detected city card radius */
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.fxrf4-select:focus {
  border-color: rgba(72, 100, 255, 0.40);
  box-shadow: 0 0 0 3px rgba(72, 100, 255, 0.10);
  outline: none;
}

/* ── 4. VERTICAL RHYTHM — unified 20px beat ─────────────────── */
/*
 * City row bottom margin: 18px → 20px (base + mobile).
 * Select wrap bottom margin: 18px → 20px.
 * Creates a consistent 20px gap between all vertical sections:
 *   [detected card] 8px [chip grid] 20px [Autre ville] 20px [select]
 */
.fxrf4-city-row {
  margin-bottom: 20px;
}

.fxrf4-select-wrap {
  margin-bottom: 20px;
}

/* Mobile overrides — tighten slightly on narrow screens */
@media (max-width: 480px) {
  .fxrf4-city-row {
    margin-bottom: 16px;
  }

  .fxrf4-select-wrap {
    margin-top: 12px;
    margin-bottom: 16px;
  }
}

/* ── 5. iOS SAFARI — GPU compositing + tap highlight ────────── */
/*
 * -webkit-tap-highlight-color: transparent is already on .fxrf4-city-chip.
 * will-change: transform declared above for GPU layer promotion.
 * Explicit -webkit-transform ensures translateY composites correctly
 * on older iOS WebKit (pre-16) that may not honour transform alone.
 */
.fxrf4-city-chip:active {
  -webkit-transform: translateY(1px);
  transform: translateY(1px);
}

/* ══════════════════════════════════════════════════════════════
   PHONE SCREEN PREMIUM REFINEMENT — fxrf4-v5s
   CSS-only. Zero JS. Zero logic changes.
   Zero dimension changes to phone-wrap, input, prefix.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. FLAG / PREFIX SEPARATOR ─────────────────────────────── */
/*
 * A thin vertical rule at the exact boundary between the fixed prefix
 * (left:16px + min-width:74px = right edge at 90px) and the editable
 * phone number (text begins at padding-left:100px).
 * Makes the separation optically unambiguous — no layout change.
 * padding-left:100px preserved (LOCKED — af6e2f8).
 */
.fxrf4-phone-wrap::before {
  content: '';
  position: absolute;
  left: 90px;
  top: 50%;
  transform: translateY(-50%);
  height: 26px;
  width: 1px;
  background: rgba(255, 255, 255, 0.09);
  pointer-events: none;
  z-index: 2;
  border-radius: 1px;
}

/* ── 2. PHONE INPUT — premium depth + transition ─────────────── */
/*
 * Add box-shadow to transition so the border-color change on focus
 * and is-valid don't feel abrupt. Inner highlight for depth.
 * No change to padding, size, or color values.
 */
.fxrf4-phone-input {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.18);
  transition:
    border-color 0.22s ease,
    background   0.22s ease,
    box-shadow   0.22s ease;
}

.fxrf4-phone-input:focus {
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.10),
    0 3px 12px rgba(72, 100, 255, 0.10),
    0 0 0 3px rgba(72, 100, 255, 0.06);
}

/* ── 3. VALID STATE — softer, earned ────────────────────────── */
/*
 * Green ring replaces the hard 0.48 border with a 3px ring outside
 * for gentler appearance. Checkmark transition softened to 0.28s.
 */
.fxrf4-phone-input.is-valid {
  border-color: rgba(32, 201, 151, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(32, 201, 151, 0.08),
    0 0 0 3px rgba(32, 201, 151, 0.07);
}

/* Soften checkmark appearance */
.fxrf4-phone-valid-icon {
  transition: opacity 0.28s ease;
}

@keyframes fxrf4-valid-in {
  from { opacity: 0; transform: translateY(-50%) scale(0.6); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ── 4. CTA — Apple Pay quality depth ───────────────────────── */
/*
 * Inner top highlight gives the button a gentle surface quality.
 * Outer shadow: soft lower depth.
 * Pressed: shadow collapses, translateY(1px) instead of scale alone.
 * Colors, size, wording: UNCHANGED.
 */
.fxrf4-btn-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),  /* upper highlight */
    0 4px 14px rgba(72, 100, 255, 0.28),        /* colored depth */
    0 1px 3px  rgba(0, 0, 0, 0.18);             /* base shadow */
  transition:
    background  0.15s ease,
    opacity     0.15s ease,
    box-shadow  0.15s ease;
  will-change: transform;
}

.fxrf4-btn-primary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px  rgba(72, 100, 255, 0.18),
    0 1px 2px  rgba(0, 0, 0, 0.14);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

/* Emergency CTA — amber depth (not blue) */
.fxrf4-btn-primary.is-urgent {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(234, 137, 54, 0.28),
    0 1px 3px  rgba(0, 0, 0, 0.18);
}

.fxrf4-btn-primary.is-urgent:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px  rgba(234, 137, 54, 0.16),
    0 1px 2px  rgba(0, 0, 0, 0.14);
}

/* Disabled — no shadow, flat */
.fxrf4-btn-primary:disabled {
  box-shadow: none !important;
}

/* ── 5. KEYBOARD STATE — prevent wrap compression ───────────── */
/*
 * When kb-active: ensure phone-wrap margin doesn't collapse under
 * vertical pressure. The existing keyboard system handles lift; this
 * ensures the input + CTA breathing room is maintained.
 */
@media (max-width: 640px) {
  #fxrf4-dialog.fxrf4-kb-active .fxrf4-phone-wrap {
    margin-bottom: 14px;
  }

  #fxrf4-dialog.fxrf4-kb-active .fxrf4-btn-primary {
    /* Keep CTA visually grounded even when sheet is compressed */
    margin-top: 4px;
  }
}

/* ── Separator hidden when input has error (shake animation) ── */
/*
 * During the shake animation the separator would visually jitter.
 * Hide it while is-error is active — it reappears when error clears.
 * Uses :has() (CSS L4, supported Chrome 105+, Safari 15.4+, FF 121+).
 * Graceful degradation: separator stays visible on unsupported browsers (no harm).
 */
.fxrf4-phone-wrap:has(.fxrf4-phone-input.is-error)::before {
  opacity: 0;
  transition: opacity 0.20s ease;
}

/* ══════════════════════════════════════════════════════════════
   PHONE PREFIX OVERLAP ROOT FIX — fxrf4-v5t
   Structural grid layout replaces position:absolute + padding-left hack.
   Root cause: 10px clearance (100px padding − 90px prefix) is insufficient
   at 1.30rem text on narrow viewports — cursor touches prefix visually.
   Fix: CSS grid column boundary makes overlap structurally impossible.
   ═══════════════════════════════════════════════════════════ */

/* ── Grid container ─────────────────────────────────────────── */
/*
 * Three columns:
 *   auto  → prefix div (measured from its natural content + padding)
 *   1fr   → phone input (fills all remaining space)
 *   auto  → valid-icon (measured from its content + padding)
 *
 * align-items:stretch so the input sets row height and prefix/icon fill it.
 * position:relative kept — needed by any future absolute children.
 */
.fxrf4-phone-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
}

/* ── Prefix — static grid item, no longer absolute ──────────── */
/*
 * Left padding: 18px (matches original border-to-content gap).
 * Right padding: 14px (gap between "+212" and the editable number).
 * The grid column boundary is the hard wall — text cannot cross it.
 * min-width removed: grid auto sizing measures real rendered content.
 * display:flex kept so internal gap/align still apply if needed.
 */
.fxrf4-phone-prefix {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  min-width: 0;
  padding: 0 14px 0 18px;
  align-self: center;   /* vertically centre inside the row */
  z-index: auto;
}

/* ── Input — occupies 1fr, no padding-left hack ─────────────── */
/*
 * padding-left resets to a small natural value (0 — prefix provides gap).
 * padding-right: 0 — valid icon sits in its own column.
 * width: auto — grid controls sizing, not width:100%.
 * The !important overrides the base rule and the mobile 640px override.
 */
.fxrf4-phone-input {
  width: auto !important;
  padding: 20px 0 20px 0 !important;  /* vertical padding only */
  /* Remove any inherited box-sizing issues */
  box-sizing: border-box;
}

/* ── Valid-icon — static grid item, no longer absolute ──────── */
/*
 * Right padding: 18px (matches original right:18px).
 * Left padding: 8px (gap between text and checkmark).
 * align-self:center handles vertical position.
 * transform: none — was translateY(-50%) only needed for absolute positioning.
 */
.fxrf4-phone-valid-icon {
  position: static;
  right: auto;
  top: auto;
  transform: none;
  align-self: center;
  padding: 0 18px 0 8px;
}

/* ── Fix valid-icon animation — remove translateY from keyframe ── */
/*
 * The original fxrf4-valid-in used translateY(-50%) because the icon
 * was absolutely positioned and translateY(-50%) was its resting state.
 * Now it's a static grid item — translateY must be 0 at rest.
 */
@keyframes fxrf4-valid-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Mobile 640px override — reset conflicting padding ──────── */
/*
 * The base mobile rule at line ~1352 sets padding: 22px 52px 22px 100px.
 * That 100px padding-left is the old hack — override it to match grid layout.
 * Font-size override kept.
 */
@media (max-width: 640px) {
  .fxrf4-phone-input {
    padding: 22px 0 22px 0 !important;
    font-size: 1.36rem;
  }
}

/* ── Neutralize v5s separator (structurally obsolete) ───────── */
/*
 * The ::before separator was added in v5s to visually mark the boundary.
 * The grid makes that boundary structurally guaranteed — separator is
 * now redundant. Set display:none to remove it cleanly.
 */
.fxrf4-phone-wrap::before {
  display: none !important;
}

/* ── Error state — shake animation resets correctly ────────── */
/*
 * fxrf4-shake uses translateX only — compatible with grid layout.
 * The shake is applied to .fxrf4-phone-input, not .fxrf4-phone-wrap.
 * No change needed to shake animation.
 * is-error :has() rule that hid ::before is now harmless (::before hidden).
 */

/* ══════════════════════════════════════════════════════════════
   PHONE SCREEN MICRO POLISH — fxrf4-v5u
   Visual integration: prefix + input + icon read as ONE control.
   Zero grid changes. Zero DOM. Zero JS. Zero spacing logic changes.

   Strategy: move border/background/radius from input → wrap.
   The entire three-column grid becomes the visual container.
   ═══════════════════════════════════════════════════════════ */

/* ── Wrap becomes the visual container ──────────────────────── */
.fxrf4-phone-wrap {
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  /* Overflow hidden clips prefix/icon to the rounded corners */
  overflow: hidden;
  /* Inherit depth from v5s */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 2px 8px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.22s ease,
    background   0.22s ease,
    box-shadow   0.22s ease;
}

/* ── Input: transparent, borderless — wrap owns the border ──── */
.fxrf4-phone-input {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* Inherit transition for state changes via wrap */
  transition: none !important;
}

/* ── Optical balance — tighten prefix-to-digit gap slightly ─── */
/*
 * Was: padding 0 14px 0 18px → gap between +212 and first digit = 14px
 * Now: padding 0 12px 0 18px → 12px gap (slightly more unified feel)
 * Symmetry: 18px left-border-to-flag ≈ 16px right-border-to-checkmark
 */
.fxrf4-phone-prefix {
  padding: 0 12px 0 18px;
}

/* Valid-icon: balance with prefix left padding */
.fxrf4-phone-valid-icon {
  padding: 0 16px 0 10px;
}

/* ── State changes on wrap via :has() ───────────────────────── */
/* Focus */
.fxrf4-phone-wrap:has(.fxrf4-phone-input:focus) {
  border-color: rgba(72, 100, 255, 0.50);
  background: rgba(72, 100, 255, 0.04);
  box-shadow:
    inset 0 1px 0 rgba(72, 100, 255, 0.10),
    0 3px 12px rgba(72, 100, 255, 0.10),
    0 0 0 3px rgba(72, 100, 255, 0.06);
}

/* Valid */
.fxrf4-phone-wrap:has(.fxrf4-phone-input.is-valid) {
  border-color: rgba(32, 201, 151, 0.44);
  box-shadow:
    inset 0 1px 0 rgba(32, 201, 151, 0.08),
    0 0 0 3px rgba(32, 201, 151, 0.07);
}

/* Error */
.fxrf4-phone-wrap:has(.fxrf4-phone-input.is-error) {
  border-color: rgba(210, 60, 60, 0.55);
}

/* ══════════════════════════════════════════════════════════════
   PHONE SCREEN FINAL OPTICAL MICRO POLISH — fxrf4-v5v
   Three one-line calibrations. Zero architecture changes.
   Zero grid, DOM, JS, validation, layout, or dimension changes.
   ═══════════════════════════════════════════════════════════ */

.fxrf4-phone-prefix {
  /*
   * Task 1 — Prefix readability
   * Was: rgba(255,255,255,0.42) — too muted against dark bg on Retina
   * Now: rgba(255,255,255,0.58) — clearly legible, still secondary to number
   * Delta: +16 opacity points. Phone number (0.94) remains dominant.
   */
  color: rgba(255, 255, 255, 0.58);

  /*
   * Task 2 — Breathing room between +212 and first digit
   * Was: padding-right 12px — slight visual collision feel
   * Now: padding-right 15px — 3px wider; almost imperceptible, removes tension
   * Still a structural grid gap — overlap remains impossible.
   */
  padding: 0 15px 0 18px;

  /*
   * Task 3 — Flag → +212 internal rhythm
   * "🇲🇦 +212" is one text node; space char = ~4px at 0.92rem.
   * word-spacing: 3px adds 3px to that space → ~7px total.
   * Flag, prefix, and number now read with a smooth left-to-right rhythm.
   * No JS change. No DOM change.
   */
  word-spacing: 3px;
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS SCREEN FINAL PASS — fxrf4-v5w
   Goal: RAFI is already working for you.
   CSS-only. Zero DOM. Zero JS. Zero animation timing changes.
   Zero new elements. Zero color changes. Zero layout changes.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. SUCCESS SCREEN — top spacing ────────────────────────── */
/*
 * Was: padding 16px 8px 10px — too compressed after screen transition.
 * Now: 24px top — one beat of earned silence before the success moment.
 * Sides and bottom unchanged.
 */
#fxrf4-success {
  padding-top: 24px;
}

/* ── 2. CHECK RING — earned presence ───────────────────────── */
/*
 * Ring margin: 22px→28px — let the symbol breathe before the copy.
 * Ring bg + border: strengthened slightly so the ✓ reads as accomplished,
 * not whispered. bg 0.08→0.13, border 0.26→0.38.
 * Post-animation resting state: ambient glow via box-shadow — the ring
 * stays alive after the ripple fades (persistent, not pulsing).
 * Animation start scale 0.20→0.30 — arrives more decisively.
 */
.fxrf4-check-ring {
  margin-bottom: 28px;
}

.fxrf4-check-ring-inner {
  background: rgba(32, 201, 151, 0.13);
  border-color: rgba(32, 201, 151, 0.38);
  box-shadow:
    0 0 0 6px rgba(32, 201, 151, 0.05),
    0 4px 18px rgba(32, 201, 151, 0.10);
}

@keyframes fxrf4-ring-in {
  from { transform: scale(0.30); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Emergency ring — amber ambient glow */
.fxrf4-check-ring-inner.is-emergency {
  background: rgba(234, 137, 54, 0.12);
  border-color: rgba(234, 137, 54, 0.38);
  box-shadow:
    0 0 0 6px rgba(234, 137, 54, 0.05),
    0 4px 18px rgba(234, 137, 54, 0.10);
}

/* ── 3. RAFI TAG — authorship, not stamp ───────────────────── */
/*
 * Was: 0.56rem / opacity 0.60 — invisible on Retina dark bg.
 * Now: 0.64rem / opacity 0.82 — reads as "from RAFI" rather than a label.
 * Spacing: margin-bottom 8px → 6px (slightly tighter to title = one idea).
 */
.fxrf4-success-tag {
  font-size: 0.64rem;
  color: rgba(72, 100, 255, 0.82);
  margin-bottom: 6px;
}

/* ── 4. BODY TEXT — comfortable reading opacity ─────────────── */
/*
 * Was: opacity 0.48 — too faint on OLED in dark mode.
 * Now: 0.56 — clearly legible, stays well below title (0.96).
 */
.fxrf4-success-body {
  color: rgba(255, 255, 255, 0.56);
}

/* ── 5. STEP — DONE state (step 1) ─────────────────────────── */
/*
 * Was: bg 0.06, border 0.18 — nearly invisible circle.
 * It's the COMPLETED step — it should look finished, not absent.
 * bg 0.06→0.14, border 0.18→0.34 — reads as "already happened."
 */
.fxrf4-success-step-dot {
  background: rgba(32, 201, 151, 0.14);
  border-color: rgba(32, 201, 151, 0.34);
}

/* ── 6. STEP — ACTIVE state (step 2 — RAFI is working NOW) ─── */
/*
 * Size 34→38px — one clear size step above done/waiting.
 *   Size differential communicates "this is happening" at a glance.
 * bg 0.10→0.16, border 0.42→0.55 — unambiguously active.
 * Pulse: amplitude 5px→8px, period 2.6s→2.2s — slightly more alive.
 */
.fxrf4-success-step-dot.is-active {
  width: 38px;
  height: 38px;
  background: rgba(32, 201, 151, 0.16);
  border-color: rgba(32, 201, 151, 0.55);
  box-shadow: 0 0 0 4px rgba(32, 201, 151, 0.06);
}

@keyframes fxrf4-step-pulse {
  0%, 100% { box-shadow: 0 0 0 0px rgba(32, 201, 151, 0.06); }
  50%       { box-shadow: 0 0 0 8px rgba(32, 201, 151, 0.00); }
}

/* Emergency active step — amber */
.fxrf4-success-step-dot.is-active.is-emergency {
  background: rgba(234, 137, 54, 0.16);
  border-color: rgba(234, 137, 54, 0.55);
  box-shadow: 0 0 0 4px rgba(234, 137, 54, 0.06);
}

@keyframes fxrf4-step-pulse-emergency {
  0%, 100% { box-shadow: 0 0 0 0px rgba(234, 137, 54, 0.06); }
  50%       { box-shadow: 0 0 0 8px rgba(234, 137, 54, 0.00); }
}

/* ── 7. STEP SEPARATOR — visible connector ──────────────────── */
/*
 * Was: 24px wide, 1px high, opacity 0.12 — nearly invisible hairline.
 * Now: 28px wide, 1px high, opacity 0.22 — a real connector between steps.
 * margin-top: 17px kept — aligns with center of 34px dots.
 * For active dot (38px), the center is at 19px — the 2px difference is
 * imperceptible; consistent margin is better than fragile per-step logic.
 */
.fxrf4-success-step-sep {
  flex: 0 0 28px;
  background: rgba(32, 201, 151, 0.22);
}

/* ── 8. STEP LABEL — readable at small size ─────────────────── */
/*
 * Was: 0.59rem / opacity 0.32 — near-illegible on non-Retina.
 * Now: 0.64rem / opacity 0.40 — readable, stays clearly subordinate.
 */
.fxrf4-success-step-lbl {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.40);
}

/* ── 9. PRIMARY CTA — depth + press state ───────────────────── */
/*
 * No color change. Box-shadow depth makes it feel like a real button,
 * not a flat rectangle. Same treatment as fxrf4-btn-primary (v5s).
 * Active: translateY(1px) + shadow collapse — grounded press feel.
 */
.fxrf4-btn-success-primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 4px 14px rgba(72, 100, 255, 0.28),
    0 1px 3px  rgba(0, 0, 0, 0.18);
  will-change: transform;
  transition: background 0.15s, box-shadow 0.15s;
}

.fxrf4-btn-success-primary:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 6px  rgba(72, 100, 255, 0.18),
    0 1px 2px  rgba(0, 0, 0, 0.14);
}

/* ── 10. SECONDARY CTA — usable, not invisible ──────────────── */
/*
 * Was: 0.28 opacity — under accessible contrast threshold.
 * Now: 0.44 opacity — still clearly secondary, actually tappable.
 */
.fxrf4-btn-success-secondary {
  color: rgba(255, 255, 255, 0.44);
}

/* ══════════════════════════════════════════════════════════════
   SUCCESS SCREEN FINAL MICRO POLISH — fxrf4-v5x
   Typography breathing + timeline breathing.
   CSS-only in this block. Copy changes in JS.
   Zero layout, color, icon, animation, size, or structure changes.
   ═══════════════════════════════════════════════════════════ */

/* ── Task 1 — Typography breathing ─────────────────────────── */

/* RAFI badge → title: was 6px, needs a breath before the headline */
.fxrf4-success-tag {
  margin-bottom: 10px;
}

/* Title → body: was 12px — the headline needs more silence after it */
.fxrf4-success-title {
  margin-bottom: 16px;
  line-height: 1.32;   /* fractional tightening — title is short, needs no extra spread */
}

/* Body: line-height 1.58→1.68 — calmer, more readable on narrow screens */
/* margin-bottom 24px→28px — more air before the timeline */
/* white-space: pre-line — allows \n in textContent to render as a line break */
.fxrf4-success-body {
  line-height: 1.68;
  margin: 0 auto 28px;
  white-space: pre-line;
}

/* ── Task 3 — Timeline breathing ───────────────────────────── */

/* Step icon → label gap: 6px→8px — label doesn't crowd the dot */
.fxrf4-success-step {
  gap: 8px;
}

/* Label line-height: 1.3→1.42 — two-line labels read more calmly */
.fxrf4-success-step-lbl {
  line-height: 1.42;
}

/* Connector: 28px→32px — slightly more air between the three steps */
/* height stays 1px — a line, not a band */
.fxrf4-success-step-sep {
  flex: 0 0 32px;
  margin-top: 19px;   /* recentre for active dot 38px: 38/2=19px */
}

/* ══════════════════════════════════════════════════════════════
   EMERGENCY STEP 1 — CONVERSATION POLISH — fxrf4-v5y
   Goal: within 3 seconds, user feels conversation not form.
   CSS-only block (JS changes in same commit).
   ═══════════════════════════════════════════════════════════ */

/* ── 1. RAFI question — fractionally more presence ─────────── */
/*
 * 1.08rem → 1.14rem — question reads as a spoken sentence, not a label.
 * This is the only typographic change to the header.
 */
.fxrf4-rafi-text {
  font-size: 1.14rem;
}

/* ── 2. Helper sentence ─────────────────────────────────────── */
/*
 * Low visual priority — supports the question without competing.
 * Lives in #fxrf4-body above the list. Fades in gently.
 * "Je vais trouver les bons artisans en fonction de votre situation."
 */
.fxrf4-step1-sub {
  font-size: 0.76rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.36);
  line-height: 1.45;
  text-align: center;
  margin: 0 auto 16px;
  max-width: 280px;
  animation: fxrf4-fade-up 240ms ease 200ms both;
}

/* ── 3. "Autre urgence" — visual de-emphasis ────────────────── */
/*
 * The escape hatch must not compete with the six real emergencies.
 * Slightly muted: label opacity 0.84→0.50, border softer, bg lighter.
 * Icon opacity reduced. Still tappable, not invisible.
 */
.fxrf4-situation-item.is-autre .fxrf4-situation-label {
  color: rgba(255, 255, 255, 0.50);
  font-weight: 500;
}

.fxrf4-situation-item.is-autre .fxrf4-situation-icon {
  opacity: 0.52;
}

.fxrf4-situation-item.is-autre {
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}

/* ── 4. "Autre urgence" expanded state ──────────────────────── */
/*
 * When expanded: card takes on selection styling without amber
 * (amber is for confirmed choices — this is mid-conversation).
 * The expand wrap slides in from below.
 */
.fxrf4-situation-item.is-autre-expanded {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  flex-direction: column;
  align-items: flex-start;
  cursor: default;
}

.fxrf4-situation-item.is-autre-expanded .fxrf4-situation-icon,
.fxrf4-situation-item.is-autre-expanded .fxrf4-situation-label {
  /* Reset de-emphasis when expanded — the card is now active */
  opacity: 1;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 600;
}

/* The expand panel — hidden until .is-visible */
.fxrf4-autre-expand {
  display: none;
  width: 100%;
  flex-direction: column;
  gap: 10px;
  padding-top: 12px;
}

.fxrf4-autre-expand.is-visible {
  display: flex;
  animation: fxrf4-autre-expand-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxrf4-autre-expand-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Input inside the expand — reuses phone-input foundation */
.fxrf4-autre-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.90rem;
  font-weight: 400;
  line-height: 1;
  padding: 14px 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: border-color 0.20s ease, background 0.20s ease;
}

.fxrf4-autre-input::placeholder {
  color: rgba(255, 255, 255, 0.26);
  font-style: italic;
}

.fxrf4-autre-input:focus {
  border-color: rgba(234, 137, 54, 0.40);
  background: rgba(234, 137, 54, 0.04);
}

/* Confirm button — amber, full width inside the expand */
.fxrf4-autre-confirm {
  width: 100%;
  height: 46px;
  font-size: 0.90rem;
}

.fxrf4-autre-confirm:disabled {
  opacity: 0.32;
  cursor: default;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   "AUTRE URGENCE" CONVERSATION MICRO POLISH — fxrf4-v5z
   Five precise adjustments. Zero behaviour changes. Zero flow changes.
   Goal: the interaction disappears. Only the conversation remains.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Breathing — title → RAFI line → input ───────────────── */
/*
 * Was: padding-top 12px, gap 10px
 * Now: padding-top 20px, gap 8px
 * Title → expand panel: 20px of air (was 12px — felt attached)
 * Input → Continuer gap: 8px (was 10px — tighter action unit)
 */
.fxrf4-autre-expand {
  padding-top: 20px;
  gap: 8px;
}

/* ── 2. RAFI listening line ─────────────────────────────────── */
/*
 * Visual echo of the spoken question inside the card.
 * Not instructional UI — RAFI speaking, low visual priority.
 * Fades in slightly after the expand (delay 60ms to trail the panel).
 * Margin-bottom 10px creates clear air between RAFI's line and the input.
 */
.fxrf4-autre-rafi-line {
  font-size: 0.74rem;
  font-weight: 400;
  color: rgba(72, 100, 255, 0.70);
  line-height: 1.4;
  margin: 0 0 10px 0;
  animation: fxrf4-fade-up 200ms ease 60ms both;
}

/* ── 3. Input — clearly ready ────────────────────────────────── */
/*
 * border 0.12 → 0.20: visible but not aggressive
 * background 0.06 → 0.09: separates from the card surface
 * These are not color changes — same hue, higher clarity.
 */
.fxrf4-autre-input {
  border-color: rgba(255, 255, 255, 0.20);
  background: rgba(255, 255, 255, 0.09);
}

/* ── 4. Placeholder — readable, not dominant ────────────────── */
/*
 * Was: 0.26 — too faint to communicate 'you can type here'
 * Now: 0.38 — visible invitation without competing with typed text
 * Shorter placeholder text set in JS: "Ex. : Odeur de gaz, fuite d'eau…"
 */
.fxrf4-autre-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}