:root {
  --page: #f5f7fa;
  --frame: #ffffff;
  --line: #e3e7ec;
  --ink: #1b2230;
  --ink-soft: #5f6b7d;
  --accent: #1aa37a;
  --accent-strong: #13875f;
  --mint: #e5f6ef;
  --mint-strong: #c9ecdd;
  --violet: #6250d6;
  --violet-tint: #efecfd;
  --red: #c93c3c;
  --red-strong: #a82f2f;
  --focus: rgba(26, 163, 122, 0.32);
  --mascot-size: min(70vw, 280px);
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--page);
  color: var(--ink);
  font: 17px/1.45 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
}

.call {
  min-height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
}

/* A quiet line, not a logo tile: the mascot is the face of the page. */
.brand {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 14px;
}
.brand strong {
  color: var(--ink);
  font-weight: 650;
}

.stage {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 14px;
  text-align: center;
}
.status {
  margin: 8px 0 0;
  font-size: 22px;
  font-weight: 700;
  max-width: 22ch;
}
.hint {
  margin: 0;
  min-height: 1.4em;
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 32ch;
}

/*
 * The mascot: 3D clay layers (scripts/mascot3d) stacked in one square. Three
 * wrappers so their transforms never fight: .figure carries each state's pose
 * (keyframes), .react follows the sound (--level, set every frame by mascot.js),
 * and the shadow stays on the ground, shrinking when the figure lifts.
 */
.mascot {
  --level: 0;
  position: relative;
  width: var(--mascot-size);
  aspect-ratio: 1;
}
.mascot .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}
.mascot .face {
  opacity: 0;
  /* Faces cross-fade: a hard swap of the eyes reads as a twitch. */
  transition: opacity 90ms ease-out;
}
.mascot .face.on {
  opacity: 1;
}
.figure,
.react {
  position: absolute;
  inset: 0;
  /* The feet: every squash and lean hinges on the ground. */
  transform-origin: 50% 86%;
}
.react {
  transform: scale(calc(1 + var(--level) * 0.05), calc(1 + var(--level) * 0.08));
}
.halo {
  position: absolute;
  inset: 8% 6% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mint-strong) 0%, rgba(201, 236, 221, 0) 68%);
  opacity: 0;
  transform: scale(calc(0.9 + var(--level) * 0.35));
  transition: opacity 0.4s var(--ease);
}
.shadow {
  transform-origin: 50% 86%;
}
/* The sprout sways from its stem (31% down the frame: where it meets the head). */
.sprout {
  transform-origin: 50% 31%;
  animation: sprout-sway 3.4s ease-in-out infinite;
}

/* Idle: breathing, a slow sway. */
.figure {
  animation:
    breathe 3.6s ease-in-out infinite,
    sway 7s ease-in-out infinite;
}
/* Ringing: little hops while the call connects. */
[data-state="connecting"] .figure {
  animation: hop 0.9s var(--ease) infinite;
}
[data-state="connecting"] .shadow {
  animation: shadow-hop 0.9s var(--ease) infinite;
}
/* Listening: leans in, faster breath, the halo shows it hears. */
[data-state="listening"] .figure,
[data-state="hearing"] .figure {
  animation: lean-in 0.35s var(--ease) forwards, breathe-in 2.4s ease-in-out 0.35s infinite;
}
[data-state="listening"] .halo,
[data-state="hearing"] .halo {
  opacity: 1;
}
/* Thinking: tilts its head from side to side, eyes up. */
[data-state="thinking"] .figure {
  animation: ponder 2.6s ease-in-out infinite;
}
/* Speaking: the mouth and --level carry it; a lighter breath underneath. */
[data-state="speaking"] .figure {
  animation: breathe 2.8s ease-in-out infinite;
}
/* Goodbye: one happy hop, then still. */
[data-state="ended"] .figure {
  animation: hop 0.6s var(--ease) 1;
}
[data-state="failed"] .figure {
  animation: none;
  transform: scale(0.97, 0.95);
  filter: saturate(0.6);
}

/*
 * Idle actions: mascot.js sets data-action on the mascot for a moment while it
 * waits for a call — a look around, a hop, a wiggle, a giggle.
 */
.mascot[data-action="look-left"] .figure {
  animation: look-left 1.4s var(--ease);
}
.mascot[data-action="look-right"] .figure {
  animation: look-right 1.4s var(--ease);
}
.mascot[data-action="look-down"] .figure {
  animation: look-down 1.6s var(--ease);
}
.mascot[data-action="hop"] .figure {
  animation: hop 0.8s var(--ease);
}
.mascot[data-action="hop"] .shadow {
  animation: shadow-hop 0.8s var(--ease);
}
.mascot[data-action="wiggle"] .figure {
  animation: wiggle 0.9s ease-in-out;
}
.mascot[data-action="giggle"] .figure {
  animation: giggle 1.1s ease-in-out;
}
.mascot[data-action="hop"] .sprout,
.mascot[data-action="wiggle"] .sprout,
.mascot[data-action="giggle"] .sprout {
  animation: sprout-flap 0.45s ease-in-out 2;
}

@keyframes look-left {
  0%,
  100% {
    transform: rotate(0);
  }
  25%,
  75% {
    transform: rotate(-4deg) translateX(-1.5%);
  }
}
@keyframes look-right {
  0%,
  100% {
    transform: rotate(0);
  }
  25%,
  75% {
    transform: rotate(4deg) translateX(1.5%);
  }
}
@keyframes look-down {
  0%,
  100% {
    transform: scale(1, 1);
  }
  25%,
  75% {
    transform: scale(1.02, 0.97) translateY(1%);
  }
}
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-7deg);
  }
  45% {
    transform: rotate(6deg);
  }
  70% {
    transform: rotate(-3deg);
  }
}
@keyframes giggle {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  15%,
  45%,
  75% {
    transform: translateY(-2%) scale(0.98, 1.03);
  }
  30%,
  60%,
  90% {
    transform: translateY(0) scale(1.03, 0.97);
  }
}
@keyframes sprout-sway {
  0%,
  100% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
}
@keyframes sprout-flap {
  0%,
  100% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(-12deg);
  }
  70% {
    transform: rotate(10deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.012, 0.985);
  }
}
@keyframes breathe-in {
  0%,
  100% {
    transform: scale(1.04, 1.04);
  }
  50% {
    transform: scale(1.055, 1.025);
  }
}
@keyframes lean-in {
  to {
    transform: scale(1.04, 1.04);
  }
}
@keyframes sway {
  0%,
  100% {
    rotate: -1.5deg;
  }
  50% {
    rotate: 1.5deg;
  }
}
@keyframes ponder {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(4deg) translateY(-1.5%);
  }
}
@keyframes hop {
  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }
  15% {
    transform: translateY(0) scale(1.06, 0.92);
  }
  45% {
    transform: translateY(-9%) scale(0.97, 1.04);
  }
  75% {
    transform: translateY(0) scale(1.04, 0.95);
  }
}
@keyframes shadow-hop {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  45% {
    transform: scale(0.8);
    opacity: 0.6;
  }
}

.captions {
  display: grid;
  gap: 8px;
  min-height: 0;
}
.caption {
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--frame);
  border: 1px solid var(--line);
  font-size: 15px;
}
.caption b {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.caption-bot {
  background: var(--violet-tint);
  border-color: transparent;
}

.controls {
  display: grid;
  gap: 12px;
}
.controls button {
  font: inherit;
  border: 0;
  border-radius: 999px;
  min-height: 56px;
  cursor: pointer;
}
.controls button:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 2px;
}
.controls .primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  min-height: 76px;
}
.controls .primary .icon {
  width: 30px;
  height: 30px;
  fill: currentColor;
}
.controls .primary:active {
  background: var(--accent-strong);
}
.controls .primary.hang-up {
  background: var(--red);
}
.controls .primary.hang-up .icon {
  transform: rotate(135deg);
}
.controls .primary.hang-up:active {
  background: var(--red-strong);
}
.controls .primary:disabled {
  opacity: 0.6;
}
.controls .done {
  background: var(--frame);
  color: var(--accent-strong);
  font-weight: 700;
  border: 2px solid var(--mint-strong) !important;
}

@media (prefers-reduced-motion: reduce) {
  .call * {
    animation: none !important;
  }
  .react,
  .halo {
    transform: none;
  }
}