/* ==========================================================================
   Mobile bottom tab bar — viewport-fixed, direct child of body (portal).
   ========================================================================== */

:root {
  --mobile-bottom-nav-h: 50px;
  --mobile-bottom-blue-bleed: 6px;
  --mobile-bottom-nav-extra: 6px;
  --mobile-bottom-safe: env(safe-area-inset-bottom, 0px);
  /* Tab row + home-indicator / extra blue (fixed to viewport bottom) */
  --mobile-bottom-dock-h: calc(
    var(--mobile-bottom-nav-h) +
    var(--mobile-bottom-safe) +
    var(--mobile-bottom-blue-bleed)
  );
  /* Scroll clearance: dock + composer teaser + breathing room */
  --mobile-bottom-nav-total: calc(
    var(--mobile-bottom-dock-h) +
    var(--feed-composer-dock-h, 52px) +
    var(--mobile-bottom-nav-extra)
  );
}

@media (min-width: 768px) {
  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }

  html.has-mobile-bottom-nav .app-main,
  html.has-mobile-bottom-nav .app-shell__content {
    padding-bottom: 0 !important;
  }
}

@media (max-width: 767px) {
  :root {
    --bottom-nav-h: var(--mobile-bottom-nav-h);
    --bottom-nav-total: var(--mobile-bottom-nav-total);
  }

  /* Kill any nav links that leaked into page layout */
  .tnav-bar > .tnav-nav-links,
  .app-shell .tnav-nav-links,
  .app-main .tnav-nav-links,
  .sf-page .tnav-nav-links,
  .sf-feed-layout .tnav-nav-links,
  .sf-feed-main .tnav-nav-links,
  #feed-composer .tnav-nav-links {
    display: none !important;
  }

  body > .mobile-bottom-nav,
  .mobile-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    max-width: none !important;
    height: var(--mobile-bottom-dock-h) !important;
    min-height: var(--mobile-bottom-dock-h) !important;
    z-index: 9999 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-bottom: calc(var(--mobile-bottom-safe) + var(--mobile-bottom-blue-bleed)) !important;
    box-sizing: border-box;
    background: var(--fa-surface, #071326) !important;
    border-top: none;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2,  1);
    will-change: transform;
    contain: layout style;
  }

  html.mobile-chrome-collapsed .mobile-bottom-nav {
    transform: translate3d(0, 100%, 0) !important;
    pointer-events: none !important;
  }

  html.mobile-chrome-collapsed.has-mobile-bottom-nav .app-main,
  html.mobile-chrome-collapsed.has-mobile-bottom-nav .app-shell__content {
    padding-bottom: 12px !important;
  }

  html.mobile-chrome-collapsed body.feed-page .sf-feed-list {
    padding-bottom: 12px !important;
  }

  html.mobile-chrome-collapsed body.feed-page #feed-composer {
    transform: translate3d(0, calc(100% + var(--mobile-bottom-dock-h)), 0) !important;
    pointer-events: none !important;
  }

  body.feed-page #feed-composer {
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  .mobile-bottom-nav[hidden] {
    display: none !important;
  }

  body > .mobile-bottom-nav .tnav-nav-links,
  .mobile-bottom-nav .tnav-nav-links,
  .mobile-bottom-nav .tnav-nav-links.tnav-nav-links--dock {
    position: static !important;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    height: var(--mobile-bottom-nav-h) !important;
    min-height: var(--mobile-bottom-nav-h) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: stretch;
    gap: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-bottom-nav .tnav-nav-search-bar,
  .mobile-bottom-nav .tnav-nav-search-input {
    display: none !important;
  }

  .mobile-bottom-nav .tnav-nav-links::-webkit-scrollbar {
    display: none;
  }

  .mobile-bottom-nav .tnav-nav-links::after {
    display: none !important;
  }

  html.has-mobile-bottom-nav:not(.is-circle-chat-active) .app-main,
  html.has-mobile-bottom-nav:not(.is-circle-chat-active) .app-shell__content {
    padding-bottom: var(--mobile-bottom-nav-total) !important;
  }

  html.has-mobile-bottom-nav body.feed-page #feed-composer {
    bottom: var(--mobile-bottom-dock-h) !important;
    z-index: 9998 !important;
  }

  html.has-mobile-bottom-nav body.feed-page .sf-feed-list {
    padding-bottom: calc(var(--mobile-bottom-nav-total) + 8px) !important;
  }
}