/* ============================================================================
   FiwFan "Post Wall" feed — Spark design system, rebuilt for Bootstrap4 + Blade.
   Ported pixel-for-pixel from the ff001 prototype (tokens.jsx / feed-*.jsx).
   Everything is namespaced under .ff-feed so it never collides with style.css.
   ========================================================================== */

.ff-feed {
  /* ink + surface */
  --ff-navy900:#15234C; --ff-navy800:#1C2D5F; --ff-navy700:#2B3E73;
  --ff-ink:#1E1A3D; --ff-ink2:#4A4D6B; --ff-mute:#8A8FA3;
  --ff-line:#E7E8EE; --ff-line2:#EFEFF4; --ff-bg:#F5F4F8; --ff-surface2:#FAFAFD;
  /* accents */
  --ff-magenta:#E5377A; --ff-magenta2:#FF6FA0; --ff-coral:#F26E55;
  --ff-orange:#F59849; --ff-amber:#F0B83F; --ff-mint:#2DBE82;
  --ff-teal:#2AA9A3; --ff-sky:#2A90E2; --ff-violet:#6B5BD2;
  /* tints */
  --ff-magentaT:#FCEAF1; --ff-coralT:#FDEDE7; --ff-amberT:#FDF3DD;
  --ff-mintT:#E0F6EB; --ff-skyT:#E2F0FC; --ff-violetT:#ECE9FA;
  /* gradients */
  --ff-warm-grad:linear-gradient(96deg,#F59849 0%,#EE5C7A 55%,#E5377A 100%);
  --ff-pink-grad:linear-gradient(140deg,#FF6FA0 0%,#E5377A 100%);
  --ff-navy-grad:linear-gradient(150deg,#1C2D5F 0%,#2B3E73 100%);
  --ff-mint-grad:linear-gradient(140deg,#4ED49B 0%,#2DBE82 100%);
  --ff-insta-grad:linear-gradient(45deg,#FEDA75 0%,#FA7E1E 22%,#D62976 50%,#962FBF 75%,#4F5BD5 100%);
  /* solid modern card */
  --ff-card-shadow:0 1px 2px rgba(21,35,76,.04), 0 10px 24px -8px rgba(21,35,76,.12);
  --ff-card-shadow-hover:0 1px 2px rgba(21,35,76,.04), 0 20px 44px -14px rgba(21,35,76,.22);
  --ff-shadow-lg:0 20px 50px rgba(21,35,76,.14), 0 40px 100px rgba(21,35,76,.18);

  font-family:'Sarabun',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  color:var(--ff-ink);
  -webkit-font-smoothing:antialiased;
}
.ff-feed *, .ff-feed *::before, .ff-feed *::after { box-sizing:border-box; }
.ff-feed button { font-family:inherit; }

/* page background sits under the existing header */
body.ff-feed-page { background:#EEF0F4; }
/* shell clears the fixed site header (matches dashboard pt-65) */
.ff-shell { min-height:100vh; padding-top:64px; background:#EEF0F4; }
/* Phone fixed-header is ~50px (vs 64 on desktop); trim the shell padding so the
   first card sits ~5px below it instead of ~24px. */
@media (max-width:767.98px){
  .ff-shell{ padding-top:45px; }
}
/* Desktop: header ~64px + the wrap's 20px top padding left a ~20px gap; trim the
   shell so content sits ~5px below the fixed header. */
@media (min-width:1024px){
  .ff-shell{ padding-top:49px; }
}

/* ── layout shell ───────────────────────────────────────────────────────── */
.ff-wrap { max-width:600px; margin:0 auto; padding:10px 12px 96px; }
.ff-stack { display:flex; flex-direction:column; gap:10px; }
.ff-rail-left, .ff-rail-right { display:none; }

@media (min-width:1024px) {
  .ff-wrap {
    max-width:1240px; padding:20px 28px 40px;
    display:grid; grid-template-columns:280px minmax(0,1fr) 320px; gap:20px;
    align-items:start;
  }
  .ff-rail-left, .ff-rail-right { display:block; position:sticky; top:69px; }
  .ff-center { max-width:600px; width:100%; margin:0 auto; }
  .ff-stack { gap:14px; }
}

/* ── generic card ───────────────────────────────────────────────────────── */
.ff-card {
  background:#fff; border:1px solid rgba(21,35,76,.06); border-radius:16px;
  box-shadow:var(--ff-card-shadow); overflow:hidden; position:relative;
}
@media (min-width:1024px){ .ff-card{ border-radius:18px; } }
/* Guest "log in to post" CTA: hidden on desktop only; unchanged on mobile.
   !important is required to override the element's inline display:flex. */
@media (min-width:1024px){ .ff-guest-cta{ display:none !important; } }

/* ── avatar ─────────────────────────────────────────────────────────────── */
.ff-av {
  position:relative; flex-shrink:0; border-radius:50%; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);
  background:linear-gradient(135deg,#4A6FA8,#1C2D5F);
}
.ff-av.alex,.ff-av.you{ background:linear-gradient(135deg,#4A6FA8,#1C2D5F); }
.ff-av.morgan{ background:linear-gradient(135deg,#6B5BD2,#3B2E8C); }
.ff-av.jade{ background:linear-gradient(135deg,#FF6FA0,#E5377A); }
.ff-av.rio{ background:linear-gradient(135deg,#4ED49B,#2AA9A3); }
.ff-av.noor{ background:linear-gradient(135deg,#F59849,#E5377A); }
.ff-av img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ff-av.ring{ box-shadow:0 0 0 2.5px var(--ff-magenta); }

/* ── verified tick ──────────────────────────────────────────────────────── */
.ff-verified{ display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:var(--ff-sky); flex-shrink:0; }
.ff-verified svg{ width:9px; height:9px; stroke:#fff; stroke-width:3.5; fill:none; }

/* ── tier badge ─────────────────────────────────────────────────────────── */
.ff-tier{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0;
  height:20px; padding:0 9px; border-radius:10px; color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.ff-tier.sm{ height:16px; padding:0 6px; border-radius:8px; gap:3px; font-size:9px; }
.ff-tier svg{ width:11px; height:11px; } .ff-tier.sm svg{ width:9px; height:9px; }
.ff-tier.superstar{ background:var(--ff-insta-grad); }
.ff-tier.star{ background:var(--ff-sky); }
.ff-tier.popular{ background:var(--ff-magenta); }

/* ── post card ──────────────────────────────────────────────────────────── */
/* Hover lift is box-shadow only (NO transform): a CSS transform on the card
   would become the containing block for the position:fixed kebab menu
   (.ff-postmenu-pop), throwing it far from the ⋮ button. */
.ff-post{ transition:box-shadow .2s ease; }
@media (min-width:1024px){
  .ff-post:hover{ box-shadow:var(--ff-card-shadow-hover); }
}
.ff-post-head{ display:flex; align-items:flex-start; gap:12px; padding:14px 14px 0; }
@media (min-width:1024px){ .ff-post-head{ padding:18px 18px 0; } }
.ff-post-head .ff-av{ width:44px; height:44px; font-size:16.7px; }
@media (min-width:1024px){ .ff-post-head .ff-av{ width:48px; height:48px; } }
.ff-post-id{ flex:1; min-width:0; }
.ff-post-namerow{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ff-post-name{ font-size:15px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; white-space:nowrap; cursor:pointer; }
.ff-post-handle{ font-size:13px; font-weight:600; color:var(--ff-mute); white-space:nowrap; }
.ff-post-meta{ display:flex; align-items:center; gap:6px; margin-top:3px; color:var(--ff-mute); font-size:12.5px; }
.ff-post-meta svg{ width:12px; height:12px; stroke-width:2; }
.ff-post-body{ padding:12px 14px 14px; }
.ff-post.has-media .ff-post-body{ padding-bottom:12px; }
@media (min-width:1024px){ .ff-post-body{ padding-left:18px; padding-right:18px; } }
.ff-post-text{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ff-ink); font-weight:500; white-space:pre-wrap; }
@media (min-width:1024px){ .ff-post-text{ font-size:15px; } }
.ff-post-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.ff-post-tags span{ color:var(--ff-magenta); font-weight:700; font-size:13.5px; }
.ff-post-divider{ height:1px; background:var(--ff-line2); margin:12px 14px 0; }
@media (min-width:1024px){ .ff-post-divider{ margin-left:18px; margin-right:18px; } }

/* ── photo grid ─────────────────────────────────────────────────────────── */
/* No-caption posts: media sits directly after the header (the body div is skipped
   when there's no text), leaving it flush against the header. Give it the same
   12px breathing room a caption would have provided. */
.ff-post-head + .ff-grid,
.ff-post-head + .ff-video,
.ff-post-head + .ff-post-link{ margin-top:12px; }
.ff-grid{ display:grid; gap:3px; }
.ff-grid .ff-media{ position:relative; overflow:hidden; background:linear-gradient(135deg,#c9d3e6,#8aa0c4); }
.ff-grid .ff-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ff-grid.n1{ grid-template-columns:1fr; }
.ff-grid.n2{ grid-template-columns:1fr 1fr; }
.ff-grid.n3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.ff-grid.n3 .ff-media:first-child{ grid-row:1 / 3; }
.ff-grid.n4{ grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
.ff-grid .ff-more{ position:absolute; inset:0; background:rgba(15,15,30,.5); display:flex;
  align-items:center; justify-content:center; color:#fff; font-size:30px; font-weight:700; }

/* ── video media ────────────────────────────────────────────────────────── */
.ff-video{ position:relative; width:100%; overflow:hidden; cursor:pointer; background:linear-gradient(135deg,#caa0c4,#8a5aa0); }
.ff-video video, .ff-video img.poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:#000; }
.ff-video .vignette{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 22%,transparent 70%,rgba(0,0,0,.28)); }
.ff-video .play-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; transition:opacity .25s; }
.ff-video.playing .play-overlay, .ff-video.ff-ended .play-overlay{ opacity:0; }
.ff-video .play-overlay span{ width:60px; height:60px; border-radius:30px; background:rgba(0,0,0,.4);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.ff-video .play-overlay svg{ width:26px; height:26px; fill:#fff; stroke:none; }
/* replay button — shown after the clip plays through once */
.ff-video .replay-overlay{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; background:rgba(0,0,0,.28); cursor:pointer; z-index:4; padding:0; }
.ff-video .replay-overlay[hidden]{ display:none; }
.ff-video .replay-overlay span{ width:60px; height:60px; border-radius:30px; background:rgba(0,0,0,.5);
  backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; }
.ff-video .mute-btn{ position:absolute; bottom:14px; right:14px; width:34px; height:34px; border-radius:17px;
  border:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:3; }
.ff-video .mute-btn svg{ width:17px; height:17px; stroke:#fff; stroke-width:2; }
.ff-video .duration{ position:absolute; bottom:14px; left:14px; background:rgba(0,0,0,.55); color:#fff;
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; }
.ff-video .clip-badge{ position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:5px;
  height:20px; padding:0 8px; border-radius:10px; background:rgba(0,0,0,.5); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.ff-video .clip-badge .dot{ width:6px; height:6px; border-radius:3px; background:currentColor; }
.ff-video .vprogress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.25); z-index:3; }
.ff-video .vprogress > i{ display:block; height:100%; width:0; background:#fff; transition:width .15s linear; }

/* ── link preview ───────────────────────────────────────────────────────── */
.ff-link{ border:1px solid var(--ff-line); border-radius:14px; overflow:hidden; background:#fff; }
.ff-link .ff-media{ position:relative; width:100%; height:150px; background:linear-gradient(135deg,#f3c98a,#e0a060); overflow:hidden; }
.ff-link .ff-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ff-link .ff-link-body{ padding:12px 14px; }
.ff-link .ff-link-domain{ font-size:10.5px; font-weight:700; color:var(--ff-mute); letter-spacing:.06em; text-transform:uppercase; }
.ff-link .ff-link-title{ font-size:14.5px; font-weight:800; color:var(--ff-ink); margin-top:3px; line-height:1.3; }
.ff-post-link{ padding:0 14px 4px; }
@media (min-width:1024px){ .ff-post-link{ padding-left:18px; padding-right:18px; } }

/* ── action bar (counts inline) ─────────────────────────────────────────── */
.ff-actions{ display:flex; align-items:center; padding:4px 8px 6px; position:relative; }
@media (min-width:1024px){ .ff-actions{ padding-left:12px; padding-right:12px; } }
.ff-react-wrap{ position:relative; flex:1; display:flex; }
.ff-act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:36px; border-radius:18px; border:0; cursor:pointer; background:transparent;
  color:var(--ff-ink2); font-size:13px; font-weight:700; transition:background .14s, color .14s; }
.ff-act:hover{ background:var(--ff-bg); }
.ff-act svg{ width:19px; height:19px; stroke:currentColor; stroke-width:1.7; }
.ff-act .emoji{ font-size:18px; line-height:1; }
.ff-act.active{ background:rgba(229,55,122,.10); color:var(--ff-magenta); }
.ff-act.active svg{ stroke-width:2.3; }
.ff-act.active.c-like{ background:rgba(42,144,226,.10); color:var(--ff-sky); }
.ff-act.active.c-love{ background:rgba(229,55,122,.10); color:var(--ff-magenta); }
.ff-act.active.c-fire{ background:rgba(242,110,85,.10); color:var(--ff-coral); }
.ff-act.active.c-haha{ background:rgba(240,184,63,.12); color:var(--ff-amber); }
.ff-act.active.c-wow{ background:rgba(107,91,210,.10); color:var(--ff-violet); }
.ff-act.active.c-sad{ background:rgba(42,169,163,.10); color:var(--ff-teal); }

/* reaction picker */
.ff-react-picker{ position:absolute; bottom:100%; left:0; margin-bottom:8px; z-index:41;
  background:#fff; border-radius:30px; padding:7px 10px; display:none; gap:4px;
  box-shadow:0 12px 32px rgba(15,15,30,.22), 0 0 0 1px rgba(0,0,0,.04); animation:sparkPop .16s ease-out; }
.ff-react-picker.open{ display:flex; }
.ff-react-picker button{ width:40px; height:40px; border:0; background:transparent; cursor:pointer;
  font-size:26px; line-height:1; padding:0; border-radius:20px; transition:transform .12s ease; transform-origin:bottom center; }
.ff-react-picker button:hover{ transform:scale(1.35) translateY(-4px); }

/* ── composer trigger ("what's on your mind") ───────────────────────────── */
.ff-trigger{ padding:13px 14px; }
@media (min-width:1024px){ .ff-trigger{ padding:16px 18px; } }
.ff-trigger-row{ display:flex; align-items:center; gap:12px; }
.ff-trigger-row .ff-av{ width:44px; height:44px; font-size:16.7px; }
@media (min-width:1024px){ .ff-trigger-row .ff-av{ width:48px; height:48px; } }
.ff-trigger-prompt{ flex:1; padding:0; border:0; background:transparent; cursor:pointer; text-align:left; }
.ff-trigger-ring{ background:var(--ff-warm-grad); padding:1.5px; border-radius:16px; }
.ff-trigger-inner{ display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.92); border-radius:15px; padding:8px 11px; }
@media (min-width:1024px){ .ff-trigger-inner{ padding:9px 13px; } }
.ff-trigger-spark{ width:32px; height:32px; border-radius:11px; background:var(--ff-warm-grad);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 3px 10px rgba(229,55,122,.3); }
.ff-trigger-spark svg{ width:17px; height:17px; stroke:#fff; stroke-width:2.2; }
@media (min-width:1024px){ .ff-trigger-spark{ width:36px; height:36px; } .ff-trigger-spark svg{ width:19px; height:19px; } }
.ff-trigger-txt{ flex:1; min-width:0; overflow:hidden; }
.ff-trigger-txt .t1{ display:block; font-size:14px; font-weight:700; color:var(--ff-ink); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ff-trigger-txt .t2{ display:block; font-size:11.5px; color:var(--ff-mute); margin-top:1px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (min-width:1024px){ .ff-trigger-txt .t1{ font-size:15px; } }
.ff-trigger-actions{ display:flex; gap:7px; }
@media (min-width:1024px){ .ff-trigger-actions{ gap:10px; } }
.ff-quick{ flex:1; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  height:38px; border-radius:12px; border:0; cursor:pointer; font-size:12px; font-weight:800; white-space:nowrap; transition:filter .12s, transform .08s; }
.ff-quick:hover{ filter:brightness(.96); } .ff-quick:active{ transform:scale(.97); }
.ff-quick svg{ width:17px; height:17px; stroke:currentColor; stroke-width:2.2; }
@media (min-width:1024px){ .ff-quick{ height:42px; gap:8px; font-size:13.5px; } .ff-quick svg{ width:19px; height:19px; } }
.ff-quick.photo{ background:var(--ff-mintT); color:var(--ff-mint); }
.ff-quick.video{ background:var(--ff-magentaT); color:var(--ff-magenta); }
.ff-card-divider{ height:1px; background:var(--ff-line2); margin:12px 0 10px; }
@media (min-width:1024px){ .ff-card-divider{ margin-top:14px; } }

/* ── feed filter + "The Wall" heading ───────────────────────────────────── */
.ff-filter{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ff-filter-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.ff-filter-bar{ width:4px; height:26px; border-radius:3px; background:var(--ff-warm-grad); flex-shrink:0; }
.ff-filter-title{ display:block; font-size:19px; font-weight:800; letter-spacing:-.02em; line-height:1.05;
  background:var(--ff-warm-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ff-magenta); }
@media (min-width:1024px){ .ff-filter-title{ font-size:22px; } }
.ff-filter-sub{ display:block; font-size:11px; font-weight:700; color:var(--ff-mute); letter-spacing:.02em; margin-top:1px; }
.ff-filter-btn{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:18px;
  background:#fff; border:1px solid var(--ff-line2); box-shadow:var(--ff-card-shadow); cursor:pointer; flex-shrink:0;
  font-size:13.5px; font-weight:700; color:var(--ff-ink); }
.ff-filter-btn svg{ width:16px; height:16px; stroke-width:2; }
.ff-filter-btn .ico-filter{ color:var(--ff-magenta); } .ff-filter-btn .ico-chev{ color:var(--ff-mute); stroke-width:2.4; }
.ff-filter-menu{ position:absolute; top:100%; right:0; margin-top:6px; z-index:31; width:200px; background:#fff;
  border-radius:14px; box-shadow:var(--ff-shadow-lg); border:1px solid var(--ff-line2); padding:6px; display:none; }
.ff-filter-menu.open{ display:block; }
.ff-filter-opt{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px;
  border-radius:10px; border:0; cursor:pointer; background:transparent; text-align:left; font-size:14px; font-weight:600; color:var(--ff-ink); }
.ff-filter-opt.on{ background:var(--ff-magentaT); color:var(--ff-magenta); font-weight:800; }
.ff-filter-opt svg{ width:16px; height:16px; stroke:var(--ff-magenta); stroke-width:2.6; }
.ff-filter-backdrop{ position:fixed; inset:0; z-index:30; display:none; } .ff-filter-backdrop.open{ display:block; }

/* ── FAB (mobile) ───────────────────────────────────────────────────────── */
.ff-fab{ position:fixed; right:16px; bottom:82px; width:56px; height:56px; border-radius:28px; z-index:120;
  border:0; cursor:pointer; background:var(--ff-warm-grad); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(229,55,122,.42);
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.ff-fab svg{ width:26px; height:26px; stroke:#fff; stroke-width:2.6; }
.ff-fab.hidden{ transform:translateY(88px) scale(.85); opacity:0; pointer-events:none; }
@media (min-width:1024px){ .ff-fab{ display:none; } }

/* ── empty feed ─────────────────────────────────────────────────────────── */
.ff-empty{ padding:40px 28px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.ff-empty-ico{ width:84px; height:84px; border-radius:24px; background:var(--ff-warm-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 14px 32px rgba(229,55,122,.3); }
.ff-empty-ico svg{ width:40px; height:40px; stroke:#fff; stroke-width:2; }
.ff-empty h2{ margin:0; font-size:24px; font-weight:800; letter-spacing:-.02em; }
.ff-empty p{ margin:8px 0 22px; font-size:14.5px; color:var(--ff-ink2); max-width:320px; line-height:1.5; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.ff-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; height:44px; padding:0 20px;
  border-radius:22px; font-size:14px; font-weight:700; letter-spacing:-.01em; cursor:pointer; border:0; }
.ff-btn svg{ width:18px; height:18px; stroke:currentColor; stroke-width:2; }
.ff-btn.primary{ background:var(--ff-warm-grad); color:#fff; box-shadow:0 4px 12px rgba(229,55,122,.28); }
.ff-btn.outline{ background:#fff; color:var(--ff-ink); border:1px solid var(--ff-line); }
.ff-btn.pink{ background:var(--ff-magentaT); color:var(--ff-magenta); }
.ff-btn.lg{ height:52px; padding:0 26px; border-radius:26px; font-size:15px; }
.ff-btn.sm{ height:34px; padding:0 14px; border-radius:17px; font-size:13px; }
.ff-btn.block{ width:100%; }
.ff-btn[disabled], .ff-btn.disabled{ opacity:.45; pointer-events:none; }

/* ── toast ──────────────────────────────────────────────────────────────── */
.ff-toast{ position:fixed; left:50%; bottom:88px; transform:translateX(-50%); background:var(--ff-navy800); color:#fff;
  padding:11px 18px; border-radius:24px; font-size:13.5px; font-weight:700; white-space:nowrap;
  box-shadow:0 12px 30px rgba(15,15,30,.3); z-index:300; display:flex; align-items:center; gap:8px; animation:sparkRise .2s ease-out; }
.ff-toast svg{ width:16px; height:16px; stroke:var(--ff-mint); stroke-width:2.6; }

/* ── composer (modal / sheet) ───────────────────────────────────────────── */
.ff-overlay{ position:fixed; inset:0; z-index:200; display:none; }
.ff-overlay.open{ display:block; }
.ff-overlay .scrim{ position:absolute; inset:0; background:rgba(15,15,30,.5); backdrop-filter:blur(3px); animation:sparkFade .18s ease-out; }
.ff-composer{ position:absolute; background:#fff; display:flex; flex-direction:column; overflow:hidden; }
/* mobile = full screen sheet */
.ff-composer{ inset:0; border-radius:0; animation:sparkSheet .24s ease-out; }
@media (min-width:1024px){
  .ff-overlay .ff-composer{ position:relative; }
  .ff-overlay.is-modal{ display:none; }
  .ff-overlay.is-modal.open{ display:flex; align-items:center; justify-content:center; }
  .ff-composer{ inset:auto; width:560px; max-width:94vw; max-height:88vh; border-radius:20px; box-shadow:var(--ff-shadow-lg); animation:sparkPop .16s ease-out; }
}
.ff-composer-head{ display:flex; align-items:center; justify-content:space-between; padding:52px 16px 12px; border-bottom:1px solid var(--ff-line2); }
@media (min-width:1024px){ .ff-composer-head{ padding:16px 18px; } }
.ff-composer-head h2{ margin:0; font-size:16px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; }
@media (min-width:1024px){ .ff-composer-head h2{ font-size:18px; } }
.ff-icon-btn{ background:var(--ff-bg); border:0; width:34px; height:34px; border-radius:17px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ff-ink); }
.ff-icon-btn svg{ width:17px; height:17px; stroke:currentColor; stroke-width:2.2; }
.ff-composer-body{ padding:14px 16px; overflow-y:auto; flex:1; }
@media (min-width:1024px){ .ff-composer-body{ padding:18px 20px; } }
.ff-composer-author{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.ff-neutral-av{ width:46px; height:46px; border-radius:50%; background:var(--ff-bg); border:1px solid var(--ff-line2);
  display:flex; align-items:center; justify-content:center; color:var(--ff-mute); flex-shrink:0; }
.ff-neutral-av svg{ width:23px; height:23px; stroke:var(--ff-mute); stroke-width:2; }
.ff-audience{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:8px;
  background:var(--ff-bg); border:1px solid var(--ff-line2); font-size:12.5px; font-weight:700; color:var(--ff-ink); }
.ff-audience svg{ width:14px; height:14px; stroke:var(--ff-ink2); stroke-width:2; }
.ff-composer-ta{ width:100%; min-height:130px; border:0; outline:0; resize:none; font-family:inherit; font-size:18px;
  line-height:1.45; color:var(--ff-ink); font-weight:500; background:transparent; }
@media (min-width:1024px){ .ff-composer-ta{ font-size:19px; } }
.ff-composer-mid{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.ff-mediatray{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--ff-line); display:none; }
.ff-mediatray.open{ display:block; }
.ff-mediatray .clear{ position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:15px; border:0;
  background:rgba(15,15,30,.6); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.ff-mediatray .clear svg{ width:15px; height:15px; stroke:#fff; stroke-width:2.4; }
.ff-addto{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--ff-line); border-radius:12px; padding:8px 8px 8px 14px; }
.ff-addto span{ font-size:13px; font-weight:700; color:var(--ff-ink2); }
.ff-addto .opts{ display:flex; gap:2px; }
.ff-addto button{ width:38px; height:38px; border-radius:10px; border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ff-addto button:hover{ background:var(--ff-bg); }
.ff-addto button svg{ width:21px; height:21px; stroke-width:2; }
.ff-addto .photo svg{ stroke:var(--ff-mint); } .ff-addto .video svg{ stroke:var(--ff-magenta); }
.ff-postas-label{ font-size:11px; font-weight:800; color:var(--ff-mute); letter-spacing:.06em; margin-bottom:8px; }
.ff-composer-foot{ padding:12px 16px; border-top:1px solid var(--ff-line2); }

/* "Posting as" compact trigger */
.ff-postas-trigger{ display:inline-flex; align-items:center; gap:8px; padding:4px 10px 4px 5px; border-radius:22px;
  background:var(--ff-bg); border:1px solid var(--ff-line2); cursor:pointer; max-width:100%; }
.ff-postas-trigger .ff-av{ width:30px; height:30px; font-size:11px; }
.ff-postas-trigger .lab{ min-width:0; line-height:1.1; text-align:left; }
.ff-postas-trigger .l1{ display:block; font-size:9px; font-weight:800; color:var(--ff-mute); letter-spacing:.06em; }
.ff-postas-trigger .l2{ display:flex; align-items:center; gap:4px; }
.ff-postas-trigger .l2 b{ font-size:13px; font-weight:800; color:var(--ff-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.ff-postas-trigger .l2 svg{ width:13px; height:13px; stroke:var(--ff-ink2); stroke-width:2.4; }
@media (min-width:1024px){ .ff-postas-trigger .l2 b{ max-width:220px; } }

/* "Post as" full-screen drawer (mobile) / centered modal (desktop) */
.ff-postas-overlay{ position:fixed; inset:0; z-index:260; display:none; }
.ff-postas-overlay.open{ display:block; }
.ff-postas-overlay .scrim{ position:absolute; inset:0; background:rgba(15,15,30,.5); backdrop-filter:blur(3px); animation:sparkFade .18s ease-out; }
.ff-postas-panel{ position:absolute; inset:0; background:#fff; display:flex; flex-direction:column; animation:sparkSheet .24s ease-out; }
.ff-postas-panel .hd{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:52px 16px 12px; border-bottom:1px solid var(--ff-line2); }
.ff-postas-panel .hd h2{ margin:0; font-size:17px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; }
.ff-postas-panel .bd{ flex:1; overflow-y:auto; padding:10px 10px 28px; }
@media (min-width:1024px){
  .ff-postas-overlay.open{ display:flex; align-items:center; justify-content:center; }
  .ff-postas-panel{ position:relative; inset:auto; width:440px; max-width:92%; max-height:82%; border-radius:20px;
    box-shadow:var(--ff-shadow-lg); overflow:hidden; animation:sparkPop .16s ease-out; }
  .ff-postas-panel .hd{ padding:16px 18px; justify-content:space-between; }
  .ff-postas-panel .bd{ padding:10px; }
}
.ff-postas-row{ width:100%; display:flex; align-items:center; gap:13px; padding:13px 14px; border-radius:14px; border:0; cursor:pointer; background:transparent; text-align:left; }
.ff-postas-row:hover{ background:var(--ff-surface2); }
.ff-postas-row.sel{ background:var(--ff-magentaT); }
.ff-postas-row .ff-av{ width:46px; height:46px; font-size:17px; }
.ff-postas-row .who{ flex:1; min-width:0; }
.ff-postas-row .nm{ display:flex; align-items:center; gap:5px; }
.ff-postas-row .nm b{ font-size:15.5px; font-weight:800; color:var(--ff-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ff-postas-row .hd2{ display:block; font-size:13px; color:var(--ff-mute); font-weight:600; margin-top:1px; }
.ff-postas-row .chk{ color:var(--ff-magenta); } .ff-postas-row .chk svg{ width:20px; height:20px; stroke-width:2.6; }

/* char ring (focused composer — optional) */
.ff-charring{ position:relative; width:26px; height:26px; }

/* ── post detail ────────────────────────────────────────────────────────── */
.ff-detail{ display:flex; flex-direction:column; height:100%; background:#fff; }
.ff-detail-head{ display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:1px solid var(--ff-line2); flex-shrink:0; }
@media (min-width:1024px){ .ff-detail-head{ padding:14px 18px; } }
.ff-detail-head .t1{ font-size:16px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; }
.ff-detail-head .t2{ font-size:12px; color:var(--ff-mute); margin-top:1px; }
.ff-detail-body{ flex:1; overflow-y:auto; padding:14px 16px 16px; }
@media (min-width:1024px){ .ff-detail-body{ padding:18px 18px 16px; } }
.ff-comments-label{ display:flex; align-items:center; gap:8px; margin:18px 2px 0; }
.ff-comments-label .a{ font-size:13px; font-weight:800; color:var(--ff-ink); }
.ff-comments-label .b{ font-size:12px; color:var(--ff-mute); font-weight:600; }
.ff-comments-label svg{ width:14px; height:14px; stroke:var(--ff-mute); stroke-width:2.4; }

.ff-comment{ display:flex; gap:10px; margin-top:16px; }
.ff-comment.reply{ margin-top:12px; }
.ff-comment .ff-av{ width:36px; height:36px; font-size:13.7px; }
.ff-comment.reply .ff-av{ width:30px; height:30px; font-size:11.4px; }
.ff-comment-main{ flex:1; min-width:0; }
.ff-comment-bub{ background:var(--ff-bg); border-radius:14px; padding:9px 13px; }
.ff-comment-bub .nm{ display:flex; align-items:center; gap:5px; }
.ff-comment-bub .nm b{ font-size:13px; font-weight:800; color:var(--ff-ink); }
.ff-comment-bub p{ margin:3px 0 0; font-size:13.5px; line-height:1.4; color:var(--ff-ink); font-weight:500; }
.ff-comment-bub .mention{ color:var(--ff-magenta); font-weight:700; }
.ff-comment-tools{ display:flex; align-items:center; gap:16px; padding:6px 13px 0; font-size:12px; font-weight:700; color:var(--ff-mute); }
.ff-comment-tools button{ background:none; border:0; cursor:pointer; font-weight:800; color:var(--ff-mute); font-family:inherit; font-size:12px; padding:0; }
.ff-comment-tools button.liked{ color:var(--ff-magenta); }
.ff-comment-replies{ margin-top:2px; padding-left:14px; border-left:2px solid var(--ff-line2); }

.ff-reply-bar{ flex-shrink:0; border-top:1px solid var(--ff-line2); padding:10px 14px 16px; background:#fff; }
@media (min-width:1024px){ .ff-reply-bar{ padding:12px 18px; } }
.ff-replying{ display:flex; align-items:center; justify-content:space-between; padding:4px 6px 8px; }
.ff-replying span{ font-size:12.5px; font-weight:700; color:var(--ff-ink2); }
.ff-replying b{ color:var(--ff-magenta); font-weight:800; }
.ff-replying button{ display:inline-flex; align-items:center; gap:4px; background:none; border:0; cursor:pointer; color:var(--ff-mute); font-size:12px; font-weight:700; }
.ff-reply-input{ display:flex; align-items:center; gap:10px; }
.ff-reply-input .ff-av{ width:36px; height:36px; font-size:13.7px; }
.ff-reply-field{ flex:1; display:flex; align-items:center; gap:8px; background:var(--ff-bg); border-radius:22px; padding:4px 6px 4px 16px; }
.ff-reply-field input{ flex:1; border:0; outline:0; background:transparent; font-family:inherit; font-size:14px; color:var(--ff-ink); font-weight:500; }
.ff-reply-field .att{ background:none; border:0; cursor:pointer; color:var(--ff-mute); padding:4px; display:flex; }
.ff-reply-field .att svg{ width:20px; height:20px; stroke-width:2; }
.ff-reply-field .send{ width:34px; height:34px; border-radius:17px; border:0; cursor:pointer; background:var(--ff-warm-grad); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ff-reply-field .send svg{ width:16px; height:16px; stroke:#fff; stroke-width:2.2; }

/* detail wrapper on desktop = card; on mobile full bleed */
.ff-detail-card{ background:#fff; }
@media (min-width:1024px){ .ff-detail-card{ max-width:600px; margin:0 auto; border:1px solid var(--ff-line2);
  border-radius:18px; box-shadow:var(--ff-card-shadow); overflow:hidden; height:calc(100vh - 140px); } }

/* slim "My posts" header */
.ff-slim-head{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
.ff-slim-head .t{ font-size:17px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; }

/* ── desktop rails ──────────────────────────────────────────────────────── */
.ff-rail-card{ background:#fff; border:1px solid rgba(21,35,76,.06); border-radius:18px; box-shadow:var(--ff-card-shadow); margin-bottom:16px; overflow:hidden; }
.ff-create-cta{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:14px; border:0; cursor:pointer;
  background:var(--ff-warm-grad); color:#fff; font-size:15px; font-weight:800; line-height:1; letter-spacing:normal; box-shadow:0 6px 18px rgba(229,55,122,.34); margin:0 0 16px; }
.ff-create-cta svg{ width:20px; height:20px; stroke:#fff; stroke-width:2.6; }
/* Hidden for all users (guest + logged-in) on every feed page. display:none takes
   it out of layout (no empty space); it stays in the DOM as the page <h1>. */
.ff-create-cta{ display:none !important; }
.ff-mini-cover{ height:56px; background:var(--ff-warm-grad); }
.ff-mini-body{ padding:0 16px 16px; margin-top:-26px; }
.ff-mini-body .ff-av{ width:56px; height:56px; font-size:21px; box-shadow:0 0 0 3px #fff; }
.ff-mini-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 3px #fff; background:var(--ff-bg); }
/* guest join card */
.ff-join{ padding:20px 18px; text-align:center; }
.ff-join-ico{ width:56px; height:56px; border-radius:16px; background:var(--ff-warm-grad); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; box-shadow:0 8px 20px rgba(229,55,122,.3); }
.ff-join-ico svg{ width:28px; height:28px; stroke:#fff; stroke-width:2; }
.ff-join-title{ font-size:17px; font-weight:800; color:var(--ff-ink); }
.ff-join-sub{ font-size:12.5px; color:var(--ff-ink2); margin:6px 0 14px; line-height:1.45; }
.ff-mini-name{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.ff-mini-name b{ font-size:16px; font-weight:800; color:var(--ff-ink); }
.ff-mini-handle{ font-size:12px; color:var(--ff-mute); margin-top:2px; }
.ff-mini-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px; }
.ff-mini-stats .v{ font-size:16px; font-weight:700; text-align:center; }
.ff-mini-stats .l{ font-size:10.5px; font-weight:700; color:var(--ff-mute); text-align:center; margin-top:1px; }
.ff-navlist{ padding:8px; }
.ff-navlist a{ width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; text-decoration:none; }
.ff-navlist a svg{ width:20px; height:20px; stroke:var(--ff-ink2); stroke-width:2; }
.ff-navlist a span{ font-size:14px; font-weight:600; color:var(--ff-ink); }
.ff-navlist a.on{ background:var(--ff-magentaT); } .ff-navlist a.on svg{ stroke:var(--ff-magenta); } .ff-navlist a.on span{ color:var(--ff-magenta); font-weight:800; }
.ff-rail-card .pad{ padding:18px; }
.ff-rail-title{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:15px; font-weight:800; color:var(--ff-ink); }
.ff-rail-title svg{ width:18px; height:18px; stroke:var(--ff-magenta); stroke-width:2.2; }
.ff-trend{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:9px 0; background:none; border:0; border-bottom:1px solid var(--ff-line2); cursor:pointer; }
.ff-trend .tag{ font-size:13.5px; font-weight:700; color:var(--ff-magenta); } .ff-trend .n{ font-size:12px; color:var(--ff-mute); }
.ff-sugg{ display:flex; align-items:center; gap:10px; margin-top:12px; }
.ff-sugg .ff-av{ width:40px; height:40px; font-size:15px; }
.ff-sugg .nm{ flex:1; min-width:0; } .ff-sugg .nm b{ display:block; font-size:13.5px; font-weight:800; color:var(--ff-ink); } .ff-sugg .nm span{ font-size:11.5px; color:var(--ff-mute); }

/* invisible scrollbar helper */
.ff-no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
.ff-no-scrollbar::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ── keyframes (from Post Wall.html) ────────────────────────────────────── */
@keyframes sparkPop{ from{ opacity:0; transform:translateY(6px) scale(.96);} to{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes sparkRise{ from{ opacity:0; transform:translate(-50%,10px);} to{ opacity:1; transform:translate(-50%,0);} }
@keyframes sparkSheet{ from{ transform:translateY(100%);} to{ transform:translateY(0);} }
@keyframes sparkFade{ from{ opacity:0;} to{ opacity:1;} }
@keyframes feedKenBurns{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.12) translate(-2%,-2.5%);} }
@keyframes feedProgress{ 0%{ width:0%;} 100%{ width:100%;} }
@media (prefers-reduced-motion:reduce){ .ff-feed *{ animation:none !important; } }

/* ============================================================================
   Phase 2 additions — inline comments, kebab menu, comment photo, edit box,
   photo lightbox. Additive only; reuses Spark tokens. The lightbox is appended
   to <body> so it is intentionally unscoped.
   ========================================================================== */

/* post kebab menu */
.ff-postmenu{ position:relative; margin-left:auto; }
.ff-postmenu-btn{ width:32px; height:32px; border:0; background:transparent; border-radius:50%; color:var(--ff-mute); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ff-postmenu-btn:hover{ background:var(--ff-bg); color:var(--ff-ink); }
.ff-postmenu-pop{ position:fixed; background:#fff; border:1px solid var(--ff-line,#eee); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:6px; z-index:1000; min-width:140px; }
.ff-postmenu-pop button{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:0; background:transparent; padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ff-ink); cursor:pointer; }
.ff-postmenu-pop button svg{ flex-shrink:0; }
.ff-postmenu-pop button:hover{ background:var(--ff-bg); }
.ff-postmenu-pop [data-ff-post-delete]{ color:#e5377a; }

/* inline edit box (post + comment) */
.ff-edit{ margin:8px 0 10px; }
.ff-edit-ta{ width:100%; min-height:64px; border:1px solid var(--ff-line,#e6e6e6); border-radius:12px; padding:10px 12px; font-family:inherit; font-size:15px; line-height:1.45; color:var(--ff-ink); resize:vertical; outline:none; background:#fff; }
.ff-edit-save,.ff-edit-cancel{ margin-top:8px; margin-right:8px; border:0; border-radius:10px; padding:7px 16px; font-size:13px; font-weight:700; cursor:pointer; }
.ff-edit-save{ background:var(--ff-warm-grad,#e5377a); color:#fff; }
.ff-edit-cancel{ background:var(--ff-bg,#f2f2f5); color:var(--ff-mute); }
.ff-edit-save.disabled{ opacity:.5; pointer-events:none; }

/* inline comments panel under a feed card */
.ff-comment-panel{ border-top:1px solid var(--ff-line,#f0f0f3); padding:10px 14px 4px; }
.ff-cload{ padding:14px; text-align:center; color:var(--ff-mute); font-size:13px; }
.ff-comments-empty{ padding:10px 2px 14px; color:var(--ff-mute); font-size:13px; }
.ff-cmore{ display:block; margin:4px auto 10px; border:0; background:transparent; color:var(--ff-magenta,#e5377a); font-weight:700; font-size:13px; cursor:pointer; }
.ff-cmore.disabled{ opacity:.5; pointer-events:none; }

/* comment image + composer photo tray */
.ff-comment-photo{ margin:6px 0 2px; }
.ff-comment-photo img{ max-width:220px; max-height:260px; border-radius:12px; cursor:zoom-in; display:block; }
.ff-reply-photo-tray{ display:flex; padding:6px 0; }
.ff-cphoto{ position:relative; display:inline-block; }
.ff-cphoto img{ width:54px; height:54px; object-fit:cover; border-radius:10px; }
.ff-cphoto button{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; border:0; background:#111; color:#fff; font-size:13px; line-height:1; cursor:pointer; }

/* photo theater (appended to body): image left, reactions + comments right (FB-style) */
.ff-lightbox{ position:fixed; inset:0; z-index:99999; background:rgba(8,10,20,.96); display:flex; align-items:stretch; }
.ff-lightbox[hidden]{ display:none; }
.ff-lightbox .ffl-close{ position:absolute; top:14px; right:16px; z-index:5; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:1; cursor:pointer; }
.ff-lightbox .ffl-close:hover{ background:rgba(255,255,255,.26); }

/* left image pane */
.ff-lightbox .ffl-left{ position:relative; flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; }
.ff-lightbox .ffl-stage{ max-width:96%; max-height:94vh; display:flex; align-items:center; justify-content:center; }
.ff-lightbox .ffl-img{ max-width:100%; max-height:94vh; object-fit:contain; border-radius:4px; user-select:none; }
.ff-lightbox .ffl-nav{ position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer; z-index:4; }
.ff-lightbox .ffl-nav.prev{ left:16px; } .ff-lightbox .ffl-nav.next{ right:16px; }
.ff-lightbox .ffl-nav:hover{ background:rgba(255,255,255,.28); }
.ff-lightbox .ffl-counter{ position:absolute; top:16px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; font-weight:600; letter-spacing:.3px; background:rgba(0,0,0,.35); padding:3px 10px; border-radius:12px; }

/* right engagement pane */
.ff-lightbox .ffl-right{ flex:0 0 380px; max-width:42vw; background:#fff; display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.ff-lightbox.no-right{ align-items:center; justify-content:center; }
.ff-lightbox.no-right .ffl-right{ display:none; }
.ff-lightbox .ffl-rhead{ padding:14px 16px 6px; flex:0 0 auto; }
.ff-lightbox .ffl-rhead .ff-post-head{ margin:0; }
.ff-lightbox .ffl-pane-wrap{ flex:1 1 auto; overflow-y:auto; }
.ff-lightbox .ffl-bar{ padding:2px 12px; border-bottom:1px solid var(--ff-line,#eef0f3); position:relative; z-index:2; }
.ff-lightbox .ffl-bar.ff-actions{ border-top:0; }
/* picker drops BELOW the bar in the theater (the pane scrolls, so an upward popover would clip) */
.ff-lightbox .ffl-bar .ff-react-picker{ bottom:auto; top:100%; margin-bottom:0; margin-top:8px; }
.ff-lightbox .ffl-pane{ display:flex; flex-direction:column; min-height:100%; }
.ff-lightbox .ffl-pane .ff-thread{ padding:6px 14px 0; flex:1 1 auto; }
.ff-lightbox .ff-reply-bar{ position:sticky; bottom:0; background:#fff; }

/* desktop: the close button must sit over the DARK image area, not the white
   right pane — otherwise the white ✕ is invisible against the white pane.
   Offset it left by the pane width (min(380px,42vw)). Single-image view has no
   pane (.no-right), so it stays at the top-right corner. */
@media (min-width:901px){
  .ff-lightbox:not(.no-right) .ffl-close{ right:calc(min(380px, 42vw) + 12px); }
}

/* mobile: stack image over a shorter comments sheet */
@media (max-width:900px){
  .ff-lightbox{ flex-direction:column; }
  .ff-lightbox .ffl-left{ flex:1 1 auto; min-height:48vh; }
  .ff-lightbox .ffl-right{ flex:0 0 auto; width:100%; max-width:100%; height:auto; max-height:46vh; }
  .ff-lightbox .ffl-nav{ width:40px; height:40px; font-size:24px; }
}

/* ── Phase 3: see-more clamp, inline hashtags, composer autocomplete ── */

/* "See more" line clamp — show 2 lines, then "See more" (post body + comments) */
.ff-clamp{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.ff-clamp.expanded{ -webkit-line-clamp:unset; overflow:visible; }
.ff-seemore{ display:inline-block; margin:2px 0 0; border:0; background:transparent; padding:0; cursor:pointer;
  color:var(--ff-magenta,#e5377a); font-weight:700; font-size:13px; }
.ff-comment-bub .ff-seemore{ padding:0 0 2px; }

/* inline hashtag links inside a post body */
.ff-hashtag{ color:var(--ff-magenta,#e5377a); font-weight:600; text-decoration:none; }
.ff-hashtag:hover{ text-decoration:underline; }

/* composer hashtag autocomplete (fixed-positioned under the textarea) */
.ff-tagac{ position:fixed; z-index:100000; background:#fff; border:1px solid var(--ff-line,#e6e6e6);
  border-radius:12px; box-shadow:0 12px 32px rgba(15,15,30,.18); padding:6px; max-height:260px; overflow-y:auto; }
.ff-tagac[hidden]{ display:none; }
.ff-tagac-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  border:0; background:transparent; cursor:pointer; padding:8px 10px; border-radius:8px; text-align:left; }
.ff-tagac-item:hover,.ff-tagac-item.sel{ background:var(--ff-bg,#f4f4f7); }
.ff-tagac-item .t{ font-weight:700; color:var(--ff-ink,#1a1a2e); font-size:14px; }
.ff-tagac-item .c{ font-size:12px; color:var(--ff-mute,#8a8aa0); font-weight:600; }

/* ── Feed change requirements: share modal, "my posts" separator ── */

/* sparse "My posts" → "explore others" separator */
.ff-feed-sep{ display:flex; align-items:center; gap:10px; margin:14px 2px; padding:11px 14px;
  background:var(--ff-magentaT); border:1px solid var(--ff-line2); border-radius:14px; }
.ff-feed-sep-ico{ flex:0 0 auto; width:28px; height:28px; border-radius:9px; background:var(--ff-warm-grad);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(229,55,122,.28); }
.ff-feed-sep-ico svg{ width:16px; height:16px; stroke:#fff; stroke-width:2; }
.ff-feed-sep-text{ flex:1; min-width:0; font-size:12.5px; font-weight:600; color:var(--ff-ink2); line-height:1.4; }

/* share fallback modal — reuses .ff-overlay/.ff-composer shell */
.ff-share-sheet .ff-share-title{ margin:0; font-size:16px; font-weight:800; color:var(--ff-ink); letter-spacing:-.01em; }
@media (min-width:1024px){ .ff-overlay .ff-share-sheet{ width:400px; max-width:94vw; } }
.ff-share-opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding:16px; }
@media (min-width:1024px){ .ff-share-opts{ padding:18px 20px 22px; } }
.ff-share-opt{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px;
  border:1px solid var(--ff-line2); border-radius:14px; background:#fff; cursor:pointer; text-decoration:none;
  color:var(--ff-ink); font-size:13px; font-weight:700; transition:background .14s, transform .12s; }
.ff-share-opt:hover{ background:var(--ff-bg); transform:translateY(-2px); }
.ff-share-ic{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ff-share-ic svg{ stroke:#fff; }

/* posting loader — spinner replaces the label without resizing the button (no layout shift) */
.ff-btn.is-loading{ position:relative; color:transparent !important; pointer-events:none; }
.ff-btn.is-loading svg{ visibility:hidden; }
.ff-btn.is-loading::after{ content:''; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px;
  border-radius:50%; border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; animation:ffSpin .6s linear infinite; }
@keyframes ffSpin{ to{ transform:rotate(360deg); } }

/* creator Like/Unlike toggle (Suggested creators) */
.ff-creator-like svg{ width:15px; height:15px; }
.ff-btn.liked{ background:var(--ff-magenta); color:#fff; }
.ff-btn.liked svg{ fill:currentColor; stroke:currentColor; }

/* deep-link highlight: briefly flash the pinned post a visitor was sent to */
.ff-pinned-flash{ animation:ffPinnedFlash 2.2s ease-out 1; }
@keyframes ffPinnedFlash{
  0%{ box-shadow:0 0 0 3px rgba(229,55,122,.55); }
  60%{ box-shadow:0 0 0 3px rgba(229,55,122,.30); }
  100%{ box-shadow:0 0 0 0 rgba(229,55,122,0); }
}

/* Facebook-style tight create bar on phones: show the inline composer, but while
   collapsed it's a single row — the divider + photo/video action row appear only
   once expanded. Tablet (≥768px) and desktop keep the full card as-is. */
@media (max-width:767.98px){
  .ff-inline-composer{ display:block !important; padding:10px 12px; }
  .ff-inline-composer:not(.is-expanded) .ff-card-divider{ display:none; }
  .ff-inline-composer:not(.is-expanded) .ff-inline-actions{ display:none !important; }
}