.bot-avatar { flex-shrink: 0; --gaze-x: 0px; --gaze-y: 0px; }
.avatar-gaze { transform: translate(var(--gaze-x), var(--gaze-y)); }
.avatar-eye { transform-box: fill-box; transform-origin: center; }
.avatar-smile { opacity: .5; }
.avatar-cheeks { opacity: .45; }
/* Traits belong to appearance, so renamed and user-created bots keep their character. */
[data-personality="frog"] .avatar-cheeks { stroke-width: 6; }
[data-personality="glasses"] .avatar-smile { stroke-width: 3.5; }
[data-personality="cap"] .avatar-smile { transform: rotate(-8deg); transform-origin: 50px 65px; }
[data-personality="beanie"] .avatar-cheeks { stroke-dasharray: 1 2; }
@media (prefers-reduced-motion: no-preference) {
  .avatar-gaze { transition: transform 320ms cubic-bezier(.2, .7, .2, 1); }
  .avatar-blinking .avatar-eye { transform: scaleY(.12); }
  .avatar-reacting[data-avatar-pose] { transform-box: fill-box; transform-origin: center; animation: var(--avatar-pose) 900ms ease-in-out 1; }
  [data-avatar-pose="nod"] { --avatar-pose: avatar-nod; }
  [data-avatar-pose="tilt-left"] { --avatar-pose: avatar-tilt-left; }
  [data-avatar-pose="tilt-right"] { --avatar-pose: avatar-tilt-right; }
  [data-avatar-pose="bounce"] { --avatar-pose: avatar-bounce; }
  [data-avatar-pose="peek-left"] { --avatar-pose: avatar-peek-left; }
  [data-avatar-pose="peek-right"] { --avatar-pose: avatar-peek-right; }
  [data-avatar-pose="squish"] { --avatar-pose: avatar-squish; }
  [data-avatar-pose="stretch"] { --avatar-pose: avatar-stretch; }
  [data-avatar-pose="wiggle"] { --avatar-pose: avatar-wiggle; }
  [data-avatar-pose="bow"] { --avatar-pose: avatar-bow; }
  .avatar-reacting[data-avatar-eyes="wink-left"] .avatar-eye-left,
  .avatar-reacting[data-avatar-eyes="wink-right"] .avatar-eye-right { animation: avatar-wink 900ms ease-out 1; }
  .avatar-reacting[data-avatar-eyes="double-blink"] .avatar-eye { animation: avatar-double-blink 900ms ease-out 1; }
  .avatar-reacting[data-avatar-eyes="wide"] .avatar-eye { animation: avatar-wide 900ms ease-out 1; }
  .avatar-reacting[data-avatar-eyes="happy"] .avatar-eye { animation: avatar-happy 900ms ease-out 1; }
  .avatar-reacting .avatar-smile { opacity: 1; transform: translateY(1px); }
  .avatar-reacting .avatar-cheeks { opacity: 1; }
  .avatar-smile, .avatar-cheeks { transition: opacity 160ms ease-out; }
}
/* A quiet, static smile acknowledges keyboard/touch interaction without motion. */
.avatar-reacting .avatar-smile, .avatar-reacting .avatar-cheeks,
:is(button, a, summary, .bot-identity):focus-within .bot-avatar :is(.avatar-smile, .avatar-cheeks) { opacity: 1; }
@keyframes avatar-wink { 0%, 65%, 100% { transform: scaleY(1); } 25%, 40% { transform: scaleY(.12); } }
@keyframes avatar-double-blink { 0%, 35%, 65%, 100% { transform: scaleY(1); } 20%, 50% { transform: scaleY(.12); } }
@keyframes avatar-wide { 0%, 100% { transform: scaleY(1); } 30%, 60% { transform: scale(1.12, 1.35); } }
@keyframes avatar-happy { 0%, 100% { transform: scaleY(1); } 30%, 60% { transform: scale(1.12, .5) rotate(-8deg); } }
@keyframes avatar-nod { 0%, 100% { transform: translateY(0); } 25%, 60% { transform: translateY(2px); } 40% { transform: translateY(-1px); } }
@keyframes avatar-tilt-left { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-8deg); } }
@keyframes avatar-tilt-right { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(8deg); } }
@keyframes avatar-bounce { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 75% { transform: translateY(-1px); } }
@keyframes avatar-peek-left { 0%, 100% { transform: translateX(0); } 30%, 60% { transform: translateX(-2px) rotate(-5deg); } }
@keyframes avatar-peek-right { 0%, 100% { transform: translateX(0); } 30%, 60% { transform: translateX(2px) rotate(5deg); } }
@keyframes avatar-squish { 0%, 100% { transform: scale(1); } 30%, 60% { transform: scale(1.05, .93); } }
@keyframes avatar-stretch { 0%, 100% { transform: scale(1); } 30%, 60% { transform: scale(.94, 1.06); } }
@keyframes avatar-wiggle { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-6deg); } 40%, 80% { transform: rotate(6deg); } }
@keyframes avatar-bow { 0%, 100% { transform: translateY(0) rotate(0); } 30%, 60% { transform: translateY(2px) rotate(6deg) scale(.97); } }
/* A fixed neutral rim keeps filled gear visible on either workspace surface. */
.avatar-accessory :is(path, rect, circle, ellipse)[fill]:not([fill="none"]):not([stroke]) { paint-order: stroke fill; stroke: #718675; stroke-linejoin: round; }
.avatar-accessory :is(path, rect, circle, ellipse)[fill]:not([fill="none"]):not([stroke]):not([stroke-width]) { stroke-width: 2; }