/* =============================================================================
   Navigation Components
   ============================================================================= */

/* Main Navigation — priority nav: shows as many items as fit, rest go to "More" */
.app-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  gap: 2px;
  margin-left: auto;
}

/* Items only shown in mobile drawer, hidden on desktop */
.nav-drawer-only {
  display: none;
}

/* Divider inside More dropdown */
.nav-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: var(--text);
  border-color: var(--border);
  background: rgba(60, 194, 255, 0.08);
}

/* Real-time Streamer Bar */
.realtime-streamer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.4rem var(--space-2xl);
  font-size: 0.8rem;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(60, 194, 255, 0.08), rgba(255, 79, 216, 0.05));
  border-bottom: 1px solid rgba(60, 194, 255, 0.15);
  transition: background var(--transition-slow), border-color var(--transition-slow);
}

/* Author CSS above sets `display: flex`, which beats the UA stylesheet's
   `[hidden] { display: none }`. Override explicitly so the server-rendered
   `hidden` attribute (plus the JS-applied attribute on disable) actually
   hides the streamer instead of flashing it visible until JS catches up. */
.realtime-streamer[hidden] {
  display: none !important;
}

.realtime-streamer--connected {
  background: linear-gradient(90deg, rgba(96, 247, 168, 0.1), rgba(60, 194, 255, 0.05));
  border-bottom-color: rgba(96, 247, 168, 0.2);
}

.realtime-streamer--error {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.1), rgba(255, 79, 216, 0.05));
  border-bottom-color: rgba(255, 107, 107, 0.2);
}

.realtime-streamer--updated {
  animation: streamer-highlight 2s ease-out;
}

@keyframes streamer-highlight {
  0% {
    background: linear-gradient(90deg, rgba(60, 194, 255, 0.35), rgba(255, 79, 216, 0.2));
  }
  100% {
    background: linear-gradient(90deg, rgba(96, 247, 168, 0.1), rgba(60, 194, 255, 0.05));
  }
}

.streamer-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--text-dim);
}

.streamer-value {
  color: var(--text);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.75rem;
}

.streamer-sep {
  opacity: 0.5;
  color: var(--text-dim);
}

.streamer-time {
  min-width: 5.5em;
}

/* Close button on the active streamer (admin opt-out → reload to default-off). */
.streamer-close {
  margin-left: var(--space-sm);
  padding: 0 0.4rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.streamer-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Collapsed pill rendered for admins when the streamer is off (default state).
   Sits in the streamer's slot (between the impersonation banner and the header)
   and toggles the streamer on click. Right-aligned via `align-self: flex-end`
   inside the `.app-shell` flex column. */
.realtime-toggle-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0.3rem var(--space-2xl);
  padding: 0.25rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  align-self: flex-end;
}

.realtime-toggle-pill svg {
  flex-shrink: 0;
}

.realtime-toggle-pill:hover {
  background: rgba(60, 194, 255, 0.08);
  color: var(--text);
  border-color: rgba(60, 194, 255, 0.3);
}

/* Profile Dropdown */
.profile-dropdown {
  position: relative;
  margin-left: var(--space-sm);
  flex-shrink: 0;
}

/* Help Icon Button (near profile) */
.help-trigger-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.help-trigger-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

.help-trigger-btn.active {
  color: var(--accent);
  background: rgba(60, 194, 255, 0.1);
}

.help-trigger-btn svg {
  width: 20px;
  height: 20px;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50px;
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
}

.profile-trigger:hover,
.profile-trigger:focus {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.profile-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

.profile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hot));
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.profile-caret {
  color: var(--text-dim);
  transition: transform var(--transition-normal);
}

.profile-trigger[aria-expanded="true"] .profile-caret {
  transform: rotate(180deg);
}

.profile-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 220px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 100;
}

.profile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.profile-menu-header {
  padding: 0.875rem var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.profile-menu-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}

.profile-menu-email {
  font-size: 0.8125rem;
  color: var(--text-dim);
}

.profile-menu-role {
  margin-top: 0.375rem;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: rgba(60, 194, 255, 0.15);
  color: var(--accent);
  width: fit-content;
}

.profile-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0.25rem 0;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem var(--space-md);
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
}

.profile-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.profile-menu-item svg {
  color: var(--text-dim);
  flex-shrink: 0;
}

.profile-menu-logout {
  color: var(--danger);
}

.profile-menu-logout svg {
  color: var(--danger);
}

.profile-menu-form {
  margin: 0;
}

/* Token Balance Dropdown */
.token-balance-dropdown {
  position: relative;
  margin-left: var(--space-md);
  flex-shrink: 0;
}

.token-balance-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  cursor: pointer;
  transition: background var(--transition-normal), border-color var(--transition-normal);
  font-family: inherit;
}

.token-balance-trigger:hover,
.token-balance-trigger:focus {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.15);
}

.token-icon {
  color: var(--accent);
  flex-shrink: 0;
}

.token-amount {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--text);
}

.token-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 180px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 100;
}

.token-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.token-menu-header {
  padding: 0.625rem var(--space-md);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.token-balance-display {
  padding: var(--space-md);
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
}

.balance-value {
  font-size: 1.5rem;
  font-weight: 600;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--accent);
}

.balance-label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.token-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0;
}

.token-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem var(--space-md);
  font-size: 0.8125rem;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.token-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.token-menu-item svg {
  color: var(--text-dim);
  flex-shrink: 0;
}

/* Impersonation Banner */
.impersonation-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.625rem var(--space-lg);
  background: linear-gradient(90deg, rgba(250, 204, 21, 0.15), rgba(251, 146, 60, 0.15));
  border-bottom: 1px solid rgba(250, 204, 21, 0.3);
  color: var(--warning);
  font-size: 0.875rem;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 100;
}

.impersonation-banner svg {
  flex-shrink: 0;
}

.impersonation-banner strong {
  font-weight: 600;
}

.impersonation-stop-btn {
  padding: 0.375rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: inherit;
  background: var(--warning);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity var(--transition-fast), transform 0.1s;
  margin-left: var(--space-sm);
}

.impersonation-stop-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.impersonation-stop-btn:active {
  transform: scale(0.98);
}

/* Breadcrumbs (if needed) */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-bottom: var(--space-md);
}

.breadcrumbs a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumbs a:hover {
  color: var(--accent);
}

.breadcrumbs .separator {
  opacity: 0.5;
}

.breadcrumbs .current {
  color: var(--text);
}

/* Nav Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
  /* Reset button defaults */
  border: 1px solid transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius-full);
  transition: color var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus,
.nav-dropdown.open .nav-dropdown-trigger {
  color: var(--text);
  border-color: var(--border);
  background: rgba(60, 194, 255, 0.08);
}

.nav-dropdown-caret {
  color: var(--text-dim);
  transition: transform var(--transition-normal);
}

.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 140px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 100;
  overflow: hidden;
}

.nav-dropdown-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.nav-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.nav-dropdown-item.active {
  background: rgba(60, 194, 255, 0.1);
  color: var(--accent);
}

/* =============================================================================
   Responsive — Mobile Navigation Drawer
   ============================================================================= */

@media (max-width: 768px) {
  /* ── Full-screen drawer ────────────────────────────────────────────────── */
  .header-nav-group {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg);
    z-index: 1005;
    display: flex;
    flex-direction: column;
    padding: calc(4.5rem + env(safe-area-inset-top, 0px)) 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 2px;
  }

  .header-nav-group.open {
    transform: translateX(0);
  }

  /* Prevent body scroll when drawer or modal is open */
  body.mobile-nav-open,
  body.modal-open {
    overflow: hidden;
  }

  /* Show all items in drawer (hidden on desktop behind "More") */
  .nav-drawer-only {
    display: inline-flex;
  }

  /* Hide "More" dropdown in drawer — items shown flat */
  #moreDropdown {
    display: none;
  }

  /* ── Nav links: stacked, full-width, touch-friendly ────────────────────── */
  .app-nav {
    flex-direction: column;
    gap: 2px;
    flex: none;
    margin-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
  }

  .nav-link {
    width: 100%;
    justify-content: flex-start;
    padding: 0.875rem var(--space-md);
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    min-height: 44px;
  }

  /* ── Admin dropdown: inline expand ──────────────────────────────────────── */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.875rem var(--space-md);
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
    min-height: 44px;
  }

  .nav-dropdown-menu {
    position: static;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-left: var(--space-md);
    display: none;
    transition: none;
  }

  .nav-dropdown-menu.open {
    display: block;
  }

  .nav-dropdown-item {
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* ── Mobile labels visible in drawer ────────────────────────────────────── */
  .mobile-label {
    display: inline;
  }

  /* Watchlist trigger — icon + text row, matching notif/chat/help pattern. Scoped to the drawer (#1001):
     watchlist-panel.css loads after this file and sizes the trigger as a 36x36 desktop icon, which at equal
     specificity won the cascade and squeezed the drawer row to 36px — the icon vanished and the label spilled
     off-screen, so the lists menu could not be found on a phone. */
  .header-nav-group .watchlist-trigger-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    height: auto;
    min-height: 44px;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    margin: 0;
    border: none;
  }
  .header-nav-group .watchlist-trigger-btn .mobile-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dim);
  }

  .wall-notif-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
  }
  .wall-notif-trigger .mobile-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dim);
  }
  .wall-notif-badge {
    position: static;
    margin-left: auto;
  }

  .chat-trigger-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
  }
  .chat-trigger-btn .mobile-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dim);
  }
  .chat-badge {
    position: static;
    margin-left: auto;
  }

  /* ── Header search: full-width in drawer ───────────────────────────────── */
  .header-search {
    width: 100%;
    order: -1;
    margin: 0 0 var(--space-sm);
  }

  .header-search input {
    width: 100%;
    padding: 0.75rem var(--space-md);
    padding-left: 40px;
    font-size: 0.9375rem;
    border-radius: var(--radius-md);
  }

  .header-search-icon {
    left: 14px;
  }

  .header-search-icon svg {
    width: 16px;
    height: 16px;
  }

  .header-search-results {
    position: static;
    margin-top: var(--space-xs);
    border: none;
    box-shadow: none;
    max-height: 200px;
  }

  /* ── Token balance in drawer ───────────────────────────────────────────── */
  .token-balance-dropdown {
    width: 100%;
    margin: 0;
  }

  .token-balance-trigger {
    width: 100%;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    justify-content: flex-start;
    border: none;
    min-height: 44px;
  }

  .token-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    display: none;
    margin-top: var(--space-xs);
    padding-left: var(--space-md);
  }

  .token-menu.open {
    display: block;
  }

  /* ── Help trigger ──────────────────────────────────────────────────────── */
  .help-trigger-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: 44px;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    height: auto;
  }
  .help-trigger-btn .mobile-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-dim);
  }

  /* ── Profile dropdown in drawer — at the top ──────────────────────────── */
  .profile-dropdown {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
    order: -2;
  }

  .profile-trigger {
    width: 100%;
    justify-content: flex-start;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-md);
    gap: var(--space-sm);
  }

  .profile-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    display: none;
    margin-top: var(--space-xs);
  }

  .profile-menu.open {
    display: block;
  }

  .profile-menu-item {
    min-height: 44px;
    border-radius: var(--radius-sm);
  }

  /* ── Realtime streamer: hidden on mobile ───────────────────────────────── */
  .realtime-streamer,
  .realtime-toggle-pill {
    display: none;
  }

  /* ── Impersonation banner: compact ─────────────────────────────────────── */
  .impersonation-banner {
    font-size: 0.75rem;
    padding: 0.5rem var(--space-md);
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

@media (max-width: 480px) {
  .header-nav-group {
    padding: calc(4rem + env(safe-area-inset-top, 0px)) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .nav-link,
  .nav-dropdown-trigger {
    padding: 0.75rem var(--space-sm);
    font-size: 0.875rem;
  }
}