.footer {
  align-items: center;
  bottom: var(--mirai-ui-space-XL);
  gap: var(--mirai-ui-space-M);
  margin: 0 auto;
  position: absolute;
}

.button {
  min-height: var(--mirai-ui-space-XXL) !important;
  min-width: var(--mirai-ui-space-XXL) !important;
  padding: 0;
}

.button.ready {
  background-color: var(--mirai-ui-error) !important;
}

.waveform {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.waveform.active .aura,
.waveform.active .pulse,
.waveform.active .glow {
  opacity: var(--aura-opacity, 0.66);
}

.aura,
.pulse,
.glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.aura {
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 0%,
    color-mix(in srgb, var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 25%, transparent) 70%,
    transparent 100%
  );
  z-index: 1;
  transform: translate(-50%, -50%) scale(var(--aura-scale, 1));
  transition: transform 0.1s ease-out;
}

.pulse {
  width: 150%;
  height: 150%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 50%, transparent) 0%,
    color-mix(in srgb, var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 12%, transparent) 50%,
    transparent 70%
  );
  z-index: 0;
  animation: waveform-pulse 2s ease-in-out infinite;
}

.glow {
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 25%, transparent) 0%,
    color-mix(in srgb, var(--mirai-chat-avatar-color-3, var(--mirai-chat-avatar-color-3)) 5%, transparent) 30%,
    transparent 60%
  );
  z-index: -1;
  animation: waveform-glow 3s ease-in-out infinite alternate;
}

.content {
  position: relative;
  z-index: 3;

  min-height: calc(var(--mirai-ui-space-XXL) * 2);
  min-width: calc(var(--mirai-ui-space-XXL) * 2);
  border-radius: 50%;
  background-color: var(--mirai-chat-avatar-color-3);
}

@keyframes waveform-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: var(--aura-opacity, 0.33);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: calc(var(--aura-opacity, 0.3) * 0.66);
  }
}

@keyframes waveform-glow {
  0% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: calc(var(--aura-opacity, 0.2) * 0.4);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: calc(var(--aura-opacity, 0.2) * 0.8);
  }
}
