/* Nav */
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 24px;
  position: sticky; top: 0; z-index: 100; background: var(--bg);
}
.logo { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -.02em }
.zoom-ctrl { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px }
.zoom-btn { width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--bg); color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center }
.zoom-btn:hover { background: rgba(91,163,245,.15); color: var(--accent) }
#zoom-level { font-size: 16px; font-weight: 700; color: var(--muted); min-width: 50px; text-align: center }
.nav-links { display: flex; gap: 8px }
.nav-btn {
  background: transparent; border: 1px solid transparent; color: var(--muted);
  padding: 10px 20px; font-size: 16px; font-weight: 600; border-radius: 12px; cursor: pointer;
}
.nav-btn:hover { color: var(--text); background: rgba(91,163,245,.06) }
.nav-btn.active { border-color: rgba(91,163,245,.2); background: rgba(91,163,245,.1); color: var(--accent) }

/* Client switcher */
.nav-left { display: flex; align-items: center; gap: 10px }
.client-select { padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 16px; cursor: pointer; max-width: 240px }
.client-select:focus { outline: none; border-color: var(--accent) }
.btn-new-client { background: transparent; border: 1px solid var(--line); color: var(--accent); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center }
.btn-new-client:hover, .btn-edit-client:hover { background: rgba(91,163,245,.1) }
.btn-edit-client { background: transparent; border: 1px solid var(--line); color: var(--muted); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center }

/* Bell notification icon (legacy) */
.nav-bell { position: relative; font-size: 16px; padding: 8px 12px }
.nav-bell .messages-badge { position: absolute; top: 2px; right: 2px; font-size: 10px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center }

/* Action Center — a distinct, easy-to-spot nav button */
.nav-action-center { display: inline-flex; align-items: center; gap: 6px; border-color: rgba(91,163,245,.25); background: rgba(91,163,245,.06) }
.nav-action-center:hover { color: var(--accent); background: rgba(91,163,245,.12) }
/* Pulses gently when there's an unread message in any category (replaces the number badge) */
@keyframes acPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,163,245,0); border-color: rgba(91,163,245,.25) }
  50% { box-shadow: 0 0 0 5px rgba(91,163,245,.28); border-color: var(--accent) }
}
.nav-action-center.ac-has-new { animation: acPulse 1.6s ease-in-out infinite; color: var(--accent) }

@media (max-width: 768px) {
  .topnav { flex-direction: column; gap: 10px; padding: 12px 0 }
  .nav-left { width: 100%; justify-content: center }
  .nav-links { width: 100%; justify-content: center; flex-wrap: wrap }
  .nav-btn { padding: 6px 12px; font-size: 13px }
  .zoom-ctrl { order: -1 }
}