/* Navbar styles */
.navbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,250,255,.9)); border-bottom: 1px solid #e5e7eb; backdrop-filter: blur(6px) saturate(120%); }
.navbar .brand { font-weight: 700; letter-spacing: 0.5px; color: inherit; text-decoration: none; }
.navbar .brand { display:flex; align-items:center; gap:8px; }
.navbar .brand .brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; border: 1px solid rgba(0,0,0,.05); background:#fff; }
.navbar .spacer { flex: 1; }
.nav-links { display: flex; gap: 12px; }
.nav-link { color: #374151; text-decoration: none; padding: 6px 8px; border-radius: 6px; position: relative; }
.nav-link.active::after, .nav-link:hover::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 3px; height: 2px; background: #2563eb; border-radius: 2px; }
.nav-right { display: flex; align-items: center; gap: 8px; color: #6b7280; }
.nav-right .link { background: none; border: none; color: #0d6efd; cursor: pointer; padding: 0; }

/* Unread badge for Inbox/Support */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; font-size:11px; border-radius:999px; background:#ef4444; color:#fff; margin-left:6px; }

/* Glow animation to attract attention on Inbox link */
.nav-link.nav-alert { position: relative; }
.nav-link.nav-alert::after { content: ""; position:absolute; inset:-2px -6px; border-radius:10px; box-shadow: 0 0 0 0 rgba(239,68,68,.45); animation: nav-glow 1.6s ease-in-out infinite; }
@keyframes nav-glow { 0%{ box-shadow:0 0 0 0 rgba(239,68,68,.45);} 50%{ box-shadow:0 0 0 6px rgba(239,68,68,.15);} 100%{ box-shadow:0 0 0 0 rgba(239,68,68,.0);} }

@media (max-width: 700px) {
  .nav-links { gap: 8px; }
  .nav-link { padding: 6px; }
}