/* Community posts and TV posts share one reading surface. */
html body #enter-modal#enter-modal.post-detail-page {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden !important;
}
html body #enter-modal.post-detail-page .post-detail-nav {
  position: sticky; top: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 12px;
  border-bottom: 0 !important;
}
html body #enter-modal.post-detail-page .post-detail-nav h1 { text-align: left; font-size: 17px; }
html body #enter-modal#enter-modal.post-detail-page #post-info {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: hidden auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
html body #enter-modal.post-detail-page #post-info .post-detail-thread-grid {
  display: block !important; width: min(100%, 680px) !important; box-sizing: border-box;
  margin-inline: auto !important; padding: 14px 16px calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-thread-grid > :is(.enter-post-hero, .enter-post-body) {
  width: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important;
  margin: 0 !important; background: transparent !important;
}
html body #enter-modal.post-detail-page #post-info .enter-post-author {
  grid-template-columns: 42px minmax(0, 1fr) !important; align-items: center;
  gap: 10px !important; margin: 0 !important; padding: 0 !important; min-height: 42px;
}
html body #enter-modal.post-detail-page #post-info .enter-post-avatar {
  width: 42px !important; min-width: 42px !important; height: 42px !important;
}
html body #enter-modal.post-detail-page #post-info .enter-post-avatar img { width: 100%; height: 100%; object-fit: cover; }
html body #enter-modal.post-detail-page #post-info .enter-post-author-name { font-size: 16px !important; }
html body #enter-modal.post-detail-page #post-info .enter-post-time {
  margin: 2px 0 0 !important; font-size: 14px !important; font-weight: 400 !important;
}
html body #enter-modal.post-detail-page:not(.media-detail-active) #post-info .enter-post-copy {
  margin: 14px 0 0 !important; padding: 0 !important; max-width: none;
  font-size: 17px !important; line-height: 1.48 !important; overflow-wrap: anywhere;
}
html body #enter-modal.post-detail-page #post-info .enter-post-body :is(.enter-detail-media-stage, [data-embed-scope], .bloc-card-media-preview, .community-card-player) {
  min-height: 0 !important; width: 100% !important; max-width: 100% !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-visual > :is(.enter-detail-media-stage, .community-card-player) {
  position: relative; display: block; overflow: hidden; margin: 12px 0 0 !important;
  border-radius: 14px !important; background: var(--detail-line) !important;
}
html body #enter-modal.post-detail-page #post-info .enter-post-body iframe {
  display: block; width: 100% !important; height: auto !important; min-height: 0 !important;
  aspect-ratio: 16 / 9; border: 0; border-radius: 0 !important;
}
html body #enter-modal.post-detail-page #post-info .community-card-player[data-provider="soundcloud"] iframe { min-height: 166px !important; }
html body #enter-modal.post-detail-page #post-info .community-card-player[data-provider="tiktok"] iframe { aspect-ratio: 9 / 16; max-height: min(70dvh, 600px); }
html body #enter-modal.post-detail-page #post-info .community-card-player[data-provider="spotify"] iframe { height: 152px !important; aspect-ratio: auto; }
html body #enter-modal.post-detail-page #post-info .community-card-player audio { display: block; width: 100%; }
html body #enter-modal.post-detail-page #post-info .post-detail-visual:not([open]) { display: contents !important; }
html body #enter-modal.post-detail-page #post-info .post-detail-visual:not([open]) .post-detail-media-close,
html body #enter-modal.post-detail-page #post-info .post-detail-visual[open] .post-detail-media-expand { display: none !important; }
html body #enter-modal.post-detail-page #post-info .post-detail-visual[open] {
  position: fixed; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; max-width: none; max-height: none;
  box-sizing: border-box; margin: 0; border: 0; background: #000;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 0 env(safe-area-inset-bottom, 0px);
}
html body #enter-modal.post-detail-page #post-info .post-detail-visual[open] > :is(.enter-detail-media-stage, .community-card-player) {
  height: 100% !important; margin: 0 !important; border-radius: 0 !important; background: #000 !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-visual[open] :is([data-embed-scope], .video-container, .media-container) {
  height: 100% !important; max-height: none !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-visual[open] :is(img, video, iframe) {
  width: 100% !important; height: 100% !important; max-height: none !important;
  object-fit: contain !important; border-radius: 0 !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-media-control {
  position: absolute; z-index: 3; top: 8px; right: 8px;
  display: grid !important; place-items: center;
  width: 44px !important; height: 44px !important; padding: 0 !important;
  border: 1px solid rgba(255,255,255,.28) !important; border-radius: 50% !important;
  background: rgba(0,0,0,.78) !important; color: #fff !important; box-shadow: none !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-media-close {
  top: calc(6px + env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
}
html body #enter-modal.post-detail-page #post-info .post-detail-media-control svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
html body #enter-modal.post-detail-page #post-info .post-detail-visual:not([open]) :is(.community-card-player, .enter-detail-media-stage) :is(img, video) {
  display: block; width: 100% !important; height: auto !important;
  max-height: 70dvh !important; object-fit: contain !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--detail-muted, var(--text-secondary)); font-size: 13px; line-height: 1.4;
  padding-block: 14px 11px;
}
html body #enter-modal.post-detail-page #post-info .post-detail-meta .post-detail-media-expand {
  position: static !important;
  flex: 0 0 44px;
  margin: 0 0 0 auto !important;
  justify-items: end !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--detail-text, var(--text-primary)) !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-media-expand svg {
  width: 15px;
  height: 15px;
}
html body #enter-modal.post-detail-page #post-info .post-detail-meta strong { color: var(--detail-text, var(--text-primary)); }
html body #enter-modal.post-detail-page #post-info .post-detail-engagement {
  margin: 0 !important; padding: 0 !important;
}
/* Space the icons by their leading edges. The share target extends inward. */
html body #enter-modal.post-detail-page #post-info .post-detail-engagement :is(.bytes-tv-mobile-hero-rail, .post-detail-byte-actions) {
  --detail-action-intervals: 3;
  display: grid !important; align-items: center;
  grid-template-columns: repeat(var(--detail-action-intervals), minmax(0, 1fr)) 18px;
  width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 44px !important;
  gap: 0 !important; margin: 0 !important; padding: 0 !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-byte-actions:not(:has([data-card-action="comment"])),
:is(html.community-comments-off body, html body.community-comments-off) #enter-modal.post-detail-page #post-info .post-detail-engagement .bytes-tv-mobile-hero-rail {
  --detail-action-intervals: 2;
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement .mobile-community-actions {
  height: auto !important; min-height: 44px !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement :is(.community-feed-action, .fp-act) {
  display: inline-flex; align-items: center; justify-content: flex-start !important; justify-self: start;
  width: max-content !important; min-width: 44px !important; max-width: none !important;
  height: 44px !important; min-height: 44px !important; max-height: none !important;
  gap: 5px !important; padding: 0 !important; margin: 0;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--detail-muted, var(--text-secondary));
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement :is(.community-feed-action--share, .fp-act--share) {
  justify-self: end; justify-content: flex-end !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement .fp-act.is-on { color: var(--accent-color, var(--detail-text)); }
html body #enter-modal.post-detail-page #post-info .post-detail-engagement :is(.community-action-icon, .fp-act i) {
  display: inline-grid; place-items: center; width: 18px !important; flex: 0 0 18px !important;
  font-size: 16px !important; line-height: 1 !important; text-align: center;
}
html body #enter-modal.post-detail-page #post-info .post-detail-byte-actions .fp-act__ico {
  display: inline-flex; align-items: center; gap: 5px;
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement :is(.fp-badge, .community-action-count:not([hidden])) {
  position: static !important; min-width: 0 !important; height: auto !important;
  padding: 0 !important; border: 0 !important; background: none !important;
  color: inherit !important; -webkit-text-fill-color: currentColor !important;
  font: inherit !important; font-size: 13px !important; font-variant-numeric: tabular-nums;
}
html body #enter-modal.post-detail-page #post-info .post-detail-engagement .community-action-count:not([hidden]) {
  display: inline-flex !important; align-items: center;
}
html body #enter-modal.post-detail-page #post-info :is(.post-detail-replies-head, .post-detail-inline-replies) {
  padding-inline: 0 !important; margin-inline: 0 !important; width: 100% !important; background: transparent !important;
}
html body #enter-modal.post-detail-page #post-info .post-detail-replies-head > div { text-transform: none; letter-spacing: 0; }
html body #enter-modal.post-detail-page #post-info .post-detail-byte-replies {
  color: var(--detail-muted, var(--text-secondary)); font-size: 14px; padding-block: 4px 12px;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) > div {
  padding-inline: 0 !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item {
  padding: 12px 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item + .bytes-comment-item {
  border-top: 1px solid var(--detail-line, rgba(128, 128, 128, .22)) !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__layout {
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__avatar {
  width: 36px !important;
  height: 36px !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-wrap: anywhere;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) :is(.bytes-comment-item__name, .bytes-comment-item__text) {
  color: var(--detail-text, var(--text-primary)) !important;
  -webkit-text-fill-color: currentColor !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__name {
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.3;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__text {
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4;
  white-space: pre-wrap;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) :is(.bytes-comment-item__time, .bytes-comment-item__delete, .post-detail-empty) {
  color: var(--detail-muted, var(--text-secondary)) !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}
html body :is(#enter-modal.post-detail-page #post-info .post-detail-byte-replies, .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list) .bytes-comment-item__delete {
  min-height: 32px !important;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body .bytes-comments-modal:not(.bytes-comments-modal--cinema) .bytes-comments-list {
  padding-inline: 16px;
}
html body .bytes-comments-modal:not(.bytes-comments-modal--cinema) :is(.bytes-comments-close, .bytes-comments-composer button) {
  display: inline-grid !important;
  place-items: center;
  flex: 0 0 44px;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #enter-modal.post-detail-page .post-detail-byte-composer {
  position: fixed; z-index: 2; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, 680px); box-sizing: border-box; display: flex; gap: 8px;
  background: var(--detail-bg, var(--background)); border-top: 1px solid var(--detail-line);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
}
html body #enter-modal.post-detail-page .post-detail-byte-composer input {
  flex: 1; min-width: 0; min-height: 42px; border-radius: 999px;
  padding: 0 14px; font: inherit; font-size: 16px;
  color: var(--detail-text) !important; -webkit-text-fill-color: var(--detail-text) !important;
  background: var(--detail-bg, var(--background)) !important; border: 1px solid var(--detail-line) !important;
}
html body #enter-modal.post-detail-page .post-detail-byte-composer button {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
  background: var(--detail-line); color: var(--detail-text); box-shadow: none !important;
}

html body.post-detail-open:has(#enter-modal.byte-post-detail) #global-comment-input { display: none !important; }
html body.post-detail-open > #quick-login-modal { visibility: visible !important; }
html.community-engagement-hidden body #enter-modal.post-detail-page #post-info .post-detail-meta .post-detail-view-count,
html.community-engagement-hidden body #enter-modal.post-detail-page #post-info .post-detail-byte-actions .fp-badge { display: none !important; }

html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable {
  height: var(--comments-compact-height, 40dvh) !important;
  min-height: 0 !important;
  transition: height .2s ease-out;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .1) !important;
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable.bytes-comments-modal--cinema::before { display: none; }
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable.is-expanded { height: 70dvh !important; }
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable.is-dragging {
  height: var(--comments-drag-height, var(--comments-compact-height, 40dvh)) !important;
  transition: none;
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable.is-expanded.is-dragging {
  height: var(--comments-drag-height, 70dvh) !important;
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-grip {
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  touch-action: none;
  cursor: ns-resize;
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-grip::after {
  content: '';
  width: 32px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-primary, #111) 25%, transparent);
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-header { padding: 4px 16px !important; }
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-header h3 { margin: 0; }
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-expand {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mc-ink, var(--text-primary)) !important;
  font-family: inherit;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.2;
}
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable .bytes-comments-expand i { font-size: 11px; }
html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable.is-expanded .bytes-comments-expand i { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  html body [id^="bytes-comments-modal-"].bytes-comments-modal--resizable { transition: none; }
}