/* nav.css — shared bottom tab bar across all three PWA shells (Session 2 /
   Build 79). One component, referenced by /, /sprint, and /my-world — never
   copy-pasted per shell (Session 2 Task 2). Visual language from
   Jarvis_Sarah_Dashboard_Mockup.html; these tokens are the candidate global
   palette for the full-UI restyle Ryan flagged (tracked in _IDEAS/_STATUS). */
:root {
  --jn-surface: #FFFFFF;
  --jn-border: #E2DFD4;
  --jn-muted: #9B9A91;
  --jn-accent: #185FA5;
  --jn-h: 54px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --jn-surface: #1F1F1F;
    --jn-border: #333333;
    --jn-muted: #8A8A85;
    --jn-accent: #60A5FA;
  }
}

.jarvis-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--jn-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--jn-surface);
  border-top: 1px solid var(--jn-border);
  z-index: 900;
}
.jarvis-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--jn-muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.jarvis-nav a.active {
  color: var(--jn-accent);
  border-top: 2px solid var(--jn-accent);
  margin-top: -1px;
  font-weight: 500;
}
.jarvis-nav .jn-label { font-size: 11px; }
.jarvis-nav svg { width: 20px; height: 20px; }

/* Each shell's own layout is shrunk above the bar rather than restyled:
   chat's #app is position:fixed inset:0 — lift its bottom edge; sprint's
   #app is a 100dvh column — subtract the bar. */
body.has-jarvis-nav.shell-chat #app { bottom: calc(var(--jn-h) + env(safe-area-inset-bottom)); }
/* The mobile chat sidebar is position:fixed to the viewport (not inside #app),
   so lift its bottom edge too or the tab bar covers its footer (Sign out). */
@media (max-width: 767px) {
  /* height:auto is REQUIRED — app.css sets .sidebar{height:100%}, and with
     position:fixed an explicit height beats the bottom anchor (Build 81's
     fix was inert without this; the footer stayed under the tab bar). */
  body.has-jarvis-nav.shell-chat .sidebar {
    height: auto;
    bottom: calc(var(--jn-h) + env(safe-area-inset-bottom));
  }
}
body.has-jarvis-nav.shell-sprint #app { height: calc(100dvh - var(--jn-h) - env(safe-area-inset-bottom)); }
body.has-jarvis-nav.shell-world .mw-scroll { padding-bottom: calc(var(--jn-h) + env(safe-area-inset-bottom) + 12px); }