/* Canonical design tokens for the whole site - hand-authored, NOT Vite build output (vite.config.js
   sets emptyOutDir:false, so this survives `npm run build` untouched, same as nav-shared.css).
   Loaded by every page shell, before that page's own inline <style>, so page-specific rules can
   still override where genuinely needed.

   Replaces ~10 independently-redeclared :root blocks that had drifted into two incompatible
   systems (an app palette with no light mode at all, and a marketing palette with a different
   naming scheme and a green accent) - see restore_points/MANIFEST.md's site-wide-restyle entry
   for the full inventory. This file's structure follows the marketing system's (it already had
   the complete 3-state light/dark pattern and a tiered surface scale); the accent stays the app's
   existing blue, already shipped and already reviewed, rather than switching to the marketing
   pages' green.

   Night (dark) is this product's shipped default and stays that way for anyone who's never
   chosen otherwise, rather than silently switching existing dark-only users to whatever their
   OS says. Every page carries a tiny inline <script> (before this stylesheet has a chance to
   paint) that reads localStorage and sets data-theme="dark" unless the visitor already chose
   "light" - see any page shell's <head> for the actual snippet; it has to be inline per page
   (not an external file) to avoid a flash of the wrong theme before it runs. */

:root {
  --ground: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #eef1f4;
  --surface-3: #e8ebef;
  --ink: #1f2328;
  --muted: #59636e;
  --faint: #818b98;
  --line: #d0d7de;
  --line-faint: #d0d7de55;
  --accent: #7c3aed;
  --accent-ink: #ffffff;
  --accent-soft: #ede9fe;
  --success: #1a7f37;
  --success-soft: #dafbe1;
  --danger: #cf222e;
  --danger-soft: #ffebe9;
  --warn: #9a6700;
  --warn-soft: #fff8c5;
  --shadow-1: 0 1px 2px rgba(20, 20, 20, .05), 0 4px 10px -6px rgba(20, 20, 20, .1);
  --shadow-2: 0 1px 3px rgba(20, 20, 20, .06), 0 10px 24px -12px rgba(20, 20, 20, .16);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0d1117;
    --surface: #161b22;
    --surface-2: #1c2128;
    --surface-3: #21262d;
    --ink: #e6edf3;
    --muted: #8b949e;
    --faint: #6e7681;
    --line: #30363d;
    --line-faint: #30363d33;
    --accent: #a78bfa;
    --accent-ink: #ffffff;
    --accent-soft: #3b0764;
    --success: #3fb950;
    --success-soft: #0d2818;
    --danger: #f85149;
    --danger-soft: #2d0f0f;
    --warn: #d29922;
    --warn-soft: #2d2410;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -6px rgba(0, 0, 0, .5);
    --shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 30px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2128;
  --surface-3: #21262d;
  --ink: #e6edf3;
  --muted: #8b949e;
  --faint: #6e7681;
  --line: #30363d;
  --line-faint: #30363d33;
  --accent: #a78bfa;
  --accent-ink: #ffffff;
  --accent-soft: #3b0764;
  --success: #3fb950;
  --success-soft: #0d2818;
  --danger: #f85149;
  --danger-soft: #2d0f0f;
  --warn: #d29922;
  --warn-soft: #2d2410;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px -6px rgba(0, 0, 0, .5);
  --shadow-2: 0 1px 3px rgba(0, 0, 0, .35), 0 10px 30px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* ---- shared components (Material-leaning: pill/rounded actions, soft elevation) ----
   Namespaced (tt- prefix) so these can't collide with any page's existing .btn/.card/etc,
   most of which are being migrated onto these classes but some of which aren't yet. */

.tt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Roboto', -apple-system, sans-serif; font-weight: 500; font-size: 0.85rem;
  padding: 8px 16px; border-radius: var(--radius-pill); border: none; cursor: pointer;
  background: var(--surface-3); color: var(--ink); transition: background .15s ease;
}
.tt-btn:hover { background: var(--line); }
.tt-btn:disabled { opacity: 0.5; cursor: default; }

.tt-btn-primary { background: var(--accent); color: var(--accent-ink); }
.tt-btn-primary:hover { filter: brightness(1.08); }

.tt-btn-tonal { background: var(--accent-soft); color: var(--accent); }
.tt-btn-tonal:hover { filter: brightness(1.06); }

.tt-btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.tt-btn-danger:hover { background: var(--danger-soft); }

.tt-chip {
  display: inline-flex; align-items: center; font-family: 'Roboto', -apple-system, sans-serif;
  font-weight: 500; font-size: 0.8rem; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--muted);
}
.tt-chip-active { background: var(--accent-soft); color: var(--accent); }

.tt-card {
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  padding: 12px 14px;
}

/* Night/Day toggle button (theme-toggle.js) - one floating button, top-right, on every page
   (owner: "keep the dark/light mode at the top right of the page and not in the pane"). Used to
   have three placements (inline in the desktop nav row, inline in the mobile bar, floating only
   on nav-less marketing pages) - the two nav-embedded copies lived inside content that scrolls
   or slides away with the pane itself, so this is the one surviving shape, now used everywhere.
   z-index above the mobile drawer (.site-nav, 220 in nav-shared.css) and its backdrop (190) so
   it stays visible and clickable even while the drawer is open. */
.site-theme-toggle-floating {
  position: fixed; top: 14px; right: 14px; z-index: 230;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); cursor: pointer; font-size: 1rem; box-shadow: var(--shadow-1);
}
/* Real bug, caught live via bounding boxes (owner: "we still have the light/dark mode in the
   pane when i asked to have it in the upper right hand corner only next to the hamburger menu
   not on top of") - nav-shared.css's own mobile hamburger (.site-nav-toggle) sits at the exact
   same `right: 14px` on the exact same mobile bar, so at narrow widths this button landed
   PIXEL-IDENTICAL on top of it (measured: both at x=338, y=10 vs y=14, on a 390px viewport) -
   completely hiding the only way to open the nav drawer at all, not just a cosmetic overlap.
   Shifted left by the hamburger's own width (38px) plus an 8px gap, matching the "next to it,
   not on top of it" request exactly. */
@media (max-width: 700px) {
  .site-theme-toggle-floating { right: 60px; }
}
.site-theme-toggle-floating:hover { color: var(--ink); }

/* Site-wide "Report an issue" (report-issue.js) - owner: "make the report an issue button
   accessible site wide." ORIGINALLY bottom-right (see the two real composer-collision bugs
   this position used to need to dodge, both still relevant history even though the position
   itself changed - kept below for the next person who finds a similar collision). That
   choice was then explicitly overruled by a batch of real tickets (16 Sep, #151651/#151652/
   #151653/#151654) filed from Forum/Orgs/Dashboard/Profile - all four the same ask: "move
   the report an issue button here to match other pages to keep it uniform." Rather than add
   a fourth/fifth/sixth per-page override (three already existed - /agent, Direct Messages,
   /admin - for exactly this reason), this is now the ONE shared default every page gets,
   right next to the theme toggle, since both scripts already load on the same 13 pages.
   Per-page overrides remain ONLY where a page has its OWN additional buttons in the same
   row (tour/tip on /agent) or its own locked-pane pill - this rule is what every other page
   gets for free with zero extra CSS.

   The historical composer-collision bugs this position used to dodge, preserved because the
   root cause (a live --composer-h var going negative on a normal-flow composer) is still
   real and still worth knowing about the next time something floats near a composer:
   (1) 15 Sep, test_browser_ui.py: bottom:14px sat ON the real Send button on any page with
   a bottom composer - confirmed via elementFromPoint at Send's own center.
   (2) 15 Sep, owner report on group chat: --composer-h goes NEGATIVE on a normal-flow
   composer (Chat Room, Direct Messages) once scrolled past it; the raw var with no guard
   pushed bottom deeply negative, reported as "the button scrolls with the text." */
.site-report-issue-floating {
  position: fixed; top: 14px; right: 60px; z-index: 230;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); cursor: pointer; font-size: 1rem; box-shadow: var(--shadow-1);
}
/* Same reasoning as the theme toggle's own mobile shift above: continues that exact 46px
   step past the hamburger (nav-shared.css, right:14) and the toggle's own mobile position
   (right:60) rather than landing on top of either. */
@media (max-width: 700px) {
  .site-report-issue-floating { right: 106px; }
}
.site-report-issue-floating:hover { color: var(--ink); }

.site-report-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.site-report-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 20px; max-width: 420px; width: 100%; box-shadow: var(--shadow-2);
}
.site-report-panel h3 { margin: 0 0 8px; color: var(--ink); font-size: 1.05rem; }
.site-report-intro { color: var(--muted); font-size: 0.85rem; margin: 0 0 12px; line-height: 1.4; }
.site-report-body, .site-report-override {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 0.88rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  color: var(--ink); padding: 8px 10px; margin-bottom: 10px;
}
.site-report-body { resize: vertical; }
.site-report-where-label {
  display: block; font-size: 0.78rem; color: var(--faint); margin-bottom: 10px;
}
.site-report-where { color: var(--muted); font-family: monospace; }
.site-report-foot { display: flex; align-items: center; gap: 8px; }
.site-report-cancel {
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.85rem;
}
/* Self-contained rather than reusing theme.css's .tt-btn-primary - that stylesheet only
   loads on 12 of the 22 pages this widget runs on. */
.site-report-send {
  background: var(--accent); color: var(--accent-ink); border: none; cursor: pointer;
  border-radius: var(--radius-pill); padding: 8px 16px; font-size: 0.85rem; font-weight: 500;
}
.site-report-send:hover { filter: brightness(1.08); }
.site-report-send:disabled { opacity: 0.5; cursor: default; }
.site-report-status { font-size: 0.8rem; color: var(--muted); }

/* Ticket #151855: "have the option to include a screen shot when reporting the issue...
   from their mobile phone. Also desktop... a button to take a screenshot of the screen
   they are on that has the issue without the widget in the way." Two attach paths, both
   optional: a plain file picker (works everywhere, phone camera/library or desktop file
   browser) and a "Capture this screen" button using the Screen Capture API, which only
   real desktop browsers support - feature-detected in report-issue.js and simply not
   rendered where it isn't available, rather than shown broken on a phone. */
.site-report-attach-row { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.site-report-attach-btn {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; border-radius: var(--radius-pill); padding: 7px 14px; font-size: 0.82rem;
}
.site-report-attach-btn:hover { color: var(--ink); border-color: var(--accent); }
.site-report-thumb-wrap {
  position: relative; display: inline-block; margin: 0 0 10px;
}
.site-report-thumb {
  max-width: 160px; max-height: 100px; border-radius: 6px; border: 1px solid var(--line);
  display: block;
}
.site-report-thumb-remove {
  position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.site-report-thumb-remove:hover { color: var(--danger); border-color: var(--danger); }

/* Guided tour + "click things to find out what they do" (frontend/src/lib/Tour.jsx +
   Inspect.jsx) - previously /agent-only, hand-copied into static_chat.html's own <style>
   block. Tickets #151849/#151851/#151852 (three separate reports, same underlying gap:
   "the '?'/tip buttons aren't on /orgs", "aren't on /messages") asked for this everywhere,
   so it's now a real site-wide default here instead of a fourth per-page copy - any page
   that wants a tour/tip just renders <Tour>/<Inspect> with its own steps and these two
   buttons; the visual language (spotlight, callout, floating circles) comes free.
   Joins the SAME site-wide top-right row theme-toggle/report-issue already own (right:14/
   60), continuing that exact 46px step (hamburger 14, toggle 60, report-issue... wait,
   report-issue IS 60 - tour takes the next slot, 106, tip takes 152) - identical, unchanged
   final position to what /agent already shipped (static_chat.html's own page-specific
   override, left in place there as a harmless now-redundant duplicate rather than risking
   a regression on that page's own heavily-iterated CSS by removing it). */
.tour-overlay { position: fixed; inset: 0; z-index: 400; }
.tour-spotlight {
  position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(0,0,0,.65);
  border: 2px solid var(--accent); pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-callout {
  position: fixed; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow-2); padding: 16px;
  transition: top .25s ease, left .25s ease; color: var(--ink);
}
.tour-step-count { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.tour-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
.tour-body { font-size: 0.85rem; color: var(--muted); line-height: 1.5; margin-bottom: 14px; }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-help-btn, .tip-help-btn {
  position: fixed; top: 14px; right: 106px; z-index: 230; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-weight: 700; cursor: pointer; box-shadow: var(--shadow-1);
  display: flex; align-items: center; justify-content: center; padding: 0; font-size: 1rem;
}
.tip-help-btn { right: 152px; }
.tour-help-btn:hover, .tip-help-btn:hover { color: var(--ink); border-color: var(--accent); }
.tip-help-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
@media (max-width: 700px) {
  .tour-help-btn { right: 106px; }
  .tip-help-btn { right: 152px; }
}
.inspect-banner {
  position: fixed; top: calc(var(--nav-header-h, 60px) + 12px); left: 50%; transform: translateX(-50%);
  z-index: 401; background: var(--accent); color: var(--accent-ink); padding: 8px 14px;
  border-radius: var(--radius-pill); font-size: 0.82rem; box-shadow: var(--shadow-2);
  display: flex; align-items: center; gap: 10px;
}
.inspect-banner .linkish {
  color: inherit; text-decoration: underline; background: none; border: none;
  cursor: pointer; font-size: 0.82rem; font-family: inherit; padding: 0;
}
.inspect-miss {
  position: fixed; z-index: 401; background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 5px 10px; font-size: 0.78rem; color: var(--muted);
  box-shadow: var(--shadow-1); pointer-events: none;
}
body.inspect-active, body.inspect-active * { cursor: help !important; }
body.inspect-active .inspect-banner *, body.inspect-active .tour-callout * { cursor: pointer !important; }

/* Site-wide wallet chip (nav.js) - owner: "display the current amount in his wallet at the
   top right of the screen for the user to know how much they have in their account,"
   after a real support case where a customer couldn't tell how much they had left without
   doing the math themselves. Ticket #153924, right after it shipped: "may we move the
   available balance to the left of the top-right buttons?" - it started as its own row
   BELOW the icon row (top:60); this puts it in the SAME row instead, to the left of every
   icon that row can ever hold on any page. Universal top-right row, left to right as
   distance from the edge grows: theme-toggle(14), report-issue(60), and - /agent/orgs/
   messages only - tour(106), tip(152). right:198 is the next free slot in that same 46px
   cadence, clearing the WIDEST case (all four) so the chip never collides with tour/tip on
   the three pages that have them, even though most pages (just theme+report) show a small
   gap between the chip and the icons - accepted rather than computing a different, page-
   dependent position nav.js has no reliable way to know (tour/tip are a separate React
   bundle's own buttons, not something this plain-JS file can see is present). Real text
   ("$126.72"), not a single glyph, so it keeps its own pill shape rather than joining the
   circles. Hidden by default (nav.js only shows it once /auth/me confirms someone's
   actually logged in - an anonymous visitor has no wallet to show). Flat top:14/right:198
   with no separate mobile override, matching tour/tip's own final rule - both breakpoints'
   own theme-toggle/report-issue shifts already land on the same final numbers, so nothing
   here needs to shift again either. */
.site-wallet-floating {
  position: fixed; top: 14px; right: 198px; z-index: 230; display: none;
  align-items: center; gap: 5px; padding: 6px 12px; border-radius: var(--radius-pill, 999px);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  font-size: 0.82rem; font-weight: 600; box-shadow: var(--shadow-1); text-decoration: none;
  white-space: nowrap;
}
.site-wallet-floating:hover { border-color: var(--accent); color: var(--accent); }
.site-wallet-floating.low { color: var(--danger); border-color: var(--danger); }
