.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: rgba(242, 242, 247, 0.8); /* Fallback for light mode */
  background-color: var(
    --bg-tertiary-alpha
  ); /* Using a new variable for alpha */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid var(--border-secondary); /* Softer border */
  z-index: 1000;
}

.nav-item {
  background: none;
  border: none;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  cursor: pointer;
  padding: 5px;
  transition: color 0.3s;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.nav-item.active {
  color: var(--primary-color);
}

.contact-list-container.with-bottom-nav .contact-list {
  padding-bottom: 60px; /* Adjust based on nav height */
}

@media (min-width: 768px) {
  /*
    Desktop mode: The bottom nav should appear ONLY within the left pane.
    Since it's a root element in the body, we achieve this by keeping it
    `position: fixed` but constraining its width and position to match the left pane.
  */
  .bottom-nav {
    width: 350px; /* Match the width of the left pane (.contact-list-container) */
    left: 0;
    right: auto; /* Prevent it from stretching across the screen */
    /* Align vertically with the chat input box by using padding, not `bottom` */
    bottom: 0;
    height: 88px; /* 56px for content + 32px for bottom padding */
    padding-bottom: 32px;
  }

  /* Hide the nav bar if it ever appears in other containers (defensive) */
  .chat-container .bottom-nav,
  .shop-container .bottom-nav,
  .music-container .bottom-nav,
  .dynamics-container .bottom-nav,
  .help-container .bottom-nav {
    display: none;
  }

  /* Remove the mobile-only padding from the contact list */
  .contact-list-container.with-bottom-nav .contact-list {
    padding-bottom: 0;
  }
}