/* Animated Lola (inline /static/site/lola-anim.svg). State on the wrapper: data-state = idle | thinking | talking |
   happy | encourage | wave. Everything is transform/opacity only (cheap), and switched off for reduced motion. */
.lola-anim{display:inline-block;line-height:0;position:relative}
.lola-anim svg{width:100%;height:auto;overflow:visible;display:block}
.lola-anim .whole,.lola-anim .head,.lola-anim .tail,.lola-anim .eyes,.lola-anim .eyes-look,.lola-anim .ear,.lola-anim .paw,
.lola-anim .mouth-open,.lola-anim .sp,.lola-anim .bubble,.lola-anim .bow{transform-box:view-box}
.lola-anim .whole{transform-origin:60px 118px}
.lola-anim .head{transform-origin:60px 86px;transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.lola-anim .tail{transform-origin:24px 100px;animation:lwag 1.9s ease-in-out infinite alternate}
.lola-anim .eyes{transform-origin:60px 53px;animation:lblink 5.2s infinite}
.lola-anim .eyes-look{transition:transform .4s ease}
.lola-anim .ear-l{transform-origin:40px 44px;animation:learl 6s ease-in-out infinite}
.lola-anim .ear-r{transform-origin:80px 44px;animation:learr 6s ease-in-out infinite}
.lola-anim .mouth-open{transform-origin:60px 70px;transform:scaleY(0);opacity:0}
.lola-anim .paw{transform-origin:86px 104px;opacity:0;transform:rotate(30deg) scale(.6)}
.lola-anim .sp{opacity:0}
.lola-anim .sp.s1{transform-origin:16px 25px}.lola-anim .sp.s2{transform-origin:104px 14px}.lola-anim .sp.s3{transform-origin:110px 44px}.lola-anim .sp.s4{transform-origin:6px 54px}
.lola-anim .bubble{opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s}
/* idle: gentle head bob */
.lola-anim[data-state="idle"] .head,.lola-anim[data-state="wave"] .head{animation:lbob 4.2s ease-in-out infinite}
/* thinking: head tilted, eyes up, thought bubble with pulsing dots */
.lola-anim[data-state="thinking"] .head{transform:rotate(7deg)}
.lola-anim[data-state="thinking"] .eyes-look{transform:translate(1.4px,-1.6px)}
.lola-anim[data-state="thinking"] .bubble{opacity:1;transform:none}
.lola-anim[data-state="thinking"] .bubble .dot{animation:ldot 1.1s infinite}
.lola-anim[data-state="thinking"] .bubble .dot:nth-of-type(2){animation-delay:.18s}
.lola-anim[data-state="thinking"] .bubble .dot:nth-of-type(3){animation-delay:.36s}
.lola-anim[data-state="thinking"] .tail{animation-duration:3.2s}
/* talking: mouth opens and closes, small nods */
.lola-anim[data-state="talking"] .mouth-open{opacity:1;animation:ltalk .9s linear infinite}
.lola-anim[data-state="talking"] .head{animation:lnod 1.8s ease-in-out infinite}
/* happy: bounce, sparkles, fast wag */
.lola-anim[data-state="happy"] .whole{animation:lbounce .9s cubic-bezier(.3,1.6,.5,1) 2}
.lola-anim[data-state="happy"] .sp{animation:lspark 1.4s ease-out infinite}
.lola-anim[data-state="happy"] .sp.s2{animation-delay:.25s}.lola-anim[data-state="happy"] .sp.s3{animation-delay:.5s}.lola-anim[data-state="happy"] .sp.s4{animation-delay:.7s}
.lola-anim[data-state="happy"] .tail{animation-duration:.35s}
.lola-anim[data-state="happy"] .eyes{animation:lsquint 1.8s ease-in-out 1}
/* encourage: kind head tilt the other way with a slow nod */
.lola-anim[data-state="encourage"] .head{transform:rotate(-9deg);animation:ltiltnod 2.4s ease-in-out infinite}
.lola-anim[data-state="encourage"] .eyes-look{transform:translate(-1px,.6px)}
.lola-anim[data-state="encourage"] .tail{animation-duration:1.2s}
/* wave: paw up and waving */
.lola-anim[data-state="wave"] .paw{opacity:1;transform:none;animation:lwave 1.1s ease-in-out infinite alternate;transition:opacity .3s}
@keyframes lwag{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes lblink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes learl{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-4deg)}86%{transform:rotate(1.5deg)}}
@keyframes learr{0%,72%,100%{transform:rotate(0)}80%{transform:rotate(4deg)}88%{transform:rotate(-1.5deg)}}
@keyframes lbob{0%,100%{transform:rotate(0) translateY(0)}30%{transform:rotate(-2deg) translateY(-.6px)}65%{transform:rotate(2deg) translateY(.3px)}}
@keyframes lnod{0%,100%{transform:rotate(0)}25%{transform:rotate(-1.5deg) translateY(.5px)}75%{transform:rotate(1.5deg)}}
@keyframes ltalk{0%{transform:scaleY(.15)}12%{transform:scaleY(1)}24%{transform:scaleY(.35)}40%{transform:scaleY(.9)}55%{transform:scaleY(.2)}70%{transform:scaleY(1)}85%{transform:scaleY(.45)}100%{transform:scaleY(.15)}}
@keyframes ldot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-1.5px)}}
@keyframes lbounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-9px) scale(1.02,.98)}55%{transform:translateY(0) scale(1.03,.96)}75%{transform:translateY(-3px)}}
@keyframes lspark{0%{opacity:0;transform:scale(.3) rotate(0)}30%{opacity:1;transform:scale(1.15) rotate(20deg)}100%{opacity:0;transform:scale(.7) rotate(60deg)}}
@keyframes lsquint{0%,100%{transform:scaleY(1)}20%,70%{transform:scaleY(.55)}}
@keyframes ltiltnod{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(-6deg) translateY(.8px)}}
@keyframes lwave{from{transform:rotate(-12deg)}to{transform:rotate(16deg)}}
/* chat: the "thinking" placeholder avatar bobs, and typing dots */
.msg.lola.waiting img.av{animation:lavbob 1.2s ease-in-out infinite}
.typing{display:inline-flex;gap:4px;margin-left:4px;vertical-align:middle}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--blue,#1b4191);opacity:.3;animation:ldot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes lavbob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){
  .lola-anim *,.lola-anim .whole,.msg.lola.waiting img.av,.typing i{animation:none!important;transition:none!important}
  .lola-anim[data-state="talking"] .mouth-open{transform:scaleY(.7)}
}