:root {
  --panda-brand-green: #1f9d5b;
  --panda-bubble-bg: #ffffff;
  --panda-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.panda-coach .d-none {
  display: none !important;
}

.panda-coach {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.panda-coach-inner {
  background: linear-gradient(160deg, #fffdf5 0%, #f3fbff 100%);
  border-color: #cfe8d9 !important;
  box-shadow: 0 8px 18px rgba(31, 157, 91, 0.08);
}

.panda-coach-media {
  width: 96px;
  position: relative;
  overflow: visible;
}

.panda-coach-lottie,
.panda-coach-image,
.panda-coach-sprite {
  width: 96px;
  height: 96px;
  display: block;
}

.panda-coach-sprite.panda-coach-sprite-layer {
  opacity: 1;
  transition: opacity 140ms linear;
}

.panda-coach-sprite.sprite-reset {
  /* Legacy: kept for safety, no longer used by JS. */
  animation: none !important;
  background-position: 0 0 !important;
}

.panda-coach-image {
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.14));
}

.panda-coach-message {
  font-size: 0.98rem;
  line-height: 1.4;
  color: #143a27;
}

.panda-coach-image.animated {
  animation: panda-idle-bob 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}

.panda-coach-image.state-wave.animated {
  animation: panda-wave-bob 1.8s ease-in-out infinite;
}

.panda-coach-image.state-point.animated {
  animation: panda-point-bob 1.4s ease-in-out infinite;
}

.panda-coach-image.state-think.animated {
  animation: panda-think-bob 2.6s ease-in-out infinite;
}

.panda-coach-image.state-celebrate.animated {
  animation: panda-celebrate-bob 1s ease-in-out infinite;
}

@keyframes panda-idle-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.02); }
}

@keyframes panda-wave-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-2px) rotate(-4deg); }
  75% { transform: translateY(-2px) rotate(4deg); }
}

@keyframes panda-point-bob {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-3px) translateX(3px); }
}

@keyframes panda-think-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1px) rotate(-2deg); }
}

@keyframes panda-celebrate-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

.panda-helper-blink {
  position: absolute;
  left: 20px;
  top: 44px;
  width: 56px;
  height: 12px;
  pointer-events: none;
}

.panda-helper-blink::before,
.panda-helper-blink::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 18px;
  height: 3px;
  background: rgba(26, 26, 26, 0.82);
  border-radius: 999px;
}

.panda-helper-blink::before { left: 2px; }
.panda-helper-blink::after { right: 2px; }


.panda-coach.panda-helper-floating .panda-helper-blink {
  display: none !important;
  left: 28px;
  top: 60px;
  width: 78px;
  height: 16px;
}

.panda-coach.panda-helper-floating .panda-helper-blink::before,
.panda-coach.panda-helper-floating .panda-helper-blink::after {
  top: 7px;
  width: 24px;
  height: 4px;
}

.panda-coach.panda-helper-floating .panda-helper-blink::before { left: 4px; }
.panda-coach.panda-helper-floating .panda-helper-blink::after { right: 4px; }.panda-helper-camera {
  position: absolute;
  right: 10px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #b8e2c8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.panda-coach.panda-helper-floating {
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(430px, calc(100vw - 24px));
  margin: 0;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  will-change: left, opacity;
  transition: left 540ms cubic-bezier(0.18, 0.92, 0.22, 1);
}

.panda-coach.panda-helper-floating.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.panda-coach.panda-helper-floating.panda-helper-centered {
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  will-change: opacity;
  transition: opacity 180ms linear;
}

.panda-helper-motion {
  transform: translateY(175px) translateZ(0);
  transition: transform 620ms cubic-bezier(0.18, 0.92, 0.22, 1);
  will-change: transform;
}

.panda-coach.panda-helper-floating.is-visible .panda-helper-motion {
  transform: translateY(0) translateZ(0);
}

.panda-coach.panda-helper-floating.is-pre-roll .panda-helper-motion {
  transform: translateY(220px) translateZ(0);
}

.panda-coach.panda-helper-floating.panda-helper-centered .panda-helper-motion {
  transform: translateX(-50%) translateY(0) translateZ(0);
}

.panda-coach.panda-helper-floating.panda-helper-centered.is-visible .panda-helper-motion {
  transform: translateX(-50%) translateY(0) translateZ(0);
}

.panda-coach.panda-helper-floating.panda-helper-centered.is-pre-roll .panda-helper-motion {
  transform: translateX(-50%) translateY(0) translateZ(0);
}

.panda-coach.panda-helper-floating.helper-roll-travel {
  transition: left 3560ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panda-helper-move {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* "Wave" for the seated helper: keep sprite art consistent, sell the greeting with a gentle sway. */
.panda-coach.panda-helper-floating.helper-sit-wave .panda-helper-move {
  animation: panda-helper-sit-wave 1.25s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes panda-helper-sit-wave {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  30% { transform: translate3d(0, -4px, 0) rotate(-5deg); }
  70% { transform: translate3d(0, -3px, 0) rotate(5deg); }
}

/* Stand-up pop: small lift and settle (used before waving hello). */
.panda-coach.panda-helper-floating.helper-standup .panda-helper-move {
  animation: panda-helper-standup 900ms cubic-bezier(0.18, 0.92, 0.22, 1) 1;
  transform-origin: 50% 100%;
}

@keyframes panda-helper-standup {
  0% { transform: translate3d(0, 0, 0) scale(0.98); }
  55% { transform: translate3d(0, -18px, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1.0); }
}

.panda-coach.panda-helper-floating.helper-jump-target .panda-helper-move {
  animation: panda-helper-jump-target 1350ms cubic-bezier(0.18, 0.92, 0.22, 1) 1;
}

@keyframes panda-helper-jump-target {
  0% { transform: translate3d(0, 0, 0); }
  45% { transform: translate3d(calc(var(--panda-jump-x) * 0.6), calc((var(--panda-jump-y) * 0.6) - 90px), 0); }
  70% { transform: translate3d(var(--panda-jump-x), var(--panda-jump-y), 0); }
  82% { transform: translate3d(var(--panda-jump-x), var(--panda-jump-y), 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.panda-coach.panda-helper-floating .panda-coach-inner {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none;
  padding: 0 !important;
  gap: 12px !important;
  align-items: flex-end !important;
}

.panda-coach.panda-helper-floating .panda-coach-media {
  width: 180px;
  height: 180px;
  overflow: visible;
}

.panda-coach.panda-helper-floating .panda-coach-lottie,
.panda-coach.panda-helper-floating .panda-coach-image,
.panda-coach.panda-helper-floating .panda-coach-sprite {
  width: 180px;
  height: 180px;
}

.panda-coach.panda-helper-floating {
  /* Render sprites at native 256px frames to avoid subpixel bleed, then scale down. */
  --panda-helper-scale: 0.703125; /* 180/256 */
}

.panda-coach.panda-helper-floating .panda-coach-sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 256px;
  height: 256px;
  transform: scale(var(--panda-helper-scale));
  transform-origin: left bottom;
  will-change: transform, background-position;
  backface-visibility: hidden;
}

.panda-coach.panda-helper-floating .panda-coach-content {
  max-width: min(274px, calc(100vw - 224px));
  display: none;
}

.panda-coach.panda-helper-floating.show-bubble .panda-coach-content {
  display: none;
}

.panda-coach.panda-helper-floating .panda-coach-message {
  position: relative;
  margin: 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--panda-bubble-bg);
  border: 2px solid #cde7d8;
  box-shadow: var(--panda-shadow);
  font-size: 1.02rem;
  font-weight: 600;
  color: #104f2f;
}

.panda-coach.panda-helper-floating .panda-coach-message::after {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 18px;
  width: 16px;
  height: 16px;
  background: var(--panda-bubble-bg);
  border-left: 2px solid #cde7d8;
  border-bottom: 2px solid #cde7d8;
  transform: rotate(32deg);
}

.panda-coach.panda-helper-floating .panda-coach-dismiss {
  position: absolute;
  right: 0;
  top: -4px;
  background: rgba(255, 255, 255, 0.88);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.panda-coach.panda-helper-floating.helper-jump {
  animation: panda-helper-jump 0.58s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.panda-coach.panda-helper-floating.helper-roll-in .panda-coach-media {
  animation: none;
}

.panda-coach.panda-helper-floating.helper-roll-in .panda-coach-image {
  animation: none !important;
}

@keyframes panda-helper-jump {
  0% { transform: translateY(0); }
  35% { transform: translateY(-24px); }
  60% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

.panda-coach-sprite.roll-frames {
  background-repeat: no-repeat;
  background-size: 3072px 256px;
  background-position: 0 0;
  transform-origin: center center;
  animation: panda-roll-frames 3.6s steps(12, end) 1 forwards;
}

@keyframes panda-roll-frames {
  from { background-position: 0 0; }
  /* 12 frames: advance 12 * 256px in 12 discrete steps (each step is 256px). */
  to { background-position: -3072px 0; }
}

.panda-coach-sprite.wave-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: panda-wave-frames 2.8s steps(8, end) 1 forwards;
}

.panda-coach-sprite.idle-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: panda-idle-frames 5.0s steps(8, end) infinite;
}

@keyframes panda-wave-frames {
  from { background-position: 0 0; }
  /* 8 frames: advance 8 * 256px in 8 discrete steps (each step is 256px). */
  to { background-position: -2048px 0; }
}

@keyframes panda-idle-frames {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

.panda-coach-sprite.jump-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: panda-jump-frames 1.35s steps(8, end) 1 forwards;
}

@keyframes panda-jump-frames {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

/* Intro (ingredients screen): sit cross-legged, stand up. */
.panda-coach-sprite.sitstand-hold,
.panda-coach-sprite.sitstand-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
}

.panda-coach-sprite.sitstand-frames {
  animation: panda-sitstand-frames 1.6s steps(8, end) 1 forwards;
}

@keyframes panda-sitstand-frames {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

/* Seated idle loop (ingredients screen): chubby breathing + blinks. */
.panda-coach-sprite.sitidle-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: panda-sitidle-frames 5.2s steps(8, end) infinite;
}

@keyframes panda-sitidle-frames {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

/* Helper: ingredient scanning animation (uses new sprite sheet). */
.panda-coach-sprite.scan-frames {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: panda-scan-frames 1.8s steps(8, end) infinite;
}

.panda-coach-sprite.scan-hold {
  background-repeat: no-repeat;
  background-size: 2048px 256px;
  background-position: 0 0;
  animation: none !important;
}

@keyframes panda-scan-frames {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

/* Extra "cutting-edge" scan FX around the helper panda during extraction. */
.panda-coach.panda-helper-floating.panda-processing .panda-coach-media::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 118px;
  height: 118px;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.0) 70%);
  filter: blur(0.2px);
  opacity: 0.9;
  pointer-events: none;
  animation: panda-scan-glow 1.35s ease-in-out infinite;
}

.panda-coach.panda-helper-floating.panda-processing .panda-coach-media::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 22px;
  width: 98px;
  height: 64px;
  background:
    linear-gradient(130deg, rgba(34, 197, 94, 0.0), rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.0));
  border-radius: 18px;
  transform: rotate(-8deg);
  opacity: 0.75;
  mix-blend-mode: multiply;
  pointer-events: none;
  animation: panda-scan-beam 1.35s ease-in-out infinite;
}

@keyframes panda-scan-glow {
  0%, 100% { transform: translateX(-50%) scale(0.96); opacity: 0.55; }
  50% { transform: translateX(-50%) scale(1.02); opacity: 0.95; }
}

@keyframes panda-scan-beam {
  0% { opacity: 0.15; filter: blur(1.2px); }
  45% { opacity: 0.9; filter: blur(0.4px); }
  100% { opacity: 0.18; filter: blur(1.1px); }
}

/* Take Photo CTA emphasis */
.panda-photo-cta {
  animation: panda-cta-ring 1.2s ease-out 2;
}

@keyframes panda-cta-ring {
  0% { box-shadow: 0 0 0 0 rgba(31, 157, 91, 0.55); }
  100% { box-shadow: 0 0 0 18px rgba(31, 157, 91, 0); }
}

.panda-cta-press {
  animation: panda-cta-press 220ms ease-out 1;
}

@keyframes panda-cta-press {
  0% { transform: scale(1); }
  35% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Helper-only: single-sheet sequence to eliminate transition flashes (roll -> wave -> idle). */
.panda-coach-sprite.seq-frames {
  background-repeat: no-repeat;
  background-size: 7168px 256px;
  background-position: 0 0;
  animation:
    panda-seq-rollwave 6.3s steps(20, end) 1 forwards,
    panda-seq-idle 3.2s steps(8, end) infinite 6.3s;
}

@keyframes panda-seq-rollwave {
  from { background-position: 0 0; }
  to { background-position: -5120px 0; } /* (20 * 256) */
}

@keyframes panda-seq-idle {
  from { background-position: -5120px 0; }
  to { background-position: -7168px 0; } /* (28 * 256) */
}

/* Ingredients helper: single master sheet (52 frames) to eliminate transition flashes and size jitter. */
.panda-coach-sprite.master-frames {
  background-repeat: no-repeat;
  background-size: 13312px 256px; /* 52 * 256 */
  background-position: 0 0;
}

/* Segment offsets (8 frames each, with 4 blend frames between wave and idle):
   0: sitidle, 8: sitstand, 16: wave, 24: blend, 28: idle, 36: scan, 44: jump */

.panda-coach-sprite.master-sitidle {
  animation: panda-master-sitidle 5.2s steps(8, end) infinite;
}

.panda-coach-sprite.master-sitstand {
  animation: panda-master-sitstand 1.6s steps(8, end) 1 forwards;
}

.panda-coach-sprite.master-wave {
  animation: panda-master-wave 2.8s steps(8, end) 1 forwards;
}

.panda-coach-sprite.master-idle {
  animation: panda-master-idle 5.0s steps(8, end) infinite;
}

.panda-coach-sprite.master-scan {
  animation: panda-master-scan 1.8s steps(8, end) infinite;
}

.panda-coach-sprite.master-jump {
  animation: panda-master-jump 1.35s steps(8, end) 1 forwards;
}

@keyframes panda-master-sitidle {
  from { background-position: 0 0; }
  to { background-position: -2048px 0; }
}

@keyframes panda-master-sitstand {
  from { background-position: -2048px 0; }   /* 8 * 256 */
  to { background-position: -4096px 0; }     /* 16 * 256 */
}

@keyframes panda-master-wave {
  from { background-position: -4096px 0; }   /* 16 * 256 */
  to { background-position: -6144px 0; }     /* 24 * 256 */
}

@keyframes panda-master-idle {
  from { background-position: -7168px 0; }   /* 28 * 256 */
  to { background-position: -9216px 0; }     /* 36 * 256 */
}

@keyframes panda-master-scan {
  from { background-position: -9216px 0; }   /* 36 * 256 */
  to { background-position: -11264px 0; }    /* 44 * 256 */
}

@keyframes panda-master-jump {
  from { background-position: -11264px 0; }  /* 44 * 256 */
  to { background-position: -13312px 0; }    /* 52 * 256 */
}

.panda-coach.panda-helper-floating.camera-pop .panda-helper-camera {
  animation: panda-camera-pop 420ms cubic-bezier(0.21, 0.95, 0.26, 1);
}

@keyframes panda-camera-pop {
  0% { transform: translateY(18px) translateX(6px) scale(0.2); opacity: 0; }
  70% { transform: translateY(-6px) translateX(0) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 1; }
}

.panda-touch-hint {
  animation: panda-target-pulse 720ms ease-out 2;
}

@keyframes panda-target-pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 157, 91, 0.45); }
  100% { box-shadow: 0 0 0 16px rgba(31, 157, 91, 0); }
}

@media (max-width: 576px) {
  .panda-coach.panda-helper-floating {
    width: min(100vw - 14px, 410px);
    left: max(7px, env(safe-area-inset-left));
    --panda-helper-scale: 0.59375; /* 152/256 */
  }

  .panda-coach.panda-helper-floating.panda-helper-centered {
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom));
  }

  .panda-coach.panda-helper-floating .panda-coach-media {
    width: 152px;
    height: 152px;
  }

  .panda-coach.panda-helper-floating .panda-coach-lottie,
  .panda-coach.panda-helper-floating .panda-coach-image,
  .panda-coach.panda-helper-floating .panda-coach-sprite {
    width: 152px;
    height: 152px;
  }

  /* Keep sprite sheets at native frame size; scale via transform only. */
  .panda-coach.panda-helper-floating .panda-coach-sprite {
    width: 256px;
    height: 256px;
  }

  .panda-coach.panda-helper-floating .panda-coach-content {
    max-width: min(240px, calc(100vw - 190px));
  }

  .panda-coach.panda-helper-floating .panda-coach-message {
    font-size: 0.95rem;
    padding: 10px 12px;
  }
}

@media (max-width: 380px) {
  .panda-coach.panda-helper-floating {
    --panda-helper-scale: 0.515625; /* 132/256 */
  }

  .panda-coach.panda-helper-floating .panda-coach-media {
    width: 132px;
    height: 132px;
  }

  .panda-coach.panda-helper-floating .panda-coach-lottie,
  .panda-coach.panda-helper-floating .panda-coach-image,
  .panda-coach.panda-helper-floating .panda-coach-sprite {
    width: 132px;
    height: 132px;
  }

  /* Keep sprite sheets at native frame size; scale via transform only. */
  .panda-coach.panda-helper-floating .panda-coach-sprite {
    width: 256px;
    height: 256px;
  }

  .panda-coach.panda-helper-floating.panda-helper-centered {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .panda-coach-image.animated,
  .panda-coach-sprite.playing,
  .panda-coach.panda-helper-floating,
  .panda-touch-hint,
  .panda-coach.panda-helper-floating.helper-roll-in .panda-coach-media,
  .panda-coach.panda-helper-floating.camera-pop .panda-helper-camera,
  .panda-coach-sprite.roll-frames {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}