/* Immersive feed: each feed item owns its viewport. Media keeps a deliberate aspect ratio,
   while the surrounding content surface fills the screen edge-to-edge. */

.v4-main:has(.v5-feed-page) {
  max-width: none;
  padding: 0;
}

.v5-feed-page {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
}

.v5-feed-page > .feed-header,
.v5-feed-page > .lea-ribbon {
  display: none;
}

.v5-feed-page .feed-stream {
  gap: 0;
  width: 100%;
}

.v5-feed-page .feed-card,
.v5-feed-page .media-card {
  width: 100%;
  min-height: calc(100dvh - 68px);
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Ambient mode used to visually recreate a card shell. Never let it win inside the feed. */
body[data-ambient-active="1"] .v5-feed-page .feed-card,
body[data-ambient-active="1"] .v5-feed-page .media-card,
body[data-ambient-active="1"] .v5-feed-page .media-card[data-ambient-current] {
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.v5-feed-page .native-media-card,
body[data-ambient-active="1"] .v5-feed-page .native-media-card,
body[data-ambient-active="1"] .v5-feed-page .native-media-card[data-ambient-current] {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 68px);
  min-height: calc(100dvh - 68px);
  padding: 0 !important;
  background: #090a09 !important;
  color: #fff;
  isolation: isolate;
}

.v5-feed-page .native-media-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.08), transparent 38%),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,.045), transparent 42%),
    #090a09;
}

.v5-feed-page .native-media-card > .feed-card-top {
  position: absolute;
  top: 18px;
  left: 20px;
  right: 20px;
  z-index: 12;
  margin: 0;
  color: rgba(255,255,255,.84);
  text-shadow: 0 1px 18px rgba(0,0,0,.34);
  pointer-events: none;
}

.v5-feed-page .native-media-card > .feed-card-top .content-pill {
  background: rgba(12,14,13,.42);
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
}

.v5-feed-page .native-media-card .native-media-stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  margin: 0 !important;
  padding: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

/* Landscape media stays 16:9 and is maximized without distortion. */
.v5-feed-page .native-media-card .native-player-shell {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(100%, calc((100dvh - 68px) * 16 / 9));
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  background: #000;
  overflow: hidden;
}

.v5-feed-page .native-media-card .native-player-shell > img,
.v5-feed-page .native-media-card .native-player-shell > iframe,
.v5-feed-page .native-media-card .native-media-poster-fallback {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  display: block;
}

.v5-feed-page .native-media-card .native-player-shell > img {
  object-fit: contain;
}

.v5-feed-page .native-media-stage--tiktok .native-player-shell {
  width: auto;
  height: min(100%, calc(100dvh - 68px));
  max-width: none;
  max-height: 100%;
  margin: auto;
  aspect-ratio: 9 / 16;
}

.v5-feed-page .native-media-stage--spotify .native-player-shell {
  width: min(100%, 760px);
  height: auto;
  aspect-ratio: 1.9 / 1;
  margin: auto;
}

/* Learning UI is an overlay; it must never shrink the video surface. */
.v5-feed-page .native-media-card .native-learning-bar {
  position: absolute;
  z-index: 10;
  left: clamp(12px,2vw,22px);
  right: clamp(12px,2vw,22px);
  bottom: clamp(18px,3vh,34px);
  width: auto;
  margin: 0;
  border-radius: 18px;
  background: rgba(10,12,11,.58);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(18px);
}

.v5-feed-page .native-media-card .native-vocab-panel {
  position: absolute;
  z-index: 11;
  left: clamp(12px,2vw,22px);
  right: clamp(12px,2vw,22px);
  bottom: clamp(88px,12vh,130px);
  max-height: 35vh;
  overflow: auto;
}

.v5-feed-page .native-media-card > .v5-media-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  margin: 0 !important;
  padding: 110px clamp(20px,4vw,48px) clamp(88px,10vh,118px);
  background: linear-gradient(to bottom, rgba(10,12,11,0), rgba(10,12,11,.62) 48%, rgba(10,12,11,.92));
  color: #fff;
  pointer-events: none;
}

.v5-feed-page .native-media-card > .v5-media-copy .media-actions,
.v5-feed-page .native-media-card > .v5-media-copy button,
.v5-feed-page .native-media-card > .v5-media-copy a {
  pointer-events: auto;
}

.v5-feed-page .native-media-card > .v5-media-copy > small,
.v5-feed-page .native-media-card > .v5-media-copy p {
  color: rgba(255,255,255,.78);
}

.v5-feed-page .native-media-card > .v5-media-copy .media-actions {
  margin-top: 14px;
}

.v5-feed-page .native-media-card > .v5-media-copy .media-actions button {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.16);
  color: #fff;
  backdrop-filter: blur(12px);
}

.v5-feed-page .feed-card:not(.native-media-card),
body[data-ambient-active="1"] .v5-feed-page .feed-card:not(.native-media-card) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px,7vw,84px) !important;
  background: rgba(245,243,237,.96) !important;
}

.v5-feed-page .feed-card:not(.native-media-card) > .feed-card-top {
  margin-bottom: clamp(22px,4vh,46px);
}

.v5-feed-page .feed-card:not(.native-media-card) .feed-why {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
}

@media (max-width: 900px) {
  .fluence-v4:has(.v5-feed-page) {
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    background: #090a09;
  }

  .fluence-v4:has(.v5-feed-page) .v4-topbar {
    display: none !important;
  }

  .fluence-v4:has(.v5-feed-page) .v4-shell {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  .fluence-v4:has(.v5-feed-page) .v4-main,
  .v4-main:has(.v5-feed-page) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* Wrappers follow their real parent width. Avoid stacking 100vw on nested elements. */
  .v5-feed-page,
  .v5-feed-page .feed-stream,
  .v5-feed-page .feed-card,
  .v5-feed-page .media-card,
  .v5-feed-page .native-media-card {
    width: 100%;
    max-width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  .v5-feed-page {
    overflow-x: hidden;
  }

  .v5-feed-page .feed-card,
  .v5-feed-page .media-card,
  .v5-feed-page .native-media-card {
    height: 100dvh;
    min-height: 100dvh;
    left: auto;
    right: auto;
    transform: none;
  }

  .v5-feed-page .native-media-card .native-media-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0 !important;
    transform: none;
  }

  .v5-feed-page .native-media-card > .feed-card-top {
    top: max(14px, env(safe-area-inset-top));
    left: 14px;
    right: 14px;
  }

  /* Normal YouTube/video: use the actual feed width, centered without a viewport-width offset. */
  .v5-feed-page .native-media-card .native-player-shell {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: none;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
  }

  /* Shorts / Reels / TikTok cover the phone viewport while staying centered. */
  .v5-feed-page .native-media-stage--tiktok .native-player-shell,
  .v5-feed-page .native-media-stage--short-form .native-player-shell,
  .v5-feed-page .is-short-form .native-player-shell {
    position: absolute;
    left: 50%;
    right: auto;
    top: 50%;
    transform: translate(-50%,-50%);
    width: max(100%, calc(100dvh * 9 / 16));
    height: max(100dvh, calc(100dvw * 16 / 9));
    min-width: 100%;
    min-height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: 9 / 16;
  }

  .v5-feed-page .native-media-stage--tiktok .native-player-shell > img,
  .v5-feed-page .native-media-stage--short-form .native-player-shell > img,
  .v5-feed-page .is-short-form .native-player-shell > img {
    object-fit: cover;
  }

  .v5-feed-page .native-media-card .native-learning-bar {
    left: 12px;
    right: 12px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
  }

  .v5-feed-page .native-media-card .native-vocab-panel {
    left: 12px;
    right: 12px;
    bottom: calc(158px + env(safe-area-inset-bottom));
  }

  .v5-feed-page .native-media-card > .v5-media-copy {
    padding: 96px 18px calc(164px + env(safe-area-inset-bottom));
  }

  .v5-feed-page .feed-card:not(.native-media-card) {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 26px 20px calc(96px + env(safe-area-inset-bottom)) !important;
  }
}