/* Lightweight, image-based FitAI assistant for non-Indoor pages. */
.mascot-assistant {
  --mascot-gold: #e3b64f;
  --mascot-navy: #07182f;
  --mascot-drag-x: 0px;
  --mascot-drag-y: 0px;
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 2400;
  display: grid;
  justify-items: end;
  width: min(330px, calc(100vw - 28px));
  max-width: calc(100vw - 16px);
  pointer-events: none;
  transform: translate3d(var(--mascot-drag-x), var(--mascot-drag-y), 0);
  will-change: transform;
}

.mascot-assistant[hidden],
.mascot-assistant__bubble[hidden] {
  display: none !important;
}

.mascot-assistant__bubble {
  position: relative;
  width: min(310px, calc(100vw - 32px));
  margin: 0 8px -10px 0;
  padding: 17px 18px 15px;
  color: #10213d;
  background: rgba(255, 250, 239, 0.98);
  border: 2px solid rgba(216, 167, 59, 0.9);
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 18px 44px rgba(0, 9, 27, 0.32);
  pointer-events: auto;
  animation: mascot-bubble-in 220ms ease-out both;
}

.mascot-assistant__bubble::after {
  content: "";
  position: absolute;
  right: 25px;
  bottom: -11px;
  width: 18px;
  height: 18px;
  background: #fffaf0;
  border-right: 2px solid rgba(216, 167, 59, 0.9);
  border-bottom: 2px solid rgba(216, 167, 59, 0.9);
  transform: rotate(45deg);
}

.mascot-assistant__kicker {
  display: block;
  margin-bottom: 5px;
  color: #8b641d;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.mascot-assistant__bubble p {
  min-height: 42px;
  margin: 0 24px 12px 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.45;
}

.mascot-assistant__close {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: #526078;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.mascot-assistant__close:hover,
.mascot-assistant__close:focus-visible {
  color: #0b1d3a;
  background: rgba(11, 29, 58, 0.08);
}

.mascot-assistant__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mascot-assistant__actions button {
  min-height: 31px;
  padding: 6px 10px;
  color: #142644;
  background: #f7e8c1;
  border: 1px solid rgba(151, 109, 27, 0.3);
  border-radius: 999px;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}

.mascot-assistant__actions button:hover,
.mascot-assistant__actions button:focus-visible {
  color: #fff8e9;
  background: #17365f;
  border-color: #17365f;
}

.mascot-assistant__character {
  position: relative;
  width: 158px;
  height: 174px;
  pointer-events: auto;
  touch-action: none;
}

.mascot-assistant.is-draggable .mascot-assistant__character {
  cursor: grab;
}

.mascot-assistant.is-dragging {
  z-index: 2500;
  user-select: none;
}

.mascot-assistant.is-dragging .mascot-assistant__character {
  cursor: grabbing;
}

.mascot-assistant__trigger {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 45% 45% 25% 25%;
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}

.mascot-assistant:not(.is-draggable) .mascot-assistant__trigger {
  cursor: pointer;
}

.mascot-assistant__trigger::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 12%;
  bottom: 5px;
  height: 15px;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0, 8, 24, 0.36);
  filter: blur(6px);
  transform-origin: 50% 50%;
  transition: transform 160ms ease, opacity 160ms ease, filter 160ms ease, background 160ms ease;
}

.mascot-assistant__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 8px 9px rgba(0, 8, 24, 0.35));
  transform-origin: 50% 92%;
  transition: transform 180ms ease, filter 180ms ease, opacity 120ms ease;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.mascot-assistant.is-breathing:not(:hover):not(:focus-within):not(.is-reacting):not(.is-waving):not(.is-jumping):not(.is-tipping):not(.is-clapping):not(.is-punching):not(.is-exhausting):not(.is-thinking):not(.is-dragging) .mascot-assistant__image {
  animation: mascot-idle-breathe 4s ease-in-out infinite;
}

.mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant__trigger:focus-visible .mascot-assistant__image {
  transform: translateY(-5px) scale(1.035);
  filter: drop-shadow(0 12px 11px rgba(0, 8, 24, 0.42));
}

.mascot-assistant.is-waving .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-waving .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-jumping .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-jumping .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-tipping .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-tipping .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-clapping .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-clapping .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-punching .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-punching .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-exhausting .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-exhausting .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-thinking .mascot-assistant__trigger:hover .mascot-assistant__image,
.mascot-assistant.is-thinking .mascot-assistant__trigger:focus-visible .mascot-assistant__image,
.mascot-assistant.is-dragging .mascot-assistant__trigger:hover .mascot-assistant__image {
  transform: none;
  filter: drop-shadow(0 8px 9px rgba(0, 8, 24, 0.35));
}

.mascot-assistant__trigger:focus-visible {
  outline: 3px solid var(--mascot-gold);
  outline-offset: 3px;
}

.mascot-assistant__hint {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 5px 9px;
  color: #fff8e8;
  background: rgba(7, 24, 47, 0.94);
  border: 1px solid rgba(227, 182, 79, 0.7);
  border-radius: 999px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
}

.mascot-assistant.is-open .mascot-assistant__hint,
.mascot-assistant.is-dragging .mascot-assistant__hint {
  opacity: 0;
  transform: translateY(4px);
}

.mascot-assistant__voice {
  position: absolute;
  right: 2px;
  top: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  background: #fff9eb;
  border: 2px solid rgba(216, 167, 59, 0.9);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 8, 24, 0.28);
  cursor: pointer;
  pointer-events: auto;
}

.mascot-assistant__mic {
  position: absolute;
  left: 2px;
  top: 18px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  color: #10213d;
  background: #fff9eb;
  border: 2px solid rgba(216, 167, 59, 0.9);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 8, 24, 0.28);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.mascot-assistant__mic:hover,
.mascot-assistant__mic:focus-visible,
.mascot-assistant__voice:hover,
.mascot-assistant__voice:focus-visible {
  transform: scale(1.07);
  outline: 2px solid #fff9eb;
  outline-offset: 2px;
}

.mascot-assistant__mic.is-recording {
  color: #fff8ef;
  background: #c23b3b;
  border-color: #8f1f1f;
  animation: mascot-mic-pulse 1s ease-in-out infinite;
}

.mascot-assistant__mic.is-busy {
  opacity: 0.72;
  cursor: wait;
}

@keyframes mascot-mic-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.mascot-assistant__voice:hover,
.mascot-assistant__voice:focus-visible {
  transform: scale(1.07);
  outline: 2px solid #fff9eb;
  outline-offset: 2px;
}

/* Wave click-jump state machine (~1300ms). */
.mascot-assistant.is-wave-anticipating .mascot-assistant__image {
  transform: translateY(5px) scale(0.93, 0.9);
  transition: transform 140ms ease-in;
}

.mascot-assistant.is-wave-anticipating .mascot-assistant__trigger::after {
  transform: scaleX(1.18) scaleY(0.92);
  background: rgba(0, 8, 24, 0.42);
}

.mascot-assistant.is-wave-airborne .mascot-assistant__image {
  transform: translateY(-19px) scale(1.04) rotate(-2deg);
  transition: transform 190ms cubic-bezier(0.2, 0.85, 0.3, 1);
  filter: drop-shadow(0 14px 12px rgba(0, 8, 24, 0.22));
}

.mascot-assistant.is-wave-airborne .mascot-assistant__trigger::after {
  opacity: 0.28;
  transform: scaleX(0.62) scaleY(0.7);
  background: rgba(0, 8, 24, 0.18);
  filter: blur(8px);
}

.mascot-assistant.is-wave-landing .mascot-assistant__image {
  transform: translateY(3px) scale(0.94, 0.9);
  transition: transform 160ms ease-in;
  filter: drop-shadow(0 6px 7px rgba(0, 8, 24, 0.4));
}

.mascot-assistant.is-wave-landing .mascot-assistant__trigger::after {
  opacity: 0.55;
  transform: scaleX(1.28) scaleY(0.85);
  background: rgba(0, 8, 24, 0.48);
  filter: blur(5px);
}

.mascot-assistant.is-wave-settling .mascot-assistant__image {
  transform: translateY(-3.5px) scale(1.01);
  transition: transform 180ms ease-out;
}

.mascot-assistant.is-wave-settling .mascot-assistant__trigger::after {
  opacity: 1;
  transform: scale(1);
  background: rgba(0, 8, 24, 0.36);
  filter: blur(6px);
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="excited"] {
  animation: mascot-celebrate 650ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="celebrate"] {
  animation: mascot-celebrate 650ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="thumbsUp"] {
  animation: mascot-heart 900ms ease-in-out 2;
}

.mascot-assistant.is-reacting:not(.is-clapping) .mascot-assistant__image[data-state="clap"] {
  animation: mascot-clap 420ms ease-in-out 3;
}

.mascot-assistant.is-reacting:not(.is-punching) .mascot-assistant__image[data-state="fighting"] {
  animation: mascot-fight 520ms ease-in-out 3;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="surprised"] {
  animation: mascot-surprise 700ms ease-out 1;
}

.mascot-assistant.is-reacting:not(.is-exhausting) .mascot-assistant__image[data-state="exhausted"] {
  animation: mascot-breathe 1800ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="sad"] {
  animation: mascot-sad 1100ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="wink"] {
  animation: mascot-heart 900ms ease-in-out 2;
}

.mascot-assistant.is-reacting:not(.is-waving) .mascot-assistant__image[data-state="wave"] {
  animation: mascot-wave 520ms ease-in-out 3;
}

.mascot-assistant.is-reacting:not(.is-thinking) .mascot-assistant__image[data-state="thinking"] {
  animation: mascot-think 900ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="running"] {
  animation: mascot-run 520ms ease-in-out 3;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="heart"] {
  animation: mascot-heart 900ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="calm"] {
  animation: mascot-breathe 1800ms ease-in-out 2;
}

.mascot-assistant.is-reacting:not(.is-tipping) .mascot-assistant__image[data-state="pointing"] {
  animation: mascot-point 700ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="stretching"] {
  animation: mascot-stretch 1400ms ease-in-out 2;
}

.mascot-assistant.is-reacting .mascot-assistant__image[data-state="crouch"] {
  animation: mascot-crouch 900ms ease-in-out 2;
}

.mascot-assistant.is-reacting:not(.is-jumping) .mascot-assistant__image[data-state="jumping"] {
  animation: mascot-pose-jump 520ms ease-in-out 3;
}

/* Jump multi-frame sequence (~1180ms): crouch -> takeoff -> peak -> land. */
.mascot-assistant.is-jump-anticipating .mascot-assistant__image {
  transform: translateY(6px) scale(0.94, 0.88);
  transition: transform 160ms ease-in;
}

.mascot-assistant.is-jump-anticipating .mascot-assistant__trigger::after {
  transform: scaleX(1.22) scaleY(0.9);
  background: rgba(0, 8, 24, 0.44);
}

.mascot-assistant.is-jump-airborne .mascot-assistant__image {
  transform: translateY(-22px) scale(1.05);
  transition: transform 200ms cubic-bezier(0.2, 0.85, 0.3, 1);
  filter: drop-shadow(0 16px 12px rgba(0, 8, 24, 0.2));
}

.mascot-assistant.is-jump-airborne .mascot-assistant__trigger::after {
  opacity: 0.24;
  transform: scaleX(0.55) scaleY(0.65);
  background: rgba(0, 8, 24, 0.16);
  filter: blur(8px);
}

.mascot-assistant.is-jump-landing .mascot-assistant__image {
  transform: translateY(4px) scale(0.95, 0.9);
  transition: transform 170ms ease-in;
  filter: drop-shadow(0 6px 7px rgba(0, 8, 24, 0.4));
}

.mascot-assistant.is-jump-landing .mascot-assistant__trigger::after {
  opacity: 0.58;
  transform: scaleX(1.3) scaleY(0.84);
  background: rgba(0, 8, 24, 0.5);
  filter: blur(5px);
}

.mascot-assistant.is-jump-settling .mascot-assistant__image {
  transform: translateY(-3px) scale(1.01);
  transition: transform 180ms ease-out;
}

.mascot-assistant.is-jump-settling .mascot-assistant__trigger::after {
  opacity: 1;
  transform: scale(1);
  background: rgba(0, 8, 24, 0.36);
  filter: blur(6px);
}

/* Tip sequence: raise finger, lean, wink, hold. */
.mascot-assistant.is-tip-raising .mascot-assistant__image {
  transform: translateY(-4px) scale(1.03);
  transition: transform 200ms ease-out;
}

.mascot-assistant.is-tip-leaning .mascot-assistant__image {
  transform: translateX(4px) rotate(2deg) scale(1.02);
  transition: transform 180ms ease;
}

.mascot-assistant.is-tip-winking .mascot-assistant__image {
  transform: translateY(-3px) scale(1.04);
  transition: transform 160ms ease;
}

.mascot-assistant.is-tip-holding .mascot-assistant__image {
  transform: translateY(-2px) scale(1.02);
  transition: transform 180ms ease-out;
}

/* Clap sequence: open -> close-in -> contact. */
.mascot-assistant.is-clap-open .mascot-assistant__image {
  transform: translateY(-3px) scale(1.02);
  transition: transform 140ms ease-out;
}

.mascot-assistant.is-clap-closing .mascot-assistant__image {
  transform: scale(0.98);
  transition: transform 120ms ease-in;
}

.mascot-assistant.is-clap-contact .mascot-assistant__image {
  transform: translateY(-6px) scale(1.06);
  transition: transform 120ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

/* Punch sequence: guard -> wind-up -> extend -> impact. */
.mascot-assistant.is-punch-guard .mascot-assistant__image {
  transform: scale(1.02);
  transition: transform 160ms ease-out;
}

.mascot-assistant.is-punch-windup .mascot-assistant__image {
  transform: translateX(-5px) rotate(-3deg) scale(0.98);
  transition: transform 160ms ease-in;
}

.mascot-assistant.is-punch-extend .mascot-assistant__image {
  transform: translateX(8px) rotate(3deg) scale(1.04);
  transition: transform 160ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

.mascot-assistant.is-punch-impact .mascot-assistant__image {
  transform: translateX(12px) scale(1.08);
  transition: transform 140ms cubic-bezier(0.15, 0.9, 0.25, 1);
}

/* Exhausted sit/pant: sit -> inhale -> exhale -> slump. */
.mascot-assistant.is-exhaust-sit .mascot-assistant__image {
  transform: translateY(6px) scale(0.98);
  transition: transform 200ms ease-out;
}

.mascot-assistant.is-exhaust-inhale .mascot-assistant__image {
  transform: translateY(2px) scale(1.03);
  transition: transform 260ms ease-out;
}

.mascot-assistant.is-exhaust-exhale .mascot-assistant__image {
  transform: translateY(8px) scale(0.96);
  transition: transform 240ms ease-in;
}

.mascot-assistant.is-exhaust-slump .mascot-assistant__image {
  transform: translateY(10px) scale(0.94);
  transition: transform 280ms ease-in-out;
}

/* Think sequence: chin -> look up -> sparkle -> smile -> aha. */
.mascot-assistant.is-think-chin .mascot-assistant__image {
  transform: translateY(2px) rotate(-2deg);
  transition: transform 220ms ease-out;
}

.mascot-assistant.is-think-look .mascot-assistant__image {
  transform: translateY(-4px) rotate(-3deg);
  transition: transform 240ms ease-out;
}

.mascot-assistant.is-think-sparkle .mascot-assistant__image {
  transform: translateY(-6px) scale(1.03);
  transition: transform 220ms ease-out;
}

.mascot-assistant.is-think-smile .mascot-assistant__image {
  transform: translateY(-3px) scale(1.02) rotate(2deg);
  transition: transform 220ms ease-out;
}

.mascot-assistant.is-think-aha .mascot-assistant__image {
  transform: translateY(-8px) scale(1.06);
  transition: transform 180ms cubic-bezier(0.2, 0.85, 0.3, 1);
}

.mascot-assistant--embedded {
  position: relative;
  inset: auto;
  z-index: 2;
  width: 100%;
  justify-items: center;
  margin-top: 18px;
}

.mascot-assistant--embedded .mascot-assistant__bubble {
  margin: 0 0 -4px;
  border-radius: 18px 18px 18px 5px;
}

.mascot-assistant--embedded .mascot-assistant__bubble::after {
  right: auto;
  left: 42px;
}

.mascot-assistant--embedded .mascot-assistant__character {
  width: min(220px, 90%);
  height: 238px;
}

/* Leave the map legend and zoom controls unobstructed. */
body.map-academy .mascot-assistant {
  z-index: 3200;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 70px));
}

body.landing-academy .mascot-assistant,
body.about-us-page .mascot-assistant,
body.about-page .mascot-assistant {
  z-index: 3200;
}

@keyframes mascot-bubble-in {
  from { opacity: 0; transform: translateY(7px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mascot-idle-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

@keyframes mascot-celebrate {
  0%, 100% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-13px) rotate(-3deg); }
  70% { transform: translateY(-4px) rotate(3deg); }
}

@keyframes mascot-wave {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-5px) rotate(-2.5deg); }
  65% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes mascot-think {
  0%, 100% { transform: rotate(0); }
  45% { transform: rotate(-4deg) translateY(-3px); }
}

@keyframes mascot-run {
  0%, 100% { transform: translateX(0) translateY(0); }
  35% { transform: translateX(-8px) translateY(-7px) rotate(-2deg); }
  70% { transform: translateX(7px) translateY(-3px) rotate(2deg); }
}

@keyframes mascot-heart {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.055) translateY(-4px); }
}

@keyframes mascot-breathe {
  0%, 100% { transform: scale(0.98) translateY(2px); }
  50% { transform: scale(1.035) translateY(-5px); }
}

@keyframes mascot-point {
  0%, 100% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(6px) rotate(2deg); }
  70% { transform: translateX(2px) rotate(-1deg); }
}

@keyframes mascot-stretch {
  0%, 100% { transform: scaleY(1) translateY(0); }
  45% { transform: scaleY(1.06) translateY(-6px); }
  70% { transform: scaleY(1.02) translateY(-2px); }
}

@keyframes mascot-crouch {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  40% { transform: translateY(5px) scale(1.02, 0.9); }
  70% { transform: translateY(2px) scale(1.01, 0.95); }
}

@keyframes mascot-pose-jump {
  0%, 100% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-14px) scale(1.03); }
  70% { transform: translateY(2px) scale(0.97, 0.94); }
}

@keyframes mascot-clap {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  25% { transform: translateY(-5px) scale(1.04) rotate(-2deg); }
  50% { transform: translateY(1px) scale(0.98) rotate(2deg); }
  75% { transform: translateY(-6px) scale(1.05) rotate(-1deg); }
}

@keyframes mascot-fight {
  0%, 100% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(7px) rotate(3deg) scale(1.03); }
  60% { transform: translateX(-4px) rotate(-2deg); }
}

@keyframes mascot-surprise {
  0% { transform: scale(0.9) translateY(8px); }
  45% { transform: scale(1.08) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

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

@media (max-width: 680px) {
  .mascot-assistant {
    right: max(9px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(300px, calc(100vw - 18px));
  }

  .mascot-assistant__character {
    width: 104px;
    height: 118px;
  }

  .mascot-assistant__bubble {
    width: min(292px, calc(100vw - 22px));
    margin-right: 2px;
    padding: 14px 14px 13px;
  }

  .mascot-assistant__bubble p {
    margin-bottom: 9px;
    font-size: 13px;
  }

  .mascot-assistant__actions button {
    min-height: 34px;
  }

  .mascot-assistant__voice {
    top: 9px;
    width: 33px;
    height: 33px;
  }

  .mascot-assistant__mic {
    top: 9px;
    width: 33px;
    height: 33px;
  }

  .mascot-assistant--embedded .mascot-assistant__character {
    width: min(180px, 82%);
    height: 195px;
  }

  body.map-academy .mascot-assistant {
    right: auto;
    left: max(9px, env(safe-area-inset-left));
    bottom: max(42px, calc(env(safe-area-inset-bottom) + 34px));
    justify-items: start;
  }

  body.setup-page .mascot-assistant--embedded {
    position: fixed;
    right: max(9px, env(safe-area-inset-right));
    left: auto;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 2400;
    width: min(300px, calc(100vw - 18px));
    margin: 0;
    justify-items: end;
  }

  body.setup-page .mascot-assistant--embedded .mascot-assistant__bubble {
    margin: 0 2px -10px 0;
    border-radius: 18px 18px 5px 18px;
  }

  body.setup-page .mascot-assistant--embedded .mascot-assistant__bubble::after {
    right: 25px;
    left: auto;
  }

  body.setup-page .mascot-assistant--embedded .mascot-assistant__character {
    width: 104px;
    height: 118px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-assistant *,
  .mascot-assistant *::before,
  .mascot-assistant *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .mascot-assistant.is-breathing .mascot-assistant__image {
    animation: none !important;
  }

  .mascot-assistant.is-wave-anticipating .mascot-assistant__image,
  .mascot-assistant.is-wave-airborne .mascot-assistant__image,
  .mascot-assistant.is-wave-landing .mascot-assistant__image,
  .mascot-assistant.is-wave-settling .mascot-assistant__image,
  .mascot-assistant.is-jump-anticipating .mascot-assistant__image,
  .mascot-assistant.is-jump-airborne .mascot-assistant__image,
  .mascot-assistant.is-jump-landing .mascot-assistant__image,
  .mascot-assistant.is-jump-settling .mascot-assistant__image,
  .mascot-assistant.is-tip-raising .mascot-assistant__image,
  .mascot-assistant.is-tip-leaning .mascot-assistant__image,
  .mascot-assistant.is-tip-winking .mascot-assistant__image,
  .mascot-assistant.is-tip-holding .mascot-assistant__image,
  .mascot-assistant.is-clap-open .mascot-assistant__image,
  .mascot-assistant.is-clap-closing .mascot-assistant__image,
  .mascot-assistant.is-clap-contact .mascot-assistant__image,
  .mascot-assistant.is-punch-guard .mascot-assistant__image,
  .mascot-assistant.is-punch-windup .mascot-assistant__image,
  .mascot-assistant.is-punch-extend .mascot-assistant__image,
  .mascot-assistant.is-punch-impact .mascot-assistant__image,
  .mascot-assistant.is-exhaust-sit .mascot-assistant__image,
  .mascot-assistant.is-exhaust-inhale .mascot-assistant__image,
  .mascot-assistant.is-exhaust-exhale .mascot-assistant__image,
  .mascot-assistant.is-exhaust-slump .mascot-assistant__image,
  .mascot-assistant.is-think-chin .mascot-assistant__image,
  .mascot-assistant.is-think-look .mascot-assistant__image,
  .mascot-assistant.is-think-sparkle .mascot-assistant__image,
  .mascot-assistant.is-think-smile .mascot-assistant__image,
  .mascot-assistant.is-think-aha .mascot-assistant__image {
    transform: none !important;
  }
}