/* DevTools / mobile-browser preview — mirrors iPhone 15 Pro Max PWA for the whole site. */

html.dc-pwa-emulate {
  --dc-emulate-safe-top: 59px;
  --dc-emulate-safe-bottom: 34px;
  --dc-safe-top: var(--dc-emulate-safe-top);
  --dc-emulate-safe-left: 0px;
  --dc-emulate-safe-right: 0px;
  --dc-bottom-nav-safe-bottom: var(--dc-emulate-safe-bottom);
  --dc-shell-header-reserve: calc(76px + var(--dc-emulate-safe-top) + var(--dc-shell-header-gap, 10px));
  --dc-content-inline: max(12px, var(--dc-emulate-safe-left));
  --dc-content-inline-end: max(12px, var(--dc-emulate-safe-right));
  height: -webkit-fill-available;
}

html.dc-pwa-emulate .dc-safe-top-chrome {
  height: var(--dc-emulate-safe-top) !important;
  min-height: var(--dc-emulate-safe-top) !important;
}

html.dc-pwa-emulate::after {
  content: "PWA preview";
  position: fixed;
  top: calc(var(--dc-emulate-safe-top) + 2px);
  right: 6px;
  z-index: 2147483645;
  pointer-events: none;
  font: 600 10px/1.2 system-ui, -apple-system, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 180, 100, 0.92);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(255, 138, 0, 0.35);
  border-radius: 999px;
  padding: 3px 8px;
}

/* --- User shell (mirrors dc-mobile-pwa-shell @media standalone) --- */
html.dc-pwa-emulate,
html.dc-pwa-emulate body.user-mode:not(.admin-mode):not(.auth-mode),
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.admin-mobile-shell {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  min-height: var(--dc-layout-vh, 100dvh);
}

html.dc-pwa-emulate body.dc-pwa-standalone.user-mode:not(.admin-mode):not(.auth-mode) {
  padding-top: 0 !important;
  overflow-x: clip;
}

html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.admin-mobile-shell {
  padding-top: 0 !important;
  overflow-x: clip;
  background: #000 !important;
  -webkit-overflow-scrolling: touch;
}

html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.admin-mobile-shell::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  html.dc-pwa-emulate body.user-mode:not(.admin-mode):not(.comments-mode) header.dc-app-header,
  html.dc-pwa-emulate body.user-chrome-outside-wrap > header.dc-app-header {
    padding-top: calc(10px + var(--dc-emulate-safe-top)) !important;
  }

  html.dc-pwa-emulate body.admin-mode.admin-mobile-shell header.dc-app-header,
  html.dc-pwa-emulate body.admin-chrome-outside-wrap > header.dc-app-header {
    padding-top: calc(12px + var(--dc-emulate-safe-top)) !important;
  }
}

html.dc-pwa-emulate body.user-mode:not(.feed-v2-surface):not(.guest-home-open) .wrap {
  padding-top: calc(var(--admin-header-height, 68px) + 6px + var(--dc-emulate-safe-top)) !important;
}

html.dc-pwa-emulate body.contests-public-open .wrap,
html.dc-pwa-emulate body.contest-user-open .wrap {
  padding-top: calc(var(--admin-header-height, 68px) + var(--dc-emulate-safe-top)) !important;
}

html.dc-pwa-emulate body.user-mode:not(.auth-mode):not(.admin-mode):not(.feed-v2-surface) .wrap {
  padding-left: var(--dc-content-inline) !important;
  padding-right: var(--dc-content-inline-end) !important;
  padding-bottom: calc(var(--dc-bottom-nav-mobile-reserve, 80px) + 14px + var(--dc-emulate-safe-bottom)) !important;
  scroll-padding-bottom: calc(var(--dc-bottom-nav-mobile-reserve, 80px) + 14px + var(--dc-emulate-safe-bottom));
}

html.dc-pwa-emulate body.dc-shell-open.user-mode:not(.auth-mode) .dc-shell-main {
  padding-bottom: calc(var(--dc-emulate-safe-bottom) + 92px) !important;
}

html.dc-pwa-emulate .dc-shell-top-guard {
  height: calc(var(--dc-emulate-safe-top) + 88px + var(--dc-shell-header-gap, 10px)) !important;
  min-height: calc(var(--dc-emulate-safe-top) + 88px + var(--dc-shell-header-gap, 10px)) !important;
}

/* Guest home shell — full mirror of dc-responsive guest-home + shell rules */
html.dc-pwa-emulate body.guest-home-open:has(.dc-shell-main) {
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

html.dc-pwa-emulate body.guest-home-open:has(.dc-shell-main) .wrap {
  padding: 0 !important;
  min-height: 0 !important;
  height: 100dvh !important;
  height: var(--dc-vv-height, 100dvh) !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

html.dc-pwa-emulate body.guest-home-open:has(.dc-shell-main) .dc-shell-main {
  padding-left: max(12px, var(--dc-emulate-safe-left)) !important;
  padding-right: max(12px, var(--dc-emulate-safe-right)) !important;
}

html.dc-pwa-emulate body.guest-home-open.user-mode:not(.auth-mode):not(.admin-mode):has(.dc-shell-main) .dc-shell-main {
  padding-bottom: var(--dc-shell-nav-reserve) !important;
  scroll-padding-bottom: var(--dc-shell-nav-reserve) !important;
}

html.dc-pwa-emulate body.user-chrome-outside-wrap > header.dc-app-header,
html.dc-pwa-emulate body.user-chrome-outside-wrap > header.dc-app-header.dc-user-chrome-root {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 5002 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 68px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

/* Bottom nav dock */
html.dc-pwa-emulate body.user-mode nav.user-bottom-nav.dc-bottom-nav,
html.dc-pwa-emulate html body.user-mode nav.user-bottom-nav.dc-bottom-nav,
html.dc-pwa-emulate body.guest-home-open nav.user-bottom-nav.dc-bottom-nav,
html.dc-pwa-emulate body.feed-v2-surface nav.user-bottom-nav.dc-bottom-nav,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode nav.admin-mobile-bottom-nav,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.admin-mobile-shell .admin-mobile-bottom-nav,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.admin-mobile-shell nav.admin-mobile-bottom-nav {
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
  z-index: 5001 !important;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(0, 0, 0, 0.99)) !important;
}

/* Guest home status band */
html.dc-pwa-emulate:has(body.guest-home-open)::before {
  height: var(--dc-emulate-safe-top) !important;
  min-height: var(--dc-emulate-safe-top) !important;
}

/* Auth mobile */
html.dc-pwa-emulate body.user-mode.auth-mode .wrap {
  padding: calc(98px + var(--dc-emulate-safe-top)) 12px 18px !important;
}

html.dc-pwa-emulate body.user-mode.auth-page.auth-form-open .wrap {
  padding-top: calc(var(--dc-auth-header-h, 52px) + var(--dc-emulate-safe-top)) !important;
  padding-left: max(12px, var(--dc-emulate-safe-left)) !important;
  padding-right: max(12px, var(--dc-emulate-safe-right)) !important;
}

/* --- Admin shell --- */
html.dc-pwa-emulate body.admin-mode.admin-mobile-shell .wrap,
html.dc-pwa-emulate body.admin-chrome-outside-wrap.admin-mode.admin-mobile-shell .wrap {
  padding-left: max(12px, var(--dc-emulate-safe-left)) !important;
  padding-right: max(12px, var(--dc-emulate-safe-right)) !important;
  padding-bottom: calc(68px + var(--dc-emulate-safe-bottom)) !important;
}

html.dc-pwa-emulate body.admin-mode.admin-mobile-shell:not(.site-feed-admin-page):not(.mobile-admin-feed-open) .admin-breadcrumb,
html.dc-pwa-emulate body.admin-mode.admin-mobile-shell:not(.site-feed-admin-page):not(.mobile-admin-feed-open) .dashboard-breadcrumb,
html.dc-pwa-emulate body.admin-mode.admin-mobile-shell:not(.site-feed-admin-page):not(.mobile-admin-feed-open) .breadcrumbs {
  left: max(12px, var(--dc-emulate-safe-left)) !important;
  right: max(12px, var(--dc-emulate-safe-right)) !important;
}

html.dc-pwa-emulate body.admin-mode.accounts-admin-page .admin-users-page {
  padding-bottom: calc(68px + var(--dc-emulate-safe-bottom)) !important;
}

html.dc-pwa-emulate html:has(body.admin-mode.accounts-admin-page) {
  height: var(--dc-layout-vh, 100dvh);
}

html.dc-pwa-emulate body.admin-mode.accounts-admin-page,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.accounts-admin-page {
  height: var(--dc-layout-vh, 100dvh);
  max-height: var(--dc-layout-vh, 100dvh);
}

html.dc-pwa-emulate body.admin-mode.accounts-admin-page .admin-users-page,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.accounts-admin-page .admin-users-page {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.dc-pwa-emulate body.admin-mode.accounts-admin-page .accounts-admin-scroll,
html.dc-pwa-emulate body.dc-pwa-installed.admin-mode.accounts-admin-page .accounts-admin-scroll {
  flex: 0 0 auto;
  overflow: visible;
  min-height: auto;
}

/* Contests / profile / live user surfaces */
html.dc-pwa-emulate body.contests-public-open .wrap,
html.dc-pwa-emulate body.contest-user-open .wrap,
html.dc-pwa-emulate body.profile-user-open .wrap,
html.dc-pwa-emulate body.live-user-open .wrap {
  padding-top: calc(var(--admin-header-height, 68px) + var(--dc-emulate-safe-top)) !important;
}