@campfire-interactive/ai-chat 0.2.0 → 0.2.1
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 +1 -1
- package/package.json +1 -1
package/dist/host/index.js
CHANGED
|
@@ -1048,7 +1048,7 @@ function styleInject(css, { insertAt } = {}) {
|
|
|
1048
1048
|
}
|
|
1049
1049
|
|
|
1050
1050
|
// 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 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');
|
|
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');
|
|
1052
1052
|
|
|
1053
1053
|
// src/host/AiChatSurface.tsx
|
|
1054
1054
|
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.2.
|
|
3
|
+
"version": "0.2.1",
|
|
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",
|