/* One-on-One small picture: drag it to any corner (FaceTime-style). `tile-left` / `tile-bottom` on the stage
   pick the corner; the default stays top right. Not while effects are open on a phone (the picture moves
   above the sheet there) or during the camera preview (it fills the screen). */
.pf\:video-stage.is-live.tile-left:not(.is-swapped):not(.is-cam-preview):not(:has(.pf\:video-effects:not([hidden]))) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.tile-left.is-swapped .pf\:video-remote {
  right: auto;
  left: 0.85rem;
}
.pf\:video-stage.is-live.tile-bottom:not(.is-swapped):not(.is-cam-preview):not(:has(.pf\:video-effects:not([hidden]))) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.tile-bottom.is-swapped .pf\:video-remote {
  top: auto;
  bottom: calc(11rem + env(safe-area-inset-bottom, 0px));
}
.pf\:video-stage.is-live.is-chrome-hidden.tile-bottom:not(.is-swapped):not(.is-cam-preview):not(:has(.pf\:video-effects:not([hidden]))) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.is-chrome-hidden.tile-bottom.is-swapped .pf\:video-remote {
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}
.pf\:video-stage.is-live .is-dragging {
  transition: none !important;
  cursor: grabbing !important;
  touch-action: none;
}
.pf\:video-stage.is-live:not(.is-swapped) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.is-swapped .pf\:video-remote {
  touch-action: none;
}

/* Pinch (or ctrl/scroll on a desktop) resizes the small picture; it grows from its corner. */
.pf\:video-stage.is-live:not(.is-swapped):not(.is-cam-preview) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.is-swapped .pf\:video-remote {
  scale: var(--tile-scale, 1);
  transform-origin: top right;
}
.pf\:video-stage.is-live.tile-left:not(.is-swapped):not(.is-cam-preview) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.tile-left.is-swapped .pf\:video-remote { transform-origin: top left; }
.pf\:video-stage.is-live.tile-bottom:not(.is-swapped):not(.is-cam-preview) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.tile-bottom.is-swapped .pf\:video-remote { transform-origin: bottom right; }
.pf\:video-stage.is-live.tile-left.tile-bottom:not(.is-swapped):not(.is-cam-preview) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.tile-left.tile-bottom.is-swapped .pf\:video-remote { transform-origin: bottom left; }

/* Flicked off a side: tucked away, with a tab on that edge to bring it back. */
.pf\:video-stage.is-live.is-tile-tucked:not(.is-swapped):not(.is-cam-preview) :is(.pf\:video-canvas.is-preview, .pf\:video-local:not(.is-hidden-source)),
.pf\:video-stage.is-live.is-tile-tucked.is-swapped .pf\:video-remote {
  opacity: 0;
  pointer-events: none;
}
.pf\:video-tile-tab {
  position: absolute;
  top: calc(5.5rem + env(safe-area-inset-top, 0px));
  right: 0;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 4.5rem;
  border: 0;
  border-radius: 999px 0 0 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pf\:video-tile-tab[hidden] { display: none; }
.pf\:video-tile-tab svg { width: 1rem; height: 1rem; }
.pf\:video-stage.tile-tab-left .pf\:video-tile-tab { right: auto; left: 0; border-radius: 0 999px 999px 0; }
.pf\:video-stage.tile-tab-left .pf\:video-tile-tab svg { transform: scaleX(-1); }
.pf\:video-stage.tile-bottom .pf\:video-tile-tab { top: auto; bottom: calc(12rem + env(safe-area-inset-bottom, 0px)); }
.pf\:video-tool.is-on .pf\:video-tool-icon { background: #e11d48; color: #fff; }
.pf\:video-icon-btn[hidden] { display: none; }