.call-button{--call-size:6rem;--call-stage:9.5rem;--level:0;flex-direction:column;align-items:center;gap:.75rem;display:flex}.call-button-stage{width:var(--call-stage);height:var(--call-stage);place-items:center;display:grid;position:relative}.call-button-plate{z-index:2;width:var(--call-size);height:var(--call-size);background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-good) 70%, white), var(--color-good) 70%);box-shadow:var(--shadow-float);cursor:pointer;transition:transform .18s var(--ease-standard), box-shadow .18s var(--ease-standard), background .3s var(--ease-standard);border:0;border-radius:50%;place-items:center;animation:3.2s ease-in-out infinite call-button-breathe;display:grid;position:relative}.call-button-plate:hover{transform:scale(1.04)}.call-button-plate:active{transform:scale(.97)}.call-button-plate:focus-visible{outline:3px solid var(--color-accent);outline-offset:4px;border-radius:50%}.call-button-plate[aria-disabled=true]{cursor:default;transform:none}.call-button-mark{pointer-events:none;-webkit-user-select:none;user-select:none;border-radius:23.5%;width:46%;height:46%}.call-button-halo{z-index:1;inset:calc((var(--call-stage) - var(--call-size)) / 2);border:2px solid color-mix(in srgb, var(--color-good) 45%, transparent);pointer-events:none;border-radius:50%;animation:3.2s ease-out infinite call-button-ripple;position:absolute}.call-button-halo.r2{animation-delay:1.6s}.call-button-arc{z-index:1;inset:calc((var(--call-stage) - var(--call-size)) / 2 - 6px);background:conic-gradient(from 0deg, transparent 0turn, color-mix(in srgb, var(--color-good) 85%, transparent) .3turn, transparent .32turn);opacity:0;pointer-events:none;border-radius:50%;position:absolute;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 calc(100% - 3px))}.call-button-label{min-height:1.5rem;color:var(--color-text);text-align:center;font-size:1.0625rem;font-weight:600}.call-button-clock{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--color-text-2);margin-inline-start:.5rem;font-weight:400}.call-button-controls{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}.call-button-control{cursor:pointer;min-width:8.5rem;min-height:2.75rem;transition:background .12s var(--ease-standard);border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1rem;font-weight:500;display:inline-flex}.call-button-control.mute{border:1px solid var(--color-line-2);background:var(--color-surface);color:var(--color-text)}.call-button-control.mute:hover{background:var(--color-bg)}.call-button-control.mute[aria-pressed=true]{background:var(--color-surface-3)}.call-button-control.end{border:1px solid var(--color-miss);background:var(--color-miss);color:#fff}.call-button-control.end:hover{background:color-mix(in srgb, var(--color-miss) 85%, black)}.call-button[data-phase=connecting] .call-button-halo{opacity:0;animation:none}.call-button[data-phase=connecting] .call-button-arc{opacity:1;animation:1.1s linear infinite call-button-spin}.call-button[data-phase=connecting] .call-button-plate{animation:1.1s ease-in-out infinite call-button-wait}.call-button[data-phase=live] .call-button-plate{background:radial-gradient(circle at 35% 30%, var(--color-brand-orange-light), var(--color-live) 75%);animation:none}.call-button[data-phase=live] .call-button-halo{background:color-mix(in srgb, var(--color-brand-orange) 22%, transparent);opacity:calc(.35 + var(--level) * .65);transform:scale(calc(1.02 + var(--level) * .42));border:0;transition:transform 90ms linear,opacity 90ms linear;animation:none}.call-button[data-phase=live] .call-button-halo.r2{border:2px solid color-mix(in srgb, var(--color-brand-orange) 45%, transparent);transform:scale(calc(1.1 + var(--level) * .3));background:0 0}.call-button[data-phase=live][data-muted=true] .call-button-halo.r2{border-style:dashed}.call-button[data-phase=ended] .call-button-plate{animation:none}.call-button[data-phase=ended] .call-button-halo{opacity:0;animation:none}@keyframes call-button-ripple{0%{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.55)}}@keyframes call-button-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes call-button-wait{0%,to{opacity:1}50%{opacity:.8}}@keyframes call-button-spin{to{transform:rotate(1turn)}}@media (prefers-reduced-motion:reduce){.call-button-plate,.call-button-halo,.call-button-arc,.call-button[data-phase=connecting] .call-button-plate,.call-button[data-phase=connecting] .call-button-arc{transition:none;animation:none}.call-button-plate:hover,.call-button-plate:active{transform:none}.call-button[data-phase=idle] .call-button-halo.r2,.call-button[data-phase=live] .call-button-halo.r2{opacity:0}.call-button[data-phase=idle] .call-button-halo{opacity:.8;transform:scale(1.12)}.call-button[data-phase=connecting] .call-button-arc{background:color-mix(in srgb, var(--color-good) 85%, transparent)}.call-button[data-phase=live] .call-button-halo{opacity:1;transform:scale(1.18)}}
