ava-call-button {
  --acb-size: 76px;
  --acb-w: var(--acb-size);
  --acb-sx: 1;
  --acb-sy: 1;
  --lvl: 0;
  --acb-ink: var(--ink);
  --acb-rim-hi: rgba(255, 255, 255, .95);
  --acb-rim-lo: rgba(255, 255, 255, .35);
  --acb-tint: rgba(255, 255, 255, .22);
  --acb-drop: rgba(79, 53, 133, .32);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--acb-w);
  height: var(--acb-size);
  scale: var(--acb-sx) var(--acb-sy);
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) ava-call-button {
    --acb-rim-hi: rgba(255, 255, 255, .55);
    --acb-rim-lo: rgba(255, 255, 255, .12);
    --acb-tint: rgba(255, 255, 255, .06);
    --acb-drop: rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] ava-call-button, [data-scheme="dark"] ava-call-button {
  --acb-rim-hi: rgba(255, 255, 255, .55);
  --acb-rim-lo: rgba(255, 255, 255, .12);
  --acb-tint: rgba(255, 255, 255, .06);
  --acb-drop: rgba(0, 0, 0, .55);
}
[data-scheme="light"] ava-call-button {
  --acb-rim-hi: rgba(255, 255, 255, .95);
  --acb-rim-lo: rgba(255, 255, 255, .35);
  --acb-tint: rgba(255, 255, 255, .22);
  --acb-drop: rgba(79, 53, 133, .32);
}

ava-call-button[size="sm"] { --acb-size: 56px; }

ava-call-button > :is(.acb-lens, .acb-glow, .acb-rim) {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.acb-lens {
  background: var(--acb-tint);
  -webkit-backdrop-filter: blur(10px) saturate(1.6) brightness(1.04);
  backdrop-filter: blur(10px) saturate(1.6) brightness(1.04);
}
ava-call-button.has-lens .acb-lens { backdrop-filter: var(--lens) saturate(1.5) brightness(1.05); }

.acb-glow { overflow: hidden; opacity: calc(.14 + var(--lvl) * .6); }
.acb-glow::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -70%;
  height: 110%;
  background:
    radial-gradient(34% 55% at 20% 55%, #e48a66 0%, transparent 70%),
    radial-gradient(45% 70% at 48% 60%, #b35cd0 0%, transparent 70%),
    radial-gradient(42% 60% at 74% 55%, #7c5cbf 0%, transparent 72%),
    radial-gradient(28% 50% at 94% 50%, #7f9cf0 0%, transparent 70%);
  filter: blur(14px) saturate(1.2);
  transform: translateY(calc((1 - var(--lvl)) * 22%)) scaleY(calc(.7 + var(--lvl) * .6));
  transform-origin: 50% 100%;
  animation: acb-drift 7s ease-in-out infinite alternate;
}
@keyframes acb-drift { from { translate: -4% 0; } to { translate: 4% 0; } }
ava-call-button:not([on]) .acb-glow::before { animation-play-state: paused; }

.acb-rim {
  box-shadow:
    inset 0 1.5px .5px var(--acb-rim-hi),
    inset 0 -1px 1px var(--acb-rim-lo),
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 -14px 22px -14px rgba(255, 255, 255, .55),
    0 22px 34px -16px var(--acb-drop),
    0 2px 4px rgba(42, 34, 51, .12);
}
.acb-rim::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 5%;
  height: 34%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
}
.acb-rim::after {
  content: "";
  position: absolute;
  right: 16%;
  bottom: 10%;
  width: 14%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .5), transparent);
}

.acb-mic {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--acb-size);
  height: var(--acb-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--acb-ink);
  cursor: pointer;
  transition: transform .2s var(--ease-out);
}
.acb-mic:active { transform: scale(.92); }
.acb-mic:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
.acb-mic svg { grid-area: 1 / 1; transition: color .3s, opacity .2s; }
.acb-mic .acb-off { opacity: 0; }
ava-call-button[on] .acb-mic svg { color: var(--warm); }
ava-call-button[on][muted] .acb-mic svg:not(.acb-off) { opacity: 0; }
ava-call-button[on][muted] .acb-mic .acb-off { opacity: 1; color: var(--muted); }

.acb-timer {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font: 500 calc(var(--acb-size) * .36) / 1 var(--body);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: var(--acb-ink);
  opacity: 0;
  scale: .8;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity .3s .12s, scale .5s .12s cubic-bezier(.3, 1.3, .5, 1), filter .3s .12s;
}
ava-call-button[on] .acb-timer { opacity: 1; scale: 1; filter: none; }

.acb-stop {
  position: absolute;
  right: calc(var(--acb-size) * .11);
  top: 50%;
  width: calc(var(--acb-size) * .72);
  height: calc(var(--acb-size) * .72);
  margin-top: calc(var(--acb-size) * -.36);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 60%), color-mix(in srgb, var(--warm) 14%, transparent);
  box-shadow: inset 0 1.5px .5px var(--acb-rim-hi), inset 0 -10px 16px -10px rgba(255, 255, 255, .6), inset 0 0 0 1px rgba(255, 255, 255, .3), 0 6px 12px -6px var(--acb-drop);
  opacity: 0;
  scale: .3;
  translate: -60px 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .25s, scale .6s cubic-bezier(.3, 1.35, .5, 1), translate .6s cubic-bezier(.3, 1.35, .5, 1);
}
.acb-stop i { width: 34%; height: 34%; border-radius: 22%; background: var(--warm-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
ava-call-button[on] .acb-stop { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; transition-delay: .08s; }
.acb-stop:active { scale: .9 !important; }
.acb-stop:focus-visible { outline: 2px solid var(--warm); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .acb-glow::before { animation: none; }
  .acb-mic, .acb-stop, .acb-timer { transition-duration: 1ms !important; }
}