/* The outgoing frame exists only after its peer has closed. The local camera
   is never transformed. New video immediately hides this surface. */
#handoffSurface {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
  background: #160b29;
  isolation: isolate;
}

#handoffSurface[hidden],
.remote-feed-active #handoffSurface,
.panel-open #handoffSurface {
  display: none !important;
}

#handoffSurface .handoff-cube {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translateZ(calc(-1 * var(--handoff-half)));
  transform-style: preserve-3d;
}

#handoffSurface .handoff-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: #160b29;
}

#handoffSurface .handoff-front {
  transform: translateZ(var(--handoff-half));
}

#handoffSurface .handoff-next {
  transform: rotateY(90deg) translateZ(var(--handoff-half));
}

#handoffSurface canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  filter: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  #handoffSurface { display: none !important; }
}

/* The source interface reveals playable remote video with this exact fade. */
.call-screen #remoteVideo { opacity:0; transition:opacity .15s ease-in; }
.call-screen .remote-feed-active #remoteVideo { opacity:1; }
.call-screen #cameraToolbar #unmuteRemote:not([hidden]) {
 display:flex; width:calc(100% - 16px); height:auto; min-height:44px; margin:0 8px 8px;
 padding:10px 14px; border:1px solid #c8a4ff40; background:#281938; color:#eedfff;
 border-radius:12px; font-size:13px;
}
@media (prefers-reduced-motion:reduce) { .call-screen #remoteVideo { transition:none; } }