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

/* EXPERIMENT: interactive dock — smooth active-zone glow position */
@property --neavo-bottom-nav-active-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

:root {
  /* =========================================================
     NEAVO BOTTOM NAV MANUAL DESIGN CONTROLS
     تحكم يدوي كامل بتصميم الشريط السفلي
     =========================================================
     دليل التعديل (بدون تغيير سلوك JS):
     - لجعل الشريط أطول/أقصر: غيّر --neavo-bottom-nav-height.
     - لزيادة تدوير الزوايا: بما أنّ نصف القطر مشتق من الارتفاع، غيّر الارتفاع.
     - لزيادة “زجاجية” الخلفية: غيّر --neavo-bottom-nav-backdrop-blur و/أو saturate.
     - لتغميق الشريط: قلّل RGB أو ارفع --neavo-bottom-nav-opacity (بدون opacity عام حتى لا تتأثر الأيقونات/النص).
     - لتحسين وضوح الزر النشط: ارفع --neavo-bottom-nav-capsule-opacity و/أو لون كبسولة الزر النشط.
  */
  /*
   * 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; /* ارتفاع الشريط السفلي */

  /* ارتفاع/عرض + الطبقة (مادة بصريّة بدون تغيير تخطيطي) */
  --neavo-bottom-nav-z-index: 4800; /* ز-index للشريط السفلي */
  --neavo-bottom-nav-padding-side-min: 12px; /* حد أدنى للهوامش الجانبية */
  --neavo-bottom-nav-tabs-edge-gap: 3px; /* مسافة الحواف داخل مسار الأزرار */
  --neavo-bottom-nav-radius: calc(var(--neavo-bottom-nav-height) / 2); /* تدوير زوايا الشريط (مشتق من الارتفاع) */
  --neavo-bottom-nav-bottom-offset: var(--neavo-bottom-hint-offset); /* إزاحة الشريط للأسفل (يظل التحكم نفسه، فقط اسم أوضح) */

  /* EXPERIMENT: Neavo Liquid Metal Glass Bottom Nav — bar gradient (RGB + shared opacity) */
  --neavo-bottom-nav-bg-top-rgb: 82, 86, 98; /* لون أعلى الشريط — metallic charcoal (lifted) */
  --neavo-bottom-nav-bg-mid-rgb: 22, 25, 34; /* لون منتصف الشريط — graphite */
  --neavo-bottom-nav-bg-bottom-rgb: 3, 4, 8; /* لون أسفل الشريط — deep black */

  --neavo-bottom-nav-border-width: 0.5px; /* سماكة حد الشريط */
  --neavo-bottom-nav-border-rgb: 220, 226, 238; /* لون حد الشريط السفلي (RGB) — platinum */
  --neavo-bottom-nav-border-alpha: 0.14; /* شفافية حد الشريط السفلي */
  --neavo-bottom-nav-border-color: rgba(var(--neavo-bottom-nav-border-rgb), var(--neavo-bottom-nav-border-alpha)); /* لون حد الشريط النهائي */

  --neavo-bottom-nav-shadow-color-rgb: 0, 0, 0; /* لون ظل الشريط (RGB) */
  --neavo-bottom-nav-shadow-opacity: 0.42; /* شفافية ظل الشريط */
  --neavo-bottom-nav-shadow-y: 18px; /* إزاحة الظل العمودية */
  --neavo-bottom-nav-shadow-blur: 45px; /* قوة تمويه الظل */
  --neavo-bottom-nav-pill-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.24); /* highlight علوي */
  --neavo-bottom-nav-active-x: 50%; /* موضع وهج المنطقة النشطة (يُحدَّث من JS) */
  --neavo-bottom-nav-active-glow-inner: rgba(160, 180, 215, 0.22);
  --neavo-bottom-nav-active-glow-mid: rgba(120, 145, 185, 0.1);
  --neavo-bottom-nav-pill-shadow-inset-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.35); /* ظل سفلي داخلي */
  --neavo-bottom-nav-shadow:
    0 var(--neavo-bottom-nav-shadow-y) var(--neavo-bottom-nav-shadow-blur)
      rgba(var(--neavo-bottom-nav-shadow-color-rgb), var(--neavo-bottom-nav-shadow-opacity)),
    var(--neavo-bottom-nav-pill-shadow-inset-top),
    var(--neavo-bottom-nav-pill-shadow-inset-bottom); /* ظل الشريط السفلي */
  --neavo-bottom-nav-backdrop-blur: 18px; /* قوة التغبيش الخلفي */
  --neavo-bottom-nav-backdrop-saturate: 145%; /* تشبع الخلفية وراء الزجاج */

  /* خلفية حالة غير نشطة داخل عنصر التبويب */
  --neavo-bottom-nav-inactive-bg-rgb: 0, 0, 0; /* لون خلفية الزر غير النشط (RGB) */
  --neavo-bottom-nav-inactive-bg-alpha: 0; /* شفافية خلفية الزر غير النشط */
  --neavo-bottom-nav-inactive-bg: rgba(var(--neavo-bottom-nav-inactive-bg-rgb), var(--neavo-bottom-nav-inactive-bg-alpha)); /* خلفية غير نشطة */
  --neavo-bottom-nav-item-padding-x: 0px; /* حشو أفقي للزر */
  --neavo-bottom-nav-item-padding-y: 0px; /* حشو عمودي للزر */

  /* مقاسات عناصر التبويب (أيقونة/تسمية) */
  --neavo-bottom-nav-icon-size-active: 28px; /* حجم أيقونة الزر النشط */
  --neavo-bottom-nav-icon-size-inactive: 26px; /* حجم أيقونة الزر غير النشط */
  --neavo-bottom-nav-icon-label-gap: 3px; /* المسافة بين الأيقونة والملصق */
  --neavo-bottom-nav-label-size: 11px; /* حجم نص الملصق */
  --neavo-bottom-nav-label-weight: 400; /* وزن خط الملصق */

  /* كبسولة الحالة النشطة (غطاء مؤشر الحركة) */
  --neavo-bottom-nav-active-border-width: 0.5px; /* سماكة حد الزر النشط */
  --neavo-bottom-nav-active-border-rgb: 170, 170, 170; /* لون حد الزر النشط (RGB) */
  --neavo-bottom-nav-active-border-alpha: 0.24; /* شفافية حد الزر النشط */
  --neavo-bottom-nav-active-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22); /* ظل/وهج إضافي للزر النشط */
  --neavo-bottom-nav-active-icon-glow: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08)); /* وهج أيقونة نشطة (خفيف) */

  /* Active selected tab capsule width (+4px for Settings label readability at edge) */
  --neavo-bottom-nav-capsule-width: 80px; /* عرض كبسولة الزر النشط */
  --neavo-bottom-nav-capsule-height: 52px; /* ارتفاع كبسولة الزر النشط */

  --neavo-bottom-nav-item-radius: calc(var(--neavo-bottom-nav-capsule-height) / 2); /* تدوير كبسولة الزر النشط */
  --neavo-bottom-nav-active-bg: var(--nav-capsule-bg); /* خلفية كبسولة الزر النشط */
  --neavo-bottom-nav-active-border-color: rgba(var(--neavo-bottom-nav-active-border-rgb), var(--neavo-bottom-nav-active-border-alpha)); /* لون حد كبسولة الزر النشط */

  /*
   * 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.42; /* شفافية الشريط السفلي */
  --neavo-bottom-nav-capsule-color: #9aa8bc; /* لون كبسولة الزر النشط — platinum-blue */
  --neavo-bottom-nav-capsule-opacity: 0.38; /* شفافية كبسولة الزر النشط */

 /* 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: var(--neavo-bottom-nav-tabs-edge-gap);
  --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: var(--neavo-bottom-nav-icon-size-active);
  --nav-ic-inactive: var(--neavo-bottom-nav-icon-size-inactive);
  --nav-label-size: var(--neavo-bottom-nav-label-size);
  --nav-ic-label-gap: var(--neavo-bottom-nav-icon-label-gap);

  /* 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: var(--neavo-bottom-nav-border-color);
  --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; /* إزاحة إضافية سفلية (يظل 0 افتراضياً) */
  --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-nav-bottom-offset);
  z-index: var(--neavo-bottom-nav-z-index);
  pointer-events: none;
  padding:
    0 max(var(--neavo-bottom-nav-padding-side-min), env(safe-area-inset-right, 0px))
    max(var(--neavo-bottom-nav-edge-gap), env(safe-area-inset-bottom, 0px))
    max(var(--neavo-bottom-nav-padding-side-min), 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(--neavo-bottom-nav-radius);
  overflow: visible;
  /* EXPERIMENT: Neavo Liquid Metal Glass Bottom Nav — layered metallic gradient */
  background: linear-gradient(
    180deg,
    rgba(var(--neavo-bottom-nav-bg-top-rgb), var(--neavo-bottom-nav-opacity)) 0%,
    rgba(var(--neavo-bottom-nav-bg-mid-rgb), var(--neavo-bottom-nav-opacity)) 42%,
    rgba(var(--neavo-bottom-nav-bg-bottom-rgb), var(--neavo-bottom-nav-opacity)) 100%
  );
  border: none;
  backdrop-filter: blur(var(--neavo-bottom-nav-backdrop-blur)) saturate(var(--neavo-bottom-nav-backdrop-saturate));
  -webkit-backdrop-filter: blur(var(--neavo-bottom-nav-backdrop-blur)) saturate(var(--neavo-bottom-nav-backdrop-saturate));
  box-shadow: var(--neavo-bottom-nav-shadow);
}

/* Smooth outer border layer for bottom nav capsule */
.neavo-bottom-nav__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--neavo-bottom-nav-border-width) solid var(--neavo-bottom-nav-border-color);
  box-sizing: border-box;
  pointer-events: none;
  z-index: 3;
}

/* EXPERIMENT: Neavo Interactive Liquid Metal Dock — active-zone radial glow */
.neavo-bottom-nav__pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle at var(--neavo-bottom-nav-active-x, 50%) 50%,
    var(--neavo-bottom-nav-active-glow-inner) 0%,
    var(--neavo-bottom-nav-active-glow-mid) 24%,
    transparent 48%
  );
  transition: --neavo-bottom-nav-active-x 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Inner tab track — indicator + tabs share one coordinate space */
.neavo-bottom-nav__track {
  position: relative;
  z-index: 2;
  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(--neavo-bottom-nav-item-radius);
  transform: translate(-50%, -50%) scaleX(1);
  transform-origin: center center;
  pointer-events: none;
  background: var(--neavo-bottom-nav-active-bg);
  border: var(--neavo-bottom-nav-active-border-width) solid var(--neavo-bottom-nav-active-border-color);
  box-shadow: var(--neavo-bottom-nav-active-shadow);
  opacity: 0;
  transition:
    left 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: left, transform;
}

.neavo-bottom-nav__active-indicator.is-morphing {
  transform: translate(-50%, -50%) scaleX(var(--nav-indicator-morph-scale, 1.1));
}

.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: var(--neavo-bottom-nav-inactive-bg);
  color: var(--nav-inactive);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nav-ic-label-gap);
  padding: var(--neavo-bottom-nav-item-padding-y) var(--neavo-bottom-nav-item-padding-x);
  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);
  filter: var(--neavo-bottom-nav-active-icon-glow);
}

.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(--neavo-bottom-nav-label-size);
  font-weight: var(--neavo-bottom-nav-label-weight);
  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__pill::after {
    transition: none;
  }
  .neavo-bottom-nav__active-indicator {
    transform: translate(-50%, -50%);
    transition: left 0.2s ease, opacity 0.2s ease;
    will-change: auto;
  }
  .neavo-bottom-nav__active-indicator.is-morphing {
    transform: translate(-50%, -50%);
  }
  .neavo-bottom-nav__tab {
    transition: none;
  }
}