/* Chip — flat green orb with two slanted capsule eyes (matches design/reference/grokbot.png).
   States are expressed only through motion. transform/opacity only. */
.chip{position:relative;font-size:168px;width:1em;height:1em;flex:0 0 auto;--g:#5ac67a}
.halo{position:absolute;inset:-.16em;border-radius:50%;opacity:.55;
  background:radial-gradient(closest-side,rgba(90,198,122,.32),rgba(90,198,122,.1) 70%,rgba(90,198,122,0));transition:opacity .4s var(--ease)}
.body{position:absolute;inset:0;transform-origin:50% 100%;animation:breathe 4s var(--ease-io) infinite}
.orb{position:absolute;inset:0;border-radius:50%;background:var(--g);transition:opacity .4s var(--ease)}
.look{position:absolute;inset:0;transition:transform .35s var(--ease)}
.ep{position:absolute;display:block;transform:translate(-50%,-50%) rotate(54deg)}
.ep.l{left:53.5%;top:35.5%}
.ep.r{left:77.3%;top:24.6%}
.eye{display:block;width:.27em;height:.124em;border-radius:.062em;background:#f7f7f7;transition:transform .14s var(--ease)}
.ep.r .eye{width:.255em;height:.086em;border-radius:.043em}
.chip.blink .eye{transform:scaleY(.15)}

@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.025,1.035)}}
@keyframes wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes glance{0%,20%{transform:translate(0,0)}30%,50%{transform:translate(-.07em,.03em)}60%,80%{transform:translate(.03em,-.03em)}90%,100%{transform:translate(0,0)}}
@keyframes pulse{0%,100%{transform:scale(1)}25%{transform:scale(1.07)}50%{transform:scale(.98)}70%{transform:scale(1.04)}}
@keyframes hop{0%,100%{transform:translateY(0) scale(1,1)}15%{transform:scale(1.08,.9)}45%{transform:translateY(-.12em) scale(.95,1.06)}75%{transform:translateY(0) scale(1.06,.94)}}
@keyframes squint{0%,100%{transform:scaleY(1)}15%,75%{transform:scaleY(.45)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-.04em)}40%,80%{transform:translateX(.04em)}}
@keyframes zip{0%{transform:translateY(0) scale(1)}35%{transform:translateY(.05em) scale(1.06,.92)}100%{transform:translateY(0) scale(1)}}

[data-state=listening] .body{animation:none;transform:rotate(8deg) translateY(.02em)}
[data-state=listening] .look{transform:translate(-.03em,.07em)}
[data-state=sending] .body{animation:zip .5s var(--ease) 1}
[data-state=sending] .look{transform:translate(.03em,-.03em)}
[data-state=thinking] .body{animation:wobble 2.4s var(--ease-io) infinite}
[data-state=thinking] .look{animation:glance 3s var(--ease-io) infinite}
[data-state=speaking] .body{animation:pulse .9s var(--ease-io) infinite}
[data-state=speaking] .halo{opacity:.9}
[data-state=done] .body{animation:hop .9s var(--ease) 2}
[data-state=done] .eye{animation:squint .9s var(--ease) 2}
[data-state=error] .body{animation:shake .4s var(--ease) 1}
[data-state=error] .orb{opacity:.6}
[data-state=error] .halo{opacity:.2}
[data-state=error] .look{transform:translateY(.05em)}

/* compact 88px reply avatar */
[data-state=speaking] .chip,[data-state=done] .chip,[data-state=error] .chip{transform:scale(.5238);margin:-40px}