/* Topbar chrome — fixed-position cluster at top-right of every authed page.
   Combines: profile-menu avatar dropdown + inbox icon to its left.
   Originally split across code/agent/profile_menu.py and theme_toggle.py. */

/* ---------- Inbox icon (.ns-inbox-link) ---------- */
.ns-inbox-link {
  position: fixed;
  top: 1.25rem;
  /* sits to the left of the profile-menu avatar (1.25rem from right,
     2.25rem wide, 0.5rem gap). */
  right: calc(1.25rem + (2.25rem + 0.5rem));
  z-index: 100;
  background: var(--ns-bg-elevated, #141414);
  color: var(--ns-text, #e8e6e3);
  border: 1px solid var(--ns-border, #242424);
  border-radius: 999px;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}
.ns-inbox-link:hover { border-color: var(--ns-border-strong, #3a3a3a); }
.ns-inbox-link svg { width: 1em; height: 1em; }

/* ---------- Profile menu (.ns-pm) ---------- */
.ns-pm {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  /* The trigger is `display: inline-flex` — inline-level for layout.
     If .ns-pm is the default `display: block`, the trigger sits on a
     line box whose baseline is set by the document's line-height,
     pushing the circle a few px lower than the sibling .ns-inbox-link
     (which IS the inline-flex element itself). Making .ns-pm a flex
     container removes the line-box, so the trigger aligns flush with
     the inbox icon. */
  display: flex;
  align-items: flex-start;
}
.ns-pm__trigger {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--ns-border, #242424);
  background: var(--ns-bg-elevated, #141414);
  color: var(--ns-text, #e8e6e3);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 120ms ease;
}
.ns-pm__trigger:hover,
.ns-pm__trigger[aria-expanded="true"] { border-color: var(--ns-border-strong, #3a3a3a); }
.ns-pm__avatar {
  font-family: var(--ns-font-sans, "Epilogue", -apple-system, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ns-text, #e8e6e3);
}
.ns-pm__avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.ns-pm__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 13rem;
  padding: 0.35rem;
  background: var(--ns-bg-card, #161616);
  color: var(--ns-text, #e8e6e3);
  border: 1px solid var(--ns-border, #242424);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--ns-font-sans, "Epilogue", sans-serif);
}
.ns-pm__panel[hidden] { display: none; }
.ns-pm__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ns-text, #e8e6e3);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 120ms ease, color 120ms ease;
}
.ns-pm__item:hover,
.ns-pm__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ns-text-strong, #ffffff);
  outline: none;
}
:root[data-theme="light"] .ns-pm__item:hover,
:root[data-theme="light"] .ns-pm__item:focus-visible {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ns-text-strong, #000000);
}
.ns-pm__item--disabled,
.ns-pm__item--disabled:hover,
.ns-pm__item--disabled:focus-visible {
  opacity: 0.5;
  cursor: not-allowed;
  background: transparent;
  color: var(--ns-text, #e8e6e3);
}
.ns-pm__theme,
.ns-pm__logout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ns-pm__logout-icon {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--ns-text-muted, #8a8a8a);
}
.ns-pm__logout:hover .ns-pm__logout-icon,
.ns-pm__logout:focus-visible .ns-pm__logout-icon {
  color: var(--ns-text, #e8e6e3);
}
/* Sun ↔ crescent moon morph */
.ns-pm__theme-icon {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  --tt-duration: 400ms;
  color: var(--ns-text, #e8e6e3);
}
.ns-tt-clip-path {
  d: path("M0 2h13a1 1 0 0010 10v14H0Z");
  transition: d var(--tt-duration) ease;
  transition-delay: calc(var(--tt-duration) * 0.15);
}
.ns-tt-sun {
  transform-origin: center;
  transform: scale(1.7);
  transition: transform var(--tt-duration) ease;
}
.ns-tt-ray {
  transform-box: view-box;
  transform-origin: center;
  transform: scale(0);
  opacity: 0;
  transition: transform var(--tt-duration) ease, opacity var(--tt-duration) ease;
  transition-delay: 0ms;
}
[data-theme="light"] .ns-tt-clip-path {
  d: path("M0 0h25a1 1 0 0010 10v14H0Z");
  transition-delay: 0ms;
}
[data-theme="light"] .ns-tt-sun { transform: scale(1); }
[data-theme="light"] .ns-tt-ray {
  transform: scale(1);
  opacity: 1;
  transition-delay: calc(var(--tt-duration) * 0.15);
}

/* Note: `--ns-*` color tokens come from the per-page stylesheet
   (profile.css / homepage.css / inbox.css). Don't redeclare them here —
   doing so pins the chrome to dark values via self-referential cascade
   and breaks light-mode rendering. */