.avatar{position:relative;width:min(100%,260px);aspect-ratio:640/736;margin:auto;animation:avatar-breathe 4s ease-in-out infinite}.avatar__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s ease}.avatar[data-state="idle"] .avatar__img--idle,.avatar[data-state="greeting"] .avatar__img--greeting,.avatar[data-state="thinking"] .avatar__img--thinking,.avatar[data-state="talking"] .avatar__img--talking,.avatar[data-state="happy"] .avatar__img--happy,.avatar[data-state="sorry"] .avatar__img--sorry{opacity:1}.avatar[data-state="greeting"]{animation:avatar-wave .6s ease}.avatar[data-state="thinking"]{animation:avatar-think 1.5s ease-in-out infinite}.avatar[data-state="happy"],.avatar[data-state="sorry"]{animation:none}.avatar__pulse{animation:avatar-pulse .7s ease-in-out}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .avatar__img{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--color-text) 55%,transparent))}}:root[data-theme="dark"] .avatar__img{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--color-text) 55%,transparent))}@keyframes avatar-breathe{50%{transform:translateY(-3px) scale(1.01)}}@keyframes avatar-wave{50%{transform:translateY(-8px) rotate(4deg)}}@keyframes avatar-think{50%{transform:rotate(-3deg)}}@keyframes avatar-pulse{50%{transform:scale(1.03)}}