.rs-root[data-theme="light"] {
  color-scheme: light;
  --Core-Text-Main: #202020;
  --Core-Text-Secondary: #646464;
  --Core-Background-Main: #fff;
  --Core-Background-Box: #f8f9fa;
  --Core-Border-Default: #e8e8e8;
  --Core-Utilities-White: #fff;
}

.rs-root {
  --rs-wrap: 1120px;
  --rs-border: var(--Core-Border-Default, #e8e8e8);
  --rs-text-main: var(--Core-Text-Main, #202020);
  --rs-text-secondary: var(--Core-Text-Secondary, #646464);
  --rs-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);

  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--Core-Background-Main, #fff);
  color: var(--rs-text-main);
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/*
 * The chat-card component uses Tailwind utility classes (rounded-[6px], size-7,
 * bg-transparent, etc.) that assume a Tailwind Preflight + JIT build in scope.
 * This prototype doesn't ship its own Tailwind pipeline (it only inherits the
 * subset baked into @time-loop/web-ui), so <button> elements fall back to UA
 * chrome — gray fill, dotted border — and every toolbar icon reads as a chip.
 * The Next.js parent app doesn't have this problem because its Tailwind build
 * covers these files. Scoping the reset to .rs-panel keeps it out of everything
 * else and avoids fighting with real DS button styles elsewhere on the page.
 */
.rs-panel button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}