/* ── zeq-app-nav.css — Shared standalone app bar for all Zeq apps ────────── */
/* Drop this + zeq-app-nav.js into any app page. No other nav needed.       */

/* Universal "?" guide button — RETIRED 2026-07-19.
   The script that mounted it is now a no-op stub and every injector has been
   removed, but browsers and installed PWAs hold old JS for as long as their
   cache says they may. This rule is the backstop: a stale cached script can
   still create the element, and it will never be seen. Cheap, and it makes
   the removal independent of cache expiry across ~14 domains. */
#zeq-guide-button,
#zeq-guide-panel,
#zeq-guide-backdrop { display: none !important; }

.zeq-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1.25rem;
  /* Installed to a phone home screen the page draws under the system status
     bar, so the clock, signal and battery landed on top of the app title and
     the account chip. Push the bar below the inset. env() resolves to 0px in
     a normal browser tab and on desktop, so this costs nothing there. */
  padding-top: calc(0.55rem + env(safe-area-inset-top, 0px));
  padding-left: calc(1.25rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1.25rem + env(safe-area-inset-right, 0px));
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}

/* ── Left: logo + title ─────────────────────────────────────────────────── */
.zeq-appbar-left {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.zeq-appbar-logo {
  font-size: 0.85rem;
  font-weight: 700;
  color: #00ff88;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.zeq-appbar-logo:hover { color: #00ff88; text-decoration: none; }
.zeq-appbar-dot {
  width: 8px;
  height: 8px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.5);
  animation: zeq-appbar-pulse 0.777s ease-in-out infinite;
}
@keyframes zeq-appbar-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); opacity: 0.7; }
}
.zeq-appbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.1);
}
.zeq-appbar-subtitle {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 400;
}

/* ── Active state-machine pill (slug + status) ──────────────────────────── */
/* EX.POLISH (2026-05-19) — when the pill is hidden via the HTML `hidden`
   attribute (no authed session yet), `display: inline-flex` was winning
   and the "offline / —" placeholder leaked into every page's nav. Force
   display:none on the hidden state. */
.zeq-appbar-machine[hidden] { display: none !important; }
.zeq-appbar-machine {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.6rem;
  padding: 0.22rem 0.55rem;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.zeq-appbar-machine:hover {
  border-color: rgba(0, 255, 136, 0.38);
  background: rgba(0, 255, 136, 0.08);
  text-decoration: none;
}
.zeq-machine-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.zeq-machine-dot.active {
  background: #00ff88;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.55);
  animation: zeq-machine-pulse 1.554s ease-in-out infinite;
}
.zeq-machine-dot.inactive {
  background: rgba(255, 184, 77, 0.7);
  box-shadow: 0 0 4px rgba(255, 184, 77, 0.35);
}
@keyframes zeq-machine-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.zeq-machine-slug {
  /* Hidden — the machine slug duplicated the right-side ZID button.
     Keep only the status pill (dot + "active") on the left. */
  display: none;
}
.zeq-machine-status {
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  font-size: 0.55rem;
  letter-spacing: 0.1em;
}
/* Green when the dot is active (sibling selector — dot sits before status). */
.zeq-machine-dot.active ~ .zeq-machine-status {
  color: #00ff88;
}

/* ── Right: ZID button + dropdown ───────────────────────────────────────── */
.zeq-appbar-right { position: relative; }

.zeq-appbar-account {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  color: #00ff88;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  transition: all 0.15s;
}
.zeq-appbar-account:hover {
  border-color: rgba(0, 255, 136, 0.3);
  background: rgba(0, 255, 136, 0.06);
}
.zeq-appbar-account .zeq-chevron {
  font-size: 0.5rem;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.15s;
}
.zeq-appbar-account.open .zeq-chevron { transform: rotate(180deg); }

.zeq-appbar-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  padding: 0.35rem 0;
  z-index: 1100;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.zeq-appbar-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.32);
  padding: 0.4rem 0.8rem 0.2rem;
}
.zeq-appbar-menu.show { display: block; }
.zeq-appbar-menu a {
  display: block;
  padding: 0.5rem 0.8rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  transition: all 0.1s;
}
.zeq-appbar-menu a:hover {
  background: rgba(0, 255, 136, 0.08);
  color: #00ff88;
}
.zeq-appbar-menu a.active {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.04);
}
.zeq-appbar-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 0.3rem 0;
}
.zeq-appbar-signout {
  color: rgba(255, 130, 130, 0.85) !important;
  font-weight: 500;
}
.zeq-appbar-signout:hover {
  background: rgba(255, 80, 80, 0.08) !important;
  color: #ff7a7a !important;
}

/* ── One row, always. Logo pinned left, account chip pinned top-right, on
   every screen size from index to every room. The bar must NEVER wrap to a
   second row (that pushed the chip down and the page title up behind it).
   The left cluster is small (just the ZEQ logo) so it shrinks instead of
   wrapping; the right chip keeps its natural width in the corner. ─────── */
.zeq-appbar { flex-wrap: nowrap !important; }
.zeq-appbar-left { min-width: 0; overflow: hidden; }        /* shrinks, never wraps the bar */
.zeq-appbar-right, .zeq-appbar-right.nav-actions {
  flex: 0 1 auto !important;                                 /* pinned right, may shrink */
  margin-left: auto;
  flex-wrap: nowrap !important;
  min-width: 0;
  max-width: 70vw;                                           /* never eat the whole bar */
  justify-content: flex-end !important;
}
/* The account chip (rendered by the picker) must truncate, never wrap the bar. */
.zeq-appbar-right > *,
.zeq-appbar-right .zeq-account-chip,
.zeq-appbar-right button {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .zeq-appbar { height: auto; column-gap: 8px; max-width: 100vw; }
  /* Give the chip room from the edge and cap it so the ZID truncates cleanly. */
  .zeq-appbar-right, .zeq-appbar-right.nav-actions { max-width: 62vw; }
  .zeq-appbar-account, .zeq-appbar-right button { max-width: 62vw; }
}