/* === ERIC PATCH 2026-05-25: watch player/header lock + safe banner ads === */
:root {
  --eric-watch-player-top: var(--watch-player-nav-offset, var(--eric-topbar-height, 70px));
  --eric-watch-visual-height: 100dvh;
  --eric-watch-keyboard-offset: 0px;
}

body[data-route-page="watch"] .navbar,
body[data-route-page="watch"] .compact-navbar,
body[data-route-page="watch"] .app-header,
body[data-route-page="watch"] .topbar {
  z-index: 10050;
}

body[data-route-page="watch"] .menu-drawer,
body[data-route-page="watch"] .nav-center.menu-drawer {
  z-index: 10060;
}

.app-shell > .app-main[data-active-page="watch"] {
  --watch-player-nav-offset: max(var(--nav-height, 64px), var(--eric-topbar-height, 70px));
  --watch-player-absolute-height: clamp(190px, 56.25vw, 620px);
  height: 100dvh;
  min-height: 100dvh;
  padding-top: var(--watch-player-nav-offset);
  overflow: hidden;
  overscroll-behavior: none;
  box-sizing: border-box;
}

.app-shell > .app-main[data-active-page="watch"] > .watch-page,
.app-main[data-active-page="watch"] > .watch-page.page.watch-page {
  position: relative;
  width: 100%;
  max-width: none;
  height: calc(100dvh - var(--watch-player-nav-offset));
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

body[data-route-page="watch"] .watch-page .watch-player-absolute {
  position: fixed;
  top: var(--eric-watch-player-top, var(--watch-player-nav-offset, 70px));
  left: 0;
  right: 0;
  z-index: 9000;
  width: 100%;
  height: var(--watch-player-absolute-height);
  max-height: calc(var(--eric-watch-visual-height, 100dvh) - var(--eric-watch-player-top, 70px));
  margin: 0;
  overflow: hidden;
  background: #000;
  transform: none;
  isolation: isolate;
  contain: layout paint;
  box-sizing: border-box;
}

body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: #000;
  transform: none;
  contain: layout paint;
}

body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame iframe,
body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame video,
body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame .plyr,
body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame .plyr__video-wrapper,
body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame .embed-player-wrap,
body[data-route-page="watch"] .watch-page .watch-player-absolute .player-frame .embed-player-frame {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  transform: none;
}

body[data-route-page="watch"] .watch-page .watch-scroll-body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: var(--watch-player-absolute-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: calc(var(--watch-player-absolute-height) + 12px);
  box-sizing: border-box;
}

body.watch-keyboard-open .watch-page .watch-scroll-body {
  padding-bottom: calc(96px + var(--eric-watch-keyboard-offset, 0px));
  scroll-padding-bottom: calc(96px + var(--eric-watch-keyboard-offset, 0px));
}

body.watch-keyboard-open .watch-page .watch-comments-separate {
  padding-bottom: calc(34px + var(--eric-watch-keyboard-offset, 0px));
}

html.eric-watch-keyboard-lock,
body.eric-watch-keyboard-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (max-width: 720px) {
  .app-shell > .app-main[data-active-page="watch"] {
    --watch-player-absolute-height: clamp(190px, 56.25vw, 300px);
    --watch-player-nav-offset: max(var(--nav-height, 64px), var(--eric-topbar-height, 70px));
  }
}

@media (min-width: 980px) {
  .app-shell > .app-main[data-active-page="watch"] {
    --watch-player-absolute-height: min(56.25vw, 620px);
  }

  body[data-route-page="watch"] .watch-page .watch-player-absolute {
    left: max(16px, calc((100vw - 1180px) / 2));
    right: max(16px, calc((100vw - 1180px) / 2));
    width: auto;
  }

  body[data-route-page="watch"] .watch-page .watch-scroll-body {
    padding-left: max(16px, calc((100vw - 1180px) / 2));
    padding-right: max(16px, calc((100vw - 1180px) / 2));
  }
}

body.watch-reply-mode .watch-page .watch-scroll-body {
  padding-top: var(--watch-player-absolute-height);
}

.ad-banner-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.ad-banner-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 60px;
  overflow: hidden;
}

#adsterra-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(468px, 100%);
  max-width: 100%;
  min-height: 60px;
  overflow: hidden;
}

.eric-ad-sandbox-frame {
  display: block;
  width: min(468px, 100%);
  max-width: 100%;
  height: 60px;
  min-height: 60px;
  border: 0;
  overflow: hidden;
  background: transparent;
}

body > iframe[src*="highperformanceformat.com"],
body > iframe[src*="adsterra"],
body > script[src*="highperformanceformat.com"],
body > script[src*="adsterra"] {
  display: none;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* === ERIC PATCH 2026-05-25 REV2: internal popups must stay above player/header === */
.chart-detail-overlay,
.avatar-border-detail-overlay,
.comment-bio-overlay,
.account-modal.give-confirm-overlay,
.give-card-overlay,
.friend-search-popup,
.watch-comment-menu-modal {
  z-index: 12000;
}

.chart-detail-overlay .chart-detail-modal,
.avatar-border-detail-overlay .chart-detail-modal,
.comment-bio-overlay > *,
.account-modal.give-confirm-overlay > *,
.give-card-overlay > *,
.friend-search-popup > *,
.watch-comment-menu-modal > * {
  position: relative;
  z-index: 12001;
}