/* web/components/navbar/navbar.css — [NAV1 shared-navbar-v1]

   The shared navbar's own stylesheet. Loaded LAST of the navbar's sheets so
   it can retire rules without editing the files that own them.

   SCOPE NOTE — read before adding here.
   The navbar's visual rules still live across five files:
       brandkit.css  111 refs   (its Phase 1 was "D. Top header of the chat view")
       app.css        40 refs   (the original QtWebEngine port)
       overrides.css   8 refs   (.devchip)
       theme_b.css     5 refs   (.devchip, #ctxpill)
       mobile.css      1 ref    (#ctxpill)
   Those were deliberately NOT moved in this pass: #chathead is the chat
   page's chrome, and chat is the one page that must not regress. Moving 165
   declarations out of a five-deep cascade is its own task with its own QA
   pass. This file holds only what the shared-navbar change itself needs. */

/* ---- [NAV1] #viewclose retired ------------------------------------------
   The global "Back to chat" X floated over every takeover view's top-right
   corner (app.css:263 — absolute, top:14px right:18px, z-index:50). With one
   navbar on every page there is no takeover state to escape: the left rail
   is the navigation.

   It is hidden, NOT deleted. app.js:690/714 (bindViewClose) and
   boot/packs.js:67 both getElementById('viewclose') and would throw on null,
   so the element stays in the DOM and simply never paints. Deleting the
   markup is a separate change that has to edit those three call sites.

   To restore: delete this block. Nothing else was touched.
   Logged in b2c-vault/Removed-for-redesign.md section 1.1. */
#viewclose { display: none !important; }

/* ---- [NAV1] the navbar sits ABOVE the views, not inside one --------------
   #chathead is now a direct child of #stage (index.html), because
   agents.js:429 and workflows.js:155 both run `host.innerHTML = ""` where
   host IS their view element — any navbar parked inside a view was deleted
   from the DOM the first time either page opened.

   app.css:291 has `#stage { flex: 1; min-width: 0; display: flex; }` — a ROW,
   with each .view as a full-size child. Adding a header above the views means
   that row becomes a column. Two declarations do it, and app.css stays
   byte-identical as the convention requires:

     - #stage: column, so [ navbar ][ active view ] stack vertically.
     - .view : min-height 0. In a row the `min-width: 0` on .view is what lets
       inner scroll panes (#messages, .prjx, .agx-body) shrink below their
       content. Turned on its side the equivalent axis is height, and without
       it a long chat would push the composer off-screen instead of scrolling.

   #chathead already carries `flex: none` (app.css:144), so it keeps its 56px
   and the view takes the rest.

   To restore the old structure: delete this block and move the #chathead
   markup back inside #view-chat. */
#stage { flex-direction: column; }
.view  { min-height: 0; }

/* ---- [NAV1] #nav-title — the navbar's own title node ---------------------
   #convtitle belongs to app.js (setConvTitle / openConv). Rather than write
   the page name into it and have to put the conversation title back later —
   which loses anything app.js wrote while another page was open — the navbar
   ships a second title node and swaps which one is visible.

   [NAV2] Deliberately heavier than #convtitle (brandkit.css #convtitle,
   kit 4.2: 18/600). At 18/600 the page name read as ordinary text, not as
   the page heading (user, 2026-10-10) - and since pages no longer repeat
   their name in the body, this IS the page heading. #convtitle, the chat's
   conversation title, stays as it is: the chat page is the reference. */
#nav-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- [NAV3] In-page dynamic navbar integration -------------------------- */
#chathead[data-has-custom] .chathead-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

#nav-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
#nav-custom[hidden] {
  display: none !important;
}

.nav-back-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.nav-back-btn:hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
  color: var(--text);
}
.nav-back-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nav-sub-title,
#chathead h1.nav-sub-title,
#chathead h2.nav-sub-title,
#chathead h3.nav-sub-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  color: var(--text);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#nav-custom .pill,
#nav-custom .pph-pills,
#nav-custom .agx-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  flex: none;
}
#nav-custom .pill svg,
#nav-custom .pph-pills svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
#nav-actions[hidden],
#nav-actions:empty {
  display: none !important;
}

/* Ensure buttons placed in #nav-actions match navbar standard 32px height */
#nav-actions .btn,
#nav-actions .agx-btn,
#nav-actions .wfx-btn {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}
#nav-actions .prjh-ibtn,
#nav-actions .agx-ibtn,
#nav-actions .wfx-ibtn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* Retire duplicate in-page headers when merged into global navbar */
.prjx-wiz > .wh,
.prjx-pp > .pph2,
.wfx-wfhead {
  display: none !important;
}