/* 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-dropdown);
  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;
}
.app-bottom-nav .app-nav-item i { font-size: 1.1rem; }
.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: 1rem; }
.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-dropdown);
  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; }
}

@media (max-width: 899px) {
  .template-feature-nav-page .app-bottom-nav--overlay,
  .workspace-page .app-bottom-nav--overlay {
    bottom: clamp(-18px, calc(12px - env(safe-area-inset-bottom, 0px)), 0px);
  }
}

/* ── Overlay mode (within-page nav views) ────────────────── */
.app-bottom-nav--overlay {
  bottom: 0;
  transform: translateY(110%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: calc(var(--z-dropdown) + 10);
  box-shadow: 0 -12px 24px rgba(15, 23, 42, 0.12);
  /* Opens over feature-specific navs in the same bottom bar area. */
}
.app-bottom-nav--overlay.open {
  transform: translateY(0);
}

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

/* Hide everything nav-related on desktop */
@media (min-width: 900px) {
  .app-bottom-nav,
  .app-bottom-nav--overlay,
  .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-bottom-nav--overlay,
  body.kb-focus .feature-bottom-nav,
  body.kb-focus .app-nav-trigger { display: none !important; }
}