/* ============================================================
   SOULFULSYNC — MAIN NAVIGATION (secondary / fallback surfaces)
   Header primario vive en header/header-desktop.css
   ============================================================ */

.ssx-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ssx-menu li a {
  text-decoration: none;
}

/* Legacy mobile sheet (si se usa fuera del panel nuevo) */
#ssxMobileNav {
  display: none;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  background: var(--ss-bg);
  padding: 22px;
  border-top: 1px solid var(--ss-border);
  z-index: 998;
  flex-direction: column;
}

#ssxMobileNav.open {
  display: flex;
}

.ssx-mobile-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ssx-mobile-menu li a {
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--ss-brand-soft);
  color: var(--ss-ink);
  text-decoration: none;
  transition: 0.2s ease;
}

.ssx-mobile-menu li a:hover {
  background: rgba(155, 140, 255, 0.18);
}

@media screen and (max-width: 768px) {
  #bp-better-messages-mini-mobile-open {
    bottom: calc(var(--ss-theme-bottom-nav-height, 62px) + 24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}