/* ============================================================
   Dream Journey — "Choose Your Own Dream" cinematic flow
   Stage 1 (email entry, inline card) lives in style.css under
   .landing-choose-own* (redesigned in-place, same section).
   This file covers Stage 2-5, the full-screen overlay: chat,
   loading, ready and error panels. Reuses the DreamEvo tokens
   already defined on :root in style.css (--gold, --purple,
   --glass-bg/border/blur, --ease-premium, --text-primary, etc.)
   rather than redefining a parallel palette.
   ============================================================ */

.dream-journey-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem calc(1.5rem + var(--safe-right)) calc(2rem + var(--safe-bottom)) calc(1.5rem + var(--safe-left));
  box-sizing: border-box;
  background: #060609; /* base fill while the cinematic <img> decodes/loads */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-premium), visibility 0.6s;
  overflow: hidden;
}

.dream-journey-screen.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   Shared cinematic background - landingpagebackground.png (the
   rider-on-horseback hero artwork) as a full-viewport layered
   environment. Two DOM instances share these classes: one inside
   .landing-choose-own (Stage 1, inline in the page) and one inside
   .dream-journey-screen (Stages 2-5, the fixed overlay) - they are
   never visible at the same time, so this costs nothing extra to
   repeat, and the browser only fetches the image once (already
   preloaded for the hero section higher up the page).
   dream-journey.js's initCinematicBackground() wires up the
   parallax + particle layers and the mood/stage custom properties
   consumed below (--cbg-*) for each instance independently.
   ============================================================ */

.dream-cinematic-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --cbg-brightness: 1;
  --cbg-contrast: 1;
  --cbg-saturate: 1;
  --cbg-tint-color: 212, 175, 55;
  --cbg-tint-opacity: 0;
  --cbg-vignette-strength: 1;
}

.dream-cinematic-bg-parallax {
  position: absolute;
  inset: -2%;
  width: 104%;
  height: 104%;
  transform: translate3d(var(--cbg-px, 0px), var(--cbg-py, 0px), 0);
}

.dream-cinematic-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: brightness(var(--cbg-brightness)) contrast(var(--cbg-contrast)) saturate(var(--cbg-saturate));
  transform-origin: 50% 42%;
  animation: dreamCbgKenBurns 64s ease-in-out infinite alternate;
  transition: filter 1.6s ease;
}

/* Extremely slow, barely-perceptible zoom - "the world is quietly alive,"
   not a looping effect the eye catches. */
@keyframes dreamCbgKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.055); }
}

.dream-cinematic-bg-tint {
  position: absolute;
  inset: 0;
  background-color: rgb(var(--cbg-tint-color));
  opacity: var(--cbg-tint-opacity);
  mix-blend-mode: soft-light;
  transition: opacity 1.6s ease, background-color 1.6s ease;
}

/* Center darker/lower-contrast than the edges (per spec) so the UI text
   sitting in the middle stays readable while the rider/mountains/sunset
   stay clearly visible toward the frame edges - a translucent haze over
   the subject, never an opaque rectangle. */
.dream-cinematic-bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%,
      rgba(6, 6, 12, calc(0.6 * var(--cbg-vignette-strength))) 0%,
      rgba(6, 6, 12, calc(0.4 * var(--cbg-vignette-strength))) 32%,
      rgba(6, 6, 12, calc(0.16 * var(--cbg-vignette-strength))) 58%,
      transparent 76%),
    linear-gradient(180deg,
      rgba(6, 6, 14, calc(0.34 * var(--cbg-vignette-strength))) 0%,
      transparent 24%,
      transparent 68%,
      rgba(6, 6, 14, calc(0.42 * var(--cbg-vignette-strength))) 100%);
  transition: background 1.6s ease;
}

.dream-cinematic-bg-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 30% at 16% 18%, rgba(255, 214, 150, 0.05), transparent 74%),
    radial-gradient(40% 26% at 86% 76%, rgba(157, 132, 183, 0.05), transparent 76%);
  filter: blur(10px);
}

.dream-cinematic-bg-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 640px) {
  .dream-cinematic-bg-img {
    object-position: 50% 38%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-cinematic-bg-img {
    animation: none;
  }
  .dream-cinematic-bg-parallax {
    transform: none;
  }
}

.dream-journey-close {
  position: absolute;
  top: calc(1.25rem + var(--safe-top));
  right: calc(1.25rem + var(--safe-right));
  z-index: 3;
  width: 40px;
  height: 40px;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease-smooth), border-color 0.25s var(--ease-smooth), transform 0.25s var(--ease-smooth);
}

.dream-journey-close:hover {
  color: var(--text-primary);
  border-color: rgba(212, 175, 55, 0.4);
  transform: rotate(90deg);
}

.dream-journey-close:focus-visible,
.dream-chat-back:focus-visible,
.dream-chat-next:focus-visible,
.dream-ready-cta:focus-visible,
.dream-error-cta:focus-visible,
.dream-enter-submit:focus-visible,
.dream-enter-input:focus-visible,
.dream-chat-input:focus-visible,
.dream-chat-textarea:focus-visible,
.dream-mood-btn:focus-visible {
  outline: 2px solid rgba(212, 175, 55, 0.7);
  outline-offset: 2px;
}

.dream-journey-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dream-journey-panel[aria-hidden="true"] {
  display: none;
}

/* ---- Stage 2: chat ---- */

.dream-chat-panel {
  max-width: 480px;
  gap: 1.5rem;
}

.dream-chat-scroll {
  width: 100%;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 0.25rem 0.25rem 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.3) transparent;
}

.dream-chat-scroll::-webkit-scrollbar {
  width: 5px;
}

.dream-chat-scroll::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 999px;
}

.dream-msg {
  max-width: 88%;
  padding: 0.9rem 1.2rem;
  border-radius: 18px;
  font-size: 1.0625rem;
  line-height: 1.55;
  text-align: left;
}

.dream-msg-dreamevo {
  align-self: flex-start;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: 1.25rem;
  color: var(--text-primary);
  background: none;
  padding: 0 0.25rem;
  border-radius: 0;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65), 0 0 26px rgba(212, 175, 55, 0.16);
  white-space: pre-line;
}

.dream-msg-user {
  align-self: flex-end;
  background: linear-gradient(150deg, rgba(20, 16, 10, 0.72), rgba(20, 16, 10, 0.6));
  border: 1px solid rgba(212, 175, 55, 0.28);
  color: var(--text-primary);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.95rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.dream-chat-input-area {
  width: 100%;
}

.dream-chat-input,
.dream-chat-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(8, 8, 14, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-primary);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 1rem; /* >=16px avoids iOS zoom on focus */
  transition: border-color 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
}

.dream-chat-textarea {
  min-height: 108px;
  resize: vertical;
  line-height: 1.5;
}

.dream-chat-input::placeholder,
.dream-chat-textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.dream-chat-input:focus,
.dream-chat-textarea:focus {
  outline: none;
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);
}

.dream-chat-input.is-invalid,
.dream-chat-textarea.is-invalid {
  border-color: rgba(239, 68, 68, 0.6);
  animation: dreamChatShake 0.4s var(--ease-smooth);
}

.dream-mood-grid.is-invalid {
  animation: dreamChatShake 0.4s var(--ease-smooth);
}

.dream-mood-grid.is-invalid .dream-mood-btn {
  border-color: rgba(239, 68, 68, 0.35);
}

@keyframes dreamChatShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .dream-chat-input.is-invalid,
  .dream-chat-textarea.is-invalid,
  .dream-mood-grid.is-invalid {
    animation: none;
  }
}

/* mood grid: custom control, not a native <select> */
.dream-mood-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: 100%;
}

.dream-mood-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 0.5rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 8, 14, 0.5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-secondary);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.8125rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: border-color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.dream-mood-btn-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gold);
}

.dream-mood-btn:hover {
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-2px);
}

.dream-mood-btn[aria-checked="true"] {
  border-color: rgba(212, 175, 55, 0.6);
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.04));
  color: var(--text-primary);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.12);
}

.dream-chat-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
}

.dream-chat-back {
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-secondary);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.875rem;
  cursor: pointer;
  transition: color 0.25s var(--ease-smooth);
}

.dream-chat-back:hover {
  color: var(--text-primary);
}

.dream-chat-back[hidden] {
  display: none;
}

.dream-chat-next {
  flex: 1 1 auto;
  padding: 0.9rem 1.5rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #8b7355, var(--gold));
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.3s var(--ease-smooth);
}

.dream-chat-next:hover:not(:disabled) {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.22);
}

.dream-chat-next:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.dream-chat-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.dream-chat-hint {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  opacity: 0.6;
  margin: -0.5rem 0 0;
}

/* ---- Stage 4: loading ----
   The wait (~9s to the first voice) is given something to do: breathe with
   the orb, watch real progress, and read the story's own two-line overview
   the moment the model writes it. */

.dream-loading-panel {
  gap: 1rem;
}

/* Breathing guide: 4s in, 6s out - a slow, sleep-paced breath. */
.dream-breath {
  --breath: 10s;
  position: relative;
  width: 132px;
  height: 132px;
  /* room for the label, which sits under the orb */
  margin-bottom: 2.1rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.dream-breath-orb,
.dream-breath-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.dream-breath-orb {
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: radial-gradient(circle at 50% 42%, rgba(232, 217, 160, 0.22) 0%, rgba(212, 175, 55, 0.1) 38%, rgba(157, 132, 183, 0.06) 70%, transparent 100%);
  box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.04), 0 0 36px rgba(212, 175, 55, 0.12) inset;
  animation: dreamBreathe var(--breath) ease-in-out infinite;
}

.dream-breath-glow {
  inset: -26px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(157, 132, 183, 0.08) 45%, transparent 70%);
  animation: dreamBreatheGlow var(--breath) ease-in-out infinite;
}

.dream-breath-label {
  /* Under the orb, not inside it: at the bottom of the breath the orb is
     narrower than the words. */
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: grid;
  justify-items: center;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.86);
}

.dream-breath-label > span {
  grid-area: 1 / 1;
}

.dream-breath-in {
  animation: dreamBreathIn var(--breath) linear infinite;
}

.dream-breath-out {
  animation: dreamBreathOut var(--breath) linear infinite;
}

@keyframes dreamBreathe {
  0%   { transform: scale(0.74); }
  40%  { transform: scale(1); }
  100% { transform: scale(0.74); }
}

@keyframes dreamBreatheGlow {
  0%   { opacity: 0.35; transform: scale(0.8); }
  40%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0.35; transform: scale(0.8); }
}

@keyframes dreamBreathIn {
  0%, 36%  { opacity: 1; }
  40%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes dreamBreathOut {
  0%, 36%  { opacity: 0; }
  40%, 96% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Tap ripple - a small answer to touch, nothing more. */
.dream-breath::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(232, 217, 160, 0.55);
  opacity: 0;
  pointer-events: none;
}

.dream-breath.is-rippling::after {
  animation: dreamBreathRipple 1.1s ease-out;
}

@keyframes dreamBreathRipple {
  0%   { opacity: 0.8; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.7); }
}

.dream-breath:focus-visible {
  outline: 2px solid rgba(232, 217, 160, 0.8);
  outline-offset: 6px;
}

.dream-loading-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.4vw, 1.8rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7), 0 0 30px rgba(212, 175, 55, 0.18);
}

.dream-loading-sub {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 1rem;
  color: var(--text-secondary);
  opacity: 0.9;
  margin: 0;
  max-width: 34ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Progress: three real steps, not a fake percentage. */
.dream-loading-progress {
  --fill: 0.12;
  width: min(100%, 360px);
  margin-top: 0.5rem;
}

.dream-loading-progress[data-step="1"] { --fill: 0.55; }
.dream-loading-progress[data-step="2"] { --fill: 1; }

.dream-loading-track {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: rgba(245, 241, 232, 0.12);
  overflow: hidden;
}

.dream-loading-fill {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transform: scaleX(var(--fill));
  background: linear-gradient(90deg, rgba(157, 132, 183, 0.7), var(--gold));
  transition: transform 1.2s cubic-bezier(0.16, 0.84, 0.44, 1);
}

/* A slow shimmer so the bar reads as working, never as frozen. */
.dream-loading-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 245, 210, 0.7), transparent);
  transform: translateX(-100%);
  animation: dreamLoadingShimmer 2.4s ease-in-out infinite;
}

@keyframes dreamLoadingShimmer {
  to { transform: translateX(100%); }
}

.dream-loading-steps {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: rgba(245, 241, 232, 0.42);
}

.dream-loading-steps li {
  transition: color 0.6s ease;
}

.dream-loading-steps li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  vertical-align: 0.1em;
  border-radius: 50%;
  border: 1px solid currentColor;
  transition: background-color 0.6s ease, box-shadow 0.6s ease;
}

.dream-loading-progress[data-step="0"] li:nth-child(1),
.dream-loading-progress[data-step="1"] li:nth-child(-n+2),
.dream-loading-progress[data-step="2"] li {
  color: rgba(245, 241, 232, 0.9);
}

.dream-loading-progress[data-step="1"] li:nth-child(1)::before,
.dream-loading-progress[data-step="2"] li::before {
  background: var(--gold);
  border-color: var(--gold);
}

.dream-loading-progress[data-step="0"] li:nth-child(1)::before,
.dream-loading-progress[data-step="1"] li:nth-child(2)::before {
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.8);
  animation: dreamStepPulse 1.6s ease-in-out infinite;
}

@keyframes dreamStepPulse {
  50% { box-shadow: 0 0 2px rgba(212, 175, 55, 0.2); }
}

/* The story's own overview, revealed as soon as it is written. */
.dream-loading-preview {
  width: min(100%, 400px);
  margin-top: 0.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(90deg, rgba(8, 8, 16, 0.55), rgba(8, 8, 16, 0.15));
  text-align: left;
  animation: dreamPreviewIn 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

.dream-loading-preview[hidden] {
  display: none;
}

@keyframes dreamPreviewIn {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

.dream-loading-preview-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 217, 160, 0.85);
}

.dream-loading-preview-text,
.dream-ready-preview {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.92);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.dream-loading-tip {
  min-height: 1.4em;
  margin: 0.2rem 0 0;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  font-size: 0.8rem;
  color: rgba(245, 241, 232, 0.55);
  transition: opacity 0.5s ease;
}

.dream-loading-tip.is-fading {
  opacity: 0;
}

/* Once the overview arrives it replaces the generic line under the title. */
.dream-loading-panel.has-preview .dream-loading-sub {
  display: none;
}

@media (max-width: 640px) {
  .dream-breath { width: 112px; height: 112px; }
  .dream-loading-preview-text { font-size: 0.95rem; }
}

@media (max-height: 700px) {
  .dream-breath { width: 84px; height: 84px; margin-bottom: 1.9rem; }
  .dream-breath-glow { inset: -16px; }
  .dream-loading-panel { gap: 0.7rem; }
  .dream-loading-tip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dream-breath-orb,
  .dream-breath-glow,
  .dream-loading-fill::after,
  .dream-loading-steps li::before,
  .dream-loading-preview { animation: none !important; }
  .dream-breath-orb { transform: scale(0.9); }
  .dream-breath-in { animation: none; opacity: 1; }
  .dream-breath-out { animation: none; opacity: 0; }
}

/* ---- Stage 5: ready ---- */

.dream-ready-panel {
  gap: 1rem;
}

.dream-ready-symbol {
  font-size: 1.75rem;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
}

.dream-ready-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.7), 0 0 34px rgba(212, 175, 55, 0.2);
}

.dream-ready-sub {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 0.75rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.dream-ready-preview {
  max-width: 400px;
  margin: -0.25rem 0 0.9rem;
}

.dream-ready-preview[hidden] {
  display: none;
}

.dream-ready-cta {
  padding: 1rem 2.25rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #8b7355, var(--gold));
  color: #1a1a1a;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.22);
  transition: transform 0.25s var(--ease-smooth), box-shadow 0.25s var(--ease-smooth);
}

.dream-ready-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(212, 175, 55, 0.3);
}

/* ---- error panel ---- */

.dream-error-panel {
  gap: 0.9rem;
}

.dream-error-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  color: var(--text-primary);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.dream-error-sub {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 0.5rem;
  max-width: 40ch;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.dream-error-cta {
  padding: 0.85rem 1.75rem;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.08);
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.25s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}

.dream-error-cta:hover {
  background: rgba(212, 175, 55, 0.16);
  transform: translateY(-1px);
}

/* ---- shared: panel enter/exit handled inline by GSAP (dream-journey.js);
   these are the CSS-only fallbacks if GSAP fails to load or reduced-motion
   is on, so panels are never stuck invisible ---- */
.dream-journey-panel {
  opacity: 1;
}

@media (max-width: 640px) {
  .dream-journey-screen {
    padding: 1.25rem 1rem calc(1.5rem + var(--safe-bottom));
    align-items: flex-start;
    padding-top: calc(4.5rem + var(--safe-top));
  }
  .dream-chat-panel,
  .dream-journey-panel {
    max-width: 100%;
  }
  .dream-mood-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dream-msg {
    max-width: 94%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dream-journey-screen {
    transition: opacity 0.15s linear, visibility 0.15s linear;
  }
}