/* Call state transitions use the shared easing and two asymmetric durations. */
:root { --dur-call-enter: .24s; --dur-call-exit: .16s; }
.app-page .voice-members:empty { margin: 0; }
.app-page :is(#voiceBar, #voicePanel, .vmem) { box-sizing: border-box; }
.app-page .call-stage:not(.motion-exit) { animation: none; }
.app-page .incoming-call .ic-card { animation: call-prompt-in var(--dur-call-enter) var(--ease-out); }
.app-page .incoming-call.motion-exit { animation: call-prompt-out var(--dur-call-exit) var(--ease-out) both; }
.app-page .incoming-call.motion-exit .ic-card { animation: none; }
.app-page .ic-avatar.ringing { position: relative; animation: none; box-shadow: none; }
.app-page .call-tile.ringing .ring-wave,
.app-page .ic-avatar.ringing::before {
  content: ''; position: absolute; inset: -4px; width: auto; height: auto;
  border: 1px solid var(--accent); border-radius: 50%; box-shadow: none;
  pointer-events: none; animation: call-ring-ripple 1.5s var(--ease-out) infinite;
}
.app-page .call-tile.ringing .tile-avatar .avatar.large { animation: none; box-shadow: none; }
.app-page :is(.call-controls, .vp-controls, .user-panel, .mobile-call-controls) button:active {
  transform: scale(.94); transition: transform var(--dur-ui) var(--ease-out);
}
@keyframes call-ring-ripple { from { transform: scale(1); opacity: .65; } to { transform: scale(1.5); opacity: 0; } }
@keyframes call-prompt-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes call-prompt-out { from { transform: none; opacity: 1; } to { transform: translateY(6px); opacity: 0; } }
body.app-page.reduce-motion :is(.ring-wave, .ic-card) { animation: none !important; }
body.app-page.reduce-motion :is(.call-controls, .vp-controls, .user-panel, .mobile-call-controls) button:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .app-page :is(.ring-wave, .ic-card) { animation: none !important; }
  .app-page :is(.call-controls, .vp-controls, .user-panel, .mobile-call-controls) button:active { transform: none; }
}

body.app-page.reduce-motion .ic-avatar.ringing::before { animation: none !important; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .app-page .ic-avatar.ringing::before { animation: none !important; opacity: 0; } }