.avatar {
  position: relative;
  width: 140px;
  height: 140px;
}
.avatar svg { width: 100%; height: 100%; }

.avatar-ring {
  fill: none;
  stroke-width: 2.5;
  transform-origin: 50% 50%;
  transition: stroke 0.6s ease;
}
.avatar-core {
  transition: fill 0.6s ease, r 0.3s ease;
}

/* IDLE: lugn andning */
.avatar.idle .avatar-core { animation: breathe 3.2s ease-in-out infinite; }
.avatar.idle .ring-1 { animation: rotate-slow 14s linear infinite; }
.avatar.idle .ring-2 { animation: rotate-slow-rev 18s linear infinite; }
.avatar.idle .ring-3 { animation: rotate-slow 22s linear infinite; }

/* LISTENING: vaken, reagerar */
.avatar.listening .avatar-core { animation: breathe-fast 1.4s ease-in-out infinite; }
.avatar.listening .ring-1 { animation: rotate-med 6s linear infinite; }
.avatar.listening .ring-2 { animation: rotate-med-rev 8s linear infinite; }
.avatar.listening .ring-3 { animation: rotate-med 10s linear infinite; }

/* THINKING: aktiv rotation */
.avatar.thinking .ring-1 { animation: rotate-fast 3s linear infinite; }
.avatar.thinking .ring-2 { animation: rotate-fast-rev 4s linear infinite; }
.avatar.thinking .ring-3 { animation: rotate-fast 5s linear infinite; }
.avatar.thinking .avatar-core { animation: pulse-think 0.9s ease-in-out infinite; }

/* SPEAKING: karnan reagerar pa ljudniva (satts via JS --level) */
.avatar.speaking .avatar-core {
  r: calc(14px + (var(--level, 0) * 10px));
}
.avatar.speaking .ring-1 { animation: rotate-med 5s linear infinite; }

/* WARNING */
.avatar.warning .avatar-core { animation: warn-pulse 0.6s ease-in-out infinite; }

@keyframes breathe { 0%, 100% { r: 14px; } 50% { r: 18px; } }
@keyframes breathe-fast { 0%, 100% { r: 15px; } 50% { r: 20px; } }
@keyframes pulse-think { 0%, 100% { r: 13px; } 50% { r: 17px; } }
@keyframes warn-pulse { 0%, 100% { r: 14px; opacity: 1; } 50% { r: 19px; opacity: 0.7; } }

@keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-slow-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes rotate-med { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-med-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes rotate-fast { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rotate-fast-rev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }