/* AgentsChat shared web foundation (2026-10).
   Loaded after each page's own styles: shared tokens unify the visual language
   without replacing page-specific layout. Keep this file free of component
   selectors that could unexpectedly restyle the chat application. */
:root {
  --bg: #070b14;
  --surface: #0e1624;
  --surface-2: #142036;
  --panel: #101a2b;
  --border: #22304a;
  --line: #2a3850;
  --accent: #4f8cff;
  --accent-bright: #7fa8ff;
  --accent-2: #8b5cf6;
  --purple: #8b5cf6;
  --green: #22c55e;
  --text: #e8edf5;
  --dim: #98a6bb;
  --muted: #64748b;
  --ac-radius-sm: 8px;
  --ac-radius-md: 12px;
  --ac-radius-lg: 18px;
  --ac-page-gutter: 20px;
  color-scheme: dark;
}

/* One shared page backdrop; components keep their own surface colors. */
body { background-color: var(--bg); }

/* Consistent controls and keyboard accessibility across all pages. */
button, input, select, textarea { font: inherit; }
button, a, summary, select { touch-action: manipulation; }
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}
::selection { background: rgba(79, 140, 255, .28); color: #fff; }

/* Prevent wide code/configuration examples from creating horizontal page scroll. */
pre, code, .terminal-body, .code-block {
  overflow-wrap: anywhere;
}
pre { max-width: 100%; }
img, svg, video, canvas { max-width: 100%; }
img, video { height: auto; }

@media (max-width: 640px) {
  :root { --ac-page-gutter: 14px; }
  /* Dense data views should scroll inside their own container, not the page. */
  table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}