/* Karakter Suvi di mode suara: gerak tubuh per emosi/aktivitas, tangan, aksesori gaya hidup, dan efek di sekitarnya.
   --lv = intensitas emosi (0.6 ringan … 1.5 kuat): gerak lebih cepat & lebih jauh saat emosi kuat. */
.voice-orb.has-vbuddy{width:min(62vw,260px);aspect-ratio:1;margin-bottom:18px}
.vbuddy{position:relative;width:100%;height:100%;--lv:1;--spd:calc(1s / var(--lv))}
.vbuddy-svg{width:100%;height:100%;overflow:visible;display:block;filter:drop-shadow(0 10px 18px rgba(60,40,20,.16))}
.vbuddy-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.vbuddy-props{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;transform-origin:50% 91%;will-change:transform}
.vbuddy-body,.vbuddy-antenna,.vbuddy-ear,.vbuddy-shadow,.vbuddy-arm,.vbuddy-prop,.vbuddy-foot{transform-box:fill-box;transform-origin:50% 100%}
.vbuddy-arm.l{transform-origin:70% 15%}.vbuddy-arm.r,.vbuddy-prop{transform-origin:20% 15%}
.vbuddy-blink{transform-box:fill-box;transform-origin:center;animation:bd-blink 4.6s infinite}
.vbuddy-talk{transform-box:fill-box;transform-origin:50% 30%;transition:transform .09s ease-out}
.vbuddy-cheeks{transition:opacity .35s}
.vbuddy-face{transform-box:fill-box;transform-origin:center;animation:bd-face-in .28s cubic-bezier(.3,1.5,.5,1)}
.vbuddy-heart-eyes,.vbuddy-star-eyes{transform-box:fill-box;transform-origin:center;animation:bd-pulse .75s ease-in-out infinite}
.vbuddy-star-eyes{animation:bd-spin-pulse 1.4s ease-in-out infinite}
.vbuddy-flame{transform-box:fill-box;transform-origin:50% 100%;animation:bd-flame .5s ease-in-out infinite alternate}
.vbuddy-life{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:600;color:var(--ink-2,#5a5068);background:var(--surface,#fff);border:1px solid var(--line,#0001);padding:3px 10px;border-radius:999px;box-shadow:0 2px 8px #0000000f;animation:bd-pop-in .35s ease both}

/* Gerak tubuh (vb-a-*) */
.vb-a-float .vbuddy-body{animation:bd-float 3.4s ease-in-out infinite}
.vb-a-still .vbuddy-body{animation:bd-float 6s ease-in-out infinite}
.vb-a-breathe .vbuddy-body{animation:bd-breathe 4s ease-in-out infinite}
.vb-a-hop .vbuddy-body{animation:bd-hop calc(var(--spd) * .75) cubic-bezier(.3,1.6,.5,1) infinite}
.vb-a-bounce .vbuddy-body{animation:bd-hop calc(var(--spd) * .5) cubic-bezier(.3,1.6,.5,1) infinite}
.vb-a-laugh .vbuddy-body{animation:bd-laugh calc(var(--spd) * .28) ease-in-out infinite}
.vb-a-sway .vbuddy-body{animation:bd-sway calc(var(--spd) * 1.7) ease-in-out infinite}
.vb-a-squish .vbuddy-body{animation:bd-squish calc(var(--spd) * .9) ease-in-out infinite}
.vb-a-dance .vbuddy-body{animation:bd-dance calc(var(--spd) * .8) ease-in-out infinite}
.vb-a-jump .vbuddy-body{animation:bd-jump .55s cubic-bezier(.2,1.8,.4,1) 1,bd-float 3.4s ease-in-out .55s infinite}
.vb-a-tilt .vbuddy-body{animation:bd-tilt calc(var(--spd) * 2.2) ease-in-out infinite}
.vb-a-nod .vbuddy-body{animation:bd-nod calc(var(--spd) * .9) ease-in-out 3,bd-float 3.4s ease-in-out 2.7s infinite}
.vb-a-puff .vbuddy-body{animation:bd-puff 2.2s ease-in-out infinite}
.vb-a-droop .vbuddy-body{animation:bd-droop 3.6s ease-in-out infinite}
.vb-a-sob .vbuddy-body{animation:bd-sob calc(var(--spd) * .5) ease-in-out infinite}
.vb-a-shrink .vbuddy-body{animation:bd-shrink 2.4s ease-in-out infinite}
.vb-a-shiver .vbuddy-body{animation:bd-shiver .18s linear infinite}
.vb-a-shake .vbuddy-body{animation:bd-shiver calc(var(--spd) * .14) linear infinite}
.vb-a-shakeno .vbuddy-body{animation:bd-no .55s ease-in-out 3,bd-float 3.4s ease-in-out 1.7s infinite}
.vb-a-wobble .vbuddy-body{animation:bd-wobble 1.4s ease-in-out infinite}
.vb-a-lean .vbuddy-body{animation:bd-lean 2.4s ease-in-out infinite}
.vb-a-bob .vbuddy-body{animation:bd-bob .5s ease-in-out infinite alternate}
.vb-a-pump .vbuddy-body{animation:bd-hop .9s ease-in-out infinite}.vb-a-pump .vbuddy-prop{animation:bd-pump .9s ease-in-out infinite}
.vb-a-run .vbuddy-body{animation:bd-run .36s ease-in-out infinite}.vb-a-run .vbuddy-foot.l{animation:bd-step .36s ease-in-out infinite}.vb-a-run .vbuddy-foot.r{animation:bd-step .36s ease-in-out .18s infinite}
.vb-a-sad .vbuddy-antenna,.vb-a-droop .vbuddy-antenna,.vb-a-sob .vbuddy-antenna{transform:rotate(-14deg)}
.is-strong .vbuddy-cheeks{filter:saturate(1.3)}

/* Aktivitas */
.vb-act-listening .vbuddy-antenna path:first-child{animation:bd-antenna-glow 1.2s ease-in-out infinite}
.vb-act-listening .vbuddy-ear{animation:bd-ear 1.2s ease-in-out infinite}
.vb-act-thinking .vbuddy-antenna{animation:bd-spin 1.6s linear infinite;transform-origin:50% 60%}

/* Tangan */
.vb-arm-wave .vbuddy-arm.r{animation:bd-wave-arm .5s ease-in-out infinite alternate}
.vb-arm-hold .vbuddy-arm.r{transform:rotate(-38deg) translate(-2%,-6%)}
.vbuddy-prop{animation:bd-prop 3.4s ease-in-out infinite}

/* Efek */
.vbfx-layer{position:absolute;inset:0;pointer-events:none}
.vbfx{position:absolute;pointer-events:none;font-weight:800;line-height:1;user-select:none}
.vbfx-wave{top:40%;width:22%;height:22%;border:3px solid var(--orb,#c0603a);border-radius:50%;opacity:0;animation:bd-wave 1.6s ease-out infinite}
.vbfx-wave.l{left:-12%;border-right-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.vbfx-wave.r{right:-12%;border-left-color:transparent;border-top-color:transparent;border-bottom-color:transparent}
.vbfx-wave.d2{animation-delay:.8s}
.vbfx-think{top:-6%;right:0;display:flex;gap:5px;padding:7px 10px;border-radius:999px;background:var(--surface,#fff);box-shadow:0 4px 14px #0002}
.vbfx-think i{width:7px;height:7px;border-radius:50%;background:var(--ink-3,#999);animation:bd-dots 1.1s ease-in-out infinite}
.vbfx-think i:nth-child(2){animation-delay:.18s}.vbfx-think i:nth-child(3){animation-delay:.36s}
.vbfx-spark{color:#f2b84b;font-size:clamp(16px,5vw,24px);animation:bd-twinkle 1.4s ease-in-out infinite}
.vbfx-spark.s1{top:4%;left:6%}.vbfx-spark.s2{top:12%;right:2%;animation-delay:.4s;font-size:clamp(12px,4vw,18px)}.vbfx-spark.s3{bottom:24%;right:-4%;animation-delay:.8s}
.vbfx-heart{color:#ff6f97;font-size:clamp(16px,5vw,26px);bottom:30%;animation:bd-float-up 2.2s ease-in infinite}
.vbfx-heart.h1{left:4%}.vbfx-heart.h2{right:4%;animation-delay:.7s}.vbfx-heart.h3{left:44%;animation-delay:1.4s;font-size:clamp(12px,4vw,18px)}
.vbfx-ha{color:var(--orb,#c0603a);font-size:clamp(14px,4.5vw,20px);animation:bd-float-up 1.2s ease-out infinite}
.vbfx-ha.h1{top:20%;left:-4%}.vbfx-ha.h2{top:6%;right:-4%;animation-delay:.4s}.vbfx-ha.h3{top:0;left:22%;animation-delay:.8s;font-size:clamp(11px,3.5vw,16px)}
.vbfx-mark{top:-4%;right:4%;font-size:clamp(28px,9vw,42px);color:var(--orb,#c0603a);animation:bd-pop .45s cubic-bezier(.2,1.8,.4,1) both}
.vbfx-mark.q{color:#6a7fd8;animation:bd-pop .45s cubic-bezier(.2,1.8,.4,1) both,bd-wiggle 1.4s ease-in-out .5s infinite}
.vbfx-tear{left:32%;top:55%;width:8px;height:12px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7fc3ff;animation:bd-tear 1.8s ease-in infinite}
.vbfx-tear.r{left:auto;right:32%;animation-delay:.6s}
.vbfx-sweat{top:12%;right:8%;font-size:clamp(16px,5vw,24px);animation:bd-float-up 1.6s ease-in infinite reverse}
.vbfx-drop{top:18%;right:12%;width:12px;height:17px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(#bfe6ff,#7fc3ff);opacity:.9;animation:bd-drop 2.4s ease-in-out infinite}
.vbfx-z{color:var(--ink-3,#999);font-size:clamp(14px,4vw,20px);right:4%;top:14%;animation:bd-zzz 2.4s ease-in-out infinite}
.vbfx-z.z2{animation-delay:.8s;font-size:clamp(18px,5vw,26px)}.vbfx-z.z3{animation-delay:1.6s}
.vbfx-conf{width:7px;height:11px;border-radius:2px;top:-4%;animation:bd-confetti 2.2s linear infinite}
.vbfx-conf.c1{left:8%;background:#ff7fa6}.vbfx-conf.c2{left:26%;background:#f5c451;animation-delay:.35s}.vbfx-conf.c3{left:46%;background:#7c6bd6;animation-delay:.7s}
.vbfx-conf.c4{left:64%;background:#56c785;animation-delay:1.05s}.vbfx-conf.c5{left:82%;background:#4fb7ff;animation-delay:1.4s}.vbfx-conf.c6{left:94%;background:#ff9a2e;animation-delay:1.75s}
.vbfx-note{color:#7c6bd6;font-size:clamp(16px,5vw,24px);animation:bd-note 2s ease-in-out infinite}
.vbfx-note.n1{top:8%;left:2%}.vbfx-note.n2{top:2%;right:6%;animation-delay:.65s;color:#ff7fa6}.vbfx-note.n3{top:30%;right:-6%;animation-delay:1.3s}
.vbfx-bulb{top:-10%;left:50%;margin-left:-14px;font-size:clamp(24px,8vw,34px);animation:bd-pop .4s cubic-bezier(.2,1.8,.4,1) both,bd-glow 1.2s ease-in-out .4s infinite}
.vbfx-fire{top:-4%;right:2%;font-size:clamp(20px,6vw,30px);animation:bd-flicker .4s ease-in-out infinite alternate}
.vbfx-anger{top:2%;right:8%;font-size:clamp(20px,6vw,28px);animation:bd-pulse calc(var(--spd) * .6) ease-in-out infinite}
.vbfx-steam{top:4%;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #e8e2d8 inset;animation:bd-steam 1.2s ease-out infinite}
.vbfx-steam.s1{left:18%}.vbfx-steam.s2{right:18%;animation-delay:.4s}.vbfx-steam.s3{left:46%;animation-delay:.8s}
.vbuddy[data-lifestyle="kopi"] .vbfx-steam,.vbuddy[data-lifestyle="masak"] .vbfx-steam,.vbuddy[data-lifestyle="begadang"] .vbfx-steam{top:46%;left:auto;right:6%;width:8px;height:8px;background:#fff8;box-shadow:none}
.vbfx-cloud{top:-8%;left:50%;margin-left:-20px;font-size:clamp(30px,10vw,44px);color:#b9b6c8;animation:bd-float 3s ease-in-out infinite}
.vbfx-orbit{top:6%;left:50%;width:46%;height:16%;margin-left:-23%;animation:bd-orbit 1.6s linear infinite}
.vbfx-orbit b{position:absolute;color:#f5c451;font-size:clamp(12px,4vw,18px)}.vbfx-orbit b:nth-child(1){left:0;top:30%}.vbfx-orbit b:nth-child(2){left:44%;top:0}.vbfx-orbit b:nth-child(3){right:0;top:40%}
.vbfx-flower{color:#ff9db0;font-size:clamp(16px,5vw,24px);animation:bd-twinkle 2.4s ease-in-out infinite}
.vbfx-flower.f1{top:10%;left:2%}.vbfx-flower.f2{bottom:28%;right:-2%;color:#c8b6ff;animation-delay:1.2s}
.vbfx-sigh{top:58%;left:56%;width:16px;height:9px;border-radius:50%;background:#fff;opacity:0;animation:bd-sigh 2.6s ease-out infinite}
.vbfx-check{top:0;right:6%;color:#3fa66b;font-size:clamp(24px,8vw,34px);animation:bd-pop .4s cubic-bezier(.2,1.8,.4,1) both}
.vbfx-drool{top:66%;left:55%;width:5px;height:9px;border-radius:0 0 50% 50%;background:#bfe6ff;animation:bd-tear 2.6s ease-in infinite}
.vbfx-snow{color:#9fd2ff;font-size:clamp(14px,4.5vw,20px);top:-6%;animation:bd-snow 3s linear infinite}
.vbfx-snow.s1{left:10%}.vbfx-snow.s2{left:50%;animation-delay:1s}.vbfx-snow.s3{left:86%;animation-delay:2s}
.vbfx-sun{top:-8%;right:-4%;font-size:clamp(26px,8vw,36px);color:#ffb02e;animation:bd-spin-slow 8s linear infinite}
.vbfx-rain{top:-6%;width:2px;height:12px;border-radius:2px;background:#7fc3ff;animation:bd-rain .8s linear infinite}
.vbfx-rain.r1{left:6%}.vbfx-rain.r2{left:30%;animation-delay:.2s}.vbfx-rain.r3{left:68%;animation-delay:.4s}.vbfx-rain.r4{left:92%;animation-delay:.6s}
.vbfx-aura{inset:6% 6% 10%;border-radius:50%;box-shadow:0 0 0 2px #c8b6ff66,0 0 30px 6px #c8b6ff55;animation:bd-aura 3s ease-in-out infinite}
.vbfx-flash{top:30%;left:46%;color:#fff;font-size:30px;text-shadow:0 0 12px #fff;animation:bd-flash 2.4s ease-out infinite}
.vbfx-moon{top:-6%;left:-2%;font-size:clamp(20px,6vw,28px);animation:bd-float 4s ease-in-out infinite}
.vbfx-bubble{width:7px;height:7px;border-radius:50%;border:1.5px solid #7cf0b6;top:52%;right:12%;animation:bd-bubble 1.8s ease-out infinite}
.vbfx-bubble.b2{right:8%;animation-delay:.6s}.vbfx-bubble.b3{right:15%;animation-delay:1.2s}
.is-soft .vbfx{opacity:.75}

@keyframes bd-face-in{from{transform:scale(.92)}to{transform:scale(1)}}
@keyframes bd-pop-in{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bd-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes bd-float{50%{transform:translateY(-3%)}}
@keyframes bd-lean{50%{transform:translateY(-2%) scale(1.02)}}
@keyframes bd-tilt{0%,100%{transform:rotate(calc(-4deg * var(--lv)))}50%{transform:rotate(calc(5deg * var(--lv)))}}
@keyframes bd-spin{to{transform:rotateY(360deg)}}
@keyframes bd-bob{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-2%) scale(1.02,.98)}}
@keyframes bd-shiver{25%{transform:translateX(-1.6%)}75%{transform:translateX(1.6%)}}
@keyframes bd-hop{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(calc(-7% * var(--lv))) scale(.97,1.04)}70%{transform:translateY(0) scale(1.04,.96)}}
@keyframes bd-laugh{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-2%)}}
@keyframes bd-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg) translateY(-2%)}}
@keyframes bd-squish{0%,100%{transform:scale(1,1)}50%{transform:scale(1.07,.93)}}
@keyframes bd-dance{0%,100%{transform:rotate(-8deg) translateY(0)}25%{transform:rotate(0) translateY(-5%)}50%{transform:rotate(8deg) translateY(0)}75%{transform:rotate(0) translateY(-5%)}}
@keyframes bd-pulse{50%{transform:scale(1.2)}}
@keyframes bd-spin-pulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.15) rotate(18deg)}}
@keyframes bd-jump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-10%) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@keyframes bd-nod{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(3deg) translateY(2%)}}
@keyframes bd-puff{0%,100%{transform:scale(1)}50%{transform:scale(1.05) translateY(-1.5%)}}
@keyframes bd-droop{0%,100%{transform:translateY(2%) rotate(-2deg)}50%{transform:translateY(3%) rotate(-3deg)}}
@keyframes bd-sob{0%,100%{transform:translateY(2%) scale(1,1)}50%{transform:translateY(3%) scale(1.02,.97)}}
@keyframes bd-shrink{0%,100%{transform:scale(.95) translateY(2%) rotate(-2deg)}50%{transform:scale(.94) translateY(2.5%) rotate(2deg)}}
@keyframes bd-no{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}75%{transform:rotate(6deg)}}
@keyframes bd-wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateX(2%)}}
@keyframes bd-breathe{50%{transform:scale(1.03,.97) translateY(1%)}}
@keyframes bd-run{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4%) rotate(3deg)}}
@keyframes bd-step{50%{transform:translateY(-35%)}}
@keyframes bd-pump{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg) translateY(-8%)}}
@keyframes bd-wave-arm{from{transform:rotate(-20deg)}to{transform:rotate(-70deg) translate(-2%,-6%)}}
@keyframes bd-prop{50%{transform:translateY(-2%) rotate(-2deg)}}
@keyframes bd-flame{from{transform:scale(1,1)}to{transform:scale(.85,1.15)}}
@keyframes bd-antenna-glow{50%{filter:drop-shadow(0 0 4px #ffd88a) brightness(1.25)}}
@keyframes bd-ear{50%{transform:scale(1.15)}}
@keyframes bd-wave{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes bd-dots{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
@keyframes bd-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.2}50%{transform:scale(1.15) rotate(25deg);opacity:1}}
@keyframes bd-float-up{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-120%) scale(1.1);opacity:0}}
@keyframes bd-pop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(8deg)}}
@keyframes bd-wiggle{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-10deg)}}
@keyframes bd-tear{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(160%);opacity:0}}
@keyframes bd-drop{0%,100%{transform:translateY(0)}50%{transform:translateY(12%)}}
@keyframes bd-zzz{0%{transform:translate(0,0) scale(.6);opacity:0}30%{opacity:1}100%{transform:translate(40%,-120%) scale(1.1);opacity:0}}
@keyframes bd-confetti{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(900%) rotate(540deg);opacity:0}}
@keyframes bd-note{0%{transform:translateY(0) rotate(-10deg);opacity:0}30%{opacity:1}100%{transform:translateY(-80%) rotate(12deg);opacity:0}}
@keyframes bd-glow{50%{filter:drop-shadow(0 0 10px #ffe27a)}}
@keyframes bd-flicker{from{transform:scale(1) rotate(-4deg)}to{transform:scale(1.12) rotate(4deg)}}
@keyframes bd-steam{0%{transform:translateY(0) scale(.5);opacity:0}30%{opacity:.9}100%{transform:translateY(-140%) scale(1.3);opacity:0}}
@keyframes bd-orbit{to{transform:rotate(360deg)}}
@keyframes bd-sigh{0%{transform:translate(0,0) scale(.4);opacity:0}30%{opacity:.85}100%{transform:translate(60%,-40%) scale(1.3);opacity:0}}
@keyframes bd-snow{0%{transform:translateY(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateY(560%) rotate(180deg);opacity:0}}
@keyframes bd-spin-slow{to{transform:rotate(360deg)}}
@keyframes bd-rain{0%{transform:translateY(0);opacity:0}20%{opacity:.9}100%{transform:translateY(800%);opacity:0}}
@keyframes bd-aura{50%{transform:scale(1.04);opacity:.6}}
@keyframes bd-flash{0%,70%{opacity:0;transform:scale(.4)}78%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(1)}}
@keyframes bd-bubble{0%{transform:translateY(0) scale(.5);opacity:0}30%{opacity:1}100%{transform:translateY(-160%) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.vbuddy *,.vbuddy{animation:none!important}}
/* Melanjutkan mode suara setelah pindah ke percakapan baru: tanpa animasi masuk agar tidak berkedip. */
.voice-mode.resume{animation:none}