/**
 * Domainless shared bottom-tab styles.
 *
 * Mirrors the .nav / .nav-btn pattern domainless.fun uses, so every
 * sister site's site-specific tab bar looks identical (visually and
 * behaviorally) to Social. Pair with chrome.v1.css for the fixed-top
 * bar; this stylesheet handles the fixed-bottom in-app nav.
 *
 * Usage:
 *   <link rel="stylesheet" href="https://domainless.fun/chrome/tabs.v1.css">
 *   <nav class="nav">
 *     <a class="nav-btn active" href="/">
 *       <svg viewBox="0 0 24 24">…</svg>
 *       Tab name
 *     </a>
 *     …
 *   </nav>
 *
 * For active state: add `active` class to the current tab's <a>.
 */

.nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(48px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg, #0c0c12);
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 100;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav::-webkit-scrollbar {
  display: none;
}

.nav-btn {
  flex: 1 1 auto;
  min-width: 60px;
  background: none;
  border: none;
  color: var(--dim, #7a7a88);
  font-size: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 8px;
  position: relative;
  text-decoration: none;
  transition: color 0.15s;
  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
}
.nav-btn:hover {
  color: var(--bright, #f0f0f6);
}
.nav-btn.active {
  color: var(--accent, #c8a86e);
}

.nav-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  width: 7px;
  height: 7px;
  background: var(--danger, #f4839a);
  border-radius: 50%;
  display: none;
}
.nav-btn.has-badge .nav-badge {
  display: block;
}

/* Body padding so the fixed bottom bar doesn't cover content. Including
   this stylesheet always reserves the space — sites that already handle
   their own bottom-nav padding can override or skip the stylesheet. */
body {
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}

/* The chrome bar's menu-toggle icon (☰) hides the bottom-nav too —
   editor-heavy sites (code, games) get full vertical space for their
   primary content when the user collapses chrome. Cookie persists the
   choice across the whole domainless.fun ecosystem. */
html.dl-chrome-collapsed .nav {
  display: none !important;
}
html.dl-chrome-collapsed body {
  padding-bottom: 0 !important;
}