/**
 * Phase 3.2A — Plain white glass bottom navigation.
 * Inner track + sliding capsule; clean white bar, no inner borders.
 */

:root {
  /*
   * EDIT HERE:
   * --neavo-bottom-nav-width controls the full bottom nav width.
   * --neavo-bottom-nav-capsule-width controls the selected tab capsule width.
   * Increase/decrease these values manually to tune the design.
   */

  /* NEAVO BOTTOM NAV MANUAL CONTROLS */
  --neavo-bottom-nav-width: 88vw;
  --neavo-bottom-nav-max-width: 680px;
  --neavo-bottom-nav-height: 58px;

  /* Active selected tab capsule width (+4px for Settings label readability at edge) */
  --neavo-bottom-nav-capsule-width: 80px;
  --neavo-bottom-nav-capsule-height: 52px;

  /*
   * EDIT HERE — NEAVO BOTTOM NAV COLOR PICKER CONTROLS
   *
   * Click the color square beside these HEX values in Cursor/VS Code to choose colors visually.
   *
   * --neavo-bottom-nav-color controls the full bottom nav bar color.
   * --neavo-bottom-nav-opacity controls the nav transparency.
   *
   * --neavo-bottom-nav-capsule-color controls the selected tab capsule color.
   * --neavo-bottom-nav-capsule-opacity controls the selected tab capsule transparency.
   */
  --neavo-bottom-nav-color: #000000;
  --neavo-bottom-nav-opacity: 0.2;
  --neavo-bottom-nav-capsule-color: #777777;
  --neavo-bottom-nav-capsule-opacity: 0.2;

 /* Derived layout (do not edit unless needed) */
  --nav-pill-w: min(var(--neavo-bottom-nav-width), var(--neavo-bottom-nav-max-width));
  --nav-pill-h: var(--neavo-bottom-nav-height);
  --nav-pill-r: calc(var(--nav-pill-h) / 2);
  --nav-inner-pad-x: 0px;
  --nav-capsule-edge-gap: 3px;
  --nav-capsule-w: var(--neavo-bottom-nav-capsule-width);
  --nav-capsule-h: var(--neavo-bottom-nav-capsule-height);
  --nav-capsule-r: calc(var(--nav-capsule-h) / 2);
  --nav-ic-active: 28px;
  --nav-ic-inactive: 26px;
  --nav-label-size: 11px;
  --nav-ic-label-gap: 3px;

  /* Tiny per-icon optical balance (Phosphor) — keep within 0.96–1.04 */
  --icon-scale-profile: 1;
  --icon-scale-nearby: 0.98;
  --icon-scale-map: 1;
  --icon-scale-chats: 1;
  --icon-scale-settings: 0.96;

  /* Phosphor Icons (regular weight) — fill via currentColor; uniform icon box sizing */
  /* Colors — wired to HEX color picker controls above */
  --nav-bg: color-mix(
    in srgb,
    var(--neavo-bottom-nav-color) calc(var(--neavo-bottom-nav-opacity) * 100%),
    transparent
  );
  --nav-border: rgb(56, 56, 56);
  --nav-capsule-bg: color-mix(
    in srgb,
    var(--neavo-bottom-nav-capsule-color) calc(var(--neavo-bottom-nav-capsule-opacity) * 100%),
    transparent
  );
  --nav-capsule-border: rgba(78, 78, 78, 0.95);

  /* Bottom nav icon + label colors (inactive and active) */
  --neavo-bottom-nav-icon-color: #ffffff;
  --neavo-bottom-nav-label-color: #ffffff;
  --neavo-bottom-nav-active-icon-color: #ffffff;
  --neavo-bottom-nav-active-label-color: #ffffff;
  --nav-inactive: var(--neavo-bottom-nav-icon-color);
  --nav-inactive-label: var(--neavo-bottom-nav-label-color);
  --nav-active: var(--neavo-bottom-nav-active-icon-color);

  /* Layout stack (map controls clearance) — edge-gap lifts nav from screen bottom */
  --neavo-bottom-nav-edge-gap: 14px;
  --neavo-bottom-nav-stack-gap: 15px;
  --neavo-bottom-hint-offset: 0px;
  --neavo-bottom-nav-footprint: calc(
    env(safe-area-inset-bottom, 0px) + var(--neavo-bottom-nav-edge-gap) + var(--neavo-bottom-nav-height)
  );
  --neavo-bottom-nav-total: calc(
    var(--neavo-bottom-hint-offset) + var(--neavo-bottom-nav-footprint)
  );
  --neavo-map-controls-bottom: calc(
    var(--neavo-bottom-nav-total) + var(--neavo-bottom-nav-stack-gap)
  );
}

html.neavo-bottom-nav-suppressed {
  --neavo-bottom-nav-footprint: 0px;
}

.map-control-stack {
  bottom: max(var(--neavo-map-controls-bottom), 14px);
  transition: bottom 0.22s ease;
}

.map-attrib-wrap {
  bottom: max(var(--neavo-map-controls-bottom), 14px);
  transition: bottom 0.22s ease;
}

.nearby-scroll-inner {
  padding-bottom: max(16px, calc(var(--neavo-bottom-nav-total) + 14px));
}

.toast {
  bottom: calc(var(--neavo-bottom-nav-total) + 10px);
}

#profileOverlay.neavo-bottom-sheet {
  padding-bottom: max(96px, calc(var(--neavo-bottom-nav-total) + 28px));
}

/* ----- Shell ----- */
.neavo-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--neavo-bottom-hint-offset);
  z-index: 4800;
  pointer-events: none;
  padding:
    0 max(12px, env(safe-area-inset-right, 0px))
    max(var(--neavo-bottom-nav-edge-gap), env(safe-area-inset-bottom, 0px))
    max(12px, env(safe-area-inset-left, 0px));
  box-sizing: border-box;
  transition: bottom 0.22s ease;
}

.neavo-bottom-nav.neavo-bottom-nav--overlay-hidden {
  display: none !important;
}

.neavo-bottom-nav__pill {
  position: relative;
  pointer-events: auto;
  margin: 0 auto;
  width: var(--neavo-bottom-nav-width);
  max-width: min(var(--neavo-bottom-nav-max-width), 100%);
  height: var(--neavo-bottom-nav-height);
  border-radius: var(--nav-pill-r);
  overflow: visible;
  background: var(--nav-bg);
  border: 0.5px solid var(--nav-border);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Inner tab track — indicator + tabs share one coordinate space */
.neavo-bottom-nav__track {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

/* ----- Single active indicator (fixed size, slides on track) ----- */
.neavo-bottom-nav__active-indicator {
  position: absolute;
  top: 50%;
  left: var(--nav-indicator-x, 50%);
  z-index: 0;
  width: var(--neavo-bottom-nav-capsule-width);
  height: var(--neavo-bottom-nav-capsule-height);
  border-radius: var(--nav-capsule-r);
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: var(--nav-capsule-bg);
  border: 0.5px solid var(--nav-capsule-border);
  box-shadow: none;
  opacity: 0;
  transition:
    left 0.28s cubic-bezier(0.32, 0.72, 0.24, 1),
    opacity 0.2s ease;
}

.neavo-bottom-nav__active-indicator.is-visible {
  opacity: 1;
}

/* ----- Tabs layer ----- */
.neavo-bottom-nav__tabs {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 var(--nav-capsule-edge-gap);
  box-sizing: border-box;
}

.neavo-bottom-nav__tab {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--nav-inactive);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nav-ic-label-gap);
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  transition: color 0.18s ease;
}

/* Edge tabs match capsule width so icon/label center = capsule center */
.neavo-bottom-nav__tab[data-neavo-nav="profile"],
.neavo-bottom-nav__tab[data-neavo-nav="settings"] {
  flex: 0 0 var(--neavo-bottom-nav-capsule-width);
  width: var(--neavo-bottom-nav-capsule-width);
  min-width: var(--neavo-bottom-nav-capsule-width);
}

.neavo-bottom-nav__tab:active {
  transform: scale(0.97);
}

.neavo-bottom-nav__ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--nav-ic-inactive);
  height: var(--nav-ic-inactive);
  line-height: 0;
  flex-shrink: 0;
  overflow: visible;
  color: inherit;
}

.neavo-bottom-nav__ic svg {
  width: var(--nav-ic-inactive);
  height: var(--nav-ic-inactive);
  display: block;
  overflow: visible;
  transform-origin: center center;
}

.neavo-bottom-nav__tab[data-neavo-nav="profile"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-profile));
}

.neavo-bottom-nav__tab[data-neavo-nav="nearby"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-nearby));
}

.neavo-bottom-nav__tab[data-neavo-nav="map"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-map));
}

.neavo-bottom-nav__tab[data-neavo-nav="chats"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-chats));
}

.neavo-bottom-nav__tab[data-neavo-nav="settings"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-settings));
}

/* ----- Phosphor icon rendering (fill-based, uniform sizing) ----- */
.neavo-bottom-nav svg,
.neavo-bottom-nav svg path {
  fill: currentColor;
  stroke: none;
}

.neavo-bottom-nav__tab.is-active .neavo-bottom-nav__ic {
  width: var(--nav-ic-active);
  height: var(--nav-ic-active);
}

.neavo-bottom-nav__tab.is-active .neavo-bottom-nav__ic svg {
  width: var(--nav-ic-active);
  height: var(--nav-ic-active);
}

.neavo-bottom-nav__tab.is-active[data-neavo-nav="profile"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-profile));
}

.neavo-bottom-nav__tab.is-active[data-neavo-nav="nearby"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-nearby));
}

.neavo-bottom-nav__tab.is-active[data-neavo-nav="map"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-map));
}

.neavo-bottom-nav__tab.is-active[data-neavo-nav="chats"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-chats));
}

.neavo-bottom-nav__tab.is-active[data-neavo-nav="settings"] .neavo-bottom-nav__ic svg {
  transform: scale(var(--icon-scale-settings));
}

.neavo-bottom-nav__label {
  font-size: var(--nav-label-size);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nav-inactive-label);
  text-align: center;
  padding: 0 2px;
  box-sizing: border-box;
}

.neavo-bottom-nav__tab.is-active {
  color: var(--neavo-bottom-nav-active-icon-color);
}

.neavo-bottom-nav__tab.is-active .neavo-bottom-nav__label {
  color: var(--neavo-bottom-nav-active-label-color);
}

.neavo-bottom-nav__tab:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 2px;
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .neavo-bottom-nav__active-indicator {
    transition: opacity 0.2s ease;
  }
  .neavo-bottom-nav__tab {
    transition: none;
  }
}