/* Extra styling for the mobile bottom bar (base .uf-tabbar styles already live in app.css) */
@media (max-width: 800px) {
  .uf-tabbar { box-shadow: 0 -8px 24px rgba(0,0,0,.28); }
  .uf-tabbar button { -webkit-tap-highlight-color: transparent; }
  .uf-tabbar button .lb { font-size: .68rem; font-weight: 600; letter-spacing: .01em; }
  .uf-tabbar button.active { background: none; }
  .uf-tabbar button.active .ic { color: var(--gold); }
  .uf-tabbar button.active .lb { color: var(--gold); }

  /* center "Signals" button: raised gold circle */
  .uf-tabbar button.uf-center .ic {
    width: 46px; height: 46px; margin-top: -20px; border-radius: 50%;
    background: var(--gold-grad, linear-gradient(135deg,#e8cf9a,#b8893a));
    color: var(--on-accent, #0a0804);
    border: 3px solid var(--nav-solid, #0a0804);
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
  }
  .uf-tabbar button.uf-center.active .ic { color: var(--on-accent, #0a0804); box-shadow: 0 0 0 2px var(--gold), 0 6px 16px rgba(0,0,0,.35); }
  .uf-tabbar button.uf-center .lb { margin-top: -5px; }

  /* hide while the top menu is open or the keyboard is up */
  body.menu-open .uf-tabbar, body.uf-kb .uf-tabbar { display: none; }
  body.uf-kb.uf-has-tabbar { padding-bottom: 0; }

  /* lift other fixed elements so they do not sit under the bar */
  body.uf-has-tabbar #fx-top { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.uf-has-tabbar .goldai-install { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.uf-has-tabbar .v15-notice { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
  body.uf-has-tabbar .ai-run { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}