/* ==========================================================================
   SVG Baby — expressions, care animations, particles, night mode
   State lives on #baby as data attributes set by js/nursery.js:
     data-mood   curious | loved | sleepy | hungry | sad
     data-action idle | feeding | burp | cuddling | giggling | sleeping | yawning |
                 stirring | rocking | peek-hide | peek-boo | refusing | listening
     data-eyes   open | closed | happy
     data-mouth  smile | o | laugh | pout | sleep
   ========================================================================== */

.room {
  min-height: 480px;
}

.crib {
  position: absolute;
  inset: auto 0 0 0;
  height: 310px;
  display: block;
  z-index: 3;
  transform-origin: 50% 100%;
  transition: filter 1.2s ease;
}

.crib-back-rail {
  left: 50%;
  bottom: 30px;
  width: 290px;
  height: 160px;
  margin-left: -145px;
}

.pillow {
  left: 50%;
  bottom: 150px;
  width: 180px;
  margin-left: -90px;
}

.blanket {
  left: 50%;
  bottom: 30px;
  width: 260px;
  height: 50px;
  margin-left: -130px;
  transition: transform 0.9s cubic-bezier(0.34, 1.4, 0.64, 1), height 0.9s;
}

.crib.rocking {
  animation: cribRock 1.1s ease-in-out 3;
}

@keyframes cribRock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg); }
  75% { transform: rotate(4deg); }
}

/* ---------- the baby ---------- */

#baby.baby {
  position: absolute;
  left: 50%;
  bottom: 58px;
  width: 200px;
  height: 236px;
  margin-left: -100px;
  z-index: 2;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
}

#baby:focus-visible .b-face {
  stroke: #e8c47a;
  stroke-width: 3;
}

.baby-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.baby-svg * {
  transform-box: fill-box;
}

/* Shapes positioned with an SVG transform="..." attribute must rotate around the drawing's
   own coordinates, or rotate(angle x y) pivots on the wrong point and the shape drifts. */
.baby-svg [transform] {
  transform-box: view-box;
  transform-origin: 0 0;
}

.b-root {
  transform-origin: 50% 100%;
  animation: babyBreathe 3.4s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#baby:hover .b-root {
  transform: scale(1.02);
}

@keyframes babyBreathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(2px) scale(1.012, 0.988); }
}

.b-head {
  transform-origin: 50% 85%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.b-eyeball {
  transition: transform 0.18s ease-out;
}

/* Swappable parts are hidden unless the current state selects them */
.b-eyes,
.b-mouth,
.b-lids,
.b-brows,
.b-tear {
  display: none;
}

#baby[data-eyes="open"] .eyes-open,
#baby[data-eyes="closed"] .eyes-closed,
#baby[data-eyes="happy"] .eyes-happy,
#baby[data-eyes="cry"] .eyes-cry,
#baby[data-mouth="cry"] .mouth-cry,
#baby[data-mouth="smile"] .mouth-smile,
#baby[data-mouth="o"] .mouth-o,
#baby[data-mouth="laugh"] .mouth-laugh,
#baby[data-mouth="pout"] .mouth-pout,
#baby[data-mouth="sleep"] .mouth-sleep {
  display: inline;
}

.mouth-o,
.mouth-laugh {
  transform-origin: center;
}

/* blinking */
.eyes-open .b-eye {
  transform-origin: center;
  animation: blinkEye 5.2s infinite;
}

.eyes-open .b-eye:nth-child(2) {
  animation-delay: 0.04s;
}

@keyframes blinkEye {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.08); }
}

.b-cheek {
  opacity: 0.55;
  transform-origin: center;
  transition: opacity 0.5s;
}

/* overlays that fade/slide in */
.b-nightcap,
.b-bottle,
.b-peek,
.b-bib {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.b-nightcap {
  transform: translateY(-30px) rotate(-8deg);
  transform-origin: center;
}

.b-bottle {
  transform: translate(60px, 0);
}

.b-peek {
  transform: translateY(40px) scale(0.7);
  transform-origin: center;
}

.b-milk {
  transform-origin: 0% 50%;
}

.b-arm {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}

.b-arm-l {
  transform-origin: 100% 0%;
}

.b-arm-r {
  transform-origin: 0% 0%;
}

/* ---------- moods ---------- */

#baby[data-mood="sleepy"][data-eyes="open"] .b-lids {
  display: inline;
}

#baby[data-mood="sad"] .b-brows,
#baby[data-mood="hungry"] .b-brows {
  display: inline;
}

#baby[data-mood="sad"] .b-brows path:first-child,
#baby[data-mood="hungry"] .b-brows path:first-child {
  transform: rotate(14deg) translateY(4px);
  transform-origin: center;
}

#baby[data-mood="sad"] .b-brows path:last-child,
#baby[data-mood="hungry"] .b-brows path:last-child {
  transform: rotate(-14deg) translateY(4px);
  transform-origin: center;
}

#baby[data-mood="sad"][data-action="idle"] .b-tear {
  display: inline;
  animation: tearDrop 2.4s ease-in infinite;
}

@keyframes tearDrop {
  0% { transform: translateY(-4px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(24px); opacity: 0; }
}

#baby[data-mood="hungry"][data-action="idle"] .b-body {
  animation: tummyRumble 3.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes tummyRumble {
  0%, 80%, 100% { transform: none; }
  84% { transform: translateX(-1.5px) scale(1.01); }
  88% { transform: translateX(1.5px); }
  92% { transform: translateX(-1px) scale(1.01); }
}

#baby[data-mood="loved"] .b-cheek {
  opacity: 0.85;
}

/* ---------- actions ---------- */

/* feeding */
#baby[data-action="feeding"] .b-bottle,
#baby[data-action="feeding"] .b-bib,
#baby[data-action="burp"] .b-bib {
  opacity: 1;
  transform: none;
}

#baby[data-action="feeding"] .b-milk {
  animation: milkDrain 3.4s linear forwards;
}

@keyframes milkDrain {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.1); }
}

#baby[data-action="feeding"] .b-cheek {
  opacity: 0.9;
  animation: suck 0.5s ease-in-out infinite;
}

#baby[data-action="feeding"] .mouth-o {
  animation: suckMouth 0.5s ease-in-out infinite;
}

@keyframes suck {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.82, 0.9); }
}

@keyframes suckMouth {
  0%, 100% { transform: scale(0.75); }
  50% { transform: scale(0.55, 0.7); }
}

#baby[data-action="burp"] .b-root {
  animation: burpBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes burpBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.06, 0.94) translateY(4px); }
  100% { transform: scale(1); }
}

/* cuddling / giggling / uppie arms */
#baby[data-action="cuddling"] .b-root {
  animation: squish 0.9s ease-in-out infinite;
}

@keyframes squish {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.05, 0.95) translateY(3px); }
}

#baby[data-action="cuddling"] .b-cheek,
#baby[data-action="giggling"] .b-cheek,
#baby[data-action="peek-boo"] .b-cheek {
  opacity: 1;
  animation: cheekGlow 0.9s ease-in-out infinite;
}

@keyframes cheekGlow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

#baby[data-action="cuddling"] .b-arm-l,
#baby[data-action="giggling"] .b-arm-l,
#baby[data-action="peek-boo"] .b-arm-l {
  transform: rotate(115deg);
}

#baby[data-action="cuddling"] .b-arm-r,
#baby[data-action="giggling"] .b-arm-r,
#baby[data-action="peek-boo"] .b-arm-r {
  transform: rotate(-115deg);
}

#baby[data-action="giggling"] .b-root,
#baby[data-action="peek-boo"] .b-root {
  animation: giggle 0.32s ease-in-out infinite;
}

@keyframes giggle {
  0%, 100% { transform: rotate(-2.5deg) translateY(0); }
  50% { transform: rotate(2.5deg) translateY(-4px); }
}

#baby[data-action="giggling"] .mouth-laugh,
#baby[data-action="peek-boo"] .mouth-laugh {
  animation: laughMouth 0.32s ease-in-out infinite;
}

@keyframes laughMouth {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.75); }
}

/* peekaboo */
#baby[data-action="peek-hide"] .b-peek {
  opacity: 1;
  transform: none;
}

#baby[data-action="peek-hide"] .b-arm {
  opacity: 0;
}

/* refusing: shakes head */
#baby[data-action="refusing"] .b-head {
  animation: headShake 0.55s ease-in-out 2;
}

@keyframes headShake {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

/* listening: curious head tilt */
#baby[data-action="listening"] .b-head {
  transform: rotate(-7deg);
}

/* sleeping */
#baby[data-action="sleeping"] .b-nightcap,
#baby[data-action="stirring"] .b-nightcap {
  opacity: 1;
  transform: none;
}

#baby[data-action="sleeping"] .b-root {
  animation: sleepBreathe 4.6s ease-in-out infinite;
}

@keyframes sleepBreathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50% { transform: translateY(4px) scale(1.025, 0.975); }
}

#baby[data-action="sleeping"] .b-head {
  transform: rotate(-9deg);
}

#baby[data-action="sleeping"] .b-arm,
#baby[data-action="stirring"] .b-arm {
  opacity: 0;
}

#baby[data-action="stirring"] .b-root {
  animation: stir 0.45s ease-in-out 2;
}

@keyframes stir {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(-3deg) translateX(-2px); }
}

#baby[data-action="yawning"] .mouth-o {
  animation: yawn 1.4s ease-in-out;
}

#baby[data-action="yawning"] .b-head {
  transform: rotate(-6deg) translateY(-3px);
}

@keyframes yawn {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.35, 1.6); }
  100% { transform: scale(0.8); }
}

.room.is-asleep .blanket {
  transform: translateY(-34px);
  height: 74px;
}

/* ---------- night mode ---------- */

.night-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 214, 153, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, rgba(30, 27, 75, 0.62) 0%, rgba(49, 46, 129, 0.45) 60%, rgba(67, 56, 202, 0.25) 100%);
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 1;
}

.room.is-asleep .night-veil {
  opacity: 1;
}

.room.is-asleep .crib {
  filter: brightness(0.86) saturate(0.92);
}

.room.is-asleep .window-moon {
  filter: drop-shadow(0 0 26px rgba(251, 211, 141, 0.95));
  opacity: 1;
}

.room.is-asleep .room-stars span {
  width: 4px;
  height: 4px;
}

.room.is-asleep .mobile {
  animation-duration: 9s;
}

.room-ambient,
.mobile {
  z-index: 2;
}

/* ---------- speech bubble ---------- */

.bubble {
  position: absolute;
  top: 98px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(330px, 86%);
  margin: 0;
  padding: 12px 20px;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(231, 169, 154, 0.35);
  box-shadow: 0 16px 36px -6px rgba(59, 42, 34, 0.16), 0 4px 12px rgba(59, 42, 34, 0.06);
  text-align: center;
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  z-index: 10;
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #ffffff;
}

.bubble.pop {
  animation: bubblePop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bubblePop {
  0% { transform: translateX(-50%) scale(0.85) translateY(8px); opacity: 0; }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}

.bubble.thinking {
  color: transparent;
  min-width: 70px;
  min-height: 44px;
}

.bubble.thinking::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7a99a;
  box-shadow: -14px 0 0 #e7a99a, 14px 0 0 #e7a99a;
  animation: thinkDots 1s ease-in-out infinite;
}

@keyframes thinkDots {
  0%, 100% { box-shadow: -14px 0 0 #e7a99a, 14px 0 0 rgba(231, 169, 154, 0.3); background: rgba(231, 169, 154, 0.6); }
  50% { box-shadow: -14px 0 0 rgba(231, 169, 154, 0.3), 14px 0 0 #e7a99a; background: #e7a99a; }
}

.room.is-asleep .bubble {
  background: #eef0ff;
  color: #4338ca;
  font-style: italic;
  border-color: rgba(129, 140, 248, 0.35);
}

.room.is-asleep .bubble::after {
  border-top-color: #eef0ff;
}

.room-hint {
  position: absolute;
  top: 12px;
  left: 16px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(59, 42, 34, 0.45);
  z-index: 4;
  max-width: 40%;
  transition: color 1s;
}

.room.is-asleep .room-hint {
  color: rgba(224, 231, 255, 0.6);
}

/* ---------- particles ---------- */

.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9;
}

.fx {
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--size, 20px);
  line-height: 1;
  will-change: transform, opacity;
  animation: fxFloat var(--dur, 1.6s) cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  text-shadow: 0 2px 6px rgba(59, 42, 34, 0.12);
}

@keyframes fxFloat {
  0% { transform: translate(-50%, -50%) scale(0.4) rotate(0deg); opacity: 0; }
  15% { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.2), calc(-50% - 12px)) scale(1) rotate(calc(var(--rot) * 0.3)); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% - var(--rise, 110px))) scale(0.9) rotate(var(--rot)); opacity: 0; }
}

.fx.fx-z {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  color: #c7d2fe;
}

.fx.fx-word {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 15px;
  color: #b45309;
  background: #fff7ed;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1.5px solid #fed7aa;
}

.fx.fx-drop {
  animation-name: fxDrop;
}

@keyframes fxDrop {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + 40px)) scale(0.8); opacity: 0; }
}

/* ---------- care buttons ---------- */

.care-btn.is-active {
  border-color: #818cf8;
  background: #eef2ff;
}

.care-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.mood-badge.mood-hungry {
  background: #fff1e6;
  color: #c2410c;
}

.brain-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: #ecfdf5;
  color: #047857;
}

.brain-chip.offline {
  background: #f5f5f4;
  color: #78716c;
}

@media (max-width: 640px) {
  .room {
    min-height: 450px;
  }

  .room-hint {
    display: none;
  }

  .bubble {
    top: 84px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b-root,
  .eyes-open .b-eye,
  .crib.rocking,
  .fx {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
  }
}

.journal-empty[hidden] {
  display: none !important;
}

/* ---------- chat avatars & voice icon ---------- */

.convo-avatar {
  background: radial-gradient(circle at 35% 30%, #fff7ef, #fde2d6);
  overflow: hidden;
}

.convo-avatar svg {
  width: 40px;
  height: 40px;
  display: block;
}

.avatar-mini {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-mini.baby-avatar {
  background: #fff1e6;
  box-shadow: 0 0 0 1.5px #fde2d6;
}

.avatar-mini.baby-avatar svg {
  width: 26px;
  height: 26px;
  display: block;
}

.avatar-mini.parent-avatar {
  background: linear-gradient(145deg, #a5c8f5, #7aa7e8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.voice-icon {
  display: inline-flex;
  color: #7c8a6e;
}

.voice-toggle-pill input:not(:checked) ~ .voice-label .voice-icon {
  color: #a8a29e;
}

/* ---------- wardrobe: what the baby is wearing ---------- */

.baby-svg .hat,
.baby-svg .acc,
.baby-svg .pat {
  display: none;
}

#baby[data-pattern="star"] .pat-star,
#baby[data-pattern="hearts"] .pat-hearts,
#baby[data-pattern="stripes"] .pat-stripes,
#baby[data-pattern="dots"] .pat-dots,
#baby[data-pattern="rainbow"] .pat-rainbow,
#baby[data-hat="beanie"] .hat-beanie,
#baby[data-hat="bunny"] .hat-bunny,
#baby[data-hat="bunny"] .hat-bunny-ears,
#baby[data-hat="bear"] .hat-bear,
#baby[data-hat="bow"] .hat-bow,
#baby[data-hat="crown"] .hat-crown,
#baby[data-hat="sunhat"] .hat-sunhat,
#baby[data-acc="glasses"] .acc-glasses,
#baby[data-acc="pacifier"] .acc-pacifier,
#baby[data-acc="bowtie"] .acc-bowtie,
#baby[data-acc="scarf"] .acc-scarf {
  display: inline;
}

/* the nightcap replaces hats at bedtime; the pacifier comes out to eat, laugh and yawn */
#baby[data-action="sleeping"] .hat,
#baby[data-action="stirring"] .hat,
#baby[data-action="feeding"] .acc-pacifier,
#baby[data-action="burp"] .acc-pacifier,
#baby[data-action="yawning"] .acc-pacifier,
#baby[data-action="giggling"] .acc-pacifier,
#baby[data-action="peek-boo"] .acc-pacifier,
#baby[data-action="cuddling"] .acc-pacifier {
  display: none;
}

#baby[data-action="feeding"] .acc-bowtie,
#baby[data-action="feeding"] .acc-scarf {
  opacity: 0.25;
}

.hat {
  transform-origin: 50% 100%;
}

#baby[data-action="dressing"] .b-root {
  animation: twirl 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes twirl {
  0% { transform: scaleX(1); }
  35% { transform: scaleX(-1) translateY(-6px); }
  70% { transform: scaleX(1) translateY(-8px); }
  100% { transform: scaleX(1) translateY(0); }
}

#baby[data-action="dressing"] .b-cheek {
  opacity: 1;
}

/* ---------- care row with the closet button ---------- */

.care {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.care-btn {
  padding: 9px 4px;
  font-size: 12px;
  gap: 4px;
}

.care-btn.care-closet:hover,
.care-btn.care-closet.is-active {
  border-color: #c084fc;
  background: #faf5ff;
}

@media (max-width: 640px) {
  .care {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- the closet ---------- */

.closet {
  position: relative;
  border-radius: 22px;
  padding: 10px;
  background: linear-gradient(180deg, #c99a6e 0%, #b07f55 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 14px 30px rgba(59, 42, 34, 0.18);
  perspective: 900px;
  animation: closetIn 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.closet[hidden] {
  display: none;
}

@keyframes closetIn {
  from { transform: translateY(-8px) scale(0.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.closet-inside {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 26px),
    linear-gradient(180deg, #fff8ef 0%, #fdeedc 100%);
  border-radius: 14px;
  padding: 12px 12px 14px;
  box-shadow: inset 0 3px 10px rgba(120, 72, 36, 0.18);
}

.closet-doors {
  position: absolute;
  inset: 10px;
  display: flex;
  pointer-events: none;
  z-index: 2;
}

.door {
  flex: 1;
  background:
    radial-gradient(circle at 88% 50%, #f5d08a 0 4px, transparent 5px),
    linear-gradient(180deg, #d9ab7c, #c08b5c);
  border: 2px solid #a8764a;
  border-radius: 12px;
  box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.08);
  animation: doorOpenL 0.7s 0.05s cubic-bezier(0.5, 0, 0.3, 1) forwards;
  transform-origin: left center;
}

.door-r {
  background:
    radial-gradient(circle at 12% 50%, #f5d08a 0 4px, transparent 5px),
    linear-gradient(180deg, #d9ab7c, #c08b5c);
  transform-origin: right center;
  animation-name: doorOpenR;
}

@keyframes doorOpenL {
  to { transform: rotateY(-105deg); opacity: 0; }
}

@keyframes doorOpenR {
  to { transform: rotateY(105deg); opacity: 0; }
}

.closet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.closet-head h3 {
  font-size: 17px;
  color: #6b4226;
}

.closet-actions {
  display: flex;
  gap: 6px;
}

.closet-mini {
  border: 1.5px solid rgba(107, 66, 38, 0.18);
  background: #fff;
  color: #6b4226;
  border-radius: 999px;
  padding: 5px 11px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.closet-mini:hover {
  transform: translateY(-2px);
}

.closet-close {
  background: #6b4226;
  color: #fff;
}

.closet-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  border-bottom: 2px dashed rgba(107, 66, 38, 0.18);
  padding-bottom: 8px;
}

.closet-tab {
  border: 0;
  background: transparent;
  color: #8b6a50;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
}

.closet-tab.is-active {
  background: #6b4226;
  color: #fff;
}

.closet-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 8px;
}

.closet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 4px 7px;
  border-radius: 14px;
  border: 2px solid transparent;
  background: #fff;
  box-shadow: 0 3px 8px rgba(107, 66, 38, 0.1);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  color: #6b4226;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s;
}

.closet-item:hover {
  transform: translateY(-3px) rotate(-2deg);
}

.closet-item.is-on {
  border-color: #c084fc;
  background: #faf5ff;
}

.closet-item .swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px rgba(107, 66, 38, 0.15);
}

.closet-item .item-icon {
  font-size: 24px;
  line-height: 30px;
  height: 30px;
}

.closet-item .item-icon svg {
  width: 30px;
  height: 30px;
}

.closet-hint {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: #8b6a50;
}


/* ---------- crying ---------- */

.b-cry-tears {
  display: none;
}

#baby[data-action="crying"] .b-cry-tears {
  display: inline;
}

.cry-tear {
  animation: cryStream 0.9s ease-in infinite;
}

.cry-tear.late {
  animation-delay: 0.45s;
}

@keyframes cryStream {
  0% { transform: translateY(-2px) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(30px) scale(1); opacity: 0; }
}

#baby[data-action="crying"] .b-root {
  animation: sobShake 0.5s ease-in-out infinite;
}

@keyframes sobShake {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  30% { transform: translateY(2px) scale(1.03, 0.97) rotate(-1.5deg); }
  60% { transform: translateY(-1px) scale(0.99, 1.01) rotate(1.5deg); }
}

#baby[data-action="crying"] .b-cheek {
  opacity: 1;
  animation: cheekGlow 0.5s ease-in-out infinite;
}

#baby[data-action="crying"] .mouth-cry {
  transform-origin: 50% 0%;
  animation: wail 0.9s ease-in-out infinite;
}

@keyframes wail {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.08, 1.18); }
}

#baby[data-action="crying"] .b-brows {
  display: inline;
}

#baby[data-action="crying"] .b-brows path:first-child {
  transform: rotate(16deg) translateY(5px);
  transform-origin: center;
}

#baby[data-action="crying"] .b-brows path:last-child {
  transform: rotate(-16deg) translateY(5px);
  transform-origin: center;
}

#baby[data-action="crying"] .acc-pacifier {
  display: none;
}


/* ---------- welcome: privacy note + load link ---------- */

.welcome .privacy-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(59, 42, 34, 0.6);
}

.welcome .link-btn {
  border: 0;
  background: none;
  padding: 2px 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #b4532a;
  text-decoration: underline;
  cursor: pointer;
  justify-self: center;
}

.brain-chip.loading {
  background: #eef2ff;
  color: #4338ca;
}

/* ---------- voice picker ---------- */

.voice-select {
  max-width: 150px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1.5px solid rgba(59, 42, 34, 0.12);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.voice-select[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .voice-select {
    max-width: 110px;
  }
}