/* =====================================================================
   UniMate Component — Bottom Navigation v1.0
   Native app-like bottom nav for mobile (Instagram/Telegram style)
   5 items: Home, Schedule, AI, Chats, Profile
   ===================================================================== */

/* ── Container ───────────────────────────────────────────────────────── */
.um-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  background: var(--um-glass-heavy);
  backdrop-filter: var(--um-glass-blur);
  -webkit-backdrop-filter: var(--um-glass-blur);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform var(--um-duration-slow) var(--um-ease-smooth);
}

.um-bottom-nav.is-hidden {
  transform: translateY(100%);
}

@media (max-width: 640px) {
  .um-bottom-nav {
    display: flex;
  }
}

/* ── Nav Items Row ───────────────────────────────────────────────────── */
.um-bottom-nav__items {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: var(--um-mobile-nav-h, 62px);
  padding: 0 var(--um-space-2);
  margin: 0;
  list-style: none;
}

/* ── Single Item ─────────────────────────────────────────────────────── */
.um-bottom-nav__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.um-bottom-nav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: var(--um-text-muted);
  min-width: 44px;
  min-height: 44px;
  padding: var(--um-space-1) var(--um-space-2);
  border-radius: var(--um-radius-lg);
  position: relative;
  transition:
    color var(--um-duration-fast) var(--um-ease-default),
    background var(--um-duration-fast) var(--um-ease-default);
  -webkit-tap-highlight-color: transparent;
}

.um-bottom-nav__link:active {
  transform: scale(0.92);
  transition: transform 50ms;
}

/* ── Icon ─────────────────────────────────────────────────────────────── */
.um-bottom-nav__icon {
  position: relative;
  font-size: 20px;
  line-height: 1;
  transition: transform var(--um-duration-normal) var(--um-ease-spring);
}

/* ── Label ────────────────────────────────────────────────────────────── */
.um-bottom-nav__label {
  font-size: 10px;
  font-weight: var(--um-weight-semibold);
  letter-spacing: var(--um-tracking-wide);
  line-height: 1;
  white-space: nowrap;
}

/* ── Active State ────────────────────────────────────────────────────── */
.um-bottom-nav__link.is-active {
  color: var(--um-primary);
}

.um-bottom-nav__link.is-active .um-bottom-nav__icon {
  transform: translateY(-1px);
}

/* Active indicator pill */
.um-bottom-nav__link.is-active::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: var(--um-radius-full);
  background: var(--um-primary);
  animation: um-fade-in var(--um-duration-normal) var(--um-ease-spring);
}

/* ── Unread Badge ────────────────────────────────────────────────────── */
.um-bottom-nav__badge {
  position: absolute;
  top: -2px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--um-radius-full);
  background: var(--um-danger);
  color: #fff;
  font-size: 9px;
  font-weight: var(--um-weight-extrabold);
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
  animation: um-scale-bounce var(--um-duration-slow) var(--um-ease-spring);
}

.um-bottom-nav__badge:empty {
  width: 8px;
  height: 8px;
  min-width: unset;
  padding: 0;
  top: 0;
  right: -2px;
}

/* ── AI Center Button (special) ──────────────────────────────────────── */
.um-bottom-nav__link--ai .um-bottom-nav__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--um-radius-xl);
  background: var(--um-gradient-brand);
  color: #ffffff;
  font-size: 18px;
  box-shadow: var(--um-shadow-primary);
  margin-top: -8px;
  transition:
    transform var(--um-duration-normal) var(--um-ease-spring),
    box-shadow var(--um-duration-normal) var(--um-ease-default);
}

.um-bottom-nav__link--ai:active .um-bottom-nav__icon {
  transform: scale(0.9);
}

.um-bottom-nav__link--ai.is-active .um-bottom-nav__icon {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), var(--um-shadow-primary);
}

/* ── Dark Theme ──────────────────────────────────────────────────────── */
.theme-dark .um-bottom-nav {
  background: var(--um-glass-heavy);
  border-top-color: var(--um-border);
}

.theme-dark .um-bottom-nav__link {
  color: var(--um-text-muted);
}

.theme-dark .um-bottom-nav__link.is-active {
  color: var(--um-primary);
}

/* ── Keyboard-open: hide nav ─────────────────────────────────────────── */
@media (max-height: 500px) and (max-width: 640px) {
  .um-bottom-nav {
    display: none !important;
  }
}

/* ── Haptic feedback indicator (visual) ──────────────────────────────── */
@keyframes um-nav-tap-ripple {
  0%   { transform: scale(0); opacity: 0.3; }
  100% { transform: scale(2.5); opacity: 0; }
}

.um-bottom-nav__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, var(--um-primary) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.um-bottom-nav__link:active::after {
  animation: um-nav-tap-ripple var(--um-duration-slow) var(--um-ease-out) forwards;
}