/* ============================================================
   Navigation
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  z-index:1000; transition:background .4s, box-shadow .4s;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--border);
}
.nav__inner {
  max-width:var(--container); margin:0 auto; padding:0 36px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav__logo {
  font-family:var(--font-body); transition:color .3s;
  display:flex; align-items:center; gap:10px; min-width:0;
}
.nav__name { font-size:.95rem; font-weight:600; color:var(--text); letter-spacing:.02em; white-space:nowrap }
.nav__divider { color:var(--border-hover); font-weight:300; font-size:.9rem }
.nav__role { font-size:.9rem; font-weight:400; color:var(--text); white-space:nowrap }

.nav__avatar {
  width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:top;
  border:2px solid var(--border); cursor:pointer; flex-shrink:0;
  transition:border-color .3s, transform .2s;
}
.nav__avatar:hover { border-color:var(--accent); transform:scale(1.08) }

/* ---------- Right side: menu + toggle + hamburger ---------- */
.nav__actions { display:flex; align-items:center; gap:24px }
.nav__menu { display:flex; align-items:center; gap:40px }

.nav__link {
  font-size:.92rem; font-weight:500; color:var(--text-muted);
  transition:color .3s; position:relative; padding:0;
}
.nav__link::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0;
  height:1.5px; background:var(--accent); transition:width .3s var(--ease);
}
.nav__link:hover, .nav__link.active { color:var(--text) }
.nav__link:hover::after, .nav__link.active::after { width:100% }

.nav__chat-btn {
  border:1px solid var(--border); border-radius:6px;
  padding:6px 16px!important; font-size:.85rem;
  transition:border-color .3s, color .3s;
}
.nav__chat-btn:hover { border-color:var(--accent); color:var(--accent) }
.nav__chat-btn::after { display:none }

/* ---------- Theme toggle ---------- */
.nav__theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--border);
  color:var(--text-muted); flex-shrink:0;
  transition: border-color .3s, color .3s, background .3s;
}
.nav__theme-toggle:hover {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim);
}
.nav__theme-toggle svg { width:18px; height:18px }

/* Show sun icon in dark mode, moon icon in light mode */
[data-theme="dark"] .theme-icon--sun,
:root:not([data-theme]) .theme-icon--sun { display:block }
[data-theme="dark"] .theme-icon--moon,
:root:not([data-theme]) .theme-icon--moon { display:none }
[data-theme="light"] .theme-icon--sun { display:none }
[data-theme="light"] .theme-icon--moon { display:block }

/* ---------- Mobile hamburger ---------- */
.nav__toggle {
  display:none; flex-direction:column; gap:5px; width:28px; padding:4px 0;
}
.nav__toggle span {
  display:block; height:2px; background:var(--text);
  border-radius:2px; transition:transform .3s, opacity .3s;
}
.nav__toggle.open span:first-child { transform:translateY(3.5px) rotate(45deg) }
.nav__toggle.open span:last-child  { transform:translateY(-3.5px) rotate(-45deg) }

/* ---------- Mobile nav ---------- */
@media(max-width:768px) {
  .nav__toggle { display:flex }
  .nav__actions { gap:16px }
  .nav__menu {
    position:fixed; top:0; right:0; width:min(320px,85vw); height:100dvh;
    background:var(--bg-surface); flex-direction:column;
    align-items:flex-start; justify-content:center; gap:0;
    padding:40px 32px; transform:translateX(100%);
    transition:transform .4s var(--ease-out);
    box-shadow:-20px 0 60px rgba(0,0,0,.5); z-index:1000;
  }
  .nav__menu.open { transform:translateX(0) }
  .nav__menu li { width:100% }
  .nav__link {
    display:block; font-size:1.3rem; padding:16px 0!important;
    border-bottom:1px solid var(--border);
  }
  .nav__link::after { display:none }
  .nav__chat-btn {
    margin-top:16px; text-align:center; font-size:1rem!important;
    padding:14px 0!important; border-radius:8px;
    border:1px solid var(--border)!important;
  }
}