/* =========================================================
   GEXI — public/shell/gx-header.css   (SU4 — the persistent header row)

   The top grid row (#gx-header) spanning all zones: back-chevron (left) + breadcrumb + ＋New (right). FUNCTIONAL +
   token-driven (var(--*) only); gx-skin.css layers the neon ＋New on top. Mounted only under GEXI_SHELL (flag-off
   byte-identical). The grid row itself is declared in appShell.css; this file styles the header's contents.
   ========================================================= */

#gx-header {
  grid-area: header;
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--gx-header-h, 52px); padding: 0 var(--space-3);
  background: var(--void, var(--bg)); border-bottom: 0.5px solid var(--line); color: var(--text);
}

/* the AUTHORITATIVE back-chevron — dimmed (disabled) when there's nowhere to go back to (stack<=1, no overlay, depth 0). */
.gx-hd-back {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-sm, 8px); color: var(--text);
  font-size: 24px; line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.gx-hd-back:hover:not(:disabled) { background: var(--card-alt); }
.gx-hd-back:disabled { opacity: 0.3; cursor: default; }
.gx-hd-back:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* the CENTRE — the static "✦ GEXI" wordmark, or a room name when a room is staged. Centred like Gemini. */
.gx-hd-center { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gx-hd-here { font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* W-a — the credits-in WALLET chip (right cluster, next to ＋New). A CALM balance, never a CTA — a credit count + glyph.
   Law #4: a balance, never a $. Token-only; the glyph carries the brand accent. */
.gx-hd-wallet {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 6px 10px; font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--text); text-decoration: none; border-radius: var(--radius, 10px);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background var(--dur-fast) var(--ease-out);
}
.gx-hd-wallet:hover { background: var(--card-alt); }
.gx-hd-wallet:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.gx-hd-wallet-ic { color: var(--brand-500); line-height: 1; }
.gx-hd-wallet.is-anon { color: var(--text-dim, var(--text)); font-weight: 500; }
.gx-hd-wallet.is-anon .gx-hd-wallet-ic { opacity: .6; }

/* the primary ＋New (right) — functional brand; gx-skin.css neons it. */
.gx-hd-new {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); font: inherit; font-weight: 640; font-size: var(--text-sm);
  color: var(--on-brand, #fff); background: var(--brand-500); border: 0; border-radius: var(--radius, 10px); cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}
.gx-hd-new:hover { filter: brightness(1.06); }
.gx-hd-new:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.gx-hd-new-ic { font-size: var(--text-base); line-height: 1; }

/* MOBILE — the fixed hamburger owns the top-left; clear it, and drop the ＋New label (keep the icon). */
@media (max-width: 959px) {
  /* clear the fixed burger (left) + theme toggle (right), AND honour the notch/side safe-areas (mobile audit). */
  #gx-header { height: auto; padding-top: env(safe-area-inset-top, 0px); padding-left: max(56px, env(safe-area-inset-left, 0px)); padding-right: max(52px, env(safe-area-inset-right, 0px)); }
  .gx-hd-back { min-width: 44px; min-height: 44px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }   /* 44px touch floor for the primary mobile back affordance */
  .gx-hd-new-l { display: none; }
  /* 44px touch floor for the icon-only ＋New (mirrors .gx-hd-back above); justify-content centres the lone glyph in the wider box. */
  .gx-hd-new { min-width: 44px; min-height: 44px; justify-content: center; padding: var(--space-1) var(--space-2); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-hd-back, .gx-hd-new { transition: none; }
}