.display-footer { display: flex; gap: 12px; margin-top: 25px; }
.display-footer .button { font-size: clamp(16px, 2vw, 22px); padding: 16px; }
.display-footer #previous { margin-right: auto; }

@media (max-width: 720px) {
  .display-footer { display: grid; grid-template-columns: 1fr 1fr; }
  .display-footer #previous { margin-right: 0; }
  .display-footer .home { display: none; }
}

.call-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:8px;background:#202b40;border-radius:22px}
.call-controls[hidden]{display:none}
.call-control{flex:0 1 64px;min-width:60px;min-height:76px;border-radius:16px;background:#34435c;color:#fff}
.call-control[aria-pressed="true"]{background:#c9e4d6;color:#20382e}
.call-control.off{background:#495266;color:#eee}
.call-control.hangup{background:#e9a09a;color:#38232b}
.call-control:focus-visible{outline:3px solid #9fe5c7;outline-offset:3px}
.call-control span{font-size:12px}
.video-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;flex:0 0 auto}
.local-tile.is-screen{grid-column:1/-1;min-height:0;width:100%;aspect-ratio:var(--screen-aspect,1.7778);max-width:calc(60dvh * var(--screen-aspect,1.7778));justify-self:center}
.local-tile.is-screen video{object-fit:contain;width:100%;height:100%}
.video-tile{transition:box-shadow .22s ease}
.video-tile.is-speaking:not(.is-muted){box-shadow:inset 0 0 0 3px #9fe5c7}
.voice-indicator{display:inline-flex;width:20px;height:18px;align-items:center;justify-content:center;gap:3px;vertical-align:middle}
.voice-indicator i{display:block;width:3px;height:12px;border-radius:2px;background:currentColor;transform:scaleY(.25);transform-origin:center}
.video-tile.is-speaking:not(.is-muted) .voice-indicator i{animation:voice-bar 700ms ease-in-out infinite alternate}
.video-tile.is-speaking .voice-indicator i:nth-child(2){animation-delay:-230ms}
.video-tile.is-speaking .voice-indicator i:nth-child(3){animation-delay:-460ms}
.video-tile.is-muted .voice-indicator i{animation:none;transform:scaleY(.25)}
@keyframes voice-bar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@media(min-width:700px){.call-control{flex-basis:84px}}
@media(max-width:599px){.video-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.video-tile{transition:none}.video-tile.is-speaking:not(.is-muted) .voice-indicator i{animation:none;transform:scaleY(1)}}