/* =========================================================
   V2K Social — Feed (TikTok-Accurate, Locked)
   File: app/static/css/feed.css
   ========================================================= */

/* ---------- Theme Tokens ---------- */
:root{
  --bg:#050b12;
  --panel:#0b1524;
  --teal:#20e0d6;
  --muted:#9fb3c8;
  --line:rgba(255,255,255,.10);

  /* Safe zones */
  --v2k-bottom-ui:96px;
}

/* ---------- Root Layout ---------- */
#feed-root{
  height:100vh;
  background:var(--bg);
  color:#fff;
  overflow:hidden;
}

.feed-scroll{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
}
.feed-scroll::-webkit-scrollbar{display:none;}

.feed-item{
  position:relative;
  height:100vh;
  width:100vw;
  scroll-snap-align:start;
  background:#000;
  overflow:hidden;
}

/* ---------- Media Stage (TikTok Behavior) ---------- */
.media-stage{
  position:absolute;
  inset:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* VIDEO — fill height, soft side crop */
.media-stage video{
  height:100%;
  width:auto;
  max-width:100%;
  max-height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* IMAGE — never over-zoom */
.media-stage img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  background:#000;
}

/* ---------- Overlay Layer ---------- */
.feed-overlay{
  position:absolute;
  inset:0;
  display:flex;
  pointer-events:none;
  z-index:5;
}

/* Bottom-left creator / caption */
.feed-left{
  margin-top:auto;
  padding:16px 14px calc(var(--v2k-bottom-ui) + 8px);
  max-width:min(72vw,520px);
}

.feed-user{
  font-weight:900;
  letter-spacing:.2px;
}

.feed-caption{
  margin-top:6px;
  line-height:1.25;
  color:#e9f1ff;
}

.feed-meta{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

/* ---------- Right Action Rail ---------- */
.feed-actions{
  pointer-events:auto;
  position:absolute;
  right:12px;
  bottom:var(--v2k-bottom-ui);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.v2k-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.35);
  border:1px solid var(--line);
  color:#fff;
}
.v2k-btn:active{transform:scale(.97);}

.v2k-count{
  margin-top:6px;
  font-size:12px;
  text-align:center;
  color:#e9f1ff;
}

/* Avatar */
.rail-avatar{
  width:48px;
  height:48px;
  border-radius:999px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
}
.rail-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ---------- View Count ---------- */
.v2k-view-badge{
  position:absolute;
  left:50%;
  bottom:calc(var(--v2k-bottom-ui) - 18px);
  transform:translateX(-50%);
  z-index:5;
}

/* ---------- Drawer (Comments) ---------- */
.drawer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:72vh;
  background:var(--panel);
  border-top:1px solid var(--line);
  transform:translateY(100%);
  transition:transform .18s ease;
  z-index:200;
  padding-bottom:calc(var(--v2k-bottom-ui) + env(safe-area-inset-bottom));
}
.drawer.active{transform:translateY(0);}

.drawer-head{
  padding:12px;
  border-bottom:1px solid var(--line);
}

.drawer-body{
  height:calc(72vh - 112px);
  overflow:auto;
  padding:10px 12px;
}

.drawer-form{
  position:sticky;
  bottom:env(safe-area-inset-bottom);
  display:flex;
  gap:8px;
  padding:10px 12px;
  background:#000;
  border-top:1px solid var(--line);
}

.drawer-input{
  flex:1;
  border-radius:12px;
  background:#07101c;
  border:1px solid var(--line);
  color:#fff;
  padding:10px 12px;
}

.drawer-send{
  border-radius:12px;
  background:rgba(32,224,214,.12);
  border:1px solid rgba(32,224,214,.35);
  color:#e9f1ff;
  padding:10px 12px;
}

/* ---------- Drawer Interaction Lock ---------- */
#feed-root.drawer-open{
  pointer-events:none;
}
#feed-root.drawer-open .drawer{
  pointer-events:auto;
}

/* ---------- iOS / Mobile Viewport ---------- */
@media (hover:none) and (pointer:coarse){
  #feed-root,
  .feed-item{
    height:calc(var(--vh,1vh) * 100);
    min-height:100svh;
  }
}
/* =========================================================
   V2K_SURGICAL_FIX_VIEWS_MEDIA_GUARD_V1
   - Do NOT move creator block or right rail.
   - Zoom out media slightly (reserve bottom nav/FAB guard).
   - Pull views badge ABOVE bottom nav/FAB.
   ========================================================= */

:root{
  /* Tune only if needed */
  --v2k-nav-guard: 118px; /* space reserved for bottom nav + FAB overlap */
}

/* Zoom out media by shrinking stage height (prevents "over-zoom" feel) */
.media-stage{
  inset: 0 0 var(--v2k-nav-guard) 0 !important;
}

/* Views badge must sit ABOVE nav/FAB */
.v2k-view-badge{
  bottom: calc(var(--v2k-nav-guard) + 14px) !important;
}

/* === V2K_VIEW_BADGE_POSITION_LOCK_V1 (authoritative, last-wins) === */
:root{
  --v2k-nav-guard: 118px;      /* reserve bottom nav + FAB */
  --v2k-views-offset: -20px;    /* tune this up/down */
}
.v2k-view-badge{
  z-index: 120 !important;
  bottom: calc(var(--v2k-nav-guard) + var(--v2k-views-offset)) !important;
}

/* === V2K_MEDIA_FIT_LOCK_V1 (authoritative, last-wins) === */
.media-stage video{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center;
}
.media-stage img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center;
  background:#000;
}

/* === V2K_AUTHORITATIVE_VIEWS_MEDIAFIX_V1 (last-wins, high-specificity) === */
:root{
  --v2k-nav-guard: 118px;     /* bottom bar + FAB guard */
  --v2k-views-offset: -80px;   /* increase to move views UP */
  --v2k-video-fit: contain;   /* contain = less zoom, cover = fill/crop */
}

/* Media should fill stage (TikTok overlay style); do NOT shrink stage */
#feed-root .media-stage{ inset:0 !important; }

/* VIDEO: reduce “over-zoom” (switch to cover later if you want more crop) */
#feed-root .media-stage video{ object-fit: var(--v2k-video-fit) !important; }

/* Views badge: override the more-specific selectors from views_badge.css */
#feed-root [data-post-id] > .v2k-view-badge,
.feed-item > .v2k-view-badge{
  z-index: 999 !important;
  bottom: calc(var(--v2k-nav-guard) + var(--v2k-views-offset) + env(safe-area-inset-bottom)) !important;
}

/* === V2K_SNAP_HARD_LOCK_V1 (TikTok-tight snap, last-wins) === */
html,body{ height:100%; overflow:hidden; overscroll-behavior-y:none; }

#feed-root .feed-scroll{
  scroll-snap-type: y mandatory;
  scroll-snap-stop: always;
  scroll-behavior: auto;
  overscroll-behavior-y: contain;
  scroll-padding-top: 0;
  scroll-padding-bottom: 0;
  -webkit-overflow-scrolling: auto; /* disables iOS momentum (reduces "soft" snap) */
  touch-action: pan-y;
}

#feed-root .feed-item{
  scroll-snap-align: start;
  scroll-snap-stop: always;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;
}

/* === V2K_SNAP_PARKING_TIGHT_V1 (fix peek + raise video) === */
:root{
  --v2k-feed-h: calc(var(--vh, 1vh) * 100);
  --v2k-video-y: 42%; /* smaller = move video UP (TikTok-ish: 38–45%) */
}
#feed-root, .feed-root, #feed-root .feed-scroll, .feed-scroll{
  height: var(--v2k-feed-h) !important;
  min-height: 100svh !important;
  padding: 0 !important;
  margin: 0 !important;
}
#feed-root .feed-item, .feed-item{
  height: var(--v2k-feed-h) !important;
  min-height: 100svh !important;
}
#feed-root .media-stage{ inset:0 !important; }
#feed-root .media-stage video{ object-position: 50% var(--v2k-video-y) !important; }

/* === V2K_DRAWER_TOP_LAYER_LOCK_V1 (authoritative, last-wins) === */
#comment-drawer.drawer,
.drawer{
  position: fixed !important;
  z-index: 20000 !important; /* must beat bottom bar/FAB + any overlays */
}

/* When drawer is open, do NOT let overlays sit above it */
#feed-root.drawer-open .v2k-view-badge{ display:none !important; }
#feed-root.drawer-open .feed-actions{ z-index: 1 !important; pointer-events:none !important; }
#feed-root.drawer-open .feed-left{ z-index: 1 !important; pointer-events:none !important; }

/* === V2K_DRAWER_FULLSCREEN_NOZOOM_V1 (authoritative, last-wins) === */
#comment-drawer.drawer,
.drawer{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:0 !important;
  height:auto !important;       /* full screen */
  max-height:none !important;
  border-radius:0 !important;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  display:flex !important;
  flex-direction:column !important;
}

/* Let body take remaining space */
#comment-drawer .drawer-body,
.drawer .drawer-body{
  height:auto !important;
  flex:1 1 auto !important;
  overflow:auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Keep input bar pinned and visible */
#comment-drawer .drawer-form,
.drawer .drawer-form{
  flex:0 0 auto !important;
  position:sticky !important;
  bottom:0 !important;
  background:#000 !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}

/* iOS Safari focus-zoom fix: inputs must be >=16px */
#comment-drawer .drawer-input,
.drawer .drawer-input{
  font-size:16px !important;
  line-height:1.25 !important;
}

/* === V2K_DRAWER_3Q_STICKY_HEADER_FOOTER_V1 (last-wins) === */
#comment-drawer.drawer,.drawer{height:75vh!important;top:auto!important;bottom:0!important;border-radius:16px 16px 0 0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;z-index:9999!important}
.drawer-head{flex:0 0 auto!important;position:sticky!important;top:0!important;z-index:2!important;background:var(--panel)!important}
.drawer-body{flex:1 1 auto!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
.drawer-form{flex:0 0 auto!important;position:sticky!important;bottom:0!important;z-index:2!important;background:#000!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
.drawer-input{font-size:16px!important;line-height:1.25!important}

/* === V2K_DRAWER_INPUT_CLEAR_BOTTOMBAR_V1 (last-wins) === */
:root{ --v2k-bottombar-guard:118px; }  /* raise if your bottom bar+FAB is taller */
#comment-drawer.drawer,.drawer{ padding-bottom:0!important; }
.drawer-form{
  margin-bottom: var(--v2k-bottombar-guard) !important;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
}
.drawer-body{
  padding-bottom: calc(var(--v2k-bottombar-guard) + 12px) !important;
}

/* === V2K_UI_LIFT_FEED_V1 (rail + caption + views) === */
:root{ --v2k-nav-guard:140px; --v2k-ui-lift:22px; } /* increase lift to raise more */
#feed-root .feed-actions{ bottom: calc(var(--v2k-nav-guard) + var(--v2k-ui-lift) + env(safe-area-inset-bottom)) !important; }
#feed-root .feed-left{ padding-bottom: calc(92px + var(--v2k-ui-lift)) !important; }
#feed-root [data-post-id] > .v2k-view-badge,
#feed-root .feed-item > .v2k-view-badge{ bottom: calc(var(--v2k-nav-guard) + 8px + env(safe-area-inset-bottom)) !important; z-index: 9999 !important; }

/* === V2K_FEED_VIEWS_TUNE_V1 (authoritative, last-wins) ===
   Adjust only --v2k-feed-views-pad to move views up/down.
   More NEGATIVE = LOWER (closer to bottom bar). More POSITIVE = HIGHER.
*/
:root{ --v2k-feed-views-pad: -12px; } /* was +8px before; -12px ~= 20px lower */

#feed-root [data-post-id] > .v2k-view-badge,
#feed-root .feed-item > .v2k-view-badge{
  bottom: calc(var(--v2k-nav-guard) + var(--v2k-feed-views-pad) + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

/* === V2K_FEED_VIEWS_TUNE_V2 (wins even if badge is nested) ===
   Tune ONLY --v2k-feed-views-pad:
   more NEGATIVE = LOWER, more POSITIVE = HIGHER
*/
#feed-root{ --v2k-feed-views-base:118px; --v2k-feed-views-pad:-80px; } /* ~20px lower than +8px */
#feed-root .v2k-view-badge{
  bottom: calc(var(--v2k-feed-views-base) + var(--v2k-feed-views-pad) + env(safe-area-inset-bottom)) !important;
  z-index: 9999 !important;
}

/* === V2K_COUNT_VISIBILITY_HOTFIX (feed totals) === */
/* Ensure totals are visible on initial render (not gated by :hover or .on state) */
.feed-actions .v2k-btn .v2k-count,
.feed-actions .v2k-count {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* If any rule is collapsing the count height, force a minimum */
.feed-actions .v2k-btn .v2k-count {
  min-height: 14px !important;
  line-height: 14px !important;
}

/* In case the count is inheriting transparent color */
.feed-actions .v2k-btn .v2k-count {
  color: rgba(233,241,255,0.92) !important;
}

/* V2K_AUDIO_BAR_STYLE_V1 */
#feed-root .v2k-audio-bar{
  position:absolute;
  left:14px;
  right:86px;
  bottom:calc(var(--v2k-nav-guard,118px) + 64px + env(safe-area-inset-bottom));
  z-index:10050;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
}
#feed-root .v2k-audio-bar button{
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#fff;
  font-weight:900;
  padding:5px 8px;
}
#feed-root .v2k-audio-range{
  flex:1;
  min-width:70px;
}

/* V2K_AUDIO_BAR_LAYER_FIX_V2 */
#feed-root .feed-item .v2k-audio-bar{
  position:fixed !important;
  left:12px !important;
  right:82px !important;
  bottom:calc(118px + env(safe-area-inset-bottom)) !important;
  z-index:2147483000 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* V2K_ACTIVE_AUDIO_BAR_ONLY_V1 */
#feed-root .feed-item .v2k-audio-bar{
  display:none !important;
}
#feed-root .feed-item.v2k-active-sound .v2k-audio-bar{
  display:flex !important;
}

/* V2K_AUDIO_BAR_COMPACT_AUTOHIDE_V1 */
#feed-root .feed-item .v2k-audio-bar{
  width:42% !important;
  right:auto !important;
  left:14px !important;
  min-height:34px !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;
}

#feed-root .feed-item.v2k-audio-controls-visible .v2k-audio-bar{
  opacity:1 !important;
}

#feed-root .v2k-audio-bar button{
  padding:3px 6px !important;
  font-size:11px !important;
}

#feed-root .v2k-audio-range{
  min-width:40px !important;
}

/* V2K_AUDIO_BAR_CENTER_V1 */
.feed-item .v2k-audio-bar{
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(440px,82vw) !important;
  max-width:440px !important;
}

/* V2K_AUDIO_BAR_VIEWPORT_CENTER_V2 */
#feed-root .feed-item .v2k-audio-bar{
  position:fixed !important;
  left:50vw !important;
  right:auto !important;
  bottom:calc(82px + env(safe-area-inset-bottom)) !important;
  transform:translateX(-50%) !important;
  width:min(440px,82vw) !important;
  max-width:440px !important;
  z-index:80 !important;
}

/* V2K_COMMENT_THREAD_LINES_V2 */
.drawer-comment{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-reply{position:relative;margin-left:22px;padding:10px 0 8px 14px}
.drawer-reply:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(120,180,255,.35);border-radius:99px}
.drawer-reply .reply-line{position:relative;padding-left:10px}
.drawer-reply .reply-line:before{content:"";position:absolute;left:-14px;top:12px;width:14px;height:2px;background:rgba(120,180,255,.35)}

/* V2K_COMMENT_MENTIONS_V1 */
.comment-mention{color:#7fd7ff;font-weight:900;text-decoration:none}
.comment-mention:hover{text-decoration:underline}

/* V2K_FEED_VIDEO_FRAME_FIX_5 */
@media(max-width:700px){
  #feed-root .media-stage{
    inset:0!important;
    width:100vw!important;
  }

  #feed-root .media-stage video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  #feed-root .feed-item > .v2k-view-badge{
    bottom:120px!important;
    z-index:10050!important;
  }
}

/* V2K_FEED_BADGE_CAPTION_FIX_6 */
@media(max-width:700px){
  #feed-root .feed-item > .v2k-view-badge{
    bottom:80px!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:10050!important;
  }

  #feed-root .feed-left{
    padding-left:10px!important;
    padding-right:90px!important;
    padding-bottom:72px!important;
    max-width:calc(100vw - 118px)!important;
  }
}


/* V2K_BIGGER_RED_LIKED_HEART_V1 */
.media-action-like .media-icon-heart,
.feed-actions [data-action="like"],
.feed-actions .like-btn,
.feed-actions .action-like,
.feed-actions .v2k-like,
.feed-actions .feed-like,
.like-btn,
.action-like,
.v2k-like,
.feed-like{
  font-size:26px!important;
  transition:transform .16s ease,color .16s ease,text-shadow .16s ease!important;
}

.media-action-like.is-liked .media-icon-heart,
.media-action-like.on .media-icon-heart,
.feed-actions [data-action="like"].is-liked,
.feed-actions [data-action="like"].on,
.feed-actions .like-btn.is-liked,
.feed-actions .like-btn.on,
.feed-actions .action-like.is-liked,
.feed-actions .action-like.on,
.feed-actions .v2k-like.is-liked,
.feed-actions .v2k-like.on,
.feed-actions .feed-like.is-liked,
.feed-actions .feed-like.on,
.like-btn.is-liked,
.like-btn.on,
.action-like.is-liked,
.action-like.on,
.v2k-like.is-liked,
.v2k-like.on,
.feed-like.is-liked,
.feed-like.on{
  color:#ff1744!important;
  text-shadow:0 0 14px rgba(255,23,68,.58)!important;
  transform:scale(1.14)!important;
}

.media-action-like.is-liked,
.media-action-like.on{
  color:#ff1744!important;
}

.media-action-like:active .media-icon-heart,
.feed-actions [data-action="like"]:active,
.feed-actions .like-btn:active,
.feed-actions .action-like:active,
.feed-actions .v2k-like:active,
.feed-actions .feed-like:active{
  transform:scale(1.22)!important;
}


/* V2K_RAISE_LIKE_COUNT_CLOSER_V1 */
.v2k-like-count,
.like-count,
.media-count,
.media-action-like .media-count,
.feed-actions [data-action="like"] .count,
.feed-actions .like-btn .count,
.feed-actions .action-like .count,
.feed-actions .v2k-like .count,
.feed-actions .feed-like .count{
  position:relative!important;
  top:-5px!important;
  margin-top:-5px!important;
  line-height:1!important;
}


/* V2K_MATCH_COMMENT_ICON_TO_HEART_V1 */
.media-action-comment .media-icon,
.media-icon-comment,
.feed-actions [data-action="comment"] .media-icon,
.feed-actions .comment-btn .media-icon,
.feed-actions .action-comment .media-icon{
  font-size:32px !important;
  line-height:1 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

@media(max-width:700px){
  .media-action-comment .media-icon,
  .media-icon-comment,
  .feed-actions [data-action="comment"] .media-icon,
  .feed-actions .comment-btn .media-icon,
  .feed-actions .action-comment .media-icon{
    font-size:30px !important;
  }
}


/* V2K_HARDEN_RED_LIKED_HEART_V1 */
.media-action-like.is-liked,
.media-action-like.on,
.media-action-like.is-liked *,
.media-action-like.on *,
button.is-liked[data-action="like"],
button.on[data-action="like"],
button.is-liked[data-action="like"] *,
button.on[data-action="like"] *,
.like-btn.is-liked,
.like-btn.on,
.like-btn.is-liked *,
.like-btn.on *,
.action-like.is-liked,
.action-like.on,
.action-like.is-liked *,
.action-like.on *,
.v2k-like.is-liked,
.v2k-like.on,
.v2k-like.is-liked *,
.v2k-like.on *,
.feed-like.is-liked,
.feed-like.on,
.feed-like.is-liked *,
.feed-like.on *{
  color:#ff1744!important;
  fill:#ff1744!important;
  stroke:#ff1744!important;
  text-shadow:0 0 14px rgba(255,23,68,.58)!important;
}


/* V2K_ALWAYS_RED_HEART_CSS_ONLY_START */
/* CSS only. No JS. Heart is always red; like count sits slightly lower. */

.media-action-like,
.media-action-like *,
.feed-actions [data-action="like"],
.feed-actions [data-action="like"] *,
.feed-actions .like-btn,
.feed-actions .like-btn *,
.feed-actions .action-like,
.feed-actions .action-like *,
.feed-actions .v2k-like,
.feed-actions .v2k-like *,
.feed-actions .feed-like,
.feed-actions .feed-like *,
.like-btn,
.like-btn *,
.action-like,
.action-like *,
.v2k-like,
.v2k-like *,
.feed-like,
.feed-like *{
  color:#ff1744!important;
  fill:#ff1744!important;
  stroke:#ff1744!important;
}

.media-action-like .media-icon-heart,
.feed-actions [data-action="like"],
.feed-actions .like-btn,
.feed-actions .action-like,
.feed-actions .v2k-like,
.feed-actions .feed-like,
.like-btn,
.action-like,
.v2k-like,
.feed-like{
  text-shadow:0 0 14px rgba(255,23,68,.58)!important;
}

.media-action-like .media-count,
.media-action-like .like-count,
.media-action-like [data-like-count],
.feed-actions [data-action="like"] .count,
.feed-actions [data-action="like"] .like-count,
.feed-actions .like-btn .count,
.feed-actions .like-btn .like-count,
.feed-actions .action-like .count,
.feed-actions .v2k-like .count,
.feed-actions .feed-like .count{
  position:relative!important;
  top:-2px!important;
  margin-top:-2px!important;
  line-height:1!important;
}
/* V2K_ALWAYS_RED_HEART_CSS_ONLY_END */


/* V2K_CHAT_BUBBLE_BIGGER_COUNT_ALIGN_START */
/* CSS only. Make chat bubble slightly bigger and match heart/count spacing. */

.media-action-comment .media-icon,
.media-action-comment .media-icon-comment,
.feed-actions [data-action="comment"] .media-icon,
.feed-actions [data-action="comment"] .media-icon-comment,
.feed-actions .comment-btn .media-icon,
.feed-actions .comment-btn .media-icon-comment,
.feed-actions .action-comment .media-icon,
.feed-actions .action-comment .media-icon-comment{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:34px!important;
  line-height:1!important;
}

.media-action-comment .media-count,
.media-action-comment .comment-count,
.media-action-comment [data-comment-count],
.feed-actions [data-action="comment"] .count,
.feed-actions [data-action="comment"] .comment-count,
.feed-actions .comment-btn .count,
.feed-actions .comment-btn .comment-count,
.feed-actions .action-comment .count,
.feed-actions .action-comment .comment-count{
  position:relative!important;
  top:-2px!important;
  margin-top:-2px!important;
  line-height:1!important;
}

@media(max-width:700px){
  .media-action-comment .media-icon,
  .media-action-comment .media-icon-comment,
  .feed-actions [data-action="comment"] .media-icon,
  .feed-actions [data-action="comment"] .media-icon-comment,
  .feed-actions .comment-btn .media-icon,
  .feed-actions .comment-btn .media-icon-comment,
  .feed-actions .action-comment .media-icon,
  .feed-actions .action-comment .media-icon-comment{
    font-size:32px!important;
  }
}
/* V2K_CHAT_BUBBLE_BIGGER_COUNT_ALIGN_END */



/* === V2K_FEED_FINAL_FIT_AUTHORITY_V1 === */
/* Final authority for /feed/: one page box, one media box, cover-fit media.
   This intentionally overrides older contain/parking/mobile scabs above. */
:root{
  --v2k-feed-real-h: 100dvh;
}

html,
body{
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
  overscroll-behavior-y:none !important;
  background:#000 !important;
}

#feed-root,
#feed-scroll{
  height:var(--v2k-feed-real-h) !important;
  min-height:var(--v2k-feed-real-h) !important;
  max-height:var(--v2k-feed-real-h) !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scroll-snap-type:y mandatory !important;
  scroll-padding-top:0 !important;
  scroll-padding-bottom:0 !important;
  overscroll-behavior-y:contain !important;
  -webkit-overflow-scrolling:touch !important;
  background:#000 !important;
}

#feed-root .feed-item,
#feed-scroll .feed-item,
.feed-item{
  position:relative !important;
  width:100vw !important;
  height:var(--v2k-feed-real-h) !important;
  min-height:var(--v2k-feed-real-h) !important;
  max-height:var(--v2k-feed-real-h) !important;
  overflow:hidden !important;
  scroll-snap-align:start !important;
  scroll-snap-stop:always !important;
  padding:0 !important;
  margin:0 !important;
  background:#000 !important;
}

#feed-root .feed-item .media-stage,
#feed-scroll .feed-item .media-stage,
.feed-item .media-stage{
  position:absolute !important;
  inset:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  display:block !important;
  align-items:unset !important;
  justify-content:unset !important;
  background:#000 !important;
  transform:none !important;
  padding:0 !important;
  margin:0 !important;
}

#feed-root .feed-item .media-stage > video,
#feed-root .feed-item .media-stage > img,
#feed-scroll .feed-item .media-stage > video,
#feed-scroll .feed-item .media-stage > img,
.feed-item .media-stage > video,
.feed-item .media-stage > img{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  min-height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  background:#000 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* Keep overlays above media after hard media-stage reset. */
#feed-root .feed-left,
#feed-scroll .feed-left,
.feed-item .feed-left{
  z-index:20 !important;
}

#feed-root .feed-actions,
#feed-scroll .feed-actions,
.feed-item .feed-actions{
  z-index:21 !important;
}

#feed-root .v2k-view-badge,
#feed-scroll .v2k-view-badge,
.feed-item .v2k-view-badge{
  z-index:22 !important;
}

/* iOS dynamic viewport authority */
@supports (-webkit-touch-callout:none){
  :root{
    --v2k-feed-real-h: 100dvh;
  }

  #feed-root,
  #feed-scroll,
  #feed-root .feed-item,
  #feed-scroll .feed-item,
  .feed-item{
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
  }

  #feed-root .feed-item .media-stage > video,
  #feed-root .feed-item .media-stage > img,
  #feed-scroll .feed-item .media-stage > video,
  #feed-scroll .feed-item .media-stage > img,
  .feed-item .media-stage > video,
  .feed-item .media-stage > img{
    object-fit:cover !important;
    object-position:center center !important;
  }
}


/* === V2K_FEED_FINAL_CONTAIN_FIT_V1 === */
/* Final last-wins fit: keep every image/video fully inside the feed frame.
   This prevents giant cropped media while preserving the fixed viewport box. */
#feed-root .feed-item .media-stage > video,
#feed-root .feed-item .media-stage > img,
#feed-scroll .feed-item .media-stage > video,
#feed-scroll .feed-item .media-stage > img,
.feed-item .media-stage > video,
.feed-item .media-stage > img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
  transform:none !important;
}


/* === V2K_FEED_PARK_LIFT_20PX_V1 === */
/* Real /feed/ park correction: media was visually landing too low.
   Lift the media box without changing the fixed feed-item page height. */
:root{
  --v2k-feed-park-lift:20px;
}

#feed-root .feed-item .media-stage,
#feed-scroll .feed-item .media-stage,
.feed-item .media-stage{
  top:calc(-1 * var(--v2k-feed-park-lift)) !important;
  bottom:auto !important;
  height:calc(100% + var(--v2k-feed-park-lift)) !important;
}

#feed-root .feed-item .media-stage > video,
#feed-root .feed-item .media-stage > img,
#feed-scroll .feed-item .media-stage > video,
#feed-scroll .feed-item .media-stage > img,
.feed-item .media-stage > video,
.feed-item .media-stage > img{
  height:100% !important;
  object-position:center center !important;
}


/* === V2K_MEDIA_CONTAIN_BOTH_FEEDS_V1_FEED === */
/* Keep current feed page/parking. Only stop side-cropping. */
#feed-scroll .feed-item .media-stage > img,
#feed-scroll .feed-item .media-stage > video,
#feed-root .feed-item .media-stage > img,
#feed-root .feed-item .media-stage > video,
.feed-item .media-stage > img,
.feed-item .media-stage > video{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}


/* === V2K_FEED_RAIL_SOUND_CHIP_FINAL === */
#feed-root .v2k-audio-bar,
#feed-scroll .v2k-audio-bar,
.feed-item .v2k-audio-bar{
  display:none !important;
  pointer-events:none !important;
}

#feed-root .feed-actions .v2k-feed-sound-rail,
#feed-scroll .feed-actions .v2k-feed-sound-rail,
.feed-actions .v2k-feed-sound-rail{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:52px !important;
  min-height:42px !important;
  max-width:52px !important;
  padding:5px 4px !important;
  margin:2px 0 0 !important;
  border-radius:16px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:rgba(0,0,0,.42) !important;
  color:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  box-shadow:0 8px 20px rgba(0,0,0,.24) !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  z-index:30 !important;
}

.feed-actions .v2k-feed-sound-icon{
  font-size:17px !important;
  line-height:1 !important;
}

.feed-actions .v2k-feed-sound-title{
  display:block !important;
  width:46px !important;
  max-width:46px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:8.5px !important;
  font-weight:900 !important;
  line-height:1 !important;
  text-align:center !important;
  opacity:.95 !important;
}

#feed-root .feed-item.v2k-active-sound .v2k-feed-sound-rail,
#feed-scroll .feed-item.v2k-active-sound .v2k-feed-sound-rail{
  border-color:rgba(0,255,213,.62) !important;
  box-shadow:0 0 18px rgba(0,255,213,.22) !important;
}


/* V2K Phase 2N5F: canonical subscriber badge identity presentation */
.v2k-comment-identity{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:800}
.v2k-subscriber-badge{display:inline-flex;align-items:center;gap:4px;max-width:180px;padding:2px 7px;border:1px solid rgba(94,234,212,.38);border-radius:999px;background:linear-gradient(135deg,rgba(13,148,136,.22),rgba(14,116,144,.18));color:#ccfbf1;font-size:11px;font-weight:950;line-height:1.35;letter-spacing:.01em;vertical-align:middle;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.v2k-subscriber-badge span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}