@campfire-interactive/ai-chat 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/host/index.js +51 -4
- package/package.json +1 -1
package/dist/host/index.js
CHANGED
|
@@ -61,6 +61,25 @@ function applyEvent(ex, event) {
|
|
|
61
61
|
return { ...ex, status: "error", error: event.message };
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
|
+
function restoreCards(cards) {
|
|
65
|
+
return cards.map((card) => ({
|
|
66
|
+
...card,
|
|
67
|
+
exchanges: card.exchanges.map((ex) => ({
|
|
68
|
+
...ex,
|
|
69
|
+
...ex.status === "streaming" ? { status: "error", error: "The page reloaded before this answer finished." } : {},
|
|
70
|
+
parts: ex.parts.map(
|
|
71
|
+
(p) => p.kind === "write" && p.item.state === "confirming" ? {
|
|
72
|
+
...p,
|
|
73
|
+
item: {
|
|
74
|
+
...p.item,
|
|
75
|
+
state: "failed",
|
|
76
|
+
error: "The page reloaded while this was being made. Check the changes list before asking again."
|
|
77
|
+
}
|
|
78
|
+
} : p
|
|
79
|
+
)
|
|
80
|
+
}))
|
|
81
|
+
}));
|
|
82
|
+
}
|
|
64
83
|
function discardPending(cards) {
|
|
65
84
|
let changed = false;
|
|
66
85
|
const next = cards.map((card) => {
|
|
@@ -212,6 +231,17 @@ function writeSession(key, value) {
|
|
|
212
231
|
} catch {
|
|
213
232
|
}
|
|
214
233
|
}
|
|
234
|
+
function readThread(key) {
|
|
235
|
+
const raw = readSession(key);
|
|
236
|
+
if (!raw) return null;
|
|
237
|
+
try {
|
|
238
|
+
const parsed = JSON.parse(raw);
|
|
239
|
+
if (typeof parsed?.sessionId !== "string" || !Array.isArray(parsed.cards)) return null;
|
|
240
|
+
return { sessionId: parsed.sessionId, cards: restoreCards(parsed.cards), summaries: parsed.summaries ?? {} };
|
|
241
|
+
} catch {
|
|
242
|
+
return null;
|
|
243
|
+
}
|
|
244
|
+
}
|
|
215
245
|
function AiChatProvider(props) {
|
|
216
246
|
return /* @__PURE__ */ jsx(ChatProvider, { ...props, enabled: Boolean(props.hubUrl || props.client) });
|
|
217
247
|
}
|
|
@@ -270,8 +300,10 @@ function ChatProvider({
|
|
|
270
300
|
const [expanded, setExpandedState] = useState(() => readStored(expandedKey) === "1");
|
|
271
301
|
useEffect(() => writeStored(expandedKey, expanded ? "1" : "0"), [expandedKey, expanded]);
|
|
272
302
|
const setExpanded = useCallback((next) => setExpandedState(next), []);
|
|
273
|
-
const
|
|
274
|
-
const [
|
|
303
|
+
const threadKey = `cfi.ai-chat.${app}.thread`;
|
|
304
|
+
const [restored] = useState(() => readThread(threadKey));
|
|
305
|
+
const [sessionId, setSessionId] = useState(() => restored?.sessionId ?? newId());
|
|
306
|
+
const [cards, setCards] = useState(() => restored?.cards ?? []);
|
|
275
307
|
const [busy, setBusy] = useState(false);
|
|
276
308
|
const [draft, setDraft] = useState("");
|
|
277
309
|
const files = useRef(/* @__PURE__ */ new Map());
|
|
@@ -279,7 +311,22 @@ function ChatProvider({
|
|
|
279
311
|
const [staged, setStaged] = useState([]);
|
|
280
312
|
const [attached, setAttached] = useState([]);
|
|
281
313
|
const [changes, setChanges] = useState({ items: [], loading: false, loaded: false });
|
|
282
|
-
const [summaries, setSummaries] = useState({});
|
|
314
|
+
const [summaries, setSummaries] = useState(() => restored?.summaries ?? {});
|
|
315
|
+
const saveThread = useCallback(
|
|
316
|
+
(thread) => writeSession(threadKey, thread.cards.length ? JSON.stringify(thread) : null),
|
|
317
|
+
[threadKey]
|
|
318
|
+
);
|
|
319
|
+
const threadRef = useRef({ sessionId, cards, summaries });
|
|
320
|
+
threadRef.current = { sessionId, cards, summaries };
|
|
321
|
+
useEffect(() => {
|
|
322
|
+
if (!busy) saveThread(threadRef.current);
|
|
323
|
+
}, [busy, sessionId, cards, summaries, saveThread]);
|
|
324
|
+
useEffect(() => {
|
|
325
|
+
if (typeof window === "undefined") return void 0;
|
|
326
|
+
const onHide = () => saveThread(threadRef.current);
|
|
327
|
+
window.addEventListener("pagehide", onHide);
|
|
328
|
+
return () => window.removeEventListener("pagehide", onHide);
|
|
329
|
+
}, [saveThread]);
|
|
283
330
|
const cardsRef = useRef(cards);
|
|
284
331
|
cardsRef.current = cards;
|
|
285
332
|
const pageRef = useRef(pageContext);
|
|
@@ -1048,7 +1095,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
1048
1095
|
}
|
|
1049
1096
|
|
|
1050
1097
|
// src/styles.css
|
|
1051
|
-
styleInject('@layer components {\n .cfi-ac-root {\n --cfi-ac-bg: var(--cfi-surface, #ffffff);\n --cfi-ac-bg-muted: var(--cfi-surface-muted, #f9fafb);\n --cfi-ac-ground: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ac-bg-hover: var(--cfi-surface-hover, #f3f4f6);\n --cfi-ac-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ac-fg: var(--cfi-content, #111827);\n --cfi-ac-fg-muted: var(--cfi-content-muted, #4b5563);\n --cfi-ac-fg-subtle: var(--cfi-content-muted, #6b7280);\n --cfi-ac-border: var(--cfi-border, #e5e7eb);\n --cfi-ac-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ac-action: var(--cfi-action, #2563eb);\n --cfi-ac-action-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ac-action-hover: var(--cfi-action-hover, #1d4ed8);\n --cfi-ac-action-soft: var(--cfi-action-soft, #eff6ff);\n --cfi-ac-accent: var(--cfi-ai-accent, var(--cfi-action, #2563eb));\n --cfi-ac-accent-soft: var(--cfi-ai-accent-soft, var(--cfi-action-soft, #eff6ff));\n --cfi-ac-radius: var(--cfi-radius-md, 0.375rem);\n --cfi-ac-radius-lg: var(--cfi-radius-lg, 0.5rem);\n color: var(--cfi-ac-fg);\n font-family: var(--cfi-font-family, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n line-height: var(--cfi-line-height-normal, 1.5);\n }\n .cfi-ac-root *,\n .cfi-ac-root *::before,\n .cfi-ac-root *::after {\n box-sizing: border-box;\n }\n .cfi-ac-root :where(button) {\n font: inherit;\n color: inherit;\n }\n .cfi-ac-header-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--cfi-color-gray-600, #4b5563);\n cursor: pointer;\n transition: background var(--cfi-duration-fast, 150ms), color var(--cfi-duration-fast, 150ms);\n }\n .cfi-ac-header-btn:hover {\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-header-btn[aria-pressed=true] {\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-header-btn:focus-visible,\n .cfi-ac-root :where(button, a, textarea, [tabindex]):focus-visible {\n outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n outline-offset: var(--cfi-focus-ring-offset, 2px);\n }\n .cfi-ac-panel {\n position: relative;\n display: flex;\n flex: 0 0 auto;\n flex-direction: column;\n align-self: stretch;\n min-height: 0;\n max-width: calc(100vw - 320px);\n min-width: 360px;\n border-left: 1px solid var(--cfi-ac-border);\n background: var(--cfi-ac-bg);\n }\n .cfi-ac-resize {\n position: absolute;\n top: 0;\n left: -4px;\n z-index: 2;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n }\n .cfi-ac-resize:hover {\n background: color-mix(in srgb, var(--cfi-ac-accent) 25%, transparent);\n }\n .cfi-ac-resize:focus-visible {\n background: var(--cfi-ac-action);\n outline: none;\n }\n .cfi-ac-head {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border-bottom: 1px solid var(--cfi-ac-border);\n }\n .cfi-ac-head__mark {\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-head__title {\n margin: 0;\n font-size: var(--cfi-font-size-base, 1rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-head__tools {\n display: flex;\n gap: 2px;\n margin-left: auto;\n }\n .cfi-ac-icon-btn {\n display: inline-grid;\n place-items: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--cfi-ac-radius);\n background: transparent;\n color: var(--cfi-ac-fg-muted);\n cursor: pointer;\n }\n .cfi-ac-icon-btn:hover:not(:disabled) {\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-icon-btn[aria-pressed=true] {\n background: var(--cfi-ac-action-soft);\n color: var(--cfi-ac-action);\n }\n .cfi-ac-icon-btn:disabled {\n opacity: 0.4;\n cursor: default;\n }\n .cfi-ac-muted {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-changes {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-changes {\n padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n }\n .cfi-ac-changes__back {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-xs, 0.25rem) 0;\n border: none;\n background: transparent;\n color: var(--cfi-ac-action);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n .cfi-ac-changes__back:hover {\n text-decoration: underline;\n }\n .cfi-ac-changes__title {\n margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-changes p {\n margin: 0;\n }\n .cfi-ac-changes__list {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-changes__list li {\n display: grid;\n gap: 2px;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-border);\n border-left: 3px solid var(--cfi-color-success, #10b981);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n }\n .cfi-ac-changes__list li[data-outcome=failed] {\n border-left-color: var(--cfi-color-error, #ef4444);\n }\n .cfi-ac-changes__what {\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-changes__meta,\n .cfi-ac-changes__q {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-timeline {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--cfi-spacing-md, 1rem);\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-spacing-md, 1rem);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: auto 0;\n padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-sm, 0.5rem);\n text-align: center;\n }\n .cfi-ac-empty__mark {\n display: grid;\n place-items: center;\n width: 44px;\n height: 44px;\n margin-bottom: var(--cfi-spacing-sm, 0.5rem);\n border-radius: 50%;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-empty__title {\n margin: 0;\n font-size: var(--cfi-font-size-base, 1rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-empty__sub {\n max-width: 32ch;\n margin: var(--cfi-spacing-2xs, 0.125rem) 0 var(--cfi-spacing-md, 1rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-empty .cfi-ac-chips {\n align-self: stretch;\n justify-content: flex-start;\n }\n .cfi-ac-card {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n box-shadow: var(--cfi-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));\n animation: cfi-ac-rise 200ms var(--cfi-easing, ease-out) both;\n }\n .cfi-ac-exchange {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-exchange[data-reply] {\n padding-top: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-exchange:not([data-reply]) > .cfi-ac-q {\n margin: calc(-1 * var(--cfi-spacing-sm, 0.5rem)) calc(-1 * var(--cfi-spacing-md, 1rem)) var(--cfi-spacing-xs, 0.25rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) 0 0;\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-exchange[data-reply] > .cfi-ac-q {\n align-self: flex-end;\n max-width: 85%;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) var(--cfi-ac-radius) var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-q .cfi-ac-q__where,\n .cfi-ac-q .cfi-ac-q__files li {\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-q .cfi-ac-q__files li {\n background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n }\n .cfi-ac-q__text {\n margin: 0;\n font-size: inherit;\n font-weight: var(--cfi-font-weight-semibold, 600);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n .cfi-ac-q__where,\n .cfi-ac-composer__page {\n display: flex;\n align-items: center;\n gap: 4px;\n margin: 2px 0 0;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-q__files {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-q__files li {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 6px;\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-ac-bg-muted);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-a {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n min-width: 0;\n }\n .cfi-ac-thinking,\n .cfi-ac-steps--live {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-steps__toggle {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n gap: 2px;\n padding: 0;\n border: none;\n background: none;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n cursor: pointer;\n }\n .cfi-ac-steps__toggle:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-steps__list {\n margin: 4px 0 0;\n padding-left: 1.75rem;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-error,\n .cfi-ac-write__error {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n margin: 0;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-color-error-border, #fecaca);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-color-error-soft, #fef2f2);\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-error svg,\n .cfi-ac-write__error svg {\n flex: 0 0 auto;\n margin-top: 3px;\n }\n .cfi-ac-md {\n overflow-wrap: anywhere;\n }\n .cfi-ac-md > :first-child {\n margin-top: 0;\n }\n .cfi-ac-md > :last-child {\n margin-bottom: 0;\n }\n .cfi-ac-md p,\n .cfi-ac-md ul,\n .cfi-ac-md ol {\n margin: 0.5em 0;\n }\n .cfi-ac-md ul,\n .cfi-ac-md ol {\n padding-left: 1.25rem;\n }\n .cfi-ac-md ul {\n list-style: disc;\n }\n .cfi-ac-md ol {\n list-style: decimal;\n }\n .cfi-ac-md h1,\n .cfi-ac-md h2,\n .cfi-ac-md h3,\n .cfi-ac-md h4 {\n margin: 0.75em 0 0.25em;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-md a,\n .cfi-ac-citation {\n color: var(--cfi-content-link, var(--cfi-ac-action));\n }\n .cfi-ac-md code {\n padding: 0.1em 0.3em;\n border-radius: 4px;\n background: var(--cfi-ac-bg-muted);\n font-family: var(--cfi-font-family-mono, ui-monospace, monospace);\n font-size: 0.9em;\n }\n .cfi-ac-md pre {\n overflow-x: auto;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg-muted);\n }\n .cfi-ac-md pre code {\n padding: 0;\n background: none;\n }\n .cfi-ac-md blockquote {\n margin: 0.5em 0;\n padding-left: 0.75em;\n border-left: 3px solid var(--cfi-ac-border);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-md-table,\n .cfi-ac-table__scroll {\n overflow-x: auto;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n }\n .cfi-ac-md-table {\n margin: 0.5em 0;\n }\n .cfi-ac-md table,\n .cfi-ac-table table,\n .cfi-ac-write__diff {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-md th,\n .cfi-ac-md td,\n .cfi-ac-table th,\n .cfi-ac-table td {\n padding: 6px 8px;\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n text-align: left;\n vertical-align: top;\n }\n .cfi-ac-md th,\n .cfi-ac-table th {\n background: var(--cfi-ac-bg-muted);\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n white-space: nowrap;\n }\n .cfi-ac-md tr:last-child td,\n .cfi-ac-table tr:last-child td {\n border-bottom: none;\n }\n .cfi-ac-block {\n margin: 0;\n min-width: 0;\n }\n .cfi-ac-block__title {\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-table [data-numeric] {\n text-align: right;\n }\n .cfi-ac-table td[data-fit=short] {\n white-space: nowrap;\n }\n .cfi-ac-table td[data-fit=long] {\n min-width: 11rem;\n }\n .cfi-ac-table th button {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 0;\n border: none;\n background: none;\n font-weight: inherit;\n cursor: pointer;\n }\n .cfi-ac-table th[data-numeric] button {\n flex-direction: row-reverse;\n }\n .cfi-ac-table th button:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-status {\n display: inline-block;\n padding: 0 6px;\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-color-neutral-soft, #f3f4f6);\n color: var(--cfi-color-neutral-text, #374151);\n white-space: nowrap;\n }\n .cfi-ac-status[data-tone=good] {\n background: var(--cfi-color-success-soft, #ecfdf5);\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-status[data-tone=bad] {\n background: var(--cfi-color-error-soft, #fef2f2);\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-status[data-tone=warn] {\n background: var(--cfi-color-warning-soft, #fffbeb);\n color: var(--cfi-color-warning-text, #92400e);\n }\n .cfi-ac-chart__frame {\n width: 100%;\n padding: 4px 0;\n }\n .cfi-ac-chart--loading {\n height: 260px;\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg-muted);\n }\n .cfi-ac-kpis {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-kpi {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n }\n .cfi-ac-kpi__label {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-kpi__value {\n font-size: var(--cfi-font-size-lg, 1.125rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-kpi__change {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-kpi[data-tone=good] .cfi-ac-kpi__change {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-kpi[data-tone=bad] .cfi-ac-kpi__change {\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-entities {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n .cfi-ac-entity {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: "type label go" "type sub go";\n align-items: center;\n column-gap: var(--cfi-spacing-sm, 0.5rem);\n width: 100%;\n padding: 6px var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-entity:hover {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action-soft);\n }\n .cfi-ac-entity__type {\n grid-area: type;\n padding: 1px 6px;\n border-radius: 4px;\n background: var(--cfi-ac-bg-muted);\n font-size: 11px;\n text-transform: capitalize;\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-entity__label {\n grid-area: label;\n font-weight: var(--cfi-font-weight-medium, 500);\n overflow-wrap: anywhere;\n }\n .cfi-ac-entity__sub {\n grid-area: sub;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-entity__go {\n grid-area: go;\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-actions,\n .cfi-ac-write__buttons {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 32px;\n padding: 0 12px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg);\n font-weight: var(--cfi-font-weight-medium, 500);\n cursor: pointer;\n }\n .cfi-ac-btn:hover:not(:disabled) {\n background: var(--cfi-ac-bg-hover);\n }\n .cfi-ac-btn[data-variant=primary] {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ac-action-hover);\n }\n .cfi-ac-btn:disabled {\n opacity: 0.6;\n cursor: default;\n }\n .cfi-ac-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n .cfi-ac-chip {\n padding: 4px 10px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-ac-bg);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-chip:hover:not(:disabled) {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action-soft);\n }\n .cfi-ac-chip[data-variant=rewrite] {\n border-style: dashed;\n }\n .cfi-ac-chip:disabled {\n opacity: 0.5;\n cursor: default;\n }\n .cfi-ac-question {\n padding: var(--cfi-spacing-sm, 0.5rem);\n border-left: 3px solid var(--cfi-ac-accent);\n border-radius: 2px;\n background: var(--cfi-ac-accent-soft);\n }\n .cfi-ac-question__text {\n margin: 0 0 6px;\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-followups__label {\n display: block;\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-citations {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .cfi-ac-citation {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n gap: 6px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-decoration: none;\n }\n .cfi-ac-citation:hover {\n text-decoration: underline;\n }\n .cfi-ac-citation[aria-disabled=true] {\n color: var(--cfi-ac-fg-subtle);\n pointer-events: none;\n }\n .cfi-ac-citation__section {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-action);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-bg);\n }\n .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) {\n border-color: var(--cfi-ac-border);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-write__head p {\n margin: 0;\n }\n .cfi-ac-write__kicker {\n font-size: 11px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n letter-spacing: var(--cfi-letter-spacing-wide, 0.025em);\n text-transform: uppercase;\n color: var(--cfi-ac-action);\n }\n .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) .cfi-ac-write__kicker {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__summary {\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-write__entity {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__diff th,\n .cfi-ac-write__diff td {\n padding: 4px 6px;\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n text-align: left;\n vertical-align: top;\n overflow-wrap: anywhere;\n }\n .cfi-ac-write__diff thead th {\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__diff tbody th {\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n white-space: nowrap;\n }\n .cfi-ac-write__before {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__after[data-changed] {\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-write__file {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n }\n .cfi-ac-write__status {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-write__status[data-tone=good] {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-write__status[data-tone=bad] {\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-composer__tools {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n }\n .cfi-ac-understood {\n margin: 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-understood__label {\n color: var(--cfi-ac-fg-muted);\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-based {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: 11px;\n }\n .cfi-ac-based__label {\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n .cfi-ac-based__chip {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 1px 8px;\n border-radius: 999px;\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-fg-muted);\n }\n a.cfi-ac-based__chip,\n .cfi-ac-based__chip--link {\n border: none;\n color: var(--cfi-ac-action);\n font: inherit;\n text-decoration: none;\n cursor: pointer;\n }\n a.cfi-ac-based__chip:hover,\n .cfi-ac-based__chip--link:hover {\n text-decoration: underline;\n }\n a.cfi-ac-based__chip:focus-visible {\n outline: 2px solid var(--cfi-ac-action);\n outline-offset: 1px;\n }\n .cfi-ac-elapsed {\n margin-left: auto;\n color: var(--cfi-ac-fg-subtle);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-card {\n position: relative;\n }\n .cfi-ac-card__foldbtn {\n position: absolute;\n z-index: 1;\n color: var(--cfi-ac-action-fg);\n top: var(--cfi-spacing-xs, 0.25rem);\n right: var(--cfi-spacing-xs, 0.25rem);\n opacity: 0;\n transition: opacity 120ms ease;\n }\n .cfi-ac-card__foldbtn:hover:not(:disabled) {\n background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-card:hover .cfi-ac-card__foldbtn,\n .cfi-ac-card__foldbtn:focus-visible {\n opacity: 1;\n }\n .cfi-ac-card--folded {\n padding: 0;\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action);\n }\n .cfi-ac-card--folded .cfi-ac-card__fold {\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-card__fold {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n width: 100%;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n font-weight: var(--cfi-font-weight-semibold, 600);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-card__fold > span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-ready {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n padding: 2px 10px;\n border-radius: 999px;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-ready__dot {\n width: 6px;\n height: 6px;\n border-radius: 999px;\n background: var(--cfi-color-success, #10b981);\n }\n .cfi-ac-catalog__heading {\n align-self: stretch;\n margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: 11px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n letter-spacing: 0.04em;\n text-align: left;\n text-transform: uppercase;\n }\n .cfi-ac-catalog {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-catalog__group {\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n overflow: hidden;\n }\n .cfi-ac-catalog__toggle {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n width: 100%;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-catalog__name {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-width: 0;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-catalog__blurb {\n overflow: hidden;\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-weight: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-catalog__count {\n padding: 0 6px;\n border-radius: 999px;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n font-size: 10px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-catalog__questions {\n display: flex;\n flex-direction: column;\n padding: var(--cfi-spacing-xs, 0.25rem);\n border-top: 1px solid var(--cfi-ac-border-subtle);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-catalog__q {\n display: flex;\n align-items: flex-start;\n gap: var(--cfi-spacing-xs, 0.25rem);\n padding: 6px var(--cfi-spacing-sm, 0.5rem);\n border: none;\n border-radius: var(--cfi-ac-radius);\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-catalog__q:hover {\n background: var(--cfi-ac-raised);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-catalog__q svg {\n flex: 0 0 auto;\n margin-top: 4px;\n }\n .cfi-ac-grounded {\n display: flex;\n align-self: stretch;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n padding: 0 var(--cfi-spacing-xs, 0.25rem);\n color: var(--cfi-ac-fg-muted);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-align: left;\n }\n .cfi-ac-grounded svg {\n flex: 0 0 auto;\n margin-top: 2px;\n }\n .cfi-ac-grounded strong {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-write--folded {\n padding: 0;\n }\n .cfi-ac-write__fold {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n width: 100%;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg-muted);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-write__fold:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-write__fold--close {\n width: auto;\n padding: 0 0 var(--cfi-spacing-xs, 0.25rem);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-write__fold-mark[data-tone=good],\n .cfi-ac-write__fold-status[data-tone=good] {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-write__fold-text {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n color: var(--cfi-ac-fg);\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-write__fold-status {\n flex: 0 0 auto;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-confirm-all {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-spacing-sm, 0.5rem);\n color: var(--cfi-ac-fg-muted);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n }\n .cfi-ac-cardwrap {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-time {\n align-self: flex-end;\n padding-right: var(--cfi-spacing-xs, 0.25rem);\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-a__foot {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-a__foot:empty {\n display: none;\n }\n .cfi-ac-copy {\n margin-left: auto;\n opacity: 0;\n transition: opacity 120ms ease;\n }\n .cfi-ac-a:hover .cfi-ac-copy,\n .cfi-ac-copy:focus-visible {\n opacity: 1;\n }\n .cfi-ac-panel[data-expanded] {\n position: absolute;\n inset: 0;\n z-index: 30;\n max-width: none;\n min-width: 0;\n border-left: none;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-timeline {\n scrollbar-gutter: stable both-edges;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-timeline > * {\n width: 100%;\n max-width: 52rem;\n margin-inline: auto;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-page-starters,\n .cfi-ac-panel[data-expanded] .cfi-ac-composer {\n padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n }\n .cfi-ac-page-starters {\n flex: 0 0 auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) 0;\n border-top: 1px solid var(--cfi-ac-border);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-page-starters__label {\n display: block;\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-composer {\n flex: 0 0 auto;\n background: var(--cfi-ac-ground);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n }\n .cfi-ac-composer__page {\n margin: 0 0 4px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-composer__files {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin: 0 0 6px;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-composer__files li {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 100%;\n padding: 2px 4px 2px 8px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-radius-full, 9999px);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-composer__file-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-composer__files button {\n display: grid;\n place-items: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: none;\n cursor: pointer;\n }\n .cfi-ac-composer__files button:hover {\n background: var(--cfi-ac-bg-hover);\n }\n .cfi-ac-composer__box {\n border: 1px solid var(--cfi-border-strong, #d1d5db);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n }\n .cfi-ac-composer__box:focus-within {\n border-color: var(--cfi-border-focus, var(--cfi-ac-action));\n }\n .cfi-ac-composer textarea {\n display: block;\n width: 100%;\n max-height: 140px;\n overflow-y: auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n resize: none;\n }\n .cfi-ac-composer textarea::placeholder {\n color: var(--cfi-ac-fg-subtle);\n opacity: 1;\n }\n .cfi-ac-composer textarea:focus-visible {\n outline: none;\n }\n .cfi-ac-composer__box:focus-within {\n outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n outline-offset: 1px;\n }\n .cfi-ac-composer__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 2px 4px 4px;\n }\n .cfi-ac-send {\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n cursor: pointer;\n }\n .cfi-ac-send:hover:not(:disabled) {\n background: var(--cfi-ac-action-hover);\n }\n .cfi-ac-send:disabled {\n background: var(--cfi-surface-disabled, #e5e7eb);\n color: var(--cfi-content-disabled, #9ca3af);\n cursor: default;\n }\n .cfi-ac-dropzone {\n position: absolute;\n inset: 8px;\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: var(--cfi-spacing-lg, 1.5rem);\n border: 2px dashed var(--cfi-ac-action);\n border-radius: var(--cfi-ac-radius-lg);\n background: color-mix(in srgb, var(--cfi-ac-bg) 92%, transparent);\n color: var(--cfi-ac-fg-muted);\n text-align: center;\n pointer-events: none;\n }\n @keyframes cfi-ac-rise {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n }\n @keyframes cfi-ac-spin {\n to {\n transform: rotate(360deg);\n }\n }\n .cfi-ac-spin {\n animation: cfi-ac-spin 0.9s linear infinite;\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ac-card {\n animation: none;\n }\n .cfi-ac-spin {\n animation: none;\n }\n .cfi-ac-copy,\n .cfi-ac-card__foldbtn {\n transition: none;\n }\n }\n @media (hover: none) {\n .cfi-ac-copy,\n .cfi-ac-card__foldbtn {\n opacity: 1;\n }\n }\n .cfi-ac-draft {\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n overflow: hidden;\n }\n .cfi-ac-draft__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n }\n .cfi-ac-draft__head .cfi-ac-block__title {\n margin: 0;\n }\n .cfi-ac-draft__meta {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2px var(--cfi-spacing-sm, 0.5rem);\n margin: 0;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-draft__meta dt {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-draft__meta dd {\n margin: 0;\n }\n .cfi-ac-draft__body {\n max-height: 320px;\n padding: var(--cfi-spacing-sm, 0.5rem);\n overflow-y: auto;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n .cfi-ac-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n .cfi-ac-btn[aria-disabled=true] {\n cursor: progress;\n opacity: 0.7;\n }\n}\n');
|
|
1098
|
+
styleInject('@layer components {\n .cfi-ac-root {\n --cfi-ac-bg: var(--cfi-surface, #ffffff);\n --cfi-ac-bg-muted: var(--cfi-surface-muted, #f9fafb);\n --cfi-ac-ground: var(--cfi-surface-sunken, #f9fafb);\n --cfi-ac-bg-hover: var(--cfi-surface-hover, #f3f4f6);\n --cfi-ac-raised: var(--cfi-surface-raised, #ffffff);\n --cfi-ac-fg: var(--cfi-content, #111827);\n --cfi-ac-fg-muted: var(--cfi-content-muted, #4b5563);\n --cfi-ac-fg-subtle: var(--cfi-content-muted, #6b7280);\n --cfi-ac-border: var(--cfi-border, #e5e7eb);\n --cfi-ac-border-subtle: var(--cfi-border-subtle, #f3f4f6);\n --cfi-ac-action: var(--cfi-action, #2563eb);\n --cfi-ac-action-fg: var(--cfi-action-fg, #ffffff);\n --cfi-ac-action-hover: var(--cfi-action-hover, #1d4ed8);\n --cfi-ac-action-soft: var(--cfi-action-soft, #eff6ff);\n --cfi-ac-accent: var(--cfi-ai-accent, var(--cfi-action, #2563eb));\n --cfi-ac-accent-soft: var(--cfi-ai-accent-soft, var(--cfi-action-soft, #eff6ff));\n --cfi-ac-radius: var(--cfi-radius-md, 0.375rem);\n --cfi-ac-radius-lg: var(--cfi-radius-lg, 0.5rem);\n color: var(--cfi-ac-fg);\n font-family: var(--cfi-font-family, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n line-height: var(--cfi-line-height-normal, 1.5);\n }\n .cfi-ac-root *,\n .cfi-ac-root *::before,\n .cfi-ac-root *::after {\n box-sizing: border-box;\n }\n .cfi-ac-root :where(button) {\n font: inherit;\n color: inherit;\n }\n .cfi-ac-header-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: transparent;\n color: var(--cfi-color-gray-600, #4b5563);\n cursor: pointer;\n transition: background var(--cfi-duration-fast, 150ms), color var(--cfi-duration-fast, 150ms);\n }\n .cfi-ac-header-btn:hover {\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-header-btn[aria-pressed=true] {\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-header-btn:focus-visible,\n .cfi-ac-root :where(button, a, textarea, [tabindex]):focus-visible {\n outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n outline-offset: var(--cfi-focus-ring-offset, 2px);\n }\n .cfi-ac-panel {\n position: relative;\n display: flex;\n flex: 0 0 auto;\n flex-direction: column;\n align-self: stretch;\n min-height: 0;\n max-width: calc(100vw - 320px);\n min-width: 360px;\n border-left: 1px solid var(--cfi-ac-border);\n background: var(--cfi-ac-bg);\n }\n .cfi-ac-resize {\n position: absolute;\n top: 0;\n left: -4px;\n z-index: 2;\n width: 8px;\n height: 100%;\n cursor: col-resize;\n }\n .cfi-ac-resize:hover {\n background: color-mix(in srgb, var(--cfi-ac-accent) 25%, transparent);\n }\n .cfi-ac-resize:focus-visible {\n background: var(--cfi-ac-action);\n outline: none;\n }\n .cfi-ac-head {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border-bottom: 1px solid var(--cfi-ac-border);\n }\n .cfi-ac-head__mark {\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-head__title {\n margin: 0;\n font-size: var(--cfi-font-size-base, 1rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-head__tools {\n display: flex;\n gap: 2px;\n margin-left: auto;\n }\n .cfi-ac-icon-btn {\n display: inline-grid;\n place-items: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: var(--cfi-ac-radius);\n background: transparent;\n color: var(--cfi-ac-fg-muted);\n cursor: pointer;\n }\n .cfi-ac-icon-btn:hover:not(:disabled) {\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-icon-btn[aria-pressed=true] {\n background: var(--cfi-ac-action-soft);\n color: var(--cfi-ac-action);\n }\n .cfi-ac-icon-btn:disabled {\n opacity: 0.4;\n cursor: default;\n }\n .cfi-ac-muted {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-changes {\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-changes {\n padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n }\n .cfi-ac-changes__back {\n display: inline-flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-xs, 0.25rem) 0;\n border: none;\n background: transparent;\n color: var(--cfi-ac-action);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n cursor: pointer;\n }\n .cfi-ac-changes__back:hover {\n text-decoration: underline;\n }\n .cfi-ac-changes__title {\n margin: 0 0 var(--cfi-spacing-sm, 0.5rem);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-changes p {\n margin: 0;\n }\n .cfi-ac-changes__list {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-changes__list li {\n display: grid;\n gap: 2px;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-border);\n border-left: 3px solid var(--cfi-color-success, #10b981);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n }\n .cfi-ac-changes__list li[data-outcome=failed] {\n border-left-color: var(--cfi-color-error, #ef4444);\n }\n .cfi-ac-changes__what {\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-changes__meta,\n .cfi-ac-changes__q {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-timeline {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--cfi-spacing-md, 1rem);\n min-height: 0;\n overflow-y: auto;\n padding: var(--cfi-spacing-md, 1rem);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-empty {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: auto 0;\n padding: var(--cfi-spacing-lg, 1.5rem) var(--cfi-spacing-sm, 0.5rem);\n text-align: center;\n }\n .cfi-ac-empty__mark {\n display: grid;\n place-items: center;\n width: 44px;\n height: 44px;\n margin-bottom: var(--cfi-spacing-sm, 0.5rem);\n border-radius: 50%;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-empty__title {\n margin: 0;\n font-size: var(--cfi-font-size-base, 1rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-empty__sub {\n max-width: 32ch;\n margin: var(--cfi-spacing-2xs, 0.125rem) 0 var(--cfi-spacing-md, 1rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-empty .cfi-ac-chips {\n align-self: stretch;\n justify-content: flex-start;\n }\n .cfi-ac-card {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n box-shadow: var(--cfi-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));\n animation: cfi-ac-rise 200ms var(--cfi-easing, ease-out) both;\n }\n .cfi-ac-exchange {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-exchange[data-reply] {\n padding-top: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-exchange:not([data-reply]) > .cfi-ac-q {\n margin: calc(-1 * var(--cfi-spacing-sm, 0.5rem)) calc(-1 * var(--cfi-spacing-md, 1rem)) var(--cfi-spacing-xs, 0.25rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) 0 0;\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-exchange[data-reply] > .cfi-ac-q {\n align-self: flex-end;\n max-width: 85%;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-radius: var(--cfi-ac-radius-lg) var(--cfi-ac-radius-lg) var(--cfi-ac-radius) var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-q .cfi-ac-q__where,\n .cfi-ac-q .cfi-ac-q__files li {\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-q .cfi-ac-q__files li {\n background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n }\n .cfi-ac-q__text {\n margin: 0;\n font-size: inherit;\n font-weight: var(--cfi-font-weight-semibold, 600);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n .cfi-ac-q__where,\n .cfi-ac-composer__page {\n display: flex;\n align-items: center;\n gap: 4px;\n margin: 2px 0 0;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-q__files {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-q__files li {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n padding: 1px 6px;\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-ac-bg-muted);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-a {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n min-width: 0;\n }\n .cfi-ac-thinking,\n .cfi-ac-steps--live {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-steps__toggle {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n gap: 2px;\n padding: 0;\n border: none;\n background: none;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n cursor: pointer;\n }\n .cfi-ac-steps__toggle:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-steps__list {\n margin: 4px 0 0;\n padding-left: 1.75rem;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-error,\n .cfi-ac-write__error {\n display: flex;\n align-items: flex-start;\n gap: 6px;\n margin: 0;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-color-error-border, #fecaca);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-color-error-soft, #fef2f2);\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-error svg,\n .cfi-ac-write__error svg {\n flex: 0 0 auto;\n margin-top: 3px;\n }\n .cfi-ac-md {\n overflow-wrap: anywhere;\n }\n .cfi-ac-md > :first-child {\n margin-top: 0;\n }\n .cfi-ac-md > :last-child {\n margin-bottom: 0;\n }\n .cfi-ac-md p,\n .cfi-ac-md ul,\n .cfi-ac-md ol {\n margin: 0.5em 0;\n }\n .cfi-ac-md ul,\n .cfi-ac-md ol {\n padding-left: 1.25rem;\n }\n .cfi-ac-md ul {\n list-style: disc;\n }\n .cfi-ac-md ol {\n list-style: decimal;\n }\n .cfi-ac-md h1,\n .cfi-ac-md h2,\n .cfi-ac-md h3,\n .cfi-ac-md h4 {\n margin: 0.75em 0 0.25em;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-md a,\n .cfi-ac-citation {\n color: var(--cfi-content-link, var(--cfi-ac-action));\n }\n .cfi-ac-md code {\n padding: 0.1em 0.3em;\n border-radius: 4px;\n background: var(--cfi-ac-bg-muted);\n font-family: var(--cfi-font-family-mono, ui-monospace, monospace);\n font-size: 0.9em;\n }\n .cfi-ac-md pre {\n overflow-x: auto;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg-muted);\n }\n .cfi-ac-md pre code {\n padding: 0;\n background: none;\n }\n .cfi-ac-md blockquote {\n margin: 0.5em 0;\n padding-left: 0.75em;\n border-left: 3px solid var(--cfi-ac-border);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-md-table,\n .cfi-ac-table__scroll {\n overflow-x: auto;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n }\n .cfi-ac-md-table {\n margin: 0.5em 0;\n }\n .cfi-ac-md table,\n .cfi-ac-table table,\n .cfi-ac-write__diff {\n width: 100%;\n border-collapse: collapse;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-md th,\n .cfi-ac-md td,\n .cfi-ac-table th,\n .cfi-ac-table td {\n padding: 6px 8px;\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n text-align: left;\n vertical-align: top;\n }\n .cfi-ac-md th,\n .cfi-ac-table th {\n background: var(--cfi-ac-bg-muted);\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n white-space: nowrap;\n }\n .cfi-ac-md tr:last-child td,\n .cfi-ac-table tr:last-child td {\n border-bottom: none;\n }\n .cfi-ac-block {\n margin: 0;\n min-width: 0;\n }\n .cfi-ac-block__title {\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-table [data-numeric] {\n text-align: right;\n }\n .cfi-ac-table td[data-fit=short] {\n white-space: nowrap;\n }\n .cfi-ac-table td[data-fit=long] {\n min-width: 11rem;\n }\n .cfi-ac-table th button {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n padding: 0;\n border: none;\n background: none;\n font-weight: inherit;\n cursor: pointer;\n }\n .cfi-ac-table th[data-numeric] button {\n flex-direction: row-reverse;\n }\n .cfi-ac-table th button:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-status {\n display: inline-block;\n padding: 0 6px;\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-color-neutral-soft, #f3f4f6);\n color: var(--cfi-color-neutral-text, #374151);\n white-space: nowrap;\n }\n .cfi-ac-status[data-tone=good] {\n background: var(--cfi-color-success-soft, #ecfdf5);\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-status[data-tone=bad] {\n background: var(--cfi-color-error-soft, #fef2f2);\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-status[data-tone=warn] {\n background: var(--cfi-color-warning-soft, #fffbeb);\n color: var(--cfi-color-warning-text, #92400e);\n }\n .cfi-ac-chart__frame {\n width: 100%;\n padding: 4px 0;\n }\n .cfi-ac-chart--loading {\n height: 260px;\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg-muted);\n }\n .cfi-ac-kpis {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-kpi {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n }\n .cfi-ac-kpi__label {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-kpi__value {\n font-size: var(--cfi-font-size-lg, 1.125rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-kpi__change {\n display: inline-flex;\n align-items: center;\n gap: 3px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-kpi[data-tone=good] .cfi-ac-kpi__change {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-kpi[data-tone=bad] .cfi-ac-kpi__change {\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-entities {\n display: flex;\n flex-direction: column;\n gap: 4px;\n }\n .cfi-ac-entity {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: "type label go" "type sub go";\n align-items: center;\n column-gap: var(--cfi-spacing-sm, 0.5rem);\n width: 100%;\n padding: 6px var(--cfi-spacing-sm, 0.5rem);\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-entity:hover {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action-soft);\n }\n .cfi-ac-entity__type {\n grid-area: type;\n padding: 1px 6px;\n border-radius: 4px;\n background: var(--cfi-ac-bg-muted);\n font-size: 11px;\n text-transform: capitalize;\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-entity__label {\n grid-area: label;\n font-weight: var(--cfi-font-weight-medium, 500);\n overflow-wrap: anywhere;\n }\n .cfi-ac-entity__sub {\n grid-area: sub;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-entity__go {\n grid-area: go;\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-actions,\n .cfi-ac-write__buttons {\n display: flex;\n flex-wrap: wrap;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 32px;\n padding: 0 12px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius);\n background: var(--cfi-ac-bg);\n font-weight: var(--cfi-font-weight-medium, 500);\n cursor: pointer;\n }\n .cfi-ac-btn:hover:not(:disabled) {\n background: var(--cfi-ac-bg-hover);\n }\n .cfi-ac-btn[data-variant=primary] {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-btn[data-variant=primary]:hover:not(:disabled) {\n background: var(--cfi-ac-action-hover);\n }\n .cfi-ac-btn:disabled {\n opacity: 0.6;\n cursor: default;\n }\n .cfi-ac-chips {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n }\n .cfi-ac-chip {\n padding: 4px 10px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-radius-full, 9999px);\n background: var(--cfi-ac-bg);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-chip:hover:not(:disabled) {\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action-soft);\n }\n .cfi-ac-chip[data-variant=rewrite] {\n border-style: dashed;\n }\n .cfi-ac-chip:disabled {\n opacity: 0.5;\n cursor: default;\n }\n .cfi-ac-question {\n padding: var(--cfi-spacing-sm, 0.5rem);\n border-left: 3px solid var(--cfi-ac-accent);\n border-radius: 2px;\n background: var(--cfi-ac-accent-soft);\n }\n .cfi-ac-question__text {\n margin: 0 0 6px;\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-followups__label {\n display: block;\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-citations {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n .cfi-ac-citation {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n gap: 6px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-decoration: none;\n }\n .cfi-ac-citation:hover {\n text-decoration: underline;\n }\n .cfi-ac-citation[aria-disabled=true] {\n color: var(--cfi-ac-fg-subtle);\n pointer-events: none;\n }\n .cfi-ac-citation__section {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n border: 1px solid var(--cfi-ac-action);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-bg);\n }\n .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) {\n border-color: var(--cfi-ac-border);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-write__head p {\n margin: 0;\n }\n .cfi-ac-write__kicker {\n font-size: 11px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n letter-spacing: var(--cfi-letter-spacing-wide, 0.025em);\n text-transform: uppercase;\n color: var(--cfi-ac-action);\n }\n .cfi-ac-write:not([data-state=pending]):not([data-state=confirming]) .cfi-ac-write__kicker {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__summary {\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-write__entity {\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__diff th,\n .cfi-ac-write__diff td {\n padding: 4px 6px;\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n text-align: left;\n vertical-align: top;\n overflow-wrap: anywhere;\n }\n .cfi-ac-write__diff thead th {\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__diff tbody th {\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n white-space: nowrap;\n }\n .cfi-ac-write__before {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-write__after[data-changed] {\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-write__file {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n }\n .cfi-ac-write__status {\n display: flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n font-weight: var(--cfi-font-weight-medium, 500);\n color: var(--cfi-ac-fg-muted);\n }\n .cfi-ac-write__status[data-tone=good] {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-write__status[data-tone=bad] {\n color: var(--cfi-color-error-text, #991b1b);\n }\n .cfi-ac-composer__tools {\n display: inline-flex;\n align-items: center;\n gap: 2px;\n }\n .cfi-ac-understood {\n margin: 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-understood__label {\n color: var(--cfi-ac-fg-muted);\n font-weight: var(--cfi-font-weight-medium, 500);\n }\n .cfi-ac-based {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: 11px;\n }\n .cfi-ac-based__label {\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n .cfi-ac-based__chip {\n display: inline-flex;\n align-items: center;\n min-height: 24px;\n padding: 1px 8px;\n border-radius: 999px;\n background: var(--cfi-ac-bg-hover);\n color: var(--cfi-ac-fg-muted);\n }\n a.cfi-ac-based__chip,\n .cfi-ac-based__chip--link {\n border: none;\n color: var(--cfi-ac-action);\n font: inherit;\n text-decoration: none;\n cursor: pointer;\n }\n a.cfi-ac-based__chip:hover,\n .cfi-ac-based__chip--link:hover {\n text-decoration: underline;\n }\n a.cfi-ac-based__chip:focus-visible {\n outline: 2px solid var(--cfi-ac-action);\n outline-offset: 1px;\n }\n .cfi-ac-elapsed {\n margin-left: auto;\n color: var(--cfi-ac-fg-subtle);\n font-variant-numeric: tabular-nums;\n }\n .cfi-ac-card {\n position: relative;\n }\n .cfi-ac-card__foldbtn {\n position: absolute;\n z-index: 1;\n color: var(--cfi-ac-action-fg);\n top: var(--cfi-spacing-xs, 0.25rem);\n right: var(--cfi-spacing-xs, 0.25rem);\n opacity: 0;\n transition: opacity 120ms ease;\n }\n .cfi-ac-card__foldbtn:hover:not(:disabled) {\n background: color-mix(in srgb, var(--cfi-ac-action-fg) 18%, transparent);\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-card:hover .cfi-ac-card__foldbtn,\n .cfi-ac-card__foldbtn:focus-visible {\n opacity: 1;\n }\n .cfi-ac-card--folded {\n padding: 0;\n border-color: var(--cfi-ac-action);\n background: var(--cfi-ac-action);\n }\n .cfi-ac-card--folded .cfi-ac-card__fold {\n color: var(--cfi-ac-action-fg);\n }\n .cfi-ac-card__fold {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n width: 100%;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n font-weight: var(--cfi-font-weight-semibold, 600);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-card__fold > span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-ready {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin: 0;\n padding: 2px 10px;\n border-radius: 999px;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-ready__dot {\n width: 6px;\n height: 6px;\n border-radius: 999px;\n background: var(--cfi-color-success, #10b981);\n }\n .cfi-ac-catalog__heading {\n align-self: stretch;\n margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n color: var(--cfi-ac-fg-subtle);\n font-size: 11px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n letter-spacing: 0.04em;\n text-align: left;\n text-transform: uppercase;\n }\n .cfi-ac-catalog {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-catalog__group {\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n overflow: hidden;\n }\n .cfi-ac-catalog__toggle {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n width: 100%;\n padding: var(--cfi-spacing-sm, 0.5rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-catalog__name {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n min-width: 0;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-catalog__blurb {\n overflow: hidden;\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n font-weight: normal;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-catalog__count {\n padding: 0 6px;\n border-radius: 999px;\n background: var(--cfi-ac-accent-soft);\n color: var(--cfi-ac-accent);\n font-size: 10px;\n font-weight: var(--cfi-font-weight-semibold, 600);\n }\n .cfi-ac-catalog__questions {\n display: flex;\n flex-direction: column;\n padding: var(--cfi-spacing-xs, 0.25rem);\n border-top: 1px solid var(--cfi-ac-border-subtle);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-catalog__q {\n display: flex;\n align-items: flex-start;\n gap: var(--cfi-spacing-xs, 0.25rem);\n padding: 6px var(--cfi-spacing-sm, 0.5rem);\n border: none;\n border-radius: var(--cfi-ac-radius);\n background: transparent;\n color: var(--cfi-ac-fg);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-catalog__q:hover {\n background: var(--cfi-ac-raised);\n color: var(--cfi-ac-accent);\n }\n .cfi-ac-catalog__q svg {\n flex: 0 0 auto;\n margin-top: 4px;\n }\n .cfi-ac-grounded {\n display: flex;\n align-self: stretch;\n gap: var(--cfi-spacing-xs, 0.25rem);\n margin: var(--cfi-spacing-sm, 0.5rem) 0 0;\n padding: 0 var(--cfi-spacing-xs, 0.25rem);\n color: var(--cfi-ac-fg-muted);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n text-align: left;\n }\n .cfi-ac-grounded svg {\n flex: 0 0 auto;\n margin-top: 2px;\n }\n .cfi-ac-grounded strong {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-write--folded {\n padding: 0;\n }\n .cfi-ac-write__fold {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-xs, 0.25rem);\n width: 100%;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border: none;\n background: transparent;\n color: var(--cfi-ac-fg-muted);\n font: inherit;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n text-align: left;\n cursor: pointer;\n }\n .cfi-ac-write__fold:hover {\n color: var(--cfi-ac-fg);\n }\n .cfi-ac-write__fold--close {\n width: auto;\n padding: 0 0 var(--cfi-spacing-xs, 0.25rem);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-write__fold-mark[data-tone=good],\n .cfi-ac-write__fold-status[data-tone=good] {\n color: var(--cfi-color-success-text, #065f46);\n }\n .cfi-ac-write__fold-text {\n flex: 1 1 auto;\n min-width: 0;\n overflow: hidden;\n color: var(--cfi-ac-fg);\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-write__fold-status {\n flex: 0 0 auto;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-confirm-all {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-spacing-sm, 0.5rem);\n color: var(--cfi-ac-fg-muted);\n font-size: var(--cfi-font-size-sm, 0.875rem);\n }\n .cfi-ac-cardwrap {\n display: flex;\n flex-direction: column;\n gap: var(--cfi-spacing-xs, 0.25rem);\n }\n .cfi-ac-time {\n align-self: flex-end;\n padding-right: var(--cfi-spacing-xs, 0.25rem);\n color: var(--cfi-ac-fg-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-a__foot {\n display: flex;\n align-items: center;\n gap: var(--cfi-spacing-sm, 0.5rem);\n }\n .cfi-ac-a__foot:empty {\n display: none;\n }\n .cfi-ac-copy {\n margin-left: auto;\n opacity: 0;\n transition: opacity 120ms ease;\n }\n .cfi-ac-a:hover .cfi-ac-copy,\n .cfi-ac-copy:focus-visible {\n opacity: 1;\n }\n :where(*):has(> .cfi-ac-panel[data-expanded]) {\n position: relative;\n }\n .cfi-ac-panel[data-expanded] {\n position: absolute;\n inset: 0;\n z-index: 30;\n max-width: none;\n min-width: 0;\n border-left: none;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-timeline {\n scrollbar-gutter: stable both-edges;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-timeline > * {\n width: 100%;\n max-width: 52rem;\n margin-inline: auto;\n }\n .cfi-ac-panel[data-expanded] .cfi-ac-page-starters,\n .cfi-ac-panel[data-expanded] .cfi-ac-composer {\n padding-inline: max(var(--cfi-spacing-md, 1rem), calc((100% - 52rem) / 2));\n }\n .cfi-ac-page-starters {\n flex: 0 0 auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) 0;\n border-top: 1px solid var(--cfi-ac-border);\n background: var(--cfi-ac-ground);\n }\n .cfi-ac-page-starters__label {\n display: block;\n margin-bottom: 4px;\n font-size: var(--cfi-font-size-xs, 0.75rem);\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-composer {\n flex: 0 0 auto;\n background: var(--cfi-ac-ground);\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-md, 1rem) var(--cfi-spacing-md, 1rem);\n }\n .cfi-ac-composer__page {\n margin: 0 0 4px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-composer__files {\n display: flex;\n flex-wrap: wrap;\n gap: 4px;\n margin: 0 0 6px;\n padding: 0;\n list-style: none;\n }\n .cfi-ac-composer__files li {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n max-width: 100%;\n padding: 2px 4px 2px 8px;\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-radius-full, 9999px);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-composer__file-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .cfi-ac-composer__files button {\n display: grid;\n place-items: center;\n width: 24px;\n height: 24px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: none;\n cursor: pointer;\n }\n .cfi-ac-composer__files button:hover {\n background: var(--cfi-ac-bg-hover);\n }\n .cfi-ac-composer__box {\n border: 1px solid var(--cfi-border-strong, #d1d5db);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n }\n .cfi-ac-composer__box:focus-within {\n border-color: var(--cfi-border-focus, var(--cfi-ac-action));\n }\n .cfi-ac-composer textarea {\n display: block;\n width: 100%;\n max-height: 140px;\n overflow-y: auto;\n padding: var(--cfi-spacing-sm, 0.5rem) var(--cfi-spacing-sm, 0.5rem) 0;\n border: none;\n background: transparent;\n color: inherit;\n font: inherit;\n resize: none;\n }\n .cfi-ac-composer textarea::placeholder {\n color: var(--cfi-ac-fg-subtle);\n opacity: 1;\n }\n .cfi-ac-composer textarea:focus-visible {\n outline: none;\n }\n .cfi-ac-composer__box:focus-within {\n outline: var(--cfi-focus-ring-width, 2px) solid var(--cfi-focus-ring-color, var(--cfi-ac-action));\n outline-offset: 1px;\n }\n .cfi-ac-composer__row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 2px 4px 4px;\n }\n .cfi-ac-send {\n display: grid;\n place-items: center;\n width: 32px;\n height: 32px;\n padding: 0;\n border: none;\n border-radius: 50%;\n background: var(--cfi-ac-action);\n color: var(--cfi-ac-action-fg);\n cursor: pointer;\n }\n .cfi-ac-send:hover:not(:disabled) {\n background: var(--cfi-ac-action-hover);\n }\n .cfi-ac-send:disabled {\n background: var(--cfi-surface-disabled, #e5e7eb);\n color: var(--cfi-content-disabled, #9ca3af);\n cursor: default;\n }\n .cfi-ac-dropzone {\n position: absolute;\n inset: 8px;\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n padding: var(--cfi-spacing-lg, 1.5rem);\n border: 2px dashed var(--cfi-ac-action);\n border-radius: var(--cfi-ac-radius-lg);\n background: color-mix(in srgb, var(--cfi-ac-bg) 92%, transparent);\n color: var(--cfi-ac-fg-muted);\n text-align: center;\n pointer-events: none;\n }\n @keyframes cfi-ac-rise {\n from {\n opacity: 0;\n transform: translateY(4px);\n }\n to {\n opacity: 1;\n transform: none;\n }\n }\n @keyframes cfi-ac-spin {\n to {\n transform: rotate(360deg);\n }\n }\n .cfi-ac-spin {\n animation: cfi-ac-spin 0.9s linear infinite;\n }\n @media (prefers-reduced-motion: reduce) {\n .cfi-ac-card {\n animation: none;\n }\n .cfi-ac-spin {\n animation: none;\n }\n .cfi-ac-copy,\n .cfi-ac-card__foldbtn {\n transition: none;\n }\n }\n @media (hover: none) {\n .cfi-ac-copy,\n .cfi-ac-card__foldbtn {\n opacity: 1;\n }\n }\n .cfi-ac-draft {\n border: 1px solid var(--cfi-ac-border);\n border-radius: var(--cfi-ac-radius-lg);\n background: var(--cfi-ac-raised);\n overflow: hidden;\n }\n .cfi-ac-draft__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--cfi-spacing-sm, 0.5rem);\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n }\n .cfi-ac-draft__head .cfi-ac-block__title {\n margin: 0;\n }\n .cfi-ac-draft__meta {\n display: grid;\n grid-template-columns: auto 1fr;\n gap: 2px var(--cfi-spacing-sm, 0.5rem);\n margin: 0;\n padding: var(--cfi-spacing-xs, 0.25rem) var(--cfi-spacing-sm, 0.5rem);\n border-bottom: 1px solid var(--cfi-ac-border-subtle);\n font-size: var(--cfi-font-size-xs, 0.75rem);\n }\n .cfi-ac-draft__meta dt {\n color: var(--cfi-ac-fg-subtle);\n }\n .cfi-ac-draft__meta dd {\n margin: 0;\n }\n .cfi-ac-draft__body {\n max-height: 320px;\n padding: var(--cfi-spacing-sm, 0.5rem);\n overflow-y: auto;\n font-size: var(--cfi-font-size-sm, 0.875rem);\n white-space: pre-wrap;\n overflow-wrap: anywhere;\n }\n .cfi-ac-sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n .cfi-ac-btn[aria-disabled=true] {\n cursor: progress;\n opacity: 0.7;\n }\n}\n');
|
|
1052
1099
|
|
|
1053
1100
|
// src/host/AiChatSurface.tsx
|
|
1054
1101
|
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@campfire-interactive/ai-chat",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "The platform AI chat panel for Campfire Suite apps: a docked, page-aware assistant opened from the header, answering from every app the user is granted, with typed answer blocks and confirm-to-write cards.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|