*{ box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #fffdf8;
  --green: #1D9E75;
  --green-dark: #0F6E56;
  --text: #2C2C2A;
  --text-muted: #555450;
  --text-faint: #888780;
  --border: rgba(0,0,0,0.12);
}

body {
  font-family: system-ui, sans-serif;
  background: var(--bg);
  min-height: 100dvh;
}

#content-body {
  min-height: 100dvh;
}

#content-body.flow-processing::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(247, 245, 240, 0.6);
  z-index: 1000;
}

#content-body.flow-processing::after {
  content: '';
  position: fixed;
  top: 50%; left: 50%;
  width: 36px; height: 36px;
  border: 3px solid #ddd9d0;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: app-spin 0.8s linear infinite;
  z-index: 1001;
}

@keyframes app-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ── Badr character system ── */
/* Individual cropped PNGs per mood — no sprite math. */

.badr {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  animation: badrFloat 3s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes badrFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Size variants — uniform box, image scales via contain */
.badr-sm { width: clamp(80px,  22vw, 100px); height: clamp(88px,  24vw, 110px); }
.badr-md { width: clamp(100px, 28vw, 130px); height: clamp(110px, 31vw, 143px); }
.badr-lg { width: clamp(140px, 38vw, 180px); height: clamp(154px, 42vw, 198px); }

.badr-welcoming  { background-image: url('/assets/badr/mood_welcoming.webp');   }
.badr-reading    { background-image: url('/assets/badr/mood_reading.webp');     }
.badr-celebrating{ background-image: url('/assets/badr/mood_celebrating.webp'); }
.badr-encouraging{ background-image: url('/assets/badr/mood_encouraging.webp'); }
.badr-sad        { background-image: url('/assets/badr/mood_sad.webp');         }
.badr-happy      { background-image: url('/assets/badr/mood_happy.webp');       }
.badr-surprised  { background-image: url('/assets/badr/mood_surprised.webp');   }
.badr-listening  { background-image: url('/assets/badr/mood_listening.webp');   }