/* ============================================================================
   design-feed.css — FULL-BLEED VIDEO, NO BLACK AT TOP, SHORT BLACK AT BOTTOM
   ============================================================================

   The spec, exactly as given:
     - top: no black at all — the video runs to the very top edge, icons and
       tabs float directly on the picture.
     - bottom: a short black strip, just tall enough to sit behind the nav
       pill and reach up to the scrub bar (the video-progress line) — and no
       further. It does not climb up to the author/caption/sound text; that
       floats on the picture too, same as the top.

   ---------------------------------------------------------------------------
   THE NUMBER BEHIND "reaches to the scrub line"

   .scrub (design-5.css) sits at bottom: 84px with a 22px touch target, so its
   own footprint runs from 84px to ~106px. The nav pill (design.css) is 62px
   tall with 16px of bottom padding, so its top edge is at 78px. A strip
   112px tall covers both with a few px to spare and stops right there —
   nothing above it is black.

   .overlay and .rail are both placed just above that, at bottom: 116px, so
   their content never touches the strip and never sits on the bare picture
   at the same time — it's one or the other, cleanly.

   ---------------------------------------------------------------------------
   CONTENTS
     A. Video — full bleed, cropped to fill
     B. Top — nothing. Icons/tabs float on the picture with shadow only.
     C. Bottom strip — behind nav + scrub bar, nothing more
     D. Caption + rail — float on the picture, above the strip
     E. Ads
   ========================================================================= */


/* ============================================================================
   A. VIDEO
   ========================================================================= */
.slide {
  height: 100%; position: relative; background: #000;
  scroll-snap-align: start; scroll-snap-stop: always;
  contain: layout paint;
}

/* Whole by default, on black. Filling the screen with a landscape clip
   showed a slice of its middle at three times the size and lost everything
   at the sides. Only a tall clip (.cover, set from its own dimensions) fills
   the screen, the small crop at the sides being the price of no bars. */
.slide video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  background: #000;
}
.slide.cover video { object-fit: cover; }


/* ============================================================================
   B. TOP — no black
   ---------------------------------------------------------------------------
   design.css's .chrome-backdrop was a flat black rectangle behind the top
   bar; killed outright rather than left as a gradient. Bell and settings
   moved to the profile page (next to the wallet button) — the top bar now
   holds only the avatar (bigger, a real corner anchor) and search (also
   bigger, floating directly on the picture with no pill behind it — a
   drop-shadow on the icon itself is the only contrast it gets).
   ========================================================================= */
.chrome-backdrop { background: none; }

/* align-items: center is already design.css's default for .topbar, but
   design-2.css later overrode it to flex-start for an older two-row layout
   (avatar+icons on row one, tabs on a separate row below). The tabs moved
   back into this same row below (.topbar .tabs, position:static) without
   ever restoring center — so the ~24px-tall tabs sat flush against the top
   of the row while the 60px avatar/search boxes centered their icon inside
   their own taller box, landing visibly lower. Restated here since it's
   this file's layout that actually needs it. */
.topbar { padding: 12px 16px 0; align-items: center; }

.me-btn { width: 60px; height: 60px; font-size: 22px; }

.search-btn {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: none; border: none; color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)) drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
/* Bigger glyph, same 60px button box — the touch target and the reserved
   width in .topbar don't change, only how much of that box the icon fills. */
.search-btn svg { width: 30px; height: 30px; }

/* Tabs sit inside .topbar's center column now — level with the avatar and
   search icons, not a separate row further down the screen. position:static
   overrides .tabs's standalone-row absolute positioning from design.css;
   flex:1 + justify-content:center gives it the leftover width between the
   two fixed-size icons on either side. */
.topbar .tabs {
  position: static; flex: 1;
  display: flex; justify-content: center; gap: 7px;
}
/* As bold and prominent as the 30px search icon beside them — not a subtle
   label row anymore. */
.tabs button {
  font-size: 17px; padding-bottom: 4px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}


/* ============================================================================
   C. BOTTOM STRIP — nav + scrub bar only
   ---------------------------------------------------------------------------
   Fixed height, not content-sized — it backs two fixed-size things (the nav
   pill, the scrub bar), not the caption, so there's nothing here that can
   grow or shrink and throw the number off. Sits below the caption/rail in
   z-index so it reads as a floor they stand above, not a box around them.
   ========================================================================= */
.slide::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 112px;
  background: #000;
  pointer-events: none; z-index: 2;
}


/* ============================================================================
   D. CAPTION + RAIL — float on the picture, above the strip
   ========================================================================= */
.overlay {
  position: absolute;
  left: 16px; right: 76px;   /* clears the rail */
  bottom: 116px;             /* clears the strip in section C */
  height: auto;              /* exactly as tall as its content, nothing more */
  background: none;          /* on bare picture, not on black — the shadow
                                 below is what keeps it readable */
  z-index: 4;
  text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.6);
}

.author { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; }
.author .aav { width: 44px; height: 44px; font-size: 17px; }

/* .caption and .caption-toggle are flex siblings in .cap-row, not one
   inline run — .caption alone gets clipped+ellipsized by its own
   overflow:hidden, so "more" (flex-shrink:0) can never be the part that
   gets cut off, whatever the caption's actual pixel width turns out to be
   on a given phone. min-width:0 is what lets a flex item actually shrink
   below its content's natural width instead of overflowing the row. */
.cap-row { display: flex; align-items: baseline; gap: 4px; max-width: 100%; }

.caption {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; line-height: 1.35; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.caption.expanded { white-space: normal; overflow: visible; text-overflow: clip; }

.caption-toggle {
  flex-shrink: 0; display: inline; margin: 0; padding: 0;
  background: none; border: none;
  color: rgba(255,255,255,.75); font-size: 13px; font-weight: 600;
}

.sound { margin-top: 4px; }

.rail {
  position: absolute;
  right: 10px;
  bottom: 116px;             /* same clearance as .overlay — level with it */
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* Scaled up rather than given new fixed widths — heart/comment/repost/
   share/gift keep the same relative sizes to each other (heart was always
   the biggest), just all bigger, and the touch target grows with them. */
.rail button svg { filter: drop-shadow(0 1px 6px rgba(0,0,0,.65)); transform: scale(1.3); }
.rail .n { font-size: 13px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }


/* ============================================================================
   E. ADS
   ---------------------------------------------------------------------------
   Same full-bleed treatment. No scrub bar on an ad slide, but the bottom
   strip still gives the nav pill (and the sponsor tag/CTA sitting right
   above it) a clean black floor instead of landing on bare picture.

   MARKUP: add class="ad" to the slide when the feed item has isAd === true.
   ========================================================================= */
.slide.ad ~ .tabs,
.slide.ad .tabs { display: none; }

.slide.ad .rail .cmt,
.slide.ad .rail .rep,
.slide.ad .rail .shr,
.slide.ad .rail .gift,
.slide.ad .rail .more { display: none; }

.slide.ad img, .slide.ad video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  background: #000;
}