/* Shared left navigation: compact width, neon glow and per-link accent colours. */
html body .sidebar.desktop-nav {
  position: relative;
  width: max-content;
  min-width: 0;
  flex: 0 0 auto;
  padding: 22px 14px 24px;
  overflow: hidden;
  border-right: 0;
  border-image: none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(255, 79, 163, 0.28), transparent 55%),
    radial-gradient(ellipse at 100% 55%, rgba(91, 56, 255, 0.26), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(0, 220, 255, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(34, 12, 58, 0.99), rgba(9, 13, 38, 0.99));
  box-shadow: 4px 0 30px rgba(164, 83, 255, 0.22), inset -1px 0 rgba(255, 255, 255, 0.04);
}

/* Animated neon edge */
html body .sidebar.desktop-nav::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, #ff6bc9, #ffd76a, #67e9ff, #bd82ff, transparent);
  background-size: 100% 300%;
  box-shadow: 0 0 12px rgba(255, 107, 201, 0.85), 0 0 24px rgba(103, 233, 255, 0.4);
  animation: sidebar-edge 7s linear infinite;
}

/* Soft drifting orb behind the links */
html body .sidebar.desktop-nav::before {
  position: absolute;
  bottom: -60px;
  left: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 215, 106, 0.28), transparent 68%);
  filter: blur(14px);
  animation: sidebar-orb 11s ease-in-out infinite;
}

.sidebar.desktop-nav > * {
  position: relative;
  z-index: 1;
}

.sidebar.desktop-nav .logo {
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #ff6bc9, #ffd76a, #67e9ff) 1;
}

.sidebar.desktop-nav .logo .brand-logo {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 16px rgba(255, 107, 201, 0.7);
  animation: sidebar-logo 4s ease-in-out infinite;
}

.sidebar.desktop-nav .logo h2 {
  font-size: 22px;
  background: linear-gradient(95deg, #ff6bc9, #ffd76a, #67e9ff, #ff6bc9);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(255, 215, 106, 0.5));
  animation: sidebar-text 6s linear infinite;
}

.sidebar.desktop-nav nav {
  gap: 10px;
}

html body .sidebar.desktop-nav .nav-item {
  --accent: 255, 107, 201;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px 9px 10px;
  border: 1px solid rgba(var(--accent), 0.18);
  border-radius: 12px;
  background: linear-gradient(100deg, rgba(var(--accent), 0.1), rgba(255, 255, 255, 0.02));
  color: #e9defc;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

html body .sidebar.desktop-nav .nav-item::before {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(var(--accent), 0.2);
  box-shadow: 0 0 12px rgba(var(--accent), 0.55);
  font-size: 15px;
  content: "\2726";
}

.sidebar.desktop-nav .nav-item[href$="index.html"] { --accent: 255, 107, 201; }
.sidebar.desktop-nav .nav-item[href$="index.html"]::before { content: "\1F3E0"; }
.sidebar.desktop-nav .nav-item[href$="users.html"] { --accent: 103, 233, 255; }
.sidebar.desktop-nav .nav-item[href$="users.html"]::before { content: "\1F50D"; }
.sidebar.desktop-nav .nav-item[href$="messages.html"] { --accent: 189, 130, 255; }
.sidebar.desktop-nav .nav-item[href$="messages.html"]::before { content: "\1F4AC"; }
.sidebar.desktop-nav .nav-item[href$="live.html"] { --accent: 255, 90, 90; }
.sidebar.desktop-nav .nav-item[href$="live.html"]::before { content: "\1F534"; }
.sidebar.desktop-nav .nav-item[href$="blogs.html"] { --accent: 168, 120, 255; }
.sidebar.desktop-nav .nav-item[href$="blogs.html"]::before { content: "\1F4DD"; }
.sidebar.desktop-nav .nav-item[href$="settings.html"] { --accent: 255, 215, 106; }
.sidebar.desktop-nav .nav-item[href$="settings.html"]::before { content: "\2699\FE0F"; }

html body .sidebar.desktop-nav .nav-item:hover,
html body .sidebar.desktop-nav .nav-item:focus-visible {
  border-color: rgba(var(--accent), 0.7);
  background: linear-gradient(100deg, rgba(var(--accent), 0.28), rgba(255, 255, 255, 0.04));
  color: #fff;
  box-shadow: 0 0 20px rgba(var(--accent), 0.45);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
  transform: translateX(4px);
}

html body .sidebar.desktop-nav .nav-item.active {
  border-color: rgba(var(--accent), 0.95);
  background: linear-gradient(100deg, rgba(var(--accent), 0.42), rgba(var(--accent), 0.1));
  color: #fff;
  box-shadow: inset 3px 0 rgb(var(--accent)), 0 0 24px rgba(var(--accent), 0.6);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
  animation: sidebar-active 3.2s ease-in-out infinite;
}

@keyframes sidebar-edge {
  0% { background-position: 0 0; }
  100% { background-position: 0 300%; }
}

@keyframes sidebar-orb {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -50px); }
}

@keyframes sidebar-text {
  0% { background-position: 0 0; }
  100% { background-position: 300% 0; }
}

@keyframes sidebar-logo {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 107, 201, 0.6); }
  50% { box-shadow: 0 0 22px rgba(103, 233, 255, 0.85); }
}

@keyframes sidebar-active {
  0%, 100% { box-shadow: inset 3px 0 rgb(var(--accent)), 0 0 18px rgba(var(--accent), 0.45); }
  50% { box-shadow: inset 3px 0 rgb(var(--accent)), 0 0 30px rgba(var(--accent), 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  html body .sidebar.desktop-nav::after,
  html body .sidebar.desktop-nav::before,
  .sidebar.desktop-nav .logo .brand-logo,
  .sidebar.desktop-nav .logo h2,
  html body .sidebar.desktop-nav .nav-item.active {
    animation: none;
  }
}