/* Incoming call: two positive actions centered, reject safely below. */
.call-overlay .call-panel>.call-actions{display:grid;grid-template-columns:repeat(2,minmax(72px,96px));align-items:start;justify-content:center;gap:18px 28px}
.call-actions .call-action{justify-self:center}
.call-actions .call-action.reject{grid-column:1/-1;grid-row:2;justify-self:center}
.call-actions .call-action.accept{grid-column:1;grid-row:1}
.call-actions .call-action.video{grid-column:2;grid-row:1}

/* During video, the identity descends after the controls fade out. */
.has-remote-video .call-identity{transition:padding-bottom .38s cubic-bezier(.2,.8,.2,1),background .3s ease}
.has-remote-video.controls-auto-hidden .call-identity{padding-bottom:max(24px,calc(16px + env(safe-area-inset-bottom)));background:linear-gradient(transparent 72%,#07101edb)}
.has-remote-video.controls-auto-hidden .call-identity h2{margin-bottom:3px}

/* Prepared voice/video preview always remains inside the viewport. */
.composer.has-recording{width:auto;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));overflow:hidden}
.has-recording .recording-status{max-width:calc(100% - 8px);overflow:hidden}
.has-recording .recording-status>#cancel-recording,.has-recording .send{width:calc(50% - 16px)!important;min-width:0!important;max-width:132px!important;border-radius:999px!important}
.has-recording .recording-status>#cancel-recording{right:auto!important;left:8px!important}
.composer.has-recording>.send{right:8px!important;left:auto!important;grid-column:auto!important;grid-row:auto!important;place-self:auto!important;box-sizing:border-box!important;overflow:hidden!important}
.has-recording .recording-wave{min-width:0;max-width:34%}
.has-recording .recording-status>span{min-width:0!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:700px){
  .call-overlay .call-panel>.call-actions{bottom:calc(18px + env(safe-area-inset-bottom));gap:16px 34px}
  .has-remote-video.controls-auto-hidden .call-identity{padding-bottom:max(20px,calc(12px + env(safe-area-inset-bottom)))}
  .composer.has-recording{max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))!important}
  .has-recording .recording-status>#cancel-recording,.has-recording .send{width:calc(50% - 14px)!important;max-width:118px!important}
  .has-recording .recording-status>#cancel-recording{left:6px!important}
  .composer.has-recording>.send{right:6px!important;left:auto!important;grid-column:auto!important;grid-row:auto!important}
}