/* mySERV.IS — App-level bottom navigation */

/* ── Standard nav (used by most views) ───────────────────── */
.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: var(--bottom-nav-h);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  display: none; /* shown only on mobile via media query below */
  align-items: stretch;
  z-index: var(--z-topbar);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: border-box;
}
@media (max-width: 899px) {
  .app-bottom-nav { display: flex; }
  body.has-standard-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Tab items ────────────────────────────────────────────── */
.app-bottom-nav .app-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 0;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: var(--fw-semibold);
  border-top: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
/* 1.1rem read as a smudge at arm's length next to a 44px chip in the drawer. */
.app-bottom-nav .app-nav-item i { font-size: 1.3rem; }
.app-bottom-nav .app-nav-item span { line-height: 1; }
.app-bottom-nav .app-nav-item.active {
  color: var(--primary-color);
  border-top-color: var(--primary-color);
}
.app-bottom-nav .app-nav-item:hover { color: var(--primary-color); text-decoration: none; }

/* ── Trigger button (leftmost slot in within-page navs) ───── */
.app-nav-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 7px 0 7px;
  min-width: 44px;
  background: none;
  border: none;
  border-right: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.6rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s;
}
.app-nav-trigger i { font-size: 1.25rem; }
.app-nav-trigger:hover { color: var(--primary-color); }

/* Shared within-page feature nav used by app templates. */
.feature-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(-18px, calc(12px - env(safe-area-inset-bottom, 0px)), 0px);
  z-index: var(--z-topbar);
  display: none;
  min-height: var(--bottom-nav-h);
  height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  box-sizing: border-box;
}
.feature-bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-top: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.62rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.feature-bottom-tab.active {
  color: var(--primary-color);
  border-top-color: var(--primary-color);
}
.feature-bottom-tab i,
.feature-bottom-nav .app-nav-trigger i {
  font-size: 1rem;
}
@media (max-width: 899px) {
  .feature-bottom-nav { display: flex; }
}

/* "More" slot when the trigger sits inside the quick-link bar (last child)
   rather than standalone inside a page's own feature nav. */
.app-bottom-nav .app-nav-trigger {
  border-right: 0;
  border-left: 1px solid var(--border);
  flex: 0 0 60px;
}

/* ── The drawer: the full menu, opened by any app-nav-trigger ─────────── */
.app-nav-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-topbar) + 10);
  display: none;
  flex-direction: column;
  /* dvh, not vh: plain vh doesn't shrink for the iOS keyboard/URL bar. */
  max-height: 78dvh;
  overflow-y: auto;
  background: var(--card-bg);
  border-top: 1px solid var(--border);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.18);
  padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 899px) {
  .app-nav-sheet { display: flex; }
}
.app-nav-sheet.open { transform: translateY(0); }

.app-nav-sheet-handle {
  flex: none;
  width: 36px;
  height: 4px;
  margin: 2px auto 6px;
  border-radius: 999px;
  background: var(--border);
}

/* ── Section accents ───────────────────────────────────────────────────────
   The drawer lists ~29 destinations. Rendered in one colour they read as a wall
   of identical grey tiles and you navigate by reading every label. Each section
   from config/navigation.js gets a hue instead, so the group is findable by
   colour and position before you read anything.

   The hue lands on the ICON and its chip, never behind the label — a translucent
   fill behind small text is the pairing that kept failing contrast in dark mode.
   Labels stay on the page ground at full --text strength. */
/* The section → colour mapping lives in tokens.css, keyed on data-nav-section, so
   it is not duplicated here and in sidebar.css. */

.app-nav-sheet-label {
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold, 700);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Fallback for a group with no section of its own — see the recent group below. */
  color: var(--muted);
  color: var(--nav-ink, var(--muted));
  margin: 14px 2px 8px;
}

/* "Jump back in": the dashboard's most-used shortcuts. Deliberately not given a
   section hue — its tiles come from different sections and each keeps its own, so a
   colour on the group would contradict them. Ruled off instead, and pulled to the
   top since it is the reason most people open the drawer. */
.app-nav-sheet-group--recent {
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* The neutral slate ink, which is the one grey here that is themed for BOTH grounds.
   --muted measured 4.02:1 in light and --primary-accent 2.76:1 in dark; this is
   8.7 / 9.2. A neutral label needs a token pair as much as a coloured one does. */
.app-nav-sheet-group--recent > .app-nav-sheet-label {
  color: var(--on-nav-account);
  margin-top: 4px;
}

/* Five across, not four. The sections hold 5/6/5/2/4/7 items, so a 4-column grid
   left an orphan trailing row on Main and Places and needed 485px of scrolling
   once the icons grew; five makes those two sections exactly one row each and
   cuts the scroll to 267px. Measured, not guessed. */
.app-nav-sheet-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
/* Below ~340px five columns squeeze the label past readability. */
@media (max-width: 339px) {
  .app-nav-sheet-grid { grid-template-columns: repeat(4, 1fr); }
}

.app-nav-sheet-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 2px 8px;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}

/* The chip. Against the previous 18px bare glyph this is the "icons too small"
   fix; the tile around it (66x87) is a comfortable tap target either way. */
.app-nav-sheet-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  color: var(--nav-ink);
  /* Fallback first: browsers without color-mix keep the neutral chip rather
     than losing the shape entirely. */
  background: var(--bg);
  background: color-mix(in srgb, var(--nav-accent) 14%, transparent);
  transition: background 0.15s, transform 0.1s;
}
.app-nav-sheet-item i { font-size: 1.3rem; }
.app-nav-sheet-item:hover { text-decoration: none; }
.app-nav-sheet-item:active .app-nav-sheet-icon { transform: scale(0.94); }

/* Active: a ring in the section hue plus a weight change. The chip fill is
   deliberately left at the same 14% as every other tile — a 30% wash darkened it
   enough that the ink, which is tuned for 14%, fell to 2.60:1 on the active tile
   only. The ring is an unambiguous signal and costs no contrast. */
.app-nav-sheet-item.active { font-weight: var(--fw-bold, 700); }
.app-nav-sheet-item.active .app-nav-sheet-icon {
  box-shadow: inset 0 0 0 2px var(--nav-accent);
}

/* Backdrop for the drawer */
.app-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  display: none;
  z-index: calc(var(--z-topbar) + 9);
  cursor: pointer;
}
.app-nav-backdrop.open { display: block; }

/* Hide everything nav-related on desktop */
@media (min-width: 900px) {
  .app-bottom-nav,
  .app-nav-sheet,
  .app-nav-backdrop,
  .app-nav-trigger { display: none !important; }
}

/* Hidden while a chat text input has focus (mobile keyboard open). Each page's own JS toggles
   body.kb-focus on that input's focus/blur — this is the one shared rule every chat surface
   uses instead of each reinventing its own "float the nav above the keyboard" hack. */
@media (max-width: 899px) {
  body.kb-focus .app-bottom-nav,
  body.kb-focus .app-nav-sheet,
  body.kb-focus .feature-bottom-nav,
  body.kb-focus .app-nav-trigger { display: none !important; }
}