/* The buddy peeking over the talk card: its body, faces and moves, its
   speech bubble with the tips, and pointing at the practice button. */

/* Buddy: a cartoon blob peeking over the bottom edge of the talk card. */
.buddy {
  --buddy-body: #8fb09a;
  /* The face keeps its warm colors in both modes. */
  --buddy-cheek: #d66b48;
  --buddy-mouth: #ad4f34;
  --voice: 0;
  --look-x: 0px;
  --look-y: 0px;
  --buddy-width: 112px;
  position: absolute;
  /* Puts the clip line (y=91 of 100) exactly on the card's bottom edge. */
  bottom: calc(var(--buddy-width) * -0.075);
  inset-inline-start: 26px;
  width: var(--buddy-width);
  pointer-events: none;
}

.buddy svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  overflow: visible;
}

/* Above the card's rough border (z-index 4), so the hands grip over it. */
.buddy .buddy-hands {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.buddy-shape,
.buddy-hand,
.buddy-eyes {
  pointer-events: auto;
  cursor: pointer;
}

.buddy-eyes,
.buddy-mouth,
.buddy-grin {
  transform-box: fill-box;
}

.buddy-shape,
.buddy-white,
.buddy-hand,
.buddy-mouth,
.buddy-grin {
  stroke: var(--line);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.buddy-shape,
.buddy-hand {
  fill: var(--buddy-body);
}

.buddy-hair,
.buddy-smile,
.buddy-happy {
  fill: none;
  stroke: var(--line);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.buddy-white {
  fill: #fffefa;
}

.buddy-pupil {
  fill: var(--line);
}

.buddy-shine {
  fill: #fffefa;
}

.buddy-cheek {
  fill: var(--buddy-cheek);
  opacity: 0.35;
}

.buddy-mouth,
.buddy-grin {
  fill: var(--buddy-mouth);
  opacity: 0;
  transform-origin: 50% 0%;
  transform: scale(0.4);
  transition:
    transform 0.18s cubic-bezier(0.34, 1.6, 0.64, 1),
    opacity 0.12s ease;
}

/* Lift and body pivot on the card edge (y≈91), since the body runs far below it. */
.buddy-lift,
.buddy-body {
  transform-box: view-box;
  transform-origin: 60px 91px;
}

.buddy-lift {
  transform: translateY(calc(var(--voice) * -14px))
    scale(calc(1 - var(--voice) * 0.04), calc(1 + var(--voice) * 0.08));
  transition: transform 0.12s ease-out;
}

.buddy-body {
  animation: buddy-breathe 3.2s ease-in-out infinite;
}

.buddy-look {
  transform: translate(var(--look-x), var(--look-y));
  transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.buddy-eyes {
  transform-origin: 50% 50%;
  animation: buddy-blink 4.8s infinite;
}

.buddy-happy {
  stroke-width: 3.4;
  opacity: 0;
}

/* Connecting: glances up, wobbling while it waits. */
.talk-stage[data-state="connecting"] .buddy-look {
  transform: translate(3px, -4px);
}

.talk-stage[data-state="connecting"] .buddy-body {
  animation: buddy-wobble 0.7s ease-in-out infinite;
}

/* Live: bobs along; while you speak it stretches up with an "o" mouth. */
.talk-stage[data-state="live"] .buddy-body {
  animation: buddy-bob 1.4s ease-in-out infinite;
}

.talk-stage[data-speaking="true"] .buddy-smile {
  opacity: 0;
}

.talk-stage[data-speaking="true"] .buddy-mouth {
  opacity: 1;
  transform: none;
}

/* After a conversation: bouncy hops with a big grin. */
.talk-stage[data-state="ending"] .buddy-eye,
.buddy[data-cheer] .buddy-eye,
.talk-stage[data-state="ending"] .buddy-smile,
.buddy[data-cheer] .buddy-smile {
  opacity: 0;
}

.talk-stage[data-state="ending"] .buddy-happy,
.buddy[data-cheer] .buddy-happy,
.talk-stage[data-state="ending"] .buddy-grin,
.buddy[data-cheer] .buddy-grin {
  opacity: 1;
  transform: none;
}

.buddy[data-cheer] .buddy-body {
  animation: buddy-hop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) 3;
}

@keyframes buddy-breathe {
  50% {
    transform: scale(1.04, 0.96);
  }
}

@keyframes buddy-blink {
  0%,
  93%,
  99%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.08);
  }
}

@keyframes buddy-wobble {
  25% {
    transform: rotate(-5deg) scale(1.02, 0.98);
  }
  75% {
    transform: rotate(5deg) scale(1.02, 0.98);
  }
}

@keyframes buddy-bob {
  0%,
  100% {
    transform: scale(1.03, 0.97);
  }
  50% {
    transform: translateY(-5px) scale(0.98, 1.03);
  }
}

@keyframes buddy-hop {
  0% {
    transform: scale(1.12, 0.86);
  }
  45% {
    transform: translateY(-22px) scale(0.92, 1.1);
  }
  85% {
    transform: translateY(0) scale(1.1, 0.9);
  }
}

/* Click reactions: one at a time, picked at random. */
.talk-stage .buddy[data-poke="boing"] .buddy-body {
  animation: buddy-poke-boing 0.75s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.talk-stage .buddy[data-poke="giggle"] .buddy-body {
  animation: buddy-poke-giggle 0.8s ease-in-out;
}

.talk-stage .buddy[data-poke="surprise"] .buddy-body {
  animation: buddy-poke-surprise 0.9s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.buddy[data-poke="giggle"] .buddy-eye,
.buddy[data-poke="giggle"] .buddy-smile,
.buddy[data-poke="surprise"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="giggle"] .buddy-happy,
.buddy[data-poke="giggle"] .buddy-grin,
.buddy[data-poke="surprise"] .buddy-mouth {
  opacity: 1;
  transform: none;
}

.buddy[data-poke="surprise"] .buddy-eyes {
  animation: none;
  transform: scale(1.25);
  transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* Excited while the pointer hovers the start button. */
.talk-stage[data-state="idle"]:has(.talk-button:hover)
  .buddy:not([data-poke], [data-cheer])
  .buddy-body {
  animation: buddy-excited 0.5s ease-in-out infinite;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover)
  .buddy:not([data-poke], [data-cheer])
  .buddy-smile {
  opacity: 0;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover)
  .buddy:not([data-poke], [data-cheer])
  .buddy-grin {
  opacity: 1;
  transform: none;
}

.talk-stage[data-state="idle"]:has(.talk-button:hover)
  .buddy:not([data-poke], [data-cheer])
  .buddy-eyes {
  animation: none;
  transform: scale(1.14);
  transition: transform 0.15s cubic-bezier(0.34, 1.6, 0.64, 1);
}

@keyframes buddy-excited {
  0%,
  100% {
    transform: scale(1.04, 0.96);
  }
  50% {
    transform: translateY(-7px) scale(0.97, 1.04);
  }
}

/* Thumbs up: the edge hand lets go and pops up beside the body. */
.buddy-thumb {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(56px);
  opacity: 0;
}

.buddy-fingers {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-linecap: round;
}

.buddy-hand-end {
  transition: opacity 0.1s ease;
}

.buddy[data-poke="like"] .buddy-thumb,
.buddy[data-cheer] .buddy-thumb {
  animation: buddy-poke-like 1.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.buddy[data-poke="like"] .buddy-hand-end,
.buddy[data-cheer] .buddy-hand-end {
  animation: buddy-hand-away 1.5s linear;
}

.buddy[data-poke="like"] .buddy-eye,
.buddy[data-poke="like"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="like"] .buddy-happy,
.buddy[data-poke="like"] .buddy-grin {
  opacity: 1;
  transform: none;
}

.talk-stage .buddy[data-poke="like"] .buddy-body {
  animation: buddy-lean 1.5s ease-in-out;
}

@keyframes buddy-poke-like {
  0% {
    opacity: 1;
    transform: translateY(56px) rotate(-20deg);
  }
  22% {
    transform: translateY(-6px) rotate(10deg);
  }
  32%,
  52% {
    transform: translateY(0) rotate(0deg);
  }
  42% {
    transform: translateY(-3px) rotate(-8deg);
  }
  78% {
    transform: translateY(0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(56px) rotate(-10deg);
  }
}

@keyframes buddy-hand-away {
  0%,
  100% {
    opacity: 1;
  }
  6%,
  94% {
    opacity: 0;
  }
}

@keyframes buddy-lean {
  25%,
  75% {
    transform: rotate(-4deg);
  }
}

@keyframes buddy-poke-boing {
  0% {
    transform: scale(1.18, 0.8);
  }
  35% {
    transform: translateY(-34px) scale(0.88, 1.14);
  }
  70% {
    transform: translateY(0) scale(1.14, 0.86);
  }
  85% {
    transform: scale(0.96, 1.04);
  }
}

@keyframes buddy-poke-giggle {
  0%,
  100% {
    transform: none;
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-6deg) translateY(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(6deg);
  }
}

@keyframes buddy-poke-surprise {
  0% {
    transform: none;
  }
  20% {
    transform: translateY(-16px) scale(0.94, 1.1);
  }
  45% {
    transform: translateY(0) scale(1.08, 0.94);
  }
}

/* Wave hello: the left edge hand lets go and waves from the wrist. */
.buddy-wave {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: translateY(56px);
  opacity: 0;
}

.buddy[data-poke="wave"] .buddy-wave {
  animation: buddy-poke-wave 1.7s ease-in-out;
}

.buddy[data-poke="wave"] .buddy-hand-start {
  animation: buddy-hand-away 1.7s linear;
}

.buddy[data-poke="wave"] .buddy-smile,
.buddy[data-poke="wink"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="wave"] .buddy-grin,
.buddy[data-poke="wink"] .buddy-grin {
  opacity: 1;
  transform: none;
}

@keyframes buddy-poke-wave {
  0% {
    opacity: 1;
    transform: translateY(56px) rotate(0deg);
  }
  18% {
    transform: translateY(0) rotate(-16deg);
  }
  30%,
  54% {
    transform: translateY(0) rotate(20deg);
  }
  42%,
  66% {
    transform: translateY(0) rotate(-16deg);
  }
  80% {
    transform: translateY(0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(56px) rotate(0deg);
  }
}

/* Wink: one eye closes while the head tilts toward it. */
.buddy-wink {
  opacity: 0;
}

.buddy-wink-line,
.buddy-sleepy {
  fill: none;
  stroke: var(--line);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.buddy[data-poke="wink"] .buddy-wink {
  opacity: 1;
}

.buddy[data-poke="wink"] .buddy-eye-right {
  opacity: 0;
}

.talk-stage .buddy[data-poke="wink"] .buddy-body {
  animation: buddy-poke-wink 1.1s ease-in-out;
}

@keyframes buddy-poke-wink {
  20%,
  70% {
    transform: translateY(-3px) rotate(6deg);
  }
}

/* Yawn (bored): stretches up, squints, big round mouth. */
.buddy-yawn {
  fill: var(--buddy-mouth);
  stroke: var(--line);
  stroke-width: 2.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.buddy[data-poke="yawn"] .buddy-yawn {
  animation: buddy-yawn-mouth 2.2s ease-in-out;
}

.buddy[data-poke="yawn"] .buddy-smile {
  animation: buddy-hidden 2.2s;
}

.buddy[data-poke="yawn"] .buddy-eyes {
  animation: buddy-squint 2.2s ease-in-out;
}

.talk-stage .buddy[data-poke="yawn"] .buddy-body {
  animation: buddy-poke-yawn 2.2s ease-in-out;
}

@keyframes buddy-yawn-mouth {
  0% {
    opacity: 1;
    transform: scale(0.3);
  }
  30%,
  65% {
    transform: none;
  }
  95% {
    opacity: 1;
    transform: scale(0.3);
  }
  100% {
    opacity: 0;
  }
}

@keyframes buddy-hidden {
  0%,
  95% {
    opacity: 0;
  }
}

@keyframes buddy-squint {
  30%,
  65% {
    transform: scaleY(0.25);
  }
}

@keyframes buddy-poke-yawn {
  30%,
  65% {
    transform: translateY(-6px) scale(0.97, 1.07);
  }
  80% {
    transform: scale(1.03, 0.97);
  }
}

/* Look around (bored): eyes dart side to side with a small head turn. */
.buddy[data-poke="lookaround"] .buddy-look {
  animation: buddy-poke-look 2.4s ease-in-out;
}

.talk-stage .buddy[data-poke="lookaround"] .buddy-body {
  animation: buddy-lookaround-body 2.4s ease-in-out;
}

@keyframes buddy-poke-look {
  15%,
  35% {
    transform: translate(-4px, -1px);
  }
  50%,
  70% {
    transform: translate(4px, -1px);
  }
  85% {
    transform: translate(0, -3px);
  }
}

@keyframes buddy-lookaround-body {
  15%,
  35% {
    transform: rotate(-3deg);
  }
  50%,
  70% {
    transform: rotate(3deg);
  }
}

/* Asleep after a minute alone: closed eyes, slow snore, floating z's. */
.buddy[data-sleep] .buddy-eye,
.buddy[data-sleep] .buddy-smile {
  opacity: 0;
}

.buddy-sleepy {
  opacity: 0;
}

.buddy[data-sleep] .buddy-sleepy {
  opacity: 1;
}

.buddy[data-sleep] .buddy-eyes {
  animation: none;
}

.buddy[data-sleep] .buddy-mouth {
  opacity: 1;
  transform: scale(0.6);
}

.talk-stage .buddy[data-sleep]:not([data-poke]) .buddy-body {
  animation: buddy-snore 3.4s ease-in-out infinite;
}

.buddy-zzz text {
  font:
    800 21px system-ui,
    sans-serif;
  fill: var(--line);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.buddy[data-sleep] .buddy-zzz text {
  animation: buddy-zzz 3s ease-in-out infinite;
}

.buddy[data-sleep] .buddy-zzz text:nth-child(2) {
  animation-delay: 1s;
}

.buddy[data-sleep] .buddy-zzz text:nth-child(3) {
  animation-delay: 2s;
}

@keyframes buddy-snore {
  50% {
    transform: scale(1.05, 0.95);
  }
}

@keyframes buddy-zzz {
  0% {
    opacity: 0;
    transform: translate(0, 6px) scale(0.6);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(6px, -8px) scale(1.1);
  }
}

/* ---- More buddy moods: scratch, drum, blush, dance, grumpy, star. ---- */
.buddy-face,
.buddy-cheek,
.buddy-scratch,
.buddy-star,
.buddy-notes text,
.buddy-anger {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.buddy-brows {
  fill: none;
  stroke: var(--line);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
}

.buddy-scratch,
.buddy-star {
  transform: translateY(70px);
  opacity: 0;
}

.buddy-star {
  transform-origin: 50% 100%;
}

.buddy-star-shape {
  fill: #f2c14e;
  stroke: var(--line);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.buddy-notes text {
  font:
    800 17px system-ui,
    sans-serif;
  fill: var(--line);
  opacity: 0;
}

.buddy-anger {
  fill: none;
  stroke: var(--buddy-mouth);
  stroke-width: 2.8;
  stroke-linecap: round;
  opacity: 0;
}

/* Happy face (closed arc eyes, big grin) for blush, dance and star. */
.buddy[data-poke="blush"] .buddy-eye,
.buddy[data-poke="dance"] .buddy-eye,
.buddy[data-poke="star"] .buddy-eye,
.buddy[data-poke="dance"] .buddy-smile,
.buddy[data-poke="star"] .buddy-smile,
.buddy[data-poke="grumpy"] .buddy-smile {
  opacity: 0;
}

.buddy[data-poke="blush"] .buddy-happy,
.buddy[data-poke="dance"] .buddy-happy,
.buddy[data-poke="star"] .buddy-happy,
.buddy[data-poke="dance"] .buddy-grin,
.buddy[data-poke="star"] .buddy-grin {
  opacity: 1;
  transform: none;
}

/* Scratch (bored): a hand rubs the side of the head, which tilts; the hair reacts. */
.buddy[data-poke="scratch"] .buddy-scratch {
  animation: buddy-scratch-hand 2s ease-in-out;
}

.buddy[data-poke="scratch"] .buddy-hand-start {
  animation: buddy-hand-away 2s linear;
}

.talk-stage .buddy[data-poke="scratch"] .buddy-body {
  animation: buddy-poke-scratch 2s ease-in-out;
}

.buddy[data-poke="scratch"] .buddy-look {
  transform: translate(-3px, -3px);
}

@keyframes buddy-scratch-hand {
  0% {
    opacity: 1;
    transform: translate(0, 70px);
  }
  22% {
    transform: translate(0, 0) rotate(0deg);
  }
  32%,
  52%,
  72% {
    transform: translate(3px, -3px) rotate(-12deg);
  }
  42%,
  62% {
    transform: translate(-2px, 2px) rotate(10deg);
  }
  84% {
    transform: translate(0, 0) rotate(0deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(0, 70px);
  }
}

@keyframes buddy-poke-scratch {
  22% {
    transform: rotate(-5deg);
  }
  32%,
  52%,
  72% {
    transform: translateY(-1px) rotate(-7deg);
  }
  42%,
  62% {
    transform: rotate(-4deg);
  }
  84% {
    transform: rotate(-2deg);
  }
}

/* Drum (bored): fingers tap the card edge in turn, eyes half shut. */
.buddy[data-poke="drum"] .buddy-hand-start,
.buddy[data-poke="dance"] .buddy-hand-start {
  animation: buddy-drum-tap 0.3s ease-in-out 6;
}

.buddy[data-poke="drum"] .buddy-hand-end,
.buddy[data-poke="dance"] .buddy-hand-end {
  animation: buddy-drum-tap 0.3s ease-in-out 0.15s 6;
}

.talk-stage .buddy[data-poke="drum"] .buddy-body {
  animation: buddy-poke-drum 1.9s ease-in-out;
}

.buddy[data-poke="drum"] .buddy-eyes {
  animation: buddy-bored-lids 1.9s ease-in-out;
}

.buddy[data-poke="drum"] .buddy-look {
  transform: translate(-3px, 1px);
}

@keyframes buddy-drum-tap {
  50% {
    transform: translateY(-3px);
  }
}

@keyframes buddy-poke-drum {
  10%,
  90% {
    transform: scale(1.02, 0.97);
  }
}

@keyframes buddy-bored-lids {
  10%,
  90% {
    transform: scaleY(0.55);
  }
}

/* Blush (click): red puffy cheeks, shy squash and sway. */
.buddy[data-poke="blush"] .buddy-cheek {
  animation: buddy-blush-cheeks 1.6s ease-in-out;
}

.talk-stage .buddy[data-poke="blush"] .buddy-body {
  animation: buddy-poke-blush 1.6s ease-in-out;
}

@keyframes buddy-blush-cheeks {
  15%,
  80% {
    fill: #e8907c;
    opacity: 0.6;
    transform: scale(1.25, 1.15);
  }
}

@keyframes buddy-poke-blush {
  15%,
  80% {
    transform: translateY(5px) scale(1.03, 0.95);
  }
  30%,
  60% {
    transform: translateY(5px) scale(1.03, 0.95) rotate(-3deg);
  }
  45% {
    transform: translateY(5px) scale(1.03, 0.95) rotate(3deg);
  }
}

/* Dance (click): side-to-side bops with notes; the star pose dances twice. */
.talk-stage .buddy[data-poke="dance"] .buddy-body {
  animation: buddy-poke-dance 1.6s ease-in-out;
}

.talk-stage .buddy[data-poke="star"] .buddy-body {
  animation: buddy-poke-dance 1.6s ease-in-out 2;
}

.buddy[data-poke="dance"] .buddy-notes text,
.buddy[data-poke="star"] .buddy-notes text {
  animation: buddy-note 1.1s ease-out infinite;
}

.buddy[data-poke="dance"] .buddy-notes text:nth-child(2),
.buddy[data-poke="star"] .buddy-notes text:nth-child(2) {
  animation-delay: 0.35s;
}

.buddy[data-poke="dance"] .buddy-notes text:nth-child(3),
.buddy[data-poke="star"] .buddy-notes text:nth-child(3) {
  animation-delay: 0.7s;
}

@keyframes buddy-poke-dance {
  0%,
  50%,
  100% {
    transform: none;
  }
  12.5%,
  62.5% {
    transform: translateY(-7px) rotate(-9deg);
  }
  25%,
  75% {
    transform: scale(1.05, 0.95);
  }
  37.5%,
  87.5% {
    transform: translateY(-7px) rotate(9deg);
  }
}

@keyframes buddy-note {
  0% {
    opacity: 0;
    transform: translateY(6px) scale(0.6);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(4px, -12px) rotate(12deg) scale(1.1);
  }
}

/* Star (a conversation with no new points): holds up a star while dancing. */
.buddy[data-poke="star"] .buddy-star {
  animation: buddy-star-hold 3.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.buddy[data-poke="star"] .buddy-hand-end {
  animation: buddy-hand-away 3.2s linear;
}

@keyframes buddy-star-hold {
  0% {
    opacity: 1;
    transform: translateY(70px) rotate(-20deg);
  }
  15% {
    transform: translateY(-4px) rotate(10deg);
  }
  22%,
  88% {
    transform: none;
  }
  35%,
  55%,
  75% {
    transform: rotate(-10deg);
  }
  45%,
  65% {
    transform: rotate(10deg);
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(70px);
  }
}

/* Grumpy (3 quick clicks): puffed cheeks and angry brows, then it turns its
   back for a moment (the face slides away) with an anger mark, and turns back. */
.talk-stage .buddy[data-poke="grumpy"] .buddy-body {
  animation: buddy-poke-grumpy 2s ease-in-out;
}

.buddy[data-poke="grumpy"] .buddy-face {
  animation: buddy-turn-away 2s;
}

.buddy[data-poke="grumpy"] .buddy-brows {
  opacity: 1;
}

.buddy[data-poke="grumpy"] .buddy-cheek {
  animation: buddy-puff 2s ease-in-out;
}

.buddy[data-poke="grumpy"] .buddy-mouth {
  opacity: 1;
  transform: scale(0.5);
}

.buddy[data-poke="grumpy"] .buddy-anger {
  animation: buddy-anger 2s ease-in-out;
}

@keyframes buddy-puff {
  5%,
  30% {
    fill: #e8907c;
    opacity: 0.6;
    transform: scale(1.3, 1.2);
  }
}

/* A quick full spin: the face slides off one side and comes straight back
   round from the other, so the back only flashes by. */
@keyframes buddy-turn-away {
  0%,
  40% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  50% {
    opacity: 0;
    transform: translateX(-34px) scaleX(0.5);
  }
  51% {
    opacity: 0;
    transform: translateX(34px) scaleX(0.5);
    animation-timing-function: ease-out;
  }
  64%,
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes buddy-poke-grumpy {
  8%,
  38% {
    transform: scale(1.03, 0.985);
  }
  14%,
  26% {
    transform: translateX(-0.8px) scale(1.03, 0.985);
  }
  20%,
  32% {
    transform: translateX(0.8px) scale(1.03, 0.985);
  }
  46%,
  56% {
    transform: scaleX(0.92);
  }
  70% {
    transform: none;
  }
}

@keyframes buddy-anger {
  0%,
  8%,
  48%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  14%,
  40% {
    opacity: 0.9;
    transform: scale(0.85);
  }
  22%,
  32% {
    opacity: 0.9;
    transform: scale(0.93);
  }
}

@media (max-width: 620px) {
  .buddy {
    --buddy-width: 78px;
    inset-inline-start: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buddy-body,
  .buddy-eyes {
    animation: none !important;
  }

  .buddy-lift,
  .buddy-look {
    transition: none;
  }
}

/* The tip is a speech bubble from the buddy, next to it on the card's bottom edge. */
.practice:has(.talk-tip:not([hidden])) {
  padding-bottom: 152px;
}

.talk-tip {
  position: absolute;
  bottom: 34px;
  inset-inline-start: 148px;
  z-index: 5;
  max-width: min(300px, calc(100% - 172px));
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--line);
  border-radius: 16px 16px 16px 16px;
  border-end-start-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: start;
  transform-origin: bottom left;
  transition:
    opacity 0.35s ease,
    scale 0.35s ease;
  animation: talk-tip-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

html[dir="rtl"] .talk-tip {
  transform-origin: bottom right;
}

/* Tail pointing back at the buddy. */
.talk-tip::before {
  content: "";
  position: absolute;
  bottom: 8px;
  inset-inline-start: -8px;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid var(--line);
  border-inline-start: 1.5px solid var(--line);
  background: var(--surface);
  rotate: 45deg;
}

html[dir="rtl"] .talk-tip::before {
  rotate: -45deg;
}

.talk-tip[hidden] {
  display: none;
}

/* The buddy points at it: the hand on the button's side lets go of the edge
   and points along it. Eager hops when the button shows up, then a point now
   and then. The hand is drawn on the left (the buddy sits on the right in
   RTL); in LTR it turns around the body's middle to point right. */
.buddy-point {
  --point-dir: 1;
  transform-box: view-box;
  transform-origin: 60px 41px;
  opacity: 0;
}

html[dir="ltr"] .buddy-point {
  --point-dir: -1;
  scale: -1 1;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-point {
  opacity: 1;
}

html:not([dir="ltr"])
  .buddy[data-point]:not([data-poke], [data-cheer])
  .buddy-hand-start,
html[dir="ltr"]
  .buddy[data-point]:not([data-poke], [data-cheer])
  .buddy-hand-end {
  opacity: 0;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-smile {
  opacity: 0;
}

.buddy[data-point]:not([data-poke], [data-cheer]) .buddy-grin {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: no-preference) {
  .buddy[data-point="eager"]:not([data-poke], [data-cheer]) .buddy-point {
    animation: buddy-point-jab 0.55s ease-in-out infinite;
  }

  .talk-stage
    .buddy[data-point="eager"]:not([data-poke], [data-cheer])
    .buddy-body {
    animation: buddy-hop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
  }

  .buddy[data-point="calm"]:not([data-poke], [data-cheer]) .buddy-point {
    animation: buddy-point-now 7s ease-in-out infinite;
  }

  html:not([dir="ltr"])
    .buddy[data-point="calm"]:not([data-poke], [data-cheer])
    .buddy-hand-start,
  html[dir="ltr"]
    .buddy[data-point="calm"]:not([data-poke], [data-cheer])
    .buddy-hand-end {
    animation: buddy-point-grip 7s linear infinite;
  }
}

@keyframes buddy-point-jab {
  50% {
    translate: calc(-5px * var(--point-dir)) 0;
  }
}

/* Calm: the hand comes out, points twice, and goes back to the edge. */
@keyframes buddy-point-now {
  0%,
  72%,
  100% {
    opacity: 0;
    translate: calc(14px * var(--point-dir)) 22px;
  }
  76%,
  80%,
  88%,
  96% {
    opacity: 1;
    translate: 0 0;
  }
  84%,
  92% {
    opacity: 1;
    translate: calc(-5px * var(--point-dir)) 0;
  }
}

@keyframes buddy-point-grip {
  0%,
  73%,
  99%,
  100% {
    opacity: 1;
  }
  75%,
  97% {
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .talk-tip {
    bottom: 26px;
    inset-inline-start: 104px;
    max-width: calc(100% - 120px);
    font-size: 0.9rem;
  }

  .practice:has(.talk-tip:not([hidden])) {
    padding-bottom: 148px;
  }
}

.buddy[data-sleep] ~ .talk-tip {
  opacity: 0;
  scale: 0.85;
}

@keyframes talk-tip-pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .talk-tip {
    animation: none;
  }
}

/* The buddy thinks it over: eyes up, a small thought bubble. */
.buddy-thought {
  position: absolute;
  z-index: 3;
  bottom: 100%;
  inset-inline-end: -6px;
  display: none;
  gap: 4px;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
}

.talk-stage[data-wrapup] .buddy-thought {
  display: inline-flex;
}

.talk-stage[data-wrapup] .buddy-look {
  transform: translate(3px, -5px);
}