/* =====================================================================
   ShotGram v108 — full-screen video calls, tap to hide the buttons,
   floating window expand button, pull-to-refresh spinner.
   ===================================================================== */

/* ---- video call: the picture fills the WHOLE screen, edge to edge ------ */
.call-overlay.video:not(.minimized) .call-stage { position: absolute; inset: 0; padding: 0 !important; height: 100%; }
.call-overlay.video:not(.minimized) .call-remote {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; background: #000;
}
.call-overlay.video.peer-screen:not(.minimized) .call-remote { object-fit: contain; }
.call-overlay.video:not(.minimized) .call-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.call-overlay.video:not(.minimized) .call-person { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 84px); left: 0; right: 0; z-index: 3; }
.call-overlay.video:not(.minimized) .call-person .avatar { display: none; }
.call-overlay.video:not(.minimized) .call-name,
.call-overlay.video:not(.minimized) .call-status { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.call-overlay.video:not(.minimized) .call-chip,
.call-overlay.video:not(.minimized) .call-min-btn { z-index: 5; }

/* tap the video → everything fades out; tap again → back */
.call-overlay .call-controls, .call-overlay .call-min-btn, .call-overlay .call-chip,
.call-overlay .call-person, .call-overlay .call-local, .call-overlay .call-share-banner {
  transition: opacity .22s ease;
}
.call-overlay.ui-hidden .call-controls, .call-overlay.ui-hidden .call-min-btn, .call-overlay.ui-hidden .call-chip,
.call-overlay.ui-hidden .call-person, .call-overlay.ui-hidden .call-local, .call-overlay.ui-hidden .call-share-banner {
  opacity: 0; pointer-events: none;
}

/* ---- floating video window: expand button ------------------------------ */
.call-pip-expand { display: none; }
.call-overlay.minimized.pip .call-pip-expand {
  display: grid; place-items: center; position: absolute; z-index: 6;
  top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%; border: 0; color: #fff;
  background: rgba(20, 22, 36, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.call-overlay.minimized.pip .call-pip-expand svg { width: 15px; height: 15px; }

/* ---- pull to refresh ----------------------------------------------------- */
.ptr {
  position: fixed; z-index: 90; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 6px);
  width: 38px; height: 38px; margin-top: -48px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  background: var(--surface, #151726); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  transform: translate(-50%, 0);
}
.ptr.show { opacity: 1; }
.ptr-spin { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(var(--violet-rgb, 139, 92, 255), .3); border-top-color: var(--violet, #8b5cff); }
.ptr.ready .ptr-spin { border-top-color: #22d3ee; }
.ptr.spinning .ptr-spin { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.spinning .ptr-spin { animation-duration: 1.6s; } }