/* ==========================================================================
   Hearth AI - Animations (v3 — premium polish + charts + pulls + badges)
   ========================================================================== */

/* ---------- Core keyframes ---------- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.05); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes glow { 0%, 100% { filter: drop-shadow(0 0 8px var(--ember-glowing)); } 50% { filter: drop-shadow(0 0 24px var(--ember-glowing)); } }
@keyframes goldenFlicker { 0%, 100% { filter: drop-shadow(0 0 12px var(--ember-golden)) drop-shadow(0 0 24px var(--ember-golden)); transform: scale(1); } 25% { filter: drop-shadow(0 0 20px var(--ember-golden)) drop-shadow(0 0 36px var(--ember-golden)); transform: scale(1.02); } 50% { filter: drop-shadow(0 0 16px var(--ember-golden)) drop-shadow(0 0 32px var(--ember-golden)); transform: scale(1.01); } 75% { filter: drop-shadow(0 0 24px var(--ember-golden)) drop-shadow(0 0 40px var(--ember-golden)); transform: scale(1.03); } }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0deg); } 100% { opacity: 0; transform: translateY(200px) rotate(720deg); } }
@keyframes voice-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
@keyframes anticipate { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.08); filter: brightness(1.15); } 100% { transform: scale(1.15); filter: brightness(1.3); } }
@keyframes emberAnticipation { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.06) rotate(2deg); } 75% { transform: scale(1.06) rotate(-2deg); } }
@keyframes sparkle { 0% { opacity: 0; transform: scale(0) translate(0, 0); } 20% { opacity: 1; transform: scale(1) translate(0, 0); } 100% { opacity: 0; transform: scale(0.5) translate(var(--dx, 30px), var(--dy, -30px)); } }
@keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes heartbeat { 0%, 50%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.15); } 20% { transform: scale(1); } }
@keyframes wave { 0%, 50%, 100% { transform: rotate(0deg); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }
@keyframes attentionBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes typingBounce { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* ---------- NEW v3: Path drawing for charts ---------- */
@keyframes drawPath {
  from { stroke-dashoffset: var(--path-length, 1000); }
  to { stroke-dashoffset: 0; }
}

@keyframes fadeInUpPoint {
  from { opacity: 0; transform: scale(0.3) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes fillArea {
  from { opacity: 0; }
  to { opacity: var(--fill-opacity, 0.3); }
}

/* ---------- NEW v3: Pull-to-refresh ---------- */
@keyframes pullHint {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-4px) rotate(0); }
}

@keyframes spinRefresh {
  to { transform: rotate(360deg); }
}

/* ---------- NEW v3: Submission celebration ---------- */
@keyframes checkmarkDraw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes circleGrow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes bigConfetti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--cx, 100px), var(--cy, 200px)) rotate(720deg); }
}

/* ---------- NEW v3: Tab indicator slide ---------- */
@keyframes tabPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes tabIndicator {
  from { transform: translateX(var(--from, 0)) scaleX(0.5); opacity: 0; }
  to { transform: translateX(var(--to, 0)) scaleX(1); opacity: 1; }
}

/* ---------- NEW v3: Reaction emoji float ---------- */
@keyframes reactionFloat {
  0% { opacity: 1; transform: translate(0, 0) scale(0.5); }
  50% { opacity: 1; transform: translate(var(--rx, 0), -30px) scale(1.2); }
  100% { opacity: 0; transform: translate(var(--rx, 0), -80px) scale(0.8); }
}

/* ---------- NEW v3: Mood emoji pop ---------- */
@keyframes emojiPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3) rotate(-5deg); }
  100% { transform: scale(1); }
}

/* ---------- NEW v3: Achievement unlock glow ---------- */
@keyframes unlockGlow {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-accent-300); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

@keyframes unlockSparkle {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

/* ---------- NEW v3: Saved draft indicator ---------- */
@keyframes saveIndicator {
  0%, 100% { opacity: 0; transform: translateY(4px); }
  10%, 90% { opacity: 1; transform: translateY(0); }
}

/* ---------- Ember states ---------- */
.ember { display: inline-block; position: relative; width: 100%; height: 100%; }
.ember--dim { color: var(--ember-dim); filter: drop-shadow(0 0 2px var(--ember-dim)); opacity: 0.85; }
.ember--glowing { color: var(--ember-glowing); animation: glow 3s ease-in-out infinite, breathe 4s ease-in-out infinite; }
.ember--meditative { color: var(--ember-meditative); animation: float 6s ease-in-out infinite, glow 4s ease-in-out infinite; }
.ember--golden { color: var(--ember-golden); animation: goldenFlicker 4s ease-in-out infinite; }
.ember--anticipation { color: var(--ember-glowing); animation: emberAnticipation 0.6s ease-in-out 3, glow 1s ease-in-out infinite; }

/* ---------- Reveal moment (v2) ---------- */
.reveal-stage { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-5); gap: var(--space-6); animation: fadeIn var(--duration-slower) var(--ease-out); }
.reveal-stage__ember { width: 200px; height: 200px; position: relative; transition: transform var(--duration-slower) var(--ease-spring); }
.reveal-stage__ember.anticipating { animation: anticipate 1.4s var(--ease-in-out) infinite; }
.reveal-stage__response { max-width: 360px; font-family: var(--font-family-serif); font-size: var(--font-size-lg); line-height: var(--line-height-relaxed); color: var(--color-text); font-style: italic; opacity: 0; transform: translateY(8px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); }
.reveal-stage__response.revealed { opacity: 1; transform: translateY(0); }
.reveal-stage__response.typing::after { content: '|'; display: inline-block; margin-left: 2px; animation: cursorBlink 1s steps(2) infinite; color: var(--color-accent-400); }
.reveal-stage__attribution { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-muted); opacity: 0; transition: opacity 600ms var(--ease-out) 400ms; }
.reveal-stage__attribution.revealed { opacity: 1; }
.reveal-stage__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); opacity: 0; transform: translateY(8px); transition: opacity 600ms var(--ease-out) 600ms, transform 600ms var(--ease-out) 600ms; }
.reveal-stage__actions.revealed { opacity: 1; transform: translateY(0); }

/* ---------- Streak celebration ---------- */
.streak-celebration { position: relative; text-align: center; padding: var(--space-6) var(--space-5); }
.streak-celebration__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.streak-celebration__confetti span { position: absolute; top: -10px; width: 8px; height: 8px; background: var(--color-accent-400); animation: confetti 2s ease-in forwards; }

/* ---------- Onboarding scenes ---------- */
.onboarding-scene { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 100vh; min-height: 100dvh; padding: var(--space-5); padding-top: max(var(--space-5), env(safe-area-inset-top)); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); text-align: center; gap: var(--space-5); animation: fadeIn 600ms var(--ease-out); }
.onboarding-scene__skip { position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); right: var(--space-5); font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); padding: var(--space-2) var(--space-3); min-height: 44px; display: flex; align-items: center; z-index: 2; }
.onboarding-scene__content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); max-width: 420px; width: 100%; margin: 0 auto; padding: var(--space-8) 0; }
.onboarding-scene__illustration { width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; animation: float 6s ease-in-out infinite; }
.onboarding-scene__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-tight); margin: 0; animation: fadeInUp 600ms var(--ease-out) 100ms backwards; }
.onboarding-scene__body { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-text-soft); margin: 0; animation: fadeInUp 600ms var(--ease-out) 200ms backwards; }
.onboarding-scene__footer { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 100%; max-width: 420px; margin: 0 auto; animation: fadeInUp 600ms var(--ease-out) 400ms backwards; }
.onboarding-dots { display: flex; gap: var(--space-2); justify-content: center; }
.onboarding-dots__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); transition: all var(--duration-normal) var(--ease-spring); }
.onboarding-dots__dot.active { background: var(--color-primary-500); width: 24px; border-radius: 4px; }

/* ---------- Voice waveform ---------- */
.voice-waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 80px; padding: 0 var(--space-4); }
.voice-waveform__bar { width: 3px; background: var(--color-primary-400); border-radius: var(--radius-full); animation: voice-wave 1.2s ease-in-out infinite; }
.voice-waveform.is-idle .voice-waveform__bar { animation: none; height: 4px !important; opacity: 0.4; }

/* ---------- Loading shimmer ---------- */
.skeleton-card { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.skeleton-card .skeleton { width: 100%; }
.skeleton-card .skeleton-title { height: 20px; width: 60%; }
.skeleton-card .skeleton-text { height: 14px; }

.page-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out); }

/* ---------- Press feedback ---------- */
.press { transition: transform var(--duration-fast) var(--ease-spring), background var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); cursor: pointer; }
.press:active { transform: scale(0.98); filter: brightness(0.97); }
.tilt-card { transition: transform 200ms var(--ease-out); transform-style: preserve-3d; will-change: transform; }

/* ---------- Stagger system ---------- */
[data-stagger] { opacity: 0; transform: translateY(8px); animation: stagger-in 500ms var(--ease-out) forwards; animation-delay: calc(var(--stagger-i, 0) * 80ms); }
@keyframes stagger-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- Count-up ---------- */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Sparkle effect ---------- */
.sparkle-burst { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.sparkle-burst__particle { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent-300); animation: sparkle 1.2s ease-out forwards; animation-delay: var(--delay, 0ms); left: 50%; top: 50%; }

.attention-bounce { animation: attentionBounce 2s ease-in-out infinite; }
.streak-celebration__confetti span:nth-child(3n) { background: var(--color-primary-400); }
.streak-celebration__confetti span:nth-child(3n+1) { background: var(--color-accent-300); }
.streak-celebration__confetti span:nth-child(3n+2) { background: var(--color-accent-500); }
.heartbeat { animation: heartbeat 1.5s ease-in-out; }
.wave-hand { display: inline-block; animation: wave 1.8s ease-in-out infinite; transform-origin: 70% 70%; }

/* ---------- Welcome back ---------- */
.welcome-back { position: relative; padding: var(--space-6) var(--space-5); background: linear-gradient(135deg, var(--color-primary-50), var(--color-accent-50)); border-bottom: 1px solid var(--color-border); animation: fadeInDown 600ms var(--ease-out); overflow: hidden; }
.welcome-back::before { content: ''; position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; background: radial-gradient(circle, var(--color-accent-200) 0%, transparent 70%); opacity: 0.5; pointer-events: none; }
.welcome-back__greeting { font-size: var(--font-size-md); color: var(--color-text-soft); margin: 0 0 var(--space-1); }
.welcome-back__name { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0 0 var(--space-3); letter-spacing: var(--letter-spacing-tight); }
.welcome-back__sub { font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: var(--line-height-relaxed); margin: 0; max-width: 360px; }

/* ---------- Streak repair ---------- */
.streak-repair { text-align: center; padding: var(--space-6) var(--space-5); max-width: 480px; margin: 0 auto; }
.streak-repair__icon { width: 80px; height: 80px; margin: 0 auto var(--space-4); display: flex; align-items: center; justify-content: center; background: var(--color-bg-soft); border-radius: 50%; animation: float 4s ease-in-out infinite; }
.streak-repair__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-3); line-height: var(--line-height-snug); }
.streak-repair__body { font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--color-text-soft); margin: 0 0 var(--space-5); }
.streak-repair__highlight { display: inline-block; padding: var(--space-3) var(--space-4); background: var(--color-bg-soft); border-radius: var(--radius-md); font-size: var(--font-size-sm); color: var(--color-text-soft); margin: 0 0 var(--space-5); line-height: var(--line-height-relaxed); }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: var(--space-8) var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 320px; margin: 0 auto; }
.empty-state__illustration { width: 140px; height: 140px; margin: 0 auto var(--space-3); display: flex; align-items: center; justify-content: center; animation: float 5s ease-in-out infinite; }
.empty-state__title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; line-height: var(--line-height-snug); }
.empty-state__body { font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-soft); margin: 0; }

/* ---------- Profile setup ---------- */
.profile-setup { min-height: 100vh; min-height: 100dvh; padding: var(--space-5); padding-top: max(var(--space-5), env(safe-area-inset-top)); padding-bottom: max(var(--space-6), env(safe-area-inset-bottom)); display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.profile-setup__progress { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); }
.profile-setup__progress-bar { flex: 1; height: 4px; background: var(--color-bg-soft); border-radius: var(--radius-full); overflow: hidden; }
.profile-setup__progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-primary-400), var(--color-accent-400)); border-radius: var(--radius-full); transition: width 600ms var(--ease-out); }
.profile-setup__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); letter-spacing: var(--letter-spacing-tight); }
.profile-setup__body { font-size: var(--font-size-md); color: var(--color-text-soft); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-6); }
.profile-setup__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); }
.avatar-picker { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.avatar-picker__option { width: 64px; height: 64px; border-radius: 50%; background: var(--color-bg-soft); display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; transition: all var(--duration-fast) var(--ease-spring); border: 2px solid transparent; }
.avatar-picker__option:hover { transform: translateY(-2px); background: var(--color-bg-elevated); box-shadow: var(--shadow-sm); }
.avatar-picker__option.selected { border-color: var(--color-primary-500); background: var(--color-primary-50); transform: scale(1.1); }

/* ==========================================================================
   V3: NEW COMPONENTS
   ========================================================================== */

/* ---------- Mood arc chart ---------- */
.mood-arc {
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.mood-arc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.mood-arc__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}
.mood-arc__legend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.mood-arc__legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-400);
}
.mood-arc__svg {
  width: 100%;
  height: 100px;
  display: block;
}
.mood-arc__line {
  fill: none;
  stroke: var(--color-accent-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  animation: drawPath 1500ms var(--ease-out) 200ms forwards;
}
.mood-arc__area {
  fill: url(#moodGradient);
  opacity: 0;
  animation: fillArea 1200ms var(--ease-out) 1000ms forwards;
  --fill-opacity: 0.3;
}
.mood-arc__point {
  fill: var(--color-bg-elevated);
  stroke: var(--color-accent-500);
  stroke-width: 2;
  opacity: 0;
  animation: fadeInUpPoint 400ms var(--ease-spring) forwards;
  transform-origin: center;
  transform-box: fill-box;
}
.mood-arc__point--today {
  fill: var(--color-accent-400);
  stroke: white;
  stroke-width: 3;
  r: 5;
  animation-delay: 1500ms;
}
.mood-arc__point-pulse {
  fill: var(--color-accent-300);
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: pulse 2s ease-in-out infinite;
}
.mood-arc__day {
  font-size: var(--font-size-2xs);
  fill: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
  text-anchor: middle;
  opacity: 0;
  animation: fadeIn 400ms var(--ease-out) 1200ms forwards;
}
.mood-arc__day--today {
  fill: var(--color-accent-600);
  font-weight: var(--font-weight-bold);
}
.mood-arc__mood-value {
  font-size: var(--font-size-2xs);
  fill: var(--color-accent-700);
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  opacity: 0;
  animation: fadeIn 400ms var(--ease-out) 1500ms forwards;
}

/* ---------- Pull-to-refresh ---------- */
.pull-indicator {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 5;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}
.pull-indicator__icon {
  width: 32px;
  height: 32px;
  background: var(--color-bg-elevated);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-500);
  box-shadow: var(--shadow-sm);
}
.pull-indicator.is-refreshing .pull-indicator__icon {
  animation: spinRefresh 1s linear infinite;
}
.pull-indicator.is-refreshing {
  background: transparent;
}
.pull-indicator__arrow {
  transition: transform 200ms var(--ease-out);
}
.pull-indicator__text {
  position: absolute;
  bottom: -16px;
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------- Quick reply suggestions ---------- */
.quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}
.quick-reply {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-text-soft);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  max-width: 100%;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quick-reply:hover {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
  transform: translateY(-1px);
}
.quick-reply:active {
  transform: scale(0.96);
}

/* ---------- Reaction emojis ---------- */
.reactions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
  position: relative;
}
.reaction-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  background: var(--color-bg-soft);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
}
.reaction-btn:hover { background: var(--color-bg-elevated); transform: translateY(-1px); }
.reaction-btn:active { transform: scale(0.92); }
.reaction-btn.active { background: var(--color-accent-50); border-color: var(--color-accent-300); }
.reaction-btn__count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
}
.reaction-btn.active .reaction-btn__count { color: var(--color-accent-700); }
.reaction-float {
  position: absolute;
  bottom: 100%;
  left: 50%;
  font-size: 24px;
  pointer-events: none;
  animation: reactionFloat 1.4s ease-out forwards;
  --rx: 0px;
}

/* ---------- Submission celebration overlay ---------- */
.celebration-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 19, 0.7);
  backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: fadeIn 300ms var(--ease-out);
  padding: var(--space-5);
}
.celebration-card {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-2xl);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  max-width: 360px;
  width: 100%;
  box-shadow: var(--shadow-2xl);
  animation: fadeInScale 500ms var(--ease-spring);
  position: relative;
  overflow: hidden;
}
.celebration-checkmark {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  background: var(--color-success-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.celebration-checkmark__circle {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 3;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkmarkDraw 600ms var(--ease-out) 200ms forwards;
  transform-origin: center;
  transform-box: fill-box;
}
.celebration-checkmark__check {
  fill: none;
  stroke: var(--color-success);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: checkmarkDraw 400ms var(--ease-out) 600ms forwards;
}
.celebration-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2);
}
.celebration-body {
  font-size: var(--font-size-md);
  color: var(--color-text-soft);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-5);
}
.celebration-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.celebration-confetti span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--color-accent-400);
  animation: bigConfetti 1.6s ease-out forwards;
}

/* ---------- Achievement grid ---------- */
.achievements-page {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--space-5);
  padding-top: max(var(--space-5), env(safe-area-inset-top));
  padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
}
.achievements-header { margin-bottom: var(--space-6); }
.achievements-header__back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-soft); font-size: var(--font-size-sm); margin-bottom: var(--space-3); min-height: 44px; padding: var(--space-2) 0; }
.achievements-header__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.achievements-header__desc { font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: var(--line-height-relaxed); margin: 0; }
.achievements-progress { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-6); padding: var(--space-3) var(--space-4); background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.achievements-progress__bar { flex: 1; height: 6px; background: var(--color-bg-soft); border-radius: var(--radius-full); overflow: hidden; }
.achievements-progress__fill { height: 100%; background: linear-gradient(90deg, var(--color-primary-400), var(--color-accent-400)); border-radius: var(--radius-full); transition: width 1.6s var(--ease-out); }
.achievements-progress__label { font-size: var(--font-size-sm); color: var(--color-text-soft); font-weight: var(--font-weight-medium); }
.achievements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 640px) { .achievements-grid { grid-template-columns: repeat(3, 1fr); } }
.achievement {
  position: relative;
  padding: var(--space-5) var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: all var(--duration-fast) var(--ease-out);
  cursor: pointer;
}
.achievement:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.achievement:active { transform: scale(0.98); }
.achievement--unlocked { background: linear-gradient(135deg, var(--color-accent-50), var(--color-bg-elevated)); border-color: var(--color-accent-200); }
.achievement--locked { opacity: 0.5; filter: grayscale(0.6); }
.achievement__icon { font-size: 40px; line-height: 1; }
.achievement__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text); margin: 0; line-height: var(--line-height-snug); }
.achievement__desc { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: var(--line-height-relaxed); margin: 0; }
.achievement__lock { position: absolute; top: var(--space-2); right: var(--space-2); font-size: var(--font-size-xs); }
.achievement__progress { width: 100%; height: 4px; background: var(--color-bg-soft); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-1); }
.achievement__progress-fill { height: 100%; background: var(--color-primary-400); border-radius: var(--radius-full); transition: width 1.4s var(--ease-out); }
.achievement__sparkle { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; pointer-events: none; }
.achievement--just-unlocked { animation: unlockGlow 2s ease-in-out 2; }

/* ---------- History / Memory lane ---------- */
.history-page {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: var(--space-8);
}
.history-header { padding: var(--space-5); padding-top: max(var(--space-5), env(safe-area-inset-top)); border-bottom: 1px solid var(--color-border); }
.history-header__back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-soft); font-size: var(--font-size-sm); margin-bottom: var(--space-3); min-height: 44px; padding: var(--space-2) 0; }
.history-header__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); margin: 0 0 var(--space-2); }
.history-header__desc { font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: var(--line-height-relaxed); margin: 0; }
.history-filters { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-5); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.history-filters::-webkit-scrollbar { display: none; }
.history-filter { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--font-size-sm); color: var(--color-text-soft); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); white-space: nowrap; }
.history-filter.active { background: var(--color-primary-500); color: var(--color-text-inverse); border-color: var(--color-primary-500); }
.history-timeline { padding: 0 var(--space-5); position: relative; }
.history-timeline::before { content: ''; position: absolute; left: 28px; top: 0; bottom: 0; width: 2px; background: var(--color-border); }
.history-entry { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); position: relative; }
.history-entry__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-primary-500); flex-shrink: 0; margin-top: 4px; z-index: 1; box-shadow: 0 0 0 4px var(--color-bg); }
.history-entry__card { flex: 1; background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); }
.history-entry__card:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.history-entry__date { font-size: var(--font-size-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-caps); margin: 0 0 var(--space-2); }
.history-entry__category { display: inline-block; padding: 2px 8px; background: var(--color-primary-50); color: var(--color-primary-700); border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
.history-entry__prompt { font-family: var(--font-family-serif); font-style: italic; font-size: var(--font-size-sm); color: var(--color-text-soft); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-2); }
.history-entry__response { font-size: var(--font-size-sm); color: var(--color-text); line-height: var(--line-height-relaxed); margin: 0 0 var(--space-2); }
.history-entry__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-text-muted); }
.history-entry__mood { display: flex; align-items: center; gap: 2px; }

/* ---------- Tooltip tour ---------- */
.tooltip-tour {
  position: fixed;
  bottom: calc(var(--tab-bar-height) + var(--space-5) + var(--safe-area-bottom));
  left: var(--space-5);
  right: var(--space-5);
  max-width: 360px;
  margin: 0 auto;
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 400ms var(--ease-out);
}
.tooltip-tour__text { flex: 1; }
.tooltip-tour__dismiss { background: var(--color-accent-400); color: white; padding: 4px 12px; border-radius: var(--radius-sm); font-weight: var(--font-weight-semibold); }

/* ---------- Draft indicator ---------- */
.draft-indicator {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: var(--color-text);
  color: var(--color-text-inverse);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-1);
  animation: saveIndicator 1.6s ease-in-out;
}

/* ---------- Theme: dim (low animation) ---------- */
.theme-dim *,
.theme-dim *::before,
.theme-dim *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ---------- Mood emoji picker ---------- */
.mood-picker {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-3);
}
.mood-emoji-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-spring);
  flex: 1;
}
.mood-emoji-btn:hover { background: var(--color-bg-soft); transform: translateY(-2px); }
.mood-emoji-btn:active { animation: emojiPop 400ms var(--ease-spring); }
.mood-emoji-btn.selected { background: var(--color-primary-50); }
.mood-emoji-btn__face { font-size: 28px; line-height: 1; }
.mood-emoji-btn__label { font-size: var(--font-size-2xs); color: var(--color-text-muted); }

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