:root {
  --cloudie-ink: #333333;
  --cloudie-muted: #6e6680;
  --cloudie-guide: #8b5cf6;
  --cloudie-pocket: #8b5cf6;
  --cloudie-mist: #f3f4ff;
  --cloudie-mint: #defaf2;
  --cloudie-star: #ffd95a;
}

.cloudie-pet-root {
  --cloudie-scale: 1;
  --cloudie-text-scale: 1.5;
  --cloudie-character-height: 344px;
  --cloudie-popup-gap: clamp(10px, 2.5vw, 18px);
  position: relative;
  width: 430px;
  height: 420px;
  overflow: visible;
  contain: layout style;
  isolation: isolate;
  font-family: Inter, "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif;
  color: var(--cloudie-ink);
}

.cloudie-pet {
  --cloudie-look-x: 0px;
  --cloudie-look-y: 0px;
  --cloudie-pull-x: 0px;
  --cloudie-pull-y: 0px;
  --cloudie-pull-angle: 0deg;
  --cloudie-counter-angle: 0deg;
  --cloudie-limb-angle: 0deg;
  position: absolute;
  left: 0;
  top: 0;
  width: 430px;
  height: 420px;
  transition: opacity 180ms ease, visibility 180ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.cloudie-pet[data-visible="false"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cloudie-pet__command-feedback {
  position: absolute;
  z-index: 14;
  left: 50%;
  bottom: calc(var(--cloudie-character-height) + 8px);
  box-sizing: border-box;
  max-width: 320px;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid rgba(215, 207, 245, .9);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  color: #514563;
  box-shadow: 0 10px 28px rgba(75, 61, 112, .17), inset 0 1px 0 rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
  font-size: calc(12px * var(--cloudie-text-scale));
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 10px) scale(.94);
}

.cloudie-pet__command-feedback::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(215, 207, 245, .9);
  border-bottom: 1px solid rgba(215, 207, 245, .9);
  background: rgba(255, 255, 255, .94);
  transform: translateX(-50%) rotate(45deg);
}

.cloudie-pet__command-feedback.is-active {
  animation: cloudie-command-feedback-rise 1200ms cubic-bezier(.2, .76, .24, 1) both;
}

.cloudie-pet--command-feedback .cloudie-pet__speech { display: none; }
.cloudie-pet--expression-only .cloudie-pet__speech,
.cloudie-pet--expression-only .cloudie-pet__command-feedback { display: none !important; }

.cloudie-pet__character {
  appearance: none;
  position: absolute;
  z-index: 4;
  left: 56px;
  bottom: 3px;
  width: 318px;
  height: 344px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: saturate(.98);
  touch-action: none;
  scale: var(--cloudie-scale);
  transform-origin: 50% 100%;
  transition: filter 160ms ease, transform 180ms cubic-bezier(.22, .78, .25, 1);
}

.cloudie-pet__character:focus-visible {
  outline: 3px solid rgba(110, 87, 222, .52);
  outline-offset: 3px;
  border-radius: 46%;
}

.cloudie-pet__character:hover {
  filter: saturate(1.05) brightness(1.015);
}

.cloudie-pet[data-interaction="following"] .cloudie-pet__character {
  transform: translate(var(--cloudie-pull-x), var(--cloudie-pull-y)) rotate(var(--cloudie-pull-angle));
}

.cloudie-pet[data-interaction="pressed"] .cloudie-pet__character {
  cursor: grabbing;
  transform: translate(var(--cloudie-pull-x), calc(var(--cloudie-pull-y) + 2px)) rotate(var(--cloudie-pull-angle)) scale(.985, 1.015);
  transition-duration: 90ms;
}

.cloudie-pet[data-interaction="dragging"] .cloudie-pet__character {
  cursor: grabbing;
  filter: saturate(1.05) brightness(1.02);
  transform: translate(var(--cloudie-pull-x), calc(var(--cloudie-pull-y) - 7px)) rotate(var(--cloudie-pull-angle)) scale(.98, 1.02);
  transition-duration: 70ms;
}

.cloudie-pet[data-interaction="released"] .cloudie-pet__character {
  animation: cloudie-drag-release 520ms cubic-bezier(.2, .82, .28, 1.18) both;
}

.cloudie-pet[data-interaction="clicked"] .cloudie-pet__character {
  animation: cloudie-click-bounce 360ms cubic-bezier(.2, .8, .24, 1.18) both;
}

.cloudie-pet__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cloudie-character-motion,
.cloudie-pose,
.cloudie-top,
.cloudie-pocket,
.cloudie-star,
.cloudie-arm,
.cloudie-foot,
.cloudie-eyes {
  transform-box: fill-box;
}

.cloudie-character-motion {
  transform-origin: 50% 88%;
  animation: cloudie-float 2.9s ease-in-out infinite;
}

.cloudie-pose { transform-origin: 50% 72%; }
.cloudie-top { transform-origin: 50% 86%; }
.cloudie-pocket { transform-origin: 50% 16%; }
.cloudie-star { transform-origin: center; }
.cloudie-arm--left { transform-origin: 82% 68%; }
.cloudie-arm--right { transform-origin: 18% 68%; }
.cloudie-foot { transform-origin: 50% 30%; }
.cloudie-eyes { transform-origin: center; }

.cloudie-pet[data-interaction="following"] .cloudie-eyes,
.cloudie-pet[data-interaction="pressed"] .cloudie-eyes,
.cloudie-pet[data-interaction="dragging"] .cloudie-eyes {
  transform: translate(var(--cloudie-look-x), var(--cloudie-look-y));
  transition: transform 100ms ease-out;
}

.cloudie-pet[data-interaction="dragging"] .cloudie-arm--left {
  transform: translateY(2px) rotate(calc(var(--cloudie-limb-angle) - 4deg));
}

.cloudie-pet[data-interaction="dragging"] .cloudie-arm--right {
  transform: translateY(2px) rotate(calc(var(--cloudie-limb-angle) + 4deg));
}

.cloudie-pet[data-interaction="dragging"] .cloudie-foot--left {
  transform: translateY(-3px) rotate(-4deg);
}

.cloudie-pet[data-interaction="dragging"] .cloudie-foot--right {
  transform: translateY(-3px) rotate(4deg);
}

/* Direct manipulation gets its own lively face. Ambient expressions are
   intentionally brief and sparse so Cloudie feels alive without distracting. */
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--open,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--thinking,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--happy,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--curious,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--confused,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--neutral,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--thinking,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--learning,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--waiting,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--confused {
  opacity: 0;
}

.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-eyes--waiting,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth--happy,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-mouth-detail--happy,
.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-blush {
  opacity: 1;
}

.cloudie-pet[data-interaction="dragging"] .cloudie-droplet__blush { opacity: .55; }

.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--open,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--thinking,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--curious,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--waiting,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--confused,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--neutral,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--thinking,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--learning,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--waiting,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--confused { opacity: 0; }
.cloudie-pet[data-interaction="released"][data-state] .cloudie-eyes--happy,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth--happy,
.cloudie-pet[data-interaction="released"][data-state] .cloudie-mouth-detail--happy { opacity: 1; }

.cloudie-pet[data-ambient-expression="blink"] .cloudie-eyes--open { opacity: 0; }
.cloudie-pet[data-ambient-expression="blink"] .cloudie-eyes--happy { opacity: 1; }

.cloudie-pet[data-ambient-expression="smile"] .cloudie-eyes--open,
.cloudie-pet[data-ambient-expression="smile"] .cloudie-mouth--neutral { opacity: 0; }
.cloudie-pet[data-ambient-expression="smile"] .cloudie-eyes--happy,
.cloudie-pet[data-ambient-expression="smile"] .cloudie-mouth--happy,
.cloudie-pet[data-ambient-expression="smile"] .cloudie-mouth-detail--happy { opacity: 1; }
.cloudie-pet[data-ambient-expression="smile"] .cloudie-pose {
  animation: cloudie-ambient-smile 1.45s cubic-bezier(.2,.78,.24,1) both;
}

.cloudie-pet[data-ambient-expression="peek"] .cloudie-eyes--open { opacity: 0; }
.cloudie-pet[data-ambient-expression="peek"] .cloudie-eyes--curious { opacity: 1; }
.cloudie-pet[data-ambient-expression="peek"] .cloudie-pose {
  animation: cloudie-ambient-peek 1.45s ease-in-out both;
}

.cloudie-pet[data-ambient-expression="puff"] .cloudie-mouth--neutral { opacity: 0; }
.cloudie-pet[data-ambient-expression="puff"] .cloudie-mouth--waiting { opacity: 1; }
.cloudie-pet[data-ambient-expression="puff"] .cloudie-top {
  animation: cloudie-ambient-puff 1.4s ease-in-out both;
}

.cloudie-star__key {
  fill: #5b4212;
  font-family: Inter, "Microsoft YaHei UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 950;
  dominant-baseline: middle;
  pointer-events: none;
}

.cloudie-pet__ambient {
  position: absolute;
  z-index: 1;
  inset: 75px 50px 36px;
  pointer-events: none;
  scale: var(--cloudie-scale);
  transform-origin: 50% 100%;
}

.cloudie-pet__ambient i {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(143, 211, 255, .64);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .95), rgba(201, 228, 255, .24) 48%, rgba(174, 148, 240, .14));
  box-shadow: inset -3px -4px 8px rgba(139, 113, 219, .12), 0 5px 14px rgba(89, 72, 144, .1);
  animation: cloudie-bubble-drift 3.6s ease-in-out infinite;
}

.cloudie-pet__ambient i:nth-child(1) { left: 5px; top: 78px; animation-delay: -1.1s; }
.cloudie-pet__ambient i:nth-child(2) { right: 2px; top: 52px; width: 13px; height: 13px; animation-delay: -.4s; }
.cloudie-pet__ambient i:nth-child(3) { right: 30px; bottom: 25px; width: 10px; height: 10px; animation-delay: -2.2s; }

html.cloudie-low-power .cloudie-character-motion {
  animation-duration: 7.2s;
}

/* Keep the transparent composition surface idle until the user reaches it.
   Continuous SVG transforms otherwise keep WebView2's compositor awake even
   when Cloudie is only sitting beside PowerPoint. */
html.cloudie-low-power .cloudie-pet:not(:hover)[data-interaction="idle"][data-state="idle"] .cloudie-character-motion,
html.cloudie-low-power .cloudie-pet:not(:hover)[data-interaction="idle"][data-state="predicting"] .cloudie-character-motion,
html.cloudie-low-power .cloudie-pet:not(:hover)[data-interaction="idle"][data-state="predicting"] .cloudie-top,
html.cloudie-low-power .cloudie-pet:not(:hover)[data-interaction="idle"][data-state="predicting"] .cloudie-pose,
html.cloudie-low-power .cloudie-pet:not(:hover)[data-interaction="idle"][data-state="predicting"] .cloudie-eyes--thinking,
html.cloudie-low-power .cloudie-pet:not(:hover) .cloudie-game-bubble {
  animation: none !important;
}

html.cloudie-low-power .cloudie-pet__ambient {
  display: none;
}

html.cloudie-low-power .cloudie-pet__speech {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(250, 248, 255, .96);
}

html.cloudie-suspended .cloudie-pet *,
html.cloudie-suspended .cloudie-pet *::before,
html.cloudie-suspended .cloudie-pet *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

.cloudie-pet__speech {
  position: absolute;
  z-index: 7;
  left: auto;
  top: auto;
  bottom: calc(var(--cloudie-character-height) + clamp(10px, 2vh, 18px));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 9px;
  width: min(244px, calc(100% - 24px));
  min-height: 62px;
  padding: 11px 15px 10px;
  border: 1px solid rgba(216, 207, 250, .9);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(248, 245, 255, .88));
  box-shadow: 0 14px 30px rgba(82, 61, 151, .12), inset 0 1px 0 rgba(255, 255, 255, .92);
  backdrop-filter: blur(13px);
  pointer-events: none;
  transform: translateY(4px) scale(.98);
  opacity: .82;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

.cloudie-pet[data-side="right"] .cloudie-pet__speech {
  left: var(--cloudie-popup-gap);
  right: auto;
}

.cloudie-pet[data-side="left"] .cloudie-pet__speech {
  right: var(--cloudie-popup-gap);
  left: auto;
}

.cloudie-material-pocket {
  position: fixed;
  z-index: 12;
  top: 16px;
  right: 16px;
  bottom: auto;
  width: 68px;
  display: grid;
  gap: 10px;
  pointer-events: auto;
  scale: clamp(1, var(--cloudie-text-scale), 1.25);
  transform-origin: right top;
}

.cloudie-material-pocket[hidden] { display: none; }

.cloudie-material-pocket button {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid rgba(202, 190, 244, .92);
  border-radius: 50%;
  background: rgba(252, 250, 255, .97);
  color: #29223a;
  box-shadow: 0 12px 28px rgba(71, 49, 128, .16);
  cursor: pointer;
  transform: translateX(calc(var(--cloudie-pocket-index, 0) * -10px));
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.cloudie-material-pocket button:hover {
  transform: translateX(calc(var(--cloudie-pocket-index, 0) * -10px - 3px));
  border-color: rgba(160, 136, 232, .96);
  box-shadow: 0 15px 32px rgba(71, 49, 128, .21);
}

.cloudie-material-pocket img,
.cloudie-material-pocket__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  background: #eee9fb;
  color: #7654d9;
  font-size: 22px;
}

.cloudie-pet[data-material-drag="accept"] .cloudie-pocket {
  filter: brightness(1.12) drop-shadow(0 0 12px rgba(136, 83, 229, .42));
  transform: scale(1.08);
}

.cloudie-pet[data-material-drag="reject"] .cloudie-pocket { filter: grayscale(.65); }

.cloudie-pet[data-material-drag="accept"] .cloudie-pet__speech,
.cloudie-pet[data-material-drag="reject"] .cloudie-pet__speech {
  position: fixed;
  top: 16px;
  left: 16px;
  right: auto;
  bottom: auto;
  width: 244px;
  scale: 1;
  transform: none;
  transform-origin: left top;
  opacity: 1;
  visibility: visible;
}

.cloudie-pet[data-material-drag="accept"] .cloudie-pet__speech::after,
.cloudie-pet[data-material-drag="reject"] .cloudie-pet__speech::after { display: none; }

.cloudie-pet__speech::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 15px;
  height: 15px;
  border-right: 1px solid rgba(216, 207, 250, .9);
  border-bottom: 1px solid rgba(216, 207, 250, .9);
  background: #faf8ff;
  transform: translateX(-50%) rotate(45deg);
}

.cloudie-pet[data-side="right"] .cloudie-pet__speech::after { left: 76%; }
.cloudie-pet[data-side="left"] .cloudie-pet__speech::after { left: 24%; }

.cloudie-pet__eyebrow {
  align-self: center;
  grid-row: 1 / span 2;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eee8ff;
  color: var(--cloudie-guide);
  font-size: calc(12.5px * var(--cloudie-text-scale));
  font-weight: 800;
  letter-spacing: .03em;
  white-space: nowrap;
}

.cloudie-pet__title {
  align-self: end;
  font-size: calc(13px * var(--cloudie-text-scale));
  line-height: 18px;
  font-weight: 900;
}

.cloudie-pet__detail {
  color: var(--cloudie-muted);
  font-size: calc(11.875px * var(--cloudie-text-scale));
  line-height: 1.4;
  font-weight: 650;
}

.cloudie-pet__detail:empty { display: none; }

.cloudie-pet[data-state="predicting"] .cloudie-pet__speech {
  grid-template-columns: auto 1fr;
  width: min(196px, calc(100% - 24px));
  min-height: 48px;
  padding: 9px 12px;
  border-radius: 16px;
}

.cloudie-pet[data-state="predicting"] .cloudie-pet__eyebrow {
  grid-row: auto;
  padding: 4px 7px;
}

.cloudie-pet[data-state="predicting"] .cloudie-pet__title {
  align-self: center;
  line-height: 17px;
  white-space: nowrap;
}

.cloudie-pet[data-state="idle"] .cloudie-pet__speech {
  opacity: .58;
  transform: translateY(7px) scale(.96);
}

.cloudie-pet[data-state="idle"]:not(.cloudie-pet--idle-hint) .cloudie-pet__speech {
  opacity: 0;
  transform: translateY(13px) scale(.92);
}

.cloudie-pet[data-state="predicting"] .cloudie-pet__speech,
.cloudie-pet[data-state="hit"] .cloudie-pet__speech,
.cloudie-pet[data-state="learning"] .cloudie-pet__speech {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.cloudie-pet[data-state="hit"] .cloudie-pet__speech {
  border-color: rgba(255, 218, 92, .72);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 250, 220, .92));
}

.cloudie-pet[data-state="learning"] .cloudie-pet__speech {
  border-color: rgba(185, 226, 216, .95);
  background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(222, 250, 242, .9));
}

.cloudie-pet__candidates {
  position: absolute;
  z-index: 8;
  top: auto;
  bottom: clamp(72px, calc(var(--cloudie-character-height) - 72px), 150px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 14px);
  width: clamp(148px, 38vw, 164px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cloudie-pet[data-side="right"] .cloudie-pet__candidates { right: 0; align-items: flex-start; }
.cloudie-pet[data-side="left"] .cloudie-pet__candidates { left: 0; align-items: flex-end; }

.cloudie-pet__candidates[hidden] { display: none; }

.cloudie-pet__idle-game {
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
}

.cloudie-pet__idle-game[hidden] { display: none; }
.cloudie-pet__idle-game.is-collecting { opacity: .72; }

.cloudie-game-bubble {
  --cloudie-hint-x: 0px;
  --cloudie-hint-scale: 1;
  appearance: none;
  position: absolute;
  width: max-content;
  min-width: 158px;
  max-width: 220px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 9px;
  border: 1px solid rgba(196, 181, 253, .72);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 9px 22px rgba(91, 68, 165, .14), inset 0 1px 0 #fff;
  color: #66558f;
  font-size: clamp(10px, calc(8px * var(--cloudie-text-scale)), 12px);
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: cloudie-game-float 4.4s ease-in-out calc(var(--cloudie-game-index) * -820ms) infinite;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, opacity 140ms ease;
}

.cloudie-game-bubble:nth-of-type(1) {
  --cloudie-hint-scale: .96;
  z-index: 2;
  left: 8px;
  top: 142px;
  opacity: .92;
}

.cloudie-game-bubble:nth-of-type(2) {
  --cloudie-hint-scale: 1;
  z-index: 3;
  right: 0;
  top: 78px;
}

.cloudie-game-bubble:nth-of-type(3) {
  --cloudie-hint-scale: .94;
  z-index: 1;
  left: 24px;
  top: 252px;
  opacity: .9;
}

.cloudie-game-bubble:hover {
  border-color: rgba(139, 92, 246, .72);
  background: rgba(248, 245, 255, .96);
  opacity: 1;
  animation-play-state: paused;
  transform: translateX(var(--cloudie-hint-x)) scale(1.02);
}

.cloudie-pet__idle-game.is-collecting .cloudie-game-bubble { pointer-events: none; }

.cloudie-game-bubble::after {
  display: none;
  content: none;
}

.cloudie-game-combo { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.cloudie-game-label { min-width: 0; overflow: hidden; color: #4f4664; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }

.cloudie-game-bubble kbd {
  padding: 2px 5px;
  border: 0;
  border-radius: 5px;
  background: #eee8ff;
  color: #5f49c7;
  font: inherit;
  font-weight: 900;
}

.cloudie-game-bubble em { color: #9c8ebd; font-style: normal; font-weight: 800; }

.cloudie-key {
  --cloudie-key-from: 12px;
  appearance: none;
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0;
  border: 0;
  color: var(--cloudie-ink);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transform: translateX(var(--cloudie-key-from)) scale(.82);
  animation: cloudie-key-in 180ms cubic-bezier(.2, .85, .35, 1.25) var(--cloudie-delay) forwards,
    cloudie-key-breathe 1.6s ease-in-out calc(var(--cloudie-delay) + 220ms) infinite;
  transition: opacity 180ms ease, filter 180ms ease;
}

.cloudie-pet[data-side="left"] .cloudie-key {
  --cloudie-key-from: -12px;
  grid-template-columns: minmax(0, 1fr) 52px;
  transform: translateX(var(--cloudie-key-from)) scale(.82);
}

.cloudie-key > span {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  grid-column: 1;
  width: 50px;
  height: 50px;
  border: 2px solid #967cf3;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(245, 241, 255, .95));
  box-shadow: 0 8px 18px rgba(90, 65, 172, .16), inset 0 1px 0 #fff;
  font-size: calc(19px * var(--cloudie-text-scale));
  font-weight: 900;
}

.cloudie-pet[data-side="left"] .cloudie-key > span { grid-column: 2; }

.cloudie-key small {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: calc(100% - 45px);
  margin-left: -7px;
  padding: 5px 7px 5px 11px;
  border-radius: 0 999px 999px 0;
  background: rgba(245, 241, 255, .94);
  color: #75669f;
  font-size: calc(10.625px * var(--cloudie-text-scale));
  line-height: 1.35;
  font-weight: 800;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 14px rgba(95, 72, 155, .1);
}

.cloudie-key__modifiers,
.cloudie-key__label {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cloudie-key__modifiers {
  color: #5f49c7;
  font-size: .82em;
  font-weight: 900;
  letter-spacing: .01em;
}

.cloudie-pet[data-side="left"] .cloudie-key small {
  grid-column: 1;
  grid-row: 1;
  margin-right: -7px;
  margin-left: 0;
  padding: 5px 11px 5px 7px;
  border-radius: 999px 0 0 999px;
  text-align: right;
}

.cloudie-key:hover > span,
.cloudie-key:focus-visible > span {
  border-color: #6e57de;
  box-shadow: 0 0 0 5px rgba(110, 87, 222, .12), 0 9px 21px rgba(85, 61, 170, .2);
}

.cloudie-key:focus-visible { outline: 0; }

.cloudie-key.is-dimmed {
  opacity: .32 !important;
  filter: grayscale(.45);
  animation: none;
  transform: scale(.94);
}

.cloudie-key.is-hit > span,
.cloudie-key.is-learned > span {
  border-color: #e3a61d;
  background: linear-gradient(145deg, #fffdf0, #fff1a9);
  box-shadow: 0 0 0 7px rgba(255, 222, 102, .28), 0 10px 22px rgba(173, 121, 17, .17);
  color: #6c5013;
  animation: cloudie-hit-ring 480ms ease-out both;
}

.cloudie-key.is-learned > span {
  border-color: #9984eb;
  background: linear-gradient(145deg, #fff, #e7fff8);
  box-shadow: 0 0 0 7px rgba(190, 242, 226, .38), 0 10px 22px rgba(90, 130, 119, .14);
  color: #4f417c;
}

.cloudie-pet__hint {
  position: absolute;
  z-index: 6;
  left: 164px;
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid rgba(218, 208, 249, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  color: #746692;
  font-size: calc(11.25px * var(--cloudie-text-scale));
  font-weight: 760;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}

.cloudie-pet--idle-hint[data-state="idle"] .cloudie-pet__hint {
  opacity: .72;
  transform: translateY(0);
}

.cloudie-pet__hint kbd {
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: #eee8ff;
  color: #5f49c7;
  font: inherit;
  font-weight: 900;
}

.cloudie-eyes--thinking,
.cloudie-eyes--happy,
.cloudie-eyes--curious,
.cloudie-eyes--waiting,
.cloudie-eyes--confused,
.cloudie-mouth--thinking,
.cloudie-mouth--happy,
.cloudie-mouth--learning,
.cloudie-mouth--waiting,
.cloudie-mouth--confused,
.cloudie-mouth-detail,
.cloudie-star,
.cloudie-thought {
  opacity: 0;
  transform-origin: center;
  transition: opacity 120ms ease;
}

.cloudie-blush {
  opacity: .52;
  transform-origin: center;
  transition: opacity 120ms ease;
}

.cloudie-droplet__blush {
  transition: opacity 120ms ease;
}

.cloudie-pet[data-state="predicting"] .cloudie-eyes--open,
.cloudie-pet[data-state="predicting"] .cloudie-mouth--neutral,
.cloudie-pet[data-state="retracting"] .cloudie-eyes--open,
.cloudie-pet[data-state="retracting"] .cloudie-mouth--neutral,
.cloudie-pet[data-state="hit"] .cloudie-eyes--open,
.cloudie-pet[data-state="hit"] .cloudie-mouth--neutral,
.cloudie-pet[data-state="learning"] .cloudie-eyes--open,
.cloudie-pet[data-state="learning"] .cloudie-mouth--neutral {
  opacity: 0;
}

.cloudie-pet[data-state="predicting"] .cloudie-eyes--thinking,
.cloudie-pet[data-state="predicting"] .cloudie-mouth--thinking,
.cloudie-pet[data-state="retracting"] .cloudie-eyes--waiting,
.cloudie-pet[data-state="retracting"] .cloudie-mouth--waiting {
  opacity: 1;
}

.cloudie-pet[data-state="hit"] .cloudie-eyes--happy,
.cloudie-pet[data-state="hit"] .cloudie-mouth--happy,
.cloudie-pet[data-state="hit"] .cloudie-mouth-detail--happy,
.cloudie-pet[data-state="hit"] .cloudie-blush {
  opacity: 1;
}

.cloudie-pet[data-state="hit"] .cloudie-droplet__blush {
  opacity: .48;
}

.cloudie-pet[data-state="hit"] .cloudie-star {
  opacity: 1;
  transform-origin: center;
  animation: cloudie-star-pop 480ms cubic-bezier(.17, .85, .22, 1.3) both;
}

.cloudie-pet[data-state="hit"] .cloudie-character-motion {
  animation: cloudie-happy-jump 480ms cubic-bezier(.2, .8, .25, 1) both;
}

.cloudie-pet[data-state="hit"] .cloudie-arm--left {
  animation: cloudie-hit-wave 480ms cubic-bezier(.2, .82, .24, 1.12) both;
}

/* Successful plugin actions never use the failure/curious face.  The host
   chooses one of these positive variants for every completed operation. */
.cloudie-pet[data-state="hit"][data-feedback="wink"] .cloudie-eyes--happy,
.cloudie-pet[data-state="hit"][data-feedback="proud"] .cloudie-eyes--happy { opacity: 0; }
.cloudie-pet[data-state="hit"][data-feedback="wink"] .cloudie-eyes--waiting,
.cloudie-pet[data-state="hit"][data-feedback="proud"] .cloudie-eyes--open { opacity: 1; }
.cloudie-pet[data-state="hit"][data-feedback="proud"] .cloudie-mouth--happy { opacity: 0; }
.cloudie-pet[data-state="hit"][data-feedback="proud"] .cloudie-mouth--neutral { opacity: 1; }
.cloudie-pet[data-state="hit"][data-feedback="wave"] .cloudie-character-motion { animation: none; }
.cloudie-pet[data-state="hit"][data-feedback="wave"] .cloudie-arm--left {
  animation-duration: 720ms;
  animation-iteration-count: 2;
}

.cloudie-pet[data-state="learning"] .cloudie-eyes--curious,
.cloudie-pet[data-state="learning"] .cloudie-mouth--learning,
.cloudie-pet[data-state="learning"] .cloudie-thought {
  opacity: 1;
}

.cloudie-pet[data-state="learning"] .cloudie-pose {
  animation: cloudie-curious-tilt 350ms ease-in-out both;
}

.cloudie-pet[data-state="retracting"] .cloudie-pet__candidates {
  opacity: 0;
  transform: translateY(-10px) scale(.94);
  transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(.22, .7, .24, 1);
}

.cloudie-pet[data-state="retracting"] .cloudie-pet__speech {
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition-duration: 1100ms;
  transition-timing-function: cubic-bezier(.22, .7, .24, 1);
}

.cloudie-pet[data-state="retracting"] .cloudie-pocket {
  animation: cloudie-pocket-pulse 700ms ease-out both;
}

.cloudie-pet.cloudie-pet--collecting-star[data-state="retracting"] .cloudie-star {
  opacity: 1;
  animation: cloudie-star-to-pocket 920ms cubic-bezier(.3,.72,.24,1) both;
}

.cloudie-pet.cloudie-pet--collecting-star .cloudie-pet__speech {
  opacity: 0;
  transform: translateY(-5px) scale(.96);
  pointer-events: none;
}

.cloudie-pet.cloudie-pet--collecting-star[data-state="retracting"] .cloudie-pocket {
  animation: cloudie-pocket-pulse 700ms ease-out 560ms both;
}

.cloudie-pet[data-state="predicting"] .cloudie-top {
  animation: cloudie-top-think 900ms ease-in-out infinite;
}

.cloudie-pet[data-state="predicting"] .cloudie-pose {
  animation: cloudie-thinking-sway 1.8s ease-in-out infinite;
}

.cloudie-pet[data-side="right"] { --cloudie-gaze-x: 4px; }
.cloudie-pet[data-side="left"] { --cloudie-gaze-x: -4px; }

.cloudie-pet[data-state="predicting"] .cloudie-eyes--thinking {
  animation: cloudie-look-candidates 1.15s ease-in-out infinite alternate;
}

.cloudie-pet[data-interaction="following"][data-state="predicting"] .cloudie-eyes--thinking,
.cloudie-pet[data-interaction="pressed"][data-state="predicting"] .cloudie-eyes--thinking,
.cloudie-pet[data-interaction="dragging"][data-state="predicting"] .cloudie-eyes--thinking {
  animation: none;
  transform: translate(var(--cloudie-look-x), var(--cloudie-look-y));
}

.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-character-motion {
  animation: none;
  transform: translateY(-3px);
}

.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-pose {
  animation: none;
}

.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-top {
  animation: none;
  transform: translateY(-2px) rotate(var(--cloudie-counter-angle));
}

.cloudie-pet[data-interaction="dragging"][data-state] .cloudie-arm--left {
  animation: none;
}

.cloudie-pet[data-interaction="clicked"][data-state] .cloudie-pose {
  animation: cloudie-click-nod 360ms cubic-bezier(.2, .8, .24, 1.12) both;
}

.cloudie-pet[data-state="hidden"] .cloudie-character-motion { animation: none; }

.cloudie-pet[data-visible="false"] .cloudie-character-motion,
.cloudie-pet[data-visible="false"] .cloudie-pet__ambient i {
  animation: none;
}

@keyframes cloudie-float {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  46% { transform: translateY(-4px) rotate(.45deg); }
  68% { transform: translateY(-2.5px) rotate(.15deg); }
}

@keyframes cloudie-ambient-smile {
  0%, 100% { transform: translateY(0) rotate(0); }
  42% { transform: translateY(-3px) rotate(-1.4deg); }
  68% { transform: translateY(-1px) rotate(.8deg); }
}

@keyframes cloudie-ambient-peek {
  0%, 100% { transform: translateX(0) rotate(0); }
  36%, 68% { transform: translateX(3px) rotate(1.8deg); }
}

@keyframes cloudie-ambient-puff {
  0%, 100% { transform: translateY(0) scale(1); }
  42% { transform: translateY(-2px) scale(.94, 1.05); }
  70% { transform: translateY(0) scale(1.025, .98); }
}

@keyframes cloudie-drag-release {
  0% { transform: translate(var(--cloudie-pull-x), calc(var(--cloudie-pull-y) - 7px)) rotate(var(--cloudie-pull-angle)) scale(.98, 1.02); }
  48% { transform: translate(-1px, 2px) rotate(-1.2deg) scale(1.012, .988); }
  72% { transform: translate(1px, -1px) rotate(.6deg) scale(.996, 1.004); }
  100% { transform: translate(0, 0) rotate(0) scale(1); }
}

@keyframes cloudie-command-feedback-rise {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.94); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  68% { opacity: 1; transform: translate(-50%, -7px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(.98); }
}

@keyframes cloudie-click-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  34% { transform: translateY(3px) scale(1.025, .975); }
  66% { transform: translateY(-4px) scale(.99, 1.01); }
}

@keyframes cloudie-click-nod {
  0%, 100% { transform: rotate(0); }
  36% { transform: rotate(2.5deg) translateY(2px); }
  68% { transform: rotate(-1deg) translateY(-1px); }
}

@keyframes cloudie-bubble-drift {
  0%, 100% { transform: translateY(3px) scale(.92); opacity: .46; }
  50% { transform: translateY(-8px) scale(1.06); opacity: .82; }
}

@keyframes cloudie-game-float {
  0%, 100% { transform: translate(var(--cloudie-hint-x), 0) scale(var(--cloudie-hint-scale)) rotate(-.7deg); }
  50% { transform: translate(var(--cloudie-hint-x), -5px) scale(var(--cloudie-hint-scale)) rotate(.7deg); }
}

@keyframes cloudie-key-in {
  0% { opacity: 0; transform: translateX(var(--cloudie-key-from)) scale(.82); }
  70% { opacity: 1; transform: translateX(0) scale(1.04); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes cloudie-key-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes cloudie-hit-ring {
  0% { transform: scale(.92); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1.04); }
}

@keyframes cloudie-happy-jump {
  0% { transform: translateY(0) scale(1); }
  18% { transform: translateY(2px) scale(1.025, .975); }
  44% { transform: translateY(-10px) scale(.985, 1.025); }
  74% { transform: translateY(2px) scale(1.012, .988); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes cloudie-hit-wave {
  0%, 100% { transform: rotate(0); }
  34% { transform: rotate(-10deg); }
  62% { transform: rotate(7deg); }
  82% { transform: rotate(-3deg); }
}

@keyframes cloudie-thinking-sway {
  0%, 100% { transform: rotate(-.8deg) translateY(0); }
  50% { transform: rotate(1deg) translateY(-1.5px); }
}

@keyframes cloudie-star-pop {
  0% { opacity: 0; transform: translate(-22px, 20px) scale(.2) rotate(-28deg); }
  58% { opacity: 1; transform: translate(0, -5px) scale(1.16) rotate(8deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}

@keyframes cloudie-star-to-pocket {
  0% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
  28% { opacity: 1; transform: translate(-36px, 38px) scale(.86) rotate(-8deg); }
  78% { opacity: .96; transform: translate(-156px, 190px) scale(.4) rotate(18deg); }
  100% { opacity: 0; transform: translate(-176px, 215px) scale(.16) rotate(26deg); }
}

@keyframes cloudie-curious-tilt {
  0%, 100% { transform: rotate(0); }
  45%, 72% { transform: rotate(4deg); }
}

@keyframes cloudie-pocket-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

@keyframes cloudie-top-think {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-2px); }
}

@keyframes cloudie-look-candidates {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--cloudie-gaze-x)); }
}

@media (prefers-reduced-motion: reduce) {
  .cloudie-pet *,
  .cloudie-pet *::before,
  .cloudie-pet *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}