/* 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;
  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-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.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; }
  /* Up to nine links (Chat, Scripts, Usage, Account, Admin, About,
     Docs, Examples plus separators) do not fit a phone header at any
     readable size. They used to simply run off the right edge: the row
     did not wrap, did not scroll, and there is no menu button, so
     About, Docs and Examples were unreachable on a phone.

     Scrolling the row keeps every link reachable AND keeps the header
     one fixed-height line — the chat view sizes its own viewport
     against that height, so letting the nav wrap onto a second row
     would shift the layout underneath it. */
  .header-nav {
    gap: 0.15rem;
    margin-left: 0.3rem;
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* The global scrollbar styling at the top of this file would put a
       visible bar through the middle of the header. */
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }
  .header-nav-link { font-size: 0.65rem; padding: 0.2rem 0.4rem; }

  /* The nav gives way, but never to nothing.
     An earlier version set flex-shrink:0 on both flanking groups so the
     nav would be the one squeezed — which is right in principle, and on
     the chat page squeezed it to ZERO: logo 151px + header-right 179px
     + hamburger + gaps already exceed a 400px viewport, so every link
     was clipped away entirely. That is worse than the overflow it was
     meant to fix. The nav now keeps a floor wide enough to scroll
     within, and the flanking groups yield what that costs. */
  .header-nav { min-width: 7rem; }
  .header-logo-link, .header-right {
    flex-shrink: 1;
    min-width: 0;
  }
  .header-logo-link { overflow: hidden; }
  .header-right { gap: 0.3rem; }
  .header-user { font-size: 0.6rem; max-width: 120px; }
  .theme-toggle { width: 24px; height: 24px; font-size: 0.7rem; }
  .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 nav on a phone. 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; }
  .header-nav-link { font-size: 0.62rem; padding: 0.2rem 0.35rem; }
  /* Hide the whole identity block, not just the email inside it.
     Hiding `.header-user` alone left the wrapper holding the avatar and
     role chip at ~91px — wider than header-right was allowed to be once
     the nav took its floor, so the chip overflowed the header and the
     page scrolled sideways. Sign-out stays; you can see who you are on
     the account page. */
  .header-user, .header-user-link { display: none; }
  .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; }
}