/* ============================================================================
   NabGol — CHAT HEADER  (the top bar: robot identity + toolbar)
   ----------------------------------------------------------------------------
   Owns EXACTLY one thing: `.chat-header` and everything inside it. Does not
   touch `#messages` or `.chat-input` — those are chat-canvas.css's and (later)
   chat-composer.css's, by the same one-owner-per-region rule.

   Why this file exists: the message area now speaks one visual language
   (chat-canvas.css: hairline instead of frame, a three-level ink scale, green
   spent once). The header still spoke the old one — a semi-opaque colour bar
   with a blurred backdrop and a fully-saturated #10b981 toggle fill
   (`.autoplay-toggle.is-on`) — colour decisions from a different era, on the
   same bar the canvas now sits under.

   Scope decision: this file only retints EXISTING surfaces (background,
   border, color) with the same --nbgc-* tokens chat-canvas.css already
   defines. It does not touch:
     - size, padding, gap or breakpoints — the header's responsive layout
       (icon-only <-> label-reveal-on-hover, the 40px touch target inside the
       crowded mobile row, the desktop stage-width clamp) was already tuned
       across several passes (style-desktop.css "v13".."v24"); a pure skin
       pass has no reason to re-litigate hand-tuned geometry.
     - `.avatar` — `body.tutor-composer-simple .chat-header .avatar:not(.has-img)`
       in chat-flagship-polish.css paints a per-subject hue ring + monogram
       (real product signal: which subject this tutor teaches), not a stray
       saturated gradient. Retinting it here would `!important`-clobber that
       feature on every tutor robot regardless of specificity, since a plain
       accent-wash rule has no way to defer to a more specific one once both
       carry `!important`. Left alone on purpose.
     - the danger-red on "clear chat", the inactive/red half of the presence
       pill: no --nbgc-* equivalent exists for either, and inventing one is
       against this row's own wall (docs/CHAT_CANVAS_HANDOFF.md).

   Load order: after chat-canvas.css, in both templates. `!important` mirrors
   chat-canvas.css's own reasoning: style-desktop.css/style-mobile.css claim
   these same properties with `!important` across several breakpoints, so a
   plain declaration here would lose to whichever of them loaded last.

   The light-theme duplicate block at the end exists because
   chat-flagship-polish.css already ships its OWN light-theme unification pass
   for `.chat-header` (`html[data-theme="light"] body:is(...) .chat-header {
   background: var(--bg-secondary) !important; ... }`, dated well before this
   file). That selector's specificity (0,3,2) or (0,4,2) beats this file's
   plain (0,2,1)/(0,3,1) rules even though this file loads later — load order
   only breaks TIES, and these are not ties. Every duplicate below repeats
   that exact selector shape so the tie is real and this file's later load
   order decides it. Found by measurement (test_chat_header_gate.js caught
   the light-mode header rendering fully opaque), not by inspection.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1) THE BAR ITSELF — hairline instead of a filled, blurred slab.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header {
  /* One line, one token, owner's call: the whole chat page gets the canvas's
     face, so the robot's name in the header and the answer under it are set in
     the same voice. Defined once in chat-canvas.css; never respell it here. */
  font-family: var(--nbgc-font) !important;
  background: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--nbgc-hairline) !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
   2) IDENTITY TEXT — name and description. Ink hierarchy matches the canvas
   (ink-strong for the name, ink-soft for the description). Avatar excluded —
   see the file header.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header .name {
  color: var(--nbgc-ink-strong) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .robot-desc,
body:is(.desktop-chat, .mobile-chat) .chat-header .info-text .robot-desc {
  color: var(--nbgc-ink-soft) !important;
}

/* ---------------------------------------------------------------------------
   3) PRESENCE — "active"/"inactive" is a real fact (docs/ROUTER.md's honesty
   rule), not decoration, so both states stay legible; only the accent side
   moves onto --nbgc-* tokens. The inactive/red pill (style-common.css) has no
   --nbgc-* equivalent and is left as-is on purpose.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header .robot-status .status-dot {
  background: var(--nbgc-ink-faint) !important;
  box-shadow: none !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .robot-status.active {
  color: var(--nbgc-accent-ink) !important;
  background: var(--nbgc-accent-wash) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .robot-status.active .status-dot {
  background: var(--nbgc-accent-ink) !important;
  box-shadow: none !important;
}
body.mobile-chat .chat-header .robot-status-line.active {
  color: var(--nbgc-accent-ink) !important;
}
body.mobile-chat .chat-header .robot-status-line.inactive {
  color: var(--nbgc-ink-faint) !important;
}

/* ---------------------------------------------------------------------------
   4) TOOLBAR — ghost/icon buttons. Ink-based instead of pure white/black, so
   the same three-level ink scale reads across the whole page, not just the
   canvas. Danger (clear chat) keeps its existing red: no --nbgc-* equivalent
   exists for it and it is not the "green overuse" this row is about.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn,
body:is(.desktop-chat, .mobile-chat) .chat-header > .icon-btn {
  background: none !important;
  background-image: none !important;
  color: var(--nbgc-ink-soft) !important;
  /* A ghost control casts no shadow. This one line also fixes a real leftover:
     chat-mobile-flagship.css paints `.new-chat-header-btn` as a green gradient
     WITH a matching `0 2px 10px rgba(34,197,94,.35)` glow. The rule above
     already suppressed the gradient (it carries one class more), but nothing
     ever suppressed the glow — so the mobile header shipped a green halo
     around a transparent button. Measured, not spotted: the accent-budget
     harness found accent pixels around a control whose computed background is
     rgba(0,0,0,0). */
  box-shadow: none !important;
}
/* Focus must stay visible after that `box-shadow: none`. An edge, not a fill —
   the same weight the canvas uses for the closing question, and transient. */
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn:focus-visible,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn:focus-visible,
body:is(.desktop-chat, .mobile-chat) .chat-header > .icon-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--nbgc-accent-edge) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn:hover,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn:hover,
body:is(.desktop-chat, .mobile-chat) .chat-header > .icon-btn:hover,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn:focus-visible,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn:focus-visible,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn.active,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn.active {
  background: var(--nbgc-surface-2) !important;
  color: var(--nbgc-ink-strong) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn.danger,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn.danger {
  background: none !important;
}

body:is(.desktop-chat, .mobile-chat) .chat-header .header-divider {
  background: var(--nbgc-hairline-strong) !important;
}

/* ---------------------------------------------------------------------------
   5) AUTOPLAY TOGGLE — the loudest thing on the whole page, measured.
   The first pass moved this off a raw #10b981 and onto var(--nbgc-accent),
   which fixed the COLOUR but not the WEIGHT: a 38x22 pill filled solid accent
   is ~700 accent pixels inside a 56px bar. The accent-budget harness
   (live/tools/_chat_accent_budget.js) put a number on it — the header spent
   3.19% of its own area on accent while the entire message canvas spent
   0.09%, i.e. 35x the density, on a control that is a SETTING, not an action.

   So the on-state keeps every cue except the fill: an accent wash on the
   track, an accent edge around it, and the thumb slid right in ink-strong
   instead of plain white. Off-state gets a quieter thumb (ink-soft) so the
   two states differ in three ways at once — position, track tint, thumb ink —
   and not just in one. Zero accent FILL remains in this bar; see the doc
   section "سلسله‌مراتب: سهمِ اکسنت" for why the header's budget is zero and
   the composer's is one.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header .ghost-btn.autoplay-toggle .ui-toggle {
  background: var(--nbgc-surface-2) !important;
  border-color: var(--nbgc-hairline-strong) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .ghost-btn.autoplay-toggle .ui-toggle-thumb {
  background: var(--nbgc-ink-soft) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .ghost-btn.autoplay-toggle.is-on .ui-toggle {
  background: var(--nbgc-accent-wash) !important;
  border-color: var(--nbgc-accent-edge) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .ghost-btn.autoplay-toggle.is-on .ui-toggle-thumb {
  background: var(--nbgc-ink-strong) !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .ghost-btn.autoplay-toggle.is-on .btn-label {
  color: var(--nbgc-accent-ink) !important;
}

/* ---------------------------------------------------------------------------
   5b) NEW CHAT (+) — the header's ONE weighted control.
   A bar where everything is ghost has no entry point, and "new conversation"
   is the only thing in this bar that is an action rather than a setting. It
   gets weight the way the canvas does — surface and ink — instead of the way
   the toggle used to, which was to grab the product's one accent. Rest sits on
   a surface with a hairline so it out-reads its ghost neighbours even before
   hover; hover steps up to --nbgc-surface-raised, which exists precisely
   because surface-2 is already the ghost hover weight.
   The icon's `stroke: #fff` from chat-mobile-flagship.css is redirected to
   currentColor: it was the only header icon painted pure white while every
   sibling was ink-soft, which read as "this one is lit up" for no reason.
   --------------------------------------------------------------------------- */
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn {
  background: var(--nbgc-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--nbgc-hairline-strong) !important;
  color: var(--nbgc-ink-strong) !important;
  box-shadow: none !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn .ico {
  color: var(--nbgc-ink-strong) !important;
  stroke: currentColor !important;
}
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn:hover,
body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn:focus-visible {
  background: var(--nbgc-surface-raised) !important;
  color: var(--nbgc-ink-strong) !important;
}

/* ---------------------------------------------------------------------------
   5c) TOUCH TARGETS — the open debt row D wrote down and deferred.
   style-mobile.css pins these to 40px so all six controls fit the 56px bar;
   growing them re-opens a layout that took several passes to settle, which is
   why row D refused to. But the target that matters is the HIT area, not the
   painted box: an ::after that bleeds 3px past the button reaches 46px without
   moving a single pixel of layout. Nothing in this header uses ::after
   (measured — every header button's computed ::after content is `none`), and
   `border-radius: inherit` keeps the hit shape honest rather than square.
   --------------------------------------------------------------------------- */
body.mobile-chat .chat-header .header-actions .ghost-btn,
body.mobile-chat .chat-header .header-actions .icon-btn,
body.mobile-chat .chat-header > .icon-btn {
  position: relative;
  overflow: visible !important;
}
body.mobile-chat .chat-header .header-actions .ghost-btn::after,
body.mobile-chat .chat-header .header-actions .icon-btn::after,
body.mobile-chat .chat-header > .icon-btn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  /* Hit area only — it must never paint, and it must never eat the click that
     belongs to the button it belongs to (pointer events on a child still
     bubble to the button, so this widens the target instead of blocking it). */
  background: none;
}

/* ---------------------------------------------------------------------------
   6) ADMIN ROBOT SWITCHER — only rendered for admins with >1 selectable
   robot, but still `.chat-header`'s child, so still this file's scope.
   --------------------------------------------------------------------------- */
body.desktop-chat .chat-header .robot-selector select {
  background: var(--nbgc-surface) !important;
  border: 1px solid var(--nbgc-hairline) !important;
  color: var(--nbgc-ink) !important;
}

/* ---------------------------------------------------------------------------
   7) LIGHT-THEME TIE-BREAKS — see the file header. Same selector shape as the
   chat-flagship-polish.css rules being out-specificity'd, so this is a real
   tie that this file's later load order settles, not a specificity fight
   this file could lose again the next time either file is edited.
   --------------------------------------------------------------------------- */
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header,
html[data-theme="light"] body.mobile-chat .chat-header {
  background: none !important;
  border-bottom-color: var(--nbgc-hairline) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .name {
  color: var(--nbgc-ink-strong) !important;
}
html[data-theme="light"] body.mobile-chat .chat-header .robot-status-line.active {
  color: var(--nbgc-accent-ink) !important;
}
html[data-theme="light"] body.mobile-chat .chat-header .robot-status-line.inactive {
  color: var(--nbgc-ink-faint) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .icon-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .ghost-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .icon-btn {
  color: var(--nbgc-ink-soft) !important;
}
/* The one weighted control has to out-rank the blanket rule right above it,
   which paints every header button ink-soft — otherwise "+" would be exactly
   as quiet as the settings gear in day theme and the hierarchy would exist
   only at night. */
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn,
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn .ico {
  color: var(--nbgc-ink-strong) !important;
}
html[data-theme="light"] body:is(.desktop-chat, .mobile-chat) .chat-header .header-actions .new-chat-header-btn {
  background: var(--nbgc-surface-2) !important;
  border-color: var(--nbgc-hairline-strong) !important;
}

/* ---------------------------------------------------------------------------
   8) THE ANCHOR BAR STAYS REACHABLE — the one rule in this file that is not
   about colour.

   Measured defect (test_controls_always_reachable.js): opening the gear's own
   menu showed #sheetOverlay, a full-viewport scrim at z-index 1250 painting
   rgba(2,6,23,.5) with a 2px backdrop blur, over a header at z-index 40. Every
   header control — gear, new chat, autoplay, theme, account, menu — stayed
   legible through the scrim and stopped answering touch. The same happened at
   z-index 1190 with #sidebarOverlay when the chats drawer opened. A control the
   user can still see has to still work; a smeared, dead copy of the header is
   worse than no header, because it invites the tap it cannot serve.

   So while a panel is open the header rises ABOVE that panel's scrim, and only
   its scrim: high enough to take clicks, low enough that the panel itself still
   draws over it (#moreSheet is 1300, .sidebar is 1200 — a header above those
   would cut the corner off the very panel it opened). script.js turns each
   class on with the panel and off again with it, and makes every header button
   dismiss the open panel before doing its own job.

   The blur is cancelled here too: the scrim's backdrop-filter samples whatever
   is painted below it, so lifting the header out of its stacking order without
   this left the header sharp but still standing in a blurred hole.
   --------------------------------------------------------------------------- */
body.mobile-chat.nabgol-sheet-open .chat-header {
  z-index: 1260 !important;   /* > #sheetOverlay 1250, < .bottom-sheet 1300 */
}
body.mobile-chat.nabgol-chats-open .chat-header {
  z-index: 1195 !important;   /* > #sidebarOverlay 1190, < .sidebar 1200 */
}
body.mobile-chat:is(.nabgol-sheet-open, .nabgol-chats-open) .chat-header {
  position: relative;         /* z-index needs a positioned box to mean anything */
  background: var(--nbgc-header-lifted) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}