/* ============================================================================
   FanPulse · Picture-in-Picture layout (Android app)
   The shell's PiP window shows the whole WebView, shrunk. While it is open
   (html.fp-in-pip, set by fp-player.js on the shell's "pipChange" event) the
   page shows only what is playing:
     - a <video> is lifted into #fp-pip-stage, full window, letterboxed;
     - an <iframe> (YouTube, a watch party) cannot move without reloading, so
       it is pinned over the window where it is, marked [data-fp-pip-target].
   Everything else is hidden, not removed, so it is all still there when the
   window is expanded back to full screen.
   ============================================================================ */

html.fp-in-pip,
html.fp-in-pip body {
  background: var(--fp-black);
  overflow: hidden !important;
}

html.fp-in-pip body * { visibility: hidden !important; }

html.fp-in-pip #fp-pip-stage,
html.fp-in-pip #fp-pip-stage *,
html.fp-in-pip [data-fp-pip-target] { visibility: visible !important; }

#fp-pip-stage {
  position: fixed; inset: 0;
  z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: var(--fp-black);
}
/* !important: a surface's own inline size (a fixed-size player) would
   otherwise leave the video small inside the PiP window. */
#fp-pip-stage video {
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important; margin: 0 !important;
  object-fit: contain;
  background: var(--fp-black);
}

html.fp-in-pip iframe[data-fp-pip-target] {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100vh !important;
  min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important;
  border: 0 !important; z-index: 2147483647;
  background: var(--fp-black);
}