.avatar-role-badge {
  /* Sharp inner border */
  border: 3px solid var(--role-color) !important;
  /* Attach the infinite breathing animation */
  animation: avatarPulse 2.0s infinite alternate;
  transition: transform 0.2s ease;
}

  .avatar-role-badge:hover {
    transform: scale(1.05);
  }

@keyframes avatarPulse {
  0% {
    box-shadow: 0 0 5px var(--role-color), 0 0 10px color-mix(in srgb, var(--role-color) 30%, transparent);
  }

  100% {
    box-shadow: 0 0 8px var(--role-color), 0 0 25px color-mix(in srgb, var(--role-color) 70%, transparent);
  }
}