/* tabbar.css — bottom tab bar for phones: Bulletin / Group / Messages /
 * Profile / Settings. Group is now its own tab (matching the 5-tab bar
 * already added to the top-level marketing homepage), so on mobile
 * every icon-link in every topbar is hidden — all five destinations are
 * covered by the bar below instead.
 *
 * At 820px and up every icon-link comes back and this bar disappears —
 * a mouse-driven top bar is the better fit for a wide screen.
 *
 * Load this file LAST in every <head>, after group.css / profile.css /
 * messenger.css — it overrides #groupView's height and the Group
 * composer's position so that fixed composer sits just above this bar
 * instead of underneath it. (messenger.html's own composer is a normal
 * in-flow element, confirmed against messenger.css, so it doesn't need
 * the same treatment.)
 */

:root{ --tabbar-h: 0px; }

.bb-tabbar{ display:none; }

@media (max-width: 819px){
  :root{ --tabbar-h: calc(58px + env(safe-area-inset-bottom, 0px)); }

  /* Every destination now has its own tab, so the icon-link row is
     fully redundant on mobile. */
  .topbar-actions .icon-link{ display:none; }

  .bb-tabbar{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    padding:7px 2px calc(6px + env(safe-area-inset-bottom, 0px));
    background:rgba(5,11,31,.92);
    backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-top:1px solid var(--glass-border, rgba(255,255,255,.14));
  }
  .bb-tab{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:5px 0 2px; text-decoration:none;
    color:var(--ink-500, #7C8FC2); font-family:var(--font-body, inherit);
    font-size:.6rem; font-weight:600; position:relative;
    -webkit-tap-highlight-color:transparent;
  }
  .bb-tab .ico{ width:19px; height:19px; }
  .bb-tab[aria-current="page"]{ color:var(--ink-0, #F5F8FF); }
  .bb-tab[aria-current="page"]::before{
    content:""; position:absolute; top:-7px; width:22px; height:2px; border-radius:0 0 3px 3px;
    background:linear-gradient(90deg, var(--blue-500,#4B84FF), var(--blue-600,#2F6FED));
  }

  /* room at the bottom of every page so content isn't hidden behind the bar */
  body{ padding-bottom: var(--tabbar-h); }

  /* The generic "Beyond Borders" footer sits right where the fixed tab
     bar now is, and the bar's background is semi-transparent (blur, not
     solid), so a sliver of that footer text shows through underneath it
     on any page. The tab bar already tells you where you are, so just
     drop the footer wherever the bar shows. */
  .page-footer{ display:none; }

  /* group.html's fixed composer moves up to sit just above the tab bar,
     and the scrolling message pane shrinks to match. */
  .group-composer-bar{ bottom: var(--tabbar-h); }
  #groupView{ height: calc(100vh - 220px - var(--tabbar-h)); }
}