@devicai/ui 0.25.0 → 0.26.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/cjs/components/ChatDrawer/ChatDrawer.js +4 -1
- package/dist/cjs/components/ChatDrawer/ChatDrawer.js.map +1 -1
- package/dist/cjs/components/ChatDrawer/UsageBar.js +48 -47
- package/dist/cjs/components/ChatDrawer/UsageBar.js.map +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/esm/components/ChatDrawer/ChatDrawer.js +4 -1
- package/dist/esm/components/ChatDrawer/ChatDrawer.js.map +1 -1
- package/dist/esm/components/ChatDrawer/ChatDrawer.types.d.ts +10 -1
- package/dist/esm/components/ChatDrawer/UsageBar.d.ts +29 -1
- package/dist/esm/components/ChatDrawer/UsageBar.js +49 -48
- package/dist/esm/components/ChatDrawer/UsageBar.js.map +1 -1
- package/dist/esm/components/ChatDrawer/index.d.ts +1 -1
- package/dist/esm/index.d.ts +1 -1
- package/dist/esm/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { useMemo, useState, useCallback, useEffect } from 'react';
|
|
3
3
|
import { DevicApiClient } from '../../api/client.js';
|
|
4
4
|
|
|
@@ -42,20 +42,12 @@ function resetLabel(resetsAt) {
|
|
|
42
42
|
const days = Math.round(hours / 24);
|
|
43
43
|
return `resets in ${days}d`;
|
|
44
44
|
}
|
|
45
|
-
/**
|
|
46
|
-
* Pick the rule with the highest utilization (the most restrictive).
|
|
47
|
-
*/
|
|
48
|
-
function mostRestrictive(rules) {
|
|
49
|
-
if (rules.length === 0)
|
|
50
|
-
return null;
|
|
51
|
-
return rules.reduce((max, r) => (r.percent > max.percent ? r : max), rules[0]);
|
|
52
|
-
}
|
|
53
45
|
/**
|
|
54
46
|
* A thin usage bar showing the current tenant/subtenant usage window(s).
|
|
55
47
|
* Rendered above the chat input. Antd-free — styled via `.devic-usage-*` classes.
|
|
56
48
|
* Renders nothing when there are no usage limits configured for the tenant.
|
|
57
49
|
*/
|
|
58
|
-
function UsageBar({ apiKey, baseUrl, tenantId, subtenantId, mode = 'always', metric, display, color = '#1890ff', refreshKey, debug = false, }) {
|
|
50
|
+
function UsageBar({ apiKey, baseUrl, tenantId, subtenantId, mode = 'always', metric, display, customUsageBar, color = '#1890ff', refreshKey, debug = false, }) {
|
|
59
51
|
const cfg = useMemo(() => ({ ...DEFAULT_DISPLAY, ...display }), [display]);
|
|
60
52
|
const client = useMemo(() => {
|
|
61
53
|
if (!apiKey)
|
|
@@ -85,24 +77,33 @@ function UsageBar({ apiKey, baseUrl, tenantId, subtenantId, mode = 'always', met
|
|
|
85
77
|
setLoaded(true);
|
|
86
78
|
}
|
|
87
79
|
}, [client, tenantId, subtenantId, debug]);
|
|
80
|
+
// A custom renderer always wants the data, regardless of the onDemand toggle.
|
|
81
|
+
const active = !!customUsageBar || visible;
|
|
88
82
|
useEffect(() => {
|
|
89
|
-
if (!
|
|
83
|
+
if (!active)
|
|
90
84
|
return;
|
|
91
85
|
void fetchUsage();
|
|
92
|
-
}, [
|
|
93
|
-
// Applicable rules: filter by metric, sort most-restrictive first
|
|
94
|
-
|
|
95
|
-
const rules = useMemo(() => {
|
|
86
|
+
}, [active, fetchUsage, refreshKey]);
|
|
87
|
+
// Applicable rules: filter by metric, sort most-restrictive first.
|
|
88
|
+
const filteredSorted = useMemo(() => {
|
|
96
89
|
const pool = (usage?.usage || []).filter((r) => !metric || r.metric === metric);
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}, [usage, metric, cfg.showAllRules]);
|
|
103
|
-
const tierId = usage?.tierId || rules[0]?.tierId;
|
|
90
|
+
return [...pool].sort((a, b) => b.percent - a.percent);
|
|
91
|
+
}, [usage, metric]);
|
|
92
|
+
// Default UI honours showAllRules; custom renderers always get the full set.
|
|
93
|
+
const rules = useMemo(() => (cfg.showAllRules ? filteredSorted : filteredSorted.slice(0, 1)), [filteredSorted, cfg.showAllRules]);
|
|
94
|
+
const tierId = usage?.tierId || filteredSorted[0]?.tierId;
|
|
104
95
|
if (!tenantId || !client)
|
|
105
96
|
return null;
|
|
97
|
+
// Custom renderer fully replaces the default UI; hand it the live data.
|
|
98
|
+
if (customUsageBar) {
|
|
99
|
+
return (jsx(Fragment, { children: customUsageBar({
|
|
100
|
+
tenantId,
|
|
101
|
+
subtenantId,
|
|
102
|
+
tierId,
|
|
103
|
+
rules: filteredSorted,
|
|
104
|
+
loading: !loaded,
|
|
105
|
+
}) }));
|
|
106
|
+
}
|
|
106
107
|
// onDemand, collapsed: show a small toggle button.
|
|
107
108
|
if (mode === 'onDemand' && !visible) {
|
|
108
109
|
return (jsx("div", { className: "devic-usage-bar-wrap", "data-mode": "onDemand", children: jsxs("button", { type: "button", className: "devic-usage-toggle", onClick: () => setVisible(true), title: "Show usage", children: [jsx(GaugeIcon, {}), jsx("span", { children: "Usage" })] }) }));
|
|
@@ -121,32 +122,32 @@ function UsageBar({ apiKey, baseUrl, tenantId, subtenantId, mode = 'always', met
|
|
|
121
122
|
// A header carries the tier chip and/or the onDemand collapse control, so the
|
|
122
123
|
// collapse "×" has a stable home regardless of how many rows render below.
|
|
123
124
|
const header = showTierChip || mode === 'onDemand' ? (jsxs("div", { className: "devic-usage-bar-head", children: [showTierChip ? (jsx("span", { className: "devic-usage-tier", title: `Tier: ${tierId}`, children: tierId })) : (jsx("span", {})), mode === 'onDemand' && (jsx("button", { type: "button", className: "devic-usage-collapse", onClick: () => setVisible(false), title: "Hide usage", "aria-label": "Hide usage", children: "\u00D7" }))] })) : null;
|
|
124
|
-
return (jsxs("div", { className: "devic-usage-bar-wrap", "data-mode": mode, children: [header, rules.map((rule, i) => {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
125
|
+
return (jsxs("div", { className: "devic-usage-bar-wrap", "data-mode": mode, children: [header, jsx("div", { className: "devic-usage-bar-group", children: rules.map((rule, i) => {
|
|
126
|
+
const pct = Math.min(100, Math.round(rule.percent));
|
|
127
|
+
const fill = fillColor(pct, color);
|
|
128
|
+
const valuesText = `${formatAmount(rule.current, rule.metric)} / ${formatAmount(rule.limit, rule.metric)} ${rule.metric}`;
|
|
129
|
+
// Distinguish rows by metric when several render; otherwise use the
|
|
130
|
+
// scope-aware label so single-rule mode reads "Usage 24%".
|
|
131
|
+
const prefix = multi
|
|
132
|
+
? rule.metric === 'cost'
|
|
133
|
+
? 'Cost'
|
|
134
|
+
: 'Tokens'
|
|
135
|
+
: rule.scope === 'subtenant'
|
|
136
|
+
? 'Your usage'
|
|
137
|
+
: 'Usage';
|
|
138
|
+
const main = [];
|
|
139
|
+
if (cfg.showPercent)
|
|
140
|
+
main.push(`${pct}%`);
|
|
141
|
+
if (cfg.showValues)
|
|
142
|
+
main.push(valuesText);
|
|
143
|
+
if (main.length === 0)
|
|
144
|
+
main.push(`${pct}%`);
|
|
145
|
+
const label = `${prefix} ${main.join(' · ')}`.trim();
|
|
146
|
+
const reset = resetLabel(rule.resetsAt);
|
|
147
|
+
const win = windowLabel(rule.windowUnit, rule.windowEvery);
|
|
148
|
+
const title = `${valuesText} · ${win}${reset ? ` · ${reset}` : ''}`;
|
|
149
|
+
return (jsxs("div", { className: "devic-usage-bar", title: title, "data-state": pct >= 100 ? 'exceeded' : 'ok', children: [jsx("span", { className: "devic-usage-bar-label", children: label }), jsx("div", { className: "devic-usage-bar-track", children: jsx("div", { className: "devic-usage-bar-fill", style: { width: `${pct}%`, backgroundColor: fill } }) }), cfg.showWindow && (jsx("span", { className: "devic-usage-bar-window", children: win })), reset && jsx("span", { className: "devic-usage-bar-reset", children: reset })] }, `${rule.metric}-${rule.windowUnit}-${rule.windowEvery}-${rule.scope}-${i}`));
|
|
150
|
+
}) })] }));
|
|
150
151
|
}
|
|
151
152
|
/** Small gauge icon for the on-demand toggle. */
|
|
152
153
|
function GaugeIcon() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UsageBar.js","sources":["../../../../src/components/ChatDrawer/UsageBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { DevicApiClient } from '../../api/client';\nimport type { TenantUsage, TenantUsageRule } from '../../api/types';\n\n/**\n * Controls what each usage row renders. All flags compose, so a developer can,\n * for example, show absolute values together with the percentage and the tier.\n */\nexport interface UsageBarDisplay {\n /**\n * Show the absolute amount of the active window: `current / limit metric`\n * (e.g. `1,200 / 5,000 tokens`).\n * @default false\n */\n showValues?: boolean;\n /**\n * Show the utilization percentage (e.g. `24%`).\n * @default true\n */\n showPercent?: boolean;\n /**\n * Show the temporal dimension of the window (e.g. `per 3h`, `every 3 hours`).\n * @default true\n */\n showWindow?: boolean;\n /**\n * Show the tier (plan) the limits come from, as a chip above the bar(s).\n * @default false\n */\n showTier?: boolean;\n /**\n * When more than one limit rule applies, render every rule (`true`) or only\n * the single most restrictive one (`false`, highest utilization). The\n * per-row presentation still follows the flags above.\n * @default true\n */\n showAllRules?: boolean;\n}\n\nconst DEFAULT_DISPLAY: Required<UsageBarDisplay> = {\n showValues: false,\n showPercent: true,\n showWindow: true,\n showTier: false,\n showAllRules: true,\n};\n\n/**\n * Props for the UsageBar component.\n */\nexport interface UsageBarProps {\n /** API key (resolved from provider by the ChatDrawer). */\n apiKey?: string;\n /** Base URL (resolved from provider by the ChatDrawer). */\n baseUrl?: string;\n /** Tenant whose usage is displayed. Required — without it the bar renders nothing. */\n tenantId?: string;\n /** Optional subtenant to scope the usage to a specific end user. */\n subtenantId?: string;\n /**\n * Display mode:\n * - 'always': the bar is always visible.\n * - 'onDemand': a small toggle button is shown; the bar appears on click.\n */\n mode?: 'always' | 'onDemand';\n /** Restrict the bar to a single metric. When omitted, all applicable rules are considered. */\n metric?: 'tokens' | 'cost';\n /**\n * What to render per rule (values / percentage / window / tier) and whether\n * to render all applicable rules or only the most restrictive one.\n */\n display?: UsageBarDisplay;\n /** Primary color for the bar fill (below the warning threshold). */\n color?: string;\n /**\n * Changes to this value trigger a refetch (e.g. the message count, so the bar\n * refreshes after each assistant turn).\n */\n refreshKey?: number | string;\n /** Enable debug logging of fetch errors to the console. */\n debug?: boolean;\n}\n\nconst WARN_THRESHOLD = 90;\n\nfunction fillColor(percent: number, base: string): string {\n if (percent >= 100) return '#ff4d4f';\n if (percent >= WARN_THRESHOLD) return '#faad14';\n return base;\n}\n\nfunction formatAmount(value: number, metric: 'tokens' | 'cost'): string {\n if (metric === 'cost') {\n return `$${value.toFixed(value < 1 ? 4 : 2)}`;\n }\n return Math.round(value).toLocaleString();\n}\n\nfunction windowLabel(unit: string, every: number): string {\n const u = every > 1 ? `${unit}s` : unit;\n return every > 1 ? `every ${every} ${u}` : `per ${unit}`;\n}\n\nfunction resetLabel(resetsAt?: number): string {\n if (!resetsAt) return '';\n const ms = resetsAt - Date.now();\n if (ms <= 0) return 'resets now';\n const mins = Math.round(ms / 60000);\n if (mins < 60) return `resets in ${mins}m`;\n const hours = Math.round(mins / 60);\n if (hours < 48) return `resets in ${hours}h`;\n const days = Math.round(hours / 24);\n return `resets in ${days}d`;\n}\n\n/**\n * Pick the rule with the highest utilization (the most restrictive).\n */\nfunction mostRestrictive(rules: TenantUsageRule[]): TenantUsageRule | null {\n if (rules.length === 0) return null;\n return rules.reduce((max, r) => (r.percent > max.percent ? r : max), rules[0]);\n}\n\n/**\n * A thin usage bar showing the current tenant/subtenant usage window(s).\n * Rendered above the chat input. Antd-free — styled via `.devic-usage-*` classes.\n * Renders nothing when there are no usage limits configured for the tenant.\n */\nexport function UsageBar({\n apiKey,\n baseUrl,\n tenantId,\n subtenantId,\n mode = 'always',\n metric,\n display,\n color = '#1890ff',\n refreshKey,\n debug = false,\n}: UsageBarProps): JSX.Element | null {\n const cfg = useMemo(() => ({ ...DEFAULT_DISPLAY, ...display }), [display]);\n\n const client = useMemo(() => {\n if (!apiKey) return null;\n return new DevicApiClient({\n apiKey,\n baseUrl: baseUrl || 'https://api.devic.ai',\n });\n }, [apiKey, baseUrl]);\n\n const [usage, setUsage] = useState<TenantUsage | null>(null);\n const [loaded, setLoaded] = useState(false);\n // onDemand starts hidden; 'always' is effectively visible from the start.\n const [visible, setVisible] = useState(mode !== 'onDemand');\n\n const fetchUsage = useCallback(async () => {\n if (!client || !tenantId) return;\n try {\n const data = await client.getTenantUsage(tenantId, subtenantId);\n setUsage(data || null);\n } catch (err) {\n if (debug) console.warn('[UsageBar] getTenantUsage failed:', err);\n setUsage(null);\n } finally {\n setLoaded(true);\n }\n }, [client, tenantId, subtenantId, debug]);\n\n useEffect(() => {\n if (!visible) return;\n void fetchUsage();\n }, [visible, fetchUsage, refreshKey]);\n\n // Applicable rules: filter by metric, sort most-restrictive first, then keep\n // either all of them or just the single most restrictive.\n const rules = useMemo(() => {\n const pool = (usage?.usage || []).filter(\n (r) => !metric || r.metric === metric,\n );\n const sorted = [...pool].sort((a, b) => b.percent - a.percent);\n if (cfg.showAllRules) return sorted;\n const top = mostRestrictive(sorted);\n return top ? [top] : [];\n }, [usage, metric, cfg.showAllRules]);\n\n const tierId = usage?.tierId || rules[0]?.tierId;\n\n if (!tenantId || !client) return null;\n\n // onDemand, collapsed: show a small toggle button.\n if (mode === 'onDemand' && !visible) {\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode=\"onDemand\">\n <button\n type=\"button\"\n className=\"devic-usage-toggle\"\n onClick={() => setVisible(true)}\n title=\"Show usage\"\n >\n <GaugeIcon />\n <span>Usage</span>\n </button>\n </div>\n );\n }\n\n // No configured limits (or not loaded yet with nothing to show): render nothing\n // in 'always' mode; in expanded onDemand, show a subtle note so the toggle isn't\n // confusing.\n if (rules.length === 0) {\n if (mode === 'onDemand' && loaded) {\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode=\"onDemand\">\n <div className=\"devic-usage-bar\" data-empty=\"true\">\n <span className=\"devic-usage-bar-label\">No usage limits</span>\n <button\n type=\"button\"\n className=\"devic-usage-collapse\"\n onClick={() => setVisible(false)}\n title=\"Hide usage\"\n aria-label=\"Hide usage\"\n >\n ×\n </button>\n </div>\n </div>\n );\n }\n return null;\n }\n\n const showTierChip = cfg.showTier && !!tierId;\n const multi = rules.length > 1;\n // A header carries the tier chip and/or the onDemand collapse control, so the\n // collapse \"×\" has a stable home regardless of how many rows render below.\n const header =\n showTierChip || mode === 'onDemand' ? (\n <div className=\"devic-usage-bar-head\">\n {showTierChip ? (\n <span className=\"devic-usage-tier\" title={`Tier: ${tierId}`}>\n {tierId}\n </span>\n ) : (\n <span />\n )}\n {mode === 'onDemand' && (\n <button\n type=\"button\"\n className=\"devic-usage-collapse\"\n onClick={() => setVisible(false)}\n title=\"Hide usage\"\n aria-label=\"Hide usage\"\n >\n ×\n </button>\n )}\n </div>\n ) : null;\n\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode={mode}>\n {header}\n {rules.map((rule, i) => {\n const pct = Math.min(100, Math.round(rule.percent));\n const fill = fillColor(pct, color);\n const valuesText = `${formatAmount(rule.current, rule.metric)} / ${formatAmount(\n rule.limit,\n rule.metric,\n )} ${rule.metric}`;\n // Distinguish rows by metric when several render; otherwise use the\n // scope-aware label so single-rule mode reads \"Usage 24%\".\n const prefix = multi\n ? rule.metric === 'cost'\n ? 'Cost'\n : 'Tokens'\n : rule.scope === 'subtenant'\n ? 'Your usage'\n : 'Usage';\n const main: string[] = [];\n if (cfg.showPercent) main.push(`${pct}%`);\n if (cfg.showValues) main.push(valuesText);\n if (main.length === 0) main.push(`${pct}%`);\n const label = `${prefix} ${main.join(' · ')}`.trim();\n const reset = resetLabel(rule.resetsAt);\n const win = windowLabel(rule.windowUnit, rule.windowEvery);\n const title = `${valuesText} · ${win}${reset ? ` · ${reset}` : ''}`;\n\n return (\n <div\n key={`${rule.metric}-${rule.windowUnit}-${rule.windowEvery}-${rule.scope}-${i}`}\n className=\"devic-usage-bar\"\n title={title}\n data-state={pct >= 100 ? 'exceeded' : 'ok'}\n >\n <span className=\"devic-usage-bar-label\">{label}</span>\n <div className=\"devic-usage-bar-track\">\n <div\n className=\"devic-usage-bar-fill\"\n style={{ width: `${pct}%`, backgroundColor: fill }}\n />\n </div>\n {cfg.showWindow && (\n <span className=\"devic-usage-bar-window\">{win}</span>\n )}\n {reset && <span className=\"devic-usage-bar-reset\">{reset}</span>}\n </div>\n );\n })}\n </div>\n );\n}\n\n/** Small gauge icon for the on-demand toggle. */\nfunction GaugeIcon(): JSX.Element {\n return (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 14a4 4 0 1 0-4-4\" />\n <path d=\"M3 18a9 9 0 0 1 18 0\" />\n <line x1=\"12\" y1=\"14\" x2=\"15\" y2=\"11\" />\n </svg>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"UsageBar.js","sources":["../../../../src/components/ChatDrawer/UsageBar.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { DevicApiClient } from '../../api/client';\nimport type { TenantUsage, TenantUsageRule } from '../../api/types';\n\n/**\n * Controls what each usage row renders. All flags compose, so a developer can,\n * for example, show absolute values together with the percentage and the tier.\n */\nexport interface UsageBarDisplay {\n /**\n * Show the absolute amount of the active window: `current / limit metric`\n * (e.g. `1,200 / 5,000 tokens`).\n * @default false\n */\n showValues?: boolean;\n /**\n * Show the utilization percentage (e.g. `24%`).\n * @default true\n */\n showPercent?: boolean;\n /**\n * Show the temporal dimension of the window (e.g. `per 3h`, `every 3 hours`).\n * @default true\n */\n showWindow?: boolean;\n /**\n * Show the tier (plan) the limits come from, as a chip above the bar(s).\n * @default false\n */\n showTier?: boolean;\n /**\n * When more than one limit rule applies, render every rule (`true`) or only\n * the single most restrictive one (`false`, highest utilization). The\n * per-row presentation still follows the flags above.\n * @default true\n */\n showAllRules?: boolean;\n}\n\nconst DEFAULT_DISPLAY: Required<UsageBarDisplay> = {\n showValues: false,\n showPercent: true,\n showWindow: true,\n showTier: false,\n showAllRules: true,\n};\n\n/**\n * Usage data handed to a `customUsageBar` renderer so a developer can build\n * their own component with the live consumption / limits.\n */\nexport interface UsageBarData {\n /** Tenant the usage belongs to. */\n tenantId?: string;\n /** Subtenant the usage is scoped to, if any. */\n subtenantId?: string;\n /** Tier (plan) the limits come from, if any. */\n tierId?: string;\n /**\n * Applicable usage rules (filtered by `metric` when set), sorted by\n * utilization descending — the most restrictive first.\n */\n rules: TenantUsageRule[];\n /** `true` until the first fetch resolves. */\n loading: boolean;\n}\n\n/**\n * Props for the UsageBar component.\n */\nexport interface UsageBarProps {\n /** API key (resolved from provider by the ChatDrawer). */\n apiKey?: string;\n /** Base URL (resolved from provider by the ChatDrawer). */\n baseUrl?: string;\n /** Tenant whose usage is displayed. Required — without it the bar renders nothing. */\n tenantId?: string;\n /** Optional subtenant to scope the usage to a specific end user. */\n subtenantId?: string;\n /**\n * Display mode:\n * - 'always': the bar is always visible.\n * - 'onDemand': a small toggle button is shown; the bar appears on click.\n */\n mode?: 'always' | 'onDemand';\n /** Restrict the bar to a single metric. When omitted, all applicable rules are considered. */\n metric?: 'tokens' | 'cost';\n /**\n * What to render per rule (values / percentage / window / tier) and whether\n * to render all applicable rules or only the most restrictive one.\n */\n display?: UsageBarDisplay;\n /**\n * Render your own component instead of the built-in bar(s). Receives the live\n * usage data (rules + tier + loading) and renders in the same slot, replacing\n * the default UI entirely. When set, fetching/polling is still handled here;\n * `mode`/`display` only affect the default UI and are ignored.\n */\n customUsageBar?: (data: UsageBarData) => React.ReactNode;\n /** Primary color for the bar fill (below the warning threshold). */\n color?: string;\n /**\n * Changes to this value trigger a refetch (e.g. the message count, so the bar\n * refreshes after each assistant turn).\n */\n refreshKey?: number | string;\n /** Enable debug logging of fetch errors to the console. */\n debug?: boolean;\n}\n\nconst WARN_THRESHOLD = 90;\n\nfunction fillColor(percent: number, base: string): string {\n if (percent >= 100) return '#ff4d4f';\n if (percent >= WARN_THRESHOLD) return '#faad14';\n return base;\n}\n\nfunction formatAmount(value: number, metric: 'tokens' | 'cost'): string {\n if (metric === 'cost') {\n return `$${value.toFixed(value < 1 ? 4 : 2)}`;\n }\n return Math.round(value).toLocaleString();\n}\n\nfunction windowLabel(unit: string, every: number): string {\n const u = every > 1 ? `${unit}s` : unit;\n return every > 1 ? `every ${every} ${u}` : `per ${unit}`;\n}\n\nfunction resetLabel(resetsAt?: number): string {\n if (!resetsAt) return '';\n const ms = resetsAt - Date.now();\n if (ms <= 0) return 'resets now';\n const mins = Math.round(ms / 60000);\n if (mins < 60) return `resets in ${mins}m`;\n const hours = Math.round(mins / 60);\n if (hours < 48) return `resets in ${hours}h`;\n const days = Math.round(hours / 24);\n return `resets in ${days}d`;\n}\n\n/**\n * A thin usage bar showing the current tenant/subtenant usage window(s).\n * Rendered above the chat input. Antd-free — styled via `.devic-usage-*` classes.\n * Renders nothing when there are no usage limits configured for the tenant.\n */\nexport function UsageBar({\n apiKey,\n baseUrl,\n tenantId,\n subtenantId,\n mode = 'always',\n metric,\n display,\n customUsageBar,\n color = '#1890ff',\n refreshKey,\n debug = false,\n}: UsageBarProps): JSX.Element | null {\n const cfg = useMemo(() => ({ ...DEFAULT_DISPLAY, ...display }), [display]);\n\n const client = useMemo(() => {\n if (!apiKey) return null;\n return new DevicApiClient({\n apiKey,\n baseUrl: baseUrl || 'https://api.devic.ai',\n });\n }, [apiKey, baseUrl]);\n\n const [usage, setUsage] = useState<TenantUsage | null>(null);\n const [loaded, setLoaded] = useState(false);\n // onDemand starts hidden; 'always' is effectively visible from the start.\n const [visible, setVisible] = useState(mode !== 'onDemand');\n\n const fetchUsage = useCallback(async () => {\n if (!client || !tenantId) return;\n try {\n const data = await client.getTenantUsage(tenantId, subtenantId);\n setUsage(data || null);\n } catch (err) {\n if (debug) console.warn('[UsageBar] getTenantUsage failed:', err);\n setUsage(null);\n } finally {\n setLoaded(true);\n }\n }, [client, tenantId, subtenantId, debug]);\n\n // A custom renderer always wants the data, regardless of the onDemand toggle.\n const active = !!customUsageBar || visible;\n\n useEffect(() => {\n if (!active) return;\n void fetchUsage();\n }, [active, fetchUsage, refreshKey]);\n\n // Applicable rules: filter by metric, sort most-restrictive first.\n const filteredSorted = useMemo(() => {\n const pool = (usage?.usage || []).filter(\n (r) => !metric || r.metric === metric,\n );\n return [...pool].sort((a, b) => b.percent - a.percent);\n }, [usage, metric]);\n\n // Default UI honours showAllRules; custom renderers always get the full set.\n const rules = useMemo(\n () => (cfg.showAllRules ? filteredSorted : filteredSorted.slice(0, 1)),\n [filteredSorted, cfg.showAllRules],\n );\n\n const tierId = usage?.tierId || filteredSorted[0]?.tierId;\n\n if (!tenantId || !client) return null;\n\n // Custom renderer fully replaces the default UI; hand it the live data.\n if (customUsageBar) {\n return (\n <>\n {customUsageBar({\n tenantId,\n subtenantId,\n tierId,\n rules: filteredSorted,\n loading: !loaded,\n })}\n </>\n );\n }\n\n // onDemand, collapsed: show a small toggle button.\n if (mode === 'onDemand' && !visible) {\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode=\"onDemand\">\n <button\n type=\"button\"\n className=\"devic-usage-toggle\"\n onClick={() => setVisible(true)}\n title=\"Show usage\"\n >\n <GaugeIcon />\n <span>Usage</span>\n </button>\n </div>\n );\n }\n\n // No configured limits (or not loaded yet with nothing to show): render nothing\n // in 'always' mode; in expanded onDemand, show a subtle note so the toggle isn't\n // confusing.\n if (rules.length === 0) {\n if (mode === 'onDemand' && loaded) {\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode=\"onDemand\">\n <div className=\"devic-usage-bar\" data-empty=\"true\">\n <span className=\"devic-usage-bar-label\">No usage limits</span>\n <button\n type=\"button\"\n className=\"devic-usage-collapse\"\n onClick={() => setVisible(false)}\n title=\"Hide usage\"\n aria-label=\"Hide usage\"\n >\n ×\n </button>\n </div>\n </div>\n );\n }\n return null;\n }\n\n const showTierChip = cfg.showTier && !!tierId;\n const multi = rules.length > 1;\n // A header carries the tier chip and/or the onDemand collapse control, so the\n // collapse \"×\" has a stable home regardless of how many rows render below.\n const header =\n showTierChip || mode === 'onDemand' ? (\n <div className=\"devic-usage-bar-head\">\n {showTierChip ? (\n <span className=\"devic-usage-tier\" title={`Tier: ${tierId}`}>\n {tierId}\n </span>\n ) : (\n <span />\n )}\n {mode === 'onDemand' && (\n <button\n type=\"button\"\n className=\"devic-usage-collapse\"\n onClick={() => setVisible(false)}\n title=\"Hide usage\"\n aria-label=\"Hide usage\"\n >\n ×\n </button>\n )}\n </div>\n ) : null;\n\n return (\n <div className=\"devic-usage-bar-wrap\" data-mode={mode}>\n {header}\n {/* All rows share a single container by default. */}\n <div className=\"devic-usage-bar-group\">\n {rules.map((rule, i) => {\n const pct = Math.min(100, Math.round(rule.percent));\n const fill = fillColor(pct, color);\n const valuesText = `${formatAmount(rule.current, rule.metric)} / ${formatAmount(\n rule.limit,\n rule.metric,\n )} ${rule.metric}`;\n // Distinguish rows by metric when several render; otherwise use the\n // scope-aware label so single-rule mode reads \"Usage 24%\".\n const prefix = multi\n ? rule.metric === 'cost'\n ? 'Cost'\n : 'Tokens'\n : rule.scope === 'subtenant'\n ? 'Your usage'\n : 'Usage';\n const main: string[] = [];\n if (cfg.showPercent) main.push(`${pct}%`);\n if (cfg.showValues) main.push(valuesText);\n if (main.length === 0) main.push(`${pct}%`);\n const label = `${prefix} ${main.join(' · ')}`.trim();\n const reset = resetLabel(rule.resetsAt);\n const win = windowLabel(rule.windowUnit, rule.windowEvery);\n const title = `${valuesText} · ${win}${reset ? ` · ${reset}` : ''}`;\n\n return (\n <div\n key={`${rule.metric}-${rule.windowUnit}-${rule.windowEvery}-${rule.scope}-${i}`}\n className=\"devic-usage-bar\"\n title={title}\n data-state={pct >= 100 ? 'exceeded' : 'ok'}\n >\n <span className=\"devic-usage-bar-label\">{label}</span>\n <div className=\"devic-usage-bar-track\">\n <div\n className=\"devic-usage-bar-fill\"\n style={{ width: `${pct}%`, backgroundColor: fill }}\n />\n </div>\n {cfg.showWindow && (\n <span className=\"devic-usage-bar-window\">{win}</span>\n )}\n {reset && <span className=\"devic-usage-bar-reset\">{reset}</span>}\n </div>\n );\n })}\n </div>\n </div>\n );\n}\n\n/** Small gauge icon for the on-demand toggle. */\nfunction GaugeIcon(): JSX.Element {\n return (\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M12 14a4 4 0 1 0-4-4\" />\n <path d=\"M3 18a9 9 0 0 1 18 0\" />\n <line x1=\"12\" y1=\"14\" x2=\"15\" y2=\"11\" />\n </svg>\n );\n}\n"],"names":["_jsx","_Fragment","_jsxs"],"mappings":"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"}
|
|
@@ -5,7 +5,7 @@ export { ToolTimeline } from './ToolTimeline';
|
|
|
5
5
|
export { ConversationSelector } from './ConversationSelector';
|
|
6
6
|
export { HandoffSubagentWidget } from './HandoffSubagentWidget';
|
|
7
7
|
export { UsageBar } from './UsageBar';
|
|
8
|
-
export type { UsageBarProps, UsageBarDisplay } from './UsageBar';
|
|
8
|
+
export type { UsageBarProps, UsageBarDisplay, UsageBarData } from './UsageBar';
|
|
9
9
|
export { LimitBanner } from './LimitBanner';
|
|
10
10
|
export type { LimitBannerProps } from './LimitBanner';
|
|
11
11
|
export type { ChatDrawerProps, ChatDrawerOptions, ChatDrawerHandle, ChatMessagesProps, ChatInputProps, CustomPromptBoxProps, ToolTimelineProps, AllowedFileTypes, ConversationSelectorProps, SuggestedMessage, } from './ChatDrawer.types';
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { DevicProvider, DevicContext, useDevicContext, useOptionalDevicContext } from './provider';
|
|
2
2
|
export type { DevicProviderConfig, DevicProviderProps, DevicContextValue, AIReference, DrawerRegistration, } from './provider';
|
|
3
3
|
export { ChatDrawer, ChatMessages, ChatInput, ToolTimeline, ConversationSelector, HandoffSubagentWidget, UsageBar, LimitBanner } from './components/ChatDrawer';
|
|
4
|
-
export type { ChatDrawerProps, ChatDrawerOptions, ChatDrawerHandle, ChatMessagesProps, ChatInputProps, CustomPromptBoxProps, ToolTimelineProps, AllowedFileTypes, ConversationSelectorProps, HandoffSubagentWidgetProps, SuggestedMessage, UsageBarProps, UsageBarDisplay, LimitBannerProps, } from './components/ChatDrawer';
|
|
4
|
+
export type { ChatDrawerProps, ChatDrawerOptions, ChatDrawerHandle, ChatMessagesProps, ChatInputProps, CustomPromptBoxProps, ToolTimelineProps, AllowedFileTypes, ConversationSelectorProps, HandoffSubagentWidgetProps, SuggestedMessage, UsageBarProps, UsageBarDisplay, UsageBarData, LimitBannerProps, } from './components/ChatDrawer';
|
|
5
5
|
export { ThreadStateTag } from './components/ThreadStateTag';
|
|
6
6
|
export type { ThreadStateTagProps, StateConfig } from './components/ThreadStateTag';
|
|
7
7
|
export { AICommandBar, useAICommandBar, formatShortcut } from './components/AICommandBar';
|
package/dist/esm/styles.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.devic-state-tag{align-items:center;border:1px solid;border-radius:4px;cursor:default;display:inline-flex;font-family:var(--devic-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:12px;font-weight:500;gap:6px;line-height:20px;padding:2px 8px;position:relative;white-space:nowrap}.devic-state-tag[data-interactive=true]{cursor:pointer}.devic-state-tag[data-interactive=true]:hover{opacity:.85}.devic-state-tag[data-color=gold]{background:rgba(250,173,20,.15);border-color:rgba(250,173,20,.35);color:#faad14}.devic-state-tag[data-color=processing]{background:rgba(22,119,255,.15);border-color:rgba(22,119,255,.35);color:#4096ff}.devic-state-tag[data-color=success]{background:rgba(82,196,26,.15);border-color:rgba(82,196,26,.35);color:#52c41a}.devic-state-tag[data-color=error]{background:rgba(255,77,79,.15);border-color:rgba(255,77,79,.35);color:#ff4d4f}.devic-state-tag[data-color=default]{background:hsla(0,0%,60%,.15);border-color:hsla(0,0%,60%,.35);color:#999}.devic-state-tag[data-color=purple]{background:rgba(114,46,209,.15);border-color:rgba(114,46,209,.35);color:#b37feb}.devic-state-tag[data-color=blue]{background:rgba(22,119,255,.15);border-color:rgba(22,119,255,.35);color:#4096ff}.devic-state-tag-icon{align-items:center;display:inline-flex;flex-shrink:0}.devic-state-tag-caret{align-items:center;display:inline-flex;margin-left:2px;transition:transform .2s ease}.devic-state-tag[data-dropdown-open=true] .devic-state-tag-caret{transform:rotate(180deg)}.devic-state-spinner{animation:devic-state-spin 1s linear infinite}@keyframes devic-state-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.devic-state-tooltip{background:rgba(0,0,0,.85);border-radius:6px;bottom:calc(100% + 8px);color:#fff;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.4;max-width:280px;padding:6px 10px;pointer-events:none;white-space:normal;z-index:1060}.devic-state-tooltip,.devic-state-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.devic-state-tooltip:after{border:5px solid transparent;border-top-color:rgba(0,0,0,.85);content:"";top:100%}.devic-state-dropdown{animation:devic-dropdownSlide .15s ease-out;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.06);min-width:180px;padding:4px 0;position:absolute;right:0;top:calc(100% + 4px);z-index:1050}@keyframes devic-dropdownSlide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.devic-state-dropdown-item{align-items:center;background:none;border:none;color:#333;cursor:pointer;display:flex;font-family:inherit;font-size:13px;gap:8px;padding:8px 12px;text-align:left;transition:background .15s;width:100%}.devic-state-dropdown-item:hover{background:#f5f5f5}.devic-state-dropdown-item-icon{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:18px}.devic-state-tooltip-portal{background:rgba(0,0,0,.85);border-radius:6px;color:#fff;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.4;max-width:280px;padding:6px 10px;pointer-events:none;white-space:normal;z-index:99999}.devic-state-dropdown-portal{animation:devic-dropdownSlide .15s ease-out;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.06);min-width:180px;padding:4px 0;z-index:99999}.devic-state-modal-overlay{align-items:center;animation:devic-fadeIn .2s ease;background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;z-index:1050}@keyframes devic-fadeIn{0%{opacity:0}to{opacity:1}}.devic-state-modal{animation:devic-modalSlide .2s ease-out;background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08);display:flex;flex-direction:column;max-height:80vh;max-width:520px;width:90%}@keyframes devic-modalSlide{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.devic-state-modal-header{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;padding:16px 20px}.devic-state-modal-title{align-items:center;display:flex;font-size:16px;font-weight:600;gap:8px;margin:0}.devic-state-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:flex;padding:4px}.devic-state-modal-close:hover{background:#f5f5f5;color:#333}.devic-state-modal-body{flex:1;overflow-y:auto;padding:20px}.devic-state-modal-footer{border-top:1px solid #f0f0f0;display:flex;gap:8px;justify-content:flex-end;padding:12px 20px}.devic-state-btn{align-items:center;background:#fff;border:1px solid #d9d9d9;border-radius:6px;color:#333;cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;justify-content:center;padding:6px 16px;transition:all .2s}.devic-state-btn:hover{border-color:#1677ff;color:#1677ff}.devic-state-btn-primary{background:#1677ff;border-color:#1677ff;color:#fff}.devic-state-btn-primary:hover{background:#4096ff;border-color:#4096ff;color:#fff}.devic-state-btn-danger{background:#ff4d4f;border-color:#ff4d4f;color:#fff}.devic-state-btn-danger:hover{background:#ff7875;border-color:#ff7875;color:#fff}.devic-state-btn-success{background:#52c41a;border-color:#52c41a;color:#fff}.devic-state-btn-success:hover{background:#73d13d;border-color:#73d13d;color:#fff}.devic-state-btn:disabled{cursor:not-allowed;opacity:.5}.devic-explain-content{border:1px solid #e8e8e8;border-radius:8px;font-family:SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;max-height:300px;min-height:150px;overflow-y:auto;padding:12px;white-space:pre-wrap}.devic-typing-cursor{animation:devic-blink 1s step-end infinite}@keyframes devic-blink{0%,to{opacity:1}50%{opacity:0}}.devic-approval-layout{display:flex;gap:16px}.devic-approval-request{background:#fafafa;border:1px solid #e8e8e8;border-radius:8px;flex:1;font-size:13px;line-height:1.6;max-height:250px;overflow-y:auto;padding:12px}.devic-approval-actions{display:flex;flex:1;flex-direction:column;gap:12px}.devic-approval-textarea{border:1px solid #d9d9d9;border-radius:6px;box-sizing:border-box;font-family:inherit;font-size:13px;min-height:80px;outline:none;padding:8px 12px;resize:vertical;width:100%}.devic-approval-textarea:focus{border-color:#1677ff}.devic-approval-buttons{display:flex;flex-direction:column;gap:8px}.devic-completion-select{background:#fff;border:1px solid #d9d9d9;border-radius:6px;cursor:pointer;font-family:inherit;font-size:14px;outline:none;padding:8px 12px;width:100%}.devic-completion-select:focus{border-color:#1677ff}.devic-state-loading{align-items:center;display:flex;justify-content:center;padding:24px}.devic-state-loading-spinner{animation:devic-state-spin .8s linear infinite;border:2px solid #f0f0f0;border-radius:50%;border-top-color:#1677ff;height:24px;width:24px}.devic-state-warning{align-items:flex-start;color:#cf1322;display:flex;font-size:13px;font-weight:500;gap:6px;margin-top:8px}.devic-message-actions{align-items:center;display:flex;gap:4px;opacity:0;transition:opacity .15s ease}.devic-message-actions:focus-within,.devic-message:hover .devic-message-actions{opacity:1}.devic-message-actions:has(.devic-action-btn--active){opacity:1}.devic-action-btn{align-items:center;background:transparent;border:none;border-radius:var(--devic-radius-sm,6px);color:var(--devic-text-muted,#94a3b8);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .15s ease;width:28px}.devic-action-btn:hover:not(:disabled){background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-action-btn:disabled{cursor:not-allowed;opacity:.5}.devic-action-btn--active{color:var(--devic-primary,#3b82f6)}.devic-action-btn--active.devic-action-btn--positive{color:#22c55e}.devic-action-btn--active.devic-action-btn--negative{color:#ef4444}.devic-feedback-overlay{align-items:center;animation:devic-feedback-fade-in .15s ease;background:rgba(0,0,0,.4);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10001}@keyframes devic-feedback-fade-in{0%{opacity:0}to{opacity:1}}.devic-feedback-modal{animation:devic-feedback-slide-up .2s ease;background:var(--devic-bg,#fff);border-radius:var(--devic-radius,12px);box-shadow:0 20px 60px rgba(0,0,0,.2);margin:16px;max-width:400px;width:100%}@keyframes devic-feedback-slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.devic-feedback-modal-header{align-items:center;border-bottom:1px solid var(--devic-border,#e2e8f0);display:flex;gap:10px;padding:16px 16px 12px}.devic-feedback-modal-icon{align-items:center;background:var(--devic-bg-secondary,#f8fafc);border-radius:8px;color:var(--devic-text,#1e293b);display:flex;height:32px;justify-content:center;width:32px}.devic-feedback-modal-title{color:var(--devic-text,#1e293b);flex:1;font-size:15px;font-weight:600}.devic-feedback-modal-close{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--devic-text-muted,#94a3b8);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .15s ease;width:28px}.devic-feedback-modal-close:hover{background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-feedback-textarea{background:transparent;border:none;border-bottom:1px solid var(--devic-border,#e2e8f0);box-sizing:border-box;color:var(--devic-text,#1e293b);display:block;font-family:inherit;font-size:14px;line-height:1.5;padding:12px 16px;resize:none;width:100%}.devic-feedback-textarea:focus{outline:none}.devic-feedback-textarea::placeholder{color:var(--devic-text-muted,#94a3b8)}.devic-feedback-modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px}.devic-feedback-btn{border:none;border-radius:var(--devic-radius-sm,6px);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;padding:8px 16px;transition:all .15s ease}.devic-feedback-btn:disabled{cursor:not-allowed;opacity:.6}.devic-feedback-btn--secondary{background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-feedback-btn--secondary:hover:not(:disabled){background:var(--devic-border,#e2e8f0)}.devic-feedback-btn--primary{background:var(--devic-primary,#3b82f6);color:#fff}.devic-feedback-btn--primary:hover:not(:disabled){background:var(--devic-primary-hover,#2563eb)}.devic-cmd-result-actions{border-top:1px solid var(--devic-cmd-border,var(--devic-border,#e5e7eb));margin-top:8px;padding-top:8px}.devic-cmd-result-actions .devic-message-actions{opacity:1;padding-left:10px}.devic-cmd-result-actions .devic-action-btn{opacity:.7}.devic-cmd-result-actions .devic-action-btn--active,.devic-cmd-result-actions .devic-action-btn:hover{opacity:1}.devic-chat-drawer{--devic-primary:#1890ff;--devic-primary-hover:#40a9ff;--devic-primary-light:#e6f7ff;--devic-bg:#fff;--devic-bg-secondary:#f5f5f5;--devic-text:#333;--devic-text-secondary:#666;--devic-text-muted:#999;--devic-border:#e8e8e8;--devic-shadow:0 4px 12px rgba(0,0,0,.15);--devic-radius:8px;--devic-radius-sm:4px;--devic-radius-lg:16px;--devic-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--devic-transition:0.3s ease;background:var(--devic-bg);bottom:0;box-shadow:var(--devic-shadow);color:var(--devic-text);display:flex;flex-direction:column;font-family:var(--devic-font-family);font-size:14px;line-height:1.5;position:fixed;top:0;transition:transform var(--devic-transition)}.devic-chat-drawer[data-position=right]{right:0;transform:translateX(100%)}.devic-chat-drawer[data-position=left]{left:0;transform:translateX(-100%)}.devic-chat-drawer[data-open=true]{transform:translateX(0)}.devic-drawer-overlay{background:rgba(0,0,0,.3);inset:0;opacity:0;position:fixed;transition:opacity var(--devic-transition),visibility var(--devic-transition);visibility:hidden}.devic-drawer-overlay[data-open=true]{opacity:1;visibility:visible}.devic-drawer-header{align-items:center;border-bottom:1px solid var(--devic-border);display:flex;flex-shrink:0;justify-content:space-between;padding:16px}.devic-drawer-avatar{border-radius:50%;flex-shrink:0;height:28px;object-fit:cover;width:28px}.devic-drawer-title{font-size:16px;font-weight:600;margin:0}.devic-drawer-close{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;padding:8px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-drawer-close:hover{background:var(--devic-bg-secondary);color:var(--devic-text)}.devic-messages-container{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.devic-welcome{color:var(--devic-text-secondary);padding:24px 16px;text-align:center}.devic-welcome-text{font-size:16px;margin-bottom:16px}.devic-suggested-messages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.devic-suggested-btn{background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius-lg);color:var(--devic-text);cursor:pointer;font-size:13px;padding:8px 16px;transition:border-color var(--devic-transition),background var(--devic-transition)}.devic-suggested-btn:hover{background:var(--devic-primary-light);border-color:var(--devic-primary)}.devic-message{display:flex;flex-direction:column;max-width:85%}.devic-message[data-role=user]{align-self:flex-end}.devic-message[data-role=assistant],.devic-message[data-role=tool]{align-self:flex-start}.devic-message-bubble{word-wrap:break-word;border-radius:var(--devic-radius);padding:10px 14px}.devic-message[data-role=user] .devic-message-bubble{background:var(--devic-user-bubble,var(--devic-primary));border-bottom-right-radius:var(--devic-radius-sm);color:var(--devic-user-bubble-text,#fff)}.devic-message[data-role=assistant] .devic-message-bubble{background:var(--devic-assistant-bubble,var(--devic-bg-secondary));border-bottom-left-radius:var(--devic-radius-sm);color:var(--devic-assistant-bubble-text,var(--devic-text))}.devic-message[data-role=tool] .devic-message-bubble{background:var(--devic-primary-light);border:1px solid var(--devic-primary);color:var(--devic-text);font-size:12px}.devic-message-footer{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:4px}.devic-message-time{color:var(--devic-text-muted);font-size:11px}.devic-message[data-role=user] .devic-message-footer{justify-content:flex-end}.devic-message[data-role=user] .devic-message-time{text-align:right}.devic-message-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.devic-message-file{align-items:center;background:hsla(0,0%,100%,.2);border-radius:var(--devic-radius-sm);display:flex;font-size:12px;gap:6px;padding:6px 10px}.devic-loading{align-self:flex-start;display:flex;gap:4px;padding:10px 14px}.devic-loading-dot{animation:devic-bounce 1.4s ease-in-out infinite both;background:var(--devic-text-muted);border-radius:50%;height:8px;width:8px}.devic-loading-dot:first-child{animation-delay:-.32s}.devic-loading-dot:nth-child(2){animation-delay:-.16s}@keyframes devic-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.devic-tool-group{align-self:flex-start;display:flex;flex-direction:column;gap:2px;max-width:85%}.devic-tool-activity{align-items:flex-start;animation:devic-slideUp .3s ease-out;display:flex;gap:8px;padding:4px 0}.devic-tool-activity-icon{align-items:center;color:var(--devic-text-muted);display:flex;flex-shrink:0;margin-top:1px}.devic-tool-activity--active .devic-tool-activity-icon{color:var(--devic-primary)}.devic-tool-activity-text{color:var(--devic-text-secondary);font-size:13px;line-height:1.4}.devic-glow-text{animation:devic-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes devic-pulse{0%,to{opacity:1}50%{opacity:.5}}.devic-spinner{animation:devic-spin 1s linear infinite}@keyframes devic-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes devic-slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.devic-tool-collapse-btn{align-items:center;background:none;border:none;color:var(--devic-text-muted);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:12px;gap:6px;padding:4px 0;transition:color .2s ease}.devic-tool-collapse-btn:hover{color:var(--devic-primary)}.devic-tool-group-items{animation:devic-expandItems .4s ease-out;overflow:hidden}.devic-tool-group-items[data-expanded=true]{max-height:500px}@keyframes devic-expandItems{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.devic-input-area{border-top:1px solid var(--devic-border);flex-shrink:0;padding:16px}.devic-input-wrapper{align-items:flex-end;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);display:flex;gap:8px;padding:8px 12px}.devic-input{background:none;border:none;color:var(--devic-text);flex:1;font-family:inherit;font-size:14px;line-height:1.5;max-height:120px;min-height:24px;outline:none;resize:none}.devic-input::placeholder{color:var(--devic-text-muted)}.devic-input-btn{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;flex-shrink:0;padding:4px;transition:color var(--devic-transition)}.devic-input-btn:hover:not(:disabled){color:var(--devic-primary)}.devic-input-btn:disabled{cursor:not-allowed;opacity:.5}.devic-send-btn{padding:6px 12px}.devic-send-btn,.devic-stop-btn{background:var(--devic-send-btn,var(--devic-primary));border-radius:var(--devic-radius-sm);color:#fff}.devic-stop-btn{align-items:center;display:flex;justify-content:center;padding:6px}.devic-stop-btn:hover{background:var(--devic-primary-hover);color:#fff}.devic-send-btn-wrapper{flex-shrink:0;position:relative}.devic-send-btn-custom{align-items:center;display:flex;justify-content:center;pointer-events:none}.devic-send-btn-overlay{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute}.devic-send-btn-overlay:disabled{cursor:not-allowed;opacity:.5}.devic-send-btn:hover:not(:disabled){background:var(--devic-primary-hover);color:#fff}.devic-speech-error{background:#fff1f0;border:1px solid #ffccc7;border-radius:var(--devic-radius-sm);color:#cf1322;font-size:12px;margin-bottom:8px;padding:6px 10px}.devic-speech-mic.devic-input-btn:hover:not(:disabled){color:var(--devic-primary)}.devic-speech-panel{align-items:center;display:flex;flex:1;gap:8px;min-height:24px}.devic-speech-live{align-items:center;display:flex;flex:1;gap:10px;justify-content:flex-start}.devic-speech-timer{color:var(--devic-text-secondary);font-size:13px;font-variant-numeric:tabular-nums}.devic-speech-confirm{color:#389e0d}.devic-speech-confirm.devic-input-btn:hover:not(:disabled){color:#237804}.devic-speech-confirm-wrap{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;position:relative}.devic-autostop-ring{height:calc(100% + 6px);inset:-3px;pointer-events:none;position:absolute;transform:rotate(-90deg);width:calc(100% + 6px)}.devic-autostop-ring-track{fill:none;stroke:#389e0d;stroke-opacity:.18;stroke-width:3}.devic-autostop-ring-progress{fill:none;stroke:#389e0d;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 90ms linear}.devic-speech-confirm-wrap[data-autostop=true] .devic-speech-confirm{animation:devic-autostop-pulse 1s ease-in-out infinite}@keyframes devic-autostop-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.devic-handoff-bar{align-items:center;background:var(--devic-primary-light,#e6f7ff);border-radius:8px;color:var(--devic-primary);display:flex;font-size:12px;gap:8px;margin-bottom:6px;padding:5px 8px}.devic-handoff-dot{animation:devic-handoff-blink 1.2s ease-in-out infinite;background:var(--devic-primary);border-radius:50%;flex-shrink:0;height:8px;width:8px}.devic-handoff-bar[data-waiting=true] .devic-handoff-dot{animation-duration:.7s}@keyframes devic-handoff-blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.devic-handoff-label{flex:1;font-weight:500}.devic-handoff-stop{align-items:center;background:transparent;border:none;border-radius:50%;color:inherit;cursor:pointer;display:inline-flex;height:22px;justify-content:center;opacity:.8;padding:0;width:22px}.devic-handoff-stop:hover{background:rgba(0,0,0,.06);opacity:1}.devic-handoff-pending{align-items:center;animation:devic-handoff-pending-in .18s ease-out;display:flex;flex:1;gap:10px;min-height:24px;min-width:0}@keyframes devic-handoff-pending-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.devic-handoff-pending-icon{align-items:center;animation:devic-autostop-pulse 1s ease-in-out infinite;color:var(--devic-primary);display:inline-flex;flex-shrink:0;height:36px;justify-content:center;position:relative;width:36px}.devic-handoff-ring{height:100%;inset:0;pointer-events:none;position:absolute;transform:rotate(-90deg);width:100%}.devic-handoff-ring-track{fill:none;stroke:var(--devic-primary);stroke-opacity:.18;stroke-width:3}.devic-handoff-ring-progress{fill:none;stroke:var(--devic-primary);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 90ms linear}.devic-handoff-pending-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.devic-handoff-pending-title{color:var(--devic-primary);font-size:13px;font-weight:500}.devic-handoff-pending-preview{color:var(--devic-text-secondary);font-size:12px;max-height:4.5em;overflow-wrap:anywhere;overflow-y:auto;white-space:normal;word-break:break-word}.devic-speech-cancel{color:var(--devic-text-muted)}.devic-speech-cancel.devic-input-btn:hover:not(:disabled){color:#cf1322}.devic-speech-status{color:var(--devic-text-secondary);font-size:13px}.devic-speech-spinner{animation:devic-spin .8s linear infinite;border:2px solid var(--devic-border);border-radius:50%;border-top-color:var(--devic-primary);flex-shrink:0;height:16px;width:16px}.devic-transcript-playback{align-items:center;background:hsla(0,0%,100%,.18);border-radius:999px;display:inline-flex;font-size:12px;gap:6px;line-height:1;margin-top:6px;max-width:100%;padding:3px 8px 3px 3px}.devic-message[data-role=assistant] .devic-transcript-playback{background:var(--devic-bg-secondary,rgba(0,0,0,.05))}.devic-transcript-btn{align-items:center;background:hsla(0,0%,100%,.85);border:none;border-radius:50%;color:var(--devic-primary,#6c5ce7);cursor:pointer;display:inline-flex;flex-shrink:0;height:22px;justify-content:center;padding:0;transition:background .15s ease;width:22px}.devic-transcript-btn:hover:not(:disabled){background:#fff}.devic-transcript-btn:disabled{cursor:default;opacity:.7}.devic-transcript-icon{align-items:center;display:inline-flex;opacity:.85}.devic-transcript-playback[data-playing=true] .devic-transcript-icon{animation:devic-pulse 1.2s ease-in-out infinite}.devic-transcript-label{opacity:.9;white-space:nowrap}.devic-transcript-spinner{animation:devic-spin .8s linear infinite;border:2px solid rgba(108,92,231,.3);border-radius:50%;border-top:2px solid var(--devic-primary,#6c5ce7);height:12px;width:12px}.devic-equalizer{align-items:center;display:flex;gap:3px;height:24px}.devic-equalizer-bar{background:var(--devic-primary);border-radius:2px;min-height:3px;transition:height 90ms ease-out;width:3px}.devic-equalizer[data-paused=true] .devic-equalizer-bar{background:var(--devic-text-muted);height:10%!important}.devic-file-preview{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.devic-file-preview-item{align-items:center;background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);display:flex;font-size:12px;gap:6px;padding:4px 8px}.devic-file-remove{background:none;border:none;color:var(--devic-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0}.devic-file-remove:hover{color:#ff4d4f}.devic-trigger{align-items:center;background:var(--devic-primary);border:none;border-radius:50%;box-shadow:var(--devic-shadow);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;position:fixed;transition:background var(--devic-transition),transform var(--devic-transition);width:56px}.devic-trigger:hover{background:var(--devic-primary-hover);transform:scale(1.05)}.devic-trigger svg{height:24px;width:24px}.devic-error{background:#fff2f0;border:1px solid #ffccc7;border-radius:var(--devic-radius);color:#ff4d4f;font-size:13px;margin:8px 16px;padding:12px}.devic-messages-container::-webkit-scrollbar{width:6px}.devic-messages-container::-webkit-scrollbar-track{background:transparent}.devic-messages-container::-webkit-scrollbar-thumb{background:var(--devic-border);border-radius:3px}.devic-messages-container::-webkit-scrollbar-thumb:hover{background:var(--devic-text-muted)}.devic-chat-drawer[data-mode=inline]{border:1px solid var(--devic-border);bottom:auto;box-shadow:none;height:100%;left:auto;position:relative;right:auto;top:auto;transform:none}.devic-drawer-header-actions{align-items:center;display:flex;gap:4px;margin-left:auto}.devic-new-chat-btn{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;padding:8px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-new-chat-btn:hover{background:var(--devic-bg-secondary);color:var(--devic-primary)}.devic-conversation-selector{flex:1;margin:0 8px;min-width:0;position:relative}.devic-conversation-selector-trigger{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);color:var(--devic-text);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:13px;gap:6px;padding:6px 10px;text-align:left;transition:border-color var(--devic-transition);width:100%}.devic-conversation-selector-trigger:hover{border-color:var(--devic-primary)}.devic-conversation-selector-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-conversation-dropdown{background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius);box-shadow:var(--devic-shadow);display:flex;flex-direction:column;left:0;max-height:320px;position:absolute;right:0;top:calc(100% + 4px);z-index:10}.devic-conversation-search-wrapper{border-bottom:1px solid var(--devic-border);padding:8px}.devic-conversation-search{background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);box-sizing:border-box;color:var(--devic-text);font-family:var(--devic-font-family);font-size:13px;outline:none;padding:6px 8px;width:100%}.devic-conversation-search:focus{border-color:var(--devic-primary)}.devic-conversation-list{flex:1;overflow-y:auto}.devic-conversation-item{align-items:center;background:none;border:none;color:var(--devic-text);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:13px;justify-content:space-between;padding:8px 12px;text-align:left;transition:background .15s;width:100%}.devic-conversation-item:hover,.devic-conversation-item[data-active=true]{background:var(--devic-bg-secondary)}.devic-conversation-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-conversation-item-date{color:var(--devic-text-muted);flex-shrink:0;font-size:11px;margin-left:8px}.devic-conversation-empty,.devic-conversation-loading{color:var(--devic-text-muted);font-size:13px;padding:12px;text-align:center}.devic-conversation-load-more{background:none;border:none;color:var(--devic-text-muted);cursor:pointer;display:block;font-family:var(--devic-font-family);font-size:12px;padding:8px 12px;text-align:center;transition:background .15s;width:100%}.devic-conversation-load-more:hover{background:var(--devic-bg-secondary);color:var(--devic-primary)}.devic-conversation-new{background:none;border:none;border-top:1px solid var(--devic-border);color:var(--devic-primary);cursor:pointer;display:block;font-family:var(--devic-font-family);font-size:13px;padding:10px 12px;text-align:left;transition:background .15s;width:100%}.devic-conversation-new:hover{background:var(--devic-bg-secondary)}.devic-conversation-item-check{align-items:center;color:var(--devic-primary);display:flex;flex-shrink:0;margin-right:6px}.devic-message-bubble h1,.devic-message-bubble h2,.devic-message-bubble h3,.devic-message-bubble h4,.devic-message-bubble h5,.devic-message-bubble h6{line-height:1.3;margin:8px 0 4px}.devic-message-bubble h1{font-size:1.3em}.devic-message-bubble h2{font-size:1.2em}.devic-message-bubble h3{font-size:1.1em}.devic-message-bubble p{margin:4px 0}.devic-message-bubble ol,.devic-message-bubble ul{margin:4px 0;padding-left:20px}.devic-message-bubble code{background:rgba(0,0,0,.06);border-radius:3px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9em;padding:1px 4px}.devic-message-bubble pre{background:rgba(0,0,0,.06);border-radius:var(--devic-radius-sm);margin:8px 0;overflow-x:auto;padding:10px}.devic-message-bubble pre code{background:none;padding:0}.devic-message-bubble blockquote{border-left:3px solid var(--devic-border);color:var(--devic-text-secondary);margin:4px 0;padding-left:12px}.devic-message-bubble a{color:var(--devic-primary);text-decoration:underline}.markdown-table{margin:8px 0;overflow-x:auto}.markdown-table table{border-collapse:collapse;font-size:13px;width:100%}.markdown-table td,.markdown-table th{border:1px solid var(--devic-border);padding:6px 10px;text-align:left}.markdown-table th{background:var(--devic-bg-secondary);font-weight:600}.devic-resize-handle{bottom:0;cursor:col-resize;position:absolute;top:0;width:6px;z-index:1}.devic-resize-handle[data-position=right]{left:0}.devic-resize-handle[data-position=left]{right:0}.devic-resize-handle:active,.devic-resize-handle:hover{background:var(--devic-primary);opacity:.3}.devic-handoff-widget{animation:devic-slideUp .3s ease-out;background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:8px;display:flex;flex-direction:column;gap:10px;max-width:320px;padding:12px;width:100%}.devic-handoff-header{align-items:center;display:flex;gap:8px}.devic-handoff-agent-avatar{align-items:center;background:var(--devic-bg-secondary);border-radius:50%;display:flex;flex-shrink:0;height:24px;justify-content:center;overflow:hidden;width:24px}.devic-handoff-avatar-img{height:100%;object-fit:cover;width:100%}.devic-handoff-agent-name{color:var(--devic-text);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-handoff-progress,.devic-handoff-state-row{align-items:center;display:flex;gap:8px}.devic-handoff-progress-bar{background:#f0f0f0;border-radius:3px;flex:1;height:6px;overflow:hidden;position:relative}.devic-handoff-progress-fill{border-radius:3px;height:100%;transition:width .4s ease}.devic-handoff-progress-fill[data-status=active]{background:var(--devic-primary)}.devic-handoff-progress-fill[data-status=success]{background:#52c41a}.devic-handoff-progress-fill[data-status=error]{background:#ff4d4f}.devic-handoff-progress-text{color:var(--devic-text-muted);flex-shrink:0;font-size:11px}.devic-handoff-progress-indeterminate{animation:devic-indeterminate 1.5s ease-in-out infinite;background:var(--devic-primary);border-radius:3px;height:100%;width:40%}@keyframes devic-indeterminate{0%{transform:translateX(-100%)}50%{transform:translateX(150%)}to{transform:translateX(-100%)}}.devic-handoff-summary{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--devic-text-secondary);display:-webkit-box;font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.devic-handoff-summary-active{animation:devic-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.devic-handoff-elapsed{align-items:center;color:var(--devic-text-muted);display:flex;font-size:11px;gap:4px}.devic-message[data-role=user] .devic-message-references{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;margin-bottom:4px}.devic-message-reference-chip{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text);display:inline-flex;font-size:11px;gap:4px;max-width:220px;padding:3px 8px}.devic-message-reference-chip-label{color:var(--devic-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-reference-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;padding:6px 8px}.devic-reference-chip{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text);display:inline-flex;font-size:12px;gap:6px;max-width:220px;padding:4px 8px}.devic-reference-chip-label{color:var(--devic-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-reference-chip-remove{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--devic-text-muted);cursor:pointer;display:inline-flex;font-size:16px;line-height:1;padding:0 2px}.devic-reference-chip-remove:hover{background:rgba(0,0,0,.06);color:var(--devic-text)}.devic-input-disabled-notice{align-items:center;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);color:var(--devic-text-muted);display:flex;font-size:12px;gap:6px;justify-content:center;margin-bottom:4px;padding:8px 12px}.devic-inline-widgets{display:flex;flex-direction:column;gap:8px;padding:8px 12px}.devic-inline-widget{background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius);padding:12px}.devic-input-widget{padding:8px;width:100%}.devic-limit-banner{align-items:flex-start;background:#fff7e6;border:1px solid #ffd591;border-radius:var(--devic-radius);color:#ad4e00;display:flex;font-size:13px;gap:8px;margin-bottom:8px;padding:8px 12px}.devic-limit-banner-icon{color:#fa8c16;display:inline-flex;flex-shrink:0;margin-top:1px}.devic-limit-banner-text{display:flex;flex-direction:column;gap:2px;line-height:1.35}.devic-limit-banner-title{font-weight:600}.devic-limit-banner-reset{color:var(--devic-text-secondary);font-size:12px}.devic-usage-bar-wrap{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.devic-usage-bar-head{align-items:center;display:flex;gap:8px;justify-content:space-between}.devic-usage-tier{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text-secondary);display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;text-transform:uppercase;white-space:nowrap}.devic-usage-bar-window{color:var(--devic-text-muted);white-space:nowrap}.devic-usage-bar{align-items:center;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);color:var(--devic-text-secondary);display:flex;font-size:12px;gap:8px;padding:5px 10px}.devic-usage-bar[data-empty=true]{color:var(--devic-text-muted);justify-content:space-between}.devic-usage-bar-label{font-weight:500;white-space:nowrap}.devic-usage-bar-track{background:var(--devic-border);border-radius:999px;flex:1;height:6px;overflow:hidden}.devic-usage-bar-fill{border-radius:999px;height:100%;transition:width var(--devic-transition),background-color var(--devic-transition)}.devic-usage-bar-reset{color:var(--devic-text-muted);white-space:nowrap}.devic-usage-toggle{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text-secondary);cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:6px;padding:4px 10px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-usage-toggle:hover{background:var(--devic-border);color:var(--devic-text)}.devic-usage-collapse{align-items:center;background:transparent;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-muted);cursor:pointer;display:inline-flex;font-size:16px;height:18px;justify-content:center;line-height:1;padding:0;width:18px}.devic-usage-collapse:hover{background:var(--devic-border);color:var(--devic-text)}@media (max-width:480px){.devic-chat-drawer{width:100%}}.devic-command-bar-container{--devic-cmd-bg:var(--devic-cmd-bg-override,#fff);--devic-cmd-text:var(--devic-cmd-text-override,#1f2937);--devic-cmd-text-secondary:var(--devic-cmd-text-secondary-override,#6b7280);--devic-cmd-border:var(--devic-cmd-border-override,#e5e7eb);--devic-cmd-radius:var(--devic-cmd-radius-override,12px);--devic-cmd-shadow:var(--devic-cmd-shadow-override,0 4px 20px rgba(0,0,0,.1));--devic-cmd-primary:var(--devic-cmd-primary-override,#3b82f6);--devic-cmd-font-family:var(--devic-cmd-font-family-override,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);--devic-cmd-font-size:var(--devic-cmd-font-size-override,14px);--devic-cmd-animation-duration:var(--devic-cmd-animation-duration-override,200ms);color:var(--devic-cmd-text);display:flex;flex-direction:column;font-family:var(--devic-cmd-font-family);font-size:var(--devic-cmd-font-size);gap:8px;max-width:100%;width:400px}.devic-command-bar-container[data-position=fixed]{position:fixed}.devic-command-bar-container[data-position=inline]{position:relative}.devic-command-bar-container[data-visible=false]{opacity:0;pointer-events:none;transform:translateY(8px)}.devic-command-bar-container[data-visible=false],.devic-command-bar-container[data-visible=true]{transition:opacity var(--devic-cmd-animation-duration) ease,transform var(--devic-cmd-animation-duration) ease}.devic-command-bar-container[data-visible=true]{opacity:1;transform:translateY(0)}.devic-command-bar{align-items:center;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);display:flex;gap:12px;padding:12px 16px}.devic-command-bar-icon{align-items:center;color:var(--devic-cmd-text-secondary);display:flex;flex-shrink:0;height:20px;justify-content:center;width:20px}.devic-command-bar-icon svg{height:100%;width:100%}.devic-command-bar-input{background:transparent;border:none;color:inherit;flex:1;font-family:inherit;font-size:inherit;min-width:0;outline:none}.devic-command-bar-input::placeholder{color:var(--devic-cmd-text-secondary)}.devic-command-bar-summary{animation:devic-cmd-pulse 1.5s ease-in-out infinite;color:var(--devic-cmd-text-secondary);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes devic-cmd-pulse{0%,to{opacity:1}50%{opacity:.6}}.devic-command-bar-shortcut{background:var(--devic-cmd-border);border-radius:6px;color:var(--devic-cmd-text-secondary);flex-shrink:0;font-size:12px;font-weight:500;letter-spacing:.5px;padding:4px 8px}.devic-command-bar-spinner{animation:devic-cmd-spin .8s linear infinite;border:2px solid var(--devic-cmd-border);border-radius:50%;border-top-color:var(--devic-cmd-primary);height:20px;width:20px}@keyframes devic-cmd-spin{to{transform:rotate(1turn)}}.devic-command-bar-result{animation:devic-cmd-slide-up .2s ease-out;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);overflow:hidden}@keyframes devic-cmd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.devic-command-bar-result-tools{border-bottom:1px solid var(--devic-cmd-border)}.devic-command-bar-result-tools-header{align-items:center;color:var(--devic-cmd-text-secondary);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:10px 14px;transition:background .15s ease;user-select:none}.devic-command-bar-result-tools-header:hover{background:rgba(0,0,0,.02)}.devic-command-bar-result-tools-chevron{height:16px;transition:transform .2s ease;width:16px}.devic-command-bar-result-tools-header[data-expanded=true] .devic-command-bar-result-tools-chevron{transform:rotate(90deg)}.devic-command-bar-result-tools-count{align-items:center;background:var(--devic-cmd-primary);border-radius:10px;color:#fff;display:inline-flex;font-size:11px;font-weight:600;height:20px;justify-content:center;min-width:20px;padding:0 6px}.devic-command-bar-result-tools-list{display:flex;flex-direction:column;gap:6px;padding:8px 14px 12px}.devic-command-bar-result-tools-list[data-expanded=false]{display:none}.devic-command-bar-result-tool-item{align-items:center;background:rgba(0,0,0,.02);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.devic-command-bar-result-tool-icon{color:#10b981;height:14px;width:14px}.devic-command-bar-result-tool-name{color:var(--devic-cmd-text-secondary)}.devic-command-bar-result-message{line-height:1.5;max-height:300px;overflow-y:auto;padding:14px}.devic-command-bar-result-message::-webkit-scrollbar{width:6px}.devic-command-bar-result-message::-webkit-scrollbar-track{background:transparent}.devic-command-bar-result-message::-webkit-scrollbar-thumb{background:var(--devic-cmd-border);border-radius:3px}.devic-command-bar-error{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--devic-cmd-radius);color:#dc2626;font-size:13px;padding:10px 14px}.devic-command-bar-result-empty{color:var(--devic-cmd-text-secondary);font-size:13px;padding:14px;text-align:center}.devic-command-bar-dropdown{animation:devic-cmd-slide-up .2s ease-out;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);overflow:hidden}.devic-command-bar-dropdown-header{align-items:center;border-bottom:1px solid var(--devic-cmd-border);color:var(--devic-cmd-text-secondary);display:flex;font-size:12px;font-weight:600;justify-content:space-between;letter-spacing:.5px;padding:10px 14px;text-transform:uppercase}.devic-command-bar-dropdown-hint{align-items:center;display:flex;font-weight:400;gap:4px;letter-spacing:0;text-transform:none}.devic-command-bar-dropdown-hint kbd{align-items:center;background:var(--devic-cmd-border);border-radius:4px;display:inline-flex;font-family:inherit;font-size:10px;height:18px;justify-content:center;min-width:18px;padding:0 4px}.devic-command-bar-dropdown-clear{background:none;border:none;border-radius:4px;color:var(--devic-cmd-primary);cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;padding:2px 6px;text-transform:none}.devic-command-bar-dropdown-clear:hover{background:rgba(0,0,0,.05)}.devic-command-bar-dropdown-list{max-height:250px;overflow-y:auto}.devic-command-bar-dropdown-list::-webkit-scrollbar{width:6px}.devic-command-bar-dropdown-list::-webkit-scrollbar-track{background:transparent}.devic-command-bar-dropdown-list::-webkit-scrollbar-thumb{background:var(--devic-cmd-border);border-radius:3px}.devic-command-bar-dropdown-item{align-items:center;cursor:pointer;display:flex;gap:10px;padding:10px 14px;transition:background .15s ease}.devic-command-bar-dropdown-item:hover,.devic-command-bar-dropdown-item[data-selected=true]{background:rgba(0,0,0,.04)}.devic-command-bar-dropdown-item[data-selected=true]{background:var(--devic-cmd-primary);background:rgba(59,130,246,.1)}.devic-command-bar-dropdown-icon{align-items:center;color:var(--devic-cmd-text-secondary);display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.devic-command-bar-dropdown-keyword{color:var(--devic-cmd-text);flex-shrink:0;font-weight:600}.devic-command-bar-dropdown-desc{color:var(--devic-cmd-text-secondary);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-command-bar-dropdown-empty{color:var(--devic-cmd-text-secondary);font-size:13px;padding:20px 14px;text-align:center}.devic-command-bar-history-item{border-bottom:1px solid rgba(0,0,0,.04)}.devic-command-bar-history-item:last-child{border-bottom:none}.devic-command-bar-history-text{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-gen-container{--devic-gen-primary:var(--devic-gen-primary-override,#3b82f6);--devic-gen-primary-hover:var(--devic-gen-primary-hover-override,#2563eb);--devic-gen-bg:var(--devic-gen-bg-override,#fff);--devic-gen-text:var(--devic-gen-text-override,#1f2937);--devic-gen-text-secondary:var(--devic-gen-text-secondary-override,#6b7280);--devic-gen-border:var(--devic-gen-border-override,#e5e7eb);--devic-gen-radius:var(--devic-gen-radius-override,8px);--devic-gen-font-family:var(--devic-gen-font-family-override,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);--devic-gen-font-size:var(--devic-gen-font-size-override,14px);--devic-gen-z-index:var(--devic-gen-z-index-override,10000);--devic-gen-animation-duration:var(--devic-gen-animation-duration-override,200ms);--devic-gen-modal-bg:var(--devic-gen-modal-bg-override,#fff);--devic-gen-modal-text:var(--devic-gen-modal-text-override,#1f2937);--devic-gen-modal-border:var(--devic-gen-modal-border-override,#e5e7eb);font-family:var(--devic-gen-font-family);font-size:var(--devic-gen-font-size)}.devic-gen-button{align-items:center;border:none;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:8px;justify-content:center;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-button:disabled{cursor:not-allowed;opacity:.6}.devic-gen-button[data-size=small]{font-size:12px;padding:6px 12px}.devic-gen-button[data-size=medium]{font-size:14px;padding:8px 16px}.devic-gen-button[data-size=large]{font-size:16px;padding:12px 24px}.devic-gen-button[data-variant=primary]{background:var(--devic-gen-primary);color:#fff}.devic-gen-button[data-variant=primary]:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-button[data-variant=secondary]{background:var(--devic-gen-border);color:var(--devic-gen-text)}.devic-gen-button[data-variant=secondary]:hover:not(:disabled){background:#d1d5db}.devic-gen-button[data-variant=outline]{background:transparent;border:1px solid var(--devic-gen-primary);color:var(--devic-gen-primary)}.devic-gen-button[data-variant=outline]:hover:not(:disabled){background:rgba(59,130,246,.1)}.devic-gen-button[data-variant=ghost]{background:transparent;color:var(--devic-gen-text)}.devic-gen-button[data-variant=ghost]:hover:not(:disabled){background:rgba(0,0,0,.05)}.devic-gen-button-icon{align-items:center;display:flex;height:16px;justify-content:center;width:16px}.devic-gen-button-icon svg{height:100%;width:100%}.devic-gen-spinner{animation:devic-gen-spin .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}.devic-gen-spinner-small{border-width:1.5px;height:12px;width:12px}@keyframes devic-gen-spin{to{transform:rotate(1turn)}}.devic-gen-input{background:var(--devic-gen-modal-bg);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);color:var(--devic-gen-modal-text);font-family:inherit;font-size:inherit;min-height:80px;outline:none;padding:12px;resize:vertical;transition:border-color var(--devic-gen-animation-duration) ease;width:100%}.devic-gen-input:focus{border-color:var(--devic-gen-primary)}.devic-gen-input::placeholder{color:var(--devic-gen-text-secondary)}.devic-gen-error{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--devic-gen-radius);color:#dc2626;font-size:13px;margin-top:8px;padding:8px 12px}.devic-gen-tooltip{animation:devic-gen-fade-in var(--devic-gen-animation-duration) ease-out;background:var(--devic-gen-modal-bg);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);box-shadow:0 4px 20px rgba(0,0,0,.15);padding:12px}@keyframes devic-gen-fade-in{0%{opacity:0;transform:translateY(4px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}.devic-gen-tooltip[data-placement=left],.devic-gen-tooltip[data-placement=right]{animation-name:devic-gen-fade-in-horizontal}@keyframes devic-gen-fade-in-horizontal{0%{opacity:0;transform:translateX(4px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}.devic-gen-tooltip-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.devic-gen-tooltip-cancel,.devic-gen-tooltip-confirm{align-items:center;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:500;gap:6px;padding:6px 12px;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-tooltip-cancel{background:transparent;border:1px solid var(--devic-gen-modal-border);color:var(--devic-gen-text-secondary)}.devic-gen-tooltip-cancel:hover{background:rgba(0,0,0,.05)}.devic-gen-tooltip-confirm{background:var(--devic-gen-primary);border:none;color:#fff}.devic-gen-tooltip-confirm:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-tooltip-confirm:disabled{cursor:not-allowed;opacity:.6}.devic-gen-modal-overlay{align-items:center;animation:devic-gen-overlay-fade-in var(--devic-gen-animation-duration) ease-out;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:var(--devic-gen-z-index)}@keyframes devic-gen-overlay-fade-in{0%{opacity:0}to{opacity:1}}.devic-gen-modal{animation:devic-gen-modal-slide-up var(--devic-gen-animation-duration) ease-out;background:var(--devic-gen-modal-bg);border-radius:calc(var(--devic-gen-radius) + 4px);box-shadow:0 20px 50px rgba(0,0,0,.2);margin:16px;max-width:480px;width:100%}@keyframes devic-gen-modal-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.devic-gen-modal-header{align-items:center;border-bottom:1px solid var(--devic-gen-modal-border);display:flex;justify-content:space-between;padding:16px 20px}.devic-gen-modal-title{color:var(--devic-gen-modal-text);font-size:18px;font-weight:600;margin:0}.devic-gen-modal-close{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--devic-gen-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all var(--devic-gen-animation-duration) ease;width:32px}.devic-gen-modal-close:hover{background:rgba(0,0,0,.05);color:var(--devic-gen-modal-text)}.devic-gen-modal-description{color:var(--devic-gen-text-secondary);font-size:14px;line-height:1.5;margin:0;padding:12px 20px 0}.devic-gen-modal-body{padding:16px 20px}.devic-gen-modal-footer{border-top:1px solid var(--devic-gen-modal-border);display:flex;gap:12px;justify-content:flex-end;padding:16px 20px}.devic-gen-modal-cancel,.devic-gen-modal-confirm{align-items:center;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-modal-cancel{background:transparent;border:1px solid var(--devic-gen-modal-border);color:var(--devic-gen-text-secondary)}.devic-gen-modal-cancel:hover{background:rgba(0,0,0,.05);color:var(--devic-gen-modal-text)}.devic-gen-modal-confirm{background:var(--devic-gen-primary);border:none;color:#fff}.devic-gen-modal-confirm:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-modal-confirm:disabled{cursor:not-allowed;opacity:.6}.devic-gen-input::-webkit-scrollbar{width:6px}.devic-gen-input::-webkit-scrollbar-track{background:transparent}.devic-gen-input::-webkit-scrollbar-thumb{background:var(--devic-gen-border);border-radius:3px}.devic-gen-input:disabled{background:var(--devic-gen-border);cursor:not-allowed;opacity:.6}.devic-gen-tool-calls{background:rgba(0,0,0,.02);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:10px 12px}.devic-gen-tool-item{align-items:center;color:var(--devic-gen-text-secondary);display:flex;font-size:13px;gap:8px}.devic-gen-tool-item[data-status=executing]{color:var(--devic-gen-primary)}.devic-gen-tool-item[data-status=completed] .devic-gen-tool-icon{color:#10b981}.devic-gen-tool-icon{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.devic-gen-tool-icon svg{height:100%;width:100%}.devic-gen-tool-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-gen-tool-custom{padding:8px 0}.devic-gen-processing-status{align-items:center;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.2);border-radius:var(--devic-gen-radius);display:flex;gap:8px;margin-bottom:12px;padding:10px 12px}.devic-gen-processing-text{animation:devic-gen-pulse 1.5s ease-in-out infinite;color:var(--devic-gen-primary);font-size:13px}@keyframes devic-gen-pulse{0%,to{opacity:1}50%{opacity:.6}}.devic-aiwrap-container,.devic-aiwrap-tooltip,.devic-aiwrap-trigger-wrapper{--devic-aiwrap-color:#7c3aed;--devic-aiwrap-color-2:#4f46e5;--devic-aiwrap-bg:#fff;--devic-aiwrap-text:#1f2937;--devic-aiwrap-border:#e5e7eb;--devic-aiwrap-shadow:0 8px 24px rgba(0,0,0,.12)}.devic-aiwrap-container[data-highlight=true] .devic-aiwrap-content{background:rgba(124,58,237,.08);border-radius:4px;outline:1px dashed rgba(124,58,237,.45);outline-offset:2px;transition:background .15s ease,outline-color .15s ease}.devic-aiwrap-content{display:inline;transition:background .15s ease}.devic-aiwrap-trigger-wrapper{display:inline-flex}.devic-aiwrap-trigger{align-items:center;background:linear-gradient(90deg,var(--devic-aiwrap-color) 0,var(--devic-aiwrap-color-2) 100%);border:1px solid hsla(0,0%,100%,.25);box-shadow:0 4px 14px rgba(124,58,237,.35);color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:500;gap:6px;padding:6px 12px;transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap}.devic-aiwrap-trigger:hover{box-shadow:0 6px 18px rgba(124,58,237,.45);transform:translateY(-1px)}.devic-aiwrap-trigger:active{transform:translateY(0)}.devic-aiwrap-trigger-icon{align-items:center;display:inline-flex}.devic-aiwrap-trigger-label{line-height:1}.devic-aiwrap-tooltip{background:var(--devic-aiwrap-bg);border:1px solid var(--devic-aiwrap-border);border-radius:12px;box-shadow:var(--devic-aiwrap-shadow);color:var(--devic-aiwrap-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}.devic-aiwrap-tooltip-header{align-items:center;background:rgba(124,58,237,.05);border-bottom:1px solid var(--devic-aiwrap-border);display:flex;gap:8px;justify-content:space-between;padding:10px 12px}.devic-aiwrap-tooltip-label{color:var(--devic-aiwrap-color);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-aiwrap-tooltip-close{align-items:center;background:transparent;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:inline-flex;padding:2px}.devic-aiwrap-tooltip-close:hover{background:rgba(0,0,0,.06);color:#111827}.devic-aiwrap-tooltip-body{line-height:1.5;max-height:320px;overflow-y:auto;padding:12px}.devic-aiwrap-processing{align-items:center;color:#6b7280;display:flex;font-size:13px;gap:8px}.devic-aiwrap-spinner{animation:devic-aiwrap-spin .7s linear infinite;border:2px solid rgba(124,58,237,.25);border-radius:50%;border-top:2px solid var(--devic-aiwrap-color);flex-shrink:0;height:14px;width:14px}@keyframes devic-aiwrap-spin{to{transform:rotate(1turn)}}.devic-aiwrap-error{color:#dc2626;font-size:13px}.devic-aiwrap-answer{white-space:pre-wrap;word-break:break-word}
|
|
1
|
+
.devic-state-tag{align-items:center;border:1px solid;border-radius:4px;cursor:default;display:inline-flex;font-family:var(--devic-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);font-size:12px;font-weight:500;gap:6px;line-height:20px;padding:2px 8px;position:relative;white-space:nowrap}.devic-state-tag[data-interactive=true]{cursor:pointer}.devic-state-tag[data-interactive=true]:hover{opacity:.85}.devic-state-tag[data-color=gold]{background:rgba(250,173,20,.15);border-color:rgba(250,173,20,.35);color:#faad14}.devic-state-tag[data-color=processing]{background:rgba(22,119,255,.15);border-color:rgba(22,119,255,.35);color:#4096ff}.devic-state-tag[data-color=success]{background:rgba(82,196,26,.15);border-color:rgba(82,196,26,.35);color:#52c41a}.devic-state-tag[data-color=error]{background:rgba(255,77,79,.15);border-color:rgba(255,77,79,.35);color:#ff4d4f}.devic-state-tag[data-color=default]{background:hsla(0,0%,60%,.15);border-color:hsla(0,0%,60%,.35);color:#999}.devic-state-tag[data-color=purple]{background:rgba(114,46,209,.15);border-color:rgba(114,46,209,.35);color:#b37feb}.devic-state-tag[data-color=blue]{background:rgba(22,119,255,.15);border-color:rgba(22,119,255,.35);color:#4096ff}.devic-state-tag-icon{align-items:center;display:inline-flex;flex-shrink:0}.devic-state-tag-caret{align-items:center;display:inline-flex;margin-left:2px;transition:transform .2s ease}.devic-state-tag[data-dropdown-open=true] .devic-state-tag-caret{transform:rotate(180deg)}.devic-state-spinner{animation:devic-state-spin 1s linear infinite}@keyframes devic-state-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.devic-state-tooltip{background:rgba(0,0,0,.85);border-radius:6px;bottom:calc(100% + 8px);color:#fff;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.4;max-width:280px;padding:6px 10px;pointer-events:none;white-space:normal;z-index:1060}.devic-state-tooltip,.devic-state-tooltip:after{left:50%;position:absolute;transform:translateX(-50%)}.devic-state-tooltip:after{border:5px solid transparent;border-top-color:rgba(0,0,0,.85);content:"";top:100%}.devic-state-dropdown{animation:devic-dropdownSlide .15s ease-out;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.06);min-width:180px;padding:4px 0;position:absolute;right:0;top:calc(100% + 4px);z-index:1050}@keyframes devic-dropdownSlide{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.devic-state-dropdown-item{align-items:center;background:none;border:none;color:#333;cursor:pointer;display:flex;font-family:inherit;font-size:13px;gap:8px;padding:8px 12px;text-align:left;transition:background .15s;width:100%}.devic-state-dropdown-item:hover{background:#f5f5f5}.devic-state-dropdown-item-icon{align-items:center;display:flex;flex-shrink:0;justify-content:center;width:18px}.devic-state-tooltip-portal{background:rgba(0,0,0,.85);border-radius:6px;color:#fff;font-family:SFMono-Regular,Consolas,monospace;font-size:12px;font-weight:400;line-height:1.4;max-width:280px;padding:6px 10px;pointer-events:none;white-space:normal;z-index:99999}.devic-state-dropdown-portal{animation:devic-dropdownSlide .15s ease-out;background:#fff;border:1px solid #e8e8e8;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.06);min-width:180px;padding:4px 0;z-index:99999}.devic-state-modal-overlay{align-items:center;animation:devic-fadeIn .2s ease;background:rgba(0,0,0,.45);display:flex;inset:0;justify-content:center;position:fixed;z-index:1050}@keyframes devic-fadeIn{0%{opacity:0}to{opacity:1}}.devic-state-modal{animation:devic-modalSlide .2s ease-out;background:#fff;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.08);display:flex;flex-direction:column;max-height:80vh;max-width:520px;width:90%}@keyframes devic-modalSlide{0%{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}.devic-state-modal-header{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;padding:16px 20px}.devic-state-modal-title{align-items:center;display:flex;font-size:16px;font-weight:600;gap:8px;margin:0}.devic-state-modal-close{align-items:center;background:none;border:none;border-radius:4px;color:#999;cursor:pointer;display:flex;padding:4px}.devic-state-modal-close:hover{background:#f5f5f5;color:#333}.devic-state-modal-body{flex:1;overflow-y:auto;padding:20px}.devic-state-modal-footer{border-top:1px solid #f0f0f0;display:flex;gap:8px;justify-content:flex-end;padding:12px 20px}.devic-state-btn{align-items:center;background:#fff;border:1px solid #d9d9d9;border-radius:6px;color:#333;cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:6px;justify-content:center;padding:6px 16px;transition:all .2s}.devic-state-btn:hover{border-color:#1677ff;color:#1677ff}.devic-state-btn-primary{background:#1677ff;border-color:#1677ff;color:#fff}.devic-state-btn-primary:hover{background:#4096ff;border-color:#4096ff;color:#fff}.devic-state-btn-danger{background:#ff4d4f;border-color:#ff4d4f;color:#fff}.devic-state-btn-danger:hover{background:#ff7875;border-color:#ff7875;color:#fff}.devic-state-btn-success{background:#52c41a;border-color:#52c41a;color:#fff}.devic-state-btn-success:hover{background:#73d13d;border-color:#73d13d;color:#fff}.devic-state-btn:disabled{cursor:not-allowed;opacity:.5}.devic-explain-content{border:1px solid #e8e8e8;border-radius:8px;font-family:SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.6;max-height:300px;min-height:150px;overflow-y:auto;padding:12px;white-space:pre-wrap}.devic-typing-cursor{animation:devic-blink 1s step-end infinite}@keyframes devic-blink{0%,to{opacity:1}50%{opacity:0}}.devic-approval-layout{display:flex;gap:16px}.devic-approval-request{background:#fafafa;border:1px solid #e8e8e8;border-radius:8px;flex:1;font-size:13px;line-height:1.6;max-height:250px;overflow-y:auto;padding:12px}.devic-approval-actions{display:flex;flex:1;flex-direction:column;gap:12px}.devic-approval-textarea{border:1px solid #d9d9d9;border-radius:6px;box-sizing:border-box;font-family:inherit;font-size:13px;min-height:80px;outline:none;padding:8px 12px;resize:vertical;width:100%}.devic-approval-textarea:focus{border-color:#1677ff}.devic-approval-buttons{display:flex;flex-direction:column;gap:8px}.devic-completion-select{background:#fff;border:1px solid #d9d9d9;border-radius:6px;cursor:pointer;font-family:inherit;font-size:14px;outline:none;padding:8px 12px;width:100%}.devic-completion-select:focus{border-color:#1677ff}.devic-state-loading{align-items:center;display:flex;justify-content:center;padding:24px}.devic-state-loading-spinner{animation:devic-state-spin .8s linear infinite;border:2px solid #f0f0f0;border-radius:50%;border-top-color:#1677ff;height:24px;width:24px}.devic-state-warning{align-items:flex-start;color:#cf1322;display:flex;font-size:13px;font-weight:500;gap:6px;margin-top:8px}.devic-message-actions{align-items:center;display:flex;gap:4px;opacity:0;transition:opacity .15s ease}.devic-message-actions:focus-within,.devic-message:hover .devic-message-actions{opacity:1}.devic-message-actions:has(.devic-action-btn--active){opacity:1}.devic-action-btn{align-items:center;background:transparent;border:none;border-radius:var(--devic-radius-sm,6px);color:var(--devic-text-muted,#94a3b8);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .15s ease;width:28px}.devic-action-btn:hover:not(:disabled){background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-action-btn:disabled{cursor:not-allowed;opacity:.5}.devic-action-btn--active{color:var(--devic-primary,#3b82f6)}.devic-action-btn--active.devic-action-btn--positive{color:#22c55e}.devic-action-btn--active.devic-action-btn--negative{color:#ef4444}.devic-feedback-overlay{align-items:center;animation:devic-feedback-fade-in .15s ease;background:rgba(0,0,0,.4);bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:10001}@keyframes devic-feedback-fade-in{0%{opacity:0}to{opacity:1}}.devic-feedback-modal{animation:devic-feedback-slide-up .2s ease;background:var(--devic-bg,#fff);border-radius:var(--devic-radius,12px);box-shadow:0 20px 60px rgba(0,0,0,.2);margin:16px;max-width:400px;width:100%}@keyframes devic-feedback-slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.devic-feedback-modal-header{align-items:center;border-bottom:1px solid var(--devic-border,#e2e8f0);display:flex;gap:10px;padding:16px 16px 12px}.devic-feedback-modal-icon{align-items:center;background:var(--devic-bg-secondary,#f8fafc);border-radius:8px;color:var(--devic-text,#1e293b);display:flex;height:32px;justify-content:center;width:32px}.devic-feedback-modal-title{color:var(--devic-text,#1e293b);flex:1;font-size:15px;font-weight:600}.devic-feedback-modal-close{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--devic-text-muted,#94a3b8);cursor:pointer;display:flex;height:28px;justify-content:center;padding:0;transition:all .15s ease;width:28px}.devic-feedback-modal-close:hover{background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-feedback-textarea{background:transparent;border:none;border-bottom:1px solid var(--devic-border,#e2e8f0);box-sizing:border-box;color:var(--devic-text,#1e293b);display:block;font-family:inherit;font-size:14px;line-height:1.5;padding:12px 16px;resize:none;width:100%}.devic-feedback-textarea:focus{outline:none}.devic-feedback-textarea::placeholder{color:var(--devic-text-muted,#94a3b8)}.devic-feedback-modal-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px}.devic-feedback-btn{border:none;border-radius:var(--devic-radius-sm,6px);cursor:pointer;font-family:inherit;font-size:14px;font-weight:500;padding:8px 16px;transition:all .15s ease}.devic-feedback-btn:disabled{cursor:not-allowed;opacity:.6}.devic-feedback-btn--secondary{background:var(--devic-bg-secondary,#f8fafc);color:var(--devic-text-secondary,#64748b)}.devic-feedback-btn--secondary:hover:not(:disabled){background:var(--devic-border,#e2e8f0)}.devic-feedback-btn--primary{background:var(--devic-primary,#3b82f6);color:#fff}.devic-feedback-btn--primary:hover:not(:disabled){background:var(--devic-primary-hover,#2563eb)}.devic-cmd-result-actions{border-top:1px solid var(--devic-cmd-border,var(--devic-border,#e5e7eb));margin-top:8px;padding-top:8px}.devic-cmd-result-actions .devic-message-actions{opacity:1;padding-left:10px}.devic-cmd-result-actions .devic-action-btn{opacity:.7}.devic-cmd-result-actions .devic-action-btn--active,.devic-cmd-result-actions .devic-action-btn:hover{opacity:1}.devic-chat-drawer{--devic-primary:#1890ff;--devic-primary-hover:#40a9ff;--devic-primary-light:#e6f7ff;--devic-bg:#fff;--devic-bg-secondary:#f5f5f5;--devic-text:#333;--devic-text-secondary:#666;--devic-text-muted:#999;--devic-border:#e8e8e8;--devic-shadow:0 4px 12px rgba(0,0,0,.15);--devic-radius:8px;--devic-radius-sm:4px;--devic-radius-lg:16px;--devic-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--devic-transition:0.3s ease;background:var(--devic-bg);bottom:0;box-shadow:var(--devic-shadow);color:var(--devic-text);display:flex;flex-direction:column;font-family:var(--devic-font-family);font-size:14px;line-height:1.5;position:fixed;top:0;transition:transform var(--devic-transition)}.devic-chat-drawer[data-position=right]{right:0;transform:translateX(100%)}.devic-chat-drawer[data-position=left]{left:0;transform:translateX(-100%)}.devic-chat-drawer[data-open=true]{transform:translateX(0)}.devic-drawer-overlay{background:rgba(0,0,0,.3);inset:0;opacity:0;position:fixed;transition:opacity var(--devic-transition),visibility var(--devic-transition);visibility:hidden}.devic-drawer-overlay[data-open=true]{opacity:1;visibility:visible}.devic-drawer-header{align-items:center;border-bottom:1px solid var(--devic-border);display:flex;flex-shrink:0;justify-content:space-between;padding:16px}.devic-drawer-avatar{border-radius:50%;flex-shrink:0;height:28px;object-fit:cover;width:28px}.devic-drawer-title{font-size:16px;font-weight:600;margin:0}.devic-drawer-close{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;padding:8px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-drawer-close:hover{background:var(--devic-bg-secondary);color:var(--devic-text)}.devic-messages-container{display:flex;flex:1;flex-direction:column;gap:12px;overflow-y:auto;padding:16px}.devic-welcome{color:var(--devic-text-secondary);padding:24px 16px;text-align:center}.devic-welcome-text{font-size:16px;margin-bottom:16px}.devic-suggested-messages{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.devic-suggested-btn{background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius-lg);color:var(--devic-text);cursor:pointer;font-size:13px;padding:8px 16px;transition:border-color var(--devic-transition),background var(--devic-transition)}.devic-suggested-btn:hover{background:var(--devic-primary-light);border-color:var(--devic-primary)}.devic-message{display:flex;flex-direction:column;max-width:85%}.devic-message[data-role=user]{align-self:flex-end}.devic-message[data-role=assistant],.devic-message[data-role=tool]{align-self:flex-start}.devic-message-bubble{word-wrap:break-word;border-radius:var(--devic-radius);padding:10px 14px}.devic-message[data-role=user] .devic-message-bubble{background:var(--devic-user-bubble,var(--devic-primary));border-bottom-right-radius:var(--devic-radius-sm);color:var(--devic-user-bubble-text,#fff)}.devic-message[data-role=assistant] .devic-message-bubble{background:var(--devic-assistant-bubble,var(--devic-bg-secondary));border-bottom-left-radius:var(--devic-radius-sm);color:var(--devic-assistant-bubble-text,var(--devic-text))}.devic-message[data-role=tool] .devic-message-bubble{background:var(--devic-primary-light);border:1px solid var(--devic-primary);color:var(--devic-text);font-size:12px}.devic-message-footer{align-items:center;display:flex;gap:8px;justify-content:space-between;margin-top:4px}.devic-message-time{color:var(--devic-text-muted);font-size:11px}.devic-message[data-role=user] .devic-message-footer{justify-content:flex-end}.devic-message[data-role=user] .devic-message-time{text-align:right}.devic-message-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.devic-message-file{align-items:center;background:hsla(0,0%,100%,.2);border-radius:var(--devic-radius-sm);display:flex;font-size:12px;gap:6px;padding:6px 10px}.devic-loading{align-self:flex-start;display:flex;gap:4px;padding:10px 14px}.devic-loading-dot{animation:devic-bounce 1.4s ease-in-out infinite both;background:var(--devic-text-muted);border-radius:50%;height:8px;width:8px}.devic-loading-dot:first-child{animation-delay:-.32s}.devic-loading-dot:nth-child(2){animation-delay:-.16s}@keyframes devic-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.devic-tool-group{align-self:flex-start;display:flex;flex-direction:column;gap:2px;max-width:85%}.devic-tool-activity{align-items:flex-start;animation:devic-slideUp .3s ease-out;display:flex;gap:8px;padding:4px 0}.devic-tool-activity-icon{align-items:center;color:var(--devic-text-muted);display:flex;flex-shrink:0;margin-top:1px}.devic-tool-activity--active .devic-tool-activity-icon{color:var(--devic-primary)}.devic-tool-activity-text{color:var(--devic-text-secondary);font-size:13px;line-height:1.4}.devic-glow-text{animation:devic-pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes devic-pulse{0%,to{opacity:1}50%{opacity:.5}}.devic-spinner{animation:devic-spin 1s linear infinite}@keyframes devic-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes devic-slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.devic-tool-collapse-btn{align-items:center;background:none;border:none;color:var(--devic-text-muted);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:12px;gap:6px;padding:4px 0;transition:color .2s ease}.devic-tool-collapse-btn:hover{color:var(--devic-primary)}.devic-tool-group-items{animation:devic-expandItems .4s ease-out;overflow:hidden}.devic-tool-group-items[data-expanded=true]{max-height:500px}@keyframes devic-expandItems{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}.devic-input-area{border-top:1px solid var(--devic-border);flex-shrink:0;padding:16px}.devic-input-wrapper{align-items:flex-end;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);display:flex;gap:8px;padding:8px 12px}.devic-input{background:none;border:none;color:var(--devic-text);flex:1;font-family:inherit;font-size:14px;line-height:1.5;max-height:120px;min-height:24px;outline:none;resize:none}.devic-input::placeholder{color:var(--devic-text-muted)}.devic-input-btn{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;flex-shrink:0;padding:4px;transition:color var(--devic-transition)}.devic-input-btn:hover:not(:disabled){color:var(--devic-primary)}.devic-input-btn:disabled{cursor:not-allowed;opacity:.5}.devic-send-btn{padding:6px 12px}.devic-send-btn,.devic-stop-btn{background:var(--devic-send-btn,var(--devic-primary));border-radius:var(--devic-radius-sm);color:#fff}.devic-stop-btn{align-items:center;display:flex;justify-content:center;padding:6px}.devic-stop-btn:hover{background:var(--devic-primary-hover);color:#fff}.devic-send-btn-wrapper{flex-shrink:0;position:relative}.devic-send-btn-custom{align-items:center;display:flex;justify-content:center;pointer-events:none}.devic-send-btn-overlay{background:transparent;border:none;cursor:pointer;inset:0;margin:0;padding:0;position:absolute}.devic-send-btn-overlay:disabled{cursor:not-allowed;opacity:.5}.devic-send-btn:hover:not(:disabled){background:var(--devic-primary-hover);color:#fff}.devic-speech-error{background:#fff1f0;border:1px solid #ffccc7;border-radius:var(--devic-radius-sm);color:#cf1322;font-size:12px;margin-bottom:8px;padding:6px 10px}.devic-speech-mic.devic-input-btn:hover:not(:disabled){color:var(--devic-primary)}.devic-speech-panel{align-items:center;display:flex;flex:1;gap:8px;min-height:24px}.devic-speech-live{align-items:center;display:flex;flex:1;gap:10px;justify-content:flex-start}.devic-speech-timer{color:var(--devic-text-secondary);font-size:13px;font-variant-numeric:tabular-nums}.devic-speech-confirm{color:#389e0d}.devic-speech-confirm.devic-input-btn:hover:not(:disabled){color:#237804}.devic-speech-confirm-wrap{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center;position:relative}.devic-autostop-ring{height:calc(100% + 6px);inset:-3px;pointer-events:none;position:absolute;transform:rotate(-90deg);width:calc(100% + 6px)}.devic-autostop-ring-track{fill:none;stroke:#389e0d;stroke-opacity:.18;stroke-width:3}.devic-autostop-ring-progress{fill:none;stroke:#389e0d;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 90ms linear}.devic-speech-confirm-wrap[data-autostop=true] .devic-speech-confirm{animation:devic-autostop-pulse 1s ease-in-out infinite}@keyframes devic-autostop-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.devic-handoff-bar{align-items:center;background:var(--devic-primary-light,#e6f7ff);border-radius:8px;color:var(--devic-primary);display:flex;font-size:12px;gap:8px;margin-bottom:6px;padding:5px 8px}.devic-handoff-dot{animation:devic-handoff-blink 1.2s ease-in-out infinite;background:var(--devic-primary);border-radius:50%;flex-shrink:0;height:8px;width:8px}.devic-handoff-bar[data-waiting=true] .devic-handoff-dot{animation-duration:.7s}@keyframes devic-handoff-blink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}.devic-handoff-label{flex:1;font-weight:500}.devic-handoff-stop{align-items:center;background:transparent;border:none;border-radius:50%;color:inherit;cursor:pointer;display:inline-flex;height:22px;justify-content:center;opacity:.8;padding:0;width:22px}.devic-handoff-stop:hover{background:rgba(0,0,0,.06);opacity:1}.devic-handoff-pending{align-items:center;animation:devic-handoff-pending-in .18s ease-out;display:flex;flex:1;gap:10px;min-height:24px;min-width:0}@keyframes devic-handoff-pending-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.devic-handoff-pending-icon{align-items:center;animation:devic-autostop-pulse 1s ease-in-out infinite;color:var(--devic-primary);display:inline-flex;flex-shrink:0;height:36px;justify-content:center;position:relative;width:36px}.devic-handoff-ring{height:100%;inset:0;pointer-events:none;position:absolute;transform:rotate(-90deg);width:100%}.devic-handoff-ring-track{fill:none;stroke:var(--devic-primary);stroke-opacity:.18;stroke-width:3}.devic-handoff-ring-progress{fill:none;stroke:var(--devic-primary);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 90ms linear}.devic-handoff-pending-text{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}.devic-handoff-pending-title{color:var(--devic-primary);font-size:13px;font-weight:500}.devic-handoff-pending-preview{color:var(--devic-text-secondary);font-size:12px;max-height:4.5em;overflow-wrap:anywhere;overflow-y:auto;white-space:normal;word-break:break-word}.devic-speech-cancel{color:var(--devic-text-muted)}.devic-speech-cancel.devic-input-btn:hover:not(:disabled){color:#cf1322}.devic-speech-status{color:var(--devic-text-secondary);font-size:13px}.devic-speech-spinner{animation:devic-spin .8s linear infinite;border:2px solid var(--devic-border);border-radius:50%;border-top-color:var(--devic-primary);flex-shrink:0;height:16px;width:16px}.devic-transcript-playback{align-items:center;background:hsla(0,0%,100%,.18);border-radius:999px;display:inline-flex;font-size:12px;gap:6px;line-height:1;margin-top:6px;max-width:100%;padding:3px 8px 3px 3px}.devic-message[data-role=assistant] .devic-transcript-playback{background:var(--devic-bg-secondary,rgba(0,0,0,.05))}.devic-transcript-btn{align-items:center;background:hsla(0,0%,100%,.85);border:none;border-radius:50%;color:var(--devic-primary,#6c5ce7);cursor:pointer;display:inline-flex;flex-shrink:0;height:22px;justify-content:center;padding:0;transition:background .15s ease;width:22px}.devic-transcript-btn:hover:not(:disabled){background:#fff}.devic-transcript-btn:disabled{cursor:default;opacity:.7}.devic-transcript-icon{align-items:center;display:inline-flex;opacity:.85}.devic-transcript-playback[data-playing=true] .devic-transcript-icon{animation:devic-pulse 1.2s ease-in-out infinite}.devic-transcript-label{opacity:.9;white-space:nowrap}.devic-transcript-spinner{animation:devic-spin .8s linear infinite;border:2px solid rgba(108,92,231,.3);border-radius:50%;border-top:2px solid var(--devic-primary,#6c5ce7);height:12px;width:12px}.devic-equalizer{align-items:center;display:flex;gap:3px;height:24px}.devic-equalizer-bar{background:var(--devic-primary);border-radius:2px;min-height:3px;transition:height 90ms ease-out;width:3px}.devic-equalizer[data-paused=true] .devic-equalizer-bar{background:var(--devic-text-muted);height:10%!important}.devic-file-preview{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.devic-file-preview-item{align-items:center;background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);display:flex;font-size:12px;gap:6px;padding:4px 8px}.devic-file-remove{background:none;border:none;color:var(--devic-text-muted);cursor:pointer;font-size:16px;line-height:1;padding:0}.devic-file-remove:hover{color:#ff4d4f}.devic-trigger{align-items:center;background:var(--devic-primary);border:none;border-radius:50%;box-shadow:var(--devic-shadow);color:#fff;cursor:pointer;display:flex;height:56px;justify-content:center;position:fixed;transition:background var(--devic-transition),transform var(--devic-transition);width:56px}.devic-trigger:hover{background:var(--devic-primary-hover);transform:scale(1.05)}.devic-trigger svg{height:24px;width:24px}.devic-error{background:#fff2f0;border:1px solid #ffccc7;border-radius:var(--devic-radius);color:#ff4d4f;font-size:13px;margin:8px 16px;padding:12px}.devic-messages-container::-webkit-scrollbar{width:6px}.devic-messages-container::-webkit-scrollbar-track{background:transparent}.devic-messages-container::-webkit-scrollbar-thumb{background:var(--devic-border);border-radius:3px}.devic-messages-container::-webkit-scrollbar-thumb:hover{background:var(--devic-text-muted)}.devic-chat-drawer[data-mode=inline]{border:1px solid var(--devic-border);bottom:auto;box-shadow:none;height:100%;left:auto;position:relative;right:auto;top:auto;transform:none}.devic-drawer-header-actions{align-items:center;display:flex;gap:4px;margin-left:auto}.devic-new-chat-btn{background:none;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-secondary);cursor:pointer;padding:8px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-new-chat-btn:hover{background:var(--devic-bg-secondary);color:var(--devic-primary)}.devic-conversation-selector{flex:1;margin:0 8px;min-width:0;position:relative}.devic-conversation-selector-trigger{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);color:var(--devic-text);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:13px;gap:6px;padding:6px 10px;text-align:left;transition:border-color var(--devic-transition);width:100%}.devic-conversation-selector-trigger:hover{border-color:var(--devic-primary)}.devic-conversation-selector-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-conversation-dropdown{background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:var(--devic-radius);box-shadow:var(--devic-shadow);display:flex;flex-direction:column;left:0;max-height:320px;position:absolute;right:0;top:calc(100% + 4px);z-index:10}.devic-conversation-search-wrapper{border-bottom:1px solid var(--devic-border);padding:8px}.devic-conversation-search{background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius-sm);box-sizing:border-box;color:var(--devic-text);font-family:var(--devic-font-family);font-size:13px;outline:none;padding:6px 8px;width:100%}.devic-conversation-search:focus{border-color:var(--devic-primary)}.devic-conversation-list{flex:1;overflow-y:auto}.devic-conversation-item{align-items:center;background:none;border:none;color:var(--devic-text);cursor:pointer;display:flex;font-family:var(--devic-font-family);font-size:13px;justify-content:space-between;padding:8px 12px;text-align:left;transition:background .15s;width:100%}.devic-conversation-item:hover,.devic-conversation-item[data-active=true]{background:var(--devic-bg-secondary)}.devic-conversation-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-conversation-item-date{color:var(--devic-text-muted);flex-shrink:0;font-size:11px;margin-left:8px}.devic-conversation-empty,.devic-conversation-loading{color:var(--devic-text-muted);font-size:13px;padding:12px;text-align:center}.devic-conversation-load-more{background:none;border:none;color:var(--devic-text-muted);cursor:pointer;display:block;font-family:var(--devic-font-family);font-size:12px;padding:8px 12px;text-align:center;transition:background .15s;width:100%}.devic-conversation-load-more:hover{background:var(--devic-bg-secondary);color:var(--devic-primary)}.devic-conversation-new{background:none;border:none;border-top:1px solid var(--devic-border);color:var(--devic-primary);cursor:pointer;display:block;font-family:var(--devic-font-family);font-size:13px;padding:10px 12px;text-align:left;transition:background .15s;width:100%}.devic-conversation-new:hover{background:var(--devic-bg-secondary)}.devic-conversation-item-check{align-items:center;color:var(--devic-primary);display:flex;flex-shrink:0;margin-right:6px}.devic-message-bubble h1,.devic-message-bubble h2,.devic-message-bubble h3,.devic-message-bubble h4,.devic-message-bubble h5,.devic-message-bubble h6{line-height:1.3;margin:8px 0 4px}.devic-message-bubble h1{font-size:1.3em}.devic-message-bubble h2{font-size:1.2em}.devic-message-bubble h3{font-size:1.1em}.devic-message-bubble p{margin:4px 0}.devic-message-bubble ol,.devic-message-bubble ul{margin:4px 0;padding-left:20px}.devic-message-bubble code{background:rgba(0,0,0,.06);border-radius:3px;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.9em;padding:1px 4px}.devic-message-bubble pre{background:rgba(0,0,0,.06);border-radius:var(--devic-radius-sm);margin:8px 0;overflow-x:auto;padding:10px}.devic-message-bubble pre code{background:none;padding:0}.devic-message-bubble blockquote{border-left:3px solid var(--devic-border);color:var(--devic-text-secondary);margin:4px 0;padding-left:12px}.devic-message-bubble a{color:var(--devic-primary);text-decoration:underline}.markdown-table{margin:8px 0;overflow-x:auto}.markdown-table table{border-collapse:collapse;font-size:13px;width:100%}.markdown-table td,.markdown-table th{border:1px solid var(--devic-border);padding:6px 10px;text-align:left}.markdown-table th{background:var(--devic-bg-secondary);font-weight:600}.devic-resize-handle{bottom:0;cursor:col-resize;position:absolute;top:0;width:6px;z-index:1}.devic-resize-handle[data-position=right]{left:0}.devic-resize-handle[data-position=left]{right:0}.devic-resize-handle:active,.devic-resize-handle:hover{background:var(--devic-primary);opacity:.3}.devic-handoff-widget{animation:devic-slideUp .3s ease-out;background:var(--devic-bg);border:1px solid var(--devic-border);border-radius:8px;display:flex;flex-direction:column;gap:10px;max-width:320px;padding:12px;width:100%}.devic-handoff-header{align-items:center;display:flex;gap:8px}.devic-handoff-agent-avatar{align-items:center;background:var(--devic-bg-secondary);border-radius:50%;display:flex;flex-shrink:0;height:24px;justify-content:center;overflow:hidden;width:24px}.devic-handoff-avatar-img{height:100%;object-fit:cover;width:100%}.devic-handoff-agent-name{color:var(--devic-text);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-handoff-progress,.devic-handoff-state-row{align-items:center;display:flex;gap:8px}.devic-handoff-progress-bar{background:#f0f0f0;border-radius:3px;flex:1;height:6px;overflow:hidden;position:relative}.devic-handoff-progress-fill{border-radius:3px;height:100%;transition:width .4s ease}.devic-handoff-progress-fill[data-status=active]{background:var(--devic-primary)}.devic-handoff-progress-fill[data-status=success]{background:#52c41a}.devic-handoff-progress-fill[data-status=error]{background:#ff4d4f}.devic-handoff-progress-text{color:var(--devic-text-muted);flex-shrink:0;font-size:11px}.devic-handoff-progress-indeterminate{animation:devic-indeterminate 1.5s ease-in-out infinite;background:var(--devic-primary);border-radius:3px;height:100%;width:40%}@keyframes devic-indeterminate{0%{transform:translateX(-100%)}50%{transform:translateX(150%)}to{transform:translateX(-100%)}}.devic-handoff-summary{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:var(--devic-text-secondary);display:-webkit-box;font-size:12px;line-height:1.4;overflow:hidden;text-overflow:ellipsis}.devic-handoff-summary-active{animation:devic-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.devic-handoff-elapsed{align-items:center;color:var(--devic-text-muted);display:flex;font-size:11px;gap:4px}.devic-message[data-role=user] .devic-message-references{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;margin-bottom:4px}.devic-message-reference-chip{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text);display:inline-flex;font-size:11px;gap:4px;max-width:220px;padding:3px 8px}.devic-message-reference-chip-label{color:var(--devic-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-reference-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px;padding:6px 8px}.devic-reference-chip{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text);display:inline-flex;font-size:12px;gap:6px;max-width:220px;padding:4px 8px}.devic-reference-chip-label{color:var(--devic-primary);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-reference-chip-remove{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--devic-text-muted);cursor:pointer;display:inline-flex;font-size:16px;line-height:1;padding:0 2px}.devic-reference-chip-remove:hover{background:rgba(0,0,0,.06);color:var(--devic-text)}.devic-input-disabled-notice{align-items:center;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);color:var(--devic-text-muted);display:flex;font-size:12px;gap:6px;justify-content:center;margin-bottom:4px;padding:8px 12px}.devic-inline-widgets{display:flex;flex-direction:column;gap:8px;padding:8px 12px}.devic-inline-widget{background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:var(--devic-radius);padding:12px}.devic-input-widget{padding:8px;width:100%}.devic-limit-banner{align-items:flex-start;background:#fff7e6;border:1px solid #ffd591;border-radius:var(--devic-radius);color:#ad4e00;display:flex;font-size:13px;gap:8px;margin-bottom:8px;padding:8px 12px}.devic-limit-banner-icon{color:#fa8c16;display:inline-flex;flex-shrink:0;margin-top:1px}.devic-limit-banner-text{display:flex;flex-direction:column;gap:2px;line-height:1.35}.devic-limit-banner-title{font-weight:600}.devic-limit-banner-reset{color:var(--devic-text-secondary);font-size:12px}.devic-usage-bar-wrap{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}.devic-usage-bar-head{align-items:center;display:flex;gap:8px;justify-content:space-between}.devic-usage-tier{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text-secondary);display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.02em;padding:2px 8px;text-transform:uppercase;white-space:nowrap}.devic-usage-bar-window{color:var(--devic-text-muted);white-space:nowrap}.devic-usage-bar-group{background:var(--devic-bg-secondary);border-radius:var(--devic-radius);display:flex;flex-direction:column;gap:4px;padding:5px 10px}.devic-usage-bar-group .devic-usage-bar{background:transparent;padding:0}.devic-usage-bar{align-items:center;background:var(--devic-bg-secondary);border-radius:var(--devic-radius);color:var(--devic-text-secondary);display:flex;font-size:12px;gap:8px;padding:5px 10px}.devic-usage-bar[data-empty=true]{color:var(--devic-text-muted);justify-content:space-between}.devic-usage-bar-label{font-weight:500;white-space:nowrap}.devic-usage-bar-track{background:var(--devic-border);border-radius:999px;flex:1;height:6px;overflow:hidden}.devic-usage-bar-fill{border-radius:999px;height:100%;transition:width var(--devic-transition),background-color var(--devic-transition)}.devic-usage-bar-reset{color:var(--devic-text-muted);white-space:nowrap}.devic-usage-toggle{align-items:center;background:var(--devic-bg-secondary);border:1px solid var(--devic-border);border-radius:999px;color:var(--devic-text-secondary);cursor:pointer;display:inline-flex;font-size:12px;font-weight:500;gap:6px;padding:4px 10px;transition:background var(--devic-transition),color var(--devic-transition)}.devic-usage-toggle:hover{background:var(--devic-border);color:var(--devic-text)}.devic-usage-collapse{align-items:center;background:transparent;border:none;border-radius:var(--devic-radius-sm);color:var(--devic-text-muted);cursor:pointer;display:inline-flex;font-size:16px;height:18px;justify-content:center;line-height:1;padding:0;width:18px}.devic-usage-collapse:hover{background:var(--devic-border);color:var(--devic-text)}@media (max-width:480px){.devic-chat-drawer{width:100%}}.devic-command-bar-container{--devic-cmd-bg:var(--devic-cmd-bg-override,#fff);--devic-cmd-text:var(--devic-cmd-text-override,#1f2937);--devic-cmd-text-secondary:var(--devic-cmd-text-secondary-override,#6b7280);--devic-cmd-border:var(--devic-cmd-border-override,#e5e7eb);--devic-cmd-radius:var(--devic-cmd-radius-override,12px);--devic-cmd-shadow:var(--devic-cmd-shadow-override,0 4px 20px rgba(0,0,0,.1));--devic-cmd-primary:var(--devic-cmd-primary-override,#3b82f6);--devic-cmd-font-family:var(--devic-cmd-font-family-override,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);--devic-cmd-font-size:var(--devic-cmd-font-size-override,14px);--devic-cmd-animation-duration:var(--devic-cmd-animation-duration-override,200ms);color:var(--devic-cmd-text);display:flex;flex-direction:column;font-family:var(--devic-cmd-font-family);font-size:var(--devic-cmd-font-size);gap:8px;max-width:100%;width:400px}.devic-command-bar-container[data-position=fixed]{position:fixed}.devic-command-bar-container[data-position=inline]{position:relative}.devic-command-bar-container[data-visible=false]{opacity:0;pointer-events:none;transform:translateY(8px)}.devic-command-bar-container[data-visible=false],.devic-command-bar-container[data-visible=true]{transition:opacity var(--devic-cmd-animation-duration) ease,transform var(--devic-cmd-animation-duration) ease}.devic-command-bar-container[data-visible=true]{opacity:1;transform:translateY(0)}.devic-command-bar{align-items:center;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);display:flex;gap:12px;padding:12px 16px}.devic-command-bar-icon{align-items:center;color:var(--devic-cmd-text-secondary);display:flex;flex-shrink:0;height:20px;justify-content:center;width:20px}.devic-command-bar-icon svg{height:100%;width:100%}.devic-command-bar-input{background:transparent;border:none;color:inherit;flex:1;font-family:inherit;font-size:inherit;min-width:0;outline:none}.devic-command-bar-input::placeholder{color:var(--devic-cmd-text-secondary)}.devic-command-bar-summary{animation:devic-cmd-pulse 1.5s ease-in-out infinite;color:var(--devic-cmd-text-secondary);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes devic-cmd-pulse{0%,to{opacity:1}50%{opacity:.6}}.devic-command-bar-shortcut{background:var(--devic-cmd-border);border-radius:6px;color:var(--devic-cmd-text-secondary);flex-shrink:0;font-size:12px;font-weight:500;letter-spacing:.5px;padding:4px 8px}.devic-command-bar-spinner{animation:devic-cmd-spin .8s linear infinite;border:2px solid var(--devic-cmd-border);border-radius:50%;border-top-color:var(--devic-cmd-primary);height:20px;width:20px}@keyframes devic-cmd-spin{to{transform:rotate(1turn)}}.devic-command-bar-result{animation:devic-cmd-slide-up .2s ease-out;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);overflow:hidden}@keyframes devic-cmd-slide-up{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.devic-command-bar-result-tools{border-bottom:1px solid var(--devic-cmd-border)}.devic-command-bar-result-tools-header{align-items:center;color:var(--devic-cmd-text-secondary);cursor:pointer;display:flex;font-size:13px;gap:8px;padding:10px 14px;transition:background .15s ease;user-select:none}.devic-command-bar-result-tools-header:hover{background:rgba(0,0,0,.02)}.devic-command-bar-result-tools-chevron{height:16px;transition:transform .2s ease;width:16px}.devic-command-bar-result-tools-header[data-expanded=true] .devic-command-bar-result-tools-chevron{transform:rotate(90deg)}.devic-command-bar-result-tools-count{align-items:center;background:var(--devic-cmd-primary);border-radius:10px;color:#fff;display:inline-flex;font-size:11px;font-weight:600;height:20px;justify-content:center;min-width:20px;padding:0 6px}.devic-command-bar-result-tools-list{display:flex;flex-direction:column;gap:6px;padding:8px 14px 12px}.devic-command-bar-result-tools-list[data-expanded=false]{display:none}.devic-command-bar-result-tool-item{align-items:center;background:rgba(0,0,0,.02);border-radius:6px;display:flex;font-size:12px;gap:8px;padding:6px 10px}.devic-command-bar-result-tool-icon{color:#10b981;height:14px;width:14px}.devic-command-bar-result-tool-name{color:var(--devic-cmd-text-secondary)}.devic-command-bar-result-message{line-height:1.5;max-height:300px;overflow-y:auto;padding:14px}.devic-command-bar-result-message::-webkit-scrollbar{width:6px}.devic-command-bar-result-message::-webkit-scrollbar-track{background:transparent}.devic-command-bar-result-message::-webkit-scrollbar-thumb{background:var(--devic-cmd-border);border-radius:3px}.devic-command-bar-error{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--devic-cmd-radius);color:#dc2626;font-size:13px;padding:10px 14px}.devic-command-bar-result-empty{color:var(--devic-cmd-text-secondary);font-size:13px;padding:14px;text-align:center}.devic-command-bar-dropdown{animation:devic-cmd-slide-up .2s ease-out;background:var(--devic-cmd-bg);border:1px solid var(--devic-cmd-border);border-radius:var(--devic-cmd-radius);box-shadow:var(--devic-cmd-shadow);overflow:hidden}.devic-command-bar-dropdown-header{align-items:center;border-bottom:1px solid var(--devic-cmd-border);color:var(--devic-cmd-text-secondary);display:flex;font-size:12px;font-weight:600;justify-content:space-between;letter-spacing:.5px;padding:10px 14px;text-transform:uppercase}.devic-command-bar-dropdown-hint{align-items:center;display:flex;font-weight:400;gap:4px;letter-spacing:0;text-transform:none}.devic-command-bar-dropdown-hint kbd{align-items:center;background:var(--devic-cmd-border);border-radius:4px;display:inline-flex;font-family:inherit;font-size:10px;height:18px;justify-content:center;min-width:18px;padding:0 4px}.devic-command-bar-dropdown-clear{background:none;border:none;border-radius:4px;color:var(--devic-cmd-primary);cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;letter-spacing:0;padding:2px 6px;text-transform:none}.devic-command-bar-dropdown-clear:hover{background:rgba(0,0,0,.05)}.devic-command-bar-dropdown-list{max-height:250px;overflow-y:auto}.devic-command-bar-dropdown-list::-webkit-scrollbar{width:6px}.devic-command-bar-dropdown-list::-webkit-scrollbar-track{background:transparent}.devic-command-bar-dropdown-list::-webkit-scrollbar-thumb{background:var(--devic-cmd-border);border-radius:3px}.devic-command-bar-dropdown-item{align-items:center;cursor:pointer;display:flex;gap:10px;padding:10px 14px;transition:background .15s ease}.devic-command-bar-dropdown-item:hover,.devic-command-bar-dropdown-item[data-selected=true]{background:rgba(0,0,0,.04)}.devic-command-bar-dropdown-item[data-selected=true]{background:var(--devic-cmd-primary);background:rgba(59,130,246,.1)}.devic-command-bar-dropdown-icon{align-items:center;color:var(--devic-cmd-text-secondary);display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.devic-command-bar-dropdown-keyword{color:var(--devic-cmd-text);flex-shrink:0;font-weight:600}.devic-command-bar-dropdown-desc{color:var(--devic-cmd-text-secondary);flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-command-bar-dropdown-empty{color:var(--devic-cmd-text-secondary);font-size:13px;padding:20px 14px;text-align:center}.devic-command-bar-history-item{border-bottom:1px solid rgba(0,0,0,.04)}.devic-command-bar-history-item:last-child{border-bottom:none}.devic-command-bar-history-text{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-gen-container{--devic-gen-primary:var(--devic-gen-primary-override,#3b82f6);--devic-gen-primary-hover:var(--devic-gen-primary-hover-override,#2563eb);--devic-gen-bg:var(--devic-gen-bg-override,#fff);--devic-gen-text:var(--devic-gen-text-override,#1f2937);--devic-gen-text-secondary:var(--devic-gen-text-secondary-override,#6b7280);--devic-gen-border:var(--devic-gen-border-override,#e5e7eb);--devic-gen-radius:var(--devic-gen-radius-override,8px);--devic-gen-font-family:var(--devic-gen-font-family-override,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);--devic-gen-font-size:var(--devic-gen-font-size-override,14px);--devic-gen-z-index:var(--devic-gen-z-index-override,10000);--devic-gen-animation-duration:var(--devic-gen-animation-duration-override,200ms);--devic-gen-modal-bg:var(--devic-gen-modal-bg-override,#fff);--devic-gen-modal-text:var(--devic-gen-modal-text-override,#1f2937);--devic-gen-modal-border:var(--devic-gen-modal-border-override,#e5e7eb);font-family:var(--devic-gen-font-family);font-size:var(--devic-gen-font-size)}.devic-gen-button{align-items:center;border:none;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-weight:500;gap:8px;justify-content:center;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-button:disabled{cursor:not-allowed;opacity:.6}.devic-gen-button[data-size=small]{font-size:12px;padding:6px 12px}.devic-gen-button[data-size=medium]{font-size:14px;padding:8px 16px}.devic-gen-button[data-size=large]{font-size:16px;padding:12px 24px}.devic-gen-button[data-variant=primary]{background:var(--devic-gen-primary);color:#fff}.devic-gen-button[data-variant=primary]:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-button[data-variant=secondary]{background:var(--devic-gen-border);color:var(--devic-gen-text)}.devic-gen-button[data-variant=secondary]:hover:not(:disabled){background:#d1d5db}.devic-gen-button[data-variant=outline]{background:transparent;border:1px solid var(--devic-gen-primary);color:var(--devic-gen-primary)}.devic-gen-button[data-variant=outline]:hover:not(:disabled){background:rgba(59,130,246,.1)}.devic-gen-button[data-variant=ghost]{background:transparent;color:var(--devic-gen-text)}.devic-gen-button[data-variant=ghost]:hover:not(:disabled){background:rgba(0,0,0,.05)}.devic-gen-button-icon{align-items:center;display:flex;height:16px;justify-content:center;width:16px}.devic-gen-button-icon svg{height:100%;width:100%}.devic-gen-spinner{animation:devic-gen-spin .8s linear infinite;border:2px solid;border-radius:50%;border-top:2px solid transparent;height:16px;width:16px}.devic-gen-spinner-small{border-width:1.5px;height:12px;width:12px}@keyframes devic-gen-spin{to{transform:rotate(1turn)}}.devic-gen-input{background:var(--devic-gen-modal-bg);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);color:var(--devic-gen-modal-text);font-family:inherit;font-size:inherit;min-height:80px;outline:none;padding:12px;resize:vertical;transition:border-color var(--devic-gen-animation-duration) ease;width:100%}.devic-gen-input:focus{border-color:var(--devic-gen-primary)}.devic-gen-input::placeholder{color:var(--devic-gen-text-secondary)}.devic-gen-error{background:#fef2f2;border:1px solid #fecaca;border-radius:var(--devic-gen-radius);color:#dc2626;font-size:13px;margin-top:8px;padding:8px 12px}.devic-gen-tooltip{animation:devic-gen-fade-in var(--devic-gen-animation-duration) ease-out;background:var(--devic-gen-modal-bg);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);box-shadow:0 4px 20px rgba(0,0,0,.15);padding:12px}@keyframes devic-gen-fade-in{0%{opacity:0;transform:translateY(4px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}.devic-gen-tooltip[data-placement=left],.devic-gen-tooltip[data-placement=right]{animation-name:devic-gen-fade-in-horizontal}@keyframes devic-gen-fade-in-horizontal{0%{opacity:0;transform:translateX(4px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}.devic-gen-tooltip-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.devic-gen-tooltip-cancel,.devic-gen-tooltip-confirm{align-items:center;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:500;gap:6px;padding:6px 12px;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-tooltip-cancel{background:transparent;border:1px solid var(--devic-gen-modal-border);color:var(--devic-gen-text-secondary)}.devic-gen-tooltip-cancel:hover{background:rgba(0,0,0,.05)}.devic-gen-tooltip-confirm{background:var(--devic-gen-primary);border:none;color:#fff}.devic-gen-tooltip-confirm:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-tooltip-confirm:disabled{cursor:not-allowed;opacity:.6}.devic-gen-modal-overlay{align-items:center;animation:devic-gen-overlay-fade-in var(--devic-gen-animation-duration) ease-out;background:rgba(0,0,0,.5);display:flex;inset:0;justify-content:center;position:fixed;z-index:var(--devic-gen-z-index)}@keyframes devic-gen-overlay-fade-in{0%{opacity:0}to{opacity:1}}.devic-gen-modal{animation:devic-gen-modal-slide-up var(--devic-gen-animation-duration) ease-out;background:var(--devic-gen-modal-bg);border-radius:calc(var(--devic-gen-radius) + 4px);box-shadow:0 20px 50px rgba(0,0,0,.2);margin:16px;max-width:480px;width:100%}@keyframes devic-gen-modal-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.devic-gen-modal-header{align-items:center;border-bottom:1px solid var(--devic-gen-modal-border);display:flex;justify-content:space-between;padding:16px 20px}.devic-gen-modal-title{color:var(--devic-gen-modal-text);font-size:18px;font-weight:600;margin:0}.devic-gen-modal-close{align-items:center;background:transparent;border:none;border-radius:6px;color:var(--devic-gen-text-secondary);cursor:pointer;display:flex;height:32px;justify-content:center;padding:0;transition:all var(--devic-gen-animation-duration) ease;width:32px}.devic-gen-modal-close:hover{background:rgba(0,0,0,.05);color:var(--devic-gen-modal-text)}.devic-gen-modal-description{color:var(--devic-gen-text-secondary);font-size:14px;line-height:1.5;margin:0;padding:12px 20px 0}.devic-gen-modal-body{padding:16px 20px}.devic-gen-modal-footer{border-top:1px solid var(--devic-gen-modal-border);display:flex;gap:12px;justify-content:flex-end;padding:16px 20px}.devic-gen-modal-cancel,.devic-gen-modal-confirm{align-items:center;border-radius:var(--devic-gen-radius);cursor:pointer;display:inline-flex;font-family:inherit;font-size:14px;font-weight:500;gap:8px;padding:10px 20px;transition:all var(--devic-gen-animation-duration) ease}.devic-gen-modal-cancel{background:transparent;border:1px solid var(--devic-gen-modal-border);color:var(--devic-gen-text-secondary)}.devic-gen-modal-cancel:hover{background:rgba(0,0,0,.05);color:var(--devic-gen-modal-text)}.devic-gen-modal-confirm{background:var(--devic-gen-primary);border:none;color:#fff}.devic-gen-modal-confirm:hover:not(:disabled){background:var(--devic-gen-primary-hover)}.devic-gen-modal-confirm:disabled{cursor:not-allowed;opacity:.6}.devic-gen-input::-webkit-scrollbar{width:6px}.devic-gen-input::-webkit-scrollbar-track{background:transparent}.devic-gen-input::-webkit-scrollbar-thumb{background:var(--devic-gen-border);border-radius:3px}.devic-gen-input:disabled{background:var(--devic-gen-border);cursor:not-allowed;opacity:.6}.devic-gen-tool-calls{background:rgba(0,0,0,.02);border:1px solid var(--devic-gen-modal-border);border-radius:var(--devic-gen-radius);display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:10px 12px}.devic-gen-tool-item{align-items:center;color:var(--devic-gen-text-secondary);display:flex;font-size:13px;gap:8px}.devic-gen-tool-item[data-status=executing]{color:var(--devic-gen-primary)}.devic-gen-tool-item[data-status=completed] .devic-gen-tool-icon{color:#10b981}.devic-gen-tool-icon{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.devic-gen-tool-icon svg{height:100%;width:100%}.devic-gen-tool-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-gen-tool-custom{padding:8px 0}.devic-gen-processing-status{align-items:center;background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.2);border-radius:var(--devic-gen-radius);display:flex;gap:8px;margin-bottom:12px;padding:10px 12px}.devic-gen-processing-text{animation:devic-gen-pulse 1.5s ease-in-out infinite;color:var(--devic-gen-primary);font-size:13px}@keyframes devic-gen-pulse{0%,to{opacity:1}50%{opacity:.6}}.devic-aiwrap-container,.devic-aiwrap-tooltip,.devic-aiwrap-trigger-wrapper{--devic-aiwrap-color:#7c3aed;--devic-aiwrap-color-2:#4f46e5;--devic-aiwrap-bg:#fff;--devic-aiwrap-text:#1f2937;--devic-aiwrap-border:#e5e7eb;--devic-aiwrap-shadow:0 8px 24px rgba(0,0,0,.12)}.devic-aiwrap-container[data-highlight=true] .devic-aiwrap-content{background:rgba(124,58,237,.08);border-radius:4px;outline:1px dashed rgba(124,58,237,.45);outline-offset:2px;transition:background .15s ease,outline-color .15s ease}.devic-aiwrap-content{display:inline;transition:background .15s ease}.devic-aiwrap-trigger-wrapper{display:inline-flex}.devic-aiwrap-trigger{align-items:center;background:linear-gradient(90deg,var(--devic-aiwrap-color) 0,var(--devic-aiwrap-color-2) 100%);border:1px solid hsla(0,0%,100%,.25);box-shadow:0 4px 14px rgba(124,58,237,.35);color:#fff;cursor:pointer;display:inline-flex;font-family:inherit;font-size:13px;font-weight:500;gap:6px;padding:6px 12px;transition:transform .12s ease,box-shadow .12s ease;white-space:nowrap}.devic-aiwrap-trigger:hover{box-shadow:0 6px 18px rgba(124,58,237,.45);transform:translateY(-1px)}.devic-aiwrap-trigger:active{transform:translateY(0)}.devic-aiwrap-trigger-icon{align-items:center;display:inline-flex}.devic-aiwrap-trigger-label{line-height:1}.devic-aiwrap-tooltip{background:var(--devic-aiwrap-bg);border:1px solid var(--devic-aiwrap-border);border-radius:12px;box-shadow:var(--devic-aiwrap-shadow);color:var(--devic-aiwrap-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;overflow:hidden}.devic-aiwrap-tooltip-header{align-items:center;background:rgba(124,58,237,.05);border-bottom:1px solid var(--devic-aiwrap-border);display:flex;gap:8px;justify-content:space-between;padding:10px 12px}.devic-aiwrap-tooltip-label{color:var(--devic-aiwrap-color);font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.devic-aiwrap-tooltip-close{align-items:center;background:transparent;border:none;border-radius:4px;color:#6b7280;cursor:pointer;display:inline-flex;padding:2px}.devic-aiwrap-tooltip-close:hover{background:rgba(0,0,0,.06);color:#111827}.devic-aiwrap-tooltip-body{line-height:1.5;max-height:320px;overflow-y:auto;padding:12px}.devic-aiwrap-processing{align-items:center;color:#6b7280;display:flex;font-size:13px;gap:8px}.devic-aiwrap-spinner{animation:devic-aiwrap-spin .7s linear infinite;border:2px solid rgba(124,58,237,.25);border-radius:50%;border-top:2px solid var(--devic-aiwrap-color);flex-shrink:0;height:14px;width:14px}@keyframes devic-aiwrap-spin{to{transform:rotate(1turn)}}.devic-aiwrap-error{color:#dc2626;font-size:13px}.devic-aiwrap-answer{white-space:pre-wrap;word-break:break-word}
|