/* The native container consumes Android insets; browsers use their safe area. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --status-gradient: linear-gradient(115deg, #edf3ff, #f4f1ff);
}
[data-theme="dark"] { --status-gradient: linear-gradient(115deg, #273b65, #282e53, #38305d); }
html[data-native-safe-area="handled"] {
  --safe-top: 0px;
  --safe-right: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
}
@media (max-width: 1023px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: var(--safe-top);
    z-index: 100001;
    background: var(--status-gradient);
    pointer-events: none;
  }
  .view {
    height: 100%;
    height: 100dvh;
    bottom: auto;
    min-height: 0;
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
  /* Keep one stable scrollport while the discovery header slides over it. */
  #view-main .main-header {
    position: absolute;
    top: var(--safe-top);
    left: var(--safe-left);
    right: var(--safe-right);
    margin-bottom: 0;
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  }
  #view-main .main-scroll {
    min-height: 0;
    padding-top: var(--main-header-height, 105px);
    scroll-padding-top: var(--main-header-height, 105px);
  }
  .main-scroll, .discover-scroll, .pc-body, .likes-scroll, .af-scroll {
    min-height: 0;
    overscroll-behavior-y: contain;
    padding-bottom: max(24px, var(--safe-bottom));
  }
  .discover-search-float { top: var(--safe-top); }
  .modal-overlay, .pc-bubble-popup, .pc-approve-overlay, #splash-screen {
    padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  }
  .modal-sheet, #promoModal .promo-sheet {
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 24px);
  }
  .site-dialog {
    inset: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
    max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 24px);
    max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 32px);
  }
  /* Leave the page's back/navigation controls available while a notice is open. */
  .live-message-notice { top: calc(64px + var(--safe-top)); }
  .dd-toast { top: calc(60px + var(--safe-top)); }
}