/* Shared app navigation — NUM-613 (UX-3), Option B (Board pick) + Option A fallback.
 *
 * Option B after the Board's live look: an icon rail and nothing else in layout.
 * A domain's destinations appear in a `position: fixed` flyout on hover, which
 * paints over the page and takes no width — so `--nh-nav-w` is a constant 60px
 * in mode B and opening the menu cannot reflow the content or add a horizontal
 * scrollbar. (The rejected first cut opened a second fixed column instead.)
 *
 * The nav is a fixed-position overlay on the far left of every page, and pages
 * get out of its way with a single `padding-left: var(--nh-nav-w)` on the body
 * (nav.js only changes the variable for the Option A fallback). That
 * keeps the integration one line per page instead of a layout rewrite: the chat
 * shell's fixed-height grid, the boards/agents flex columns and the min-height
 * pages all cope with body padding unchanged.
 *
 * Colour tokens come from chat.css (loaded first on every page); the `var(x, y)`
 * fallbacks keep the rail legible even on the pages that define their own
 * `--border`/`--fg` names. */

:root {
  --nh-rail-w: 60px;
  /* Mode B's steady state, and the value the page is styled against before
     nav.js has run — so the first paint already reserves the right gutter and
     nothing jumps. nav.js only ever raises it for the Option A fallback. */
  --nh-nav-w: var(--nh-rail-w);
  /* Height of the top-right account bar (NUM-613 round 3). The reserved height
     starts at zero and nav.js raises it to `--nh-topbar-size` only on the pages
     where this nav owns the account corner — the chat SPA keeps its own NUM-60
     dropdown inside the chat header and reserves nothing. */
  --nh-topbar-size: 44px;
  --nh-topbar-h: 0px;
}

body.nh-has-nav {
  padding-left: var(--nh-nav-w);
  transition: padding-left 120ms ease;
}

/* Vertical space for the account bar. Reserving it on the body (rather than
   letting the bar float over the page) is what keeps it from covering a page's
   own top-right controls — the boards toolbar's "+ New" / refresh buttons sit
   exactly there. The page keeps its FULL width: nothing here touches the
   horizontal axis, so the Board's "no reflow, no horizontal scroll" constraint
   from round 2 is unaffected. */
body.nh-has-account {
  padding-top: var(--nh-topbar-h);
}

/* --- The top-right account bar (Board round 3) ---------------------------- */

/* Starts where the rail ends so the rail stays the full height of the viewport
   and keeps reading as the app's one persistent chrome. */
.nh-topbar {
  position: fixed;
  top: 0;
  left: var(--nh-nav-w);
  right: 0;
  height: var(--nh-topbar-h);
  z-index: 35; /* under the rail + its flyouts (40), over the page */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 14px;
  background: var(--panel, #171a21);
  border-bottom: 1px solid var(--line, #2a2f3a);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.nh-account { position: relative; }

.nh-account-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 5px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--fg, #e6e9ef);
  font: inherit;
  font-size: 13.5px;
}
.nh-account-btn:hover,
.nh-account-btn[aria-expanded="true"] {
  background: var(--panel-2, #1e222b);
  border-color: var(--line, #2a2f3a);
}
.nh-account-btn:focus-visible {
  outline: 2px solid var(--accent, #6ea8fe);
  outline-offset: 2px;
}

.nh-account-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2, #1e222b);
  border: 1px solid var(--line, #2a2f3a);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted, #8b93a1);
}
.nh-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nh-caret { color: var(--muted, #8b93a1); font-size: 11px; }

/* The dropdown itself — anchored to the button's right edge so it opens INTO
   the page rather than off-screen. */
.nh-account-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  padding: 6px;
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nh-account-menu[hidden] { display: none; }

.nh-account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg, #e6e9ef);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
}
.nh-account-item:hover { background: var(--panel-2, #1e222b); }
.nh-account-item.is-active { color: var(--accent, #6ea8fe); }
.nh-account-item:focus-visible {
  outline: 2px solid var(--accent, #6ea8fe);
  outline-offset: -2px;
}

.nh-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --- Tier 1: the domain rail (Option B) ----------------------------------- */

.nh-rail {
  width: var(--nh-rail-w);
  flex: 0 0 var(--nh-rail-w);
  background: var(--panel, #171a21);
  border-right: 1px solid var(--line, #2a2f3a);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.nh-brand {
  display: block;
  line-height: 0;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.nh-brand img {
  height: 26px;
  width: auto;
  display: block;
}

.nh-rail-btn {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted, #8b93a1);
  cursor: pointer;
  font: inherit;
}
.nh-rail-btn .nh-icon {
  font-size: 17px;
  line-height: 1.1;
}
.nh-rail-label {
  font-size: 9.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nh-rail-btn:hover {
  background: var(--panel-2, #1f232c);
  color: var(--text, #e6e8ec);
}
.nh-rail-btn:focus-visible {
  outline: 2px solid var(--accent, #5b8cff);
  outline-offset: 1px;
}
.nh-rail-btn.is-selected,
.nh-rail-btn.is-open {
  background: var(--panel-2, #1f232c);
  border-color: var(--line, #2a2f3a);
  color: var(--text, #e6e8ec);
}
/* The open domain also keeps the hover tint while the pointer is over the
   flyout, so the icon and its menu still read as one object. */
.nh-rail-btn.is-open {
  border-color: var(--accent, #5b8cff);
}
/* The selected domain also carries an accent edge, so the rail still says which
   section you are in after the sub-panel is collapsed away. */
.nh-rail-btn.is-selected::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 30px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #5b8cff);
}
.nh-rail-btn {
  position: relative;
}

.nh-rail-foot {
  margin-top: auto;
  padding-top: 8px;
  flex: 0 0 auto;
}
.nh-mode-toggle {
  background: transparent;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 8px;
  color: var(--muted, #8b93a1);
  font: inherit;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 5px;
  cursor: pointer;
}
.nh-mode-toggle:hover {
  color: var(--text, #e6e8ec);
  border-color: var(--accent, #5b8cff);
}

/* --- Tier 2: the hover flyout (Option B) ---------------------------------- */

/* `position: fixed`, so it is outside the nav's flex row and outside the page's
   layout entirely: it paints OVER the content and contributes no width. That is
   what makes opening a domain unable to shift the page or introduce a horizontal
   scrollbar — the Board's first look at B had this as a second fixed column,
   which stole width from the boards grid. */
.nh-flyout {
  position: fixed;
  left: var(--nh-rail-w);
  min-width: 212px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  z-index: 41;
  background: var(--panel, #171a21);
  border: 1px solid var(--line, #2a2f3a);
  border-left: none;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: nh-fly-in 110ms ease-out;
}
.nh-flyout[hidden] {
  display: none;
}
@keyframes nh-fly-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nh-flyout {
    animation: none;
  }
}
.nh-fly-title {
  margin: 2px 0 8px 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #8b93a1);
}
.nh-fly-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nh-sub-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #e6e8ec);
  text-decoration: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.nh-sub-item .nh-icon {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
}
.nh-sub-item .nh-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nh-sub-item:hover {
  background: var(--panel-2, #1f232c);
}
.nh-sub-item:focus-visible {
  outline: 2px solid var(--accent, #5b8cff);
  outline-offset: 1px;
}
.nh-sub-item.is-active {
  background: var(--panel-2, #1f232c);
  border-color: var(--line, #2a2f3a);
}

/* --- Option A: one grouped rail (fallback, same IA tree) ------------------ */

.nh-grouped {
  width: var(--nh-nav-w);
  background: var(--panel, #171a21);
  border-right: 1px solid var(--line, #2a2f3a);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.nh-grouped .nh-brand {
  margin: 2px 0 10px 8px;
}
.nh-grouped .nh-brand img {
  height: 28px;
}
.nh-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.nh-group-title {
  margin: 6px 0 4px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #8b93a1);
}
.nh-grouped .nh-sub-item {
  font-size: 13.5px;
  padding: 6px 10px;
}

/* --- Narrow viewports ----------------------------------------------------- */

/* Mode B needs no break — the rail is 60px everywhere and the flyout already
   overlays. Only the Option A fallback, a real 232px column, has to give width
   back on a phone; it floats over the page there instead. */
@media (max-width: 860px) {
  body.nh-has-nav {
    padding-left: var(--nh-rail-w);
  }
  .nh-nav[data-mode="a"] .nh-grouped {
    width: 208px;
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
  }
}