@4djs/assistant 0.1.0 → 0.1.2

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.
Files changed (90) hide show
  1. package/README.md +138 -3
  2. package/dist/core/chat-activity.d.ts +2 -1
  3. package/dist/core/chat-activity.d.ts.map +1 -1
  4. package/dist/core/chat-commands.d.ts +6 -4
  5. package/dist/core/chat-commands.d.ts.map +1 -1
  6. package/dist/core/chat-history.d.ts.map +1 -1
  7. package/dist/core/chat-reply-suggestions-parse.d.ts.map +1 -1
  8. package/dist/core/create-assistant-store.d.ts +1 -0
  9. package/dist/core/create-assistant-store.d.ts.map +1 -1
  10. package/dist/core/fetch-suggested-prompts.d.ts.map +1 -1
  11. package/dist/core/index.d.ts +10 -2
  12. package/dist/core/index.d.ts.map +1 -1
  13. package/dist/core/index.js +2148 -838
  14. package/dist/core/interactive-tools/choices.d.ts.map +1 -1
  15. package/dist/core/interactive-tools/confirmation.d.ts.map +1 -1
  16. package/dist/core/interactive-tools/execute.d.ts.map +1 -1
  17. package/dist/core/interactive-tools/gate.d.ts +14 -0
  18. package/dist/core/interactive-tools/gate.d.ts.map +1 -0
  19. package/dist/core/interactive-tools/index.d.ts +1 -0
  20. package/dist/core/interactive-tools/index.d.ts.map +1 -1
  21. package/dist/core/interactive-tools/suggestions.d.ts.map +1 -1
  22. package/dist/core/interactive-tools/waiters.d.ts.map +1 -1
  23. package/dist/core/llm-chat.d.ts.map +1 -1
  24. package/dist/core/llm-config.d.ts.map +1 -1
  25. package/dist/core/llm-models.d.ts.map +1 -1
  26. package/dist/core/llm-provider.d.ts.map +1 -1
  27. package/dist/core/llm-settings-storage.d.ts.map +1 -1
  28. package/dist/core/llm-sse.d.ts.map +1 -1
  29. package/dist/core/llm-types.d.ts.map +1 -1
  30. package/dist/core/markdown-utils.d.ts +1 -2
  31. package/dist/core/markdown-utils.d.ts.map +1 -1
  32. package/dist/core/system-prompt.d.ts +3 -0
  33. package/dist/core/system-prompt.d.ts.map +1 -0
  34. package/dist/core/tool-names.d.ts +5 -0
  35. package/dist/core/tool-names.d.ts.map +1 -0
  36. package/dist/core/tool-registry.d.ts +28 -0
  37. package/dist/core/tool-registry.d.ts.map +1 -0
  38. package/dist/core/types.d.ts +5 -2
  39. package/dist/core/types.d.ts.map +1 -1
  40. package/dist/index.js +875 -4161
  41. package/dist/labels.d.ts +136 -0
  42. package/dist/labels.d.ts.map +1 -0
  43. package/dist/react/Assistant.d.ts.map +1 -1
  44. package/dist/react/components/HighlightedJsonCode.d.ts.map +1 -1
  45. package/dist/react/components/MarkdownContent.d.ts.map +1 -1
  46. package/dist/react/components/MarkdownEditor.d.ts.map +1 -1
  47. package/dist/react/components/MermaidDiagram.d.ts.map +1 -1
  48. package/dist/react/components/ModelSelector.d.ts.map +1 -1
  49. package/dist/react/components/chat/AssistantErrorCallout.d.ts +3 -1
  50. package/dist/react/components/chat/AssistantErrorCallout.d.ts.map +1 -1
  51. package/dist/react/components/chat/ChatActivity.d.ts.map +1 -1
  52. package/dist/react/components/chat/ChatComposer.d.ts +3 -1
  53. package/dist/react/components/chat/ChatComposer.d.ts.map +1 -1
  54. package/dist/react/components/chat/ChatEmptyState.d.ts.map +1 -1
  55. package/dist/react/components/chat/ChatInteractivePrompt/choices-prompt.d.ts.map +1 -1
  56. package/dist/react/components/chat/ChatInteractivePrompt/confirmation-prompt.d.ts.map +1 -1
  57. package/dist/react/components/chat/ChatInteractivePrompt/index.d.ts.map +1 -1
  58. package/dist/react/components/chat/ChatInteractivePrompt/shell.d.ts.map +1 -1
  59. package/dist/react/components/chat/ChatMessage.d.ts.map +1 -1
  60. package/dist/react/components/chat/ChatMessageScroll.d.ts.map +1 -1
  61. package/dist/react/components/chat/ChatReplySuggestions.d.ts.map +1 -1
  62. package/dist/react/components/chat/ComposerCommandMenu.d.ts.map +1 -1
  63. package/dist/react/components/chat/LlmSettingsStrip.d.ts.map +1 -1
  64. package/dist/react/components/chat/LlmSetupPrompt.d.ts.map +1 -1
  65. package/dist/react/components/chat/LlmUnavailableBanner.d.ts.map +1 -1
  66. package/dist/react/components/chat/SuggestedPromptsList.d.ts.map +1 -1
  67. package/dist/react/components/chat/SuggestedPromptsStrip.d.ts.map +1 -1
  68. package/dist/react/components/chat/SystemPromptField.d.ts.map +1 -1
  69. package/dist/react/components/highlighted-code.d.ts.map +1 -1
  70. package/dist/react/context.d.ts +4 -2
  71. package/dist/react/context.d.ts.map +1 -1
  72. package/dist/react/hooks/use-composer-commands.d.ts +4 -2
  73. package/dist/react/hooks/use-composer-commands.d.ts.map +1 -1
  74. package/dist/react/hooks/use-suggested-prompts.d.ts +2 -1
  75. package/dist/react/hooks/use-suggested-prompts.d.ts.map +1 -1
  76. package/dist/react/index.d.ts +4 -2
  77. package/dist/react/index.d.ts.map +1 -1
  78. package/dist/react/lib/parse-assistant-error.d.ts +2 -1
  79. package/dist/react/lib/parse-assistant-error.d.ts.map +1 -1
  80. package/dist/react/lib/prompt-icons.d.ts.map +1 -1
  81. package/dist/react/types.d.ts +7 -2
  82. package/dist/react/types.d.ts.map +1 -1
  83. package/dist/react/utils/cn.d.ts.map +1 -1
  84. package/dist/styles.css +1886 -1806
  85. package/dist/tools/datastore.d.ts +28 -0
  86. package/dist/tools/datastore.d.ts.map +1 -0
  87. package/dist/tools/index.d.ts +4 -0
  88. package/dist/tools/index.d.ts.map +1 -0
  89. package/dist/tools/index.js +249 -0
  90. package/package.json +55 -50
package/dist/styles.css CHANGED
@@ -1,475 +1,542 @@
1
1
  .btn {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- gap: 0.5rem;
6
- padding: 0.625rem 1.125rem;
7
- border-radius: var(--radius-base);
8
- font-size: 0.875rem;
9
- font-weight: 500;
10
- font-family: inherit;
11
- border: 1px solid transparent;
12
- cursor: pointer;
13
- transition:
14
- background 180ms ease,
15
- border-color 180ms ease,
16
- color 180ms ease,
17
- transform 120ms ease,
18
- box-shadow 180ms ease;
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ gap: 0.5rem;
6
+ padding: 0.625rem 1.125rem;
7
+ border-radius: var(--radius-base);
8
+ font-size: 0.875rem;
9
+ font-weight: 500;
10
+ font-family: inherit;
11
+ border: 1px solid transparent;
12
+ cursor: pointer;
13
+ transition:
14
+ background 180ms ease,
15
+ border-color 180ms ease,
16
+ color 180ms ease,
17
+ transform 120ms ease,
18
+ box-shadow 180ms ease;
19
19
  }
20
20
  .btn:active:not(:disabled) {
21
- transform: scale(0.98);
21
+ transform: scale(0.98);
22
22
  }
23
23
  .btn:disabled {
24
- opacity: 0.45;
25
- cursor: not-allowed;
24
+ opacity: 0.45;
25
+ cursor: not-allowed;
26
26
  }
27
27
  .btn-primary {
28
- background: var(--brand);
29
- color: var(--brand-on-surface);
30
- box-shadow: var(--btn-primary-shadow);
28
+ background: var(--brand);
29
+ color: var(--brand-on-surface);
30
+ box-shadow: var(--btn-primary-shadow);
31
31
  }
32
32
  .btn-primary:hover:not(:disabled) {
33
- background: var(--brand-medium);
34
- box-shadow: var(--btn-primary-shadow-hover);
33
+ background: var(--brand-medium);
34
+ box-shadow: var(--btn-primary-shadow-hover);
35
35
  }
36
36
  .btn-secondary {
37
- background: var(--overlay-subtle);
38
- color: var(--text-heading);
39
- border-color: var(--border-default-medium);
37
+ background: var(--overlay-subtle);
38
+ color: var(--text-heading);
39
+ border-color: var(--border-default-medium);
40
40
  }
41
41
  .btn-secondary:hover:not(:disabled) {
42
- background: var(--overlay-hover);
43
- border-color: var(--border-default-medium);
42
+ background: var(--overlay-hover);
43
+ border-color: var(--border-default-medium);
44
44
  }
45
45
  .btn-ghost {
46
- background: transparent;
47
- color: var(--text-body);
46
+ background: transparent;
47
+ color: var(--text-body);
48
48
  }
49
49
  .btn-ghost:hover:not(:disabled) {
50
- background: var(--overlay-hover);
51
- color: var(--text-heading);
50
+ background: var(--overlay-hover);
51
+ color: var(--text-heading);
52
52
  }
53
53
  .btn-danger {
54
- background: var(--danger-soft);
55
- color: var(--text-danger);
56
- border-color: var(--border-danger-subtle);
54
+ background: var(--danger-soft);
55
+ color: var(--text-danger);
56
+ border-color: var(--border-danger-subtle);
57
57
  }
58
58
  .btn-danger:hover:not(:disabled) {
59
- background: var(--danger);
60
- color: var(--danger-on-hover);
59
+ background: var(--danger);
60
+ color: var(--danger-on-hover);
61
61
  }
62
62
  .btn-compact {
63
- padding: 0.3125rem 0.625rem;
64
- font-size: 0.6875rem;
65
- font-weight: 600;
66
- border-radius: calc(var(--radius-base) - 2px);
67
- min-height: 1.625rem;
63
+ padding: 0.3125rem 0.625rem;
64
+ font-size: 0.6875rem;
65
+ font-weight: 600;
66
+ border-radius: calc(var(--radius-base) - 2px);
67
+ min-height: 1.625rem;
68
68
  }
69
69
  .btn-danger--solid {
70
- background: var(--danger);
71
- color: var(--danger-on-hover);
72
- border-color: transparent;
73
- box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset;
70
+ background: var(--danger);
71
+ color: var(--danger-on-hover);
72
+ border-color: transparent;
73
+ box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset;
74
74
  }
75
75
  .btn-danger--solid:hover:not(:disabled) {
76
- background: var(--danger-strong);
76
+ background: var(--danger-strong);
77
77
  }
78
78
 
79
79
  .model-selector {
80
- min-width: 0;
80
+ min-width: 0;
81
81
  }
82
82
  .model-selector__field {
83
- position: relative;
84
- width: min(220px, 42vw);
83
+ position: relative;
84
+ width: min(220px, 42vw);
85
85
  }
86
86
  .model-selector__input {
87
- width: 100%;
88
- padding-top: 0.375rem;
89
- padding-bottom: 0.375rem;
90
- font-size: 0.75rem;
87
+ width: 100%;
88
+ padding-top: 0.375rem;
89
+ padding-bottom: 0.375rem;
90
+ font-size: 0.75rem;
91
91
  }
92
92
  .model-selector__list {
93
- position: absolute;
94
- top: calc(100% + 0.375rem);
95
- left: 0;
96
- right: 0;
97
- z-index: 30;
98
- display: flex;
99
- flex-direction: column;
100
- gap: 0.125rem;
101
- max-height: 12rem;
102
- overflow-y: auto;
103
- padding: 0.25rem;
104
- border: 1px solid var(--border-default-medium);
105
- border-radius: var(--radius-base);
106
- background: var(--surface-chat-card);
107
- box-shadow: var(--shadow-sm);
93
+ position: absolute;
94
+ top: calc(100% + 0.375rem);
95
+ left: 0;
96
+ right: 0;
97
+ z-index: 30;
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 0.125rem;
101
+ max-height: 12rem;
102
+ overflow-y: auto;
103
+ padding: 0.25rem;
104
+ border: 1px solid var(--border-default-medium);
105
+ border-radius: var(--radius-base);
106
+ background: var(--surface-chat-card);
107
+ box-shadow: var(--shadow-sm);
108
108
  }
109
109
  .model-selector__option {
110
- display: flex;
111
- align-items: center;
112
- justify-content: space-between;
113
- gap: 0.5rem;
114
- width: 100%;
115
- padding: 0.5rem 0.625rem;
116
- border: none;
117
- border-radius: calc(var(--radius-base) - 2px);
118
- background: transparent;
119
- font: inherit;
120
- text-align: left;
121
- color: var(--text-heading);
122
- cursor: pointer;
110
+ display: flex;
111
+ align-items: center;
112
+ justify-content: space-between;
113
+ gap: 0.5rem;
114
+ width: 100%;
115
+ padding: 0.5rem 0.625rem;
116
+ border: none;
117
+ border-radius: calc(var(--radius-base) - 2px);
118
+ background: transparent;
119
+ font: inherit;
120
+ text-align: left;
121
+ color: var(--text-heading);
122
+ cursor: pointer;
123
123
  }
124
124
  .model-selector__option--active,
125
125
  .model-selector__option:hover {
126
- background: var(--overlay-hover);
126
+ background: var(--overlay-hover);
127
127
  }
128
128
  .model-selector__option-label {
129
- min-width: 0;
130
- overflow: hidden;
131
- text-overflow: ellipsis;
132
- white-space: nowrap;
133
- font-size: 0.75rem;
134
- font-family: "JetBrains Mono", ui-monospace, monospace;
129
+ min-width: 0;
130
+ overflow: hidden;
131
+ text-overflow: ellipsis;
132
+ white-space: nowrap;
133
+ font-size: 0.75rem;
134
+ font-family: "JetBrains Mono", ui-monospace, monospace;
135
135
  }
136
136
  .model-selector__option-hint {
137
- flex-shrink: 0;
138
- font-size: 0.625rem;
139
- font-weight: 600;
140
- letter-spacing: 0.04em;
141
- text-transform: uppercase;
142
- color: var(--text-brand);
137
+ flex-shrink: 0;
138
+ font-size: 0.625rem;
139
+ font-weight: 600;
140
+ letter-spacing: 0.04em;
141
+ text-transform: uppercase;
142
+ color: var(--text-brand);
143
143
  }
144
144
  .markdown-body {
145
- line-height: 1.65;
146
- word-break: break-word;
145
+ line-height: 1.65;
146
+ word-break: break-word;
147
147
  }
148
148
  .markdown-body > :first-child {
149
- margin-top: 0;
149
+ margin-top: 0;
150
150
  }
151
151
  .markdown-body > :last-child {
152
- margin-bottom: 0;
152
+ margin-bottom: 0;
153
153
  }
154
154
  .markdown-body p,
155
155
  .markdown-body ul,
156
156
  .markdown-body ol,
157
157
  .markdown-body pre,
158
158
  .markdown-body blockquote {
159
- margin: 0.625rem 0;
159
+ margin: 0.625rem 0;
160
160
  }
161
161
  .markdown-body h1,
162
162
  .markdown-body h2,
163
163
  .markdown-body h3,
164
164
  .markdown-body h4 {
165
- margin: 0.875rem 0 0.5rem;
166
- font-weight: 600;
167
- color: var(--text-heading);
165
+ margin: 0.875rem 0 0.5rem;
166
+ font-weight: 600;
167
+ color: var(--text-heading);
168
168
  }
169
169
  .markdown-body h1 {
170
- font-size: 1.25rem;
170
+ font-size: 1.25rem;
171
171
  }
172
172
  .markdown-body h2 {
173
- font-size: 1.125rem;
173
+ font-size: 1.125rem;
174
174
  }
175
175
  .markdown-body h3 {
176
- font-size: 1rem;
176
+ font-size: 1rem;
177
177
  }
178
178
  .markdown-body ul,
179
179
  .markdown-body ol {
180
- padding-left: 1.25rem;
180
+ padding-left: 1.25rem;
181
181
  }
182
182
  .markdown-body li + li {
183
- margin-top: 0.25rem;
183
+ margin-top: 0.25rem;
184
184
  }
185
185
  .markdown-body .markdown-pre code.hljs {
186
- padding: 0;
187
- border: none;
188
- background: transparent;
189
- font-size: 0.8125rem;
186
+ padding: 0;
187
+ border: none;
188
+ background: transparent;
189
+ font-size: 0.8125rem;
190
190
  }
191
191
  .markdown-body blockquote {
192
- padding-left: 0.875rem;
193
- border-left: 3px solid var(--border-brand-subtle);
194
- color: var(--text-body-subtle);
192
+ padding-left: 0.875rem;
193
+ border-left: 3px solid var(--border-brand-subtle);
194
+ color: var(--text-body-subtle);
195
195
  }
196
196
  .markdown-body a {
197
- color: var(--text-brand);
198
- text-decoration: underline;
199
- text-underline-offset: 2px;
197
+ color: var(--text-brand);
198
+ text-decoration: underline;
199
+ text-underline-offset: 2px;
200
+ }
201
+
202
+ .markdown-table-wrap {
203
+ margin: 0.625rem 0;
204
+ max-width: 100%;
205
+ overflow-x: auto;
206
+ -webkit-overflow-scrolling: touch;
207
+ border-radius: calc(var(--radius-base) - 2px);
208
+ border: 1px solid var(--border-default);
209
+ background: var(--surface-inset);
210
+ box-shadow: var(--shadow-xs);
211
+ }
212
+
213
+ .markdown-body .markdown-table-wrap table {
214
+ width: max-content;
215
+ min-width: 100%;
216
+ border-collapse: collapse;
217
+ font-size: 0.8125rem;
218
+ line-height: 1.45;
219
+ word-break: normal;
220
+ overflow-wrap: normal;
221
+ }
222
+
223
+ .markdown-body .markdown-table-wrap th,
224
+ .markdown-body .markdown-table-wrap td {
225
+ padding: 0.5rem 0.875rem;
226
+ text-align: left;
227
+ vertical-align: top;
228
+ border-right: 1px solid var(--border-default);
229
+ border-bottom: 1px solid var(--border-default);
230
+ white-space: nowrap;
231
+ }
232
+
233
+ .markdown-body .markdown-table-wrap th:last-child,
234
+ .markdown-body .markdown-table-wrap td:last-child {
235
+ border-right: none;
236
+ }
237
+
238
+ .markdown-body .markdown-table-wrap td:last-child {
239
+ white-space: normal;
240
+ min-width: 10rem;
241
+ max-width: 22rem;
242
+ }
243
+
244
+ .markdown-body .markdown-table-wrap tr:last-child td {
245
+ border-bottom: none;
246
+ }
247
+
248
+ .markdown-body .markdown-table-wrap th {
249
+ position: sticky;
250
+ top: 0;
251
+ z-index: 1;
252
+ font-weight: 600;
253
+ font-size: 0.6875rem;
254
+ letter-spacing: 0.04em;
255
+ text-transform: uppercase;
256
+ color: var(--text-heading);
257
+ background: color-mix(in oklab, var(--surface-panel) 90%, var(--brand) 6%);
258
+ border-bottom: 1px solid var(--border-default-medium);
259
+ }
260
+
261
+ .markdown-body .markdown-table-wrap tbody tr:nth-child(even) td {
262
+ background: color-mix(in oklab, var(--surface-panel) 96%, var(--brand) 2%);
263
+ }
264
+
265
+ .markdown-body .markdown-table-wrap tbody tr:hover td {
266
+ background: var(--overlay-subtle);
200
267
  }
201
268
 
202
269
  .markdown-body pre:has(.markdown-mermaid) {
203
- margin: 0.5rem 0;
204
- padding: 0;
205
- border: none;
206
- background: transparent;
270
+ margin: 0.5rem 0;
271
+ padding: 0;
272
+ border: none;
273
+ background: transparent;
207
274
  }
208
275
 
209
276
  .markdown-body .markdown-pre:not(:has(.markdown-mermaid)) {
210
- overflow-x: auto;
211
- border-radius: calc(var(--radius-base) - 2px);
212
- border: 1px solid var(--border-default);
213
- background: var(--surface-inset);
214
- padding: 0.625rem 0.75rem;
277
+ overflow-x: auto;
278
+ border-radius: calc(var(--radius-base) - 2px);
279
+ border: 1px solid var(--border-default);
280
+ background: var(--surface-inset);
281
+ padding: 0.625rem 0.75rem;
215
282
  }
216
283
 
217
284
  .markdown-body .markdown-inline-code {
218
- font-family:
219
- "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
220
- monospace;
221
- font-size: 0.8125em;
222
- padding: 0.125rem 0.375rem;
223
- border-radius: 0.25rem;
224
- background: var(--surface-code);
225
- border: 1px solid var(--surface-code-border);
285
+ font-family:
286
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
287
+ monospace;
288
+ font-size: 0.8125em;
289
+ padding: 0.125rem 0.375rem;
290
+ border-radius: 0.25rem;
291
+ background: var(--surface-code);
292
+ border: 1px solid var(--surface-code-border);
226
293
  }
227
294
 
228
295
  .markdown-body .katex {
229
- font-size: 1.02em;
230
- color: var(--text-heading);
296
+ font-size: 1.02em;
297
+ color: var(--text-heading);
231
298
  }
232
299
 
233
300
  .markdown-body .katex-display {
234
- margin: 0.625rem 0;
235
- overflow-x: auto;
236
- overflow-y: hidden;
301
+ margin: 0.625rem 0;
302
+ overflow-x: auto;
303
+ overflow-y: hidden;
237
304
  }
238
305
 
239
306
  .markdown-mermaid {
240
- display: block;
241
- overflow-x: auto;
242
- margin: 0.375rem 0;
243
- padding: 0.625rem;
244
- border-radius: calc(var(--radius-base) - 2px);
245
- border: 1px solid var(--border-default-medium);
246
- background: var(--surface-inset);
307
+ display: block;
308
+ overflow-x: auto;
309
+ margin: 0.375rem 0;
310
+ padding: 0.625rem;
311
+ border-radius: calc(var(--radius-base) - 2px);
312
+ border: 1px solid var(--border-default-medium);
313
+ background: var(--surface-inset);
247
314
  }
248
315
 
249
316
  .markdown-mermaid svg {
250
- display: block;
251
- height: auto;
317
+ display: block;
318
+ height: auto;
252
319
  }
253
320
 
254
321
  /* ── Assistant chat (aligned with 4d-ai-agents editor) ── */
255
322
  @keyframes assistant-icon-spin {
256
- to {
257
- transform: rotate(360deg);
258
- }
323
+ to {
324
+ transform: rotate(360deg);
325
+ }
259
326
  }
260
327
 
261
328
  @keyframes assistant-message-in {
262
- from {
263
- opacity: 0;
264
- transform: translateY(6px);
265
- }
266
- to {
267
- opacity: 1;
268
- transform: translateY(0);
269
- }
329
+ from {
330
+ opacity: 0;
331
+ transform: translateY(6px);
332
+ }
333
+ to {
334
+ opacity: 1;
335
+ transform: translateY(0);
336
+ }
270
337
  }
271
338
 
272
339
  @keyframes assistant-typing-bounce {
273
- 0%,
274
- 60%,
275
- 100% {
276
- opacity: 0.35;
277
- transform: translateY(0);
278
- }
279
- 30% {
280
- opacity: 1;
281
- transform: translateY(-2px);
282
- }
340
+ 0%,
341
+ 60%,
342
+ 100% {
343
+ opacity: 0.35;
344
+ transform: translateY(0);
345
+ }
346
+ 30% {
347
+ opacity: 1;
348
+ transform: translateY(-2px);
349
+ }
283
350
  }
284
351
 
285
352
  @keyframes assistant-empty-state-in {
286
- from {
287
- opacity: 0;
288
- transform: translateY(4px);
289
- }
290
- to {
291
- opacity: 1;
292
- transform: translateY(0);
293
- }
353
+ from {
354
+ opacity: 0;
355
+ transform: translateY(4px);
356
+ }
357
+ to {
358
+ opacity: 1;
359
+ transform: translateY(0);
360
+ }
294
361
  }
295
362
 
296
363
  @keyframes assistant-empty-state-glow {
297
- 0%,
298
- 100% {
299
- box-shadow:
300
- 0 0 0 1px var(--border-brand-subtle),
301
- 0 0 20px color-mix(in oklab, var(--brand) 12%, transparent);
302
- }
303
- 50% {
304
- box-shadow:
305
- 0 0 0 1px var(--border-brand-subtle),
306
- 0 0 32px color-mix(in oklab, var(--brand) 22%, transparent);
307
- }
364
+ 0%,
365
+ 100% {
366
+ box-shadow:
367
+ 0 0 0 1px var(--border-brand-subtle),
368
+ 0 0 20px color-mix(in oklab, var(--brand) 12%, transparent);
369
+ }
370
+ 50% {
371
+ box-shadow:
372
+ 0 0 0 1px var(--border-brand-subtle),
373
+ 0 0 32px color-mix(in oklab, var(--brand) 22%, transparent);
374
+ }
308
375
  }
309
376
 
310
377
  @keyframes assistant-empty-state-spin {
311
- to {
312
- transform: rotate(360deg);
313
- }
378
+ to {
379
+ transform: rotate(360deg);
380
+ }
314
381
  }
315
382
 
316
383
  .assistant-message {
317
- width: 100%;
318
- animation: assistant-message-in 0.28s ease-out both;
384
+ width: 100%;
385
+ animation: assistant-message-in 0.28s ease-out both;
319
386
  }
320
387
 
321
388
  .assistant-message-list {
322
- display: flex;
323
- flex-direction: column;
324
- gap: 1rem;
325
- padding: 0.875rem 1rem 0.75rem;
389
+ display: flex;
390
+ flex-direction: column;
391
+ gap: 1rem;
392
+ padding: 0.875rem 1rem 0.75rem;
326
393
  }
327
394
 
328
395
  .assistant-message-list > .assistant-message:last-child {
329
- margin-bottom: 0.125rem;
396
+ margin-bottom: 0.125rem;
330
397
  }
331
398
 
332
399
  .assistant-message--user {
333
- display: flex;
334
- justify-content: flex-end;
400
+ display: flex;
401
+ justify-content: flex-end;
335
402
  }
336
403
 
337
404
  .assistant-message--assistant {
338
- display: block;
405
+ display: block;
339
406
  }
340
407
 
341
408
  .assistant-user-row {
342
- display: flex;
343
- min-width: 0;
344
- max-width: min(100%, 28rem);
345
- margin-left: auto;
346
- align-items: flex-end;
347
- gap: 0.5rem;
409
+ display: flex;
410
+ min-width: 0;
411
+ max-width: min(100%, 28rem);
412
+ margin-left: auto;
413
+ align-items: flex-end;
414
+ gap: 0.5rem;
348
415
  }
349
416
 
350
417
  .assistant-user-bubble {
351
- min-width: 0;
352
- flex: 1 1 auto;
353
- padding: 0.625rem 0.9375rem;
354
- border-radius: 1.125rem 1.125rem 0.375rem 1.125rem;
355
- color: var(--text-on-brand);
356
- background: linear-gradient(
357
- 145deg,
358
- color-mix(in oklab, var(--brand) 92%, white 8%),
359
- color-mix(in oklab, var(--brand) 82%, white 18%)
360
- );
361
- box-shadow:
362
- 0 1px 0 rgb(255 255 255 / 0.2) inset,
363
- 0 10px 28px -14px rgb(0 0 0 / 0.35);
418
+ min-width: 0;
419
+ flex: 1 1 auto;
420
+ padding: 0.625rem 0.9375rem;
421
+ border-radius: 1.125rem 1.125rem 0.375rem 1.125rem;
422
+ color: var(--text-on-brand);
423
+ background: linear-gradient(
424
+ 145deg,
425
+ color-mix(in oklab, var(--brand) 92%, white 8%),
426
+ color-mix(in oklab, var(--brand) 82%, white 18%)
427
+ );
428
+ box-shadow:
429
+ 0 1px 0 rgb(255 255 255 / 0.2) inset,
430
+ 0 10px 28px -14px rgb(0 0 0 / 0.35);
364
431
  }
365
432
 
366
433
  .assistant-user-bubble__text {
367
- margin: 0;
368
- font-size: 0.875rem;
369
- line-height: 1.55;
370
- white-space: pre-wrap;
371
- overflow-wrap: anywhere;
372
- word-break: break-word;
434
+ margin: 0;
435
+ font-size: 0.875rem;
436
+ line-height: 1.55;
437
+ white-space: pre-wrap;
438
+ overflow-wrap: anywhere;
439
+ word-break: break-word;
373
440
  }
374
441
 
375
442
  .assistant-user-avatar,
376
443
  .assistant-bot-avatar {
377
- display: flex;
378
- flex-shrink: 0;
379
- width: 1.75rem;
380
- height: 1.75rem;
381
- align-items: center;
382
- justify-content: center;
383
- border-radius: 9999px;
444
+ display: flex;
445
+ flex-shrink: 0;
446
+ width: 1.75rem;
447
+ height: 1.75rem;
448
+ align-items: center;
449
+ justify-content: center;
450
+ border-radius: 9999px;
384
451
  }
385
452
 
386
453
  .assistant-user-avatar {
387
- align-self: flex-end;
388
- margin-bottom: 0.125rem;
389
- color: var(--brand-on-surface);
390
- background: linear-gradient(
391
- 160deg,
392
- color-mix(in oklab, var(--brand) 75%, white),
393
- color-mix(in oklab, var(--brand) 85%, black)
394
- );
395
- box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent);
454
+ align-self: flex-end;
455
+ margin-bottom: 0.125rem;
456
+ color: var(--brand-on-surface);
457
+ background: linear-gradient(
458
+ 160deg,
459
+ color-mix(in oklab, var(--brand) 75%, white),
460
+ color-mix(in oklab, var(--brand) 85%, black)
461
+ );
462
+ box-shadow: 0 0 0 1px color-mix(in oklab, var(--brand) 35%, transparent);
396
463
  }
397
464
 
398
465
  .assistant-bot-avatar {
399
- margin-top: 0.125rem;
400
- color: var(--text-brand);
401
- background: color-mix(in oklab, var(--surface-panel) 88%, var(--brand) 12%);
402
- box-shadow:
403
- 0 0 0 1px var(--border-brand-subtle),
404
- 0 8px 20px -14px color-mix(in oklab, var(--brand) 25%, transparent);
466
+ margin-top: 0.125rem;
467
+ color: var(--text-brand);
468
+ background: color-mix(in oklab, var(--surface-panel) 88%, var(--brand) 12%);
469
+ box-shadow:
470
+ 0 0 0 1px var(--border-brand-subtle),
471
+ 0 8px 20px -14px color-mix(in oklab, var(--brand) 25%, transparent);
405
472
  }
406
473
 
407
474
  .assistant-assistant-row {
408
- display: flex;
409
- min-width: 0;
410
- align-items: flex-start;
411
- gap: 0.625rem;
475
+ display: flex;
476
+ min-width: 0;
477
+ align-items: flex-start;
478
+ gap: 0.625rem;
412
479
  }
413
480
 
414
481
  .assistant-assistant-card {
415
- min-width: 0;
416
- flex: 1;
417
- overflow: hidden;
418
- border-radius: 0.375rem 1.125rem 1.125rem 1.125rem;
419
- border: 1px solid var(--border-default-medium);
420
- background: var(--surface-chat-card);
421
- box-shadow: var(--shadow-xs);
482
+ min-width: 0;
483
+ flex: 1;
484
+ overflow: hidden;
485
+ border-radius: 0.375rem 1.125rem 1.125rem 1.125rem;
486
+ border: 1px solid var(--border-default-medium);
487
+ background: var(--surface-chat-card);
488
+ box-shadow: var(--shadow-xs);
422
489
  }
423
490
 
424
491
  .assistant-assistant-card--error {
425
- border-color: color-mix(
426
- in oklab,
427
- var(--danger) 28%,
428
- var(--border-default-medium)
429
- );
430
- background: color-mix(in oklab, var(--danger) 4%, var(--surface-chat-card));
431
- box-shadow:
432
- inset 3px 0 0 var(--danger),
433
- var(--shadow-xs);
492
+ border-color: color-mix(
493
+ in oklab,
494
+ var(--danger) 28%,
495
+ var(--border-default-medium)
496
+ );
497
+ background: color-mix(in oklab, var(--danger) 4%, var(--surface-chat-card));
498
+ box-shadow:
499
+ inset 3px 0 0 var(--danger),
500
+ var(--shadow-xs);
434
501
  }
435
502
 
436
503
  .assistant-assistant-card__error {
437
- padding: 0.5rem 0.875rem 0.75rem;
504
+ padding: 0.5rem 0.875rem 0.75rem;
438
505
  }
439
506
 
440
507
  .assistant-assistant-card__meta {
441
- display: flex;
442
- align-items: center;
443
- padding: 0.4375rem 0.875rem 0;
508
+ display: flex;
509
+ align-items: center;
510
+ padding: 0.4375rem 0.875rem 0;
444
511
  }
445
512
 
446
513
  .assistant-assistant-card__typing {
447
- padding: 0.625rem 0.875rem 0.75rem;
514
+ padding: 0.625rem 0.875rem 0.75rem;
448
515
  }
449
516
 
450
517
  .assistant-role-label {
451
- display: inline-flex;
452
- align-items: center;
453
- padding: 0.125rem 0.5rem;
454
- border-radius: 9999px;
455
- border: 1px solid var(--border-default-medium);
456
- background: var(--overlay-subtle);
457
- letter-spacing: 0.04em;
458
- text-transform: uppercase;
459
- font-size: 0.625rem;
460
- font-weight: 600;
461
- color: var(--text-chat-secondary);
518
+ display: inline-flex;
519
+ align-items: center;
520
+ padding: 0.125rem 0.5rem;
521
+ border-radius: 9999px;
522
+ border: 1px solid var(--border-default-medium);
523
+ background: var(--overlay-subtle);
524
+ letter-spacing: 0.04em;
525
+ text-transform: uppercase;
526
+ font-size: 0.625rem;
527
+ font-weight: 600;
528
+ color: var(--text-chat-secondary);
462
529
  }
463
530
 
464
531
  .assistant-markdown {
465
- padding: 0.375rem 0.875rem 0.75rem;
466
- color: var(--text-body);
532
+ padding: 0.375rem 0.875rem 0.75rem;
533
+ color: var(--text-body);
467
534
  }
468
535
 
469
536
  .assistant-markdown .markdown-body {
470
- color: var(--text-body);
471
- font-size: 0.875rem;
472
- line-height: 1.6;
537
+ color: var(--text-body);
538
+ font-size: 0.875rem;
539
+ line-height: 1.6;
473
540
  }
474
541
 
475
542
  .assistant-markdown .markdown-body p,
@@ -477,2533 +544,2546 @@
477
544
  .assistant-markdown .markdown-body ol,
478
545
  .assistant-markdown .markdown-body pre,
479
546
  .assistant-markdown .markdown-body blockquote {
480
- margin: 0.375rem 0;
547
+ margin: 0.375rem 0;
481
548
  }
482
549
 
483
550
  .assistant-markdown .markdown-body h1,
484
551
  .assistant-markdown .markdown-body h2,
485
552
  .assistant-markdown .markdown-body h3,
486
553
  .assistant-markdown .markdown-body h4 {
487
- margin: 0.625rem 0 0.25rem;
554
+ margin: 0.625rem 0 0.25rem;
488
555
  }
489
556
 
490
557
  .assistant-markdown .markdown-body h3 {
491
- font-size: 0.9375rem;
558
+ font-size: 0.9375rem;
492
559
  }
493
560
 
494
561
  .assistant-markdown .markdown-body ul,
495
562
  .assistant-markdown .markdown-body ol {
496
- padding-left: 1.125rem;
563
+ padding-left: 1.125rem;
497
564
  }
498
565
 
499
566
  .assistant-markdown .markdown-body li + li {
500
- margin-top: 0.125rem;
567
+ margin-top: 0.125rem;
501
568
  }
502
569
 
503
570
  .assistant-markdown .markdown-body p,
504
571
  .assistant-markdown .markdown-body li,
505
572
  .assistant-markdown .markdown-body td {
506
- color: var(--text-body);
573
+ color: var(--text-body);
574
+ }
575
+
576
+ .assistant-markdown .markdown-table-wrap {
577
+ margin: 0.5rem 0;
578
+ }
579
+
580
+ .assistant-markdown .markdown-body .markdown-table-wrap table {
581
+ font-size: 0.75rem;
582
+ }
583
+
584
+ .assistant-markdown .markdown-body .markdown-table-wrap th,
585
+ .assistant-markdown .markdown-body .markdown-table-wrap td {
586
+ padding: 0.4375rem 0.75rem;
507
587
  }
508
588
 
509
589
  .assistant-markdown .markdown-body strong {
510
- color: var(--text-heading);
590
+ color: var(--text-heading);
511
591
  }
512
592
 
513
593
  .assistant-markdown .markdown-body code.markdown-inline-code {
514
- color: var(--text-heading);
515
- background: var(--surface-code);
516
- border-color: var(--surface-code-border);
594
+ color: var(--text-heading);
595
+ background: var(--surface-code);
596
+ border-color: var(--surface-code-border);
517
597
  }
518
598
 
519
599
  .assistant-markdown > :first-child {
520
- margin-top: 0;
600
+ margin-top: 0;
521
601
  }
522
602
 
523
603
  .assistant-markdown > :last-child {
524
- margin-bottom: 0;
604
+ margin-bottom: 0;
525
605
  }
526
606
 
527
607
  .assistant-markdown__cursor {
528
- display: inline-block;
529
- width: 0.125rem;
530
- height: 1rem;
531
- margin-left: 0.125rem;
532
- vertical-align: middle;
533
- background: var(--accent-violet);
534
- animation: assistant-cursor-pulse 1s ease-in-out infinite;
608
+ display: inline-block;
609
+ width: 0.125rem;
610
+ height: 1rem;
611
+ margin-left: 0.125rem;
612
+ vertical-align: middle;
613
+ background: var(--accent-violet);
614
+ animation: assistant-cursor-pulse 1s ease-in-out infinite;
535
615
  }
536
616
 
537
617
  @keyframes assistant-cursor-pulse {
538
- 0%,
539
- 100% {
540
- opacity: 0.35;
541
- }
542
- 50% {
543
- opacity: 1;
544
- }
618
+ 0%,
619
+ 100% {
620
+ opacity: 0.35;
621
+ }
622
+ 50% {
623
+ opacity: 1;
624
+ }
545
625
  }
546
626
 
547
627
  .assistant-assistant-card .assistant-markdown {
548
- padding-bottom: 0.625rem;
628
+ padding-bottom: 0.625rem;
549
629
  }
550
630
 
551
631
  .assistant-assistant-card
552
- .assistant-markdown:has(+ .assistant-activity--embedded) {
553
- padding-bottom: 0.5rem;
632
+ .assistant-markdown:has(+ .assistant-activity--embedded) {
633
+ padding-bottom: 0.5rem;
554
634
  }
555
635
 
556
636
  .assistant-typing {
557
- display: flex;
558
- align-items: center;
559
- gap: 0.375rem;
560
- padding: 0.125rem 0;
637
+ display: flex;
638
+ align-items: center;
639
+ gap: 0.375rem;
640
+ padding: 0.125rem 0;
561
641
  }
562
642
 
563
643
  .assistant-typing-dot {
564
- width: 0.375rem;
565
- height: 0.375rem;
566
- border-radius: 9999px;
567
- background: color-mix(in oklab, var(--brand) 70%, transparent);
568
- animation: assistant-typing-bounce 1.1s ease-in-out infinite;
644
+ width: 0.375rem;
645
+ height: 0.375rem;
646
+ border-radius: 9999px;
647
+ background: color-mix(in oklab, var(--brand) 70%, transparent);
648
+ animation: assistant-typing-bounce 1.1s ease-in-out infinite;
569
649
  }
570
650
 
571
651
  .assistant-activity {
572
- min-width: 0;
652
+ min-width: 0;
573
653
  }
574
654
 
575
655
  .assistant-activity pre {
576
- margin: 0;
577
- border: none;
578
- background: transparent;
579
- box-shadow: none;
580
- padding: 0;
581
- min-width: 0;
582
- max-width: 100%;
583
- overflow-x: hidden;
584
- white-space: pre-wrap;
585
- overflow-wrap: anywhere;
586
- word-break: break-word;
656
+ margin: 0;
657
+ border: none;
658
+ background: transparent;
659
+ box-shadow: none;
660
+ padding: 0;
661
+ min-width: 0;
662
+ max-width: 100%;
663
+ overflow-x: hidden;
664
+ white-space: pre-wrap;
665
+ overflow-wrap: anywhere;
666
+ word-break: break-word;
587
667
  }
588
668
 
589
669
  .assistant-activity pre .hljs {
590
- background: transparent;
591
- color: var(--log-syntax-base);
592
- white-space: pre-wrap;
593
- overflow-wrap: anywhere;
594
- word-break: break-word;
670
+ background: transparent;
671
+ color: var(--log-syntax-base);
672
+ white-space: pre-wrap;
673
+ overflow-wrap: anywhere;
674
+ word-break: break-word;
595
675
  }
596
676
 
597
677
  .assistant-activity pre .hljs .hljs-attr,
598
678
  .assistant-activity pre .hljs .hljs-property,
599
679
  .assistant-activity pre .hljs .hljs-title {
600
- color: var(--log-syntax-key);
680
+ color: var(--log-syntax-key);
601
681
  }
602
682
 
603
683
  .assistant-activity pre .hljs .hljs-string {
604
- color: var(--log-syntax-string);
684
+ color: var(--log-syntax-string);
605
685
  }
606
686
 
607
687
  .assistant-activity pre .hljs .hljs-number {
608
- color: var(--log-syntax-number);
688
+ color: var(--log-syntax-number);
609
689
  }
610
690
 
611
691
  .assistant-activity pre .hljs .hljs-literal,
612
692
  .assistant-activity pre .hljs .hljs-keyword {
613
- color: var(--log-syntax-literal);
693
+ color: var(--log-syntax-literal);
614
694
  }
615
695
 
616
696
  .assistant-activity pre .hljs .hljs-punctuation {
617
- color: var(--log-syntax-punctuation);
697
+ color: var(--log-syntax-punctuation);
618
698
  }
619
699
 
620
700
  .assistant-activity__live {
621
- display: inline-flex;
622
- align-items: center;
623
- gap: 0.25rem;
624
- font-size: 0.625rem;
625
- font-weight: 500;
626
- color: var(--text-brand);
701
+ display: inline-flex;
702
+ align-items: center;
703
+ gap: 0.25rem;
704
+ font-size: 0.625rem;
705
+ font-weight: 500;
706
+ color: var(--text-brand);
627
707
  }
628
708
 
629
709
  .assistant-activity__live::before {
630
- content: "";
631
- width: 0.375rem;
632
- height: 0.375rem;
633
- border-radius: 9999px;
634
- background: var(--text-brand);
710
+ content: "";
711
+ width: 0.375rem;
712
+ height: 0.375rem;
713
+ border-radius: 9999px;
714
+ background: var(--text-brand);
635
715
  }
636
716
 
637
717
  .assistant-activity--embedded {
638
- background: var(--surface-chat-trace);
639
- overflow: hidden;
718
+ background: var(--surface-chat-trace);
719
+ overflow: hidden;
640
720
  }
641
721
 
642
722
  .assistant-assistant-card .assistant-activity--embedded {
643
- border-top: 1px solid var(--border-default);
723
+ border-top: 1px solid var(--border-default);
644
724
  }
645
725
 
646
726
  .assistant-activity__header {
647
- display: flex;
648
- align-items: center;
649
- gap: 0.375rem;
650
- min-height: 2rem;
651
- border-bottom: 1px solid var(--border-default);
652
- padding: 0.4375rem 0.875rem;
653
- background: color-mix(
654
- in oklab,
655
- var(--surface-chat-trace) 92%,
656
- var(--border-default) 8%
657
- );
727
+ display: flex;
728
+ align-items: center;
729
+ gap: 0.375rem;
730
+ min-height: 2rem;
731
+ border-bottom: 1px solid var(--border-default);
732
+ padding: 0.4375rem 0.875rem;
733
+ background: color-mix(
734
+ in oklab,
735
+ var(--surface-chat-trace) 92%,
736
+ var(--border-default) 8%
737
+ );
658
738
  }
659
739
 
660
740
  .assistant-activity__toggle {
661
- display: flex;
662
- min-width: 0;
663
- flex: 1;
664
- align-items: center;
665
- gap: 0.375rem;
666
- border: none;
667
- background: transparent;
668
- padding: 0;
669
- font: inherit;
670
- text-align: left;
671
- color: inherit;
672
- cursor: pointer;
741
+ display: flex;
742
+ min-width: 0;
743
+ flex: 1;
744
+ align-items: center;
745
+ gap: 0.375rem;
746
+ border: none;
747
+ background: transparent;
748
+ padding: 0;
749
+ font: inherit;
750
+ text-align: left;
751
+ color: inherit;
752
+ cursor: pointer;
673
753
  }
674
754
 
675
755
  .assistant-activity__toggle-chevron {
676
- width: 0.875rem;
677
- height: 0.875rem;
678
- flex-shrink: 0;
679
- color: var(--text-chat-tertiary);
680
- transition:
681
- transform 150ms ease,
682
- color 150ms ease;
756
+ width: 0.875rem;
757
+ height: 0.875rem;
758
+ flex-shrink: 0;
759
+ color: var(--text-chat-tertiary);
760
+ transition:
761
+ transform 150ms ease,
762
+ color 150ms ease;
683
763
  }
684
764
 
685
765
  .assistant-activity__toggle:hover .assistant-activity__toggle-chevron {
686
- color: var(--text-chat-secondary);
766
+ color: var(--text-chat-secondary);
687
767
  }
688
768
 
689
769
  .assistant-activity__toggle-chevron--open {
690
- transform: rotate(90deg);
770
+ transform: rotate(90deg);
691
771
  }
692
772
 
693
773
  .assistant-activity__title {
694
- font-size: 0.625rem;
695
- font-weight: 600;
696
- letter-spacing: 0.04em;
697
- text-transform: uppercase;
698
- color: var(--text-chat-tertiary);
774
+ font-size: 0.625rem;
775
+ font-weight: 600;
776
+ letter-spacing: 0.04em;
777
+ text-transform: uppercase;
778
+ color: var(--text-chat-tertiary);
699
779
  }
700
780
 
701
781
  .assistant-activity__count {
702
- border-radius: 9999px;
703
- background: var(--surface-chip);
704
- padding: 0.0625rem 0.375rem;
705
- font-size: 0.625rem;
706
- font-weight: 500;
707
- color: var(--text-chat-secondary);
708
- font-variant-numeric: tabular-nums;
782
+ border-radius: 9999px;
783
+ background: var(--surface-chip);
784
+ padding: 0.0625rem 0.375rem;
785
+ font-size: 0.625rem;
786
+ font-weight: 500;
787
+ color: var(--text-chat-secondary);
788
+ font-variant-numeric: tabular-nums;
709
789
  }
710
790
 
711
791
  .assistant-activity__steps {
712
- list-style: none;
713
- margin: 0;
714
- padding: 0.375rem 0.875rem 0.625rem;
792
+ list-style: none;
793
+ margin: 0;
794
+ padding: 0.375rem 0.875rem 0.625rem;
715
795
  }
716
796
 
717
797
  .assistant-activity-step {
718
- display: flex;
719
- gap: 0.625rem;
720
- min-width: 0;
798
+ display: flex;
799
+ gap: 0.625rem;
800
+ min-width: 0;
721
801
  }
722
802
 
723
803
  .assistant-activity-step + .assistant-activity-step {
724
- margin-top: 0.125rem;
804
+ margin-top: 0.125rem;
725
805
  }
726
806
 
727
807
  .assistant-activity-step__rail {
728
- display: flex;
729
- width: 1.375rem;
730
- flex-shrink: 0;
731
- flex-direction: column;
732
- align-items: center;
733
- padding-top: 0.0625rem;
808
+ display: flex;
809
+ width: 1.375rem;
810
+ flex-shrink: 0;
811
+ flex-direction: column;
812
+ align-items: center;
813
+ padding-top: 0.0625rem;
734
814
  }
735
815
 
736
816
  .assistant-activity-step__connector {
737
- margin-block: 0.125rem;
738
- width: 1px;
739
- flex: 1;
740
- min-height: 0.375rem;
741
- background: var(--border-default);
817
+ margin-block: 0.125rem;
818
+ width: 1px;
819
+ flex: 1;
820
+ min-height: 0.375rem;
821
+ background: var(--border-default);
742
822
  }
743
823
 
744
824
  .assistant-activity-step__body {
745
- min-width: 0;
746
- flex: 1;
747
- padding-bottom: 0.375rem;
825
+ min-width: 0;
826
+ flex: 1;
827
+ padding-bottom: 0.375rem;
748
828
  }
749
829
 
750
830
  .assistant-activity-step:last-child .assistant-activity-step__body {
751
- padding-bottom: 0;
831
+ padding-bottom: 0;
752
832
  }
753
833
 
754
834
  .assistant-activity-step__header {
755
- display: flex;
756
- width: 100%;
757
- min-height: 1.625rem;
758
- align-items: center;
759
- gap: 0.3125rem;
760
- border: none;
761
- border-radius: 0.4375rem;
762
- background: transparent;
763
- padding: 0.125rem 0.3125rem;
764
- font: inherit;
765
- text-align: left;
766
- color: var(--text-chat-secondary);
767
- cursor: pointer;
768
- transition:
769
- background-color 150ms ease,
770
- color 150ms ease;
835
+ display: flex;
836
+ width: 100%;
837
+ min-height: 1.625rem;
838
+ align-items: center;
839
+ gap: 0.3125rem;
840
+ border: none;
841
+ border-radius: 0.4375rem;
842
+ background: transparent;
843
+ padding: 0.125rem 0.3125rem;
844
+ font: inherit;
845
+ text-align: left;
846
+ color: var(--text-chat-secondary);
847
+ cursor: pointer;
848
+ transition:
849
+ background-color 150ms ease,
850
+ color 150ms ease;
771
851
  }
772
852
 
773
853
  .assistant-activity-step__header:hover {
774
- background: var(--overlay-hover);
775
- color: var(--text-heading);
854
+ background: var(--overlay-hover);
855
+ color: var(--text-heading);
776
856
  }
777
857
 
778
858
  .assistant-activity-step__header--active {
779
- color: var(--text-heading);
859
+ color: var(--text-heading);
780
860
  }
781
861
 
782
862
  .assistant-activity-step__header--static {
783
- cursor: default;
863
+ cursor: default;
784
864
  }
785
865
 
786
866
  .assistant-activity-step__header--static:hover {
787
- background: transparent;
788
- color: var(--text-chat-secondary);
867
+ background: transparent;
868
+ color: var(--text-chat-secondary);
789
869
  }
790
870
 
791
871
  .assistant-activity-step__chevron {
792
- width: 0.875rem;
793
- height: 0.875rem;
794
- flex-shrink: 0;
795
- color: var(--text-chat-tertiary);
796
- transition:
797
- transform 150ms ease,
798
- color 150ms ease;
872
+ width: 0.875rem;
873
+ height: 0.875rem;
874
+ flex-shrink: 0;
875
+ color: var(--text-chat-tertiary);
876
+ transition:
877
+ transform 150ms ease,
878
+ color 150ms ease;
799
879
  }
800
880
 
801
881
  .assistant-activity-step__header:hover .assistant-activity-step__chevron {
802
- color: var(--text-chat-secondary);
882
+ color: var(--text-chat-secondary);
803
883
  }
804
884
 
805
885
  .assistant-activity-step__chevron--open {
806
- transform: rotate(90deg);
886
+ transform: rotate(90deg);
807
887
  }
808
888
 
809
889
  .assistant-activity-step__label {
810
- display: inline-flex;
811
- min-width: 0;
812
- flex: 1;
813
- align-items: center;
814
- gap: 0.25rem;
815
- font-size: 0.75rem;
816
- font-weight: 500;
817
- line-height: 1.25;
890
+ display: inline-flex;
891
+ min-width: 0;
892
+ flex: 1;
893
+ align-items: center;
894
+ gap: 0.25rem;
895
+ font-size: 0.75rem;
896
+ font-weight: 500;
897
+ line-height: 1.25;
818
898
  }
819
899
 
820
900
  .assistant-activity-step__label-text {
821
- overflow: hidden;
822
- text-overflow: ellipsis;
823
- white-space: nowrap;
901
+ overflow: hidden;
902
+ text-overflow: ellipsis;
903
+ white-space: nowrap;
824
904
  }
825
905
 
826
906
  .assistant-activity-step__tool-icon {
827
- width: 0.75rem;
828
- height: 0.75rem;
829
- flex-shrink: 0;
830
- opacity: 0.6;
907
+ width: 0.75rem;
908
+ height: 0.75rem;
909
+ flex-shrink: 0;
910
+ opacity: 0.6;
831
911
  }
832
912
 
833
913
  .assistant-activity-step__details {
834
- margin-top: 0.375rem;
835
- min-width: 0;
836
- border-radius: 0.5rem;
837
- border: 1px solid var(--border-default);
838
- background: var(--surface-chat-card);
839
- padding: 0.375rem 0.5rem;
914
+ margin-top: 0.375rem;
915
+ min-width: 0;
916
+ border-radius: 0.5rem;
917
+ border: 1px solid var(--border-default);
918
+ background: var(--surface-chat-card);
919
+ padding: 0.375rem 0.5rem;
840
920
  }
841
921
 
842
922
  .assistant-activity-step__details--interactive {
843
- border-color: transparent;
844
- background: transparent;
845
- padding: 0;
923
+ border-color: transparent;
924
+ background: transparent;
925
+ padding: 0;
846
926
  }
847
927
 
848
928
  .assistant-activity-step__json-label {
849
- margin: 0 0 0.125rem;
850
- font-size: 0.625rem;
851
- font-weight: 600;
852
- letter-spacing: 0.04em;
853
- text-transform: uppercase;
854
- color: var(--text-chat-tertiary);
929
+ margin: 0 0 0.125rem;
930
+ font-size: 0.625rem;
931
+ font-weight: 600;
932
+ letter-spacing: 0.04em;
933
+ text-transform: uppercase;
934
+ color: var(--text-chat-tertiary);
855
935
  }
856
936
 
857
937
  .assistant-activity-step__json-block {
858
- min-width: 0;
859
- border-radius: 0.375rem;
860
- background: var(--surface-inset);
861
- padding: 0.25rem 0.5rem;
938
+ min-width: 0;
939
+ border-radius: 0.375rem;
940
+ background: var(--surface-inset);
941
+ padding: 0.25rem 0.5rem;
862
942
  }
863
943
 
864
944
  .assistant-activity-step__json-block pre {
865
- max-height: 8rem;
866
- overflow-y: auto;
945
+ max-height: 8rem;
946
+ overflow-y: auto;
867
947
  }
868
948
 
869
949
  .assistant-trace-icon {
870
- display: flex;
871
- width: 1.375rem;
872
- height: 1.375rem;
873
- align-items: center;
874
- justify-content: center;
875
- border-radius: 9999px;
876
- color: var(--text-chat-secondary);
877
- background: var(--overlay-subtle);
878
- box-shadow: 0 0 0 1px var(--border-default);
950
+ display: flex;
951
+ width: 1.375rem;
952
+ height: 1.375rem;
953
+ align-items: center;
954
+ justify-content: center;
955
+ border-radius: 9999px;
956
+ color: var(--text-chat-secondary);
957
+ background: var(--overlay-subtle);
958
+ box-shadow: 0 0 0 1px var(--border-default);
879
959
  }
880
960
 
881
961
  .assistant-trace-icon--active {
882
- color: var(--text-brand);
883
- background: var(--surface-promo);
884
- box-shadow: 0 0 0 1px var(--border-brand-subtle);
962
+ color: var(--text-brand);
963
+ background: var(--surface-promo);
964
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
885
965
  }
886
966
 
887
967
  .assistant-icon-spin {
888
- animation: assistant-icon-spin 0.85s linear infinite;
968
+ animation: assistant-icon-spin 0.85s linear infinite;
889
969
  }
890
970
 
891
971
  .assistant-trace-icon--error {
892
- color: var(--text-danger);
893
- background: var(--danger-soft);
894
- box-shadow: 0 0 0 1px var(--border-danger-subtle);
972
+ color: var(--text-danger);
973
+ background: var(--danger-soft);
974
+ box-shadow: 0 0 0 1px var(--border-danger-subtle);
895
975
  }
896
976
 
897
977
  .assistant-composer {
898
- position: relative;
899
- overflow: visible;
900
- border-radius: 1rem;
901
- border: 1px solid var(--border-default);
902
- background: var(--surface-chat-input);
903
- box-shadow: var(--shadow-xs);
904
- transition:
905
- border-color 150ms,
906
- box-shadow 150ms;
978
+ position: relative;
979
+ overflow: visible;
980
+ border-radius: 1rem;
981
+ border: 1px solid var(--border-default);
982
+ background: var(--surface-chat-input);
983
+ box-shadow: var(--shadow-xs);
984
+ transition:
985
+ border-color 150ms,
986
+ box-shadow 150ms;
907
987
  }
908
988
 
909
989
  .assistant-composer:focus-within {
910
- border-color: var(--border-default-medium);
990
+ border-color: var(--border-default-medium);
911
991
  }
912
992
 
913
993
  .assistant-composer__input-row {
914
- display: flex;
915
- align-items: flex-end;
916
- gap: 0.5rem;
917
- padding: 0.5rem;
994
+ display: flex;
995
+ align-items: flex-end;
996
+ gap: 0.5rem;
997
+ padding: 0.5rem;
918
998
  }
919
999
 
920
1000
  .assistant-composer__textarea {
921
- flex: 1;
922
- min-height: 2.5rem;
923
- max-height: 6rem;
924
- resize: none;
925
- border: none;
926
- background: transparent;
927
- padding: 0.5rem;
928
- font: inherit;
929
- font-size: 0.875rem;
930
- color: var(--text-heading);
931
- outline: none;
932
- box-shadow: none;
1001
+ flex: 1;
1002
+ min-height: 2.5rem;
1003
+ max-height: 6rem;
1004
+ resize: none;
1005
+ border: none;
1006
+ background: transparent;
1007
+ padding: 0.5rem;
1008
+ font: inherit;
1009
+ font-size: 0.875rem;
1010
+ color: var(--text-heading);
1011
+ outline: none;
1012
+ box-shadow: none;
933
1013
  }
934
1014
 
935
1015
  .assistant-composer__textarea:focus,
936
1016
  .assistant-composer__textarea:focus-visible {
937
- outline: none;
938
- box-shadow: none;
1017
+ outline: none;
1018
+ box-shadow: none;
939
1019
  }
940
1020
 
941
1021
  .assistant-composer__textarea::placeholder {
942
- color: var(--text-chat-tertiary);
1022
+ color: var(--text-chat-tertiary);
943
1023
  }
944
1024
 
945
1025
  .assistant-composer__footer {
946
- display: flex;
947
- align-items: center;
948
- justify-content: space-between;
949
- gap: 0.5rem;
950
- border-top: 1px solid var(--border-default);
951
- padding: 0.375rem 0.5rem;
1026
+ display: flex;
1027
+ align-items: center;
1028
+ justify-content: space-between;
1029
+ gap: 0.5rem;
1030
+ border-top: 1px solid var(--border-default);
1031
+ padding: 0.375rem 0.5rem;
952
1032
  }
953
1033
 
954
1034
  .assistant-composer__tools {
955
- display: inline-flex;
956
- flex-shrink: 0;
957
- align-items: center;
958
- gap: 0.125rem;
959
- margin-left: auto;
1035
+ display: inline-flex;
1036
+ flex-shrink: 0;
1037
+ align-items: center;
1038
+ gap: 0.125rem;
1039
+ margin-left: auto;
960
1040
  }
961
1041
 
962
1042
  .assistant-composer__tool {
963
- padding: 0.375rem;
1043
+ padding: 0.375rem;
964
1044
  }
965
1045
 
966
1046
  .assistant-composer__tool-spinner {
967
- animation: assistant-empty-state-spin 0.8s linear infinite;
1047
+ animation: assistant-empty-state-spin 0.8s linear infinite;
968
1048
  }
969
1049
 
970
1050
  .assistant-composer__hint {
971
- margin-top: 0.5rem;
972
- text-align: center;
973
- font-size: 0.6875rem;
974
- color: var(--text-chat-tertiary);
1051
+ margin-top: 0.5rem;
1052
+ text-align: center;
1053
+ font-size: 0.6875rem;
1054
+ color: var(--text-chat-tertiary);
975
1055
  }
976
1056
 
977
1057
  .composer-command-menu {
978
- position: absolute;
979
- bottom: calc(100% + 0.5rem);
980
- left: 0;
981
- z-index: 20;
982
- width: 100%;
983
- min-width: 14rem;
984
- overflow: hidden;
985
- border-radius: 0.75rem;
986
- border: 1px solid var(--border-default-medium);
987
- background: var(--surface-chat-card);
988
- box-shadow: var(--shadow-sm);
1058
+ position: absolute;
1059
+ bottom: calc(100% + 0.5rem);
1060
+ left: 0;
1061
+ z-index: 20;
1062
+ width: 100%;
1063
+ min-width: 14rem;
1064
+ overflow: hidden;
1065
+ border-radius: 0.75rem;
1066
+ border: 1px solid var(--border-default-medium);
1067
+ background: var(--surface-chat-card);
1068
+ box-shadow: var(--shadow-sm);
989
1069
  }
990
1070
 
991
1071
  .composer-command-menu__header {
992
- border-bottom: 1px solid var(--border-default);
993
- padding: 0.5rem 0.75rem;
994
- font-size: 0.625rem;
995
- font-weight: 600;
996
- letter-spacing: 0.04em;
997
- text-transform: uppercase;
998
- color: var(--text-chat-tertiary);
1072
+ border-bottom: 1px solid var(--border-default);
1073
+ padding: 0.5rem 0.75rem;
1074
+ font-size: 0.625rem;
1075
+ font-weight: 600;
1076
+ letter-spacing: 0.04em;
1077
+ text-transform: uppercase;
1078
+ color: var(--text-chat-tertiary);
999
1079
  }
1000
1080
 
1001
1081
  .composer-command-menu__list {
1002
- max-height: 12rem;
1003
- overflow-y: auto;
1004
- padding-block: 0.25rem;
1082
+ max-height: 12rem;
1083
+ overflow-y: auto;
1084
+ padding-block: 0.25rem;
1005
1085
  }
1006
1086
 
1007
1087
  .composer-command-menu__item {
1008
- display: flex;
1009
- width: 100%;
1010
- align-items: flex-start;
1011
- gap: 0.625rem;
1012
- padding: 0.5rem 0.75rem;
1013
- text-align: left;
1014
- color: var(--text-body);
1015
- transition: background-color 150ms;
1088
+ display: flex;
1089
+ width: 100%;
1090
+ align-items: flex-start;
1091
+ gap: 0.625rem;
1092
+ padding: 0.5rem 0.75rem;
1093
+ text-align: left;
1094
+ color: var(--text-body);
1095
+ transition: background-color 150ms;
1016
1096
  }
1017
1097
 
1018
1098
  .composer-command-menu__item:hover,
1019
1099
  .composer-command-menu__item--active {
1020
- background: var(--overlay-hover);
1100
+ background: var(--overlay-hover);
1021
1101
  }
1022
1102
 
1023
1103
  .composer-command-menu__icon {
1024
- margin-top: 0.125rem;
1025
- flex-shrink: 0;
1026
- color: var(--text-chat-tertiary);
1104
+ margin-top: 0.125rem;
1105
+ flex-shrink: 0;
1106
+ color: var(--text-chat-tertiary);
1027
1107
  }
1028
1108
 
1029
1109
  .composer-command-menu__usage {
1030
- display: block;
1031
- font-family: ui-monospace, monospace;
1032
- font-size: 0.75rem;
1033
- font-weight: 500;
1034
- color: var(--text-heading);
1110
+ display: block;
1111
+ font-family: ui-monospace, monospace;
1112
+ font-size: 0.75rem;
1113
+ font-weight: 500;
1114
+ color: var(--text-heading);
1035
1115
  }
1036
1116
 
1037
1117
  .composer-command-menu__description {
1038
- display: block;
1039
- margin-top: 0.125rem;
1040
- font-size: 0.6875rem;
1041
- color: var(--text-chat-secondary);
1118
+ display: block;
1119
+ margin-top: 0.125rem;
1120
+ font-size: 0.6875rem;
1121
+ color: var(--text-chat-secondary);
1042
1122
  }
1043
1123
 
1044
1124
  .assistant-command-error {
1045
- display: flex;
1046
- align-items: flex-start;
1047
- justify-content: space-between;
1048
- gap: 0.5rem;
1049
- margin-bottom: 0.75rem;
1050
- border-radius: var(--radius-base);
1051
- border: 1px solid var(--border-danger-subtle);
1052
- background: var(--danger-soft);
1053
- padding: 0.5rem 0.625rem;
1125
+ display: flex;
1126
+ align-items: flex-start;
1127
+ justify-content: space-between;
1128
+ gap: 0.5rem;
1129
+ margin-bottom: 0.75rem;
1130
+ border-radius: var(--radius-base);
1131
+ border: 1px solid var(--border-danger-subtle);
1132
+ background: var(--danger-soft);
1133
+ padding: 0.5rem 0.625rem;
1054
1134
  }
1055
1135
 
1056
1136
  .assistant-command-error__text {
1057
- min-width: 0;
1058
- font-size: 0.75rem;
1059
- line-height: 1.4;
1060
- color: var(--text-danger);
1137
+ min-width: 0;
1138
+ font-size: 0.75rem;
1139
+ line-height: 1.4;
1140
+ color: var(--text-danger);
1061
1141
  }
1062
1142
 
1063
1143
  .assistant-command-error__dismiss {
1064
- display: flex;
1065
- flex-shrink: 0;
1066
- align-items: center;
1067
- justify-content: center;
1068
- border: none;
1069
- border-radius: 0.375rem;
1070
- background: transparent;
1071
- padding: 0.125rem;
1072
- color: var(--text-danger);
1073
- cursor: pointer;
1144
+ display: flex;
1145
+ flex-shrink: 0;
1146
+ align-items: center;
1147
+ justify-content: center;
1148
+ border: none;
1149
+ border-radius: 0.375rem;
1150
+ background: transparent;
1151
+ padding: 0.125rem;
1152
+ color: var(--text-danger);
1153
+ cursor: pointer;
1074
1154
  }
1075
1155
 
1076
1156
  .assistant-command-error__dismiss:hover {
1077
- background: color-mix(in oklab, var(--danger) 12%, transparent);
1157
+ background: color-mix(in oklab, var(--danger) 12%, transparent);
1078
1158
  }
1079
1159
 
1080
1160
  .assistant-llm-setup {
1081
- border-radius: var(--radius-base);
1082
- border: 1px solid var(--border-brand-subtle, var(--border-default-medium));
1083
- background: color-mix(in oklab, var(--brand) 5%, var(--overlay-subtle));
1161
+ border-radius: var(--radius-base);
1162
+ border: 1px solid var(--border-brand-subtle, var(--border-default-medium));
1163
+ background: color-mix(in oklab, var(--brand) 5%, var(--overlay-subtle));
1084
1164
  }
1085
1165
 
1086
1166
  .assistant-llm-setup--banner {
1087
- margin-bottom: 0.625rem;
1088
- padding: 0.5rem 0.625rem;
1167
+ margin-bottom: 0.625rem;
1168
+ padding: 0.5rem 0.625rem;
1089
1169
  }
1090
1170
 
1091
1171
  .assistant-llm-setup__row {
1092
- display: flex;
1093
- align-items: center;
1094
- gap: 0.5rem;
1095
- min-width: 0;
1172
+ display: flex;
1173
+ align-items: center;
1174
+ gap: 0.5rem;
1175
+ min-width: 0;
1096
1176
  }
1097
1177
 
1098
1178
  .assistant-llm-setup__badge {
1099
- display: inline-flex;
1100
- flex-shrink: 0;
1101
- align-items: center;
1102
- justify-content: center;
1103
- width: 1.375rem;
1104
- height: 1.375rem;
1105
- border-radius: 999px;
1106
- background: color-mix(in oklab, var(--brand) 12%, transparent);
1107
- color: var(--text-brand-strong, var(--text-brand));
1179
+ display: inline-flex;
1180
+ flex-shrink: 0;
1181
+ align-items: center;
1182
+ justify-content: center;
1183
+ width: 1.375rem;
1184
+ height: 1.375rem;
1185
+ border-radius: 999px;
1186
+ background: color-mix(in oklab, var(--brand) 12%, transparent);
1187
+ color: var(--text-brand-strong, var(--text-brand));
1108
1188
  }
1109
1189
 
1110
1190
  .assistant-llm-setup__copy {
1111
- min-width: 0;
1112
- flex: 1;
1113
- margin: 0;
1114
- font-size: 0.75rem;
1115
- line-height: 1.45;
1116
- color: var(--text-body-subtle, var(--text-chat-secondary));
1191
+ min-width: 0;
1192
+ flex: 1;
1193
+ margin: 0;
1194
+ font-size: 0.75rem;
1195
+ line-height: 1.45;
1196
+ color: var(--text-body-subtle, var(--text-chat-secondary));
1117
1197
  }
1118
1198
 
1119
1199
  .assistant-llm-setup .assistant-llm-setup__copy strong {
1120
- font-weight: 600;
1121
- color: var(--text-body-strong, var(--text-body));
1200
+ font-weight: 600;
1201
+ color: var(--text-body-strong, var(--text-body));
1122
1202
  }
1123
1203
 
1124
1204
  .assistant-llm-setup__sep {
1125
- margin-inline: 0.25rem;
1126
- opacity: 0.55;
1205
+ margin-inline: 0.25rem;
1206
+ opacity: 0.55;
1127
1207
  }
1128
1208
 
1129
1209
  .assistant-llm-setup__chip {
1130
- display: inline-flex;
1131
- flex-shrink: 0;
1132
- align-items: center;
1133
- gap: 0.25rem;
1134
- padding: 0.1875rem 0.5rem;
1135
- border: 1px solid var(--border-brand-subtle, var(--border-default-medium));
1136
- border-radius: 999px;
1137
- background: color-mix(in oklab, var(--surface-panel) 88%, var(--brand) 12%);
1138
- color: var(--text-brand-strong, var(--text-brand));
1139
- font-family: inherit;
1140
- font-size: 0.6875rem;
1141
- font-weight: 600;
1142
- line-height: 1.2;
1143
- cursor: pointer;
1144
- transition:
1145
- background 150ms ease,
1146
- border-color 150ms ease;
1210
+ display: inline-flex;
1211
+ flex-shrink: 0;
1212
+ align-items: center;
1213
+ gap: 0.25rem;
1214
+ padding: 0.1875rem 0.5rem;
1215
+ border: 1px solid var(--border-brand-subtle, var(--border-default-medium));
1216
+ border-radius: 999px;
1217
+ background: color-mix(in oklab, var(--surface-panel) 88%, var(--brand) 12%);
1218
+ color: var(--text-brand-strong, var(--text-brand));
1219
+ font-family: inherit;
1220
+ font-size: 0.6875rem;
1221
+ font-weight: 600;
1222
+ line-height: 1.2;
1223
+ cursor: pointer;
1224
+ transition:
1225
+ background 150ms ease,
1226
+ border-color 150ms ease;
1147
1227
  }
1148
1228
 
1149
1229
  .assistant-llm-setup__chip:hover {
1150
- background: color-mix(in oklab, var(--surface-panel) 78%, var(--brand) 22%);
1151
- border-color: var(--border-brand-subtle, var(--border-default));
1230
+ background: color-mix(in oklab, var(--surface-panel) 78%, var(--brand) 22%);
1231
+ border-color: var(--border-brand-subtle, var(--border-default));
1152
1232
  }
1153
1233
 
1154
1234
  .assistant-llm-setup__chip:focus-visible {
1155
- outline: 2px solid var(--border-brand-subtle, var(--border-default));
1156
- outline-offset: 2px;
1235
+ outline: 2px solid var(--border-brand-subtle, var(--border-default));
1236
+ outline-offset: 2px;
1157
1237
  }
1158
1238
 
1159
1239
  .assistant-llm-setup--inline {
1160
- min-width: 0;
1161
- flex: 1;
1162
- padding: 0.625rem 0.75rem;
1163
- border-radius: 0.375rem 1.125rem 1.125rem 1.125rem;
1240
+ min-width: 0;
1241
+ flex: 1;
1242
+ padding: 0.625rem 0.75rem;
1243
+ border-radius: 0.375rem 1.125rem 1.125rem 1.125rem;
1164
1244
  }
1165
1245
 
1166
1246
  .assistant-llm-setup--inline .assistant-llm-setup__copy {
1167
- font-size: 0.8125rem;
1247
+ font-size: 0.8125rem;
1168
1248
  }
1169
1249
 
1170
1250
  .assistant-llm-setup__label {
1171
- font-weight: 600;
1172
- color: var(--text-body-strong, var(--text-body));
1251
+ font-weight: 600;
1252
+ color: var(--text-body-strong, var(--text-body));
1173
1253
  }
1174
1254
 
1175
1255
  .assistant-llm-setup__action {
1176
- display: inline;
1177
- padding: 0;
1178
- border: none;
1179
- background: none;
1180
- color: var(--text-brand-strong, var(--text-brand));
1181
- font-family: inherit;
1182
- font-size: inherit;
1183
- font-weight: 600;
1184
- line-height: inherit;
1185
- text-decoration: underline;
1186
- text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
1187
- text-underline-offset: 0.12em;
1188
- cursor: pointer;
1256
+ display: inline;
1257
+ padding: 0;
1258
+ border: none;
1259
+ background: none;
1260
+ color: var(--text-brand-strong, var(--text-brand));
1261
+ font-family: inherit;
1262
+ font-size: inherit;
1263
+ font-weight: 600;
1264
+ line-height: inherit;
1265
+ text-decoration: underline;
1266
+ text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
1267
+ text-underline-offset: 0.12em;
1268
+ cursor: pointer;
1189
1269
  }
1190
1270
 
1191
1271
  .assistant-llm-setup__action:hover {
1192
- text-decoration-color: currentColor;
1272
+ text-decoration-color: currentColor;
1193
1273
  }
1194
1274
 
1195
1275
  .assistant-llm-setup__action:focus-visible {
1196
- outline: 2px solid var(--border-brand-subtle, var(--border-default));
1197
- outline-offset: 2px;
1198
- border-radius: 0.125rem;
1276
+ outline: 2px solid var(--border-brand-subtle, var(--border-default));
1277
+ outline-offset: 2px;
1278
+ border-radius: 0.125rem;
1199
1279
  }
1200
1280
 
1201
1281
  .assistant-empty-state {
1202
- margin-inline: auto;
1203
- width: 100%;
1204
- max-width: 40rem;
1205
- padding: 1.25rem 1rem 1.5rem;
1206
- display: flex;
1207
- flex-direction: column;
1208
- gap: 1.25rem;
1282
+ margin-inline: auto;
1283
+ width: 100%;
1284
+ max-width: 40rem;
1285
+ padding: 1.25rem 1rem 1.5rem;
1286
+ display: flex;
1287
+ flex-direction: column;
1288
+ gap: 1.25rem;
1209
1289
  }
1210
1290
 
1211
1291
  .assistant-empty-state__card {
1212
- position: relative;
1213
- overflow: hidden;
1214
- border-radius: var(--radius-xl, 1rem);
1215
- border: 1px solid var(--border-default-medium);
1216
- background: var(
1217
- --surface-hero,
1218
- linear-gradient(
1219
- 135deg,
1220
- color-mix(in oklab, var(--surface-panel) 96%, var(--brand) 4%) 0%,
1221
- var(--surface-panel) 100%
1222
- )
1223
- );
1224
- box-shadow:
1225
- var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04)),
1226
- var(
1227
- --shadow-glow,
1228
- 0 0 32px color-mix(in oklab, var(--brand) 8%, transparent)
1229
- );
1230
- backdrop-filter: blur(16px);
1292
+ position: relative;
1293
+ overflow: hidden;
1294
+ border-radius: var(--radius-xl, 1rem);
1295
+ border: 1px solid var(--border-default-medium);
1296
+ background: var(
1297
+ --surface-hero,
1298
+ linear-gradient(
1299
+ 135deg,
1300
+ color-mix(in oklab, var(--surface-panel) 96%, var(--brand) 4%) 0%,
1301
+ var(--surface-panel) 100%
1302
+ )
1303
+ );
1304
+ box-shadow:
1305
+ var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04)),
1306
+ var(
1307
+ --shadow-glow,
1308
+ 0 0 32px color-mix(in oklab, var(--brand) 8%, transparent)
1309
+ );
1310
+ backdrop-filter: blur(16px);
1231
1311
  }
1232
1312
 
1233
1313
  .assistant-empty-state__card-glow {
1234
- position: absolute;
1235
- inset: 0;
1236
- background: var(
1237
- --surface-hero-glow,
1238
- radial-gradient(
1239
- circle at 85% 15%,
1240
- color-mix(in oklab, var(--brand) 12%, transparent),
1241
- transparent 45%
1242
- )
1243
- );
1244
- pointer-events: none;
1314
+ position: absolute;
1315
+ inset: 0;
1316
+ background: var(
1317
+ --surface-hero-glow,
1318
+ radial-gradient(
1319
+ circle at 85% 15%,
1320
+ color-mix(in oklab, var(--brand) 12%, transparent),
1321
+ transparent 45%
1322
+ )
1323
+ );
1324
+ pointer-events: none;
1245
1325
  }
1246
1326
 
1247
1327
  .assistant-empty-state__card-inner {
1248
- position: relative;
1249
- display: flex;
1250
- flex-direction: column;
1251
- align-items: center;
1252
- padding: 1.75rem 1.25rem 1.5rem;
1253
- text-align: center;
1254
- gap: 0.625rem;
1328
+ position: relative;
1329
+ display: flex;
1330
+ flex-direction: column;
1331
+ align-items: center;
1332
+ padding: 1.75rem 1.25rem 1.5rem;
1333
+ text-align: center;
1334
+ gap: 0.625rem;
1255
1335
  }
1256
1336
 
1257
1337
  .assistant-empty-state__eyebrow {
1258
- margin: 0;
1259
- font-size: 0.6875rem;
1260
- font-weight: 600;
1261
- letter-spacing: 0.12em;
1262
- text-transform: uppercase;
1263
- color: var(--text-brand);
1338
+ margin: 0;
1339
+ font-size: 0.6875rem;
1340
+ font-weight: 600;
1341
+ letter-spacing: 0.12em;
1342
+ text-transform: uppercase;
1343
+ color: var(--text-brand);
1264
1344
  }
1265
1345
 
1266
1346
  .assistant-empty-state__icon-ring {
1267
- display: flex;
1268
- width: 3.25rem;
1269
- height: 3.25rem;
1270
- align-items: center;
1271
- justify-content: center;
1272
- margin-block: 0.25rem;
1273
- border-radius: 1rem;
1274
- color: var(--text-brand);
1275
- background: var(--surface-promo);
1276
- animation: assistant-empty-state-glow 4s ease-in-out infinite;
1347
+ display: flex;
1348
+ width: 3.25rem;
1349
+ height: 3.25rem;
1350
+ align-items: center;
1351
+ justify-content: center;
1352
+ margin-block: 0.25rem;
1353
+ border-radius: 1rem;
1354
+ color: var(--text-brand);
1355
+ background: var(--surface-promo);
1356
+ animation: assistant-empty-state-glow 4s ease-in-out infinite;
1277
1357
  }
1278
1358
 
1279
1359
  .assistant-empty-state__title {
1280
- margin: 0;
1281
- font-size: 1.125rem;
1282
- font-weight: 600;
1283
- letter-spacing: -0.02em;
1284
- color: var(--text-heading);
1360
+ margin: 0;
1361
+ font-size: 1.125rem;
1362
+ font-weight: 600;
1363
+ letter-spacing: -0.02em;
1364
+ color: var(--text-heading);
1285
1365
  }
1286
1366
 
1287
1367
  .assistant-empty-state__description {
1288
- margin: 0;
1289
- max-width: 32ch;
1290
- font-size: 0.8125rem;
1291
- line-height: 1.55;
1292
- color: var(--text-body-subtle);
1368
+ margin: 0;
1369
+ max-width: 32ch;
1370
+ font-size: 0.8125rem;
1371
+ line-height: 1.55;
1372
+ color: var(--text-body-subtle);
1293
1373
  }
1294
1374
 
1295
1375
  .assistant-empty-state__capabilities {
1296
- display: flex;
1297
- flex-wrap: wrap;
1298
- justify-content: center;
1299
- gap: 0.375rem;
1300
- margin-top: 0.25rem;
1376
+ display: flex;
1377
+ flex-wrap: wrap;
1378
+ justify-content: center;
1379
+ gap: 0.375rem;
1380
+ margin-top: 0.25rem;
1301
1381
  }
1302
1382
 
1303
1383
  .assistant-empty-state__capability {
1304
- display: inline-flex;
1305
- align-items: center;
1306
- gap: 0.375rem;
1307
- padding: 0.3125rem 0.625rem;
1308
- border-radius: 9999px;
1309
- border: 1px solid var(--surface-chip-border, var(--border-default));
1310
- background: var(--surface-chip, var(--overlay-subtle));
1311
- font-size: 0.6875rem;
1312
- font-weight: 500;
1313
- color: var(--text-body);
1384
+ display: inline-flex;
1385
+ align-items: center;
1386
+ gap: 0.375rem;
1387
+ padding: 0.3125rem 0.625rem;
1388
+ border-radius: 9999px;
1389
+ border: 1px solid var(--surface-chip-border, var(--border-default));
1390
+ background: var(--surface-chip, var(--overlay-subtle));
1391
+ font-size: 0.6875rem;
1392
+ font-weight: 500;
1393
+ color: var(--text-body);
1314
1394
  }
1315
1395
 
1316
1396
  .assistant-empty-state__cta {
1317
- display: flex;
1318
- width: 100%;
1319
- align-items: center;
1320
- gap: 0.75rem;
1321
- margin-top: 0.75rem;
1322
- padding: 0.875rem 1rem;
1323
- border-radius: var(--radius-base);
1324
- border: 1px solid var(--border-brand-subtle);
1325
- background: color-mix(in oklab, var(--brand) 6%, var(--surface-panel));
1326
- color: inherit;
1327
- font-family: inherit;
1328
- text-align: left;
1329
- cursor: pointer;
1330
- transition:
1331
- background 180ms ease,
1332
- border-color 180ms ease,
1333
- transform 120ms ease,
1334
- box-shadow 180ms ease;
1397
+ display: flex;
1398
+ width: 100%;
1399
+ align-items: center;
1400
+ gap: 0.75rem;
1401
+ margin-top: 0.75rem;
1402
+ padding: 0.875rem 1rem;
1403
+ border-radius: var(--radius-base);
1404
+ border: 1px solid var(--border-brand-subtle);
1405
+ background: color-mix(in oklab, var(--brand) 6%, var(--surface-panel));
1406
+ color: inherit;
1407
+ font-family: inherit;
1408
+ text-align: left;
1409
+ cursor: pointer;
1410
+ transition:
1411
+ background 180ms ease,
1412
+ border-color 180ms ease,
1413
+ transform 120ms ease,
1414
+ box-shadow 180ms ease;
1335
1415
  }
1336
1416
 
1337
1417
  .assistant-empty-state__cta:hover {
1338
- border-color: color-mix(in oklab, var(--brand) 35%, var(--border-default));
1339
- background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
1340
- transform: translateY(-1px);
1341
- box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
1418
+ border-color: color-mix(in oklab, var(--brand) 35%, var(--border-default));
1419
+ background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
1420
+ transform: translateY(-1px);
1421
+ box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
1342
1422
  }
1343
1423
 
1344
1424
  .assistant-empty-state__cta:active {
1345
- transform: translateY(0);
1425
+ transform: translateY(0);
1346
1426
  }
1347
1427
 
1348
1428
  .assistant-empty-state__cta-icon {
1349
- display: flex;
1350
- width: 2.25rem;
1351
- height: 2.25rem;
1352
- flex-shrink: 0;
1353
- align-items: center;
1354
- justify-content: center;
1355
- border-radius: calc(var(--radius-base) - 2px);
1356
- color: var(--text-brand);
1357
- background: var(--surface-promo);
1358
- box-shadow: 0 0 0 1px var(--border-brand-subtle);
1429
+ display: flex;
1430
+ width: 2.25rem;
1431
+ height: 2.25rem;
1432
+ flex-shrink: 0;
1433
+ align-items: center;
1434
+ justify-content: center;
1435
+ border-radius: calc(var(--radius-base) - 2px);
1436
+ color: var(--text-brand);
1437
+ background: var(--surface-promo);
1438
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
1359
1439
  }
1360
1440
 
1361
1441
  .assistant-empty-state__cta-text {
1362
- min-width: 0;
1363
- flex: 1;
1442
+ min-width: 0;
1443
+ flex: 1;
1364
1444
  }
1365
1445
 
1366
1446
  .assistant-empty-state__cta-label {
1367
- display: block;
1368
- font-size: 0.8125rem;
1369
- font-weight: 600;
1370
- color: var(--text-heading);
1447
+ display: block;
1448
+ font-size: 0.8125rem;
1449
+ font-weight: 600;
1450
+ color: var(--text-heading);
1371
1451
  }
1372
1452
 
1373
1453
  .assistant-empty-state__cta-hint {
1374
- display: block;
1375
- margin-top: 0.125rem;
1376
- font-size: 0.6875rem;
1377
- line-height: 1.4;
1378
- color: var(--text-body-subtle);
1454
+ display: block;
1455
+ margin-top: 0.125rem;
1456
+ font-size: 0.6875rem;
1457
+ line-height: 1.4;
1458
+ color: var(--text-body-subtle);
1379
1459
  }
1380
1460
 
1381
1461
  .assistant-empty-state__section {
1382
- min-width: 0;
1462
+ min-width: 0;
1383
1463
  }
1384
1464
 
1385
1465
  .assistant-empty-state__section-header {
1386
- display: flex;
1387
- align-items: center;
1388
- justify-content: space-between;
1389
- gap: 0.75rem;
1390
- margin-bottom: 0.625rem;
1466
+ display: flex;
1467
+ align-items: center;
1468
+ justify-content: space-between;
1469
+ gap: 0.75rem;
1470
+ margin-bottom: 0.625rem;
1391
1471
  }
1392
1472
 
1393
1473
  .assistant-empty-state__section-title {
1394
- display: inline-flex;
1395
- align-items: center;
1396
- gap: 0.375rem;
1397
- margin: 0;
1398
- font-size: 0.6875rem;
1399
- font-weight: 600;
1400
- letter-spacing: 0.06em;
1401
- text-transform: uppercase;
1402
- color: var(--text-body-subtle);
1474
+ display: inline-flex;
1475
+ align-items: center;
1476
+ gap: 0.375rem;
1477
+ margin: 0;
1478
+ font-size: 0.6875rem;
1479
+ font-weight: 600;
1480
+ letter-spacing: 0.06em;
1481
+ text-transform: uppercase;
1482
+ color: var(--text-body-subtle);
1403
1483
  }
1404
1484
 
1405
1485
  .assistant-empty-state__section-spinner {
1406
- animation: assistant-empty-state-spin 0.8s linear infinite;
1486
+ animation: assistant-empty-state-spin 0.8s linear infinite;
1407
1487
  }
1408
1488
 
1409
1489
  .assistant-empty-state__section-refresh {
1410
- gap: 0.375rem;
1411
- padding-inline: 0.5rem;
1412
- font-size: 0.75rem;
1490
+ gap: 0.375rem;
1491
+ padding-inline: 0.5rem;
1492
+ font-size: 0.75rem;
1413
1493
  }
1414
1494
 
1415
1495
  .assistant-empty-state__hero {
1416
- display: flex;
1417
- flex-direction: column;
1418
- align-items: center;
1419
- gap: 0.75rem;
1420
- text-align: center;
1496
+ display: flex;
1497
+ flex-direction: column;
1498
+ align-items: center;
1499
+ gap: 0.75rem;
1500
+ text-align: center;
1421
1501
  }
1422
1502
 
1423
1503
  .assistant-empty-state__hero-icon {
1424
- display: flex;
1425
- width: 2.5rem;
1426
- height: 2.5rem;
1427
- align-items: center;
1428
- justify-content: center;
1429
- border-radius: 0.875rem;
1430
- color: var(--text-brand);
1431
- background: var(--surface-promo);
1432
- box-shadow: 0 0 0 1px var(--border-brand-subtle);
1504
+ display: flex;
1505
+ width: 2.5rem;
1506
+ height: 2.5rem;
1507
+ align-items: center;
1508
+ justify-content: center;
1509
+ border-radius: 0.875rem;
1510
+ color: var(--text-brand);
1511
+ background: var(--surface-promo);
1512
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
1433
1513
  }
1434
1514
 
1435
1515
  .assistant-empty-state__grid {
1436
- display: grid;
1437
- grid-template-columns: minmax(0, 1fr);
1438
- gap: 0.625rem;
1516
+ display: grid;
1517
+ grid-template-columns: minmax(0, 1fr);
1518
+ gap: 0.625rem;
1439
1519
  }
1440
1520
 
1441
1521
  @media (min-width: 32rem) {
1442
- .assistant-empty-state__grid:not(.assistant-empty-state__grid--compact) {
1443
- grid-template-columns: repeat(2, minmax(0, 1fr));
1444
- }
1522
+ .assistant-empty-state__grid:not(.assistant-empty-state__grid--compact) {
1523
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1524
+ }
1445
1525
  }
1446
1526
 
1447
1527
  .assistant-empty-state__grid--compact {
1448
- margin-top: 0;
1528
+ margin-top: 0;
1449
1529
  }
1450
1530
 
1451
1531
  .assistant-empty-state__actions {
1452
- display: flex;
1453
- justify-content: center;
1454
- margin-top: 1rem;
1532
+ display: flex;
1533
+ justify-content: center;
1534
+ margin-top: 1rem;
1455
1535
  }
1456
1536
 
1457
1537
  .assistant-empty-state__actions--inline {
1458
- margin-top: 0.75rem;
1459
- margin-bottom: -0.25rem;
1538
+ margin-top: 0.75rem;
1539
+ margin-bottom: -0.25rem;
1460
1540
  }
1461
1541
 
1462
1542
  .assistant-empty-state__fetch {
1463
- gap: 0.5rem;
1543
+ gap: 0.5rem;
1464
1544
  }
1465
1545
 
1466
1546
  .assistant-empty-state__refresh {
1467
- font-size: 0.8125rem;
1547
+ font-size: 0.8125rem;
1468
1548
  }
1469
1549
 
1470
1550
  .assistant-error-callout {
1471
- display: flex;
1472
- align-items: flex-start;
1473
- gap: 0.625rem;
1474
- min-width: 0;
1475
- border-radius: var(--radius-base);
1476
- border: 1px solid color-mix(in oklab, var(--danger) 22%, transparent);
1477
- background: color-mix(in oklab, var(--danger) 6%, var(--overlay-subtle));
1551
+ display: flex;
1552
+ align-items: flex-start;
1553
+ gap: 0.625rem;
1554
+ min-width: 0;
1555
+ border-radius: var(--radius-base);
1556
+ border: 1px solid color-mix(in oklab, var(--danger) 22%, transparent);
1557
+ background: color-mix(in oklab, var(--danger) 6%, var(--overlay-subtle));
1478
1558
  }
1479
1559
 
1480
1560
  .assistant-error-callout--embedded {
1481
- padding: 0.625rem 0.75rem;
1561
+ padding: 0.625rem 0.75rem;
1482
1562
  }
1483
1563
 
1484
1564
  .assistant-error-callout--panel {
1485
- margin-top: 0.25rem;
1486
- padding: 0.625rem 0.75rem;
1565
+ margin-top: 0.25rem;
1566
+ padding: 0.625rem 0.75rem;
1487
1567
  }
1488
1568
 
1489
1569
  .assistant-error-callout__badge {
1490
- display: inline-flex;
1491
- flex-shrink: 0;
1492
- align-items: center;
1493
- justify-content: center;
1494
- width: 1.375rem;
1495
- height: 1.375rem;
1496
- border-radius: 999px;
1497
- background: color-mix(in oklab, var(--danger) 14%, transparent);
1498
- color: var(--text-danger);
1570
+ display: inline-flex;
1571
+ flex-shrink: 0;
1572
+ align-items: center;
1573
+ justify-content: center;
1574
+ width: 1.375rem;
1575
+ height: 1.375rem;
1576
+ border-radius: 999px;
1577
+ background: color-mix(in oklab, var(--danger) 14%, transparent);
1578
+ color: var(--text-danger);
1499
1579
  }
1500
1580
 
1501
1581
  .assistant-error-callout__body {
1502
- display: flex;
1503
- min-width: 0;
1504
- flex: 1;
1505
- flex-direction: column;
1506
- gap: 0.125rem;
1582
+ display: flex;
1583
+ min-width: 0;
1584
+ flex: 1;
1585
+ flex-direction: column;
1586
+ gap: 0.125rem;
1507
1587
  }
1508
1588
 
1509
1589
  .assistant-error-callout__title {
1510
- margin: 0;
1511
- font-size: 0.8125rem;
1512
- font-weight: 600;
1513
- line-height: 1.35;
1514
- color: var(--text-body-strong, var(--text-body));
1590
+ margin: 0;
1591
+ font-size: 0.8125rem;
1592
+ font-weight: 600;
1593
+ line-height: 1.35;
1594
+ color: var(--text-body-strong, var(--text-body));
1515
1595
  }
1516
1596
 
1517
1597
  .assistant-error-callout__detail {
1518
- margin: 0;
1519
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1520
- font-size: 0.6875rem;
1521
- line-height: 1.45;
1522
- color: var(--text-danger);
1598
+ margin: 0;
1599
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1600
+ font-size: 0.6875rem;
1601
+ line-height: 1.45;
1602
+ color: var(--text-danger);
1523
1603
  }
1524
1604
 
1525
1605
  .assistant-error-callout__hint {
1526
- margin: 0.125rem 0 0;
1527
- font-size: 0.75rem;
1528
- line-height: 1.45;
1529
- color: var(--text-body-subtle, var(--text-chat-secondary));
1606
+ margin: 0.125rem 0 0;
1607
+ font-size: 0.75rem;
1608
+ line-height: 1.45;
1609
+ color: var(--text-body-subtle, var(--text-chat-secondary));
1530
1610
  }
1531
1611
 
1532
1612
  .assistant-error-callout__chip {
1533
- display: inline-flex;
1534
- flex-shrink: 0;
1535
- align-items: center;
1536
- gap: 0.25rem;
1537
- align-self: center;
1538
- padding: 0.1875rem 0.5rem;
1539
- border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
1540
- border-radius: 999px;
1541
- background: color-mix(in oklab, var(--surface-panel) 90%, var(--danger) 10%);
1542
- color: var(--text-danger);
1543
- font-family: inherit;
1544
- font-size: 0.6875rem;
1545
- font-weight: 600;
1546
- line-height: 1.2;
1547
- cursor: pointer;
1548
- transition:
1549
- background 150ms ease,
1550
- border-color 150ms ease;
1613
+ display: inline-flex;
1614
+ flex-shrink: 0;
1615
+ align-items: center;
1616
+ gap: 0.25rem;
1617
+ align-self: center;
1618
+ padding: 0.1875rem 0.5rem;
1619
+ border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
1620
+ border-radius: 999px;
1621
+ background: color-mix(in oklab, var(--surface-panel) 90%, var(--danger) 10%);
1622
+ color: var(--text-danger);
1623
+ font-family: inherit;
1624
+ font-size: 0.6875rem;
1625
+ font-weight: 600;
1626
+ line-height: 1.2;
1627
+ cursor: pointer;
1628
+ transition:
1629
+ background 150ms ease,
1630
+ border-color 150ms ease;
1551
1631
  }
1552
1632
 
1553
1633
  .assistant-error-callout__chip:hover:not(:disabled) {
1554
- background: color-mix(in oklab, var(--surface-panel) 82%, var(--danger) 18%);
1555
- border-color: color-mix(in oklab, var(--danger) 40%, transparent);
1634
+ background: color-mix(in oklab, var(--surface-panel) 82%, var(--danger) 18%);
1635
+ border-color: color-mix(in oklab, var(--danger) 40%, transparent);
1556
1636
  }
1557
1637
 
1558
1638
  .assistant-error-callout__chip:focus-visible {
1559
- outline: 2px solid color-mix(in oklab, var(--danger) 45%, transparent);
1560
- outline-offset: 2px;
1639
+ outline: 2px solid color-mix(in oklab, var(--danger) 45%, transparent);
1640
+ outline-offset: 2px;
1561
1641
  }
1562
1642
 
1563
1643
  .assistant-error-callout__chip:disabled {
1564
- opacity: 0.55;
1565
- cursor: not-allowed;
1644
+ opacity: 0.55;
1645
+ cursor: not-allowed;
1566
1646
  }
1567
1647
 
1568
1648
  .assistant-suggestions-strip {
1569
- margin-bottom: 0.75rem;
1570
- padding: 0.75rem;
1571
- border-radius: var(--radius-base);
1572
- border: 1px solid var(--border-default);
1573
- background: var(--surface-panel);
1649
+ margin-bottom: 0.75rem;
1650
+ padding: 0.75rem;
1651
+ border-radius: var(--radius-base);
1652
+ border: 1px solid var(--border-default);
1653
+ background: var(--surface-panel);
1574
1654
  }
1575
1655
 
1576
1656
  .assistant-suggestions-strip__header {
1577
- display: flex;
1578
- align-items: center;
1579
- justify-content: space-between;
1580
- gap: 0.5rem;
1581
- margin-bottom: 0.5rem;
1657
+ display: flex;
1658
+ align-items: center;
1659
+ justify-content: space-between;
1660
+ gap: 0.5rem;
1661
+ margin-bottom: 0.5rem;
1582
1662
  }
1583
1663
 
1584
1664
  .assistant-suggestions-strip__title {
1585
- display: inline-flex;
1586
- align-items: center;
1587
- gap: 0.375rem;
1588
- font-size: 0.8125rem;
1589
- font-weight: 600;
1590
- color: var(--text-heading);
1665
+ display: inline-flex;
1666
+ align-items: center;
1667
+ gap: 0.375rem;
1668
+ font-size: 0.8125rem;
1669
+ font-weight: 600;
1670
+ color: var(--text-heading);
1591
1671
  }
1592
1672
 
1593
1673
  .assistant-suggestions-strip__actions {
1594
- display: inline-flex;
1595
- align-items: center;
1596
- gap: 0.25rem;
1674
+ display: inline-flex;
1675
+ align-items: center;
1676
+ gap: 0.25rem;
1597
1677
  }
1598
1678
 
1599
1679
  .assistant-suggestions-strip__refresh {
1600
- gap: 0.375rem;
1601
- font-size: 0.8125rem;
1680
+ gap: 0.375rem;
1681
+ font-size: 0.8125rem;
1602
1682
  }
1603
1683
 
1604
1684
  .assistant-panel__clear {
1605
- padding: 0.5rem;
1685
+ padding: 0.5rem;
1606
1686
  }
1607
1687
 
1608
1688
  .assistant-empty-state__prompt {
1609
- display: flex;
1610
- width: 100%;
1611
- align-items: flex-start;
1612
- gap: 0.625rem;
1613
- padding: 0.875rem;
1614
- border-radius: var(--radius-base);
1615
- border: 1px solid var(--border-default);
1616
- background: var(--surface-panel);
1617
- color: inherit;
1618
- font-family: inherit;
1619
- text-align: left;
1620
- cursor: pointer;
1621
- position: relative;
1622
- transition:
1623
- background 180ms ease,
1624
- border-color 180ms ease,
1625
- transform 120ms ease,
1626
- box-shadow 180ms ease;
1627
- animation: assistant-empty-state-in 0.35s ease-out both;
1689
+ display: flex;
1690
+ width: 100%;
1691
+ align-items: flex-start;
1692
+ gap: 0.625rem;
1693
+ padding: 0.875rem;
1694
+ border-radius: var(--radius-base);
1695
+ border: 1px solid var(--border-default);
1696
+ background: var(--surface-panel);
1697
+ color: inherit;
1698
+ font-family: inherit;
1699
+ text-align: left;
1700
+ cursor: pointer;
1701
+ position: relative;
1702
+ transition:
1703
+ background 180ms ease,
1704
+ border-color 180ms ease,
1705
+ transform 120ms ease,
1706
+ box-shadow 180ms ease;
1707
+ animation: assistant-empty-state-in 0.35s ease-out both;
1628
1708
  }
1629
1709
 
1630
1710
  .assistant-empty-state__prompt:not(
1631
- .assistant-empty-state__prompt--compact
1711
+ .assistant-empty-state__prompt--compact
1632
1712
  ):hover {
1633
- border-color: var(--border-brand-subtle);
1634
- background: color-mix(in oklab, var(--brand) 4%, var(--surface-panel));
1635
- transform: translateY(-2px);
1636
- box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
1713
+ border-color: var(--border-brand-subtle);
1714
+ background: color-mix(in oklab, var(--brand) 4%, var(--surface-panel));
1715
+ transform: translateY(-2px);
1716
+ box-shadow: var(--shadow-sm, 0 1px 2px rgb(0 0 0 / 0.04));
1637
1717
  }
1638
1718
 
1639
1719
  .assistant-empty-state__prompt--compact {
1640
- align-items: center;
1641
- padding: 0.625rem 0.75rem;
1720
+ align-items: center;
1721
+ padding: 0.625rem 0.75rem;
1642
1722
  }
1643
1723
 
1644
1724
  .assistant-empty-state__prompt--compact:hover {
1645
- border-color: var(--border-brand-subtle);
1646
- background: color-mix(in oklab, var(--brand) 4%, var(--surface-panel));
1725
+ border-color: var(--border-brand-subtle);
1726
+ background: color-mix(in oklab, var(--brand) 4%, var(--surface-panel));
1647
1727
  }
1648
1728
 
1649
1729
  .assistant-empty-state__icon {
1650
- display: flex;
1651
- width: 2rem;
1652
- height: 2rem;
1653
- flex-shrink: 0;
1654
- align-items: center;
1655
- justify-content: center;
1656
- border-radius: calc(var(--radius-base) - 2px);
1657
- color: var(--text-brand);
1658
- background: var(--surface-promo);
1659
- box-shadow: 0 0 0 1px var(--border-brand-subtle);
1730
+ display: flex;
1731
+ width: 2rem;
1732
+ height: 2rem;
1733
+ flex-shrink: 0;
1734
+ align-items: center;
1735
+ justify-content: center;
1736
+ border-radius: calc(var(--radius-base) - 2px);
1737
+ color: var(--text-brand);
1738
+ background: var(--surface-promo);
1739
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
1660
1740
  }
1661
1741
 
1662
1742
  .assistant-empty-state__prompt--compact .assistant-empty-state__icon {
1663
- width: 1.75rem;
1664
- height: 1.75rem;
1743
+ width: 1.75rem;
1744
+ height: 1.75rem;
1665
1745
  }
1666
1746
 
1667
1747
  .assistant-scroll-down {
1668
- position: absolute;
1669
- bottom: 0.75rem;
1670
- left: 50%;
1671
- z-index: 10;
1672
- display: flex;
1673
- width: 2.25rem;
1674
- height: 2.25rem;
1675
- align-items: center;
1676
- justify-content: center;
1677
- border-radius: 9999px;
1678
- border: 1px solid var(--border-default);
1679
- background: color-mix(in oklab, var(--surface-panel) 95%, transparent);
1680
- box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
1681
- transform: translateX(-50%);
1682
- cursor: pointer;
1683
- color: var(--text-heading);
1684
- backdrop-filter: blur(8px);
1748
+ position: absolute;
1749
+ bottom: 0.75rem;
1750
+ left: 50%;
1751
+ z-index: 10;
1752
+ display: flex;
1753
+ width: 2.25rem;
1754
+ height: 2.25rem;
1755
+ align-items: center;
1756
+ justify-content: center;
1757
+ border-radius: 9999px;
1758
+ border: 1px solid var(--border-default);
1759
+ background: color-mix(in oklab, var(--surface-panel) 95%, transparent);
1760
+ box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
1761
+ transform: translateX(-50%);
1762
+ cursor: pointer;
1763
+ color: var(--text-heading);
1764
+ backdrop-filter: blur(8px);
1685
1765
  }
1686
1766
 
1687
1767
  .model-selector--footer {
1688
- min-width: 0;
1689
- flex: 1;
1768
+ min-width: 0;
1769
+ flex: 1;
1690
1770
  }
1691
1771
 
1692
1772
  .model-selector--footer .model-selector__field {
1693
- width: 100%;
1694
- max-width: none;
1773
+ width: 100%;
1774
+ max-width: none;
1695
1775
  }
1696
1776
 
1697
1777
  .model-selector--footer .model-selector__input {
1698
- border: none;
1699
- background: transparent;
1700
- padding-top: 0.25rem;
1701
- padding-bottom: 0.25rem;
1702
- font-size: 0.75rem;
1703
- color: var(--text-chat-secondary);
1778
+ border: none;
1779
+ background: transparent;
1780
+ padding-top: 0.25rem;
1781
+ padding-bottom: 0.25rem;
1782
+ font-size: 0.75rem;
1783
+ color: var(--text-chat-secondary);
1704
1784
  }
1705
1785
 
1706
1786
  .model-selector--footer .model-selector__input:focus,
1707
1787
  .model-selector--footer .model-selector__input:focus-visible {
1708
- outline: none;
1709
- box-shadow: none;
1788
+ outline: none;
1789
+ box-shadow: none;
1710
1790
  }
1711
1791
 
1712
1792
  .model-selector--footer .model-selector__list--drop-up {
1713
- top: auto;
1714
- bottom: calc(100% + 0.375rem);
1715
- z-index: 40;
1793
+ top: auto;
1794
+ bottom: calc(100% + 0.375rem);
1795
+ z-index: 40;
1716
1796
  }
1717
1797
 
1718
1798
  /* Interactive confirmation / choices in trace */
1719
1799
  .assistant-interactive-prompt {
1720
- position: relative;
1721
- overflow: clip;
1722
- display: flex;
1723
- flex-direction: column;
1724
- gap: 0.4375rem;
1725
- width: 100%;
1726
- min-width: 0;
1727
- border-radius: var(--radius-base);
1728
- border: 1px solid var(--border-default-medium);
1729
- background: var(--surface-chat-card);
1730
- padding: 0.5rem 0.5625rem 0.5rem 0.625rem;
1731
- font-family: inherit;
1800
+ position: relative;
1801
+ overflow: clip;
1802
+ display: flex;
1803
+ flex-direction: column;
1804
+ gap: 0.4375rem;
1805
+ width: 100%;
1806
+ min-width: 0;
1807
+ border-radius: var(--radius-base);
1808
+ border: 1px solid var(--border-default-medium);
1809
+ background: var(--surface-chat-card);
1810
+ padding: 0.5rem 0.5625rem 0.5rem 0.625rem;
1811
+ font-family: inherit;
1732
1812
  }
1733
1813
 
1734
1814
  .assistant-interactive-prompt::before {
1735
- content: "";
1736
- position: absolute;
1737
- inset-block: 0.3125rem;
1738
- inset-inline-start: 0;
1739
- width: 2px;
1740
- border-radius: 0 9999px 9999px 0;
1741
- background: var(--accent-violet);
1815
+ content: "";
1816
+ position: absolute;
1817
+ inset-block: 0.3125rem;
1818
+ inset-inline-start: 0;
1819
+ width: 2px;
1820
+ border-radius: 0 9999px 9999px 0;
1821
+ background: var(--accent-violet);
1742
1822
  }
1743
1823
 
1744
1824
  .assistant-interactive-prompt--caution {
1745
- border-color: color-mix(
1746
- in oklab,
1747
- var(--warning) 30%,
1748
- var(--border-default) 70%
1749
- );
1750
- background: color-mix(
1751
- in oklab,
1752
- var(--warning-soft) 35%,
1753
- var(--surface-chat-card)
1754
- );
1825
+ border-color: color-mix(
1826
+ in oklab,
1827
+ var(--warning) 30%,
1828
+ var(--border-default) 70%
1829
+ );
1830
+ background: color-mix(
1831
+ in oklab,
1832
+ var(--warning-soft) 35%,
1833
+ var(--surface-chat-card)
1834
+ );
1755
1835
  }
1756
1836
 
1757
1837
  .assistant-interactive-prompt--caution::before {
1758
- background: var(--warning);
1838
+ background: var(--warning);
1759
1839
  }
1760
1840
 
1761
1841
  .assistant-interactive-prompt__main {
1762
- display: flex;
1763
- align-items: flex-start;
1764
- gap: 0.4375rem;
1765
- min-width: 0;
1842
+ display: flex;
1843
+ align-items: flex-start;
1844
+ gap: 0.4375rem;
1845
+ min-width: 0;
1766
1846
  }
1767
1847
 
1768
1848
  .assistant-interactive-prompt__icon {
1769
- display: flex;
1770
- width: 1.5rem;
1771
- height: 1.5rem;
1772
- flex-shrink: 0;
1773
- align-items: center;
1774
- justify-content: center;
1775
- border-radius: 0.3125rem;
1776
- color: var(--accent-violet);
1777
- background: color-mix(
1778
- in oklab,
1779
- var(--accent-violet) 12%,
1780
- var(--surface-chip)
1781
- );
1849
+ display: flex;
1850
+ width: 1.5rem;
1851
+ height: 1.5rem;
1852
+ flex-shrink: 0;
1853
+ align-items: center;
1854
+ justify-content: center;
1855
+ border-radius: 0.3125rem;
1856
+ color: var(--accent-violet);
1857
+ background: color-mix(
1858
+ in oklab,
1859
+ var(--accent-violet) 12%,
1860
+ var(--surface-chip)
1861
+ );
1782
1862
  }
1783
1863
 
1784
1864
  .assistant-interactive-prompt__icon--caution {
1785
- color: var(--warning);
1786
- background: var(--warning-soft);
1865
+ color: var(--warning);
1866
+ background: var(--warning-soft);
1787
1867
  }
1788
1868
 
1789
1869
  .assistant-interactive-prompt__content {
1790
- display: flex;
1791
- flex-direction: column;
1792
- gap: 0.1875rem;
1793
- min-width: 0;
1794
- flex: 1;
1870
+ display: flex;
1871
+ flex-direction: column;
1872
+ gap: 0.1875rem;
1873
+ min-width: 0;
1874
+ flex: 1;
1795
1875
  }
1796
1876
 
1797
1877
  .assistant-interactive-prompt__title {
1798
- margin: 0;
1799
- font-size: 0.75rem;
1800
- font-weight: 600;
1801
- line-height: 1.25;
1802
- color: var(--text-heading);
1878
+ margin: 0;
1879
+ font-size: 0.75rem;
1880
+ font-weight: 600;
1881
+ line-height: 1.25;
1882
+ color: var(--text-heading);
1803
1883
  }
1804
1884
 
1805
1885
  .assistant-interactive-prompt__body {
1806
- display: flex;
1807
- flex-direction: column;
1808
- gap: 0.125rem;
1809
- min-width: 0;
1886
+ display: flex;
1887
+ flex-direction: column;
1888
+ gap: 0.125rem;
1889
+ min-width: 0;
1810
1890
  }
1811
1891
 
1812
1892
  .assistant-interactive-prompt__message {
1813
- margin: 0;
1814
- font-size: 0.75rem;
1815
- line-height: 1.4;
1816
- color: var(--text-chat-secondary);
1817
- overflow-wrap: anywhere;
1893
+ margin: 0;
1894
+ font-size: 0.75rem;
1895
+ line-height: 1.4;
1896
+ color: var(--text-chat-secondary);
1897
+ overflow-wrap: anywhere;
1818
1898
  }
1819
1899
 
1820
1900
  .assistant-interactive-prompt__action {
1821
- margin: 0;
1822
- font-size: 0.6875rem;
1823
- font-weight: 600;
1824
- line-height: 1.3;
1825
- color: var(--text-chat-tertiary);
1826
- overflow-wrap: anywhere;
1901
+ margin: 0;
1902
+ font-size: 0.6875rem;
1903
+ font-weight: 600;
1904
+ line-height: 1.3;
1905
+ color: var(--text-chat-tertiary);
1906
+ overflow-wrap: anywhere;
1827
1907
  }
1828
1908
 
1829
1909
  .assistant-interactive-prompt__action--caution {
1830
- color: var(--text-danger);
1910
+ color: var(--text-danger);
1831
1911
  }
1832
1912
 
1833
1913
  .assistant-interactive-prompt__bar {
1834
- display: flex;
1835
- align-items: center;
1836
- justify-content: space-between;
1837
- gap: 0.5rem;
1838
- padding-top: 0.3125rem;
1839
- border-top: 1px solid var(--border-default);
1914
+ display: flex;
1915
+ align-items: center;
1916
+ justify-content: space-between;
1917
+ gap: 0.5rem;
1918
+ padding-top: 0.3125rem;
1919
+ border-top: 1px solid var(--border-default);
1840
1920
  }
1841
1921
 
1842
1922
  .assistant-interactive-prompt--caution .assistant-interactive-prompt__bar {
1843
- border-top-color: color-mix(
1844
- in oklab,
1845
- var(--warning) 15%,
1846
- var(--border-default) 85%
1847
- );
1923
+ border-top-color: color-mix(
1924
+ in oklab,
1925
+ var(--warning) 15%,
1926
+ var(--border-default) 85%
1927
+ );
1848
1928
  }
1849
1929
 
1850
1930
  .assistant-interactive-prompt__hint {
1851
- margin: 0;
1852
- flex-shrink: 0;
1853
- font-size: 0.625rem;
1854
- line-height: 1;
1855
- color: var(--text-chat-tertiary);
1856
- white-space: nowrap;
1931
+ margin: 0;
1932
+ flex-shrink: 0;
1933
+ font-size: 0.625rem;
1934
+ line-height: 1;
1935
+ color: var(--text-chat-tertiary);
1936
+ white-space: nowrap;
1857
1937
  }
1858
1938
 
1859
1939
  .assistant-interactive-prompt__actions {
1860
- display: flex;
1861
- flex-shrink: 0;
1862
- align-items: center;
1863
- gap: 0.3125rem;
1940
+ display: flex;
1941
+ flex-shrink: 0;
1942
+ align-items: center;
1943
+ gap: 0.3125rem;
1864
1944
  }
1865
1945
 
1866
1946
  .assistant-interactive-choice-list {
1867
- display: flex;
1868
- flex-direction: column;
1869
- gap: 0.375rem;
1947
+ display: flex;
1948
+ flex-direction: column;
1949
+ gap: 0.375rem;
1870
1950
  }
1871
1951
 
1872
1952
  .assistant-interactive-choice {
1873
- display: flex;
1874
- cursor: pointer;
1875
- align-items: flex-start;
1876
- gap: 0.4375rem;
1877
- padding: 0.375rem 0.4375rem;
1878
- border-radius: calc(var(--radius-base) - 2px);
1879
- border: 1px solid var(--border-default);
1880
- background: var(--surface-inset);
1881
- transition:
1882
- border-color 150ms ease,
1883
- background-color 150ms ease;
1953
+ display: flex;
1954
+ cursor: pointer;
1955
+ align-items: flex-start;
1956
+ gap: 0.4375rem;
1957
+ padding: 0.375rem 0.4375rem;
1958
+ border-radius: calc(var(--radius-base) - 2px);
1959
+ border: 1px solid var(--border-default);
1960
+ background: var(--surface-inset);
1961
+ transition:
1962
+ border-color 150ms ease,
1963
+ background-color 150ms ease;
1884
1964
  }
1885
1965
 
1886
1966
  .assistant-interactive-choice:hover:not(
1887
- .assistant-interactive-choice--disabled
1967
+ .assistant-interactive-choice--disabled
1888
1968
  ) {
1889
- border-color: var(--border-brand-subtle);
1890
- background: var(--overlay-hover);
1969
+ border-color: var(--border-brand-subtle);
1970
+ background: var(--overlay-hover);
1891
1971
  }
1892
1972
 
1893
1973
  .assistant-interactive-choice--selected {
1894
- border-color: var(--border-brand-subtle);
1895
- background: color-mix(
1896
- in oklab,
1897
- var(--accent-violet) 8%,
1898
- var(--surface-inset)
1899
- );
1974
+ border-color: var(--border-brand-subtle);
1975
+ background: color-mix(
1976
+ in oklab,
1977
+ var(--accent-violet) 8%,
1978
+ var(--surface-inset)
1979
+ );
1900
1980
  }
1901
1981
 
1902
1982
  .assistant-interactive-choice--disabled {
1903
- cursor: not-allowed;
1904
- opacity: 0.55;
1983
+ cursor: not-allowed;
1984
+ opacity: 0.55;
1905
1985
  }
1906
1986
 
1907
1987
  .assistant-interactive-choice__check {
1908
- display: flex;
1909
- width: 1rem;
1910
- height: 1rem;
1911
- flex-shrink: 0;
1912
- margin-top: 0.0625rem;
1913
- align-items: center;
1914
- justify-content: center;
1915
- border-radius: 9999px;
1916
- border: 1px solid var(--border-default-medium);
1917
- background: var(--surface-chip);
1918
- color: var(--modern-primary-deep);
1919
- transition:
1920
- border-color 150ms ease,
1921
- background-color 150ms ease;
1988
+ display: flex;
1989
+ width: 1rem;
1990
+ height: 1rem;
1991
+ flex-shrink: 0;
1992
+ margin-top: 0.0625rem;
1993
+ align-items: center;
1994
+ justify-content: center;
1995
+ border-radius: 9999px;
1996
+ border: 1px solid var(--border-default-medium);
1997
+ background: var(--surface-chip);
1998
+ color: var(--modern-primary-deep);
1999
+ transition:
2000
+ border-color 150ms ease,
2001
+ background-color 150ms ease;
1922
2002
  }
1923
2003
 
1924
2004
  .assistant-interactive-choice__check--on {
1925
- border-color: var(--accent-violet);
1926
- background: var(--accent-violet);
2005
+ border-color: var(--accent-violet);
2006
+ background: var(--accent-violet);
1927
2007
  }
1928
2008
 
1929
2009
  .assistant-interactive-choice__content {
1930
- min-width: 0;
1931
- flex: 1 1 auto;
2010
+ min-width: 0;
2011
+ flex: 1 1 auto;
1932
2012
  }
1933
2013
 
1934
2014
  .assistant-interactive-choice__label {
1935
- display: block;
1936
- font-size: 0.75rem;
1937
- font-weight: 600;
1938
- line-height: 1.35;
1939
- color: var(--text-heading);
1940
- overflow-wrap: anywhere;
2015
+ display: block;
2016
+ font-size: 0.75rem;
2017
+ font-weight: 600;
2018
+ line-height: 1.35;
2019
+ color: var(--text-heading);
2020
+ overflow-wrap: anywhere;
1941
2021
  }
1942
2022
 
1943
2023
  .assistant-interactive-choice__label--mono {
1944
- font-family: ui-monospace, monospace;
1945
- font-size: 0.6875rem;
1946
- letter-spacing: -0.01em;
2024
+ font-family: ui-monospace, monospace;
2025
+ font-size: 0.6875rem;
2026
+ letter-spacing: -0.01em;
1947
2027
  }
1948
2028
 
1949
2029
  .assistant-interactive-choice__description {
1950
- display: block;
1951
- margin-top: 0.1875rem;
1952
- font-size: 0.6875rem;
1953
- line-height: 1.4;
1954
- color: var(--text-chat-tertiary);
1955
- overflow-wrap: anywhere;
2030
+ display: block;
2031
+ margin-top: 0.1875rem;
2032
+ font-size: 0.6875rem;
2033
+ line-height: 1.4;
2034
+ color: var(--text-chat-tertiary);
2035
+ overflow-wrap: anywhere;
1956
2036
  }
1957
2037
 
1958
2038
  .assistant-interactive-kbd {
1959
- display: inline-flex;
1960
- min-width: 1.25rem;
1961
- align-items: center;
1962
- justify-content: center;
1963
- flex-shrink: 0;
1964
- margin-top: 0.0625rem;
1965
- border-radius: 0.375rem;
1966
- border: 1px solid var(--border-default-medium);
1967
- background: var(--surface-chat-card);
1968
- padding: 0.0625rem 0.375rem;
1969
- font-family: ui-monospace, monospace;
1970
- font-size: 0.625rem;
1971
- font-weight: 600;
1972
- line-height: 1.2;
1973
- color: var(--text-chat-tertiary);
1974
- opacity: 0;
1975
- transition: opacity 0.15s ease;
2039
+ display: inline-flex;
2040
+ min-width: 1.25rem;
2041
+ align-items: center;
2042
+ justify-content: center;
2043
+ flex-shrink: 0;
2044
+ margin-top: 0.0625rem;
2045
+ border-radius: 0.375rem;
2046
+ border: 1px solid var(--border-default-medium);
2047
+ background: var(--surface-chat-card);
2048
+ padding: 0.0625rem 0.375rem;
2049
+ font-family: ui-monospace, monospace;
2050
+ font-size: 0.625rem;
2051
+ font-weight: 600;
2052
+ line-height: 1.2;
2053
+ color: var(--text-chat-tertiary);
2054
+ opacity: 0;
2055
+ transition: opacity 0.15s ease;
1976
2056
  }
1977
2057
 
1978
2058
  .assistant-interactive-choice:hover .assistant-interactive-kbd,
1979
2059
  .assistant-interactive-choice--selected .assistant-interactive-kbd {
1980
- opacity: 1;
2060
+ opacity: 1;
1981
2061
  }
1982
2062
 
1983
2063
  .assistant-activity-step--waiting .assistant-trace-icon--active {
1984
- color: var(--warning);
1985
- background: var(--warning-soft);
1986
- box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 30%, transparent);
2064
+ color: var(--warning);
2065
+ background: var(--warning-soft);
2066
+ box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 30%, transparent);
1987
2067
  }
1988
2068
 
1989
2069
  .assistant-activity-step-details--interactive {
1990
- display: flex;
1991
- flex-direction: column;
1992
- gap: 0.625rem;
2070
+ display: flex;
2071
+ flex-direction: column;
2072
+ gap: 0.625rem;
1993
2073
  }
1994
2074
 
1995
2075
  /* Reply suggestions */
1996
2076
  .assistant-reply-suggestions {
1997
- padding: 0.5rem 0.875rem 0.625rem;
2077
+ padding: 0.5rem 0.875rem 0.625rem;
1998
2078
  }
1999
2079
 
2000
2080
  .assistant-assistant-card .assistant-reply-suggestions {
2001
- border-top: 1px solid var(--border-default);
2002
- background: var(--surface-chat-trace);
2081
+ border-top: 1px solid var(--border-default);
2082
+ background: var(--surface-chat-trace);
2003
2083
  }
2004
2084
 
2005
2085
  .assistant-reply-suggestions__panel {
2006
- overflow: clip;
2007
- border-radius: calc(var(--radius-base) - 1px);
2008
- border: 1px solid var(--border-default-medium);
2009
- background: var(--surface-inset);
2086
+ overflow: clip;
2087
+ border-radius: calc(var(--radius-base) - 1px);
2088
+ border: 1px solid var(--border-default-medium);
2089
+ background: var(--surface-inset);
2010
2090
  }
2011
2091
 
2012
2092
  .assistant-reply-suggestions__list {
2013
- display: flex;
2014
- flex-direction: column;
2093
+ display: flex;
2094
+ flex-direction: column;
2015
2095
  }
2016
2096
 
2017
2097
  .assistant-reply-option {
2018
- display: flex;
2019
- width: 100%;
2020
- align-items: center;
2021
- gap: 0.5rem;
2022
- padding: 0.4375rem 0.5rem;
2023
- border: 0;
2024
- border-bottom: 1px solid var(--border-default);
2025
- background: transparent;
2026
- text-align: left;
2027
- cursor: pointer;
2028
- font-family: inherit;
2029
- transition: background-color 120ms ease;
2098
+ display: flex;
2099
+ width: 100%;
2100
+ align-items: center;
2101
+ gap: 0.5rem;
2102
+ padding: 0.4375rem 0.5rem;
2103
+ border: 0;
2104
+ border-bottom: 1px solid var(--border-default);
2105
+ background: transparent;
2106
+ text-align: left;
2107
+ cursor: pointer;
2108
+ font-family: inherit;
2109
+ transition: background-color 120ms ease;
2030
2110
  }
2031
2111
 
2032
2112
  .assistant-reply-option:last-of-type {
2033
- border-bottom: none;
2113
+ border-bottom: none;
2034
2114
  }
2035
2115
 
2036
2116
  .assistant-reply-option:hover:not(:disabled) {
2037
- background: var(--overlay-hover);
2117
+ background: var(--overlay-hover);
2038
2118
  }
2039
2119
 
2040
2120
  .assistant-reply-option__arrow {
2041
- opacity: 0;
2042
- color: var(--text-chat-tertiary);
2043
- transition:
2044
- opacity 120ms ease,
2045
- color 120ms ease;
2121
+ opacity: 0;
2122
+ color: var(--text-chat-tertiary);
2123
+ transition:
2124
+ opacity 120ms ease,
2125
+ color 120ms ease;
2046
2126
  }
2047
2127
 
2048
2128
  .assistant-reply-option:hover:not(:disabled) .assistant-reply-option__arrow {
2049
- opacity: 1;
2050
- color: var(--accent-violet);
2129
+ opacity: 1;
2130
+ color: var(--accent-violet);
2051
2131
  }
2052
2132
 
2053
2133
  .assistant-reply-option:disabled {
2054
- cursor: not-allowed;
2055
- opacity: 0.55;
2134
+ cursor: not-allowed;
2135
+ opacity: 0.55;
2056
2136
  }
2057
2137
 
2058
2138
  .assistant-reply-option--custom {
2059
- border-bottom-style: dashed;
2139
+ border-bottom-style: dashed;
2060
2140
  }
2061
2141
 
2062
2142
  .assistant-reply-option--structured {
2063
- align-items: flex-start;
2064
- padding-block: 0.5rem;
2143
+ align-items: flex-start;
2144
+ padding-block: 0.5rem;
2065
2145
  }
2066
2146
 
2067
2147
  .assistant-reply-option__index {
2068
- display: inline-flex;
2069
- width: 1.125rem;
2070
- height: 1.125rem;
2071
- flex-shrink: 0;
2072
- align-items: center;
2073
- justify-content: center;
2074
- border-radius: 0.3125rem;
2075
- font-size: 0.625rem;
2076
- font-weight: 700;
2077
- font-family: ui-monospace, monospace;
2078
- color: var(--accent-violet);
2079
- background: color-mix(
2080
- in oklab,
2081
- var(--accent-violet) 10%,
2082
- var(--surface-chat-card)
2083
- );
2084
- box-shadow: inset 0 0 0 1px
2085
- color-mix(in oklab, var(--accent-violet) 18%, transparent);
2148
+ display: inline-flex;
2149
+ width: 1.125rem;
2150
+ height: 1.125rem;
2151
+ flex-shrink: 0;
2152
+ align-items: center;
2153
+ justify-content: center;
2154
+ border-radius: 0.3125rem;
2155
+ font-size: 0.625rem;
2156
+ font-weight: 700;
2157
+ font-family: ui-monospace, monospace;
2158
+ color: var(--accent-violet);
2159
+ background: color-mix(
2160
+ in oklab,
2161
+ var(--accent-violet) 10%,
2162
+ var(--surface-chat-card)
2163
+ );
2164
+ box-shadow: inset 0 0 0 1px
2165
+ color-mix(in oklab, var(--accent-violet) 18%, transparent);
2086
2166
  }
2087
2167
 
2088
2168
  .assistant-reply-option__body {
2089
- min-width: 0;
2090
- flex: 1;
2091
- display: flex;
2092
- flex-direction: column;
2093
- gap: 0.125rem;
2169
+ min-width: 0;
2170
+ flex: 1;
2171
+ display: flex;
2172
+ flex-direction: column;
2173
+ gap: 0.125rem;
2094
2174
  }
2095
2175
 
2096
2176
  .assistant-reply-option__label {
2097
- font-size: 0.75rem;
2098
- font-weight: 500;
2099
- line-height: 1.35;
2100
- color: var(--text-heading);
2101
- overflow-wrap: anywhere;
2177
+ font-size: 0.75rem;
2178
+ font-weight: 500;
2179
+ line-height: 1.35;
2180
+ color: var(--text-heading);
2181
+ overflow-wrap: anywhere;
2102
2182
  }
2103
2183
 
2104
2184
  .assistant-reply-option__meta {
2105
- font-size: 0.6875rem;
2106
- line-height: 1.35;
2107
- color: var(--text-chat-tertiary);
2108
- overflow-wrap: anywhere;
2185
+ font-size: 0.6875rem;
2186
+ line-height: 1.35;
2187
+ color: var(--text-chat-tertiary);
2188
+ overflow-wrap: anywhere;
2109
2189
  }
2110
2190
 
2111
2191
  .assistant-reply-option__custom {
2112
- display: inline-flex;
2113
- align-items: center;
2114
- gap: 0.375rem;
2115
- font-size: 0.75rem;
2116
- color: var(--text-chat-secondary);
2192
+ display: inline-flex;
2193
+ align-items: center;
2194
+ gap: 0.375rem;
2195
+ font-size: 0.75rem;
2196
+ color: var(--text-chat-secondary);
2117
2197
  }
2118
2198
 
2119
2199
  .assistant-reply-option__badges {
2120
- display: flex;
2121
- flex-wrap: wrap;
2122
- gap: 0.25rem;
2123
- margin-top: 0.125rem;
2200
+ display: flex;
2201
+ flex-wrap: wrap;
2202
+ gap: 0.25rem;
2203
+ margin-top: 0.125rem;
2124
2204
  }
2125
2205
 
2126
2206
  .assistant-reply-badge {
2127
- display: inline-flex;
2128
- align-items: center;
2129
- gap: 0.25rem;
2130
- padding: 0.0625rem 0.375rem;
2131
- border-radius: 9999px;
2132
- font-size: 0.625rem;
2133
- background: var(--surface-chat-card);
2134
- box-shadow: inset 0 0 0 1px var(--border-default);
2207
+ display: inline-flex;
2208
+ align-items: center;
2209
+ gap: 0.25rem;
2210
+ padding: 0.0625rem 0.375rem;
2211
+ border-radius: 9999px;
2212
+ font-size: 0.625rem;
2213
+ background: var(--surface-chat-card);
2214
+ box-shadow: inset 0 0 0 1px var(--border-default);
2135
2215
  }
2136
2216
 
2137
2217
  .assistant-reply-badge__label {
2138
- font-weight: 600;
2139
- text-transform: uppercase;
2140
- color: var(--text-chat-tertiary);
2218
+ font-weight: 600;
2219
+ text-transform: uppercase;
2220
+ color: var(--text-chat-tertiary);
2141
2221
  }
2142
2222
 
2143
2223
  .assistant-reply-badge__value {
2144
- color: var(--text-heading);
2224
+ color: var(--text-heading);
2145
2225
  }
2146
2226
 
2147
2227
  .assistant-reply-tool {
2148
- display: inline-flex;
2149
- padding: 0.0625rem 0.375rem;
2150
- border-radius: 0.25rem;
2151
- font-family: ui-monospace, monospace;
2152
- font-size: 0.625rem;
2153
- color: var(--accent-violet);
2154
- background: color-mix(
2155
- in oklab,
2156
- var(--accent-violet) 8%,
2157
- var(--surface-chat-card)
2158
- );
2228
+ display: inline-flex;
2229
+ padding: 0.0625rem 0.375rem;
2230
+ border-radius: 0.25rem;
2231
+ font-family: ui-monospace, monospace;
2232
+ font-size: 0.625rem;
2233
+ color: var(--accent-violet);
2234
+ background: color-mix(
2235
+ in oklab,
2236
+ var(--accent-violet) 8%,
2237
+ var(--surface-chat-card)
2238
+ );
2159
2239
  }
2160
2240
 
2161
2241
  .assistant-reply-suggestions__hint {
2162
- display: flex;
2163
- align-items: center;
2164
- justify-content: center;
2165
- gap: 0.25rem;
2166
- margin: 0;
2167
- padding: 0.3125rem 0.5rem;
2168
- border-top: 1px solid var(--border-default);
2169
- font-size: 0.625rem;
2170
- line-height: 1;
2171
- color: var(--text-chat-tertiary);
2242
+ display: flex;
2243
+ align-items: center;
2244
+ justify-content: center;
2245
+ gap: 0.25rem;
2246
+ margin: 0;
2247
+ padding: 0.3125rem 0.5rem;
2248
+ border-top: 1px solid var(--border-default);
2249
+ font-size: 0.625rem;
2250
+ line-height: 1;
2251
+ color: var(--text-chat-tertiary);
2172
2252
  }
2173
2253
 
2174
2254
  .assistant-reply-kbd {
2175
- display: inline-flex;
2176
- min-width: 0.875rem;
2177
- align-items: center;
2178
- justify-content: center;
2179
- padding: 0.0625rem 0.25rem;
2180
- border-radius: 0.1875rem;
2181
- border: 1px solid var(--border-default-medium);
2182
- background: var(--surface-chat-card);
2183
- font-family: ui-monospace, monospace;
2184
- font-size: 0.5625rem;
2185
- font-weight: 600;
2186
- color: var(--text-chat-secondary);
2255
+ display: inline-flex;
2256
+ min-width: 0.875rem;
2257
+ align-items: center;
2258
+ justify-content: center;
2259
+ padding: 0.0625rem 0.25rem;
2260
+ border-radius: 0.1875rem;
2261
+ border: 1px solid var(--border-default-medium);
2262
+ background: var(--surface-chat-card);
2263
+ font-family: ui-monospace, monospace;
2264
+ font-size: 0.5625rem;
2265
+ font-weight: 600;
2266
+ color: var(--text-chat-secondary);
2187
2267
  }
2188
2268
 
2189
2269
  /* ── Assistant panel shell ── */
2190
2270
  .assistant-panel {
2191
- display: flex;
2192
- flex-direction: column;
2193
- height: 100%;
2194
- min-height: 0;
2195
- width: 100%;
2196
- margin-inline: auto;
2197
- overflow: hidden;
2271
+ display: flex;
2272
+ flex-direction: column;
2273
+ height: 100%;
2274
+ min-height: 0;
2275
+ width: 100%;
2276
+ margin-inline: auto;
2277
+ overflow: hidden;
2198
2278
  }
2199
2279
 
2200
2280
  .assistant-panel__header {
2201
- display: flex;
2202
- flex-shrink: 0;
2203
- align-items: center;
2204
- justify-content: space-between;
2205
- gap: 0.5rem;
2206
- border-bottom: 1px solid var(--border-default);
2207
- padding: 0.75rem 1rem;
2281
+ display: flex;
2282
+ flex-shrink: 0;
2283
+ align-items: center;
2284
+ justify-content: space-between;
2285
+ gap: 0.5rem;
2286
+ border-bottom: 1px solid var(--border-default);
2287
+ padding: 0.75rem 1rem;
2208
2288
  }
2209
2289
 
2210
2290
  .assistant-panel__header-main {
2211
- display: flex;
2212
- min-width: 0;
2213
- align-items: center;
2214
- gap: 0.625rem;
2291
+ display: flex;
2292
+ min-width: 0;
2293
+ align-items: center;
2294
+ gap: 0.625rem;
2215
2295
  }
2216
2296
 
2217
2297
  .assistant-panel__header-icon {
2218
- display: flex;
2219
- width: 2rem;
2220
- height: 2rem;
2221
- flex-shrink: 0;
2222
- align-items: center;
2223
- justify-content: center;
2224
- border-radius: 0.625rem;
2225
- color: var(--text-brand);
2226
- background: var(--surface-promo);
2227
- box-shadow: 0 0 0 1px var(--border-brand-subtle);
2298
+ display: flex;
2299
+ width: 2rem;
2300
+ height: 2rem;
2301
+ flex-shrink: 0;
2302
+ align-items: center;
2303
+ justify-content: center;
2304
+ border-radius: 0.625rem;
2305
+ color: var(--text-brand);
2306
+ background: var(--surface-promo);
2307
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
2228
2308
  }
2229
2309
 
2230
2310
  .assistant-panel__header-text {
2231
- min-width: 0;
2311
+ min-width: 0;
2232
2312
  }
2233
2313
 
2234
2314
  .assistant-panel__title {
2235
- margin: 0;
2236
- font-size: 0.875rem;
2237
- font-weight: 600;
2238
- letter-spacing: -0.01em;
2239
- color: var(--text-heading);
2315
+ margin: 0;
2316
+ font-size: 0.875rem;
2317
+ font-weight: 600;
2318
+ letter-spacing: -0.01em;
2319
+ color: var(--text-heading);
2240
2320
  }
2241
2321
 
2242
2322
  .assistant-panel__subtitle {
2243
- margin: 0;
2244
- overflow: hidden;
2245
- text-overflow: ellipsis;
2246
- white-space: nowrap;
2247
- font-size: 0.6875rem;
2248
- color: var(--text-chat-secondary);
2323
+ margin: 0;
2324
+ overflow: hidden;
2325
+ text-overflow: ellipsis;
2326
+ white-space: nowrap;
2327
+ font-size: 0.6875rem;
2328
+ color: var(--text-chat-secondary);
2249
2329
  }
2250
2330
 
2251
2331
  .assistant-panel__clear {
2252
- padding: 0.5rem;
2332
+ padding: 0.5rem;
2253
2333
  }
2254
2334
 
2255
2335
  .assistant-panel__footer {
2256
- position: relative;
2257
- z-index: 10;
2258
- flex-shrink: 0;
2259
- overflow: visible;
2260
- border-top: 1px solid var(--border-default);
2261
- background: var(--surface-chat);
2262
- padding: 0.75rem;
2336
+ position: relative;
2337
+ z-index: 10;
2338
+ flex-shrink: 0;
2339
+ overflow: visible;
2340
+ border-top: 1px solid var(--border-default);
2341
+ background: var(--surface-chat);
2342
+ padding: 0.75rem;
2263
2343
  }
2264
2344
 
2265
2345
  .assistant-panel__empty-title {
2266
- margin: 0;
2267
- font-size: 0.875rem;
2268
- font-weight: 600;
2269
- letter-spacing: -0.01em;
2270
- color: var(--text-heading);
2346
+ margin: 0;
2347
+ font-size: 0.875rem;
2348
+ font-weight: 600;
2349
+ letter-spacing: -0.01em;
2350
+ color: var(--text-heading);
2271
2351
  }
2272
2352
 
2273
2353
  .assistant-panel__empty-description {
2274
- margin: 0.25rem 0 0;
2275
- font-size: 0.6875rem;
2276
- line-height: 1.5;
2277
- color: var(--text-body-subtle);
2354
+ margin: 0.25rem 0 0;
2355
+ font-size: 0.6875rem;
2356
+ line-height: 1.5;
2357
+ color: var(--text-body-subtle);
2278
2358
  }
2279
2359
 
2280
2360
  .assistant-empty-state__prompt-text {
2281
- min-width: 0;
2282
- flex: 1;
2283
- text-align: left;
2361
+ min-width: 0;
2362
+ flex: 1;
2363
+ text-align: left;
2284
2364
  }
2285
2365
 
2286
2366
  .assistant-empty-state__prompt-label {
2287
- display: block;
2288
- padding-right: 1.25rem;
2289
- font-size: 0.8125rem;
2290
- font-weight: 500;
2291
- line-height: 1.35;
2292
- color: var(--text-heading);
2367
+ display: block;
2368
+ padding-right: 1.25rem;
2369
+ font-size: 0.8125rem;
2370
+ font-weight: 500;
2371
+ line-height: 1.35;
2372
+ color: var(--text-heading);
2293
2373
  }
2294
2374
 
2295
2375
  .assistant-empty-state__prompt--compact .assistant-empty-state__prompt-label {
2296
- padding-right: 0;
2297
- font-size: 0.75rem;
2376
+ padding-right: 0;
2377
+ font-size: 0.75rem;
2298
2378
  }
2299
2379
 
2300
2380
  .assistant-empty-state__prompt-hint {
2301
- display: block;
2302
- margin-top: 0.1875rem;
2303
- font-size: 0.6875rem;
2304
- line-height: 1.4;
2305
- color: var(--text-body-subtle);
2381
+ display: block;
2382
+ margin-top: 0.1875rem;
2383
+ font-size: 0.6875rem;
2384
+ line-height: 1.4;
2385
+ color: var(--text-body-subtle);
2306
2386
  }
2307
2387
 
2308
2388
  .assistant-empty-state__prompt-arrow {
2309
- position: absolute;
2310
- top: 0.875rem;
2311
- right: 0.75rem;
2312
- flex-shrink: 0;
2313
- color: var(--text-disabled);
2314
- transition:
2315
- color 180ms ease,
2316
- transform 120ms ease;
2389
+ position: absolute;
2390
+ top: 0.875rem;
2391
+ right: 0.75rem;
2392
+ flex-shrink: 0;
2393
+ color: var(--text-disabled);
2394
+ transition:
2395
+ color 180ms ease,
2396
+ transform 120ms ease;
2317
2397
  }
2318
2398
 
2319
2399
  .assistant-empty-state__prompt:not(
2320
- .assistant-empty-state__prompt--compact
2321
- ):hover
2322
- .assistant-empty-state__prompt-arrow {
2323
- color: var(--text-brand);
2324
- transform: translateX(2px);
2400
+ .assistant-empty-state__prompt--compact
2401
+ ):hover
2402
+ .assistant-empty-state__prompt-arrow {
2403
+ color: var(--text-brand);
2404
+ transform: translateX(2px);
2325
2405
  }
2326
2406
 
2327
2407
  .assistant-empty-state__prompt--compact .assistant-empty-state__prompt-arrow {
2328
- position: static;
2408
+ position: static;
2329
2409
  }
2330
2410
 
2331
2411
  .assistant-composer__send,
2332
2412
  .assistant-composer__stop {
2333
- flex-shrink: 0;
2334
- padding: 0.5rem;
2335
- border-radius: 0.75rem;
2413
+ flex-shrink: 0;
2414
+ padding: 0.5rem;
2415
+ border-radius: 0.75rem;
2336
2416
  }
2337
2417
 
2338
2418
  /* ── Assistant buttons (self-contained) ── */
2339
2419
  .assistant-btn {
2340
- display: inline-flex;
2341
- align-items: center;
2342
- justify-content: center;
2343
- gap: 0.5rem;
2344
- padding: 0.625rem 1.125rem;
2345
- border-radius: var(--radius-base, 0.5rem);
2346
- font-size: 0.875rem;
2347
- font-weight: 500;
2348
- font-family: inherit;
2349
- border: 1px solid transparent;
2350
- cursor: pointer;
2351
- transition:
2352
- background 180ms ease,
2353
- border-color 180ms ease,
2354
- color 180ms ease,
2355
- transform 120ms ease;
2420
+ display: inline-flex;
2421
+ align-items: center;
2422
+ justify-content: center;
2423
+ gap: 0.5rem;
2424
+ padding: 0.625rem 1.125rem;
2425
+ border-radius: var(--radius-base, 0.5rem);
2426
+ font-size: 0.875rem;
2427
+ font-weight: 500;
2428
+ font-family: inherit;
2429
+ border: 1px solid transparent;
2430
+ cursor: pointer;
2431
+ transition:
2432
+ background 180ms ease,
2433
+ border-color 180ms ease,
2434
+ color 180ms ease,
2435
+ transform 120ms ease;
2356
2436
  }
2357
2437
 
2358
2438
  .assistant-btn:active:not(:disabled) {
2359
- transform: scale(0.98);
2439
+ transform: scale(0.98);
2360
2440
  }
2361
2441
 
2362
2442
  .assistant-btn:disabled {
2363
- opacity: 0.45;
2364
- cursor: not-allowed;
2443
+ opacity: 0.45;
2444
+ cursor: not-allowed;
2365
2445
  }
2366
2446
 
2367
2447
  .assistant-btn--primary {
2368
- background: var(--brand);
2369
- color: var(--brand-on-surface);
2448
+ background: var(--brand);
2449
+ color: var(--brand-on-surface);
2370
2450
  }
2371
2451
 
2372
2452
  .assistant-btn--primary:hover:not(:disabled) {
2373
- filter: brightness(1.05);
2453
+ filter: brightness(1.05);
2374
2454
  }
2375
2455
 
2376
2456
  .assistant-btn--secondary {
2377
- background: var(--surface-panel);
2378
- border-color: var(--border-default);
2379
- color: var(--text-heading);
2457
+ background: var(--surface-panel);
2458
+ border-color: var(--border-default);
2459
+ color: var(--text-heading);
2380
2460
  }
2381
2461
 
2382
2462
  .assistant-btn--secondary:hover:not(:disabled) {
2383
- background: var(--overlay-hover);
2463
+ background: var(--overlay-hover);
2384
2464
  }
2385
2465
 
2386
2466
  .assistant-btn--ghost {
2387
- background: transparent;
2388
- color: var(--text-body);
2467
+ background: transparent;
2468
+ color: var(--text-body);
2389
2469
  }
2390
2470
 
2391
2471
  .assistant-btn--ghost:hover:not(:disabled) {
2392
- background: var(--overlay-hover);
2472
+ background: var(--overlay-hover);
2393
2473
  }
2394
2474
 
2395
2475
  .assistant-input {
2396
- width: 100%;
2397
- padding: 0.375rem 0.625rem;
2398
- border: 1px solid var(--border-default);
2399
- border-radius: var(--radius-base, 0.5rem);
2400
- font: inherit;
2401
- font-size: 0.875rem;
2402
- color: var(--text-heading);
2403
- background: var(--surface-input, var(--surface-panel));
2404
- transition:
2405
- border-color 150ms,
2406
- background 150ms;
2476
+ width: 100%;
2477
+ padding: 0.375rem 0.625rem;
2478
+ border: 1px solid var(--border-default);
2479
+ border-radius: var(--radius-base, 0.5rem);
2480
+ font: inherit;
2481
+ font-size: 0.875rem;
2482
+ color: var(--text-heading);
2483
+ background: var(--surface-input, var(--surface-panel));
2484
+ transition:
2485
+ border-color 150ms,
2486
+ background 150ms;
2407
2487
  }
2408
2488
 
2409
2489
  .assistant-input:focus {
2410
- outline: none;
2411
- border-color: var(--border-default-medium);
2412
- background: var(--surface-input-focus, var(--surface-panel));
2490
+ outline: none;
2491
+ border-color: var(--border-default-medium);
2492
+ background: var(--surface-input-focus, var(--surface-panel));
2413
2493
  }
2414
2494
 
2415
2495
  .model-selector__label {
2416
- display: flex;
2417
- min-width: 0;
2418
- align-items: center;
2419
- gap: 0.5rem;
2496
+ display: flex;
2497
+ min-width: 0;
2498
+ align-items: center;
2499
+ gap: 0.5rem;
2420
2500
  }
2421
2501
 
2422
2502
  .model-selector__label-text {
2423
- flex-shrink: 0;
2424
- font-size: 0.75rem;
2425
- color: var(--text-body-subtle);
2503
+ flex-shrink: 0;
2504
+ font-size: 0.75rem;
2505
+ color: var(--text-body-subtle);
2426
2506
  }
2427
2507
 
2428
2508
  .sr-only {
2429
- position: absolute;
2430
- width: 1px;
2431
- height: 1px;
2432
- padding: 0;
2433
- margin: -1px;
2434
- overflow: hidden;
2435
- clip: rect(0, 0, 0, 0);
2436
- white-space: nowrap;
2437
- border: 0;
2509
+ position: absolute;
2510
+ width: 1px;
2511
+ height: 1px;
2512
+ padding: 0;
2513
+ margin: -1px;
2514
+ overflow: hidden;
2515
+ clip: rect(0, 0, 0, 0);
2516
+ white-space: nowrap;
2517
+ border: 0;
2438
2518
  }
2439
2519
 
2440
2520
  .assistant-empty-state__prompt--skeleton {
2441
- pointer-events: none;
2442
- cursor: default;
2521
+ pointer-events: none;
2522
+ cursor: default;
2443
2523
  }
2444
2524
 
2445
2525
  .assistant-empty-state__icon--skeleton,
2446
2526
  .assistant-empty-state__skeleton-line {
2447
- background: linear-gradient(
2448
- 90deg,
2449
- var(--overlay-subtle) 25%,
2450
- var(--overlay-hover) 50%,
2451
- var(--overlay-subtle) 75%
2452
- );
2453
- background-size: 200% 100%;
2454
- animation: assistant-skeleton-shimmer 1.2s ease-in-out infinite;
2527
+ background: linear-gradient(
2528
+ 90deg,
2529
+ var(--overlay-subtle) 25%,
2530
+ var(--overlay-hover) 50%,
2531
+ var(--overlay-subtle) 75%
2532
+ );
2533
+ background-size: 200% 100%;
2534
+ animation: assistant-skeleton-shimmer 1.2s ease-in-out infinite;
2455
2535
  }
2456
2536
 
2457
2537
  .assistant-empty-state__icon--skeleton {
2458
- width: 1.75rem;
2459
- height: 1.75rem;
2460
- border-radius: calc(var(--radius-base) - 2px);
2538
+ width: 1.75rem;
2539
+ height: 1.75rem;
2540
+ border-radius: calc(var(--radius-base) - 2px);
2461
2541
  }
2462
2542
 
2463
2543
  .assistant-empty-state__skeleton-line {
2464
- display: block;
2465
- height: 0.625rem;
2466
- border-radius: 9999px;
2544
+ display: block;
2545
+ height: 0.625rem;
2546
+ border-radius: 9999px;
2467
2547
  }
2468
2548
 
2469
2549
  .assistant-empty-state__skeleton-line--title {
2470
- width: 72%;
2550
+ width: 72%;
2471
2551
  }
2472
2552
 
2473
2553
  .assistant-empty-state__skeleton-line--hint {
2474
- width: 48%;
2475
- margin-top: 0.375rem;
2554
+ width: 48%;
2555
+ margin-top: 0.375rem;
2476
2556
  }
2477
2557
 
2478
2558
  @keyframes assistant-skeleton-shimmer {
2479
- 0% {
2480
- background-position: 200% 0;
2481
- }
2482
- 100% {
2483
- background-position: -200% 0;
2484
- }
2559
+ 0% {
2560
+ background-position: 200% 0;
2561
+ }
2562
+ 100% {
2563
+ background-position: -200% 0;
2564
+ }
2485
2565
  }
2486
2566
 
2487
2567
  /* ── LLM settings strip ── */
2488
2568
  .assistant-llm-settings-strip {
2489
- display: flex;
2490
- flex-direction: column;
2491
- max-height: min(78vh, 34rem);
2492
- margin-bottom: 0.75rem;
2493
- padding: 0.75rem;
2494
- border-radius: var(--radius-base);
2495
- border: 1px solid var(--border-default);
2496
- background: var(--surface-panel);
2497
- overflow: hidden;
2569
+ display: flex;
2570
+ flex-direction: column;
2571
+ max-height: min(78vh, 34rem);
2572
+ margin-bottom: 0.75rem;
2573
+ padding: 0.75rem;
2574
+ border-radius: var(--radius-base);
2575
+ border: 1px solid var(--border-default);
2576
+ background: var(--surface-panel);
2577
+ overflow: hidden;
2498
2578
  }
2499
2579
 
2500
2580
  .assistant-llm-settings-strip__header {
2501
- display: flex;
2502
- align-items: center;
2503
- justify-content: space-between;
2504
- gap: 0.5rem;
2505
- flex-shrink: 0;
2506
- margin-bottom: 0.5rem;
2581
+ display: flex;
2582
+ align-items: center;
2583
+ justify-content: space-between;
2584
+ gap: 0.5rem;
2585
+ flex-shrink: 0;
2586
+ margin-bottom: 0.5rem;
2507
2587
  }
2508
2588
 
2509
2589
  .assistant-llm-settings-strip__title {
2510
- display: inline-flex;
2511
- align-items: center;
2512
- gap: 0.375rem;
2513
- font-size: 0.8125rem;
2514
- font-weight: 600;
2515
- color: var(--text-heading);
2590
+ display: inline-flex;
2591
+ align-items: center;
2592
+ gap: 0.375rem;
2593
+ font-size: 0.8125rem;
2594
+ font-weight: 600;
2595
+ color: var(--text-heading);
2516
2596
  }
2517
2597
 
2518
2598
  .assistant-llm-settings-strip__header-actions {
2519
- display: inline-flex;
2520
- align-items: center;
2521
- gap: 0.125rem;
2522
- flex-shrink: 0;
2599
+ display: inline-flex;
2600
+ align-items: center;
2601
+ gap: 0.125rem;
2602
+ flex-shrink: 0;
2523
2603
  }
2524
2604
 
2525
2605
  .assistant-llm-settings-strip__header-btn {
2526
- padding: 0.375rem;
2606
+ padding: 0.375rem;
2527
2607
  }
2528
2608
 
2529
2609
  .assistant-llm-settings-strip__loading {
2530
- display: flex;
2531
- align-items: center;
2532
- justify-content: center;
2533
- gap: 0.375rem;
2534
- padding: 0.75rem 0;
2535
- font-size: 0.75rem;
2536
- color: var(--text-body-subtle);
2610
+ display: flex;
2611
+ align-items: center;
2612
+ justify-content: center;
2613
+ gap: 0.375rem;
2614
+ padding: 0.75rem 0;
2615
+ font-size: 0.75rem;
2616
+ color: var(--text-body-subtle);
2537
2617
  }
2538
2618
 
2539
2619
  .assistant-llm-settings-strip__form {
2540
- display: flex;
2541
- flex: 1;
2542
- min-height: 0;
2543
- flex-direction: column;
2620
+ display: flex;
2621
+ flex: 1;
2622
+ min-height: 0;
2623
+ flex-direction: column;
2544
2624
  }
2545
2625
 
2546
2626
  .assistant-llm-settings-strip__fields {
2547
- display: flex;
2548
- flex: 1;
2549
- min-height: 0;
2550
- flex-direction: column;
2551
- gap: 0.5rem;
2552
- overflow-y: auto;
2553
- overscroll-behavior: contain;
2554
- scrollbar-width: thin;
2555
- scrollbar-color: var(--scrollbar-thumb, var(--border-default)) transparent;
2627
+ display: flex;
2628
+ flex: 1;
2629
+ min-height: 0;
2630
+ flex-direction: column;
2631
+ gap: 0.5rem;
2632
+ overflow-y: auto;
2633
+ overscroll-behavior: contain;
2634
+ scrollbar-width: thin;
2635
+ scrollbar-color: var(--scrollbar-thumb, var(--border-default)) transparent;
2556
2636
  }
2557
2637
 
2558
2638
  .assistant-llm-settings-strip__field {
2559
- display: flex;
2560
- min-width: 0;
2561
- flex-direction: column;
2562
- gap: 0.25rem;
2639
+ display: flex;
2640
+ min-width: 0;
2641
+ flex-direction: column;
2642
+ gap: 0.25rem;
2563
2643
  }
2564
2644
 
2565
2645
  .assistant-llm-settings-strip__label {
2566
- font-size: 0.6875rem;
2567
- font-weight: 600;
2568
- color: var(--text-body-subtle);
2646
+ font-size: 0.6875rem;
2647
+ font-weight: 600;
2648
+ color: var(--text-body-subtle);
2569
2649
  }
2570
2650
 
2571
2651
  .assistant-llm-settings-strip__input--mono {
2572
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2573
- font-size: 0.75rem;
2652
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2653
+ font-size: 0.75rem;
2574
2654
  }
2575
2655
 
2576
2656
  .assistant-llm-settings-strip__textarea {
2577
- min-height: 5rem;
2578
- resize: vertical;
2579
- line-height: 1.45;
2580
- font-size: 0.8125rem;
2657
+ min-height: 5rem;
2658
+ resize: vertical;
2659
+ line-height: 1.45;
2660
+ font-size: 0.8125rem;
2581
2661
  }
2582
2662
 
2583
2663
  /* System prompt — compact doc panel */
2584
2664
  .assistant-system-prompt {
2585
- min-width: 0;
2665
+ min-width: 0;
2586
2666
  }
2587
2667
 
2588
2668
  .assistant-system-prompt__shell {
2589
- overflow: hidden;
2590
- border-radius: var(--radius-base);
2591
- border: 1px solid var(--border-default);
2592
- background: var(--surface-input, var(--surface-panel));
2669
+ overflow: hidden;
2670
+ border-radius: var(--radius-base);
2671
+ border: 1px solid var(--border-default);
2672
+ background: var(--surface-input, var(--surface-panel));
2593
2673
  }
2594
2674
 
2595
2675
  .assistant-system-prompt__bar {
2596
- display: flex;
2597
- align-items: center;
2598
- justify-content: space-between;
2599
- gap: 0.5rem;
2600
- padding: 0.25rem 0.25rem 0.25rem 0.5rem;
2601
- border-bottom: 1px solid var(--border-default);
2602
- background: var(--overlay-subtle);
2676
+ display: flex;
2677
+ align-items: center;
2678
+ justify-content: space-between;
2679
+ gap: 0.5rem;
2680
+ padding: 0.25rem 0.25rem 0.25rem 0.5rem;
2681
+ border-bottom: 1px solid var(--border-default);
2682
+ background: var(--overlay-subtle);
2603
2683
  }
2604
2684
 
2605
2685
  .assistant-system-prompt__bar-start {
2606
- display: inline-flex;
2607
- min-width: 0;
2608
- align-items: center;
2609
- gap: 0.375rem;
2686
+ display: inline-flex;
2687
+ min-width: 0;
2688
+ align-items: center;
2689
+ gap: 0.375rem;
2610
2690
  }
2611
2691
 
2612
2692
  .assistant-system-prompt__label {
2613
- font-size: 0.6875rem;
2614
- font-weight: 600;
2615
- color: var(--text-body-subtle);
2693
+ font-size: 0.6875rem;
2694
+ font-weight: 600;
2695
+ color: var(--text-body-subtle);
2616
2696
  }
2617
2697
 
2618
2698
  .assistant-system-prompt__tag {
2619
- padding: 0.0625rem 0.375rem;
2620
- border-radius: var(--radius-full);
2621
- background: var(--surface-chip, var(--overlay-subtle));
2622
- border: 1px solid var(--surface-chip-border, var(--border-default));
2623
- font-size: 0.5625rem;
2624
- font-weight: 600;
2625
- color: var(--text-brand);
2699
+ padding: 0.0625rem 0.375rem;
2700
+ border-radius: var(--radius-full);
2701
+ background: var(--surface-chip, var(--overlay-subtle));
2702
+ border: 1px solid var(--surface-chip-border, var(--border-default));
2703
+ font-size: 0.5625rem;
2704
+ font-weight: 600;
2705
+ color: var(--text-brand);
2626
2706
  }
2627
2707
 
2628
2708
  .assistant-system-prompt__modes {
2629
- display: inline-flex;
2630
- flex-shrink: 0;
2631
- gap: 0.0625rem;
2632
- padding: 0.0625rem;
2633
- border-radius: calc(var(--radius-base) - 3px);
2634
- background: var(--surface-panel);
2709
+ display: inline-flex;
2710
+ flex-shrink: 0;
2711
+ gap: 0.0625rem;
2712
+ padding: 0.0625rem;
2713
+ border-radius: calc(var(--radius-base) - 3px);
2714
+ background: var(--surface-panel);
2635
2715
  }
2636
2716
 
2637
2717
  .assistant-system-prompt__mode {
2638
- display: inline-flex;
2639
- align-items: center;
2640
- justify-content: center;
2641
- width: 1.375rem;
2642
- height: 1.375rem;
2643
- padding: 0;
2644
- border: none;
2645
- border-radius: calc(var(--radius-base) - 4px);
2646
- background: transparent;
2647
- color: var(--text-body-subtle);
2648
- cursor: pointer;
2649
- transition:
2650
- background 150ms ease,
2651
- color 150ms ease;
2718
+ display: inline-flex;
2719
+ align-items: center;
2720
+ justify-content: center;
2721
+ width: 1.375rem;
2722
+ height: 1.375rem;
2723
+ padding: 0;
2724
+ border: none;
2725
+ border-radius: calc(var(--radius-base) - 4px);
2726
+ background: transparent;
2727
+ color: var(--text-body-subtle);
2728
+ cursor: pointer;
2729
+ transition:
2730
+ background 150ms ease,
2731
+ color 150ms ease;
2652
2732
  }
2653
2733
 
2654
2734
  .assistant-system-prompt__mode:hover {
2655
- color: var(--text-heading);
2656
- background: var(--overlay-hover);
2735
+ color: var(--text-heading);
2736
+ background: var(--overlay-hover);
2657
2737
  }
2658
2738
 
2659
2739
  .assistant-system-prompt__mode--active {
2660
- color: var(--text-brand);
2661
- background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
2740
+ color: var(--text-brand);
2741
+ background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
2662
2742
  }
2663
2743
 
2664
2744
  .assistant-system-prompt__editor {
2665
- display: block;
2666
- width: 100%;
2667
- min-height: 9rem;
2668
- max-height: 14rem;
2745
+ display: block;
2746
+ width: 100%;
2747
+ min-height: 9rem;
2748
+ max-height: 14rem;
2669
2749
  }
2670
2750
 
2671
2751
  .assistant-markdown-editor {
2672
- position: relative;
2673
- width: 100%;
2674
- min-height: inherit;
2675
- max-height: inherit;
2676
- overflow: hidden;
2752
+ position: relative;
2753
+ width: 100%;
2754
+ min-height: inherit;
2755
+ max-height: inherit;
2756
+ overflow: hidden;
2677
2757
  }
2678
2758
 
2679
2759
  .assistant-markdown-editor__highlight,
2680
2760
  .assistant-markdown-editor__input {
2681
- box-sizing: border-box;
2682
- width: 100%;
2683
- min-height: 9rem;
2684
- max-height: 14rem;
2685
- margin: 0;
2686
- padding: 0.5rem 0.625rem;
2687
- border: none;
2688
- background: transparent;
2689
- font: inherit;
2690
- font-size: 0.75rem;
2691
- line-height: 1.5;
2692
- white-space: pre-wrap;
2693
- overflow-wrap: anywhere;
2694
- word-break: break-word;
2695
- tab-size: 2;
2761
+ box-sizing: border-box;
2762
+ width: 100%;
2763
+ min-height: 9rem;
2764
+ max-height: 14rem;
2765
+ margin: 0;
2766
+ padding: 0.5rem 0.625rem;
2767
+ border: none;
2768
+ background: transparent;
2769
+ font: inherit;
2770
+ font-size: 0.75rem;
2771
+ line-height: 1.5;
2772
+ white-space: pre-wrap;
2773
+ overflow-wrap: anywhere;
2774
+ word-break: break-word;
2775
+ tab-size: 2;
2696
2776
  }
2697
2777
 
2698
2778
  .assistant-markdown-editor__highlight {
2699
- position: absolute;
2700
- inset: 0;
2701
- overflow: auto;
2702
- pointer-events: none;
2703
- scrollbar-width: none;
2779
+ position: absolute;
2780
+ inset: 0;
2781
+ overflow: auto;
2782
+ pointer-events: none;
2783
+ scrollbar-width: none;
2704
2784
  }
2705
2785
 
2706
2786
  .assistant-markdown-editor__highlight::-webkit-scrollbar {
2707
- display: none;
2787
+ display: none;
2708
2788
  }
2709
2789
 
2710
2790
  .assistant-markdown-editor .assistant-markdown-editor__highlight code.hljs {
2711
- display: block;
2712
- padding: 0;
2713
- border: none;
2714
- background: transparent;
2715
- font: inherit;
2716
- font-size: inherit;
2717
- line-height: inherit;
2718
- color: var(--text-heading);
2719
- white-space: pre-wrap;
2720
- overflow-wrap: anywhere;
2721
- word-break: break-word;
2791
+ display: block;
2792
+ padding: 0;
2793
+ border: none;
2794
+ background: transparent;
2795
+ font: inherit;
2796
+ font-size: inherit;
2797
+ line-height: inherit;
2798
+ color: var(--text-heading);
2799
+ white-space: pre-wrap;
2800
+ overflow-wrap: anywhere;
2801
+ word-break: break-word;
2722
2802
  }
2723
2803
 
2724
2804
  .assistant-markdown-editor__highlight .hljs-section {
2725
- font-weight: 700;
2726
- color: var(--text-brand);
2805
+ font-weight: 700;
2806
+ color: var(--text-brand);
2727
2807
  }
2728
2808
 
2729
2809
  .assistant-markdown-editor__highlight .hljs-strong {
2730
- font-weight: 600;
2731
- color: var(--text-heading);
2810
+ font-weight: 600;
2811
+ color: var(--text-heading);
2732
2812
  }
2733
2813
 
2734
2814
  .assistant-markdown-editor__highlight .hljs-bullet,
2735
2815
  .assistant-markdown-editor__highlight .hljs-symbol {
2736
- color: var(--text-brand);
2737
- font-weight: 700;
2816
+ color: var(--text-brand);
2817
+ font-weight: 700;
2738
2818
  }
2739
2819
 
2740
2820
  .assistant-markdown-editor__highlight .hljs-code {
2741
- padding: 0 0.125rem;
2742
- border-radius: 0.1875rem;
2743
- background: var(--surface-code);
2744
- color: var(--surface-code-text, var(--text-heading));
2745
- font-family:
2746
- "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
2747
- monospace;
2748
- font-size: 0.92em;
2749
- font-weight: 500;
2821
+ padding: 0 0.125rem;
2822
+ border-radius: 0.1875rem;
2823
+ background: var(--surface-code);
2824
+ color: var(--surface-code-text, var(--text-heading));
2825
+ font-family:
2826
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
2827
+ monospace;
2828
+ font-size: 0.92em;
2829
+ font-weight: 500;
2750
2830
  }
2751
2831
 
2752
2832
  .assistant-markdown-editor__highlight .hljs-emphasis {
2753
- font-style: italic;
2754
- color: var(--text-body-subtle);
2833
+ font-style: italic;
2834
+ color: var(--text-body-subtle);
2755
2835
  }
2756
2836
 
2757
2837
  .assistant-markdown-editor
2758
- .assistant-markdown-editor__highlight
2759
- code.hljs
2760
- .hljs-link,
2838
+ .assistant-markdown-editor__highlight
2839
+ code.hljs
2840
+ .hljs-link,
2761
2841
  .assistant-markdown-editor
2762
- .assistant-markdown-editor__highlight
2763
- code.hljs
2764
- .hljs-string {
2765
- color: var(--text-brand);
2842
+ .assistant-markdown-editor__highlight
2843
+ code.hljs
2844
+ .hljs-string {
2845
+ color: var(--text-brand);
2766
2846
  }
2767
2847
 
2768
2848
  .assistant-markdown-editor__highlight .hljs-quote {
2769
- color: var(--text-body-subtle);
2849
+ color: var(--text-body-subtle);
2770
2850
  }
2771
2851
 
2772
2852
  .assistant-markdown-editor__input {
2773
- position: relative;
2774
- z-index: 1;
2775
- display: block;
2776
- resize: vertical;
2777
- color: transparent;
2778
- caret-color: var(--text-heading);
2779
- -webkit-text-fill-color: transparent;
2780
- overflow: auto;
2853
+ position: relative;
2854
+ z-index: 1;
2855
+ display: block;
2856
+ resize: vertical;
2857
+ color: transparent;
2858
+ caret-color: var(--text-heading);
2859
+ -webkit-text-fill-color: transparent;
2860
+ overflow: auto;
2781
2861
  }
2782
2862
 
2783
2863
  .assistant-markdown-editor__input:focus {
2784
- outline: none;
2864
+ outline: none;
2785
2865
  }
2786
2866
 
2787
2867
  .assistant-markdown-editor__input::placeholder {
2788
- color: var(--text-body-subtle);
2789
- -webkit-text-fill-color: var(--text-body-subtle);
2790
- opacity: 1;
2868
+ color: var(--text-body-subtle);
2869
+ -webkit-text-fill-color: var(--text-body-subtle);
2870
+ opacity: 1;
2791
2871
  }
2792
2872
 
2793
2873
  .assistant-markdown-editor__input:disabled {
2794
- opacity: 0.55;
2795
- cursor: not-allowed;
2874
+ opacity: 0.55;
2875
+ cursor: not-allowed;
2796
2876
  }
2797
2877
 
2798
2878
  .assistant-system-prompt__doc {
2799
- max-height: 14rem;
2800
- overflow-y: auto;
2801
- padding: 0.4375rem 0.625rem 0.5rem;
2802
- scrollbar-width: thin;
2803
- scrollbar-color: var(--scrollbar-thumb, var(--border-default)) transparent;
2879
+ max-height: 14rem;
2880
+ overflow-y: auto;
2881
+ padding: 0.4375rem 0.625rem 0.5rem;
2882
+ scrollbar-width: thin;
2883
+ scrollbar-color: var(--scrollbar-thumb, var(--border-default)) transparent;
2804
2884
  }
2805
2885
 
2806
2886
  .assistant-system-prompt__md {
2807
- font-family: inherit;
2808
- font-size: 0.75rem;
2809
- line-height: 1.48;
2810
- color: var(--text-body);
2887
+ font-family: inherit;
2888
+ font-size: 0.75rem;
2889
+ line-height: 1.48;
2890
+ color: var(--text-body);
2811
2891
  }
2812
2892
 
2813
2893
  .assistant-system-prompt__md > :first-child {
2814
- margin-top: 0;
2894
+ margin-top: 0;
2815
2895
  }
2816
2896
 
2817
2897
  .assistant-system-prompt__md > :last-child {
2818
- margin-bottom: 0;
2898
+ margin-bottom: 0;
2819
2899
  }
2820
2900
 
2821
2901
  .assistant-system-prompt__md p {
2822
- margin: 0.25rem 0;
2902
+ margin: 0.25rem 0;
2823
2903
  }
2824
2904
 
2825
2905
  .assistant-system-prompt__md h1,
2826
2906
  .assistant-system-prompt__md h2,
2827
2907
  .assistant-system-prompt__md h3,
2828
2908
  .assistant-system-prompt__md h4 {
2829
- margin: 0.375rem 0 0.125rem;
2830
- font-weight: 600;
2831
- line-height: 1.3;
2832
- color: var(--text-heading);
2909
+ margin: 0.375rem 0 0.125rem;
2910
+ font-weight: 600;
2911
+ line-height: 1.3;
2912
+ color: var(--text-heading);
2833
2913
  }
2834
2914
 
2835
2915
  .assistant-system-prompt__md h2 {
2836
- font-size: 0.625rem;
2837
- font-weight: 700;
2838
- letter-spacing: 0.05em;
2839
- text-transform: uppercase;
2840
- color: var(--text-brand);
2916
+ font-size: 0.625rem;
2917
+ font-weight: 700;
2918
+ letter-spacing: 0.05em;
2919
+ text-transform: uppercase;
2920
+ color: var(--text-brand);
2841
2921
  }
2842
2922
 
2843
2923
  .assistant-system-prompt__md h3 {
2844
- font-size: 0.75rem;
2924
+ font-size: 0.75rem;
2845
2925
  }
2846
2926
 
2847
2927
  .assistant-system-prompt__md h2 + p {
2848
- margin-bottom: 0.125rem;
2849
- font-size: 0.6875rem;
2850
- color: var(--text-body-subtle);
2928
+ margin-bottom: 0.125rem;
2929
+ font-size: 0.6875rem;
2930
+ color: var(--text-body-subtle);
2851
2931
  }
2852
2932
 
2853
2933
  .assistant-system-prompt__md ul,
2854
2934
  .assistant-system-prompt__md ol {
2855
- margin: 0.125rem 0 0.25rem;
2856
- padding: 0;
2857
- list-style: none;
2935
+ margin: 0.125rem 0 0.25rem;
2936
+ padding: 0;
2937
+ list-style: none;
2858
2938
  }
2859
2939
 
2860
2940
  .assistant-system-prompt__md ul ul,
2861
2941
  .assistant-system-prompt__md ol ul {
2862
- margin-top: 0.125rem;
2863
- padding-left: 0.625rem;
2942
+ margin-top: 0.125rem;
2943
+ padding-left: 0.625rem;
2864
2944
  }
2865
2945
 
2866
2946
  .assistant-system-prompt .assistant-system-prompt__md li {
2867
- position: relative;
2868
- margin: 0.1875rem 0;
2869
- padding-left: 0.6875rem;
2947
+ position: relative;
2948
+ margin: 0.1875rem 0;
2949
+ padding-left: 0.6875rem;
2870
2950
  }
2871
2951
 
2872
2952
  .assistant-system-prompt__md ul > li::before {
2873
- content: "–";
2874
- position: absolute;
2875
- left: 0;
2876
- top: 0;
2877
- color: var(--text-brand);
2878
- font-weight: 600;
2879
- line-height: inherit;
2953
+ content: "–";
2954
+ position: absolute;
2955
+ left: 0;
2956
+ top: 0;
2957
+ color: var(--text-brand);
2958
+ font-weight: 600;
2959
+ line-height: inherit;
2880
2960
  }
2881
2961
 
2882
2962
  .assistant-system-prompt__md ul ul > li::before {
2883
- content: "·";
2884
- font-weight: 700;
2963
+ content: "·";
2964
+ font-weight: 700;
2885
2965
  }
2886
2966
 
2887
2967
  .assistant-system-prompt__md ol {
2888
- counter-reset: prompt-item;
2968
+ counter-reset: prompt-item;
2889
2969
  }
2890
2970
 
2891
2971
  .assistant-system-prompt__md ol > li {
2892
- padding-left: 1rem;
2972
+ padding-left: 1rem;
2893
2973
  }
2894
2974
 
2895
2975
  .assistant-system-prompt__md ol > li::before {
2896
- content: counter(prompt-item) ".";
2897
- counter-increment: prompt-item;
2898
- position: absolute;
2899
- left: 0;
2900
- top: 0;
2901
- font-size: 0.6875rem;
2902
- font-weight: 600;
2903
- font-variant-numeric: tabular-nums;
2904
- color: var(--text-brand);
2905
- line-height: inherit;
2976
+ content: counter(prompt-item) ".";
2977
+ counter-increment: prompt-item;
2978
+ position: absolute;
2979
+ left: 0;
2980
+ top: 0;
2981
+ font-size: 0.6875rem;
2982
+ font-weight: 600;
2983
+ font-variant-numeric: tabular-nums;
2984
+ color: var(--text-brand);
2985
+ line-height: inherit;
2906
2986
  }
2907
2987
 
2908
2988
  .assistant-system-prompt .assistant-system-prompt__md strong {
2909
- font-weight: 600;
2910
- color: var(--text-heading);
2989
+ font-weight: 600;
2990
+ color: var(--text-heading);
2911
2991
  }
2912
2992
 
2913
2993
  .assistant-system-prompt
2914
- .assistant-system-prompt__md
2915
- code.markdown-inline-code {
2916
- padding: 0 0.25rem;
2917
- border: none;
2918
- border-radius: 0.1875rem;
2919
- background: var(--surface-code);
2920
- color: var(--surface-code-text, var(--text-heading));
2921
- font-family:
2922
- "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
2923
- monospace;
2924
- font-size: 0.68em;
2925
- font-weight: 500;
2994
+ .assistant-system-prompt__md
2995
+ code.markdown-inline-code {
2996
+ padding: 0 0.25rem;
2997
+ border: none;
2998
+ border-radius: 0.1875rem;
2999
+ background: var(--surface-code);
3000
+ color: var(--surface-code-text, var(--text-heading));
3001
+ font-family:
3002
+ "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
3003
+ monospace;
3004
+ font-size: 0.68em;
3005
+ font-weight: 500;
2926
3006
  }
2927
3007
 
2928
3008
  .assistant-system-prompt__md .markdown-pre:not(:has(.markdown-mermaid)) {
2929
- margin: 0.25rem 0;
2930
- padding: 0.375rem 0.5rem;
2931
- border-radius: calc(var(--radius-base) - 3px);
2932
- border: 1px solid var(--border-default);
2933
- background: var(--surface-inset, var(--overlay-subtle));
3009
+ margin: 0.25rem 0;
3010
+ padding: 0.375rem 0.5rem;
3011
+ border-radius: calc(var(--radius-base) - 3px);
3012
+ border: 1px solid var(--border-default);
3013
+ background: var(--surface-inset, var(--overlay-subtle));
2934
3014
  }
2935
3015
 
2936
3016
  .assistant-llm-settings-strip .assistant-input {
2937
- font-size: 0.8125rem;
2938
- padding: 0.375rem 0.5rem;
3017
+ font-size: 0.8125rem;
3018
+ padding: 0.375rem 0.5rem;
2939
3019
  }
2940
3020
 
2941
3021
  .assistant-llm-settings-strip__advanced-toggle {
2942
- display: inline-flex;
2943
- align-items: center;
2944
- gap: 0.25rem;
2945
- align-self: flex-start;
2946
- margin-top: 0.125rem;
2947
- padding: 0.125rem 0;
2948
- border: none;
2949
- background: none;
2950
- font: inherit;
2951
- font-size: 0.6875rem;
2952
- font-weight: 600;
2953
- color: var(--text-body-subtle);
2954
- cursor: pointer;
2955
- transition: color 150ms ease;
3022
+ display: inline-flex;
3023
+ align-items: center;
3024
+ gap: 0.25rem;
3025
+ align-self: flex-start;
3026
+ margin-top: 0.125rem;
3027
+ padding: 0.125rem 0;
3028
+ border: none;
3029
+ background: none;
3030
+ font: inherit;
3031
+ font-size: 0.6875rem;
3032
+ font-weight: 600;
3033
+ color: var(--text-body-subtle);
3034
+ cursor: pointer;
3035
+ transition: color 150ms ease;
2956
3036
  }
2957
3037
 
2958
3038
  .assistant-llm-settings-strip__advanced-toggle:hover {
2959
- color: var(--text-heading);
3039
+ color: var(--text-heading);
2960
3040
  }
2961
3041
 
2962
3042
  .assistant-llm-settings-strip__chevron {
2963
- transition: transform 180ms ease;
3043
+ transition: transform 180ms ease;
2964
3044
  }
2965
3045
 
2966
3046
  .assistant-llm-settings-strip__chevron--open {
2967
- transform: rotate(180deg);
3047
+ transform: rotate(180deg);
2968
3048
  }
2969
3049
 
2970
3050
  .assistant-llm-settings-strip__advanced {
2971
- display: flex;
2972
- flex-direction: column;
2973
- gap: 0.5rem;
2974
- padding-left: 0.125rem;
3051
+ display: flex;
3052
+ flex-direction: column;
3053
+ gap: 0.5rem;
3054
+ padding-left: 0.125rem;
2975
3055
  }
2976
3056
 
2977
3057
  .assistant-llm-settings-strip__status {
2978
- margin: 0;
2979
- font-size: 0.6875rem;
2980
- line-height: 1.4;
3058
+ margin: 0;
3059
+ font-size: 0.6875rem;
3060
+ line-height: 1.4;
2981
3061
  }
2982
3062
 
2983
3063
  .assistant-llm-settings-strip__status--error {
2984
- color: var(--danger);
3064
+ color: var(--danger);
2985
3065
  }
2986
3066
 
2987
3067
  .assistant-llm-settings-strip__status--success {
2988
- color: var(--text-brand);
3068
+ color: var(--text-brand);
2989
3069
  }
2990
3070
 
2991
3071
  .assistant-llm-settings-strip__footer {
2992
- display: flex;
2993
- justify-content: flex-end;
2994
- align-items: center;
2995
- gap: 0.25rem;
2996
- flex-shrink: 0;
2997
- margin-top: 0.5rem;
2998
- padding-top: 0.5rem;
2999
- border-top: 1px solid var(--border-default);
3072
+ display: flex;
3073
+ justify-content: flex-end;
3074
+ align-items: center;
3075
+ gap: 0.25rem;
3076
+ flex-shrink: 0;
3077
+ margin-top: 0.5rem;
3078
+ padding-top: 0.5rem;
3079
+ border-top: 1px solid var(--border-default);
3000
3080
  }
3001
3081
 
3002
3082
  .assistant-llm-settings-strip__footer-btn--reset {
3003
- margin-right: auto;
3083
+ margin-right: auto;
3004
3084
  }
3005
3085
 
3006
3086
  .assistant-llm-settings-strip__footer-btn {
3007
- padding: 0.375rem 0.75rem;
3008
- font-size: 0.75rem;
3087
+ padding: 0.375rem 0.75rem;
3088
+ font-size: 0.75rem;
3009
3089
  }