/* ============================================
   AI NAVBAR COMPLETE SPACING FIX
   Controls bell, avatar, and dropdown arrow spacing
   ============================================ */

/* Remove Bootstrap dropdown-toggle pseudo element that might interfere */
.profile-dropdown .dropdown-toggle::after {
  display: none !important;
}

/* Bell icon styling with unique class */
.ai-nav-bell-icon {
  width: 28px !important;
  height: 28px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* Avatar image styling with unique class */
.ai-nav-avatar-img {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 0 !important;  /* No extra left margin */
  margin-right: 10px !important; /* Space between avatar and arrow */
  flex-shrink: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Extra high specificity for pages with duplicate head tags (stories, rewards) */
/* These selectors ensure avatar size survives Bootstrap reloading */
body .navbar .nav-item img.ai-nav-avatar-img,
html body .navbar img.ai-nav-avatar-img,
.profile-dropdown img.ai-nav-avatar-img,
.nav-item.profile-dropdown a img.ai-nav-avatar-img {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

/* Dropdown arrow styling with unique class */
.ai-nav-dropdown-arrow {
  height: 1.5em !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 0 !important; /* No additional left margin needed */
  margin-right: 10px !important;
  flex-shrink: 0 !important;
}

/* Ensure the link doesn't compress spacing */
.profile-dropdown .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

/* Override any conflicting Bootstrap or AI.css styles */
.profile-dropdown .nav-link > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Control spacing between nav items */
.navbar-nav .nav-item {
  margin-left: 0.5rem !important;
  margin-right: 0.5rem !important;
}

/* Ensure no Bootstrap utilities override our spacing */
.profile-dropdown .nav-link.dropdown-toggle {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Bell nav link padding */
.navbar-nav .nav-item .nav-link {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .ai-nav-avatar-img,
  body .navbar .nav-item img.ai-nav-avatar-img,
  html body .navbar img.ai-nav-avatar-img,
  .profile-dropdown img.ai-nav-avatar-img,
  .nav-item.profile-dropdown a img.ai-nav-avatar-img {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin-right: 12px !important;
  }

  .ai-nav-dropdown-arrow {
    height: 1.3em !important;
  }
}