/**
 * File:          /pwa/css/tabbar.css
 * Version:       0.1.0
 * Last Modified: 2026-10-24 10:55 AM ET
 * Changes:       New — phone bottom bar as the iOS floating pill: 16px side
 *                inset, safe-area + 8px from the bottom, translucent with a
 *                backdrop blur and 0.5px border; active tab = inner rounded
 *                highlight; unread badges on the tab icons. Content padding
 *                is sized to the bar.
 */

@media (max-width: 768px) {
  .mobile-nav {
    left: 16px;
    right: 16px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    height: 64px;
    padding: 0 6px;
    align-items: center;
    gap: 2px;
    border-radius: 999px;
    border: var(--hairline) solid var(--border-active);
    background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }

  .mobile-tab {
    position: relative;
    min-width: 0;
    height: 52px;
    padding: 0 2px;
    justify-content: center;
    border-radius: 999px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-tab span:not(.unread-badge) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-tab.active {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
  }

  .mobile-tab .unread-badge {
    top: 2px;
    right: calc(50% - 22px);
    font-size: 11px;
  }

  /* Room for the floating bar under scrolling content and composers */
  .main {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 80px);
  }
}

/* === END OF FILE (FILENAME: /pwa/css/tabbar.css) === */