/* ==========================================================================
   Xero AI · base.css
   Design tokens (solid colours, no blur) in light and dark, plus resets and shared animations. Every colour used elsewhere
   comes from these variables, so no other file overrides a theme.
   ========================================================================== */

/* ---- Light (default) ---- */
:root {
  color-scheme: light;
  --app-bg: #fcfcfc; /* white with a trace of black, easier on the eyes than pure white */

  --text: #000000;
  --muted: #4a4f4b;
  --accent: #2f8f4e;
  --accent-hover: #247a40;
  --on-accent: #FFFFFF;
  --danger: #B84F43;

  --surface: #ffffff;                       /* cards, inputs */
  --soft: #f4f9f5;                          /* hover backgrounds */
  --border: #e2ebe3;
  --line: #e2ebe3;                          /* thin dividers (tables, headings) */

  --glass: #ffffff;
  --glass-strong: #ffffff;
  --glass-edge: #e2ebe3;
  --glass-hi: none;
  --blur: none;
  --shadow: 0 2px 10px rgba(0, 0, 0, .06);

  --sidebar-bg: #fbfdfb;
  --sidebar-edge: #e2ebe3;
  --composer-bg: #ffffff;
  --user-bubble: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  --popup-bg: #ffffff;
  --viewer-bg: #FFFFFF;
  --backdrop: rgba(20, 35, 26, .45);

  --sidebar-w: 255px;
  --radius: 14px;
  --font: -apple-system-body, system-ui, ui-sans-serif, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --mono: "Cascadia Mono", "SF Mono", Consolas, Menlo, Monaco, "Courier New", monospace;
  --msg-size: 1rem;
  --ui-size: .90625rem;
}

/* ---- Dark ---- */
html[data-theme="dark"] {
  color-scheme: dark;
  --app-bg: linear-gradient(rgba(47, 140, 75, .035), rgba(47, 140, 75, .035)), #000000;
  --text: #ffffff;
  --muted: #b5c9b8;
  --accent: #3fa35f;
  --accent-hover: #55b977;
  --on-accent: #000000;
  --danger: #E89A90;
  --surface: #0d170f;
  --soft: #13221a;
  --border: #1d3224;
  --line: #1d3224;
  --glass: #0a120c;
  --glass-strong: #0d170f;
  --glass-edge: #1d3224;
  --shadow: none;
  --sidebar-bg: #050a06;
  --sidebar-edge: #1d3224;
  --composer-bg: #0a120c;
  --popup-bg: #0d170f;
  --viewer-bg: #0B120D;
  --backdrop: rgba(8, 14, 10, .55);
}
/* ---- Text size setting ----
   Every font size is in rem, so the whole interface (chat, settings, admin page) follows the root size.
   Medium is the device's own default text size; Small and Large scale it down or up. */
html { font-size: 100%; }
html[data-fs="small"] { font-size: 87.5%; }
html[data-fs="large"] { font-size: 112.5%; }

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font);
  color: var(--text);
  background: var(--app-bg);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
svg { flex-shrink: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; }

/* Readable panels in browsers without blur support or when the user asks for less transparency. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .85); --glass-strong: rgba(255, 255, 255, .94); }
  html[data-theme="dark"] { --glass: rgba(24, 40, 31, .92); --glass-strong: rgba(24, 40, 31, .97); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: rgba(255, 255, 255, .9); --glass-strong: rgba(255, 255, 255, .96); }
  html[data-theme="dark"] { --glass: rgba(24, 40, 31, .94); --glass-strong: rgba(24, 40, 31, .98); }
}

/* ---- Shared animations ---- */
@keyframes appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes bounce { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

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

/* Nothing blurs (one rule instead of a per-component exception). */
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }