/* ─────────────────────────────────────────────────────────────────────────
   Friendse — overlay / popup stacking fix pack (v5)

   Screenshot issues fixed here:
   1. Right-hand widgets ("Quick actions", "People you may know",
      "Friendse for creators", ad rails) kept painting NEXT TO / ON TOP of
      an open modal — Create post, Create status, and the
      "Published successfully" popup.
      Cause: .friende-rightbar / .friende-sidebar / .fp-ad-rail are
      position:sticky, so each one creates its own stacking context and
      competes with a fixed overlay instead of sitting quietly behind it.
      Every earlier attempt raised the OVERLAY; this file instead pins the
      rails to z-index 0 and, while an overlay is open, removes them from
      the paint/interaction path entirely (body.fp-overlay-open, toggled by
      public/js/fp-overlay-fix.js).
   2. One single, predictable z-index ladder for every overlay in the app,
      so two overlays can never tie and fall back to DOM order.
   3. Mobile-first sizing for the result popup + confirm dialog.

   Loaded LAST in layouts/app.blade.php so it wins over fp-feed.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── 1. Side rails must never out-paint an overlay ───────────────────── */
.friende-rightbar,
.friende-sidebar,
.fp-ad-rail,
.fp-ad-rail--left,
.fp-ad-rail--right {
  z-index: 0 !important;
}

/* While ANY overlay is open: freeze the page, and take the rails out of
   the picture completely (isolation:auto + z-index:auto + no clicks).   */
body.fp-overlay-open {
  overflow: hidden !important;
}
body.fp-overlay-open .friende-rightbar,
body.fp-overlay-open .friende-sidebar,
body.fp-overlay-open .fp-ad-rail,
body.fp-overlay-open .friende-mobile-nav,
body.fp-overlay-open .friende-topbar {
  z-index: 0 !important;
  pointer-events: none !important;
}
/* Sticky is what created the stacking context — drop it while blocked. */
@media (min-width: 1024px) {
  body.fp-overlay-open .friende-rightbar,
  body.fp-overlay-open .fp-ad-rail {
    position: relative !important;
  }
}

/* ── 2. Overlay z-index ladder (higher = closer to the user) ─────────── */
.fp-composer-overlay        { z-index: 100000 !important; }
.fp-modal-overlay           { z-index: 100100 !important; }
.fp-confirm-overlay         { z-index: 100200 !important; }
.friende-flash-overlay      { z-index: 100300 !important; }
.fp-notification-confirm    { z-index: 100300 !important; }
.friendse-result-popup      { z-index: 100400 !important; }
.friendse-confirm-popup     { z-index: 100500 !important; }

/* Overlays are always viewport-sized, never clipped by a parent. */
.fp-composer-overlay,
.fp-modal-overlay,
.fp-confirm-overlay,
.friende-flash-overlay,
.friendse-result-popup,
.friendse-confirm-popup {
  position: fixed !important;
  inset: 0 !important;
  max-width: 100vw;
}

/* ── 3. Result popup + confirm popup: responsive polish ──────────────── */
.friendse-result-popup__card,
.friendse-confirm-popup__card {
  width: 100%;
  max-width: 26rem;
  margin: auto;
  animation: fpPopupIn .18s cubic-bezier(.2, .9, .3, 1);
}
@keyframes fpPopupIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .friendse-result-popup,
  .friendse-confirm-popup { padding: 0 !important; align-items: flex-end !important; }
  .friendse-result-popup__card,
  .friendse-confirm-popup__card {
    max-width: none;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.25rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)) !important;
    animation: fpSheetIn .2s cubic-bezier(.2, .9, .3, 1);
  }
  .friendse-result-popup__btn,
  .friendse-confirm-popup__btn { width: 100%; min-height: 46px; }
  .friendse-confirm-popup__actions { flex-direction: column-reverse; }
}
@keyframes fpSheetIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 4. Status viewer: item being deleted fades out instantly ────────── */
.fs-deleting {
  transition: opacity .25s ease, transform .25s ease;
  opacity: 0 !important;
  transform: scale(.94) !important;
  pointer-events: none !important;
}