/* ==========================================================================
   Friendse — Centered mobile/tablet column + smooth feed UX
   (MF Team fix pack — load LAST, after fp-mobile.css)
   Fixes:
   1) Home/Feed content ko chhoti screens par center kiya (left-stuck nahi).
   2) Story tray / feed scrolling ko FB jaisa smooth + snappy banaya.
   ========================================================================== */

/* ── 1. Centered content column ─────────────────────────────────────── */
@media (max-width: 820px) {
  .friende-app-shell {
    display: block;
    width: 100%;
    max-width: 620px;      /* comfortable reading column */
    margin-inline: auto;   /* <- actual centering */
    padding: 10px 14px 88px;
  }
  .friende-app-shell > section {
    min-width: 0;
    width: 100%;
    margin-inline: auto;
  }
  /* fp-mobile.css forces flat 12px side padding on main children; keep the
     centered column instead of a left-hugging one. */
  main > .friende-app-shell {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .fp-feed,
  .fp-shell,
  .friende-main,
  .friende-card {
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Very small phones: edge-to-edge cards look better than a squeezed column */
@media (max-width: 400px) {
  .friende-app-shell { padding-left: 10px !important; padding-right: 10px !important; }
}

/* Tablets: keep it centered but a bit wider */
@media (min-width: 640px) and (max-width: 820px) {
  .friende-app-shell { max-width: 680px; }
}

/* Narrow desktop windows (sidebar visible but rightbar hidden) — the middle
   column used to sit hard-left with a big empty gap on the right. */
@media (min-width: 821px) and (max-width: 1100px) {
  .friende-app-shell.friende-app-shell-2col > section {
    max-width: 720px;
    margin-inline: auto;
  }
}

/* ── 2. Smooth, FB-like scrolling ───────────────────────────────────── */
/* SCROLL FIX (MF Team): global `html { scroll-behavior: smooth }` made every
   mouse-wheel tick animate, so the middle column felt frozen / laggy and
   sometimes ignored the wheel completely. Smooth scrolling now applies only
   to scripted jumps (anchor links, back-to-top), never to wheel scrolling. */
html:focus-within { scroll-behavior: auto; }
html { scroll-behavior: auto; }
html, body { overflow-y: visible; height: auto; max-height: none; }

.friende-app-shell > section,
.fp-feed {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Story tray: snap + momentum + hidden scrollbar */
.friende-story-row,
.fx-tray {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.friende-story-row::-webkit-scrollbar,
.fx-tray::-webkit-scrollbar { display: none; }
.friende-story,
.fx-story { scroll-snap-align: start; }

/* Cards feel alive without being heavy */
.friende-card {
  transition: transform .18s ease, box-shadow .18s ease;
  /* SCROLL FIX: `content-visibility:auto` + `contain-intrinsic-size` made the
     page height jump while scrolling (scrollbar kept resetting), which reads
     as "the middle area does not move". Removed — cards render normally. */
}
@media (hover: hover) {
  .friende-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .08); }
}
.friende-story:active,
.fx-story:active { transform: scale(.97); }

/* Media never causes horizontal jitter while scrolling */
.friende-card img,
.friende-card video { max-width: 100%; height: auto; }

/* Sticky composer/tab bars sit right under the top bar on mobile */
@media (max-width: 820px) {
  .fp-feed-tabs, .friende-feed-tabs {
    position: sticky;
    top: 64px;
    z-index: 20;
    background: var(--c-bg);
    padding-block: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .friende-card,
  .friende-story,
  .fx-story { transition: none !important; }
}

/* ── 3. FB-jaisa layout: sides apni jagah, sirf center scroll ────────
   FIX (MF Team): `html, body { overflow-y:auto }` ne html ko scroll
   container bana diya tha, jis se position:sticky toot gayi aur scroll
   karte hue dono sides (left sidebar + right suggestions) upar chali
   jati thin. Ab html/body ka overflow default (visible) hai aur dono
   columns viewport me sticky rehte hain — bilkul Facebook ki tarah. */
html, body { overflow-y: visible !important; height: auto; max-height: none; }
html, body { overflow-x: clip; }

@media (min-width: 821px) {
  .friende-app-shell { align-items: start; }

  .friende-sidebar,
  .friende-rightbar {
    position: sticky !important;
    top: 80px !important;
    align-self: start !important;
    height: auto !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .friende-sidebar::-webkit-scrollbar,
  .friende-rightbar::-webkit-scrollbar { width: 6px; }

  /* Center column hi lamba hota hai — infinite feed wahin chalta hai. */
  .friende-app-shell > section { min-height: 100vh; }
}

/* Scroll progress line (blue bar) hata di gayi — scroll karte waqt uska
   ghatna/barhna distract kar raha tha. */
.fx-progress { display: none !important; }

/* ── 4. STICKY SIDES — REAL FIX (side widgets must never scroll away) ──
   THE BUG
   Section 3 above added `html, body { overflow-x: clip }` to kill sideways
   scrolling. Any `overflow` value other than `visible` — including `clip` —
   turns that element into the sticky containing box for every descendant.
   With `clip` on <html>, the browser stops treating the viewport as the
   scroll box, so `position: sticky` on the left sidebar and the right
   suggestions column silently does nothing and both columns scroll up and
   out of view with the page. That is exactly what happens on Terms of
   Service and every other long page.

   THE FIX
   Give the root a plain `overflow: visible` again (so sticky works against
   the viewport) and prevent sideways scrolling the safe way instead: no
   element is allowed to be wider than the page. Then pin both side columns
   and both ad rails under the sticky top bar with their own independent,
   quiet scrollbar. Only the middle column moves with the page.
   Nothing here changes markup, links, scripts or any behaviour — layout only.
   ==================================================================== */
html { overflow-x: visible !important; }
body { overflow-x: visible !important; }

/* Sideways scroll guard without breaking sticky. */
body img,
body video,
body canvas,
body iframe,
body table,
body pre { max-width: 100%; }

@media (min-width: 821px) {
    /* Left sidebar + right suggestions: stay put, page scrolls behind them. */
    .friende-sidebar,
    .friende-rightbar {
        position: sticky !important;
        top: 76px !important;
        align-self: start !important;
        height: auto !important;
        max-height: calc(100dvh - 92px) !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        overscroll-behavior: contain;
        padding-right: 2px;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--c-text, #111827) 22%, transparent) transparent;
    }
    /* Quiet scrollbar: invisible until the pointer is on the column. */
    .friende-sidebar::-webkit-scrollbar,
    .friende-rightbar::-webkit-scrollbar { width: 8px; }
    .friende-sidebar::-webkit-scrollbar-thumb,
    .friende-rightbar::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 99px;
    }
    .friende-sidebar:hover::-webkit-scrollbar-thumb,
    .friende-rightbar:hover::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--c-text, #111827) 20%, transparent);
    }

    /* Advertising rails are side widgets too — same rule. */
    .fp-ad-rail {
        top: 76px;
        max-height: calc(100dvh - 92px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* The grid must align its items to the top, otherwise a stretched
       column has no room to stick inside. */
    .friende-app-shell { align-items: start !important; }
}