@odla-ai/ui 0.1.0

package/odla-ui.css

@@ -0,0 +1,863 @@
+/* odla-ui.css — GENERATED from index.css by scripts/gen-css.mjs; do not edit.
+   Flattened (no @imports) so it can be copied/served as a single file. */
+
+/* ══════════════════════════════════════════════════════════════
+   @odla-ai/ui — token defaults
+   Every block is wrapped in :where() so it has ZERO specificity:
+   a theme's plain `:root { … }` definitions always win, regardless
+   of stylesheet load order. Without a theme, these neutral values
+   (grayscale + restrained blue) render sanely on their own.
+   Contract data lives in js/tokens.js; themes map their palettes
+   onto the required tier in themes/<name>/ui.css.
+   ══════════════════════════════════════════════════════════════ */
+
+:where(:root) {
+  /* ─── Required tier: neutral fallbacks (themes override all of these) ─── */
+  --ui-bg: #f7f7f5;
+  --ui-surface: #ffffff;
+  --ui-surface-2: #efefec;
+  --ui-text: #24272b;
+  --ui-text-muted: #64686e;
+  --ui-text-faint: #9b9fa6;
+  --ui-border: #dfe0dc;
+  --ui-border-strong: #b9bbb5;
+  --ui-accent: #3b5e8c;
+  --ui-accent-strong: #2e4a70;
+  --ui-accent-soft: rgba(59, 94, 140, 0.1);
+  --ui-on-accent: #ffffff;
+  --ui-good: #4a7c59;
+  --ui-good-soft: rgba(74, 124, 89, 0.12);
+  --ui-warn: #a07d2e;
+  --ui-warn-soft: rgba(160, 125, 46, 0.12);
+  --ui-danger: #a8433a;
+  --ui-danger-soft: rgba(168, 67, 58, 0.1);
+  --ui-code-bg: #efefec;
+  --ui-code-text: #33363b;
+  --ui-shadow: 0 1px 2px rgba(36, 39, 43, 0.04), 0 8px 24px rgba(36, 39, 43, 0.06);
+  --ui-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --ui-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+  --ui-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  --ui-font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
+  /* ─── Defaulted tier: universal scales ─── */
+  --ui-space-1: 4px;
+  --ui-space-2: 8px;
+  --ui-space-3: 12px;
+  --ui-space-4: 16px;
+  --ui-space-5: 24px;
+  --ui-space-6: 32px;
+  --ui-space-7: 48px;
+  --ui-space-8: 64px;
+  --ui-radius-sm: 4px;
+  --ui-radius-md: 7px;
+  --ui-radius-lg: 10px;
+  --ui-radius-pill: 999px;
+  --ui-text-xs: 11px;
+  --ui-text-sm: 12px;
+  --ui-text-md: 13px;
+  --ui-text-lg: 15px;
+  --ui-tracking-caps: 0.06em;
+  --ui-focus: 0 0 0 3px var(--ui-accent-soft);
+
+  /* ─── Chart roles (derived; themes may override for richer palettes) ─── */
+  --ui-chart-1: var(--ui-accent);
+  --ui-chart-2: var(--ui-good);
+  --ui-chart-3: var(--ui-warn);
+  --ui-chart-4: var(--ui-danger);
+  --ui-chart-5: color-mix(in srgb, var(--ui-accent) 45%, var(--ui-text));
+  --ui-chart-6: var(--ui-text-faint);
+  --ui-chart-grid: color-mix(in srgb, var(--ui-text) 8%, transparent);
+  --ui-chart-grid-zero: color-mix(in srgb, var(--ui-text) 22%, transparent);
+  --ui-chart-axis: var(--ui-text-muted);
+  --ui-chart-axis-faint: var(--ui-text-faint);
+  --ui-chart-band: color-mix(in srgb, var(--ui-accent) 10%, transparent);
+  --ui-chart-band-strong: color-mix(in srgb, var(--ui-accent) 22%, transparent);
+  --ui-chart-pos: var(--ui-good);
+  --ui-chart-neg: var(--ui-danger);
+  --ui-chart-tip-bg: color-mix(in srgb, var(--ui-text) 92%, transparent);
+  --ui-chart-tip-text: var(--ui-bg);
+  --ui-chart-dot-stroke: var(--ui-bg);
+
+  /* ─── Chat roles (derived) ─── */
+  --ui-chat-user-bg: var(--ui-accent-soft);
+  --ui-chat-user-text: var(--ui-text);
+  --ui-chat-assistant-bg: var(--ui-surface);
+  --ui-chat-thinking-bg: var(--ui-surface-2);
+  --ui-chat-thinking-text: var(--ui-text-muted);
+  --ui-chat-tool-accent: var(--ui-accent);
+}
+
+/* Neutral dark fallbacks — only the required tier changes; the derived
+   tiers track it automatically via var()/color-mix(). Themes that define
+   their own dark palettes override these the same zero-specificity way. */
+:where([data-theme="dark"]) {
+  --ui-bg: #17181b;
+  --ui-surface: #1f2125;
+  --ui-surface-2: #26282d;
+  --ui-text: #e6e6e3;
+  --ui-text-muted: #a2a6ad;
+  --ui-text-faint: #6f737a;
+  --ui-border: #33363c;
+  --ui-border-strong: #4a4e56;
+  --ui-accent: #7ba1d4;
+  --ui-accent-strong: #97b7e2;
+  --ui-accent-soft: rgba(123, 161, 212, 0.14);
+  --ui-on-accent: #14161a;
+  --ui-good: #7fae8e;
+  --ui-good-soft: rgba(127, 174, 142, 0.14);
+  --ui-warn: #c5a75e;
+  --ui-warn-soft: rgba(197, 167, 94, 0.14);
+  --ui-danger: #cf7a72;
+  --ui-danger-soft: rgba(207, 122, 114, 0.14);
+  --ui-code-bg: #26282d;
+  --ui-code-text: #d4d5d2;
+  --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"])) {
+    --ui-bg: #17181b;
+    --ui-surface: #1f2125;
+    --ui-surface-2: #26282d;
+    --ui-text: #e6e6e3;
+    --ui-text-muted: #a2a6ad;
+    --ui-text-faint: #6f737a;
+    --ui-border: #33363c;
+    --ui-border-strong: #4a4e56;
+    --ui-accent: #7ba1d4;
+    --ui-accent-strong: #97b7e2;
+    --ui-accent-soft: rgba(123, 161, 212, 0.14);
+    --ui-on-accent: #14161a;
+    --ui-good: #7fae8e;
+    --ui-good-soft: rgba(127, 174, 142, 0.14);
+    --ui-warn: #c5a75e;
+    --ui-warn-soft: rgba(197, 167, 94, 0.14);
+    --ui-danger: #cf7a72;
+    --ui-danger-soft: rgba(207, 122, 114, 0.14);
+    --ui-code-bg: #26282d;
+    --ui-code-text: #d4d5d2;
+    --ui-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
+  }
+}
+
+/* @odla-ai/ui — buttons & controls
+   Class-scoped by design: no bare-element rules, so these sheets coexist
+   with themes (e.g. blog themes) that style bare elements themselves.
+   `.btn` alone renders the primary variant; modifiers chain (.btn.ghost). */
+
+.btn {
+  font: inherit;
+  font-weight: 600;
+  background: var(--ui-accent);
+  color: var(--ui-on-accent);
+  border: 0;
+  padding: 7px 13px;
+  border-radius: var(--ui-radius-md);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-decoration: none;
+}
+.btn:hover { background: var(--ui-accent-strong); }
+.btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
+.btn:disabled { opacity: 0.45; cursor: default; }
+
+.btn.secondary {
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+}
+.btn.secondary:hover { background: var(--ui-surface-2); }
+
+.btn.ghost {
+  background: transparent;
+  color: var(--ui-accent);
+  border: 0;
+}
+.btn.ghost:hover { background: var(--ui-accent-soft); }
+
+.btn.danger { background: var(--ui-danger); color: var(--ui-on-accent); }
+.btn.danger:hover { background: color-mix(in srgb, var(--ui-danger) 82%, var(--ui-text)); }
+
+.btn.mini { padding: 3px 9px; font-size: var(--ui-text-sm); }
+
+/* Segmented control: a strip of buttons, one active (.on). */
+.seg {
+  display: inline-flex;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface);
+  overflow: hidden;
+}
+.seg button {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: transparent;
+  color: var(--ui-text-muted);
+  border: 0;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+.seg button + button { border-left: 1px solid var(--ui-border); }
+.seg button:hover { color: var(--ui-text); }
+.seg button.on,
+.seg button[aria-pressed="true"] {
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+  font-weight: 600;
+}
+
+/* Underlined tab bar; the active tab carries .on (or aria-selected). */
+.tabs {
+  display: flex;
+  gap: var(--ui-space-4);
+  border-bottom: 1px solid var(--ui-border);
+}
+.tabs button {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: transparent;
+  color: var(--ui-text-muted);
+  border: 0;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  padding: 8px 2px;
+  cursor: pointer;
+}
+.tabs button:hover { color: var(--ui-text); }
+.tabs button.on,
+.tabs button[aria-selected="true"] {
+  color: var(--ui-text);
+  border-bottom-color: var(--ui-accent);
+  font-weight: 600;
+}
+
+/* Status/metadata pill: quiet, mono, rounded. */
+.pill {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  padding: 3px 9px;
+  border-radius: var(--ui-radius-pill);
+  color: var(--ui-text-muted);
+}
+
+/* Interactive chip (link chips, removable filters). */
+.chip {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  padding: 2px 7px;
+  margin: 1px 3px 1px 0;
+  border-radius: 6px;
+  background: var(--ui-accent-soft);
+  border: 1px solid var(--ui-border);
+  color: var(--ui-accent-strong);
+  cursor: pointer;
+}
+.chip:hover { border-color: var(--ui-accent); }
+
+/* @odla-ai/ui — form fields
+   .input/.select/.textarea are the class equivalents of themed bare
+   elements; .field wraps a label + control + error/hint. */
+
+.input,
+.select,
+.textarea {
+  font: inherit;
+  font-size: var(--ui-text-md);
+  background: var(--ui-surface);
+  color: var(--ui-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  padding: 8px 10px;
+  width: 100%;
+}
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline: none;
+  border-color: var(--ui-accent);
+  box-shadow: var(--ui-focus);
+}
+.input::placeholder,
+.textarea::placeholder { color: var(--ui-text-faint); }
+.input:disabled,
+.select:disabled,
+.textarea:disabled { opacity: 0.55; cursor: default; }
+
+.textarea {
+  font-family: var(--ui-font-mono);
+  resize: vertical;
+  min-height: 72px;
+}
+.textarea.prose-input { font-family: inherit; }
+
+.input.invalid,
+.select.invalid,
+.textarea.invalid,
+.input[aria-invalid="true"],
+.select[aria-invalid="true"],
+.textarea[aria-invalid="true"] {
+  border-color: var(--ui-danger);
+}
+.input.invalid:focus,
+.select.invalid:focus,
+.textarea.invalid:focus,
+.input[aria-invalid="true"]:focus,
+.select[aria-invalid="true"]:focus,
+.textarea[aria-invalid="true"]:focus {
+  box-shadow: 0 0 0 3px var(--ui-danger-soft);
+}
+
+/* Field wrapper: label above control, error/hint below. */
+.field { margin: 0 0 var(--ui-space-4); }
+.field-label {
+  display: block;
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+  color: var(--ui-text-muted);
+  margin: 0 0 4px;
+}
+.field-error { color: var(--ui-danger); font-size: var(--ui-text-md); margin: 4px 0 0; }
+.field-hint { color: var(--ui-text-faint); font-size: var(--ui-text-sm); margin: 4px 0 0; }
+
+/* Checkbox/radio with label. */
+.check {
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2);
+  cursor: pointer;
+  font-size: var(--ui-text-md);
+}
+.check input {
+  accent-color: var(--ui-accent);
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  flex: 0 0 auto;
+}
+
+/* Styled range slider. */
+.range {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 4px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-border);
+  outline: none;
+}
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ui-accent);
+  border: 2px solid var(--ui-surface);
+  cursor: pointer;
+}
+.range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: var(--ui-accent);
+  border: 2px solid var(--ui-surface);
+  cursor: pointer;
+}
+.range:focus-visible { box-shadow: var(--ui-focus); }
+
+/* Grouped form area (e.g. schema-aware add-row forms). */
+.form-well {
+  padding: var(--ui-space-3);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  border-radius: 8px;
+  margin-bottom: var(--ui-space-3);
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: 180px 1fr;
+  gap: 8px 14px;
+  align-items: center;
+}
+.form-grid label {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  color: var(--ui-text);
+}
+.form-grid .type { color: var(--ui-text-faint); font-size: var(--ui-text-xs); }
+
+/* @odla-ai/ui — cards, panels, badges */
+
+.card {
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  padding: 14px;
+  box-shadow: var(--ui-shadow);
+}
+.card h4 {
+  margin: 0 0 var(--ui-space-2);
+  color: var(--ui-text-muted);
+  font-weight: 600;
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+}
+
+/* KPI card grid. */
+.cards {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: var(--ui-space-3);
+  margin: var(--ui-space-4) 0;
+}
+.metric { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
+
+.panel {
+  background: var(--ui-surface);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-lg);
+  padding: var(--ui-space-4);
+  margin: var(--ui-space-4) 0;
+  box-shadow: var(--ui-shadow);
+}
+.panel h3 { margin: 0 0 var(--ui-space-3); font-weight: 700; }
+
+/* Status badge: neutral by default, status variants chain. */
+.badge {
+  display: inline-block;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding: 2px 8px;
+  border-radius: var(--ui-radius-pill);
+  background: var(--ui-surface-2);
+  border: 1px solid var(--ui-border);
+  color: var(--ui-text-muted);
+}
+.badge.good { background: var(--ui-good-soft); border-color: var(--ui-good); color: var(--ui-good); }
+.badge.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.badge.danger { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+.badge.accent { background: var(--ui-accent-soft); border-color: var(--ui-accent); color: var(--ui-accent-strong); }
+
+/* Pass/fail verdict pill (permission inspectors, test results). */
+.verdict {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  font-weight: 600;
+  padding: 3px 10px;
+  border-radius: var(--ui-radius-pill);
+}
+.verdict-pass { background: var(--ui-good-soft); color: var(--ui-good); border: 1px solid var(--ui-good); }
+.verdict-fail { background: var(--ui-danger-soft); color: var(--ui-danger); border: 1px solid var(--ui-danger); }
+
+/* @odla-ai/ui — data tables
+   `.table` is the class equivalent of a themed bare <table>.
+   Wrap in `.table-wrap` for scroll + sticky header. */
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--ui-text-md);
+}
+.table td,
+.table th {
+  text-align: left;
+  padding: 7px 8px;
+  border-bottom: 1px solid var(--ui-border);
+}
+.table th { color: var(--ui-text-muted); font-weight: 600; }
+.table td { font-variant-numeric: tabular-nums; }
+
+/* Scroll container; header sticks against the sunken surface. */
+.table-wrap { overflow: auto; max-height: 420px; }
+.table-wrap .table thead th {
+  position: sticky;
+  top: 0;
+  background: var(--ui-surface-2);
+  z-index: 1;
+}
+
+/* Signed values. */
+.table .pos { color: var(--ui-good); }
+.table .neg { color: var(--ui-danger); }
+
+/* Inline-editable cells (data browsers). */
+.table td.editable { cursor: text; }
+.table td.editable:hover { background: var(--ui-accent-soft); }
+
+/* @odla-ai/ui — navigation & layout chrome */
+
+/* App shell: fixed sidebar + content column. */
+.layout {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  min-height: 100vh;
+}
+.sidebar {
+  background: var(--ui-surface);
+  border-right: 1px solid var(--ui-border);
+  padding: var(--ui-space-4);
+}
+.main { padding: var(--ui-space-5) var(--ui-space-6); max-width: 1100px; min-width: 0; }
+.head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--ui-space-4);
+}
+.head h2 { margin: 0; font-weight: 700; }
+.brand {
+  font-family: var(--ui-font-display);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  font-size: 18px;
+  margin-bottom: var(--ui-space-4);
+}
+.brand small { color: var(--ui-text-muted); font-weight: 500; }
+
+/* Sidebar nav entry (button or link). */
+.navitem {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  font-weight: 600;
+  background: var(--ui-surface);
+  color: var(--ui-text-muted);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  padding: 8px 10px;
+  margin-bottom: var(--ui-space-2);
+  cursor: pointer;
+  text-decoration: none;
+}
+.navitem:hover { background: var(--ui-surface-2); color: var(--ui-text); }
+.navitem.active {
+  background: var(--ui-accent-soft);
+  border-color: var(--ui-accent);
+  color: var(--ui-accent-strong);
+}
+
+/* Content containers. */
+.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--ui-space-4); }
+.wrap.narrow { max-width: 640px; }
+
+/* Utility row + muted text (ubiquitous in app chrome). */
+.row { display: flex; gap: var(--ui-space-2); align-items: center; }
+.muted { color: var(--ui-text-muted); }
+
+/* Off-canvas drawer. Toggle .open on both drawer and overlay. */
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(340px, 88vw);
+  background: var(--ui-surface);
+  border-left: 1px solid var(--ui-border);
+  padding: var(--ui-space-4);
+  overflow-y: auto;
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  z-index: 1001;
+}
+.drawer.open { transform: translateX(0); }
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+  z-index: 1000;
+}
+.drawer-overlay.open { opacity: 1; pointer-events: auto; }
+
+/* Page footer strip. */
+.footer {
+  border-top: 1px solid var(--ui-border);
+  color: var(--ui-text-muted);
+  font-size: var(--ui-text-sm);
+  padding: var(--ui-space-5) 0;
+  margin-top: var(--ui-space-7);
+}
+
+/* @odla-ai/ui — toasts, banners, dropzones, activity indicators */
+
+.toast {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: var(--ui-text);
+  color: var(--ui-bg);
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: var(--ui-text-md);
+  box-shadow: var(--ui-shadow);
+  z-index: 1100;
+}
+.toast.good { border-left: 3px solid var(--ui-good); }
+.toast.warn { border-left: 3px solid var(--ui-warn); }
+.toast.danger { border-left: 3px solid var(--ui-danger); }
+
+/* Inline notice bar. */
+.banner {
+  padding: 10px 14px;
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-2);
+  font-size: var(--ui-text-md);
+  margin: var(--ui-space-3) 0;
+}
+.banner.good { background: var(--ui-good-soft); border-color: var(--ui-good); color: var(--ui-good); }
+.banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.banner.error { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+
+/* File-drop target; add .drag while a file hovers. */
+.dropzone {
+  border: 1.5px dashed var(--ui-border);
+  border-radius: 8px;
+  padding: 18px;
+  text-align: center;
+  color: var(--ui-text-muted);
+  font-size: var(--ui-text-md);
+  background: var(--ui-surface-2);
+  margin-bottom: 14px;
+}
+.dropzone.drag {
+  border-color: var(--ui-accent);
+  background: var(--ui-accent-soft);
+  color: var(--ui-accent-strong);
+}
+
+/* Live-activity pulse dot. */
+.live-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ui-good);
+  margin-right: 6px;
+  animation: ui-pulse 1.4s infinite;
+}
+@keyframes ui-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+/* Border spinner. */
+.spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--ui-border);
+  border-top-color: var(--ui-accent);
+  border-radius: 50%;
+  animation: ui-spin 0.8s linear infinite;
+  vertical-align: middle;
+}
+@keyframes ui-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* @odla-ai/ui — chat surfaces
+   Shaped by the @odla-ai/ai content-block contract: text, tool_use,
+   tool_result, thinking blocks; streaming deltas; usage; typed errors. */
+
+.chat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-4);
+  max-width: 720px;
+  margin: 0 auto;
+}
+
+.chat-msg { display: flex; flex-direction: column; align-items: flex-start; }
+.chat-msg.user { align-items: flex-end; }
+
+.chat-bubble {
+  max-width: 88%;
+  padding: 10px 14px;
+  border-radius: var(--ui-radius-lg);
+  font-size: var(--ui-text-lg);
+  line-height: 1.55;
+  overflow-wrap: break-word;
+}
+.chat-msg.user .chat-bubble {
+  background: var(--ui-chat-user-bg);
+  color: var(--ui-chat-user-text);
+}
+.chat-msg.assistant .chat-bubble {
+  background: var(--ui-chat-assistant-bg);
+  border: 1px solid var(--ui-border);
+}
+.chat-bubble pre {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-code-bg);
+  color: var(--ui-code-text);
+  border-radius: var(--ui-radius-sm);
+  padding: 10px 12px;
+  overflow-x: auto;
+}
+
+/* Collapsible reasoning panel (ThinkingBlock) — use a <details>. */
+.chat-thinking {
+  align-self: stretch;
+  background: var(--ui-chat-thinking-bg);
+  color: var(--ui-chat-thinking-text);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-md);
+  font-size: var(--ui-text-sm);
+  padding: 6px 10px;
+}
+.chat-thinking summary {
+  cursor: pointer;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--ui-tracking-caps);
+}
+.chat-thinking[open] summary { margin-bottom: 6px; }
+
+/* Tool-call card (ToolUseBlock): name + streamed args. */
+.chat-tool {
+  align-self: stretch;
+  border: 1px solid var(--ui-border);
+  border-left: 3px solid var(--ui-chat-tool-accent);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface);
+  padding: 8px 12px;
+}
+.chat-tool-name {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  font-weight: 600;
+  color: var(--ui-chat-tool-accent);
+}
+.chat-tool-args {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-sm);
+  background: var(--ui-code-bg);
+  color: var(--ui-code-text);
+  border-radius: var(--ui-radius-sm);
+  padding: 8px 10px;
+  margin: 6px 0 0;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+/* Tool-result card (ToolResultBlock); .error for isError results. */
+.chat-result {
+  align-self: stretch;
+  border: 1px solid var(--ui-border);
+  border-left: 3px solid var(--ui-good);
+  border-radius: var(--ui-radius-md);
+  background: var(--ui-surface-2);
+  padding: 8px 12px;
+  font-size: var(--ui-text-md);
+}
+.chat-result.error {
+  border-left-color: var(--ui-danger);
+  background: var(--ui-danger-soft);
+  color: var(--ui-danger);
+}
+
+/* Streaming caret appended during text/thinking deltas. */
+.chat-cursor {
+  display: inline-block;
+  width: 0.55em;
+  height: 1.1em;
+  background: var(--ui-accent);
+  vertical-align: text-bottom;
+  animation: ui-blink 1s steps(1) infinite;
+}
+@keyframes ui-blink {
+  50% { opacity: 0; }
+}
+
+/* Composer bar. */
+.chat-composer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: var(--ui-space-2);
+  align-items: flex-end;
+  background: var(--ui-surface);
+  border-top: 1px solid var(--ui-border);
+  padding: var(--ui-space-3);
+}
+.chat-composer .textarea { flex: 1; min-height: 40px; max-height: 200px; }
+
+/* Token/cost footer (OracleUsage). */
+.chat-usage {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  color: var(--ui-text-faint);
+  text-align: right;
+}
+
+/* Error/stop-reason notices (rate_limit, context_window, refusal, …). */
+.chat-banner {
+  align-self: stretch;
+  padding: 8px 12px;
+  border-radius: var(--ui-radius-md);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-surface-2);
+  font-size: var(--ui-text-md);
+}
+.chat-banner.warn { background: var(--ui-warn-soft); border-color: var(--ui-warn); color: var(--ui-warn); }
+.chat-banner.error { background: var(--ui-danger-soft); border-color: var(--ui-danger); color: var(--ui-danger); }
+
+/* Attachment chip (image/document blocks in history or composer). */
+.chat-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius-sm);
+  background: var(--ui-surface-2);
+  color: var(--ui-text-muted);
+  padding: 3px 8px;
+}
+.chat-attachment img {
+  max-height: 48px;
+  border-radius: var(--ui-radius-sm);
+  display: block;
+}
+
+/* @odla-ai/ui — chart containers
+   Rendering happens on <canvas> via js/canvas.js; colors come from the
+   --ui-chart-* tokens read with js/palette.js readPalette(). */
+
+.chart { position: relative; }
+.chart canvas { display: block; width: 100%; }
+
+.chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ui-space-3);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-text-xs);
+  color: var(--ui-text-muted);
+  margin-top: var(--ui-space-2);
+}
+.chart-key { display: inline-flex; align-items: center; gap: 5px; }
+.chart-key i {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: var(--ui-radius-sm);
+  background: currentColor;
+}