/*
 * ELEVN — ONE Feed Header Overlay V1
 * Applies exclusively to ONE inside post cards.
 * Does not target /reels.
 */

.elevn-feed-media--reel > .elevn-one-feed-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-sizing: border-box;
  padding: 12px 14px 30px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .78) 0%,
    rgba(0, 0, 0, .50) 52%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
}

.elevn-feed-media--reel > .elevn-one-feed-header .post-header {
  position: relative;
  display: table;
  width: 100%;
  box-sizing: border-box;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  pointer-events: auto;
}

.elevn-one-feed-header .post-avatar,
.elevn-one-feed-header .post-meta {
  vertical-align: top;
}

.elevn-one-feed-header .post-meta {
  color: #fff !important;
}

.elevn-one-feed-header .post-author,
.elevn-one-feed-header .post-time,
.elevn-one-feed-header .post-time > a,
.elevn-one-feed-header .post-time > i,
.elevn-one-feed-header .post-time > span,
.elevn-one-feed-header .post-title,
.elevn-one-feed-header .elevn-post-views {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.elevn-one-feed-header .post-header .dropdown-toggle,
.elevn-one-feed-header .post-time > .btn-group > .btn {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .65);
}

.elevn-one-feed-header .post-header .dropdown-toggle:hover,
.elevn-one-feed-header .post-header .dropdown-toggle.show {
  background: rgba(0, 0, 0, .28) !important;
}

.elevn-one-feed-header .post-header .dropdown-menu {
  text-shadow: none;
}

.elevn-one-feed-header .post-header .text-muted {
  color: rgba(255, 255, 255, .94) !important;
}

.elevn-one-feed-header .post-header .badge {
  text-shadow: none;
}

@media (max-width: 767px) {
  .elevn-feed-media--reel > .elevn-one-feed-header {
    padding: 10px 12px 26px;
  }
}

/* ELEVN ONE Feed Header V2 */

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 12px 14px;
  box-sizing: border-box;
  pointer-events: none;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.84),
    rgba(0,0,0,.46) 74%,
    transparent
  );
  pointer-events: none;
}

.elevn-one-feed-v2 .elevn-one-feed-header,
.elevn-one-feed-v2 .elevn-one-v2-caption {
  position: relative;
}

.elevn-one-feed-v2 .elevn-one-feed-header {
  pointer-events: none;
}

.elevn-one-feed-v2 .elevn-one-feed-header .post-header {
  display: table;
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto;
}

.elevn-one-feed-v2 .elevn-one-feed-header .post-meta {
  color: #fff !important;
}

.elevn-one-feed-v2 .elevn-one-v2-plays {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
}

.elevn-one-feed-v2 .elevn-one-v2-plays .fa-play {
  font-size: 10px;
}

.elevn-one-feed-v2 .elevn-one-v2-caption {
  z-index: 1;
  color: #fff;
  margin: 7px 0 0;
  max-height: min(32svh,230px);
  overflow-y: auto;
  overscroll-behavior: contain;
  pointer-events: auto;
  scrollbar-width: thin;
}

.elevn-one-feed-v2 .elevn-one-v2-caption .post-replace {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: pre-line;
}

.elevn-one-feed-v2 .elevn-one-v2-caption .post-text,
.elevn-one-feed-v2 .elevn-one-v2-caption .post-text a {
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
}

.elevn-one-feed-v2 .elevn-one-v2-caption .post-text a {
  text-decoration: underline;
}

.elevn-one-feed-v2 .elevn-one-v2-caption.is-expanded .post-replace,
.elevn-one-feed-v2 .elevn-one-v2-caption:has(.post-edit) .post-replace {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.elevn-one-feed-v2 .elevn-one-v2-caption:has(.post-edit) {
  max-height: min(45svh,300px);
  overflow-y: auto;
}

.elevn-one-feed-v2 .elevn-one-v2-caption:has(.post-edit) .post-edit,
.elevn-one-feed-v2 .elevn-one-v2-caption:has(.post-edit) textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.elevn-one-feed-v2 .elevn-one-v2-caption:has(.post-edit) .elevn-one-v2-more {
  display: none !important;
}

.elevn-one-feed-v2 .elevn-one-v2-more {
  padding: 3px 0;
  margin: 3px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  text-decoration: underline;
  font-size: 12px;
  cursor: pointer;
}

.elevn-one-feed-v2 .elevn-one-v2-more[hidden] {
  display: none !important;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle {
  top: auto;
  bottom: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
}

.elevn-one-feed-v2 > .elevn-feed-sound-toggle i {
  font-size: 13px;
}

/* ELEVN ONE Feed Header V2.1a CSS-only */

/* Lighter overlay gradient. */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-layer::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .38) 0%,
    rgba(0, 0, 0, .12) 60%,
    transparent 100%
  );
}

/* Style existing hashtag links without moving DOM nodes. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-caption .post-text a[href*="/search/hashtag/"] {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 3px 5px 3px 0;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, .48);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  vertical-align: baseline;
}

/*
 * Remove the three-line clamp on the rich-text wrapper.
 * Keep the existing caption max-height and vertical scroll.
 * No HTML or hashtag link is rewritten.
 */
.elevn-one-feed-v2 .elevn-one-v2-caption .post-replace {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  overflow: visible;
  white-space: normal;
}

/*
 * The full text is accessible through the caption scroll area.
 * The old expand button is not needed in this CSS-only test.
 */
.elevn-one-feed-v2 .elevn-one-v2-caption .elevn-one-v2-more {
  display: none !important;
}

/* ELEVN ONE Feed Header V2.1b bottom-left hashtags + 45px avatar */

/* 45px profile photo in the inline ONE overlay header only */
.elevn-one-feed-v2 .elevn-one-feed-header .post-avatar,
.elevn-one-feed-v2 .elevn-one-feed-header .post-avatar > a,
.elevn-one-feed-v2 .elevn-one-feed-header .post-avatar img {
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  min-height: 45px !important;
}

.elevn-one-feed-v2 .elevn-one-feed-header .post-avatar {
  flex: 0 0 45px;
}

/* bottom-left hashtag host, with a right gutter for the sound button */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags {
  position: absolute;
  left: 12px;
  right: 64px;
  bottom: 12px;
  z-index: 26;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  max-height: 74px;
  overflow: hidden;
  pointer-events: auto;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags[hidden] {
  display: none !important;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags .elevn-one-v2-tag-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  overflow-wrap: anywhere;
  white-space: normal;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags .elevn-one-v2-tag-pill:focus,
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags .elevn-one-v2-tag-pill:hover {
  background: rgba(255,255,255,.19);
  color: #fff !important;
}

/* hide the source hashtag line after the title once split */
.elevn-one-feed-v2 .elevn-one-v2-caption .elevn-one-v2-tag-source-hidden {
  display: none !important;
}

/* ELEVN ONE V2.1c - sound and hashtag vertical alignment */

/*
 * Hashtag capsule:
 * font 13px, line-height 1.3, padding 4px, border 1px
 * => visible height approximately 27px.
 *
 * Sound:
 * visible circle 27px, touch target remains 36px.
 *
 * Both visual centers align on the bottom row.
 */

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle,
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle.is-on {
  position: absolute;
  top: auto;
  bottom: 7.5px;
  right: 12px;

  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
}

/* Visible circular surface: 27px diameter. */

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle::before {
  content: "";
  position: absolute;
  top: 4.5px;
  right: 4.5px;
  bottom: 4.5px;
  left: 4.5px;

  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.48);
  background: rgba(255,255,255,.13);

  pointer-events: none;
}

/* Sound enabled: keep its own visual state. */

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle.is-on::before {
  background: rgba(0,0,0,.30);
}

/* Icon centered above decorative background. */

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle i {
  position: relative;
  z-index: 1;
  font-size: 13px;
  line-height: 1;
}

/* ELEVN ONE Feed Header V2.1d transparency + modal layering */

/* Make hashtag pills more transparent. */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags .elevn-one-v2-tag-pill {
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
}

/* ELEVN ONE V2.1e - restore sound appearance and invert ON OFF */

/* SOUND OFF: dark translucent circle. */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle::before {
  border-color: rgba(255,255,255,.48);
  background: rgba(0,0,0,.30);
}

/* SOUND ON: light translucent circle. */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle.is-on::before {
  background: rgba(255,255,255,.13);
}

/*
 * Put hashtags and sound below the chevron modal layer.
 * They stay above the video, but no longer above the sheet.
 */
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-one-v2-tags {
  z-index: 14;
}

.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle,
.elevn-feed-media--reel.elevn-one-feed-v2 > .elevn-feed-sound-toggle.is-on {
  z-index: 14;
}

/* ELEVN - Shared ONE V2: remove legacy media top gap */
.post-snippet .elevn-feed-media-wrapper.elevn-feed-media--reel.elevn-one-feed-v2 {
  margin-top: 0;
}

/* ELEVN ONE Feed - native caption swap, scoped V2. */

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  line-height: 1.35em;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .post-time,
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption {
  grid-area: 1 / 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  line-height: inherit !important;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}

/* Initial face */

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .post-time {
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  max-height: none;
  overflow: visible;
  scrollbar-width: auto;
}

/* Normalize the text metrics on the measured caption wrapper. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption .post-replace,
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption .post-replace .post-text {
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Real ONE caption - clamp to one line. */

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption .post-replace {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  white-space: normal;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption .elevn-one-v2-more {
  display: none !important;
}

/* Revealed face */

.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap > .post-time {
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;
}

.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap > .elevn-one-v2-caption {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}

/* Keep an active privacy menu/focus visible. */

.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap:has(> .post-time:focus-within) > .post-time,
.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap:has(> .post-time .show) > .post-time {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, visibility 0s;
}

.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap:has(> .post-time:focus-within) > .elevn-one-v2-caption,
.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap:has(> .post-time .show) > .elevn-one-v2-caption {
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
}

/* Editor uses the layer width instead of the metadata column. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap:has(.post-edit) {
  position: absolute;
  inset-inline: 0;
  z-index: 5;
}

/* Editing forces the real caption visible immediately. */

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap:has(.post-edit) > .post-time {
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap:has(.post-edit) > .elevn-one-v2-caption {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: none !important;
  max-height: none !important;
  overflow: visible !important;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap:has(.post-edit) > .elevn-one-v2-caption .post-replace {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Expanded caption scrolls without clipping the swap itself. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption.is-expanded {
  max-height: 5.5em;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Reuse ELEVN's existing delegated More / Less handler. */

.elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap > .elevn-one-v2-caption .elevn-one-v2-more:not([hidden]) {
  display: inline-block !important;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption.is-expanded .post-replace {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
  white-space: normal;
}

.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption:has(.post-edit) .elevn-one-v2-more {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .post-time,
  .elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap > .elevn-one-v2-caption,
  .elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap > .post-time,
  .elevn-feed-media--reel.elevn-one-feed-v2.is-caption-revealed .elevn-one-v2-swap > .elevn-one-v2-caption {
    transition: none;
  }
}

/* ELEVN ONE T3-E2: hidden More must never occupy grid space. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-v2-swap .elevn-one-v2-more[hidden] {
  display: none !important;
}

/* ELEVN ONE T3-F: creator name in HOME ONE headers. */
.elevn-feed-media--reel.elevn-one-feed-v2 .elevn-one-feed-header .post-author {
  font-size: 15px;
}