/* KiaraX Agents mascots (blob.mjs v2.1). Size with --kxb-size; the glow is the palette's light (--kxb-glow, set by JS).
   Prop motion (activities) is CSS for every blob; body motion is CSS only for still blobs (small / data-kxb-still), the
   live ones move by the rAF physics in blob.mjs. Chat size (<= 48 px) props are badges (.kxb-p--s, .kxb-ps-*).
   Reduced motion: every loop off, props shown in their key pose. */
.kxb { --kxb-size: 96px; position: relative; display: inline-block; flex: none; width: var(--kxb-size); height: var(--kxb-size); isolation: isolate; vertical-align: middle; }
.kxb > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kxb-glow { position: absolute; inset: -16%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--kxb-glow, rgba(200, 180, 255, .5)), transparent 74%);
  animation: kxb-glow 5.2s ease-in-out infinite; animation-delay: var(--kxb-d, 0s); }
@keyframes kxb-glow { 50% { opacity: .62; transform: scale(.93); } }
.kxb--felt .kxb-glow { inset: -8%; }
.kxb--drag { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.kxb--grab { cursor: grabbing; }
.kxb-frame { transition: transform .5s cubic-bezier(.32, 1.42, .52, 1); }
.kxb-body { transition: filter .8s ease; }
/* stopped / failed: the body loses its colour for as long as the activity stays "error" */
.kxb--act-error .kxb-body { filter: saturate(.28) brightness(.94); }
.kxb--act-error .kxb-glow { filter: saturate(.2); }

/* still blobs (small, or data-kxb-still): one shape, breathing + blinking in CSS */
.kxb--still > svg { transform-origin: 50% 88%; animation: kxb-breathe 4.6s ease-in-out infinite; animation-delay: var(--kxb-d, 0s); }
@keyframes kxb-breathe { 50% { transform: scale(1.035, .972); } }
.kxb--still .kxb-eyes { transform-box: fill-box; transform-origin: center; animation: kxb-blink 6.2s infinite; animation-delay: var(--kxb-d, 0s); }
@keyframes kxb-blink { 0%, 94%, 100% { transform: none; } 96.5% { transform: scaleY(.12); } }
/* still body motion per activity */
.kxb--still.kxb--m-type .kxb-mot { animation: kxb-type .2s ease-in-out infinite alternate; }
.kxb--still.kxb--m-bounce .kxb-mot { animation: kxb-bounce 1.3s ease-in-out infinite; }
.kxb--still.kxb--m-bob .kxb-mot { animation: kxb-bob 1.6s ease-in-out infinite alternate; }
.kxb--still.kxb--m-sway .kxb-mot { animation: kxb-sway 3s ease-in-out infinite alternate; }
.kxb--still.kxb--m-scan .kxb-mot { animation: kxb-sway 1.8s ease-in-out infinite alternate; }
.kxb--still.kxb--m-hop1 .kxb-mot { animation: kxb-hop1 1s cubic-bezier(.3, .6, .4, 1) 1 both; }
.kxb--still.kxb--m-shake .kxb-mot { animation: kxb-shake .42s ease-in-out 4 both; }
@keyframes kxb-type { to { transform: translateY(-1.6px); } }
@keyframes kxb-bob { to { transform: translateY(-2px); } }
@keyframes kxb-sway { from { transform: rotate(-2.6deg); } to { transform: rotate(2.6deg); } }
@keyframes kxb-bounce { 0%, 100% { transform: none; } 45% { transform: translateY(-8px) scale(.97, 1.03); } 82% { transform: scale(1.05, .95); } }
@keyframes kxb-hop1 { 0% { transform: none; } 12% { transform: scale(1.13, .84); } 34% { transform: translateY(-24px) scale(.9, 1.12); } 52% { transform: translateY(-6px) scale(.96, 1.04); } 60% { transform: scale(1.13, .85); } 74% { transform: scale(.96, 1.04); } 87% { transform: scale(1.02, .98); } 100% { transform: none; } }
@keyframes kxb-shake { 25% { transform: translateX(-3.4px) rotate(-3deg); } 75% { transform: translateX(3.4px) rotate(3deg); } }

/* props: pop in with the nub hands, pop out when the activity changes */
.kxb-p { transform-box: fill-box; transform-origin: center; animation: kxb-pin .44s cubic-bezier(.3, 1.6, .45, 1) both; }
.kxb-p.is-out { animation: kxb-pout .2s ease-in forwards; }
@keyframes kxb-pin { from { transform: scale(.3); opacity: 0; } }
@keyframes kxb-pout { to { transform: scale(.4); opacity: 0; } }
.kxb-hand { transform-box: fill-box; transform-origin: center; }
/* think: the bubble floats, the dots go one after another */
.kxb-p--think .kxb-bub, .kxb-p--talk .kxb-bub { animation: kxb-bubf 2.6s ease-in-out infinite alternate; }
@keyframes kxb-bubf { to { transform: translateY(-3px); } }
.kxb-dot { transform-box: fill-box; transform-origin: center; animation: kxb-dot 1.2s ease-in-out infinite; opacity: .35; }
.kxb-dot2 { animation-delay: .16s; } .kxb-dot3 { animation-delay: .32s; }
@keyframes kxb-dot { 0%, 62%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-3.5px) scale(1.12); opacity: 1; } }
/* search: the magnifier is held beside the face and sweeps outward (never over the eyes); the eyes follow it
   (live blobs in JS, still blobs here) */
.kxb-mag { animation: kxb-sweep 1.8s ease-in-out infinite alternate; }
@keyframes kxb-sweep { from { transform: rotate(-3deg); } to { transform: rotate(7deg) translate(5px, 2px); } }
.kxb--still.kxb--scan .kxb-look { animation: kxb-scan 1.8s ease-in-out infinite alternate; animation-delay: var(--kxb-ad, 0s); }
@keyframes kxb-scan { from { transform: translateX(-1.6px); } to { transform: translateX(2.4px); } }
/* work: typing behind the lid, the screen light flickers on the face */
.kxb-key1, .kxb-key2 { animation: kxb-key .19s ease-in-out infinite alternate; }
.kxb-key2 { animation-delay: -.11s; animation-duration: .23s; }
@keyframes kxb-key { to { transform: translateY(-4.6px); } }
.kxb-screenglow, .kxb-lidlight { animation: kxb-flicker 2.3s ease-in-out infinite; }
@keyframes kxb-flicker { 0%, 100% { opacity: .9; } 35% { opacity: .62; } 55% { opacity: 1; } 78% { opacity: .78; } }
/* desktop: a cursor moves, clicks the button; the hand on the trackpad follows */
.kxb-cursor { transform: translate(146px, 100px); animation: kxb-cur 3.4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes kxb-cur { 0%, 100% { transform: translate(146px, 100px); } 28% { transform: translate(160px, 116px); } 32% { transform: translate(160px, 116px) scale(.86); } 37%, 48% { transform: translate(160px, 116px); } 70% { transform: translate(134px, 110px); } 86% { transform: translate(140px, 98px); } }
.kxb-click { transform-box: fill-box; transform-origin: center; opacity: 0; animation: kxb-click 3.4s ease-out infinite; }
@keyframes kxb-click { 0%, 31% { opacity: 0; transform: scale(.3); } 33% { opacity: 1; transform: scale(.5); } 52%, 100% { opacity: 0; transform: scale(1.7); } }
.kxb-btn { animation: kxb-btn 3.4s infinite; }
@keyframes kxb-btn { 0%, 31%, 46%, 100% { opacity: .75; } 33%, 40% { opacity: 1; } }
.kxb-mouse { animation: kxb-mouse 3.4s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes kxb-mouse { 0%, 100% { transform: none; } 28%, 48% { transform: translate(3.5px, 3px); } 32% { transform: translate(3.5px, 4.5px) scale(.92); } 70% { transform: translate(-3px, 2px); } 86% { transform: translate(-1.5px, -.5px); } }
/* write: the pencil writes three lines, the lines draw themselves, then the page clears */
.kxb-pen { animation: kxb-pen 3.6s linear infinite; }
@keyframes kxb-pen { 0% { transform: none; } 26% { transform: translate(52px, 0); } 30% { transform: translate(0, 12px); } 56% { transform: translate(52px, 12px); } 60% { transform: translate(0, 24px); } 80% { transform: translate(41px, 24px); } 88% { transform: translate(48px, 8px); } 100% { transform: none; } }
.kxb-scrib { animation: kxb-scrib .14s ease-in-out infinite alternate; }
@keyframes kxb-scrib { to { transform: translateY(-1.8px); } }
.kxb-ln { stroke-dashoffset: 1; animation: 3.6s linear infinite; }
.kxb-ln1 { animation-name: kxb-ln1; } .kxb-ln2 { animation-name: kxb-ln2; } .kxb-ln3 { animation-name: kxb-ln3; }
@keyframes kxb-ln1 { 0% { stroke-dashoffset: 1; opacity: 1; } 26%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kxb-ln2 { 0%, 30% { stroke-dashoffset: 1; opacity: 1; } 56%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes kxb-ln3 { 0%, 60% { stroke-dashoffset: 1; opacity: 1; } 80%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* create: the brush dabs, paint sparkles pop where it touches */
.kxb-brush { transform-origin: 152px 150px; animation: kxb-dab 1.1s ease-in-out infinite; }
@keyframes kxb-dab { 0%, 100% { transform: none; } 30% { transform: rotate(-15deg); } 46% { transform: rotate(5deg); } 64% { transform: rotate(-9deg); } }
.kxb-spk { transform-box: fill-box; transform-origin: center; animation: kxb-spk 1.1s ease-out infinite; opacity: 0; }
.kxb-spk2 { animation-delay: .27s; } .kxb-spk3 { animation-delay: .55s; } .kxb-spk4 { animation-delay: .8s; }
@keyframes kxb-spk { 0% { transform: scale(0) rotate(0); opacity: 0; } 30% { transform: scale(1.25) rotate(20deg); opacity: 1; } 65% { transform: scale(.8) rotate(35deg); opacity: .85; } 100% { transform: scale(0) rotate(50deg); opacity: 0; } }
/* talk: the bars in the bubble are the voice */
.kxb-eq { transform-box: fill-box; transform-origin: center; animation: kxb-eq .42s ease-in-out infinite alternate; }
.kxb-eq1 { animation-delay: -.1s; } .kxb-eq2 { animation-delay: -.32s; animation-duration: .36s; } .kxb-eq3 { animation-delay: -.2s; animation-duration: .5s; } .kxb-eq4 { animation-delay: -.05s; animation-duration: .38s; } .kxb-eq5 { animation-delay: -.27s; }
@keyframes kxb-eq { from { transform: scaleY(.24); } to { transform: scaleY(1); } }
/* phone: messages arrive, the hand taps, a ring on the screen */
.kxb-tap { animation: kxb-tap 1s ease-in-out infinite; }
@keyframes kxb-tap { 0%, 100% { transform: none; } 36% { transform: translate(-11px, -3px); } 46% { transform: translate(-12px, 1px) scale(.9); } 62% { transform: translate(-6px, -4px); } }
.kxb-tapring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: kxb-tring 1s ease-out infinite; }
@keyframes kxb-tring { 0%, 44% { opacity: 0; transform: scale(.3); } 47% { opacity: 1; transform: scale(.5); } 85%, 100% { opacity: 0; transform: scale(1.7); } }
.kxb-msg { transform-box: fill-box; transform-origin: 0 50%; }
.kxb-msg2 { animation: kxb-msg2 3s ease-out infinite; } .kxb-msg3 { animation: kxb-msg3 3s ease-out infinite; }
@keyframes kxb-msg2 { 0%, 25% { opacity: 0; transform: scale(.4); } 33%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes kxb-msg3 { 0%, 55% { opacity: 0; transform: scale(.4); } 63%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* wait: the ? bubble bobs patiently */
.kxb-p--wait .kxb-bub { transform-origin: 136px 74px; animation: kxb-ask 1.3s ease-in-out infinite alternate; }
@keyframes kxb-ask { from { transform: rotate(-5deg) translateY(1px); } to { transform: rotate(5deg) translateY(-3px); } }
/* done: one burst of confetti + sparkles, then rest */
.kxb-cf { opacity: 0; animation: kxb-conf 1.25s cubic-bezier(.12, .75, .3, 1) var(--dl, 0s) 1 both; }
@keyframes kxb-conf { 0% { transform: scale(.2); opacity: 0; } 10% { opacity: 1; } 55% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .6)); opacity: 1; } 100% { transform: translate(calc(var(--dx) * 1.12), calc(var(--dy) + 34px)) rotate(var(--r)) scale(.8); opacity: 0; } }
.kxb-tw { transform-box: fill-box; transform-origin: center; opacity: 0; animation: kxb-tw 1.4s ease-out 1 both; }
.kxb-tw1 { animation-delay: .08s; } .kxb-tw2 { animation-delay: .22s; } .kxb-tw3 { animation-delay: .38s; } .kxb-tw4 { animation-delay: .5s; }
@keyframes kxb-tw { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1.3) rotate(25deg); opacity: 1; } 100% { transform: scale(0) rotate(60deg); opacity: 0; } }
/* the sparkle badge after "done": pops in after the confetti, twinkles, stays 4 s */
.kxb-badge { transform-box: fill-box; transform-origin: center; opacity: 0; animation: kxb-badge 4.2s ease-out 1 both; }
@keyframes kxb-badge { 0%, 10% { opacity: 0; transform: scale(0) rotate(-40deg); } 18% { opacity: 1; transform: scale(1.3) rotate(8deg); } 24% { transform: scale(.94); } 30% { transform: none; } 50% { transform: scale(1.1) rotate(10deg); } 70% { transform: none; } 88% { opacity: 1; } 100% { opacity: 0; transform: scale(.7); } }
/* error: dizzy stars orbit, then fade; a sweat drop when it calms down, and it stays */
.kxb-orbit { animation: kxb-orbit 1.1s linear infinite; }
@keyframes kxb-orbit { to { transform: rotate(360deg); } }
.kxb-dizzy { animation: kxb-fade .45s 1.75s ease-in forwards; }
@keyframes kxb-fade { to { opacity: 0; } }
.kxb-sweat { opacity: 0; animation: kxb-sweat-in .5s 1.95s ease-out forwards, kxb-drip 2.6s 2.45s ease-in-out infinite; }
@keyframes kxb-sweat-in { from { opacity: 0; transform: translateY(-5px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes kxb-drip { 0%, 100% { transform: none; } 50% { transform: translateY(2.4px) scaleY(1.06); } }

/* chat-size badges (<= 48 px) */
.kxb-ps-mag { animation: kxb-psmag 1.5s ease-in-out infinite alternate; }
@keyframes kxb-psmag { from { transform: rotate(-9deg); } to { transform: rotate(7deg); } }
.kxb-ps-bar1, .kxb-ps-bar2 { transform-box: fill-box; transform-origin: 0 50%; animation: kxb-psbar 1.6s steps(4, end) infinite; }
.kxb-ps-bar2 { animation-delay: -.8s; }
@keyframes kxb-psbar { 0% { transform: scaleX(.25); } 100% { transform: scaleX(1); } }
.kxb-ps-caret { animation: kxb-caret .9s steps(1, end) infinite; }
@keyframes kxb-caret { 50% { opacity: 0; } }
.kxb-ps-cur { transform: translate(134px, 124px); animation: kxb-pscur 3s cubic-bezier(.5, 0, .3, 1) infinite; }
@keyframes kxb-pscur { 0%, 100% { transform: translate(134px, 124px); } 36% { transform: translate(164px, 140px); } 41% { transform: translate(164px, 140px) scale(.84); } 46%, 60% { transform: translate(164px, 140px); } 80% { transform: translate(144px, 150px); } }
.kxb-ps-click { transform-box: fill-box; transform-origin: center; opacity: 0; animation: kxb-click 3s ease-out infinite; animation-delay: .1s; }
.kxb-ps-pen { animation: kxb-pspen .34s ease-in-out infinite alternate; }
@keyframes kxb-pspen { from { transform: translate(-5px, 2px); } to { transform: translate(4px, -2px); } }
.kxb-ps-brush { animation: kxb-psbrush 1s ease-in-out infinite; }
@keyframes kxb-psbrush { 0%, 100% { transform: none; } 35% { transform: rotate(-14deg); } 60% { transform: rotate(6deg); } }

/* app tile (refs 37 / 39): black rounded square, the blob inside, a sparkle */
.kxb-tile { --kxb-tile: 120px; position: relative; display: inline-grid; place-items: center; width: var(--kxb-tile); height: var(--kxb-tile); flex: none;
  border-radius: 24%; background: radial-gradient(80% 80% at 50% 45%, #1b1726, #0a090e 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .12), 0 18px 40px rgba(0, 0, 0, .45); overflow: hidden; }
.kxb-tile > .kxb { --kxb-size: 74%; }
.kxb-tile::after { content: ''; position: absolute; top: 12%; right: 12%; width: 13%; aspect-ratio: 1; background: #fff; opacity: .9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C54 38 62 46 100 50C62 54 54 62 50 100C46 62 38 54 0 50C38 46 46 38 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0C54 38 62 46 100 50C62 54 54 62 50 100C46 62 38 54 0 50C38 46 46 38 50 0Z'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .kxb-glow, .kxb--still > svg, .kxb--still .kxb-eyes, .kxb-mot, .kxb-p, .kxb-p *, .kxb--scan .kxb-look { animation: none !important; }
  .kxb-frame, .kxb-body { transition: none; }
  .kxb-dot, .kxb-ln, .kxb-msg2, .kxb-msg3, .kxb-tw, .kxb-spk, .kxb-badge, .kxb-sweat { opacity: 1; stroke-dashoffset: 0; }
  .kxb-cf { opacity: 1; transform: translate(calc(var(--dx) * .7), calc(var(--dy) * .7)) rotate(var(--r)); }
  .kxb-cursor { transform: translate(160px, 116px); }
  .kxb-ps-cur { transform: translate(164px, 140px); }
  .kxb-dizzy, .kxb-click, .kxb-ps-click, .kxb-tapring { opacity: 0; }
}