/* Afodabo v9 — templates 10 za menyu ya chini (Admin → Menyu & Mpangilio).
   "classic" = ule uliokuwepo (v5.css). (+) ya kijani inabaki katikati katika templates zote.
   Templates za ukingoni (edge, notch, line) zinawasha html.nav-fixed (tazama v5.css). */
@media (max-width: 767px) {
  /* Majina chini ya icons yamezimwa */
  body.app .bottom-nav.v5.bn-nolabel .lb { display: none; }
  body.app .bottom-nav.v5.bn-nolabel a.bn-item { justify-content: center; }

  /* ---------- 3. Glass ---------- */
  body.app .bottom-nav.v4.v5.bn-t-glass {
    background: color-mix(in srgb, var(--surface-strong, #fff) 52%, transparent);
    -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
    border: 1px solid color-mix(in srgb, #fff 55%, transparent); border-radius: 28px;
    box-shadow: 0 14px 38px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .6);
  }
  html[data-mode="dark"] body.app .bottom-nav.v4.v5.bn-t-glass { border-color: rgba(255, 255, 255, .12); box-shadow: 0 14px 38px rgba(0, 0, 0, .5); }
  body.app .bottom-nav.v4.v5.bn-t-glass a.bn-create { box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 45%, transparent), 0 0 0 5px color-mix(in srgb, #fff 70%, transparent); }

  /* ---------- 4. Dark ---------- */
  body.app .bottom-nav.v4.v5.bn-t-dark { --bn-cut: #0f1713; background: #0f1713; border-color: #1f2c24; box-shadow: 0 12px 32px rgba(0, 0, 0, .38); }
  body.app .bottom-nav.v4.v5.bn-t-dark a.bn-item { color: rgba(255, 255, 255, .6); }
  body.app .bottom-nav.v4.v5.bn-t-dark a.bn-item.active { color: #fff; }
  body.app .bottom-nav.v4.v5.bn-t-dark a.bn-item.active .lb { color: var(--accent); }
  body.app .bottom-nav.v4.v5.bn-t-dark a.bn-create { box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 0 5px #0f1713; }
  body.app .bottom-nav.v4.v5.bn-t-dark .bn-badge { border-color: #0f1713; }

  /* ---------- 5. Minimal ---------- */
  body.app .bottom-nav.v4.v5.bn-t-minimal { height: 56px; border-radius: 20px; padding-bottom: 3px; }
  body.app .bottom-nav.v4.v5.bn-t-minimal .lb { display: none; }
  body.app .bottom-nav.v4.v5.bn-t-minimal a.bn-item { height: 50px; justify-content: center; }
  body.app .bottom-nav.v4.v5.bn-t-minimal a.bn-item.active .ic::after {
    content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor;
  }
  body.app .bottom-nav.v4.v5.bn-t-minimal a.bn-create,
  body.app .bottom-nav.v4.v5.bn-t-minimal a.bn-create:active { width: 50px; height: 50px; border-radius: 50%; transform: translateY(-9px); font-size: 1.35rem; }

  /* ---------- 6. Bubble ---------- */
  body.app .bottom-nav.v4.v5.bn-t-bubble { align-items: center; padding-bottom: 0; }
  body.app .bottom-nav.v4.v5.bn-t-bubble .bn-side { align-items: center; gap: 2px; }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-item { flex: 1 1 0; flex-direction: row; gap: 5px; height: 42px; border-radius: 999px; transition: flex-grow .3s, background .3s, color .2s; }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-item .lb { display: none; }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-item.active { flex-grow: 2.2; background: var(--primary-soft); color: var(--primary); }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-item.active .lb { display: block; font-size: .72rem; }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-item .ic { width: 26px; }
  body.app .bottom-nav.v4.v5.bn-t-bubble a.bn-create { align-self: center; margin-bottom: 0; transform: translateY(-14px); }

  /* ---------- 7. Notch (ukingoni, mkato kuzunguka +) ---------- */
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-notch { --bn-notch: var(--surface-strong, #fff); background: transparent; border-top: 0; box-shadow: none; overflow: visible; }
  html.nav-fixed[data-mode="dark"] body.app .bottom-nav.v4.v5.bn-t-notch { --bn-notch: #0d1611; }
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-notch::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 50% -4px, transparent 38px, var(--bn-notch) 39px);
    filter: drop-shadow(0 -2px 6px rgba(15, 23, 42, .1));
  }
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-notch a.bn-create,
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-notch a.bn-create:active { width: 58px; height: 58px; border-radius: 50%; margin: 0 14px; transform: translateY(-27px); box-shadow: 0 10px 22px color-mix(in srgb, var(--primary) 45%, transparent); }
  html.nav-fixed body.reels-page .bottom-nav.v4.v5.bn-t-notch { --bn-notch: #000; }

  /* ---------- 8. Msitu (kijani kizito) ---------- */
  body.app .bottom-nav.v4.v5.bn-t-forest { --bn-cut: #16402a; background: linear-gradient(135deg, #10321d, #1d5230); border-color: rgba(255, 255, 255, .08); box-shadow: 0 12px 30px rgba(16, 50, 29, .4); }
  body.app .bottom-nav.v4.v5.bn-t-forest a.bn-item { color: rgba(255, 255, 255, .68); }
  body.app .bottom-nav.v4.v5.bn-t-forest a.bn-item.active { color: #fff; }
  body.app .bottom-nav.v4.v5.bn-t-forest a.bn-item.active .ic { background: rgba(255, 255, 255, .12); border-radius: 12px; }
  body.app .bottom-nav.v4.v5.bn-t-forest a.bn-create { background: linear-gradient(135deg, var(--accent), var(--primary)); box-shadow: 0 8px 22px rgba(0, 0, 0, .3), 0 0 0 5px #16402a; }
  body.app .bottom-nav.v4.v5.bn-t-forest .bn-badge { border-color: #16402a; }

  /* ---------- 9. Dock ---------- */
  body.app .bottom-nav.v4.v5.bn-t-dock { left: 14px; right: 14px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 68px; border-radius: 26px; padding: 0 8px 7px; }
  body.app .bottom-nav.v4.v5.bn-t-dock .lb { display: none; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item { height: 54px; justify-content: center; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item .ic { width: 48px; height: 42px; border-radius: 16px; transition: background .25s, transform .2s; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item .ic > svg { width: 28px; height: 28px; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item .ic > i { font-size: 1.55rem; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item.active .ic { background: var(--primary-soft); }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-item .avatar { --size: 30px; }
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-create,
  body.app .bottom-nav.v4.v5.bn-t-dock a.bn-create:active { width: 60px; height: 60px; border-radius: 22px; transform: translateY(-14px); }
  body.app:has(.bn-t-dock) .content-wrap { padding-bottom: 104px; }

  /* ---------- 10. Mstari (ukingoni, mstari juu ya kilichochaguliwa) ---------- */
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-line a.bn-item { position: relative; }
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-line a.bn-item.active::before {
    content: ""; position: absolute; top: -2px; left: 24%; right: 24%; height: 3px; border-radius: 0 0 4px 4px; background: var(--primary);
    animation: bnLine .3s ease-out;
  }
  html.nav-fixed body.app .bottom-nav.v4.v5.bn-t-line a.bn-item.active .lb { font-weight: 800; }
  @keyframes bnLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* Ukurasa wa Reels: menyu inabaki nyeusi kwa templates zote zinazoelea */
  body.reels-page .bottom-nav.v4.v5.bn-t-glass, body.reels-page .bottom-nav.v4.v5.bn-t-minimal,
  body.reels-page .bottom-nav.v4.v5.bn-t-bubble, body.reels-page .bottom-nav.v4.v5.bn-t-dock {
    background: rgba(10, 10, 10, .62); border-color: rgba(255, 255, 255, .12); box-shadow: none;
  }
  body.reels-page .bottom-nav.v4.v5.bn-t-bubble a.bn-item.active { background: rgba(255, 255, 255, .16); color: #fff; }
  body.reels-page .bottom-nav.v4.v5.bn-t-dock a.bn-item.active .ic { background: rgba(255, 255, 255, .16); }
}