/**
 * Hobbiz app navigation — dopamine / landing tokens
 * Scope: main app only (not auth). Load after layout inline <style>.
 */
body:not(:has(.auth-page)) {
  --nav-purple: #794ff8;
  --nav-purple-deep: #4f23c8;
  --nav-purple-ink: #1c0a47;
  --nav-purple-soft: #efe7ff;
  --nav-lime: #d8ff3a;
  --nav-pink: #ff7ec1;
  --nav-pink-deep: #ff4f9e;
  --nav-cream: #fbf7ee;
  --nav-ink: #160830;
  --nav-muted: #6a5f86;
  --nav-line: rgba(28, 10, 71, 0.12);
  --nav-shadow: 0 14px 36px -18px rgba(79, 35, 200, 0.28), 0 4px 12px -6px rgba(28, 10, 71, 0.12);
  --nav-shadow-brutal: 2px 2px 0 var(--nav-purple-ink);
  --nav-radius-pill: 999px;
  --nav-focus: 0 0 0 3px rgba(121, 79, 248, 0.35);
}

/* ----- Top bar (m/ .top-navbar + desktop #appHeader) ----- */
body:not(:has(.auth-page)) .top-navbar,
body:not(:has(.auth-page)) header#appHeader {
  background: rgba(251, 247, 238, 0.88) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-line) !important;
  box-shadow: var(--nav-shadow) !important;
}

body:not(:has(.auth-page)) .top-navbar .logo,
body:not(:has(.auth-page)) .logo-link {
  color: var(--nav-purple) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

body:not(:has(.auth-page)) .menu-button-with-badge,
body:not(:has(.auth-page)) #appSidebarToggle,
body:not(:has(.auth-page)) .notifications-bell-btn,
body:not(:has(.auth-page)) #notificationsBell,
body:not(:has(.auth-page)) .voice-control-btn,
body:not(:has(.auth-page)) #voiceControlBtn {
  border-radius: var(--nav-radius-pill) !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body:not(:has(.auth-page)) .menu-button-with-badge,
body:not(:has(.auth-page)) #appSidebarToggle {
  color: var(--nav-purple-ink) !important;
  border: 1px solid rgba(121, 79, 248, 0.22) !important;
  background: rgba(121, 79, 248, 0.08) !important;
}

body:not(:has(.auth-page)) .menu-button-with-badge:hover,
body:not(:has(.auth-page)) #appSidebarToggle:hover {
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
  transform: translateY(-1px);
}

body:not(:has(.auth-page)) .notifications-bell-btn,
body:not(:has(.auth-page)) #notificationsBell {
  border: 1px solid transparent !important;
}

body:not(:has(.auth-page)) .notifications-bell-btn:hover,
body:not(:has(.auth-page)) #notificationsBell:hover,
body:not(:has(.auth-page)) .voice-control-btn:hover,
body:not(:has(.auth-page)) #voiceControlBtn:hover {
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .voice-control-btn,
body:not(:has(.auth-page)) #voiceControlBtn {
  border: 2px solid rgba(121, 79, 248, 0.25) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .user-avatar,
body:not(:has(.auth-page)) header#appHeader a.rounded-full {
  border: 2px solid rgba(121, 79, 248, 0.2) !important;
  box-shadow: 0 4px 12px rgba(121, 79, 248, 0.15);
}

body:not(:has(.auth-page)) .user-avatar:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(121, 79, 248, 0.22);
}

/* ----- Bottom nav (mobile pill bar) ----- */
body:not(:has(.auth-page)) .bottom-nav {
  left: 10px !important;
  right: 10px !important;
  bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--nav-line) !important;
  border-top: 1px solid var(--nav-line) !important;
  border-radius: var(--nav-radius-pill) !important;
  box-shadow: var(--nav-shadow) !important;
  gap: 2px;
}

body:not(:has(.auth-page)) .bottom-nav .nav-link,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item {
  color: var(--nav-muted) !important;
  border-radius: 14px !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body:not(:has(.auth-page)) .bottom-nav .nav-link i,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item > i {
  color: inherit;
  transition: color 0.2s ease, transform 0.2s ease;
}

body:not(:has(.auth-page)) .bottom-nav .nav-link img,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item > img {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(121, 79, 248, 0.12);
}

body:not(:has(.auth-page)) .bottom-nav .nav-link:hover,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item:hover {
  color: var(--nav-purple) !important;
  background: var(--nav-purple-soft) !important;
  transform: translateY(-2px);
}

body:not(:has(.auth-page)) .bottom-nav .nav-link.active,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item.active,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item.text-primary,
body:not(:has(.auth-page)) .bottom-nav .nav-link.text-primary {
  color: var(--nav-purple-deep) !important;
  background: linear-gradient(145deg, var(--nav-lime) 0%, #e8ff7a 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(28, 10, 71, 0.08);
}

body:not(:has(.auth-page)) .bottom-nav .nav-link.active i,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item.active i,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item.text-primary i {
  color: var(--nav-purple-ink) !important;
}

/* Chatbot center item — subtle lift */
body:not(:has(.auth-page)) .bottom-nav .nav-link:nth-child(3),
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item:nth-child(3) {
  position: relative;
}

@media (max-width: 768px) {
  body:not(:has(.auth-page)) .bottom-nav .nav-link span,
  body:not(:has(.auth-page)) .bottom-nav .bottom-nav-label {
    font-size: 10px !important;
    font-weight: 700;
  }
}

/* ----- Desktop sidebar ----- */
body:not(:has(.auth-page)) #appSidebar,
body:not(:has(.auth-page)) .app-sidebar .bg-sidebar,
body:not(:has(.auth-page)) .bg-sidebar {
  background: linear-gradient(180deg, #fff 0%, var(--nav-cream) 100%) !important;
}

body:not(:has(.auth-page)) #appSidebar {
  border-right-color: var(--nav-line) !important;
}

body:not(:has(.auth-page)) .side-menu-nav .nav-link {
  font-weight: 600;
  color: var(--nav-ink);
  border-radius: 12px;
}

body:not(:has(.auth-page)) .side-menu-nav .nav-link:hover {
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .side-menu-nav .nav-link.active {
  background: linear-gradient(135deg, var(--nav-purple-soft) 0%, rgba(216, 255, 58, 0.35) 100%) !important;
  color: var(--nav-purple-deep) !important;
  box-shadow: inset 3px 0 0 var(--nav-purple);
}

body:not(:has(.auth-page)) .side-menu-nav .nav-link i,
body:not(:has(.auth-page)) .side-menu-nav .nav-link svg {
  color: var(--nav-purple);
}

body:not(:has(.auth-page)) .sidebar-feature-card {
  border: 1px solid var(--nav-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--nav-shadow) !important;
}

body:not(:has(.auth-page)) .sidebar-feature-card:hover {
  border-color: rgba(121, 79, 248, 0.35) !important;
  background: var(--nav-purple-soft) !important;
  transform: translateY(-2px);
}

body:not(:has(.auth-page)) .sidebar-feature-icon {
  border-radius: 12px !important;
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .sidebar-feature-title {
  color: var(--nav-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body:not(:has(.auth-page)) .side-menu-mobile-close {
  border-color: rgba(121, 79, 248, 0.28) !important;
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .app-sidebar-backdrop {
  background: rgba(22, 8, 48, 0.45) !important;
  backdrop-filter: blur(4px);
}

/* ----- m/ offcanvas sidebar ----- */
body:not(:has(.auth-page)) .offcanvas {
  background: linear-gradient(180deg, #fff 0%, var(--nav-cream) 100%) !important;
  border-right: 1px solid var(--nav-line);
}

body:not(:has(.auth-page)) .offcanvas-header {
  border-bottom: 1px solid var(--nav-line) !important;
}

body:not(:has(.auth-page)) .offcanvas-title {
  color: var(--nav-purple-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

body:not(:has(.auth-page)) .offcanvas .nav-link {
  border-radius: 12px;
  font-weight: 600;
  color: var(--nav-ink);
  margin-bottom: 2px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

body:not(:has(.auth-page)) .offcanvas .nav-link:not(.profile-header):not(.chatbot-header):not(.coach-menu-header):not(.subscription-header):hover {
  background: var(--nav-purple-soft) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .offcanvas .nav-link.active {
  background: linear-gradient(135deg, var(--nav-purple-soft), rgba(216, 255, 58, 0.3)) !important;
  color: var(--nav-purple-deep) !important;
}

body:not(:has(.auth-page)) .offcanvas .nav-link i.bx,
body:not(:has(.auth-page)) .offcanvas .nav-link i.bi {
  color: var(--nav-purple);
}

body:not(:has(.auth-page)) .profile-header,
body:not(:has(.auth-page)) .chatbot-header,
body:not(:has(.auth-page)) .coach-menu-header,
body:not(:has(.auth-page)) .subscription-header {
  border: 1px solid var(--nav-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--nav-shadow) !important;
}

body:not(:has(.auth-page)) .profile-header:hover,
body:not(:has(.auth-page)) .chatbot-header:hover,
body:not(:has(.auth-page)) .coach-menu-header:hover {
  transform: translateY(-2px);
}

body:not(:has(.auth-page)) .side-menu-lang-switcher {
  background: var(--nav-purple-soft) !important;
  border: 1px solid rgba(121, 79, 248, 0.2);
  border-radius: 14px !important;
}

body:not(:has(.auth-page)) .lang-chip {
  border-color: rgba(121, 79, 248, 0.28) !important;
  background: rgba(121, 79, 248, 0.08) !important;
  color: var(--nav-purple) !important;
}

body:not(:has(.auth-page)) .lang-chip[aria-pressed="true"] {
  background: var(--nav-purple) !important;
  color: #fff !important;
}

body:not(:has(.auth-page)) .support-block {
  background: linear-gradient(135deg, var(--nav-cream), var(--nav-purple-soft)) !important;
  border: 1px solid var(--nav-line) !important;
  border-radius: 14px !important;
}

/* ----- Notification badges (neobrutalist, compact) ----- */
body:not(:has(.auth-page)) .notification-badge,
body:not(:has(.auth-page)) #chatbot-badge,
body:not(:has(.auth-page)) #messenger-badge,
body:not(:has(.auth-page)) .menu-total-badge,
body:not(:has(.auth-page)) .bottommenucounters,
body:not(:has(.auth-page)) .countnew,
body:not(:has(.auth-page)) .sidebar-feature-badge,
body:not(:has(.auth-page)) #chatbot-counter,
body:not(:has(.auth-page)) .chatbot-badge,
body:not(:has(.auth-page)) #bottommenucountersdialogs,
body:not(:has(.auth-page)) #courses-counter,
body:not(:has(.auth-page)) #freelance-counter,
body:not(:has(.auth-page)) #connections-friend-requests-counter,
body:not(:has(.auth-page)) #connections-friend-requests-counter-guest,
body:not(:has(.auth-page)) .notifications-badge,
body:not(:has(.auth-page)) #notifications-badge,
body:not(:has(.auth-page)) #side-menu-total-badge {
  font-family: inherit !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  line-height: 1 !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 8px !important;
  border: 2px solid var(--nav-purple-ink) !important;
  box-shadow: var(--nav-shadow-brutal) !important;
  color: var(--nav-purple-ink) !important;
  background: var(--nav-lime) !important;
  animation: none !important;
}

body:not(:has(.auth-page)) #messenger-badge,
body:not(:has(.auth-page)) #bottommenucountersdialogs,
body:not(:has(.auth-page)) .countnew[data-type="dialogs"] {
  background: var(--nav-purple) !important;
  color: #fff !important;
  border-color: var(--nav-purple-ink) !important;
}

body:not(:has(.auth-page)) #chatbot-badge,
body:not(:has(.auth-page)) #chatbot-counter,
body:not(:has(.auth-page)) .chatbot-badge {
  background: var(--nav-pink) !important;
  color: var(--nav-purple-ink) !important;
}

body:not(:has(.auth-page)) .menu-total-badge,
body:not(:has(.auth-page)) #side-menu-total-badge {
  background: var(--nav-lime) !important;
  color: var(--nav-purple-ink) !important;
}

body:not(:has(.auth-page)) #notifications-badge.notifications-badge,
body:not(:has(.auth-page)) .notifications-badge {
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 8px !important;
}

body:not(:has(.auth-page)) header#appHeader #notifications-badge.w-2 {
  width: auto !important;
  height: auto !important;
  min-width: 8px;
  min-height: 8px;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--nav-pink-deep) !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px var(--nav-purple-ink) !important;
}

body:not(:has(.auth-page)) .side-menu-nav .nav-link .bg-primary,
body:not(:has(.auth-page)) .side-menu-nav .nav-link [class*="rounded-full"] {
  border: 2px solid var(--nav-purple-ink) !important;
  box-shadow: var(--nav-shadow-brutal) !important;
  background: var(--nav-lime) !important;
  color: var(--nav-purple-ink) !important;
  font-weight: 800 !important;
}

/* Focus rings */
body:not(:has(.auth-page)) .bottom-nav .nav-link:focus-visible,
body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item:focus-visible,
body:not(:has(.auth-page)) .side-menu-nav .nav-link:focus-visible,
body:not(:has(.auth-page)) .menu-button-with-badge:focus-visible,
body:not(:has(.auth-page)) #appSidebarToggle:focus-visible {
  outline: none;
  box-shadow: var(--nav-focus);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body:not(:has(.auth-page)) .bottom-nav .nav-link,
  body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item,
  body:not(:has(.auth-page)) .side-menu-nav .nav-link,
  body:not(:has(.auth-page)) .sidebar-feature-card,
  body:not(:has(.auth-page)) .menu-button-with-badge,
  body:not(:has(.auth-page)) #appSidebarToggle,
  body:not(:has(.auth-page)) .user-avatar,
  body:not(:has(.auth-page)) .offcanvas .nav-link,
  body:not(:has(.auth-page)) .countnew,
  body:not(:has(.auth-page)) .bottommenucounters {
    transition: none !important;
    animation: none !important;
  }

  body:not(:has(.auth-page)) .bottom-nav .nav-link:hover,
  body:not(:has(.auth-page)) .bottom-nav .bottom-nav-item:hover,
  body:not(:has(.auth-page)) .sidebar-feature-card:hover,
  body:not(:has(.auth-page)) .menu-button-with-badge:hover,
  body:not(:has(.auth-page)) #appSidebarToggle:hover,
  body:not(:has(.auth-page)) .user-avatar:hover,
  body:not(:has(.auth-page)) .profile-header:hover,
  body:not(:has(.auth-page)) .chatbot-header:hover {
    transform: none !important;
  }

  body:not(:has(.auth-page)) #appSidebar {
    transition: transform 0.01s linear !important;
  }
}