/* Community timeline: clear the floating dock while the reader scrolls down. */
html body.community-active {
    overscroll-behavior-y: contain;
}

html body.community-active #bottom-nav {
    transition:
        opacity 0.18s ease-out,
        transform 0.18s ease-out !important;
}

html body.community-active.community-timeline-nav-hidden #bottom-nav {
    opacity: 0 !important;
    transform: translateY(calc(115% + env(safe-area-inset-bottom, 0px))) !important;
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.community-active #bottom-nav {
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================
   The rooms sheet follows the header.

   The sheet is a fixed overlay that reserves the header's height with
   padding-top, so when the bar tucked away the sheet stayed put and left an
   empty band across the top. It scrolls inside an iframe, so its scroll is
   reported up by mobile-rooms.js and fed to the header by the overlay's
   message handler; this is the other half — giving the space back.

   Travel on transform, not on padding-top or top. The padding is what holds
   the sheet clear of the header, and animating it would re-run layout on a
   full iframe every frame. A transform is composited and moves the sheet and
   the bar the same distance on the same curve.
   ============================================================ */
html body.mobile-header-tucked #rooms-mobile-overlay {
    transform: translate3d(0, calc(-1 * var(--mobile-app-header-height, 140px)), 0) !important;
}

/* Sliding up by the header's height leaves that much bare at the bottom.
   Growing the sheet by the same amount keeps the iframe filling the screen. */
html body.mobile-header-tucked #rooms-mobile-overlay {
    bottom: calc(-1 * var(--mobile-app-header-height, 140px)) !important;
}