/* =====================================================================
   ShotGram v92 — calls: floating camera window, screen share, speaking glow.
   Loaded after v90.css so these rules win over the v90 pill.
   ===================================================================== */

/* ---- full call screen ------------------------------------------------ */

/* A shared screen is shown whole (letter-boxed), never cropped or mirrored. */
.call-overlay.peer-screen .call-remote { object-fit: contain; background: #000; }

/* Self-view can be dragged; once moved it keeps its place. */
.call-overlay:not(.minimized) .call-local.is-placed {
  right: auto !important; top: 0 !important; left: 0 !important;
  transform: translate3d(var(--pip-x), var(--pip-y), 0);
}
.call-overlay:not(.minimized) .call-local.mirror.is-placed { transform: translate3d(var(--pip-x), var(--pip-y), 0) scaleX(-1); }
.call-overlay:not(.minimized) .call-local.mirror.back.is-placed { transform: translate3d(var(--pip-x), var(--pip-y), 0); }
.call-local { cursor: grab; }
.call-local.is-dragging { cursor: grabbing; transition: none !important; }
.call-local.is-snapping { transition: transform .24s cubic-bezier(.2, .9, .3, 1); }

/* "You're sharing your screen" */
.call-share-banner {
  position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  top: calc(var(--sa-t, env(safe-area-inset-top, 0px)) + 56px);
  display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px;
  border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(var(--cyan-rgb, 0, 216, 255), .18); border: 1px solid rgba(var(--cyan-rgb, 0, 216, 255), .45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.call-share-banner svg { width: 16px; height: 16px; }
.call-share-banner button {
  border: 0; border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 12px;
  background: var(--bad, #ff4d6d); color: #fff;
}
.call-share-banner[hidden] { display: none; }
.call-btn#callScreen.active { background: var(--cyan, #00d8ff); color: #04121a; }
/* while I share, my own preview would only show the screen back to me */
.call-overlay.sharing .call-local { display: none !important; }

.call-pip-mic { display: none; }

/* ---- the floating camera window (minimised with video on) ------------- */
.call-overlay.minimized.pip {
  top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
  transform: translate3d(var(--pip-x, calc(100vw - 132px)), var(--pip-y, 90px), 0);
  width: 116px !important; height: 168px !important; padding: 0 !important;
  border-radius: 18px; overflow: hidden;
  background: #000 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .14);
  cursor: grab; z-index: 2100; touch-action: none;
  display: block !important;
}
.call-overlay.minimized.pip.pip-screen { width: 200px !important; height: 124px !important; }
.call-overlay.minimized.pip.is-dragging { cursor: grabbing; transition: none; }
.call-overlay.minimized.pip.is-snapping { transition: transform .24s cubic-bezier(.2, .9, .3, 1); }

/* speaking: a soft brand-colour glow around whoever is talking */
.call-overlay.minimized.pip.pip-speaking {
  box-shadow: 0 14px 34px rgba(0, 0, 0, .55), 0 0 0 2px var(--cyan, #00d8ff), 0 0 18px rgba(var(--cyan-rgb, 0, 216, 255), .55);
}

.call-overlay.minimized.pip .call-stage { position: absolute; inset: 0; height: 100%; padding: 0 !important; }
.call-overlay.minimized.pip .call-person,
.call-overlay.minimized.pip .call-share-banner,
.call-overlay.minimized.pip .call-aura,
.call-overlay.minimized.pip .call-chip { display: none !important; }

/* show ONE camera, full size: theirs by default, mine when I'm talking */
.call-overlay.minimized.pip .call-remote,
.call-overlay.minimized.pip .call-local {
  display: block !important; position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; opacity: 1 !important;
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  pointer-events: none; transform: none;
}
.call-overlay.minimized.pip .call-local.mirror:not(.back) { transform: scaleX(-1); }
.call-overlay.minimized.pip:not(.pip-local) .call-local { display: none !important; }
.call-overlay.minimized.pip.pip-local .call-remote { display: none !important; }
.call-overlay.minimized.pip:not(.showing-remote) .call-remote { display: none !important; }

/* small controls on the window: mic + hang up */
.call-overlay.minimized.pip .call-pill-end,
.call-overlay.minimized.pip .call-pip-mic {
  display: grid !important; place-items: center; position: absolute; bottom: 7px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: 0; margin: 0; color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}
.call-overlay.minimized.pip .call-pill-end { right: 7px; background: var(--bad, #ff4d6d); }
.call-overlay.minimized.pip .call-pip-mic { left: 7px; background: rgba(20, 22, 36, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.call-overlay.minimized.pip .call-pip-mic.off { background: #fff; color: #111; }
.call-overlay.minimized.pip .call-pill-end svg,
.call-overlay.minimized.pip .call-pip-mic svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .call-overlay.minimized.pip.is-snapping, .call-local.is-snapping { transition: none; }
}

/* ---- v99 · the ⌄ minimise button could not be pressed ------------------
   v90 gave the button z-index 2 — the same layer as .call-stage, which
   comes after it in the page and fills the whole screen, so every tap on
   the button landed on the call stage instead. Lift it above everything
   on the call screen and give it a bigger tap area. */
.call-overlay:not(.minimized) .call-min-btn {
  z-index: 8 !important;
  width: 46px; height: 46px;
  touch-action: manipulation;
}
.call-overlay:not(.minimized) .call-chip { pointer-events: none; }