/* ═══════════════════════════════════════════════════════════════════
   NOVA — AI Home Design Consultant  |  renovation-chat.css  v13
   Phase 1+2: Full luxury redesign across all UI states
   Fixes: 3 critical class mismatches + all missing component CSS
═══════════════════════════════════════════════════════════════════ */

/* ─── BRAND TOKENS ──────────────────────────────────────────────── */
:root {
  --brand-gold:        #C9A84C;
  --brand-gold-2:      #E8C86A;
  --brand-gold-glow:   rgba(201,168,76,0.28);
  --brand-gold-soft:   rgba(201,168,76,0.08);
  --brand-gold-mid:    rgba(201,168,76,0.14);
  --brand-gold-border: rgba(201,168,76,0.22);

  --bg-primary:   #0a0a0a;
  --bg-secondary: #0f0f0f;
  --bg-card:      #141414;
  --bg-card-2:    #181818;
  --bg-field:     #1c1c1c;
  --bg-hover:     #1f1f1f;

  --text-primary:   #f0ede8;
  --text-secondary: #b8b0a4;
  --text-muted:     #6a6258;
  --text-faint:     #363028;

  --border-subtle: rgba(255,255,255,0.05);
  --border-mid:    rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.12);

  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui:      'Inter', -apple-system, system-ui, sans-serif;

  --radius:    4px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ─── PREMIUM CARD SYSTEM — shared by every selectable card
     (.ra-proj-item, .ra-style-btn, .ra-idea-card/.ra-discovery-card) ── */
  --card-transition:     200ms ease-out;
  --card-radius:         var(--radius-lg);
  --card-bg:             linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 55%), var(--bg-card);
  --card-bg-hover:       linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%), var(--bg-card-2);
  --card-border:         var(--border-subtle);
  --card-border-hover:   var(--brand-gold-border);
  --card-shadow-rest:    0 1px 2px rgba(0,0,0,0.35);
  --card-shadow-hover:   0 8px 20px -4px rgba(0,0,0,0.45);
  --card-shadow-selected: 0 0 0 1px var(--brand-gold), 0 8px 22px -4px var(--brand-gold-glow), inset 0 1px 0 rgba(255,255,255,0.10);

  /* ─── PREMIUM BUTTON SYSTEM — shared by every primary gold CTA
     (.ra-btn-primary, .ra-cta-btn and its .ra-proj-cta variant) ──── */
  --btn-transition:      200ms ease-out;
  --btn-gradient:        linear-gradient(160deg, var(--brand-gold-2), var(--brand-gold) 55%, #b6923d);
  --btn-gradient-hover:  linear-gradient(160deg, #fff3c4, var(--brand-gold-2) 55%, var(--brand-gold));
  --btn-shadow-rest:     0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.22);
  --btn-shadow-hover:    0 6px 20px var(--brand-gold-glow), inset 0 1px 0 rgba(255,255,255,0.28);
  --btn-shadow-active:   0 2px 8px var(--brand-gold-glow), inset 0 1px 2px rgba(0,0,0,0.18);
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
a { color: var(--brand-gold); text-decoration: none; }

/* ─── WORDPRESS / ELEMENTOR BUTTON ISOLATION ───────────────────────
   Hello Elementor + Elementor global "Buttons" kit styles target bare
   <button> elements sitewide (padding, border-radius, box-shadow,
   text-transform, sometimes !important). Every NOVA button lives under
   #renovation-app, so scoping resets there (ID selector) reliably beats
   those theme/kit rules without needing to touch Elementor settings. */
#renovation-app button {
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
  border-radius: var(--radius);
  line-height: 1.4;
  white-space: normal;
}
#renovation-app .ra-btn,
#renovation-app .ra-cta-btn,
#renovation-app .ra-room-confirm-btn,
#renovation-app .ra-room-btn,
#renovation-app .ra-btn-send {
  font-family: var(--font-ui) !important;
  border-style: solid;
  border-width: 0;
}
/* ─── PREMIUM BUTTON SYSTEM — every primary gold CTA shares this same
   gradient/depth/press language (Analyze My Space, Let's Design It,
   Create My Design, Apply Changes, Design These Projects, etc.). Kept
   in this ID-scoped block (not a separate rule elsewhere) so it wins
   against the WordPress/Elementor button reset above without needing
   a second round of !important on a duplicate selector. */
#renovation-app .ra-btn-primary,
#renovation-app .ra-cta-btn {
  background: var(--btn-gradient) !important;
  color: #0a0a0a !important;
  box-shadow: var(--btn-shadow-rest);
  transition: background var(--btn-transition), box-shadow var(--btn-transition),
              transform var(--btn-transition);
}
#renovation-app .ra-btn-primary:hover:not(:disabled),
#renovation-app .ra-cta-btn:hover:not(:disabled) {
  background: var(--btn-gradient-hover) !important;
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-1px);
}
#renovation-app .ra-btn-primary:active:not(:disabled),
#renovation-app .ra-cta-btn:active:not(:disabled) {
  background: var(--btn-gradient) !important;
  box-shadow: var(--btn-shadow-active);
  transform: scale(0.98);
}
#renovation-app .ra-btn-primary:disabled,
#renovation-app .ra-cta-btn:disabled {
  background: var(--bg-field) !important;
  color: var(--text-muted) !important;
  box-shadow: none;
}
#renovation-app .ra-btn-ghost {
  background: transparent !important;
  border-width: 1px !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

/* ─── UTILITY ───────────────────────────────────────────────────── */
.ra-hidden { display: none !important; }

/* ─── SCROLLBARS ────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #2a2520 transparent; }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2520; border-radius: 3px; }

/* ─── ANIMATIONS ────────────────────────────────────────────────── */
@keyframes ra-spin {
  to { transform: rotate(360deg); }
}
@keyframes ra-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 var(--brand-gold-glow); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}
@keyframes ra-shimmer-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ra-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Single-shot selection feedback — plays once whenever an element starts
   matching .selected (that's how non-`infinite` CSS animations work; no
   JS trigger needed), then settles into the steady .selected box-shadow/
   scale so there's no visual jump when it finishes. A quick scale
   overshoot doubles as the "tiny haptic-like feedback". */
@keyframes ra-card-select-pulse {
  0%   { transform: scale(1);     box-shadow: 0 0 0 0 var(--brand-gold-glow), var(--card-shadow-selected); }
  40%  { transform: scale(1.025); }
  65%  { box-shadow: 0 0 0 10px rgba(201,168,76,0), var(--card-shadow-selected); }
  100% { transform: scale(1.008); box-shadow: var(--card-shadow-selected); }
}
/* Slow, subtle "breathing" glow on the slider handle — every few
   seconds, not a fast flash. Layers a soft expanding ring on top of the
   handle's existing static shadow (unchanged), which is why every
   keyframe restates those same base layers alongside the animated one. */
@keyframes ra-handle-breathe {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.20),
      0 0 0 0 var(--brand-gold-glow);
  }
  50% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30),
      inset 0 1px 0 rgba(255, 255, 255, 0.65), inset 0 -1px 0 rgba(0, 0, 0, 0.20),
      0 0 0 7px var(--brand-gold-glow);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════════════════════════ */
#renovation-app {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
}
.ra-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100dvh;
  background: var(--bg-primary);
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HEADER (hidden ≥900px)
═══════════════════════════════════════════════════════════════════ */
.ra-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.ra-logo {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-gold-border);
  overflow: hidden;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #12100c;
}
.ra-logo-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-logo-fallback {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--brand-gold);
}
.ra-header-text h1 {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; color: var(--text-primary); line-height: 1.2;
}
.ra-header-text p { font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; }
.ra-progress-chip {
  margin-left: auto;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--brand-gold);
  background: var(--brand-gold-soft);
  border: 1px solid var(--brand-gold-border);
  padding: 3px 10px; border-radius: 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   TWO-COLUMN LAYOUT
═══════════════════════════════════════════════════════════════════ */
.ra-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 420px minmax(0,1fr);
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT PANEL
═══════════════════════════════════════════════════════════════════ */
.ra-left-col {
  background: var(--bg-primary);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* ─── NOVA HEADER ───────────────────────────────────────────────── */
.ra-nova-header {
  display: flex; flex-direction: column; align-items: center;
  padding: 36px 28px 24px;
  flex-shrink: 0;
}
/* Avatar wrap — 136px circle on desktop, clips fallback */
.ra-nova-avatar-wrap {
  width: 136px; height: 136px;
  border-radius: 50%;
  border: 2px solid var(--brand-gold-border);
  box-shadow: 0 0 0 6px var(--brand-gold-soft), 0 0 36px var(--brand-gold-glow);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  flex-shrink: 0;
  background: #12100c;
}
.ra-nova-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Fallback: JS inserts <div class="ra-nova-avatar-fallback">N</div> inside wrap */
.ra-nova-avatar-wrap .ra-nova-avatar-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 54px; font-weight: 700;
  color: var(--brand-gold);
  background: #12100c;
  margin: 0;
  animation: ra-pulse-gold 3s ease-in-out infinite;
}
.ra-nova-identity { text-align: center; margin-bottom: 20px; }
.ra-nova-name {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--text-primary); line-height: 1.1; margin-bottom: 5px;
}
.ra-nova-role {
  font-size: 9px; font-weight: 600; letter-spacing: 0.18em;
  color: var(--brand-gold); text-transform: uppercase;
}
.ra-nova-speech {
  width: 100%;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 16px 20px;
  position: relative; min-height: 56px;
}
.ra-nova-speech::before {
  content: '';
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 5px solid var(--bg-card);
}
.ra-nova-speech-text {
  font-size: 14px; color: var(--text-secondary);
  text-align: center; line-height: 1.65; min-height: 16px;
}
/* Contextual speech copy via :has() */
.ra-body:has(#ra-screen-upload.ra-active)   .ra-nova-speech-text::after { content: "Upload a photo of your space and I'll design a custom renovation — just for you."; }
.ra-body:has(#ra-screen-projects.ra-active) .ra-nova-speech-text::after { content: "I see strong potential here. Choose what you'd like to transform."; }
.ra-body:has(#ra-screen-style.ra-active)    .ra-nova-speech-text::after { content: "Let's refine your vision. Which design elements matter most to you?"; }
.ra-body:has(#ra-screen-chat.ra-active)     .ra-nova-speech-text::after { content: "Generating your custom renovation concept. This usually takes about 30 seconds."; }
.ra-body:has(#ra-screen-gate.ra-active)     .ra-nova-speech-text::after { content: "Your design is ready. Leave your details to unlock the full renovation preview."; }
.ra-body:has(#ra-screen-success.ra-active)  .ra-nova-speech-text::after { content: "Congratulations! Your renovation design has been delivered. A consultant will follow up shortly."; }

/* ─── STEP SCROLL ───────────────────────────────────────────────── */
.ra-step-scroll {
  flex: 1; overflow-y: auto;
  padding: 0 22px 40px;
}

/* ─── SCREEN MANAGEMENT ─────────────────────────────────────────── */
.ra-screen { display: none; }
.ra-screen.ra-active { display: block; animation: ra-fade-in 220ms ease-out; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 1 — UPLOAD
═══════════════════════════════════════════════════════════════════ */
.ra-welcome-bubble {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 12px 14px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 14px;
}
.ra-upload-zone {
  border: 1.5px dashed var(--brand-gold-border);
  border-radius: var(--radius-lg); padding: 26px 18px;
  text-align: center; background: var(--brand-gold-soft);
  transition: border-color 0.2s, background 0.2s; cursor: pointer; margin-top: 6px;
}
.ra-upload-zone:hover,
.ra-upload-zone.drag-over {
  border-color: var(--brand-gold); background: var(--brand-gold-mid);
}
.ra-upload-zone-icon {
  color: var(--brand-gold); margin-bottom: 10px; display: flex; justify-content: center;
}
.ra-upload-zone-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}
.ra-upload-zone-sub {
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.05em; margin-bottom: 16px;
}
.ra-upload-zone-btns { display: flex; gap: 8px; justify-content: center; }

/* Image Tray */
.ra-image-tray { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ra-tray-thumb {
  width: 54px; height: 54px; border-radius: var(--radius); object-fit: cover;
  border: 1.5px solid var(--border-subtle); cursor: pointer; transition: border-color 0.18s;
}
.ra-tray-thumb.ra-tray-active { border-color: var(--brand-gold); box-shadow: 0 0 0 2px var(--brand-gold-soft); }

/* renderImageTray() actually builds <div class="ra-thumb"><img><button
   class="ra-thumb-remove">×</button></div> + a <div class="ra-thumb-add">
   slot — none of which had any matching rule above (.ra-tray-thumb is a
   different, unused shape: a bare <img>, not this wrapper structure).
   Real photos were rendering at full, unconstrained natural size with a
   plain unstyled button below them instead of a small cropped thumbnail
   with a corner remove badge. */
.ra-thumb, .ra-thumb-add {
  position: relative; width: 64px; height: 64px; flex-shrink: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-card); border: 1.5px solid var(--border-subtle);
}
.ra-thumb.ra-thumb-primary { border-color: var(--brand-gold-border); }
.ra-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-thumb-remove {
  position: absolute; top: 3px; right: 3px; z-index: 1;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,10,0.72); color: var(--text-primary);
  font-size: 13px; line-height: 1; backdrop-filter: blur(2px);
}
.ra-thumb-add {
  border-style: dashed; display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-muted); cursor: pointer; transition: all 0.18s;
}
.ra-thumb-add:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* Accuracy Indicator */
.ra-accuracy {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  padding: 9px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.ra-accuracy-dots { display: flex; gap: 4px; }
.ra-accuracy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg-field); transition: background 0.2s;
}
.ra-accuracy-dot.active,
.ra-accuracy-dot[class*=" lit-"] { background: var(--brand-gold); }
.ra-accuracy-label { font-size: 10px; font-weight: 700; color: var(--brand-gold); }
.ra-accuracy-sub { font-size: 9px; color: var(--text-muted); margin-left: auto; }

/* Photo Guidance */
.ra-photo-guidance {
  margin-top: 10px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius);
}
.ra-photo-guidance-title { font-size: 10px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; }
.ra-guidance-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ra-guidance-chip {
  font-size: 10px; padding: 3px 8px; border-radius: 20px;
  background: var(--bg-field); border: 1px solid var(--border-subtle); color: var(--text-secondary);
}

/* Address Section */
.ra-address-section { margin-top: 14px; }
.ra-address-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 7px;
}
.ra-address-label svg { color: var(--brand-gold); flex-shrink: 0; }
.ra-address-row { display: flex; gap: 6px; }
.ra-address-input {
  flex: 1; background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 9px 12px; font-size: 13px; color: var(--text-primary);
  outline: none; transition: border-color 0.18s; min-height: 44px;
}
.ra-address-input:focus { border-color: var(--brand-gold-border); }
.ra-address-input::placeholder { color: var(--text-muted); }
.ra-skip-btn {
  padding: 9px 12px; font-size: 11px; color: var(--text-muted);
  background: var(--bg-field); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  transition: color 0.18s; white-space: nowrap; min-height: 44px;
}
.ra-skip-btn:hover { color: var(--text-secondary); }

/* Property Card — mobile */
.ra-property-card {
  margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ra-property-map { height: 72px; background: var(--bg-field); overflow: hidden; }
.ra-property-map img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7); }
.ra-property-info { padding: 9px 12px; }
.ra-property-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--brand-gold); margin-bottom: 3px;
}
.ra-property-address-line { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ra-property-city-line { font-size: 10px; color: var(--text-muted); }

/* Analyze Spinner — premium */
.ra-analyze-status {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px; color: var(--text-muted); font-size: 11px;
}
.ra-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--border-mid);
  border-top-color: var(--brand-gold);
  border-radius: 50%;
  animation: ra-spin 0.75s linear infinite;
}

/* Error / Message */
.ra-error-text { font-size: 11px; color: #d96060; margin-top: 8px; min-height: 16px; line-height: 1.4; }
.ra-msg { font-size: 11px; color: var(--text-muted); display: block; margin-top: 4px; }
.ra-msg.ok { color: #5cbe7a; }
.ra-msg.err { color: #d96060; }

/* Analyze / CTA Buttons */
.ra-btn {
  padding: 10px 18px; border-radius: var(--radius); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; transition: all 0.18s; display: inline-flex; align-items: center;
  gap: 6px; min-height: 44px;
}
/* Color/background/shadow/press states for .ra-btn-primary/.ra-cta-btn
   live in the #renovation-app-scoped Premium Button System block near
   the top of this file — only cursor/transform fallbacks for the
   disabled state (not covered there) remain here. */
.ra-btn-primary:disabled { cursor: default; }
.ra-btn-ghost { border: 1px solid var(--border-strong); color: var(--text-secondary); background: transparent; }
.ra-btn-ghost:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); background: var(--brand-gold-soft); }
.ra-btn-full { width: 100%; justify-content: center; }

/* Main Gold CTA button */
.ra-cta-btn {
  display: block; width: 100%; padding: 17px 20px; margin-top: 20px;
  border-radius: var(--radius);
  font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-align: center;
  text-transform: uppercase;
}
.ra-cta-btn:disabled { cursor: default; transform: none; }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 1b — ROOM CONFIRM + PROJECT SELECTION
═══════════════════════════════════════════════════════════════════ */
.ra-room-confirm {
  margin-bottom: 14px; padding: 16px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); text-align: center;
}
.ra-room-confirm-icon { color: var(--brand-gold); margin-bottom: 10px; display: flex; justify-content: center; }
.ra-room-confirm-question { font-size: 13px; color: var(--text-secondary); margin-bottom: 14px; }
.ra-room-confirm-question strong { color: var(--text-primary); }
.ra-room-confirm-btns { display: flex; gap: 8px; justify-content: center; }
.ra-room-confirm-btn {
  padding: 9px 16px; border-radius: var(--radius); font-size: 12px;
  font-weight: 600; transition: all 0.18s; min-height: 44px;
}
.ra-room-confirm-yes { background: var(--brand-gold); color: #0a0a0a; }
.ra-room-confirm-yes:hover { background: var(--brand-gold-2); }
.ra-room-confirm-no { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.ra-room-confirm-no:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* Room Picker */
.ra-room-picker { margin-bottom: 14px; }
.ra-room-picker-title { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 10px; text-align: center; }
.ra-room-picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
/* .ra-room-type-btn/-icon/-label are what showRoomPicker() actually
   creates; .ra-room-btn/-emoji are kept alongside (harmless, unused) in
   case anything else still references them. */
.ra-room-btn,
.ra-room-type-btn {
  padding: 10px 8px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 11px; font-weight: 500; color: var(--text-secondary);
  text-align: center; transition: all 0.18s; display: flex; flex-direction: column;
  align-items: center; gap: 5px; min-height: 60px; justify-content: center;
  width: 100%;
}
.ra-room-btn:hover,
.ra-room-type-btn:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }
.ra-room-btn.selected,
.ra-room-btn.ra-selected,
.ra-room-type-btn.selected,
.ra-room-type-btn.ra-selected {
  border-color: var(--brand-gold); background: var(--brand-gold-soft); color: var(--brand-gold);
}
.ra-room-btn-emoji,
.ra-room-type-icon { font-size: 18px; }
.ra-room-type-label { font-size: 11px; line-height: 1.3; }

/* ─── PROJECT SELECTION ─────────────────────────────────────────────
   Compact, conversion-focused layout: header → dominant gold AI CTA →
   divider → smaller, visually-secondary manual project cards. Every
   selector here is specific to this screen only (verified not reused
   elsewhere), except .ra-cta-btn, which is shared with the lead-gate
   reveal button — that one gets a scoped .ra-proj-cta modifier instead
   of being edited directly, so the lead-gate screen is unaffected. ── */
.ra-proj-wrap { padding-top: 2px; }
.ra-proj-header { margin-bottom: 10px; }
.ra-proj-detected-label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brand-gold); margin-bottom: 5px;
}
.ra-proj-main-title {
  display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--text-primary); line-height: 1.2;
}
.ra-proj-context { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.ra-proj-divider { height: 1px; background: var(--border-subtle); margin: 12px 0 10px; }

/* Primary AI action — dominant gold CTA, sits directly under the
   header, above the manual cards. Boosted beyond the shared .ra-cta-btn
   base (bigger, resting glow) so it reads as THE action on this screen;
   scoped to .ra-proj-cta so the lead-gate's #ra-reveal-cta (same base
   .ra-cta-btn class) is untouched. */
.ra-proj-cta {
  margin-top: 0;
  padding: 15px 20px;
  font-size: 13.5px;
}
/* #renovation-app-prefixed to outrank the shared Premium Button System's
   own box-shadow (also #renovation-app-scoped) — .ra-proj-cta keeps its
   own stronger resting/hover glow so it still reads as THE dominant CTA
   on the project-selection screen. */
#renovation-app .ra-proj-cta {
  box-shadow: 0 4px 18px var(--brand-gold-glow);
}
#renovation-app .ra-proj-cta:hover:not(:disabled) {
  box-shadow: 0 6px 26px var(--brand-gold-glow);
}
#renovation-app .ra-proj-cta:active:not(:disabled) {
  box-shadow: 0 2px 10px var(--brand-gold-glow);
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM CARD SYSTEM — one shared visual language for every
   selectable card: renovation cards (.ra-proj-item), style cards
   (.ra-style-btn), design idea cards (.ra-idea-card), and revision
   cards (.ra-discovery-card, which is always rendered with the
   .ra-idea-card class alongside it, so it inherits this for free).
   Each component still owns its own layout (padding, flex direction,
   gap, sizing) — only surface (background/border/shadow) and
   interaction (hover/selected) are unified here, via the --card-*
   tokens defined in :root. CSS-only transitions, 200ms ease-out,
   transform-only motion (translateY + scale) so it stays cheap on
   mobile — no JS animation anywhere in this system.

   #renovation-app prefix: .ra-style-btn/.ra-idea-card are <button>
   elements, and #renovation-app button (the WordPress/Elementor
   isolation reset near the top of this file) sets its own
   border-radius/box-shadow at ID-selector specificity — a plain class
   selector here can't win against that regardless of source order, so
   every selector below is prefixed to match/exceed it. */
#renovation-app .ra-proj-item,
#renovation-app .ra-style-btn,
#renovation-app .ra-idea-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-rest);
  cursor: pointer;
  transition: border-color var(--card-transition), background var(--card-transition),
              box-shadow var(--card-transition), transform var(--card-transition);
}
#renovation-app .ra-proj-item:hover,
#renovation-app .ra-style-btn:hover,
#renovation-app .ra-idea-card:hover {
  background: var(--card-bg-hover);
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px) scale(1.01);
}
#renovation-app .ra-proj-item.selected,
#renovation-app .ra-style-btn.selected,
#renovation-app .ra-idea-card.selected {
  border-color: var(--brand-gold) !important;
  box-shadow: var(--card-shadow-selected);
  transform: scale(1.008);
  animation: ra-card-select-pulse 550ms ease-out;
}
/* Selected + hover together: keep the gold identity, just lift a touch
   further rather than re-tinting the surface — avoids two competing
   "hover" and "selected" treatments fighting each other. */
#renovation-app .ra-proj-item.selected:hover,
#renovation-app .ra-style-btn.selected:hover,
#renovation-app .ra-idea-card.selected:hover {
  transform: translateY(-1px) scale(1.015);
}

/* Manual project cards — visually secondary: smaller, tighter, quieter.
   Selection/hover states unchanged, only sizing. */
.ra-proj-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 2px; }

.ra-proj-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 5px; padding: 12px 10px 10px;
  min-height: 92px;
  position: relative; overflow: hidden;
}
.ra-proj-item::before { display: none; }

/* *** CRITICAL FIX: JS uses .selected, not .ra-selected *** */
.ra-proj-item.selected { background: var(--brand-gold-soft); }

/* SVG icon area — emoji replaced by inline script */
.ra-proj-emoji {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-gold); line-height: 1;
}
.ra-proj-emoji svg { width: 24px; height: 24px; }
.ra-proj-text { width: 100%; }
.ra-proj-name {
  font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
  text-align: center; line-height: 1.3;
}
.ra-proj-item.selected .ra-proj-name { color: var(--text-primary); }
.ra-proj-desc { display: none; }

/* Check indicator — top-right corner */
.ra-proj-check {
  position: absolute; top: 6px; right: 6px;
  width: 14px; height: 14px; border: 1.5px solid var(--border-strong);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: transparent; transition: all 0.18s;
}
.ra-proj-item.selected .ra-proj-check {
  background: var(--brand-gold); border-color: var(--brand-gold); color: #0a0a0a;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 1c — STYLE PICKER + IDEAS
   *** CRITICAL: JS creates .ra-idea-card / .ra-idea-title, NOT .ra-idea-item / .ra-idea-label ***
═══════════════════════════════════════════════════════════════════ */
.ra-picker-wrap { padding-top: 4px; }
.ra-picker-question {
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px; line-height: 1.25;
}
.ra-ideas-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }
.ra-ideas-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

/* ─── STYLE PICKER (built by JS inside ra-ideas-grid before ideas) ─ */
.ra-style-grid {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
}
.ra-style-btn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-align: left; min-height: 56px;
}
/* *** JS uses .selected on style buttons *** */
.ra-style-btn.selected { background: var(--brand-gold-soft); }
.ra-style-emoji {
  font-size: 22px; flex-shrink: 0; width: 32px; text-align: center;
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(0.95);
  color: var(--brand-gold);
}
.ra-style-emoji svg { width: 28px; height: 28px; }
.ra-style-body {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
/* *** JS creates .ra-style-name, not .ra-style-label — kept in sync *** */
.ra-style-name {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.2;
}
.ra-style-btn.selected .ra-style-name { color: var(--text-primary); }
.ra-style-desc {
  display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ─── IDEA CARDS (built by JS as <button class="ra-idea-card">) ───
   Standalone cards (own border/radius/gap via the shared premium card
   system below), not the previous connected/merged-border list — needed
   so the shared hover/selected elevation and scale read correctly on
   each card independently. */
.ra-idea-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; text-align: left; width: 100%;
}
/* *** JS uses .selected on idea cards *** */
.ra-idea-card.selected { background: var(--brand-gold-soft) !important; }
.ra-idea-emoji {
  width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center; font-size: 16px; color: var(--brand-gold);
  filter: grayscale(1) sepia(1) saturate(3) hue-rotate(5deg) brightness(0.95);
}
.ra-idea-emoji svg { width: 26px; height: 26px; }
.ra-idea-card.selected .ra-idea-emoji { filter: none; }
.ra-idea-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* *** CRITICAL: JS creates .ra-idea-title, NOT .ra-idea-label *** */
.ra-idea-title {
  display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary);
  line-height: 1.3; margin-bottom: 2px; overflow-wrap: anywhere;
}
.ra-idea-card.selected .ra-idea-title { color: var(--text-primary); }
/* *** CRITICAL: JS creates .ra-idea-desc *** */
.ra-idea-desc { display: block; font-size: 10px; color: var(--text-muted); line-height: 1.4; overflow-wrap: anywhere; }
/* "Choose type →" link shown when sub-options exist */
.ra-idea-choose {
  font-size: 10px; font-weight: 600; color: var(--brand-gold); letter-spacing: 0.04em;
  margin-top: 4px; display: block;
}
/* Tag chips on idea cards */
.ra-idea-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.ra-idea-tag {
  font-size: 9px; padding: 2px 7px; border-radius: 20px;
  background: var(--bg-field); border: 1px solid var(--border-subtle); color: var(--text-muted);
}
.ra-idea-card.selected .ra-idea-tag { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* ─── SUB-PICKER (shown when idea has sub-options) ──────────────── */
.ra-sub-picker {
  background: var(--bg-card-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 14px; margin-top: 2px;
}
.ra-sub-picker-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
/* .ra-sub-header/-back/-title are what showSubPicker() actually creates */
.ra-sub-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ra-sub-back {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
  padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  min-height: 32px; flex-shrink: 0; transition: all 0.18s;
}
.ra-sub-back:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }
.ra-sub-title {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-primary);
  overflow-wrap: anywhere;
}
.ra-sub-grid { display: flex; flex-direction: column; gap: 6px; }
.ra-sub-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  cursor: pointer; transition: all 0.18s; font-size: 12px; color: var(--text-secondary);
  text-align: left; min-height: 44px;
}
.ra-sub-option:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }
.ra-sub-option.selected { border-color: var(--brand-gold); background: var(--brand-gold-soft); color: var(--text-primary); }

/* Ideas footer */
.ra-ideas-footer { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.ra-ideas-notes-input {
  width: 100%; background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 10px 12px; font-size: 12px; color: var(--text-primary);
  outline: none; resize: none; transition: border-color 0.18s; min-height: 44px;
}
.ra-ideas-notes-input:focus { border-color: var(--brand-gold-border); }
.ra-ideas-notes-input::placeholder { color: var(--text-muted); }
.ra-picker-loading {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px; color: var(--text-muted); font-size: 11px;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 2 — CHAT + GENERATION
═══════════════════════════════════════════════════════════════════ */
.ra-chat-images { display: flex; gap: 8px; padding-bottom: 12px; overflow-x: auto; }
.ra-chat-image {
  width: 54px; height: 54px; border-radius: var(--radius); object-fit: cover;
  flex-shrink: 0; border: 1.5px solid var(--border-subtle);
}

/* Collapsed "View Original Photo" toggle — only relevant once a result
   exists; before that, .ra-chat-images behaves exactly as it always has. */
.ra-view-original-toggle {
  display: none; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  padding: 8px 2px; min-height: 32px;
}
.ra-view-original-toggle:hover { color: var(--brand-gold); }
.ra-view-original-toggle::before {
  content: "▸"; font-size: 9px; transition: transform 0.18s;
}
.ra-view-original-toggle.ra-view-original-expanded::before { transform: rotate(90deg); }
.ra-chat { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ra-chat-bubble {
  max-width: 90%; padding: 10px 14px; border-radius: var(--radius-lg);
  font-size: 12px; line-height: 1.55; animation: ra-fade-in 200ms ease-out;
}
.ra-chat-bubble.ra-nova,
.ra-chat-bubble.ai {
  align-self: flex-start; background: var(--bg-card);
  border: 1px solid var(--border-subtle); color: var(--text-secondary);
}
.ra-chat-bubble.ra-user,
.ra-chat-bubble.user {
  align-self: flex-end; background: var(--brand-gold-soft);
  border: 1px solid var(--brand-gold-border); color: var(--text-primary);
}
.ra-quick-replies { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ra-qr-btn,
.ra-quick-reply {
  padding: 6px 12px; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 20px; font-size: 11px; color: var(--text-secondary);
  transition: all 0.18s; cursor: pointer; min-height: 36px;
}
.ra-qr-btn:hover,
.ra-quick-reply:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* ═══════════════════════════════════════════════════════════════════
   AI SCAN LOADING ANIMATION — replaces the old 5-row checklist.
   Architecture: one lean DOM tree (~17 nodes total), every animated
   layer uses ONLY `transform`/`opacity` (compositor-only properties —
   no layout or paint work per frame), so this stays smooth at 60fps
   even on mid-range mobile GPUs. `filter: blur()` is used exactly twice
   (the two glow blobs, .ra-scan-glow::before/::after) and is applied
   once by the compositor, not recomputed per animation frame, since
   only opacity/transform change on the blurred elements themselves.
   No JS drives any of this — every layer loops on its own CSS
   @keyframes, so there is nothing to garbage-collect or leak across a
   long-running generation call, and .ra-generating.ra-hidden simply
   stops rendering it (paused, not torn down) between generations.
   prefers-reduced-motion is already handled globally (see the
   `@media (prefers-reduced-motion: reduce)` rule near the top of this
   file, which drops every animation-duration to ~0), so no separate
   accessibility rule is needed here.
═══════════════════════════════════════════════════════════════════ */
.ra-generating {
  position: relative;
  width: 100%;
  height: 320px;
  max-height: 46vh;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #000;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.ra-generating.ra-generating-hide { opacity: 0; }

.ra-scan { position: absolute; inset: 0; overflow: hidden; }

/* ─── Bloom / soft glow — two large blurred radial blobs, breathing
   slowly at different rates for a subtle sense of parallax depth. ── */
.ra-scan-glow { position: absolute; inset: 0; }
.ra-scan-glow::before,
.ra-scan-glow::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 70%; padding-bottom: 70%; border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(40px);
  will-change: transform, opacity;
}
.ra-scan-glow::before {
  background: radial-gradient(circle, var(--brand-gold-glow), transparent 70%);
  animation: ra-scan-breathe 6s ease-in-out infinite;
}
.ra-scan-glow::after {
  width: 46%; padding-bottom: 46%;
  background: radial-gradient(circle, rgba(232,200,106,0.16), transparent 70%);
  animation: ra-scan-breathe 4.5s ease-in-out infinite reverse;
}

/* ─── Thin vertical glowing lines, each its own speed (nth-child
   duration/delay), reading as a slow scanning field rather than a
   spinner. ── */
.ra-scan-lines { position: absolute; inset: 0; }
.ra-scan-lines span {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--brand-gold) 45%, var(--brand-gold-2) 50%, var(--brand-gold) 55%, transparent);
  opacity: 0; transform: scaleY(0.4);
  will-change: transform, opacity;
  animation: ra-scan-line 3.2s ease-in-out infinite;
}
.ra-scan-lines span:nth-child(1) { left: 8%;  animation-duration: 2.6s; animation-delay: 0s; }
.ra-scan-lines span:nth-child(2) { left: 22%; animation-duration: 3.4s; animation-delay: 0.3s; }
.ra-scan-lines span:nth-child(3) { left: 37%; animation-duration: 2.9s; animation-delay: 0.9s; }
.ra-scan-lines span:nth-child(4) { left: 50%; animation-duration: 4s;   animation-delay: 0.2s; }
.ra-scan-lines span:nth-child(5) { left: 64%; animation-duration: 3.1s; animation-delay: 1.1s; }
.ra-scan-lines span:nth-child(6) { left: 79%; animation-duration: 3.7s; animation-delay: 0.6s; }
.ra-scan-lines span:nth-child(7) { left: 92%; animation-duration: 2.8s; animation-delay: 1.4s; }

/* ─── Subtle gold particles drifting slowly upward. ── */
.ra-scan-particles { position: absolute; inset: 0; }
.ra-scan-particles span {
  position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--brand-gold-2); box-shadow: 0 0 6px 1px var(--brand-gold-glow);
  opacity: 0; will-change: transform, opacity;
  animation: ra-scan-particle 5.5s ease-in infinite;
}
.ra-scan-particles span:nth-child(1) { left: 12%; animation-duration: 5.2s; animation-delay: 0s;   }
.ra-scan-particles span:nth-child(2) { left: 28%; animation-duration: 6.4s; animation-delay: 1.1s; }
.ra-scan-particles span:nth-child(3) { left: 45%; animation-duration: 5.8s; animation-delay: 2.3s; }
.ra-scan-particles span:nth-child(4) { left: 61%; animation-duration: 6.9s; animation-delay: 0.6s; }
.ra-scan-particles span:nth-child(5) { left: 76%; animation-duration: 5.4s; animation-delay: 1.8s; }
.ra-scan-particles span:nth-child(6) { left: 89%; animation-duration: 6.1s; animation-delay: 3s;   }

/* ─── Moving energy wave near the bottom. ── */
.ra-scan-wave {
  position: absolute; left: -20%; right: -20%; bottom: 14%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-gold-2) 45%, #fff 50%, var(--brand-gold-2) 55%, transparent);
  opacity: 0.85; filter: blur(0.5px);
  will-change: transform;
  animation: ra-scan-wave 3.6s ease-in-out infinite;
}

/* ─── Centered NOVA wordmark + caption. No progress %, no steps. ── */
.ra-scan-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; pointer-events: none;
}
.ra-scan-brand {
  font-family: var(--font-display); font-size: 22px; font-weight: 600;
  letter-spacing: 0.34em; color: var(--brand-gold); text-transform: uppercase;
  text-shadow: 0 0 18px var(--brand-gold-glow);
}
.ra-scan-caption {
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em;
  color: var(--text-secondary);
}

@keyframes ra-scan-breathe {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes ra-scan-line {
  0%   { opacity: 0;   transform: scaleY(0.35); }
  50%  { opacity: 0.9; transform: scaleY(1); }
  100% { opacity: 0;   transform: scaleY(0.35); }
}
@keyframes ra-scan-particle {
  0%   { opacity: 0;    transform: translateY(0) translateX(0); }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.5; }
  100% { opacity: 0;    transform: translateY(-280px) translateX(14px); }
}
@keyframes ra-scan-wave {
  0%, 100% { transform: translateX(-6%); opacity: 0.5; }
  50%      { transform: translateX(6%);  opacity: 0.95; }
}

/* ─── DESIGN BRIEF CARD (built by JS as .ra-brief-card) ─────────── */
.ra-brief-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 12px; animation: ra-fade-in 220ms ease-out;
}
.ra-brief-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.ra-brief-header:hover { color: var(--text-secondary); }
.ra-brief-toggle { color: var(--brand-gold); font-size: 10px; transition: transform 0.2s; }
.ra-brief-card.collapsed .ra-brief-toggle { transform: rotate(-90deg); }
/* .ra-brief-body/.ra-brief-label are what showDesignBriefCard() actually
   creates; .ra-brief-content/.ra-brief-row-label/-val are kept alongside
   (harmless, unused) in case anything else still references them. */
.ra-brief-content,
.ra-brief-body { overflow: hidden; }
.ra-brief-card.collapsed .ra-brief-content,
.ra-brief-card.collapsed .ra-brief-body { display: none; }
.ra-brief-row {
  display: flex; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--border-subtle); font-size: 11px;
}
.ra-brief-row:last-child { border-bottom: none; }
.ra-brief-row-label,
.ra-brief-label { color: var(--text-muted); min-width: 80px; flex-shrink: 0; font-weight: 500; }
.ra-brief-row-val,
.ra-brief-row > span:last-child { color: var(--text-secondary); flex: 1; line-height: 1.4; }
/* Brief actions (Generate button, Edit button) */
.ra-brief-actions { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border-subtle); }
.ra-gen-btn {
  flex: 1; padding: 10px; background: var(--brand-gold); color: #0a0a0a;
  border-radius: var(--radius); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; transition: all 0.18s; min-height: 44px;
}
.ra-gen-btn:hover { background: var(--brand-gold-2); box-shadow: 0 4px 14px var(--brand-gold-glow); }
.ra-edit-btn {
  padding: 10px 16px; border: 1px solid var(--border-strong); color: var(--text-muted);
  border-radius: var(--radius); font-size: 11px; font-weight: 600; transition: all 0.18s; min-height: 44px;
}
.ra-edit-btn:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* Revision chip */
.ra-revision-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 4px 10px; margin-bottom: 8px;
}
.ra-revision-chip.warn { color: #d0844a; border-color: rgba(208,132,74,0.3); background: rgba(208,132,74,0.07); }

/* Chat composer */
.ra-composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 6px 6px 6px 12px; transition: border-color 0.18s;
}
.ra-composer:focus-within { border-color: var(--brand-gold-border); }
#ra-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 13px; color: var(--text-primary); resize: none;
  max-height: 80px; line-height: 1.5; padding: 4px 0;
}
#ra-input::placeholder { color: var(--text-muted); }
.ra-btn-send {
  width: 32px; height: 32px; background: var(--brand-gold); border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: #0a0a0a; flex-shrink: 0; transition: background 0.18s;
}
.ra-btn-send:hover { background: var(--brand-gold-2); }

/* ─── DISCOVERY CARDS (built by JS as .ra-discovery-panel) ──────── */
.ra-discovery-panel {
  padding: 16px 0; animation: ra-fade-in 250ms ease-out;
}
.ra-discovery-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--text-primary); margin-bottom: 4px;
}
.ra-discovery-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 14px; }
.ra-discovery-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
/* Discovery (revision) cards are rendered with both .ra-idea-card and
   .ra-discovery-card classes — surface/hover/selected styling comes
   entirely from the shared premium card system on .ra-idea-card above;
   nothing discovery-specific needed here anymore. */
.ra-discovery-skip {
  width: 100%; padding: 11px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 11px; font-weight: 600;
  color: var(--text-muted); text-align: center; transition: all 0.18s; min-height: 44px;
}
.ra-discovery-skip:hover { border-color: var(--brand-gold-border); color: var(--brand-gold); }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 3 — LEAD GATE
═══════════════════════════════════════════════════════════════════ */
.ra-gate-hero {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 18px;
}
.ra-gate-hero-img { width: 100%; display: block; filter: blur(7px) brightness(0.45); }
.ra-gate-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; padding: 20px;
  background: linear-gradient(to bottom, transparent 25%, rgba(0,0,0,0.82));
}
.ra-watermark-grid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 12px; overflow: hidden; opacity: 0.3; pointer-events: none;
}
.ra-watermark-row {
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: rgba(255,255,255,0.25); white-space: nowrap; text-transform: uppercase;
}
.ra-gate-lock-badge {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: rgba(10,10,10,0.88); border: 1px solid var(--brand-gold-border);
  border-radius: 20px; padding: 8px 16px; font-size: 11px; font-weight: 600;
  color: var(--text-secondary);
}
.ra-gate-lock-badge svg { color: var(--brand-gold); }

/* Lead form container */
.ra-lead-section { padding-top: 2px; }
.ra-lead-headline { margin-bottom: 12px; }
.ra-lead-headline h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--text-primary); margin-bottom: 5px; line-height: 1.2;
}
.ra-lead-headline p { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.ra-trust-tagline { font-size: 9px; color: var(--brand-gold); letter-spacing: 0.06em; margin-bottom: 14px; }

/* Form fields */
.ra-form { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.ra-field { display: flex; flex-direction: column; gap: 4px; }
.ra-field label {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
}
.ra-field input {
  background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px;
  color: var(--text-primary); outline: none; transition: border-color 0.18s;
  width: 100%; min-height: 44px;
}
.ra-field input:focus { border-color: var(--brand-gold-border); }
.ra-field input::placeholder { color: var(--text-muted); }
.ra-field input[readonly] { color: var(--text-muted); cursor: default; }

/* OTP */
.ra-otp-row { display: flex; gap: 6px; }
.ra-otp-input {
  flex: 1; height: 48px; text-align: center !important; font-size: 20px !important;
  font-weight: 700; padding: 0 !important; letter-spacing: 0;
  border: 1.5px solid var(--border-subtle) !important;
}
.ra-otp-input:focus { border-color: var(--brand-gold) !important; }
.ra-resend {
  font-size: 10px; color: var(--text-muted); margin-top: 6px;
  text-decoration: underline; cursor: pointer; text-underline-offset: 2px;
  background: none; border: none; padding: 0;
}
.ra-resend:disabled { opacity: 0.35; cursor: default; }

/* Reveal CTA */
#ra-reveal-cta {
  background: var(--brand-gold); color: #0a0a0a;
  width: 100%; padding: 14px; border-radius: var(--radius);
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  transition: all 0.18s; margin-top: 4px; display: block; text-align: center; min-height: 48px;
}
#ra-reveal-cta:hover { background: var(--brand-gold-2); box-shadow: 0 6px 24px var(--brand-gold-glow); }

/* ═══════════════════════════════════════════════════════════════════
   SCREEN 5 — SUCCESS
═══════════════════════════════════════════════════════════════════ */
.ra-success {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 18px 0; gap: 14px;
}
.ra-check-circle {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--brand-gold-soft); border: 1.5px solid var(--brand-gold-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--brand-gold);
}
.ra-success-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary);
}
.ra-success-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.ra-sms-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 20px; font-size: 11px; color: var(--text-secondary);
}
.ra-report-card {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ra-report-head {
  padding: 10px 14px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle);
}
.ra-report-rows { padding: 4px 0; }
.ra-report-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 14px; font-size: 11px; border-bottom: 1px solid var(--border-subtle);
}
.ra-report-row:last-child { border-bottom: none; }
/* .ra-report-label/-value are what the success-screen report rows
   actually create; .ra-report-row-label/-val kept alongside (harmless,
   unused) in case anything else still references them. */
.ra-report-row-label,
.ra-report-label { color: var(--text-muted); flex-shrink: 0; }
.ra-report-row-val,
.ra-report-value { color: var(--text-secondary); font-weight: 500; text-align: right; }

/* ═══════════════════════════════════════════════════════════════════
   RIGHT WORKSPACE — MAIN PANEL
═══════════════════════════════════════════════════════════════════ */
.ra-right-col {
  background:
    radial-gradient(circle at 70% 0%, rgba(201,168,76,0.07), transparent 40%),
    var(--bg-secondary);
  display: flex; flex-direction: column; gap: 20px;
  overflow-y: auto; overflow-x: hidden;
  padding: 32px 48px 64px;
  position: relative;
}

/* ─── WORKSPACE PROPERTY CARD (compact) ────────────────────────── */
.ra-workspace-property {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); overflow: hidden; flex-shrink: 0;
  animation: ra-fade-in 250ms ease-out;
}
.ra-ws-prop-header {
  padding: 8px 14px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
}
.ra-ws-map-wrap {
  height: 100px; position: relative; overflow: hidden;
  /* Luxury placeholder grid shown before map image loads */
  background:
    repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(201,168,76,0.025) 14px, rgba(201,168,76,0.025) 15px),
    repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(201,168,76,0.025) 14px, rgba(201,168,76,0.025) 15px),
    #0c0c0c;
}
#ra-ws-map-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(0.55) saturate(0.45);
  display: block;
}
.ra-ws-map-badge {
  position: absolute; bottom: 9px; left: 12px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(10,10,10,0.82); border: 1px solid var(--brand-gold-border);
  border-radius: 20px; padding: 4px 10px; font-size: 9px; font-weight: 700;
  color: var(--brand-gold); letter-spacing: 0.06em; text-transform: uppercase;
}
.ra-ws-prop-meta { padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.ra-ws-prop-addr { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.ra-ws-prop-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ra-ws-tag {
  padding: 2px 8px; background: var(--bg-field); border: 1px solid var(--border-subtle);
  border-radius: 20px; font-size: 9px; color: var(--text-muted);
}

/* ─── EMPTY STATE ───────────────────────────────────────────────── */
.ra-workspace-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 320px; text-align: center;
  border: 1px dashed var(--border-subtle); border-radius: var(--radius-xl);
  padding: 48px 32px;
  transition: border-color 0.3s, background 0.3s;
}
.ra-workspace-empty-icon { color: var(--text-faint); margin-bottom: 20px; }
.ra-workspace-empty-title {
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 8px; line-height: 1.3;
}
.ra-workspace-empty-sub { font-size: 11px; color: var(--text-faint); }

/* Empty state contextual upgrades via :has() */

/* Analysis running */
.ra-body:has(#ra-analyze-status:not(.ra-hidden)) .ra-workspace-empty {
  border-color: var(--brand-gold-border);
  background: var(--brand-gold-soft);
}
.ra-body:has(#ra-analyze-status:not(.ra-hidden)) .ra-workspace-empty-icon { color: var(--brand-gold); }
.ra-body:has(#ra-analyze-status:not(.ra-hidden)) .ra-workspace-empty-title { color: var(--text-secondary); }

/* Generation running — overlay on workspace */
.ra-body:has(#ra-generating:not(.ra-hidden)) .ra-workspace-grid {
  position: relative;
}
.ra-body:has(#ra-generating:not(.ra-hidden)) .ra-workspace-grid::before {
  content: 'NOVA IS GENERATING YOUR RENOVATION';
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  z-index: 6; font-size: 9px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--brand-gold); background: rgba(10,10,10,0.88);
  border: 1px solid var(--brand-gold-border); border-radius: 20px;
  padding: 5px 16px; white-space: nowrap;
}
.ra-body:has(#ra-generating:not(.ra-hidden)) .ra-workspace-grid::after {
  content: '';
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(105deg, transparent 30%, rgba(201,168,76,0.07) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: ra-shimmer-sweep 2.2s linear infinite;
  border-radius: inherit; pointer-events: none;
}

/* ─── WORKSPACE GRID ────────────────────────────────────────────── */
.ra-workspace-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  border-radius: var(--radius-xl); overflow: hidden;
}
.ra-workspace-item {
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4/3; position: relative;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
}
.ra-workspace-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ra-workspace-item:first-child { grid-column: 1 / -1; aspect-ratio: 16/9; }
.ra-workspace-count {
  font-size: 9px; color: var(--text-muted); text-align: right;
  letter-spacing: 0.08em; margin-top: -10px; padding-right: 2px;
}

/* ─── RENOVATION PREVIEW (Before/After) ────────────────────────── */
.ra-before-after { display: flex; flex-direction: column; flex-shrink: 0; }

/* "RENOVATION PREVIEW" header with gold rules */
.ra-preview-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
}
.ra-preview-rule {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--brand-gold-border));
}
.ra-preview-header .ra-preview-rule:last-child {
  background: linear-gradient(to left, transparent, var(--brand-gold-border));
}
.ra-preview-title {
  font-size: 9px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brand-gold); white-space: nowrap; flex-shrink: 0;
}

/* Slider container */
.ra-ba-slider-wrap {
  position: relative; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden; cursor: ew-resize; user-select: none; touch-action: pan-y;
  background: var(--bg-card); line-height: 0;
}
.ra-ba-slider-before { display: block; width: 100%; height: auto; }
/* JS applies clip-path directly on this element — do NOT add clip-path in CSS */
.ra-ba-slider-after-overlay.ra-ba-after-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* ─── PEEL OVERLAY — separate component, driven by --peel-x ───────── */
/* Not attached to .ra-ba-handle; positioned independently so it reads */
/* as a physical lifted sheet rather than seam styling.                */
.ra-peel-overlay {
  position: absolute;
  top: 0; left: var(--peel-x, 50%);
  transform: translateX(-100%);
  width: 220px; height: 320px;
  pointer-events: none;
  z-index: 9;
}
.ra-peel-svg { width: 100%; height: 100%; overflow: visible; }
.ra-peel-shadow {
  fill: rgba(0, 0, 0, 0.50);
  opacity: 0.8;
}
.ra-peel-underside {
  opacity: 0.96;
}
.ra-peel-edge {
  stroke: #f0d27a;
  stroke-width: 1.5;
  opacity: 0.9;
}

/* ─── LUXURY SLIDER HANDLE ───────────────────────────────────────── */
.ra-ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 10; cursor: ew-resize; width: 4px; pointer-events: none;
  overflow: visible;
}

/* Seam — subtle luminous gold/white glow line */
.ra-ba-handle-line {
  flex: 1; width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(232, 200, 106, 0.65) 15%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(232, 200, 106, 0.65) 85%,
    transparent 100%
  );
  box-shadow:
    0 0 3px  rgba(255, 255, 255, 0.60),
    0 0 8px  rgba(201, 168,  76, 0.45);
}

/* Clean gold pull tab */
.ra-ba-handle-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(160deg,
    #fffef2 0%,
    #f5e080 18%,
    #c9a84c 58%,
    #9a6e20 100%
  );
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: #1a0e00;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.45),
    0 2px 6px  rgba(0, 0, 0, 0.30),
    inset 0  1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 rgba(0,   0,   0,   0.20);
  flex-shrink: 0; user-select: none; pointer-events: all;
  position: relative; z-index: 12;
  transition: transform 200ms ease-out;
  animation: ra-handle-breathe 4s ease-in-out infinite;
}
/* Easier to grab: a firm press visibly compresses the handle slightly,
   same premium "pressed" language as the CTA buttons. Comparison/drag
   math (wireComparisonSlider) reads the wrap's own bounding box, not
   this element's size, so this is purely cosmetic. */
.ra-ba-handle-btn:active { transform: scale(0.94); }

/* Lock overlay */
.ra-ba-lock {
  position: absolute; inset: 0;
  background: rgba(10,10,10,0.70);
  backdrop-filter: blur(14px) saturate(0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; z-index: 20; border-radius: inherit;
}
.ra-ba-lock svg { color: var(--brand-gold); }
.ra-ba-lock-text {
  font-size: 12px; color: var(--text-secondary);
  text-align: center; max-width: 200px; line-height: 1.5;
}

/* Corner labels */
.ra-ba-sublabel {
  position: absolute; top: 13px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 20px; z-index: 5;
}
.ra-ba-sublabel-before {
  left: 13px; background: rgba(0,0,0,0.58); color: rgba(255,255,255,0.72);
}
.ra-ba-sublabel-after {
  right: 13px; background: rgba(201,168,76,0.92); color: #0a0a0a;
}

/* ─── INSIGHT STRIP (below renovation preview) ──────────────────── */
.ra-insight-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.ra-insight-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ra-insight-star { font-size: 13px; color: var(--brand-gold); flex-shrink: 0; }
.ra-insight-text { min-width: 0; }
.ra-insight-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px;
}
.ra-insight-desc {
  font-size: 11px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ra-insight-cta {
  flex-shrink: 0; padding: 9px 16px;
  background: var(--brand-gold); color: #0a0a0a; border-radius: var(--radius);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap; transition: all 0.18s; min-height: 40px;
}
.ra-insight-cta:hover { background: var(--brand-gold-2); box-shadow: 0 4px 14px var(--brand-gold-glow); }

/* ─── ROTATE HINT — portrait-only, dismissible, non-blocking ────────
   Base rule keeps it out of the desktop/landscape flow entirely; visible
   states are opt-in, added by the mobile-portrait media query further
   below. Sits in normal document flow (not position:absolute over the
   slider), so it can never intercept the drag/touch gesture. */
.ra-rotate-hint {
  display: none;
  align-items: center; gap: 10px;
  padding: 9px 12px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  font-size: 11px; color: var(--text-secondary);
}
.ra-rotate-hint-icon { font-size: 14px; color: var(--brand-gold); flex-shrink: 0; }
.ra-rotate-hint-text { flex: 1; min-width: 0; line-height: 1.4; }
.ra-rotate-hint-close {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 15px; line-height: 1;
}
.ra-rotate-hint-close:hover { color: var(--brand-gold); }
.ra-rotate-hint.ra-rotate-hint-dismissed { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   GATE MODE — JS adds .ra-gate-mode to .ra-body
═══════════════════════════════════════════════════════════════════ */
.ra-body.ra-gate-mode .ra-right-col {
  /* Right panel stays visible with lock overlay active on before/after */
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — show Nova header, hide mobile chrome
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .ra-header      { display: none; }
  .ra-nova-header { display: flex; }
  .ra-welcome-bubble { display: none; }
  .ra-gate-hero   { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE / TABLET — single column
   CSS handles 900px. JS checks 800px — both ranges covered below.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Scoped, !important-guarded reinforcement: some WordPress/Elementor
     global stylesheets load after this one and set body/html backgrounds
     (typically white), which would otherwise show through as a blank
     area below the app's natural (shrink-to-fit) mobile height. */
  html.renovation-advisor-page,
  body.renovation-advisor-page {
    background: var(--bg-primary) !important;
  }

  body { overflow: auto; }
  .ra-body {
    display: flex; flex-direction: column;
    overflow: visible; overflow-y: auto; height: auto;
  }
  .ra-shell { flex: none; height: auto; overflow: visible; }
  /* No forced min-height: 100dvh here — the app should size to its own
     content on mobile (single-column, scrollable), not stretch to fill
     the viewport and leave a trailing empty gap when content is short. */
  #renovation-app { height: auto; overflow: visible; }

  .ra-left-col { width: 100%; border-right: none; overflow: visible; }
  .ra-nova-header { display: none; }
  .ra-step-scroll { padding: 0 16px 32px; overflow: visible; }
  .ra-right-col { display: none; }
  .ra-upload-zone { padding: 22px 16px; }

  /* Result step: the real Original ↔ Generated slider (built by
     renderRevisionComparisons(), same touch-draggable markup used on
     desktop) lives in .ra-right-col, which is hidden above for every
     other mobile step. Reveal it here instead of relying on the
     static blurred teaser image (.ra-gate-hero) so mobile gets the same
     working comparison slider as desktop. order:-1 keeps it visually
     above the lead-capture form, matching where the old static teaser
     used to sit.

     Scoped to .ra-result-ready, NOT .ra-gate-mode — the result view
     (Phase 1) must not depend on gate/success/lead-form state.
     .ra-result-ready is added by showBeforeAfter() the moment a result
     exists (renovation-chat.js) and cleared by reset(), independently of
     showScreen()/.ra-gate-mode, which stays reserved for gate/success. */
  .ra-body.ra-result-ready .ra-right-col {
    display: flex;
    order: -1;
    padding: 0 16px 12px;
    gap: 14px;
  }
  .ra-body.ra-result-ready .ra-gate-hero { display: none; }
  .ra-body.ra-result-ready .ra-workspace-property { display: none; }

  /* ── Result screen (Sprint 2): collapse the original-photo strip ─────
     behind a lightweight toggle once a result exists, so it no longer
     competes with the slider for the user's first glance. Collapsed by
     default; #ra-view-original-toggle (JS, cacheDom "viewOriginalToggle")
     flips .ra-view-original-expanded on #ra-chat-images to bring it back.
     updateChatImages() itself is untouched — same images, same markup,
     only visibility changes here. */
  .ra-body.ra-result-ready #ra-chat-images:not(.ra-view-original-expanded) {
    display: none;
  }
  .ra-body.ra-result-ready #ra-view-original-toggle {
    display: inline-flex;
  }

  /* ── Result screen (Sprint 1, Task 2): Before/After is the hero ──────
     Tighten the chrome around the slider and force it to dominate the
     viewport instead of sizing purely from the uploaded photo's natural
     aspect ratio. #ra-revision-comparisons/.ra-rev-compare are built by
     renderRevisionComparisons() (unchanged) — this only affects layout
     of the container they render into. */
  .ra-body.ra-result-ready #ra-before-after { gap: 10px; }
  .ra-body.ra-result-ready .ra-preview-header { margin-bottom: 6px; }
  .ra-body.ra-result-ready .ra-revision-comparisons {
    order: 1;
    margin-top: 0;
    gap: 14px;
  }
  /* Buttons/CTAs stay below the comparison — .ra-insight-strip is static
     markup that sits earlier in #ra-before-after's DOM than the
     JS-appended #ra-revision-comparisons, so DOM order alone would put
     the button above the real slider; flex `order` fixes this without
     touching JS. */
  .ra-body.ra-result-ready .ra-insight-strip { order: 3; }
  .ra-body.ra-result-ready .ra-rev-slider-wrap {
    height: 58dvh;
    max-height: 520px;
  }
  .ra-body.ra-result-ready .ra-rev-slider-wrap .ra-ba-slider-before,
  .ra-body.ra-result-ready .ra-rev-slider-wrap .ra-ba-slider-after-overlay {
    height: 100%;
    object-fit: cover;
  }

  /* Portrait-only rotate hint's own display:none/flex toggle lives in the
     base rule + the dedicated orientation query below (so it's correct
     at every width, not just this one) — this just sets its position in
     the flex order once it is visible. */
  .ra-body.ra-result-ready .ra-rotate-hint { order: 2; }

  /* Touch targets — explicit 44px floor on every tappable card/button,
     not just the ones that happen to clear it via their own padding
     today, so future copy/content changes can't silently shrink one
     below a comfortable tap size. */
  .ra-btn, .ra-cta-btn, .ra-room-btn, .ra-proj-item,
  .ra-idea-card, .ra-style-btn, .ra-room-type-btn, .ra-discovery-skip {
    min-height: 44px;
  }
  .ra-proj-list { grid-template-columns: 1fr 1fr; }
  .ra-proj-item { min-height: 120px; }

  /* Main CTA buttons — slightly larger radius than the 4px app default
     reads more "app-like"/tappable at phone width; cards already use
     8–12px, this just brings primary buttons in line with them.
     Scoped to mobile only; desktop keeps the existing sharper 4px.
     #renovation-app prefix matches the specificity of the button-reset
     rule near the top of this file (#renovation-app button), which would
     otherwise win over a plain .ra-btn selector regardless of source
     order. */
  #renovation-app .ra-btn, #renovation-app .ra-cta-btn { border-radius: var(--radius-lg); }

  /* Cards don't clip */
  .ra-proj-name { font-size: 11px; white-space: normal; }
  .ra-ideas-grid { overflow: visible; }
  .ra-idea-card { padding: 11px 12px; }

  /* Mobile Flow Compression: once a style is chosen, collapse the grid
     down to just the selected card instead of leaving every unselected
     option expanded above the ideas section below it. Tapping the
     visible (selected) card again removes .ra-style-collapsed (see
     click handler in showIdeasScreen()) to bring the rest back — nothing
     is deleted, just hidden. Desktop is untouched (outside this query). */
  .ra-style-grid.ra-style-collapsed .ra-style-btn:not(.selected) { display: none; }

  /* Mobile Flow Compression: once at least one idea is selected, collapse
     the grid to just the selected card(s) so the Generate button
     ("Let's Design It →") is reachable without scrolling past every
     unselected idea. #ra-ideas-edit-toggle (reuses the existing
     .ra-view-original-toggle look) only appears once collapsed — pure
     CSS sibling selector, no extra JS needed to show/hide it — and
     re-expands everything on tap (see cacheDom in showIdeasScreen()).
     Selecting/deselecting while expanded re-applies this same collapsed
     state via updateIdeasCollapseState(). */
  .ra-ideas-grid.ra-ideas-collapsed .ra-idea-card:not(.selected) { display: none; }
  .ra-ideas-grid.ra-ideas-collapsed ~ #ra-ideas-edit-toggle { display: inline-flex; }

  /* Mobile Flow Compression: post-result revision area sits directly
     below the slider — tighten it so the (single allowed) revision
     option is close and quick to act on, not a long scroll away.
     .ra-discovery-panel's padding is shared by the final "design ready"
     messages too, so shrinking it is safe/beneficial everywhere on
     mobile. .ra-discovery-sub-cards is scoped only to the "Choose one
     element..." subtitle (see showDiscoveryCards() in
     renovation-chat.js) — the *other* .ra-discovery-sub usages (the
     final-message subtitles, which are the only content on that
     screen) are untouched. .ra-discovery-card padding/gap are tightened
     without touching the shared .ra-idea-card system used by the
     earlier "What would you like to change?" screen. Revision selection
     logic itself is not touched anywhere here — visibility/spacing only. */
  .ra-discovery-panel { padding: 10px 0; }
  .ra-discovery-title { margin-bottom: 2px; }
  .ra-discovery-sub-cards { display: none; }
  .ra-discovery-grid { gap: 5px; margin-bottom: 10px; }
  .ra-discovery-card { padding: 9px 12px; }

  /* Peel overlay hidden on mobile — simple slider only */
  .ra-peel-overlay { display: none; }

  /* Slider handle on mobile — same premium gold ring as desktop (not a
     plain white circle), sized up slightly for an easier touch grab. */
  .ra-ba-handle { width: 40px; }
  .ra-ba-handle-line { background: rgba(255,255,255,0.9); box-shadow: 0 0 8px rgba(0,0,0,0.6); }
  .ra-ba-handle-btn { width: 40px; height: 40px; }

  /* Avatar smaller on mobile header */
  .ra-nova-avatar-wrap { width: 84px; height: 84px; }
  .ra-nova-avatar-wrap .ra-nova-avatar-fallback { font-size: 34px; }
}

/* Rotate hint only ever becomes visible here: mobile width AND portrait
   orientation AND a result exists (.ra-result-ready) AND not dismissed.
   Any one of those failing (desktop width, landscape, no result yet,
   dismissed) keeps it hidden via the base .ra-rotate-hint{display:none}
   rule above. */
@media (max-width: 899px) and (orientation: portrait) {
  .ra-body.ra-result-ready .ra-rotate-hint:not(.ra-rotate-hint-dismissed) {
    display: flex;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LANDSCAPE — real side-by-side result layout
   Scoped to .ra-body.ra-result-ready (a result must already exist) +
   max-width:899px (mobile/tablet, not desktop) + orientation:landscape,
   so it can only ever apply on top of the general mobile block above —
   never in portrait, never on desktop (≥900px never matches this query
   regardless of orientation), and never on any pre-result screen
   (upload/style/projects), which keep the existing single-column flow.

   No DOM was moved for this. .ra-right-col (the slider, order:-1 from
   the general mobile block above) and .ra-left-col (original-photo
   toggle + #ra-chat-images, then #ra-chat's revision/discovery cards —
   already in that exact order in the markup) are simply laid out as a
   row instead of a column: .ra-right-col becomes the wide/main side,
   .ra-left-col the narrow side, matching what the portrait rules
   already stack vertically in the same order.

   The height chain is bounded back to 100dvh/overflow:hidden (the same
   pattern the desktop grid layout already uses one file section up),
   so the two columns sit side-by-side within the short landscape
   viewport with their own internal scroll, instead of the portrait
   approach of one continuously-growing page. */
@media (max-width: 899px) and (orientation: landscape) {
  /* Re-bound the height chain the general mobile block above relaxed to
     height:auto (so portrait's single page can grow naturally) back to
     the same 100dvh/flex:1/min-height:0 pattern the desktop grid layout
     uses — :has() scopes this to only the ancestors of an active
     landscape result, leaving every other mobile screen (upload/style/
     projects, and portrait results) on the unbounded height:auto flow
     exactly as before. */
  #renovation-app:has(.ra-body.ra-result-ready) { height: 100dvh; overflow: hidden; }
  .ra-shell:has(.ra-body.ra-result-ready) { height: 100dvh; overflow: hidden; }

  .ra-body.ra-result-ready {
    flex: 1;
    min-height: 0;
    flex-direction: row;
    overflow: hidden;
  }

  /* Main/wide column — the slider. flex-basis only; order:-1 already
     comes from the general mobile block, so this still renders first
     (left) without repeating that rule here. */
  .ra-body.ra-result-ready .ra-right-col {
    flex: 1.6;
    min-width: 0;
    overflow-y: auto;
    padding: 10px 12px;
  }
  /* Narrow side column — original photo toggle, then revision cards,
     already in that DOM order inside #ra-screen-chat. */
  .ra-body.ra-result-ready .ra-left-col {
    flex: 1;
    max-width: 280px;
    overflow-y: auto;
  }
  .ra-body.ra-result-ready .ra-step-scroll {
    padding: 0 12px 16px;
  }

  /* The slider was sized for a tall/narrow portrait column (58dvh); in
     the short landscape viewport it should fill its own (now bounded)
     column height instead. */
  .ra-body.ra-result-ready .ra-rev-slider-wrap {
    height: 100%;
    max-height: none;
  }
  .ra-body.ra-result-ready .ra-revision-comparisons {
    height: 100%;
  }
  .ra-body.ra-result-ready .ra-rev-compare {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Rotate hint is portrait-only by design (see the query above) — stays
     hidden here via its own base rule, nothing to override. */
}

/* Narrow mobile */
@media (max-width: 480px) {
  .ra-step-scroll { padding: 0 12px 28px; }
  .ra-proj-list { grid-template-columns: 1fr 1fr; gap: 7px; }
  .ra-proj-item { padding: 16px 8px 12px; min-height: 110px; }
  .ra-proj-emoji { width: 40px; height: 40px; }
  .ra-proj-emoji svg { width: 36px; height: 36px; }
  .ra-style-btn { padding: 10px 12px; }
  .ra-otp-row { gap: 4px; }
  .ra-otp-input { height: 44px; font-size: 18px !important; }
}

/* Handle JS 800px breakpoint range — ensure no horizontal overflow */
@media (min-width: 800px) and (max-width: 899px) {
  .ra-body { flex-direction: column; }
  .ra-right-col { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   PEEL REVEAL — dormant (Phase 2)
   Ported from the standalone prototype. Every selector below is scoped
   under .ra-peel-reveal, a class that is not present anywhere in the
   current DOM (test.html was not touched in this phase) and is not
   applied by any JS while USE_PEEL_REVEAL is false. These rules cannot
   match anything right now, so they have zero effect on the current
   before/after slider. Phase 3 will add .ra-peel-reveal to the markup
   and wire it up via createPeelReveal() only once the flag is on.
═══════════════════════════════════════════════════════════════════ */
.ra-peel-reveal .peel-layer {
  position: absolute;
  inset: 0;
}

.ra-peel-reveal .peel-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Front sheet — the "before" photo. Clipped dynamically by JS to a smooth
   curved edge. Stacked drop-shadows follow the clip shape itself (unlike
   box-shadow, which only follows the rectangular border-box): a soft
   bright rim reads as a thin paper edge catching light, and two soft
   shadows give the sheet gentle cast-shadow depth without a hard
   embossed/metallic edge line. */
.ra-peel-reveal .peel-before {
  z-index: 3;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  will-change: clip-path;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 253, 244, 0.75))
    drop-shadow(0.4px 0.4px 0 rgba(120, 95, 55, 0.12))
    drop-shadow(0.8px 2px 5px rgba(40, 28, 16, 0.18))
    drop-shadow(1.5px 8px 16px rgba(24, 16, 10, 0.14));
}

.ra-peel-reveal .peel-before.is-dragging {
  transition: none;
}

/* Inner crease shadow — a thin band on the FRONT sheet's own surface,
   immediately behind the fold, darkening right where the paper starts to
   bend away from the page underneath it. */
.ra-peel-reveal .peel-crease {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    -45deg,
    rgba(35, 24, 12, 0.18) 0%,
    rgba(35, 24, 12, 0.1) 32%,
    rgba(35, 24, 12, 0.035) 62%,
    rgba(35, 24, 12, 0) 100%
  );
  will-change: clip-path;
}

/* Back of the sheet — the underside of the curling paper, visible in a
   band right along the fold. Warm-white / ivory paper-backing surface. */
.ra-peel-reveal .peel-back-flap {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 26% 16%, rgba(255, 253, 246, 0.7) 0%, rgba(255, 253, 246, 0) 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='2' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.35' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012%200.4' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #fffcf4 0%, #f7efdd 45%, #ede1c4 100%);
  background-blend-mode: normal, soft-light, soft-light, normal;
  background-size: auto, 240px 240px, 160px 160px, auto;
  filter:
    drop-shadow(0 0 0.5px rgba(255, 253, 246, 0.85))
    drop-shadow(0.4px 0.4px 0 rgba(150, 120, 70, 0.14))
    drop-shadow(0.8px 2.5px 6px rgba(92, 74, 44, 0.15))
    drop-shadow(1.5px 10px 20px rgba(40, 28, 14, 0.14));
  will-change: clip-path;
}

/* Pull-tab / direction indicator — a minimal architectural pull (dark
   hardware disc, brushed-gold ring, gold tail-and-rivet trailing
   down-left). Colors intentionally reuse the site's existing gold
   tokens so it matches the brand instead of the prototype's hardcoded
   hex once wired up in Phase 3. */
.ra-peel-reveal .peel-handle {
  position: absolute;
  z-index: 5;
  width: 44px;
  height: 44px;
  cursor: grab;
  filter: drop-shadow(1px 4px 7px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.25));
  transition: left 0.05s linear, top 0.05s linear, opacity 0.2s ease;
  animation: ra-peel-handle-pulse 2.2s ease-in-out infinite;
}

.ra-peel-reveal .peel-handle.is-dragging {
  transition: none;
  animation: none;
  cursor: grabbing;
}

.ra-peel-reveal .peel-handle svg {
  display: block;
}

@keyframes ra-peel-handle-pulse {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3px, 3px); }
}

/* ─── Phase 3: wiring overrides, still fully scoped under .ra-peel-reveal ───
   These only ever apply once initPeelReveal() adds that class to
   #ra-ba-slider-wrap (i.e. only when ENABLE_PEEL_REVEAL is true), so they
   have zero effect on the legacy slider. */

/* The old decorative peel graphic is redundant once the real interactive
   peel is mounted — it's driven by --peel-x, which peel mode never sets,
   so left alone it would just sit static at the center. */
.ra-peel-reveal .ra-peel-overlay {
  display: none;
}

/* #ra-ba-before-img is normally a static, in-flow element (it's what
   establishes the wrap's height) with #ra-ba-after-img absolutely
   positioned on top of it, clipped by the legacy slider. Peel mode
   reverses which layer is "on top": the before-image is what gets
   peeled away, so it needs to stack above the after-image instead.
   position: relative (not absolute) keeps it in-flow — the wrap's height
   still comes from it exactly as before — while allowing z-index to
   apply. */
.ra-peel-reveal #ra-ba-before-img.peel-before {
  position: relative;
  z-index: 3;
}

.ra-peel-reveal #ra-ba-after-img {
  z-index: 1;
}

/* #ra-ba-handle carries base styling built for the legacy slider's thin
   full-height invisible line + small round button (pointer-events: none
   on the line itself, bottom: 0, and a translateX(-50%) transform). The
   peel handle is a single 44×44 box that IS the full hit target, so
   those specific properties need to be neutralized — everything else
   (size, position, colors) already comes from .peel-handle above, which
   wins on specificity for the properties it does set. */
.ra-peel-reveal .peel-handle {
  pointer-events: auto;
  bottom: auto;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════════════
   REVISION COMPARISON CARDS — uniform stacked list, newest first.
   Every card is Original ↔ that specific revision, using the exact same
   legacy slider classes as the single-slot markup above (.ra-ba-slider-
   wrap / .ra-ba-handle / .ra-ba-sublabel / .ra-ba-lock), so it inherits
   that styling with no duplication and no peel/page-curl involved.
═══════════════════════════════════════════════════════════════════ */
.ra-revision-comparisons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
}

.ra-rev-compare {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.ra-rev-compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.ra-rev-compare-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.ra-rev-compare-view {
  font-size: 11px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ra-rev-compare-view:hover {
  color: var(--brand-gold);
}

/* The card itself already clips to rounded corners via overflow: hidden
   above, and the header sits flush above the slider — the slider-wrap's
   own (top-only) radius would just create an odd partial-rounding
   artifact here, so it's turned off and the card handles all rounding. */
.ra-rev-slider-wrap {
  border-radius: 0;
}