/* Android app bottom navigation (only shown when <html class="in-app">).
   Shared by index.html and stats.html. Tabs: Home · Catalog · Stats · Search */
:root {
  --tabbar-h: 62px;
  --tabbar-gap: 12px;
  --tabbar-space: calc(var(--tabbar-h) + var(--tabbar-gap) + env(safe-area-inset-bottom));
}
.app-tabbar { display: none; }
.in-app body { padding-bottom: calc(var(--tabbar-space) + 8px); }

/* iOS-style floating pill */
.in-app .app-tabbar {
  position: fixed; z-index: 120;
  left: 50%; bottom: calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(420px, calc(100% - 28px)); height: var(--tabbar-h);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px; border-radius: 999px;
  background: rgba(30, 32, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}
.in-app body.kb-open .app-tabbar { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }

/* Sliding highlight behind the active tab */
.tab-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(calc(var(--tab-i, 0) * 100%));
  transition: transform 0.38s cubic-bezier(0.34, 1.36, 0.64, 1), opacity 0.2s;
}
.app-tabbar[data-active="none"] .tab-indicator { opacity: 0; }

.tab-btn {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: none; border: none; cursor: pointer; border-radius: 999px;
  color: rgba(255, 255, 255, 0.55); font: 600 10.5px 'Plus Jakarta Sans', sans-serif; letter-spacing: 0.01em;
  text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}
.tab-btn svg { width: 21px; height: 21px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.tab-btn.active { color: #fff; }
.tab-btn.active svg { color: var(--accent, #e50914); }
.tab-btn:active svg { transform: scale(0.86); }