/* style.css — Angel Face 2: Penelope Chat Avatar */
/* Complete stylesheet: dark warm aesthetic, pure CSS avatar, all 9 animation states */
/* This is the ONLY stylesheet for the entire app */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  touch-action: manipulation; /* FIX 9: disable double-tap zoom */
}

html, body {
  height: var(--vh, 100vh); /* FIX 1: use visualViewport height when available */
  overflow: hidden;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  background: #0d0d1a;
  color: #eee;
  padding-top: env(safe-area-inset-top); /* FIX 5: safe area for notched phones */
}

@supports (height: 1dvh) {
  html, body {
    height: var(--vh, 100dvh); /* FIX 1: --vh from visualViewport takes priority, dvh as fallback */
  }
}

/* ============================================
   LOADER — Full-screen overlay on startup
   ============================================ */
#loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0d0d1a;
  z-index: 1000;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-text {
  margin-top: 24px;
  font-size: 1.1rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  background: linear-gradient(90deg, #8b5cf6, #e879a0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================
   APP CONTAINER
   ============================================ */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 600px;
  margin: 0 auto;
}

#app.hidden {
  display: none;
}

/* ============================================
   AVATAR AREA — Top ~40% of viewport
   ============================================ */
#avatar-area {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center bottom, #1a0f2e 0%, #0d0d1a 70%);
}

/* ============================================
   CHAT AREA — Bottom ~60% of viewport
   ============================================ */
#chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #0a0f1e;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #6366f1, #e879a0, #6366f1) 1;
  box-shadow: 0 -1px 12px rgba(99, 102, 241, 0.15);
  min-height: 0;
}

/* ============================================
   THE AVATAR — #penelope (V3)
   Pure CSS character built from nested divs
   ============================================ */
#penelope {
  position: relative;
  width: 140px;
  height: 240px;
  transform-origin: center bottom;
}

/* -- Head (slightly oval) -- */
#penelope .head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 78px;
  background: #f5c89a;
  border-radius: 50% 50% 48% 48%;
  z-index: 3;
  transform-origin: center bottom;
}

/* Cheek blush */
#penelope .head::after {
  content: '';
  position: absolute;
  top: 38px;
  left: 8px;
  width: 16px;
  height: 10px;
  background: rgba(232, 121, 160, 0.25);
  border-radius: 50%;
  box-shadow: 50px 0 0 0 rgba(232, 121, 160, 0.25);
  z-index: 5;
}

/* -- Hair (blonde, feminine, flowing) -- */
#penelope .hair {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 52px;
  background: linear-gradient(180deg, #e8b830 0%, #d4a520 100%);
  border-radius: 50% 50% 20% 20%;
  z-index: 2;
}
/* Hair flowing left */
#penelope .hair::before {
  content: '';
  position: absolute;
  top: 28px;
  left: -10px;
  width: 26px;
  height: 72px;
  background: linear-gradient(180deg, #d4a520 0%, #c99a18 60%, #dbb030 100%);
  border-radius: 50% 40% 60% 45%;
  z-index: 1;
}
/* Hair flowing right */
#penelope .hair::after {
  content: '';
  position: absolute;
  top: 28px;
  right: -10px;
  width: 26px;
  height: 72px;
  background: linear-gradient(180deg, #d4a520 0%, #c99a18 60%, #dbb030 100%);
  border-radius: 40% 50% 45% 60%;
  z-index: 1;
}
/* Back hair layer — volume + depth */
#penelope .hair-back {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 90px;
  background: linear-gradient(180deg, #c99a18 0%, #b8890f 100%);
  border-radius: 46% 46% 40% 40%;
  z-index: 1;
}

/* -- Eyes (bigger, with sclera + iris) -- */
#penelope .eye-left,
#penelope .eye-right {
  position: absolute;
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  z-index: 6;
  transform-origin: center center;
  border: 1px solid #ddd;
}
#penelope .eye-left { top: 28px; left: 50%; margin-left: -20px; }
#penelope .eye-right { top: 28px; left: 50%; margin-left: 6px; }

/* Iris */
#penelope .eye-left::before,
#penelope .eye-right::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #6b4423;
  border-radius: 50%;
}

/* Pupil + shine */
#penelope .eye-left::after,
#penelope .eye-right::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #1a1a2e;
  border-radius: 50%;
  box-shadow: 2px -1px 0 0 rgba(255,255,255,0.8);
}

/* -- Subtle lash line -- */
#penelope .lash-left,
#penelope .lash-right {
  position: absolute;
  width: 18px;
  height: 3px;
  border-top: 2px solid #4a3520;
  border-radius: 50% 50% 0 0;
  z-index: 7;
}
#penelope .lash-left { top: 26px; left: 50%; margin-left: -21px; }
#penelope .lash-right { top: 26px; left: 50%; margin-left: 5px; }

/* -- Glasses (THICK BLOCK nerd-cute) -- */
#penelope .glasses {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 3px;
  align-items: center;
}
#penelope .glasses .lens {
  width: 26px;
  height: 20px;
  border: 3.5px solid #3d2b1a;
  border-radius: 3px;
  background: rgba(200, 220, 255, 0.05);
}
#penelope .glasses .bridge {
  width: 5px;
  height: 3.5px;
  background: #3d2b1a;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
}
/* Temple arms (chunky sides) */
#penelope .glasses::before,
#penelope .glasses::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 10px;
  height: 3px;
  background: #3d2b1a;
}
#penelope .glasses::before { left: -8px; }
#penelope .glasses::after { right: -8px; }

/* -- Eyebrows -- */
#penelope .brow-left,
#penelope .brow-right {
  position: absolute;
  width: 14px;
  height: 4px;
  border-top: 2.5px solid #7a5530;
  border-radius: 40% 60% 0 0;
  z-index: 9;
}
#penelope .brow-left { top: 20px; left: 50%; margin-left: -20px; }
#penelope .brow-right { top: 20px; left: 50%; margin-left: 8px; }

/* -- Lips (fuller, two-part, Kim K nude-mauve) -- */
#penelope .mouth {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  z-index: 6;
}
/* Upper lip */
#penelope .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 5px;
  background: #b07068;
  border-radius: 50% 50% 0 0;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
/* Lower lip */
#penelope .mouth::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 7px;
  background: #b07068;
  border-radius: 0 0 50% 50%;
}

/* -- Body (tapered, jewel tone teal) -- */
#penelope .body {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 68px;
  background: #2d8a7e;
  border-radius: 16px 16px 10px 10px;
  z-index: 2;
  transform-origin: center bottom;
}
/* Neckline V */
#penelope .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #f5c89a;
}
/* Necklace */
#penelope .body::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  border: 1px solid #d97706;
  z-index: 3;
}

/* -- Arms (siblings of body, NOT children) -- */
#penelope .arm-left,
#penelope .arm-right {
  position: absolute;
  top: 84px;
  width: 11px;
  height: 52px;
  background: #f5c89a;
  border-radius: 6px 6px 5px 5px;
  z-index: 1;
  transform-origin: top center;
}
#penelope .arm-left { left: 12px; }
#penelope .arm-right { right: 12px; }

/* -- Hands -- */
#penelope .hand-left,
#penelope .hand-right {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f5c89a;
  border-radius: 50%;
  z-index: 1;
  bottom: -6px;
}
#penelope .hand-left { left: 0px; }
#penelope .hand-right { right: 0px; }

/* -- Legs (slight calf shape) -- */
#penelope .legs {
  position: absolute;
  top: 146px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  transform-origin: top center;
}

#penelope .legs .leg-left,
#penelope .legs .leg-right {
  position: relative;
  width: 13px;
  height: 56px;
  background: #2a2a4e;
  border-radius: 6px 6px 5px 5px;
  transform-origin: top center;
}

/* Shoes (small heels, matching teal) */
#penelope .legs .leg-left::after,
#penelope .legs .leg-right::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 10px;
  background: #2d8a7e;
  border-radius: 4px 4px 6px 6px;
}

#penelope .legs .leg-left::after {
  left: -1px;
}

#penelope .legs .leg-right::after {
  right: -1px;
}


/* ============================================
   KEYFRAMES — CORE BUILDING BLOCKS
   ============================================ */

/* --- Blink (used in idle and others) --- */
@keyframes blink {
  0%, 42%, 48%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.05); }
}

/* --- Idle sway --- */
@keyframes idle-sway {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}

/* --- Wave arm --- */
@keyframes wave-arm {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(-140deg); }
  24% { transform: rotate(-100deg); }
  36% { transform: rotate(-140deg); }
  48% { transform: rotate(-100deg); }
  60% { transform: rotate(-140deg); }
  72% { transform: rotate(-100deg); }
  84% { transform: rotate(-140deg); }
}

@keyframes wave-lean {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(-4deg); }
  80% { transform: translateX(-50%) rotate(-4deg); }
}

/* --- Dance: body bounce --- */
@keyframes dance-body-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  25% { transform: translateX(-50%) translateY(-8px) rotate(-8deg); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(6deg); }
  75% { transform: translateX(-50%) translateY(-10px) rotate(-4deg); }
}

/* --- Dance: head bob --- */
@keyframes dance-head-bob {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  20% { transform: translateX(-50%) rotate(14deg); }
  40% { transform: translateX(-50%) rotate(-14deg); }
  60% { transform: translateX(-50%) rotate(18deg); }
  80% { transform: translateX(-50%) rotate(-10deg); }
}

/* --- Dance: arm flail left --- */
@keyframes dance-arm-flail-left {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-80deg); }
  35% { transform: rotate(40deg); }
  55% { transform: rotate(-100deg); }
  75% { transform: rotate(20deg); }
  90% { transform: rotate(-60deg); }
}

/* --- Dance: arm flail right --- */
@keyframes dance-arm-flail-right {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(90deg); }
  30% { transform: rotate(-30deg); }
  50% { transform: rotate(70deg); }
  70% { transform: rotate(-50deg); }
  85% { transform: rotate(80deg); }
}

/* --- Dance: leg bounce --- */
@keyframes dance-leg-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Think: arm to chin --- */
@keyframes think-arm-up {
  0% { transform: rotate(0deg); }
  40%, 100% { transform: rotate(-60deg) translateY(-6px); }
}

/* --- Think: head tilt --- */
@keyframes think-head-tilt {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  30%, 70% { transform: translateX(-50%) rotate(10deg); }
}

/* --- Think: eyes drift up --- */
@keyframes think-eyes-up {
  0% { transform: translateY(0); }
  40%, 100% { transform: translateY(-3px); }
}

/* --- Heart: arms inward left --- */
@keyframes heart-arm-left {
  0% { transform: rotate(0deg); }
  40%, 100% { transform: rotate(40deg); }
}

/* --- Heart: arms inward right --- */
@keyframes heart-arm-right {
  0% { transform: rotate(0deg); }
  40%, 100% { transform: rotate(-40deg); }
}

/* --- Heart: body lean forward --- */
@keyframes heart-lean {
  0% { transform: translateX(-50%) rotate(0deg); }
  40%, 100% { transform: translateX(-50%) rotate(3deg); }
}

/* --- Heart: head tilt down --- */
@keyframes heart-head-down {
  0% { transform: translateX(-50%) rotate(0deg); }
  40%, 100% { transform: translateX(-50%) rotate(5deg); }
}

/* --- Heart: glow pulse --- */
@keyframes heart-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 8px rgba(232, 121, 160, 0.5)); }
}

/* --- Clap: left arm in --- */
@keyframes clap-arm-left {
  0%, 100% { transform: rotate(50deg); }
  50% { transform: rotate(15deg); }
}

/* --- Clap: right arm in --- */
@keyframes clap-arm-right {
  0%, 100% { transform: rotate(-50deg); }
  50% { transform: rotate(-15deg); }
}

/* --- Clap: body forward bounce --- */
@keyframes clap-body-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

/* --- Wag: finger wag arm --- */
@keyframes wag-finger {
  0%, 100% { transform: rotate(-90deg); }
  25% { transform: rotate(-110deg); }
  75% { transform: rotate(-70deg); }
}

/* --- Wag: head shake --- */
@keyframes wag-head-shake {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-6deg); }
  75% { transform: translateX(-50%) rotate(6deg); }
}

/* --- Lean: body forward --- */
@keyframes lean-body-forward {
  0% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  50%, 100% { transform: translateX(-50%) rotate(6deg) translateY(-4px); }
}

/* --- Lean: head down tilt --- */
@keyframes lean-head-down {
  0% { transform: translateX(-50%) rotate(0deg); }
  50%, 100% { transform: translateX(-50%) rotate(8deg); }
}

/* --- Lean: arm to chin support --- */
@keyframes lean-arm-chin {
  0% { transform: rotate(0deg); }
  50%, 100% { transform: rotate(-70deg) translateY(-4px); }
}

/* --- Tilt: head confused --- */
@keyframes tilt-head-confused {
  0% { transform: translateX(-50%) rotate(0deg); }
  30%, 100% { transform: translateX(-50%) rotate(15deg); }
}

/* --- Tilt: arm half raised --- */
@keyframes tilt-arm-half {
  0% { transform: rotate(0deg); }
  30%, 100% { transform: rotate(-45deg); }
}

/* --- Tilt: eye raised (one eyebrow effect) --- */
@keyframes tilt-eye-raise {
  0% { transform: translateY(0); }
  30%, 100% { transform: translateY(-3px); }
}

/* --- Typing indicator bounce --- */
@keyframes bounce-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-8px); opacity: 1; }
}


/* ============================================
   ANIMATION STATE 1: .anim-idle
   Gentle sway + periodic blink
   ============================================ */
.anim-idle .body {
  animation: idle-sway 3s ease-in-out infinite;
}

.anim-idle .eye-left,
.anim-idle .eye-right {
  animation: blink 3s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 2: .anim-wave
   Right arm waves, body leans toward waving side
   ============================================ */
.anim-wave .arm-right {
  animation: wave-arm 2s ease-in-out;
}

.anim-wave .hand-right {
  animation: wave-arm 2s ease-in-out;
}

.anim-wave .body {
  animation: wave-lean 2s ease-in-out;
}

.anim-wave .eye-left,
.anim-wave .eye-right {
  animation: blink 3s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 3: .anim-dance
   Bug 10 fix — LAYERED TIMING for chaos/hyena energy
   Every body part has different duration + delay = feels alive
   ============================================ */
.anim-dance .body {
  animation: dance-body-bounce 0.4s ease-in-out infinite;
}

.anim-dance .head {
  animation: dance-head-bob 0.3s ease-in-out infinite;
  animation-delay: 0.05s;
}

.anim-dance .arm-left {
  animation: dance-arm-flail-left 0.6s ease-in-out infinite;
}

.anim-dance .arm-right {
  animation: dance-arm-flail-right 0.6s ease-in-out infinite;
  animation-delay: 0.15s;
}

.anim-dance .hand-left {
  animation: dance-arm-flail-left 0.6s ease-in-out infinite;
}

.anim-dance .hand-right {
  animation: dance-arm-flail-right 0.6s ease-in-out infinite;
  animation-delay: 0.15s;
}

.anim-dance .legs {
  animation: dance-leg-bounce 0.4s ease-in-out infinite;
}

.anim-dance .eye-left,
.anim-dance .eye-right {
  animation: blink 1.5s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 4: .anim-think
   Head tilts right, arm to chin, eyes drift up
   Loops continuously (no timeout)
   ============================================ */
.anim-think .head {
  animation: think-head-tilt 3s ease-in-out infinite;
}

.anim-think .arm-right {
  animation: think-arm-up 0.8s ease-out forwards;
}

.anim-think .hand-right {
  animation: think-arm-up 0.8s ease-out forwards;
}

.anim-think .eye-left,
.anim-think .eye-right {
  animation: think-eyes-up 0.8s ease-out forwards;
}

.anim-think .body {
  animation: idle-sway 4s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 5: .anim-heart
   Arms rotate inward to chest, hands meet center
   Body leans forward, head tilts down tenderly
   2.5s duration
   ============================================ */
.anim-heart .arm-left {
  animation: heart-arm-left 1s ease-out forwards;
}

.anim-heart .arm-right {
  animation: heart-arm-right 1s ease-out forwards;
}

.anim-heart .hand-left {
  animation: heart-arm-left 1s ease-out forwards;
}

.anim-heart .hand-right {
  animation: heart-arm-right 1s ease-out forwards;
}

.anim-heart .body {
  animation: heart-lean 1s ease-out forwards, heart-glow 1.5s ease-in-out infinite 0.5s;
}

.anim-heart .head {
  animation: heart-head-down 1s ease-out forwards;
}

.anim-heart .eye-left,
.anim-heart .eye-right {
  animation: blink 2s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 6: .anim-clap
   Arms rapidly alternate inward 4x, body bobs
   Quick: 1.5s total
   ============================================ */
.anim-clap .arm-left {
  animation: clap-arm-left 0.19s ease-in-out 8;
}

.anim-clap .arm-right {
  animation: clap-arm-right 0.19s ease-in-out 8;
}

.anim-clap .hand-left {
  animation: clap-arm-left 0.19s ease-in-out 8;
}

.anim-clap .hand-right {
  animation: clap-arm-right 0.19s ease-in-out 8;
}

.anim-clap .body {
  animation: clap-body-bob 0.19s ease-in-out 8;
}

.anim-clap .eye-left,
.anim-clap .eye-right {
  animation: blink 3s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 7: .anim-wag
   Right arm extended, finger wag (small rotation)
   Head shakes side to side. Body stays still (she's firm)
   ============================================ */
.anim-wag .arm-right {
  animation: wag-finger 0.4s ease-in-out infinite;
}

.anim-wag .hand-right {
  animation: wag-finger 0.4s ease-in-out infinite;
}

.anim-wag .head {
  animation: wag-head-shake 0.5s ease-in-out infinite;
}

.anim-wag .eye-left,
.anim-wag .eye-right {
  animation: blink 3s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 8: .anim-lean
   Body leans forward toward screen, chin on hand
   Loops continuously
   ============================================ */
.anim-lean .body {
  animation: lean-body-forward 1s ease-out forwards;
}

.anim-lean .head {
  animation: lean-head-down 1s ease-out forwards;
}

.anim-lean .arm-right {
  animation: lean-arm-chin 1s ease-out forwards;
}

.anim-lean .hand-right {
  animation: lean-arm-chin 1s ease-out forwards;
}

.anim-lean .eye-left,
.anim-lean .eye-right {
  animation: blink 2.5s ease-in-out infinite;
}


/* ============================================
   ANIMATION STATE 9: .anim-tilt
   Head rotates 15deg (confused). Arm half raised
   Right eye raised (one-eyebrow-up effect)
   ============================================ */
.anim-tilt .head {
  animation: tilt-head-confused 0.6s ease-out forwards;
}

.anim-tilt .arm-right {
  animation: tilt-arm-half 0.6s ease-out forwards;
}

.anim-tilt .hand-right {
  animation: tilt-arm-half 0.6s ease-out forwards;
}

.anim-tilt .eye-right {
  animation: tilt-eye-raise 0.6s ease-out forwards;
}

.anim-tilt .eye-left {
  animation: blink 2s ease-in-out infinite;
}


/* ============================================
   MESSAGES — Scrollable message list
   ============================================ */
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Scrollbar */
#messages::-webkit-scrollbar {
  width: 6px;
}

#messages::-webkit-scrollbar-track {
  background: transparent;
}

#messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 3px;
}

#messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #818cf8, #a78bfa);
}


/* ============================================
   MESSAGE BUBBLES
   ============================================ */
.message {
  display: flex;
  margin-bottom: 4px;
  max-width: 80%;
}

.user-message {
  align-self: flex-end;
  justify-content: flex-end;
}

.penelope-message {
  align-self: flex-start;
  justify-content: flex-start;
}

.bubble {
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 0.85rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 75%;
}

.user-bubble {
  background: linear-gradient(135deg, #1a2040, #0f1830);
  border: 1px solid rgba(99, 102, 241, 0.15);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.penelope-bubble {
  background: linear-gradient(135deg, #2d1640, #1a0f2e);
  border: 1px solid rgba(139, 92, 246, 0.15);
  color: #fff;
  border-bottom-left-radius: 4px;
}

.error-bubble {
  background: #4a2040 !important;
  border: 1px solid #e07a7a;
}


/* ============================================
   TYPING INDICATOR — Three bouncing dots
   ============================================ */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px;
  min-height: 40px;
}

.typing-indicator .dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: bounce-dot 1.2s ease-in-out infinite;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: 0.3s;
}

/* Legacy class name support */
.typing-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 18px;
  min-height: 40px;
}

.typing-dots .dot {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: bounce-dot 1.2s ease-in-out infinite;
}

.typing-dots .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots .dot:nth-child(3) {
  animation-delay: 0.3s;
}


/* ============================================
   INPUT BAR — Bottom of chat area
   ============================================ */
#input-bar {
  display: flex;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); /* FIX 5: safe area for notched phones */
  gap: 10px;
  background: #080c18;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #e879a0, #6366f1, #e879a0) 1;
  align-items: center;
}

/* Legacy ID support */
#input-area {
  display: flex;
  padding: 12px 16px;
  gap: 10px;
  background: #080c18;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, #e879a0, #6366f1, #e879a0) 1;
  align-items: center;
}

#user-input {
  flex: 1;
  padding: 12px 16px;
  background: #0a0f1e;
  color: #eee;
  border: 1px solid #2a3a5c;
  border-radius: 24px;
  font-size: 16px; /* FIX 4: prevents iOS auto-zoom on focus */
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#user-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), 0 0 4px rgba(232, 121, 160, 0.2);
}

#user-input::placeholder {
  color: #556;
}

/* Legacy ID support */
#chat-input {
  flex: 1;
  padding: 12px 16px;
  background: #0a0f1e;
  color: #eee;
  border: 1px solid #2a3a5c;
  border-radius: 24px;
  font-size: 14px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#chat-input:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3), 0 0 4px rgba(232, 121, 160, 0.2);
}

#chat-input::placeholder {
  color: #556;
}

#send-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, #e879a0, #8b5cf6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}

#send-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5), 0 0 8px rgba(232, 121, 160, 0.3);
}

#send-btn:active {
  transform: scale(0.92);
}


/* ============================================
   LOADER AVATAR (V3) — Same character, wave anim
   Shown in the loader before app is ready
   ============================================ */
#loader #penelope,
#loader .avatar-character,
#loader-penelope {
  position: relative;
  width: 140px;
  height: 240px;
  transform-origin: center bottom;
}

/* If the loader re-uses #penelope or a clone, apply wave */
#loader #penelope .arm-right,
#loader-penelope .arm-right {
  animation: wave-arm 2s ease-in-out infinite;
}

/* -- Head (slightly oval) -- */
#loader-penelope .head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 82px;
  height: 78px;
  background: #f5c89a;
  border-radius: 50% 50% 48% 48%;
  z-index: 3;
  transform-origin: center bottom;
}

/* Cheek blush */
#loader-penelope .head::after {
  content: '';
  position: absolute;
  top: 38px;
  left: 8px;
  width: 16px;
  height: 10px;
  background: rgba(232, 121, 160, 0.25);
  border-radius: 50%;
  box-shadow: 50px 0 0 0 rgba(232, 121, 160, 0.25);
  z-index: 5;
}

/* -- Hair (blonde, feminine, flowing) -- */
#loader-penelope .hair {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  height: 52px;
  background: linear-gradient(180deg, #e8b830 0%, #d4a520 100%);
  border-radius: 50% 50% 20% 20%;
  z-index: 2;
}
#loader-penelope .hair::before {
  content: '';
  position: absolute;
  top: 28px;
  left: -10px;
  width: 26px;
  height: 72px;
  background: linear-gradient(180deg, #d4a520 0%, #c99a18 60%, #dbb030 100%);
  border-radius: 50% 40% 60% 45%;
  z-index: 1;
}
#loader-penelope .hair::after {
  content: '';
  position: absolute;
  top: 28px;
  right: -10px;
  width: 26px;
  height: 72px;
  background: linear-gradient(180deg, #d4a520 0%, #c99a18 60%, #dbb030 100%);
  border-radius: 40% 50% 45% 60%;
  z-index: 1;
}
#loader-penelope .hair-back {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 90px;
  background: linear-gradient(180deg, #c99a18 0%, #b8890f 100%);
  border-radius: 46% 46% 40% 40%;
  z-index: 1;
}

/* -- Eyes (bigger, with sclera + iris) -- */
#loader-penelope .eye-left,
#loader-penelope .eye-right {
  position: absolute;
  width: 16px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  z-index: 6;
  transform-origin: center center;
  border: 1px solid #ddd;
}
#loader-penelope .eye-left { top: 28px; left: 50%; margin-left: -20px; }
#loader-penelope .eye-right { top: 28px; left: 50%; margin-left: 6px; }

/* Iris */
#loader-penelope .eye-left::before,
#loader-penelope .eye-right::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #6b4423;
  border-radius: 50%;
}

/* Pupil + shine */
#loader-penelope .eye-left::after,
#loader-penelope .eye-right::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background: #1a1a2e;
  border-radius: 50%;
  box-shadow: 2px -1px 0 0 rgba(255,255,255,0.8);
}

/* -- Subtle lash line -- */
#loader-penelope .lash-left,
#loader-penelope .lash-right {
  position: absolute;
  width: 18px;
  height: 3px;
  border-top: 2px solid #4a3520;
  border-radius: 50% 50% 0 0;
  z-index: 7;
}
#loader-penelope .lash-left { top: 26px; left: 50%; margin-left: -21px; }
#loader-penelope .lash-right { top: 26px; left: 50%; margin-left: 5px; }

/* -- Glasses (THICK BLOCK nerd-cute) -- */
#loader-penelope .glasses {
  position: absolute;
  top: 23px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 3px;
  align-items: center;
}
#loader-penelope .glasses .lens {
  width: 26px;
  height: 20px;
  border: 3.5px solid #3d2b1a;
  border-radius: 3px;
  background: rgba(200, 220, 255, 0.05);
}
#loader-penelope .glasses .bridge {
  width: 5px;
  height: 3.5px;
  background: #3d2b1a;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8px;
}
#loader-penelope .glasses::before,
#loader-penelope .glasses::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 10px;
  height: 3px;
  background: #3d2b1a;
}
#loader-penelope .glasses::before { left: -8px; }
#loader-penelope .glasses::after { right: -8px; }

/* -- Eyebrows -- */
#loader-penelope .brow-left,
#loader-penelope .brow-right {
  position: absolute;
  width: 14px;
  height: 4px;
  border-top: 2.5px solid #7a5530;
  border-radius: 40% 60% 0 0;
  z-index: 9;
}
#loader-penelope .brow-left { top: 20px; left: 50%; margin-left: -20px; }
#loader-penelope .brow-right { top: 20px; left: 50%; margin-left: 8px; }

/* -- Lips (fuller, two-part, Kim K nude-mauve) -- */
#loader-penelope .mouth {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  z-index: 6;
}
#loader-penelope .mouth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 5px;
  background: #b07068;
  border-radius: 50% 50% 0 0;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
#loader-penelope .mouth::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 7px;
  background: #b07068;
  border-radius: 0 0 50% 50%;
}

/* -- Body (teal with V-neckline + necklace) -- */
#loader-penelope .body {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 68px;
  background: #2d8a7e;
  border-radius: 16px 16px 10px 10px;
  z-index: 2;
  transform-origin: center bottom;
}
#loader-penelope .body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid #f5c89a;
}
#loader-penelope .body::after {
  content: '';
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: #f59e0b;
  border-radius: 50%;
  border: 1px solid #d97706;
  z-index: 3;
}

/* -- Arms (siblings of body) -- */
#loader-penelope .arm-left,
#loader-penelope .arm-right {
  position: absolute;
  top: 84px;
  width: 11px;
  height: 52px;
  background: #f5c89a;
  border-radius: 6px 6px 5px 5px;
  z-index: 1;
  transform-origin: top center;
}
#loader-penelope .arm-left { left: 12px; }
#loader-penelope .arm-right {
  right: 12px;
  animation: wave-arm 2s ease-in-out infinite;
}

/* -- Hands -- */
#loader-penelope .hand-left,
#loader-penelope .hand-right {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #f5c89a;
  border-radius: 50%;
  z-index: 1;
  bottom: -6px;
}
#loader-penelope .hand-left { left: 0px; }
#loader-penelope .hand-right {
  right: 0px;
  animation: wave-arm 2s ease-in-out infinite;
}

/* -- Legs -- */
#loader-penelope .legs {
  position: absolute;
  top: 146px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  display: flex;
  justify-content: space-between;
  z-index: 1;
  transform-origin: top center;
}

#loader-penelope .legs .leg-left,
#loader-penelope .legs .leg-right {
  position: relative;
  width: 13px;
  height: 56px;
  background: #2a2a4e;
  border-radius: 6px 6px 5px 5px;
  transform-origin: top center;
}

/* Shoes (teal, matching body) */
#loader-penelope .legs .leg-left::after,
#loader-penelope .legs .leg-right::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 15px;
  height: 10px;
  background: #2d8a7e;
  border-radius: 4px 4px 6px 6px;
}

#loader-penelope .legs .leg-left::after {
  left: -1px;
}

#loader-penelope .legs .leg-right::after {
  right: -1px;
}


/* ============================================
   MOBILE RESPONSIVE — Bug 8 fix
   Avatar shrinks on small viewports / keyboard open
   ============================================ */

/* Small height (keyboard open, short screens) — FIX 2: avatar scaling */
@media (max-height: 600px) {
  #avatar-area {
    flex: 0 0 30vh;
  }

  #penelope {
    transform: scale(0.6);
  }

  #loader-penelope {
    transform: scale(0.6);
  }
}

/* Narrow screens — FIX 2: avatar scaling for mobile */
@media (max-width: 480px) {
  #avatar-area {
    flex: 0 0 35%;
  }

  #penelope {
    transform: scale(0.65);
  }

  #loader-penelope {
    transform: scale(0.65);
  }

  #chat-area {
    flex: 1 1 auto;
    min-height: 0;
  }

  #app {
    max-width: 100%;
  }

  .bubble {
    font-size: 0.9rem;
    max-width: 85%;
  }

  .message {
    max-width: 90%;
  }

  #input-bar,
  #input-area {
    padding: 8px 12px;
  }
}

/* Very narrow screens — FIX 2 + FIX 6 */
@media (max-width: 360px) {
  #penelope {
    transform: scale(0.55);
  }

  #loader-penelope {
    transform: scale(0.55);
  }

  #avatar-area {
    flex: 0 0 30%;
  }

  #chat-area {
    flex: 1 1 auto;
    min-height: 0;
  }

  .bubble {
    font-size: 0.85rem;
    padding: 8px 12px;
  }

  #send-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* FIX 6: Pentagon panel on very narrow screens */
  #task-panel {
    right: 8px;
    width: calc(100vw - 16px);
    max-width: 280px;
  }
}

/* Very short + narrow combo (landscape phone, keyboard open) */
@media (max-height: 400px) {
  #avatar-area {
    flex: 0 0 25vh;
  }

  #penelope {
    transform: scale(0.45);
  }

  #loader-penelope {
    transform: scale(0.45);
  }
}

/* Wide/desktop: cap width */
@media (min-width: 601px) {
  #app {
    max-width: 600px;
  }
}


/* ============================================
   PENTAGON BUTTON + TASK PANEL
   ============================================ */
#pentagon-btn {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #e879a0, #8b5cf6);
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  z-index: 900;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#pentagon-btn:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5), 0 0 8px rgba(232, 121, 160, 0.3);
}

#pentagon-btn:active {
  transform: scale(0.92);
}

#task-panel {
  position: fixed;
  top: 68px;
  right: 16px;
  width: 280px;
  background: #0f1628;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 12px;
  padding: 16px;
  z-index: 899;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 16px rgba(139, 92, 246, 0.1);
}

#task-panel.task-panel-hidden {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;
}

.task-panel-header {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(90deg, #e879a0, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.task-row input[type="checkbox"] {
  accent-color: #8b5cf6;
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.task-row input[type="checkbox"]:checked + .task-label {
  text-decoration: line-through;
  opacity: 0.5;
}

.task-label {
  font-size: 0.85rem;
  color: #ccc;
  line-height: 1.3;
}

.task-future .task-label {
  color: #667;
  font-style: italic;
}

.task-progress-wrap {
  margin-top: 14px;
  height: 6px;
  background: #080c18;
  border-radius: 3px;
  overflow: hidden;
}

.task-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8b5cf6, #e879a0, #6366f1);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.task-progress-text {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #667;
  text-align: right;
}

/* "Show Guide" button in task panel */
#show-guide-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 8px 0;
  background: transparent;
  color: #8b5cf6;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

#show-guide-btn:hover {
  background: linear-gradient(135deg, #e879a0, #8b5cf6);
  color: #fff;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}


/* ============================================
   MIC BUTTON — Voice input (Web Speech API)
   ============================================ */
#mic-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(139, 92, 246, 0.3);
  border-radius: 50%;
  background: #1a1a3e;
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  position: relative;
}

#mic-btn:hover {
  transform: scale(1.1);
  background: #1a1a3e;
  border-color: #8b5cf6;
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
}

#mic-btn.mic-active {
  background: #ef4444;
  animation: mic-pulse 1s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

.mic-timer-hidden {
  display: none !important;
}

#mic-timer {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ef4444;
  color: #fff;
  font-size: 0.6rem;
  padding: 2px 4px;
  border-radius: 8px;
  font-weight: 700;
  min-width: 28px;
  text-align: center;
  pointer-events: none;
}

/* Mic button responsive — match send button scaling */
@media (max-width: 360px) {
  #mic-btn {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}


/* ============================================
   COMMAND CARDS — Onboarding overlay
   ============================================ */
.cc-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 15, 0.92);
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.cc-backdrop.cc-visible {
  opacity: 1;
}

.cc-backdrop.cc-fade-in {
  animation: cc-fade-in 0.4s ease forwards;
}

@keyframes cc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cc-backdrop.cc-fade-out {
  animation: cc-fade-out 0.4s ease forwards;
}

@keyframes cc-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.cc-container {
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* FIX 3: smooth scroll on iOS */
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: #2a3a5c transparent;
}

.cc-container::-webkit-scrollbar {
  width: 5px;
}

.cc-container::-webkit-scrollbar-track {
  background: transparent;
}

.cc-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
  border-radius: 3px;
}

.cc-main-title {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #e879a0, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
}

.cc-subtitle {
  text-align: center;
  font-size: 0.9rem;
  color: #8899aa;
  margin-top: -8px;
  margin-bottom: 6px;
}

.cc-card {
  background: linear-gradient(135deg, #12182e, #0f1628);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 14px;
  padding: 16px 18px;
  animation: cc-card-in 0.4s ease both;
  box-shadow: 0 2px 12px rgba(139, 92, 246, 0.08);
}

@keyframes cc-card-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cc-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #c084fc;
  margin-bottom: 6px;
}

.cc-card-desc {
  font-size: 0.88rem;
  color: #ccd;
  line-height: 1.5;
  margin-bottom: 6px;
}

.cc-card-example {
  font-size: 0.82rem;
  color: #8899aa;
  font-style: italic;
  line-height: 1.4;
  padding-left: 10px;
  border-left: 2px solid rgba(139, 92, 246, 0.4);
}

.cc-dismiss-btn {
  display: block;
  width: 100%;
  padding: 14px 0;
  margin-top: 8px;
  background: linear-gradient(135deg, #e879a0, #8b5cf6);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.3px;
}

.cc-dismiss-btn:hover {
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5), 0 0 8px rgba(232, 121, 160, 0.3);
  transform: scale(1.02);
}

.cc-dismiss-btn:active {
  transform: scale(0.97);
}


/* ============================================
   FIX 1: MOBILE KEYBOARD HANDLING
   When keyboard is open, viewport height shrinks drastically
   ============================================ */
@media (max-height: 500px) {
  #avatar-area {
    flex: 0 0 20vh;
  }

  #penelope {
    transform: scale(0.5);
  }

  #loader-penelope {
    transform: scale(0.5);
  }
}


/* ============================================
   FIX 7: TOUCH ACTIVE STATES
   Tap feedback on mobile buttons
   ============================================ */
#send-btn:active,
#mic-btn:active {
  transform: scale(0.9);
  opacity: 0.8;
}

#pentagon-btn:active {
  transform: scale(0.9);
}


/* ============================================
   FIX 10: LANDSCAPE ORIENTATION
   Phones held sideways — very short viewport
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
  #avatar-area {
    flex: 0 0 30%;
  }

  #penelope {
    transform: scale(0.45);
  }

  #loader-penelope {
    transform: scale(0.45);
  }

  #chat-area {
    flex: 1;
  }
}