/* nav.css — Unified site-wide navigation bar */
.site-nav {
  background: rgba(10, 14, 19, 0.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-bottom: 1px solid rgba(88, 166, 255, 0.18);
  box-shadow: 0 1px 28px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(88,166,255,0.06);
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10000;
  min-height: 44px;
  padding: 4px 16px;
  gap: 10px;
  flex-shrink: 0;
}

/* Spacer to push content below the fixed nav */
.nav-spacer {
  flex-shrink: 0;
}

/* ── Brand / logo ── */
.site-nav .nav-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='44'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='60' y2='44' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2358a6ff' stop-opacity='.18'/%3E%3Cstop offset='1' stop-color='%2358a6ff' stop-opacity='.04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M15 6l6 10H9z' fill='none' stroke='%2358a6ff' stroke-opacity='.22' stroke-width='.7'/%3E%3Cpath d='M42 28l8 14H34z' fill='none' stroke='%2358a6ff' stroke-opacity='.14' stroke-width='.5'/%3E%3Ccircle cx='50' cy='8' r='3' fill='none' stroke='%2358a6ff' stroke-opacity='.16' stroke-width='.6'/%3E%3Crect x='3' y='30' width='8' height='8' rx='1' fill='none' stroke='%2358a6ff' stroke-opacity='.13' stroke-width='.5'/%3E%3Cline x1='28' y1='0' x2='32' y2='44' stroke='%2358a6ff' stroke-opacity='.08' stroke-width='.4'/%3E%3C/svg%3E") repeat,
    linear-gradient(135deg, rgba(88,166,255,0.10) 0%, rgba(88,166,255,0.02) 100%);
  padding: 4px 10px 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(88,166,255,0.18);
}
.site-nav .nav-brand:hover { text-decoration: none; opacity: 0.85; }
.site-nav .nav-brand-icon { display: flex; align-items: center; line-height: 1; flex-shrink: 0; }
.site-nav .nav-brand-wrap {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.site-nav .nav-brand-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(188,224,255,0.38) 50%, transparent 100%);
  transform: translateX(-150%);
  animation: brand-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
.site-nav .nav-brand-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: #f0f6fc;
  letter-spacing: 1.5px;
  animation: neon-idle-glow 2.8s ease-in-out infinite, micro-flicker 3s ease-in-out infinite;
  will-change: text-shadow, opacity;
}
.site-nav .nav-brand-text span { color: #58a6ff; }
.brand-hex {
  animation: hex-glow 2.8s ease-in-out infinite, micro-flicker 3s ease-in-out infinite 0.15s;
  will-change: filter;
}

/* ── Animated logo keyframes ── */
@keyframes neon-idle-glow {
  0%, 100% { text-shadow: 0 0 4px rgba(88,166,255,0.45), 0 0 10px rgba(88,166,255,0.2); }
  50%       { text-shadow: 0 0 7px rgba(88,166,255,0.75), 0 0 15px rgba(88,166,255,0.4), 0 0 24px rgba(88,166,255,0.15); }
}
@keyframes micro-flicker {
  0%, 16%, 20%, 23%, 48%, 52%, 100% { opacity: 1; }
  17% { opacity: 0.75; }
  18% { opacity: 1; }
  19% { opacity: 0.55; }
  21% { opacity: 0.9; }
  22% { opacity: 0.65; }
  49% { opacity: 0.85; }
  50% { opacity: 1; }
  51% { opacity: 0.7; }
}
@keyframes brand-sweep {
  0%, 68% { transform: translateX(-150%); }
  82%     { transform: translateX(260%); }
  100%    { transform: translateX(260%); }
}
@keyframes hex-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(88,166,255,0.5)) drop-shadow(0 0 5px rgba(88,166,255,0.25)); }
  50%       { filter: drop-shadow(0 0 4px rgba(88,166,255,0.85)) drop-shadow(0 0 10px rgba(88,166,255,0.45)); }
}

/* ── Inline Google search ── */
.site-nav .nav-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 1;
  min-width: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='44'%3E%3Ccircle cx='12' cy='10' r='5' fill='%234285F4' fill-opacity='.15'/%3E%3Ccircle cx='30' cy='32' r='4' fill='%23EA4335' fill-opacity='.12'/%3E%3Ccircle cx='55' cy='14' r='6' fill='%23FBBC04' fill-opacity='.10'/%3E%3Ccircle cx='70' cy='34' r='3.5' fill='%2334A853' fill-opacity='.14'/%3E%3Ccircle cx='45' cy='24' r='2.5' fill='%234285F4' fill-opacity='.08'/%3E%3Ccircle cx='8' cy='38' r='2' fill='%2334A853' fill-opacity='.10'/%3E%3C/svg%3E") repeat,
    linear-gradient(160deg, rgba(66,133,244,0.08) 0%, rgba(52,168,83,0.06) 50%, rgba(251,188,4,0.05) 100%);
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(66,133,244,0.15);
}
.site-nav .nav-search form {
  display: flex;
  align-items: center;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 14px;
  padding: 0 4px 0 10px;
  transition: border-color .2s, box-shadow .2s;
}
.site-nav .nav-search form:focus-within {
  border-color: #58a6ff;
  box-shadow: 0 0 0 2px #58a6ff22;
}
.site-nav .nav-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #f0f6fc;
  font-size: 0.75rem;
  padding: 4px 0;
  font-family: inherit;
  width: 120px;
  min-width: 60px;
}
.site-nav .nav-search input::placeholder { color: #484f58; }
.site-nav .nav-search button {
  background: none;
  border: none;
  cursor: pointer;
  color: #8b949e;
  padding: 3px 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  transition: color .15s;
}
.site-nav .nav-search button:hover { color: #f0f6fc; }
.site-nav .nav-glinks {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.site-nav .nav-glinks a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  color: #8b949e;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.site-nav .nav-glinks a:hover { background: #21262d; color: #f0f6fc; text-decoration: none; }
.site-nav .nav-glinks a svg { width: 12px; height: 12px; }

/* ── Tunnel / network status indicators ── */
.site-nav .nav-tunnel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 3px 8px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='44'%3E%3Cline x1='0' y1='22' x2='100' y2='22' stroke='%233fb950' stroke-opacity='.08' stroke-width='.5' stroke-dasharray='3 5'/%3E%3Cline x1='0' y1='10' x2='100' y2='10' stroke='%233fb950' stroke-opacity='.05' stroke-width='.3' stroke-dasharray='2 8'/%3E%3Cline x1='0' y1='34' x2='100' y2='34' stroke='%233fb950' stroke-opacity='.05' stroke-width='.3' stroke-dasharray='2 8'/%3E%3Ccircle cx='20' cy='22' r='8' fill='none' stroke='%233fb950' stroke-opacity='.10' stroke-width='.5'/%3E%3Ccircle cx='20' cy='22' r='15' fill='none' stroke='%233fb950' stroke-opacity='.06' stroke-width='.3'/%3E%3Ccircle cx='75' cy='22' r='6' fill='none' stroke='%233fb950' stroke-opacity='.08' stroke-width='.4'/%3E%3C/svg%3E") repeat-x,
    linear-gradient(180deg, #0d1117 0%, #131921 100%);
  border: 1px solid rgba(63,185,80,0.12);
  border-radius: 14px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-nav .nav-tunnel::-webkit-scrollbar { display: none; }
.site-nav .nt-device {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.64rem;
  color: #8b949e;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.site-nav .nt-device:hover { color: #f0f6fc; text-decoration: none; }
.site-nav .nt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.site-nav .nt-ms {
  font-size: 0.6rem;
  color: #484f58;
  transition: color 0.4s ease;
}
.site-nav .nt-sep {
  width: 1px; height: 12px;
  background: #21262d;
  flex-shrink: 0;
}
.site-nav .nt-sep-big {
  height: 18px;
  margin: 0 2px;
  background: #30363d;
}

/* Status dot colors (shared) */
.dot-online { background: #3fb950; box-shadow: 0 0 6px #3fb95066; animation: none; }
.dot-offline { background: #f85149; box-shadow: 0 0 6px #f8514966; animation: none; }
.dot-standby { background: #484f58; box-shadow: none; animation: dotPulse 1.5s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── Nav links ── */
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='44'%3E%3Cpath d='M24 4l10 17.3H14z' fill='none' stroke='%238b5cf6' stroke-opacity='.16' stroke-width='.6'/%3E%3Cpath d='M8 26l6 10.4H2z' fill='none' stroke='%238b5cf6' stroke-opacity='.10' stroke-width='.5'/%3E%3Cpath d='M38 30l5 8.7H33z' fill='none' stroke='%238b5cf6' stroke-opacity='.10' stroke-width='.5'/%3E%3Ccircle cx='40' cy='8' r='2.5' fill='%238b5cf6' fill-opacity='.08'/%3E%3Ccircle cx='6' cy='12' r='1.5' fill='%238b5cf6' fill-opacity='.10'/%3E%3C/svg%3E") repeat,
    linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0.02) 100%);
  padding: 3px 8px;
  border-radius: 8px;
  border: 1px solid rgba(139,92,246,0.16);
}
.site-nav .nav-links a {
  color: #8b949e;
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
}
.site-nav .nav-links a:hover {
  background: #21262d;
  color: #f0f6fc;
  text-decoration: none;
}
.site-nav .nav-links a.nav-active {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  font-weight: 600;
}

/* ── Music link playing indicator ── */
.site-nav .nav-links a.nav-music.radio-live::before,
.site-nav .nav-dropdown-btn.radio-live::before {
  content: '\266A';
  margin-right: 3px;
  display: inline-block;
  color: #3fb950;
  animation: radio-note-pulse 1.2s ease-in-out infinite;
}
@keyframes radio-note-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}

/* ── AI Chat status dot ── */
.nav-ai-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: 1px;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

/* ── Admin dropdown ── */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-dropdown-btn {
  color: #8b949e;
  font-size: 0.74rem;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: transparent;
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.nav-dropdown-btn:hover { background: #21262d; color: #f0f6fc; border-color: #484f58; }
.nav-dropdown-btn.nav-active { color: #58a6ff; font-weight: 600; border-color: rgba(88, 166, 255, 0.3); }
.nav-dropdown.open .nav-dropdown-btn { background: #21262d; color: #f0f6fc; border-color: #484f58; }
.dd-arrow { font-size: 0.65rem; transition: transform 0.15s; }
.nav-dropdown.open .dd-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 6px;
  min-width: 170px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  z-index: 10001;
  flex-direction: column;
  gap: 2px;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  color: #8b949e;
  font-size: 0.78rem;
  padding: 7px 12px;
  border-radius: 6px;
  text-decoration: none;
  display: block;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: #21262d; color: #f0f6fc; }
.nav-dropdown-menu a.nav-active { background: rgba(88,166,255,0.1); color: #58a6ff; }

/* Dropdown section divider */
.nav-dd-divider {
  display: block;
  height: 1px;
  margin: 4px 8px;
  background: linear-gradient(90deg, transparent, #30363d 30%, #30363d 70%, transparent);
}

.site-nav .nav-links .nav-logout {
  color: #8b949e;
  font-size: 0.7rem;
  opacity: 0.7;
}
.site-nav .nav-links .nav-logout:hover {
  background: #21262d;
  color: #f0f6fc;
  opacity: 1;
}

/* Divider dot */
.site-nav .nav-sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #30363d;
  margin: 0 3px;
  flex-shrink: 0;
}

/* Username in nav */
.site-nav .nav-username {
  color: #79c0ff;
  font-size: 0.72rem;
  font-weight: 600;
  margin-right: 2px;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(121, 192, 255, 0.35);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color 0.15s, text-decoration-color 0.15s;
}
.site-nav .nav-username:hover {
  color: #a5d6ff;
  text-decoration-color: rgba(165, 214, 255, 0.6);
}

/* ── Mobile hamburger ── */
.site-nav .nav-hamburger {
  display: none;
  background: none;
  border: none;
  color: #8b949e;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  margin-left: auto;
}
.site-nav .nav-hamburger:hover { background: #21262d; color: #f0f6fc; }

/* ── Mobile dropdown ── */
.site-nav .nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 12px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 8px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  flex-direction: column;
  gap: 2px;
  z-index: 201;
}
.site-nav .nav-mobile-menu a {
  color: #8b949e;
  font-size: 0.82rem;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
  display: block;
  transition: background 0.15s, color 0.15s;
}
.site-nav .nav-mobile-menu a:hover { background: #21262d; color: #f0f6fc; }
.site-nav .nav-mobile-menu a.nav-active { background: rgba(88,166,255,0.1); color: #58a6ff; }
.site-nav .nav-mobile-menu a.nav-music.radio-live::before { content: '\266A '; color: #3fb950; }
/* Admin dropdown items rendered flat in mobile menu */
.site-nav .nav-mobile-menu .nav-dd-label {
  font-size: 0.6rem;
  color: #484f58;
  padding: 6px 14px 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* ── Mobile collapsible sections ── */
.site-nav .nav-mobile-menu .mobile-section {
  border-top: 1px solid #21262d;
  margin-top: 2px;
  padding-top: 2px;
}
.site-nav .nav-mobile-menu .mobile-section-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  font-size: 0.72rem;
  color: #8b949e;
  padding: 10px 14px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  border-radius: 6px;
}
.site-nav .nav-mobile-menu .mobile-section-btn:hover,
.site-nav .nav-mobile-menu .mobile-section-btn:active {
  color: #f0f6fc;
  background: rgba(88,166,255,0.06);
}
.site-nav .nav-mobile-menu .mobile-section.open .mobile-section-btn {
  color: #58a6ff;
}
.mobile-section-arrow {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
  color: #484f58;
}
.mobile-section.open .mobile-section-arrow {
  transform: rotate(90deg);
  color: #58a6ff;
}
.site-nav .nav-mobile-menu .mobile-section-body {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0 4px 8px;
}
.mobile-section.open .mobile-section-body {
  display: flex;
}
.site-nav .nav-mobile-menu .nav-logout { color: #8b949e; border-top: 1px solid #21262d; margin-top: 4px; padding-top: 10px; }
.site-nav .nav-mobile-menu.open { display: flex; }

/* ── Always-visible mobile status strip (below navbar) ── */
.nav-status-strip {
  display: none; /* shown only when desktop tunnel bar is hidden */
  position: fixed;
  top: 44px; /* JS overrides dynamically */
  left: 0; right: 0;
  z-index: 9999;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  padding: 5px 12px;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nss-chip .nt-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
.nss-label {
  font-size: 0.62rem;
  color: #6e7681;
  font-weight: 500;
}

/* ── Responsive ── */
@media (max-width: 1400px) {
  .site-nav .nav-tunnel { display: none; }
  .nav-status-strip { display: flex; } /* show mobile strip when desktop tunnel hides */
}
@media (max-width: 900px) {
  .site-nav .nav-search { display: none; }
}
@media (max-width: 768px) {
  .site-nav .nav-links { display: none; }
  .site-nav .nav-hamburger { display: block; }
}
@media (min-width: 769px) {
  .site-nav .nav-mobile-menu { display: none !important; }
}

/* ── Tablet / touch-device performance ── */
@media (max-width: 1400px) {
  .site-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .site-nav .nav-brand-text { animation: none; text-shadow: 0 0 4px rgba(88,166,255,0.45), 0 0 10px rgba(88,166,255,0.2); }
  .brand-hex { animation: none; filter: drop-shadow(0 0 2px rgba(88,166,255,0.5)) drop-shadow(0 0 5px rgba(88,166,255,0.25)); }
  .site-nav .nav-brand-wrap::after { animation: none; display: none; }
  .dot-standby { animation: none; opacity: 0.6; }
}