/* geeViz Agent — Shared base styles (navbar, footer, reset)
   Requires: theme.css loaded first.
   ================================================ */

/* ── Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Page-level flex column ──
   ``html + body = 100vh flex column`` so the header (flex-shrink: 0)
   sticks to the top, the footer (flex-shrink: 0) sticks to the
   bottom, and the middle content area (``.page-container`` or
   ``.chat-area`` or whatever flex:1 child the page provides) is the
   ONLY thing that scrolls when content overflows. Without this, long
   /about / /docs / /scripts pages scroll the whole body
   past 100vh and the footer disappears below the fold. */
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  overflow: hidden;     /* the inner scroll container handles scrolling */
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* Firefox */
* { scrollbar-width: auto; scrollbar-color: var(--border) transparent; }

a { color: var(--accent); }
h1{margin-bottom:0px;}
/* ── Site header / navbar ── */
.site-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* Anchors the collapsed nav panel, which is positioned against the
     header rather than the page. */
  position: relative;
  padding: 0.6rem 1.2rem;
  /* border-bottom: 1px solid var(--border); */
  background: var(--surface);
  flex-shrink: 0;
  box-shadow: var(--card-shadow);
}
.header-logo-link { display: flex; align-items: center; gap: 0.5rem; }
.site-header .logo { height: 32px; width: auto; }
/* Optional company / agency cobrand mark (BrandLogos.company). Sits
   to the left of the main tenant logo. Slightly taller than the main
   logo so an aspect-square mark (RCR leaf) and a wide lockup
   (USDA-FS) both read at navbar scale. */
.site-header .company-logo { height: 36px; }
.site-header h1 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent);
}

.header-nav {
  display: flex;
  gap: 0.3rem;
  margin-left: 0.5rem;
  /* min-width:0 lets this flex item shrink below its content width,
     which is the precondition for the overflow scrolling set up in the
     mobile media queries. Without it the nav refuses to shrink, pushes
     past the header edge, and the last links become unreachable — no
     wrap, no scroll, and no menu button to fall back to. */
  min-width: 0;
}
.header-nav-link {
  font-size: 0.72rem;
  color: var(--muted);
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  transition: all 0.15s;
  /* Never let a label break mid-word or a link squash to a sliver when
     the row is tight; the row scrolls instead. */
  white-space: nowrap;
  flex: 0 0 auto;
}
.header-nav-link:hover {
  color: var(--text);
  background: var(--hover-overlay);
}
.header-nav-link.active {
  color: var(--accent);
  background: var(--accent-dim-light);
}

.header-user {
  font-size: 0.68rem;
  color: var(--muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Wrapper anchor around the email + chip so clicking either lands on
   /account/subscription. Hover state hints that the whole thing is
   interactive without pulling attention from the primary nav. */
.header-user-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  color: inherit;
  transition: background 0.12s ease;
}
.header-user-link:hover { background: var(--hover-overlay, rgba(255,255,255,0.06)); }
/* Round avatar from users.picture_url — shown left of the email. */
.header-user-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  flex-shrink: 0;
}
/* Small pill next to the email that shows Admin / Google Group /
   Marketplace. Direct-email admins & users don't get a chip — the
   email is signal enough for the default case. */
.header-user-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.08rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
  border: 1px solid transparent;
  white-space: nowrap;
}
.header-user-chip.chip-admin { background: var(--accent-dim);      color: var(--accent);     border-color: var(--accent); }
.header-user-chip.chip-staff { background: var(--highlight-dim);   color: var(--accent);     border-color: var(--accent); opacity: 0.85; }
.header-user-chip.chip-group { background: var(--highlight-dim);   color: var(--accent-alt); border-color: var(--accent-alt); }
.header-user-chip.chip-mkt   { background: rgba(66,133,244,0.15);  color: #4285f4;           border-color: #4285f4; }

/* ── Unit toggle (CDU / $ / Raw) button-group ──
   Shared across /usage and /account. Visually matches the
   Hourly/Daily/Weekly/Monthly buttons on /usage. Radio semantics
   preserved for a11y; the radio circle is hidden. */
.unit-toggle {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
}
.unit-toggle-opt {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border, #334155);
  color: var(--muted, #94a3b8);
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s;
  user-select: none;
}
.unit-toggle-opt:hover {
  color: var(--text, #e2e8f0);
  border-color: var(--accent, #3b82f6);
}
.unit-toggle-opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.unit-toggle-opt:has(input[type="radio"]:checked) {
  background: var(--accent, #3b82f6);
  border-color: var(--accent, #3b82f6);
  color: #fff;
  font-weight: 600;
}
.unit-toggle-opt:has(input[type="radio"]:focus-visible) {
  outline: 2px solid var(--accent, #3b82f6);
  outline-offset: 2px;
}

/* ── Site footer ──
   ``min-height: var(--footer-h)`` (NOT a fixed ``height``) — the footer
   uses ``flex-wrap: wrap`` so when "Powered by ..." doesn't fit on a
   single row (narrow viewport / many attribution logos), the row
   wraps and the box grows to fit. The prior fixed height clipped the
   wrapped row, hiding "Powered by" entirely on standard widths. */
.site-footer {
  /* border-top: 1px solid var(--border); */
  background: var(--surface);   /* matches .site-header so the footer reads as chrome, not page content */
  padding: 0.15rem 1.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  flex-shrink: 0;
  min-height: var(--footer-h);
  box-shadow: var(--card-shadow);
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer .footer-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.site-footer .footer-right img { height: 14px; }
.site-footer .footer-middle{
  margin-left:auto;
}

/* Shortcuts / help tooltip in the footer middle slot.
   Replaces the wrapping keyboard-shortcuts strip with a compact
   info icon; hover or focus expands a popover with the same info.
   Native ``title=""`` attribute is set as a fallback for touch. */
.shortcuts-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  cursor: help;
  padding: 0.15rem;
  font-size: 0.85rem;
}
.shortcuts-tip:hover, .shortcuts-tip:focus { color: var(--accent); outline: none; }
.shortcuts-tip .shortcuts-tip-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  font-size: 0.72rem;
  line-height: 1.55;
  white-space: nowrap;
  min-width: 260px;
  box-shadow: 0 4px 16px var(--backdrop-overlay, rgba(0,0,0,0.35));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  z-index: 100;
  text-align: left;
}
.shortcuts-tip:hover .shortcuts-tip-popover,
.shortcuts-tip:focus-within .shortcuts-tip-popover,
.shortcuts-tip:focus .shortcuts-tip-popover {
  opacity: 1;
  visibility: visible;
}
/* Corner shortcuts tip — small ? icon in the bottom-right of the
   input bubble. Absolute so it hovers in the input-bar's padding
   without shifting the send button or textarea. Dim by default,
   full accent on hover/focus. Popover opens up-and-to-the-left so
   it doesn't clip off the right edge of the viewport. */
.input-bar { position: relative; }
.input-bar .corner-shortcuts-tip {
  position: absolute;
  left: 0.1rem;
  bottom: 0.15rem;
  padding: 0.2rem 1.3rem;
  font-size: 0.65rem;
  opacity: 0.4;
  transition: opacity 0.15s;
}
.input-bar .corner-shortcuts-tip:hover,
.input-bar .corner-shortcuts-tip:focus,
.input-bar .corner-shortcuts-tip:focus-within {
  opacity: 1;
}
.input-bar .corner-shortcuts-tip .shortcuts-tip-popover {
  right: auto;
  left: 0;
  transform: none;
  bottom: calc(100% + 6px);
  top: auto;
}
.shortcuts-tip-popover kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  background: var(--code-bg, var(--bg));
  border: 1px solid var(--divider);
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: var(--text);
}
/* ── Hamburger button (chat page injects via header_left block) ── */
.hamburger-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.hamburger-btn:hover { opacity: 1; }

/* ── Page container (default content wrapper) ──
   Fills the space between header + footer via flex:1, and any content
   too tall to fit scrolls INSIDE the container — body never scrolls.
   ``min-height: 0`` is required for the flex item to actually shrink
   instead of expanding to fit its content (the classic flex-overflow
   gotcha). ``width: 100%`` so the container fills the viewport horizontally
   under the now-flex body. */
.page-container {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1.2rem;
  overflow-y: auto;
}

/* ── Sign out button ── */
.sign-out-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.75rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.sign-out-btn:hover {
  color: var(--error);
  border-color: var(--error);
}

/* ── Theme toggle button ── */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.8rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Footer bar ── */
.footer-bar {
  text-align: center;
  padding: 0.15rem 0 0.5rem;
  font-size: 0.62rem;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  margin: 0 0.4rem;
}
.footer-links a:hover { color: var(--text); }
/* ── AI disclaimer (chat only, collapsible) ── */
.ai-disclaimer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  padding: 0.2rem 1.2rem;
  line-height: 1.4;
  opacity: 0.6;
  max-width: 900px;
  margin: 0 auto;
  cursor: pointer;
  transition: opacity 0.15s;
}
.ai-disclaimer:hover { opacity: 0.9; }
.ai-disclaimer-full { display: none; }
.ai-disclaimer.expanded .ai-disclaimer-short { display: none; }
.ai-disclaimer.expanded .ai-disclaimer-full { display: inline; }

.footer-sep { color: var(--divider); margin: 0 0.05rem; }
.footer-powered {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--muted);
}
.footer-powered a {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.footer-powered a:hover { opacity: 0.8; }
.footer-icon {
  height: 1rem;
  width: 1rem;
  vertical-align: middle;
  margin-right:0.15rem;
}

/* ── Mobile: tablet ── */
@media (max-width: 768px) {
  .site-header {
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
  }
  .site-header .logo { height: 26px; }
  .site-header .company-logo { height: 30px; }
  .site-header h1 { font-size: 1rem; }
  /* The nav is a menu at this width (see the header menu block), so the
     old scrolling-row rules that used to live here are gone: the links
     no longer sit in the header at all. What remains is the brand
     giving up space to the session name beside it. */
  .header-logo-link {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
  }
  .page-container { padding: 1rem 0.8rem; }
  .footer-bar { font-size: 0.55rem; padding: 0.1rem 0.5rem 0.4rem; }
  .footer-powered a code { display: none; }
  .footer-icon { height: 0.85rem; width: 0.85rem; }
}

/* ── Mobile: phone ── */
@media (max-width: 480px) {
  .site-header h1 { display: none; }
  /* Smaller marks free real width for the session name. The logos are
     the largest fixed block in the header and the least useful one
     there — you already know which site you are on. */
  .site-header .logo { height: 20px; }
  .site-header .company-logo { height: 22px; }
  .page-container { padding: 0.8rem 0.5rem; }
  .footer-bar { font-size: 0.48rem; padding: 0.1rem 0.4rem 0.3rem; }
  .footer-links a { margin: 0 0.2rem; }
  .footer-sep { margin: 0 0.1rem; }
  .footer-powered {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem;
    font-size: 0.45rem;
  }
  .footer-powered a { font-size: 0.45rem; gap: 0.1rem; }
  .footer-icon { height: 0.75rem; width: 0.75rem; }
}

/* ── Header menu ─────────────────────────────────────────────
   A menu ONLY where the inline row stops fitting.

   Measured in a browser against the real header and the real
   stylesheet: chat needs 1487px to lay out inline without collision
   — nav links 736, account block 375, brand + session name the rest.
   Below that the links ran under the avatar ("Examples" was painted on
   top of it) because the row neither wrapped nor scrolled. Above it
   nothing is wrong, so nothing changes.

   Two structural notes for the wide layout below. The nav becomes
   ``display: contents`` so its two groups — the links and the account
   footer — become direct children of the header and can be ordered
   around ``.header-context`` between them; that reproduces the original
   row (brand, links, page status, account) without duplicating any
   markup for the two states. And the pane toggle exists twice, as the
   page's own left hamburger and as the first entry in the menu, with
   exactly one visible at a time.

   Bootstrap's collapse drives the narrow state (the bundle is already
   loaded site-wide) so toggling and ARIA state are not ours to
   maintain. */

/* ── Wide: the inline row, unchanged from before the menu existed ── */
.header-menu-btn { display: none; }
.nav-pane-link { display: none; }
/* Overrides Bootstrap's .collapse{display:none}. Same specificity as
   the vendor rule and base.css loads after it, but !important keeps
   this correct regardless of stylesheet order, and neutralizes the
   inline height Bootstrap leaves behind if the menu was open when the
   viewport widened. */
.header-nav.collapse,
.header-nav.collapsing {
  display: contents !important;
  height: auto !important;
}
.header-nav-links {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  order: 1;
  margin-left: 0.5rem;
  /* Lets the group shrink below its content width — the precondition
     for the phone breakpoint's scrolling row. */
  min-width: 0;
}
/* Page-specific header content: chat's session name and share control.
   Status for what you are looking at rather than navigation, so it sits
   in the row at wide widths and stays out of the menu at narrow ones. */
.header-context {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  order: 2;
  /* No auto margin here at wide widths. This block is :empty on every
     page but chat and scripts, and an empty flex item is display:none —
     so hanging the push on it left Usage/Account/Admin with nothing
     carrying an auto margin, and the account controls sat inline right
     after "Examples" instead of at the right edge. The footer below is
     always present, so it does the pushing. */
  min-width: 0;
  overflow: hidden;
}
.header-context:empty { display: none; }
.header-menu-footer {
  order: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  /* Default: no page status, so the account block itself takes the push
     and lands at the right edge. */
  margin-left: auto;
}
/* When there IS page status it becomes the leftmost of the two, so the
   push moves to it and the pair travels right together. Hanging the
   auto margin on the footer in that case would collect the free space
   BETWEEN them, stranding chat's session name 333px from the account
   block it belongs beside.

   Exactly one auto margin in the row either way — two would split the
   space and float the status in the middle, which is the bug this same
   :has() pattern already fixes for the menu button below. */
.site-header:has(.header-context:not(:empty)) .header-menu-footer {
  margin-left: 0;
}
.site-header:has(.header-context:not(:empty)) .header-context {
  margin-left: auto;
}
.header-menu-footer .header-user-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.header-menu-footer .header-user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header-menu-actions { display: flex; align-items: center; gap: 0.5rem; }

/* The pane toggle in its wide form — the page's own left hamburger,
   which the menu form replaces below the breakpoint. */
.hamburger-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s;
  padding: 0 0.25rem;
  flex-shrink: 0;
}
.hamburger-btn:hover { opacity: 1; }

/* ── Narrow: everything but the brand goes behind one button ───── */
@media (max-width: 1000px) {
  .header-menu-btn {
    display: inline-flex;
    margin-left: auto;   /* pushes it to the right edge */
    order: 99;
  }
  /* Two auto margins split the free space between them, which left the
     session name and share button floating in the middle of the header
     instead of sitting against the right edge. When there IS page
     status, it takes the auto margin and the button simply follows it;
     with no status the button keeps the margin and stays right. */
  .site-header:has(.header-context:not(:empty)) .header-menu-btn {
    margin-left: 0.25rem;
  }
  /* The page's own left hamburger gives way to the menu entry, so there
     is one menu affordance rather than two on opposite sides. */
  .hamburger-btn:not(.header-menu-btn) { display: none; }
  .nav-pane-link { display: block; }

  /* Below the breakpoint the footer moves inside the collapse panel and
     stops being a child of the header row, so the status block is free
     to carry the push without competing with it. */
  .header-context { margin-left: auto; }

  .header-nav.collapse,
  .header-nav.collapsing {
    display: block !important;
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: min(16rem, 100vw);
    margin: 0;
    padding: 0.35rem 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: var(--card-shadow);
    z-index: 200;
    overflow: hidden;
  }
  /* Bootstrap hides and animates it; without this the panel is painted
     open at page load. */
  .header-nav.collapse:not(.show) { display: none !important; }
  .header-nav.collapsing { height: 0; transition: height 0.2s ease; }

  .header-nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    order: 0;
  }
  .header-nav .header-nav-link {
    display: block;
    padding: 0.6rem 1.1rem;
    font-size: 0.9rem;
    border-radius: 0;
    white-space: nowrap;
  }
  .header-nav .header-nav-link:hover { background: var(--surface-hover); }

  /* Account, theme and sign-out sit at the bottom behind a rule: they
     act on your account rather than moving you somewhere, so they read
     better separated from the destinations above. */
  .header-menu-footer {
    order: 0;
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    border-top: 1px solid var(--divider, var(--border));
    margin-top: 0.35rem;
    padding: 0.5rem 1.1rem 0.25rem;
  }
  .header-menu-footer .header-user { font-size: 0.8rem; }
}

/* ── Between the menu and the full row ────────────────────────────
   The full row needs about 1487px. Above the menu breakpoint and below
   that, the links used to shrink as boxes while their text did not, so
   it painted over the session name and the avatar. Here the links keep
   their size; the session name gives way (ellipsis, then nothing) and
   the email drops out, leaving the avatar and role chip, whose link
   still says who you are on hover. */
@media (min-width: 1001px) and (max-width: 1487px) {
  .header-nav-links { flex-shrink: 0; }
  .header-nav-link { white-space: nowrap; }
  .header-context { flex: 1 1 0; }
  .header-context #headerSessionName { min-width: 0; flex-shrink: 1; }
  .header-menu-footer { flex-shrink: 0; }
  .header-menu-footer .header-user { display: none; }
}
/* The low end of that range: an admin's eight links plus the account
   controls still ran about 40px past the edge at 1001px. */
@media (min-width: 1001px) and (max-width: 1200px) {
  .site-header { gap: 0.5rem; }
  .header-nav-link { padding: 0.25rem 0.4rem; }
  .header-context .session-label { display: none; }
}