@4djs/assistant 0.0.1 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +151 -68
  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.map +1 -1
  9. package/dist/core/fetch-suggested-prompts.d.ts.map +1 -1
  10. package/dist/core/index.d.ts +2 -0
  11. package/dist/core/index.d.ts.map +1 -1
  12. package/dist/core/index.js +175 -26
  13. package/dist/core/interactive-tools/choices.d.ts.map +1 -1
  14. package/dist/core/interactive-tools/confirmation.d.ts.map +1 -1
  15. package/dist/core/interactive-tools/execute.d.ts.map +1 -1
  16. package/dist/core/interactive-tools/index.d.ts.map +1 -1
  17. package/dist/core/interactive-tools/suggestions.d.ts.map +1 -1
  18. package/dist/core/interactive-tools/waiters.d.ts.map +1 -1
  19. package/dist/core/llm-chat.d.ts.map +1 -1
  20. package/dist/core/llm-config.d.ts.map +1 -1
  21. package/dist/core/llm-models.d.ts.map +1 -1
  22. package/dist/core/llm-provider.d.ts.map +1 -1
  23. package/dist/core/llm-settings-storage.d.ts.map +1 -1
  24. package/dist/core/llm-sse.d.ts.map +1 -1
  25. package/dist/core/llm-types.d.ts.map +1 -1
  26. package/dist/core/types.d.ts.map +1 -1
  27. package/dist/index.js +387 -187
  28. package/dist/labels.d.ts +136 -0
  29. package/dist/labels.d.ts.map +1 -0
  30. package/dist/react/Assistant.d.ts.map +1 -1
  31. package/dist/react/components/HighlightedJsonCode.d.ts.map +1 -1
  32. package/dist/react/components/MarkdownContent.d.ts.map +1 -1
  33. package/dist/react/components/MarkdownEditor.d.ts.map +1 -1
  34. package/dist/react/components/MermaidDiagram.d.ts.map +1 -1
  35. package/dist/react/components/ModelSelector.d.ts.map +1 -1
  36. package/dist/react/components/chat/AssistantErrorCallout.d.ts +3 -1
  37. package/dist/react/components/chat/AssistantErrorCallout.d.ts.map +1 -1
  38. package/dist/react/components/chat/ChatActivity.d.ts.map +1 -1
  39. package/dist/react/components/chat/ChatComposer.d.ts +3 -1
  40. package/dist/react/components/chat/ChatComposer.d.ts.map +1 -1
  41. package/dist/react/components/chat/ChatEmptyState.d.ts.map +1 -1
  42. package/dist/react/components/chat/ChatInteractivePrompt/choices-prompt.d.ts.map +1 -1
  43. package/dist/react/components/chat/ChatInteractivePrompt/confirmation-prompt.d.ts.map +1 -1
  44. package/dist/react/components/chat/ChatInteractivePrompt/index.d.ts.map +1 -1
  45. package/dist/react/components/chat/ChatInteractivePrompt/shell.d.ts.map +1 -1
  46. package/dist/react/components/chat/ChatMessage.d.ts.map +1 -1
  47. package/dist/react/components/chat/ChatMessageScroll.d.ts.map +1 -1
  48. package/dist/react/components/chat/ChatReplySuggestions.d.ts.map +1 -1
  49. package/dist/react/components/chat/ComposerCommandMenu.d.ts.map +1 -1
  50. package/dist/react/components/chat/LlmSettingsStrip.d.ts.map +1 -1
  51. package/dist/react/components/chat/LlmSetupPrompt.d.ts.map +1 -1
  52. package/dist/react/components/chat/LlmUnavailableBanner.d.ts.map +1 -1
  53. package/dist/react/components/chat/SuggestedPromptsList.d.ts.map +1 -1
  54. package/dist/react/components/chat/SuggestedPromptsStrip.d.ts.map +1 -1
  55. package/dist/react/components/chat/SystemPromptField.d.ts.map +1 -1
  56. package/dist/react/components/highlighted-code.d.ts.map +1 -1
  57. package/dist/react/context.d.ts +2 -0
  58. package/dist/react/context.d.ts.map +1 -1
  59. package/dist/react/hooks/use-composer-commands.d.ts +3 -1
  60. package/dist/react/hooks/use-composer-commands.d.ts.map +1 -1
  61. package/dist/react/hooks/use-suggested-prompts.d.ts +1 -0
  62. package/dist/react/hooks/use-suggested-prompts.d.ts.map +1 -1
  63. package/dist/react/index.d.ts +3 -1
  64. package/dist/react/index.d.ts.map +1 -1
  65. package/dist/react/lib/parse-assistant-error.d.ts +2 -1
  66. package/dist/react/lib/parse-assistant-error.d.ts.map +1 -1
  67. package/dist/react/lib/prompt-icons.d.ts.map +1 -1
  68. package/dist/react/types.d.ts +4 -0
  69. package/dist/react/types.d.ts.map +1 -1
  70. package/dist/react/utils/cn.d.ts.map +1 -1
  71. package/dist/styles.css +1806 -1806
  72. package/package.json +50 -50
package/dist/styles.css CHANGED
@@ -1,475 +1,475 @@
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
200
  }
201
201
 
202
202
  .markdown-body pre:has(.markdown-mermaid) {
203
- margin: 0.5rem 0;
204
- padding: 0;
205
- border: none;
206
- background: transparent;
203
+ margin: 0.5rem 0;
204
+ padding: 0;
205
+ border: none;
206
+ background: transparent;
207
207
  }
208
208
 
209
209
  .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;
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;
215
215
  }
216
216
 
217
217
  .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);
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);
226
226
  }
227
227
 
228
228
  .markdown-body .katex {
229
- font-size: 1.02em;
230
- color: var(--text-heading);
229
+ font-size: 1.02em;
230
+ color: var(--text-heading);
231
231
  }
232
232
 
233
233
  .markdown-body .katex-display {
234
- margin: 0.625rem 0;
235
- overflow-x: auto;
236
- overflow-y: hidden;
234
+ margin: 0.625rem 0;
235
+ overflow-x: auto;
236
+ overflow-y: hidden;
237
237
  }
238
238
 
239
239
  .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);
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);
247
247
  }
248
248
 
249
249
  .markdown-mermaid svg {
250
- display: block;
251
- height: auto;
250
+ display: block;
251
+ height: auto;
252
252
  }
253
253
 
254
254
  /* ── Assistant chat (aligned with 4d-ai-agents editor) ── */
255
255
  @keyframes assistant-icon-spin {
256
- to {
257
- transform: rotate(360deg);
258
- }
256
+ to {
257
+ transform: rotate(360deg);
258
+ }
259
259
  }
260
260
 
261
261
  @keyframes assistant-message-in {
262
- from {
263
- opacity: 0;
264
- transform: translateY(6px);
265
- }
266
- to {
267
- opacity: 1;
268
- transform: translateY(0);
269
- }
262
+ from {
263
+ opacity: 0;
264
+ transform: translateY(6px);
265
+ }
266
+ to {
267
+ opacity: 1;
268
+ transform: translateY(0);
269
+ }
270
270
  }
271
271
 
272
272
  @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
- }
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
+ }
283
283
  }
284
284
 
285
285
  @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
- }
286
+ from {
287
+ opacity: 0;
288
+ transform: translateY(4px);
289
+ }
290
+ to {
291
+ opacity: 1;
292
+ transform: translateY(0);
293
+ }
294
294
  }
295
295
 
296
296
  @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
- }
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
+ }
308
308
  }
309
309
 
310
310
  @keyframes assistant-empty-state-spin {
311
- to {
312
- transform: rotate(360deg);
313
- }
311
+ to {
312
+ transform: rotate(360deg);
313
+ }
314
314
  }
315
315
 
316
316
  .assistant-message {
317
- width: 100%;
318
- animation: assistant-message-in 0.28s ease-out both;
317
+ width: 100%;
318
+ animation: assistant-message-in 0.28s ease-out both;
319
319
  }
320
320
 
321
321
  .assistant-message-list {
322
- display: flex;
323
- flex-direction: column;
324
- gap: 1rem;
325
- padding: 0.875rem 1rem 0.75rem;
322
+ display: flex;
323
+ flex-direction: column;
324
+ gap: 1rem;
325
+ padding: 0.875rem 1rem 0.75rem;
326
326
  }
327
327
 
328
328
  .assistant-message-list > .assistant-message:last-child {
329
- margin-bottom: 0.125rem;
329
+ margin-bottom: 0.125rem;
330
330
  }
331
331
 
332
332
  .assistant-message--user {
333
- display: flex;
334
- justify-content: flex-end;
333
+ display: flex;
334
+ justify-content: flex-end;
335
335
  }
336
336
 
337
337
  .assistant-message--assistant {
338
- display: block;
338
+ display: block;
339
339
  }
340
340
 
341
341
  .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;
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;
348
348
  }
349
349
 
350
350
  .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);
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);
364
364
  }
365
365
 
366
366
  .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;
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;
373
373
  }
374
374
 
375
375
  .assistant-user-avatar,
376
376
  .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;
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;
384
384
  }
385
385
 
386
386
  .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);
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);
396
396
  }
397
397
 
398
398
  .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);
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);
405
405
  }
406
406
 
407
407
  .assistant-assistant-row {
408
- display: flex;
409
- min-width: 0;
410
- align-items: flex-start;
411
- gap: 0.625rem;
408
+ display: flex;
409
+ min-width: 0;
410
+ align-items: flex-start;
411
+ gap: 0.625rem;
412
412
  }
413
413
 
414
414
  .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);
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);
422
422
  }
423
423
 
424
424
  .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);
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);
434
434
  }
435
435
 
436
436
  .assistant-assistant-card__error {
437
- padding: 0.5rem 0.875rem 0.75rem;
437
+ padding: 0.5rem 0.875rem 0.75rem;
438
438
  }
439
439
 
440
440
  .assistant-assistant-card__meta {
441
- display: flex;
442
- align-items: center;
443
- padding: 0.4375rem 0.875rem 0;
441
+ display: flex;
442
+ align-items: center;
443
+ padding: 0.4375rem 0.875rem 0;
444
444
  }
445
445
 
446
446
  .assistant-assistant-card__typing {
447
- padding: 0.625rem 0.875rem 0.75rem;
447
+ padding: 0.625rem 0.875rem 0.75rem;
448
448
  }
449
449
 
450
450
  .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);
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);
462
462
  }
463
463
 
464
464
  .assistant-markdown {
465
- padding: 0.375rem 0.875rem 0.75rem;
466
- color: var(--text-body);
465
+ padding: 0.375rem 0.875rem 0.75rem;
466
+ color: var(--text-body);
467
467
  }
468
468
 
469
469
  .assistant-markdown .markdown-body {
470
- color: var(--text-body);
471
- font-size: 0.875rem;
472
- line-height: 1.6;
470
+ color: var(--text-body);
471
+ font-size: 0.875rem;
472
+ line-height: 1.6;
473
473
  }
474
474
 
475
475
  .assistant-markdown .markdown-body p,
@@ -477,2533 +477,2533 @@
477
477
  .assistant-markdown .markdown-body ol,
478
478
  .assistant-markdown .markdown-body pre,
479
479
  .assistant-markdown .markdown-body blockquote {
480
- margin: 0.375rem 0;
480
+ margin: 0.375rem 0;
481
481
  }
482
482
 
483
483
  .assistant-markdown .markdown-body h1,
484
484
  .assistant-markdown .markdown-body h2,
485
485
  .assistant-markdown .markdown-body h3,
486
486
  .assistant-markdown .markdown-body h4 {
487
- margin: 0.625rem 0 0.25rem;
487
+ margin: 0.625rem 0 0.25rem;
488
488
  }
489
489
 
490
490
  .assistant-markdown .markdown-body h3 {
491
- font-size: 0.9375rem;
491
+ font-size: 0.9375rem;
492
492
  }
493
493
 
494
494
  .assistant-markdown .markdown-body ul,
495
495
  .assistant-markdown .markdown-body ol {
496
- padding-left: 1.125rem;
496
+ padding-left: 1.125rem;
497
497
  }
498
498
 
499
499
  .assistant-markdown .markdown-body li + li {
500
- margin-top: 0.125rem;
500
+ margin-top: 0.125rem;
501
501
  }
502
502
 
503
503
  .assistant-markdown .markdown-body p,
504
504
  .assistant-markdown .markdown-body li,
505
505
  .assistant-markdown .markdown-body td {
506
- color: var(--text-body);
506
+ color: var(--text-body);
507
507
  }
508
508
 
509
509
  .assistant-markdown .markdown-body strong {
510
- color: var(--text-heading);
510
+ color: var(--text-heading);
511
511
  }
512
512
 
513
513
  .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);
514
+ color: var(--text-heading);
515
+ background: var(--surface-code);
516
+ border-color: var(--surface-code-border);
517
517
  }
518
518
 
519
519
  .assistant-markdown > :first-child {
520
- margin-top: 0;
520
+ margin-top: 0;
521
521
  }
522
522
 
523
523
  .assistant-markdown > :last-child {
524
- margin-bottom: 0;
524
+ margin-bottom: 0;
525
525
  }
526
526
 
527
527
  .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;
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;
535
535
  }
536
536
 
537
537
  @keyframes assistant-cursor-pulse {
538
- 0%,
539
- 100% {
540
- opacity: 0.35;
541
- }
542
- 50% {
543
- opacity: 1;
544
- }
538
+ 0%,
539
+ 100% {
540
+ opacity: 0.35;
541
+ }
542
+ 50% {
543
+ opacity: 1;
544
+ }
545
545
  }
546
546
 
547
547
  .assistant-assistant-card .assistant-markdown {
548
- padding-bottom: 0.625rem;
548
+ padding-bottom: 0.625rem;
549
549
  }
550
550
 
551
551
  .assistant-assistant-card
552
- .assistant-markdown:has(+ .assistant-activity--embedded) {
553
- padding-bottom: 0.5rem;
552
+ .assistant-markdown:has(+ .assistant-activity--embedded) {
553
+ padding-bottom: 0.5rem;
554
554
  }
555
555
 
556
556
  .assistant-typing {
557
- display: flex;
558
- align-items: center;
559
- gap: 0.375rem;
560
- padding: 0.125rem 0;
557
+ display: flex;
558
+ align-items: center;
559
+ gap: 0.375rem;
560
+ padding: 0.125rem 0;
561
561
  }
562
562
 
563
563
  .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;
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;
569
569
  }
570
570
 
571
571
  .assistant-activity {
572
- min-width: 0;
572
+ min-width: 0;
573
573
  }
574
574
 
575
575
  .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;
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;
587
587
  }
588
588
 
589
589
  .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;
590
+ background: transparent;
591
+ color: var(--log-syntax-base);
592
+ white-space: pre-wrap;
593
+ overflow-wrap: anywhere;
594
+ word-break: break-word;
595
595
  }
596
596
 
597
597
  .assistant-activity pre .hljs .hljs-attr,
598
598
  .assistant-activity pre .hljs .hljs-property,
599
599
  .assistant-activity pre .hljs .hljs-title {
600
- color: var(--log-syntax-key);
600
+ color: var(--log-syntax-key);
601
601
  }
602
602
 
603
603
  .assistant-activity pre .hljs .hljs-string {
604
- color: var(--log-syntax-string);
604
+ color: var(--log-syntax-string);
605
605
  }
606
606
 
607
607
  .assistant-activity pre .hljs .hljs-number {
608
- color: var(--log-syntax-number);
608
+ color: var(--log-syntax-number);
609
609
  }
610
610
 
611
611
  .assistant-activity pre .hljs .hljs-literal,
612
612
  .assistant-activity pre .hljs .hljs-keyword {
613
- color: var(--log-syntax-literal);
613
+ color: var(--log-syntax-literal);
614
614
  }
615
615
 
616
616
  .assistant-activity pre .hljs .hljs-punctuation {
617
- color: var(--log-syntax-punctuation);
617
+ color: var(--log-syntax-punctuation);
618
618
  }
619
619
 
620
620
  .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);
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);
627
627
  }
628
628
 
629
629
  .assistant-activity__live::before {
630
- content: "";
631
- width: 0.375rem;
632
- height: 0.375rem;
633
- border-radius: 9999px;
634
- background: var(--text-brand);
630
+ content: "";
631
+ width: 0.375rem;
632
+ height: 0.375rem;
633
+ border-radius: 9999px;
634
+ background: var(--text-brand);
635
635
  }
636
636
 
637
637
  .assistant-activity--embedded {
638
- background: var(--surface-chat-trace);
639
- overflow: hidden;
638
+ background: var(--surface-chat-trace);
639
+ overflow: hidden;
640
640
  }
641
641
 
642
642
  .assistant-assistant-card .assistant-activity--embedded {
643
- border-top: 1px solid var(--border-default);
643
+ border-top: 1px solid var(--border-default);
644
644
  }
645
645
 
646
646
  .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
- );
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
+ );
658
658
  }
659
659
 
660
660
  .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;
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;
673
673
  }
674
674
 
675
675
  .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;
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;
683
683
  }
684
684
 
685
685
  .assistant-activity__toggle:hover .assistant-activity__toggle-chevron {
686
- color: var(--text-chat-secondary);
686
+ color: var(--text-chat-secondary);
687
687
  }
688
688
 
689
689
  .assistant-activity__toggle-chevron--open {
690
- transform: rotate(90deg);
690
+ transform: rotate(90deg);
691
691
  }
692
692
 
693
693
  .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);
694
+ font-size: 0.625rem;
695
+ font-weight: 600;
696
+ letter-spacing: 0.04em;
697
+ text-transform: uppercase;
698
+ color: var(--text-chat-tertiary);
699
699
  }
700
700
 
701
701
  .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;
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;
709
709
  }
710
710
 
711
711
  .assistant-activity__steps {
712
- list-style: none;
713
- margin: 0;
714
- padding: 0.375rem 0.875rem 0.625rem;
712
+ list-style: none;
713
+ margin: 0;
714
+ padding: 0.375rem 0.875rem 0.625rem;
715
715
  }
716
716
 
717
717
  .assistant-activity-step {
718
- display: flex;
719
- gap: 0.625rem;
720
- min-width: 0;
718
+ display: flex;
719
+ gap: 0.625rem;
720
+ min-width: 0;
721
721
  }
722
722
 
723
723
  .assistant-activity-step + .assistant-activity-step {
724
- margin-top: 0.125rem;
724
+ margin-top: 0.125rem;
725
725
  }
726
726
 
727
727
  .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;
728
+ display: flex;
729
+ width: 1.375rem;
730
+ flex-shrink: 0;
731
+ flex-direction: column;
732
+ align-items: center;
733
+ padding-top: 0.0625rem;
734
734
  }
735
735
 
736
736
  .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);
737
+ margin-block: 0.125rem;
738
+ width: 1px;
739
+ flex: 1;
740
+ min-height: 0.375rem;
741
+ background: var(--border-default);
742
742
  }
743
743
 
744
744
  .assistant-activity-step__body {
745
- min-width: 0;
746
- flex: 1;
747
- padding-bottom: 0.375rem;
745
+ min-width: 0;
746
+ flex: 1;
747
+ padding-bottom: 0.375rem;
748
748
  }
749
749
 
750
750
  .assistant-activity-step:last-child .assistant-activity-step__body {
751
- padding-bottom: 0;
751
+ padding-bottom: 0;
752
752
  }
753
753
 
754
754
  .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;
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;
771
771
  }
772
772
 
773
773
  .assistant-activity-step__header:hover {
774
- background: var(--overlay-hover);
775
- color: var(--text-heading);
774
+ background: var(--overlay-hover);
775
+ color: var(--text-heading);
776
776
  }
777
777
 
778
778
  .assistant-activity-step__header--active {
779
- color: var(--text-heading);
779
+ color: var(--text-heading);
780
780
  }
781
781
 
782
782
  .assistant-activity-step__header--static {
783
- cursor: default;
783
+ cursor: default;
784
784
  }
785
785
 
786
786
  .assistant-activity-step__header--static:hover {
787
- background: transparent;
788
- color: var(--text-chat-secondary);
787
+ background: transparent;
788
+ color: var(--text-chat-secondary);
789
789
  }
790
790
 
791
791
  .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;
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;
799
799
  }
800
800
 
801
801
  .assistant-activity-step__header:hover .assistant-activity-step__chevron {
802
- color: var(--text-chat-secondary);
802
+ color: var(--text-chat-secondary);
803
803
  }
804
804
 
805
805
  .assistant-activity-step__chevron--open {
806
- transform: rotate(90deg);
806
+ transform: rotate(90deg);
807
807
  }
808
808
 
809
809
  .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;
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;
818
818
  }
819
819
 
820
820
  .assistant-activity-step__label-text {
821
- overflow: hidden;
822
- text-overflow: ellipsis;
823
- white-space: nowrap;
821
+ overflow: hidden;
822
+ text-overflow: ellipsis;
823
+ white-space: nowrap;
824
824
  }
825
825
 
826
826
  .assistant-activity-step__tool-icon {
827
- width: 0.75rem;
828
- height: 0.75rem;
829
- flex-shrink: 0;
830
- opacity: 0.6;
827
+ width: 0.75rem;
828
+ height: 0.75rem;
829
+ flex-shrink: 0;
830
+ opacity: 0.6;
831
831
  }
832
832
 
833
833
  .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;
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;
840
840
  }
841
841
 
842
842
  .assistant-activity-step__details--interactive {
843
- border-color: transparent;
844
- background: transparent;
845
- padding: 0;
843
+ border-color: transparent;
844
+ background: transparent;
845
+ padding: 0;
846
846
  }
847
847
 
848
848
  .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);
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);
855
855
  }
856
856
 
857
857
  .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;
858
+ min-width: 0;
859
+ border-radius: 0.375rem;
860
+ background: var(--surface-inset);
861
+ padding: 0.25rem 0.5rem;
862
862
  }
863
863
 
864
864
  .assistant-activity-step__json-block pre {
865
- max-height: 8rem;
866
- overflow-y: auto;
865
+ max-height: 8rem;
866
+ overflow-y: auto;
867
867
  }
868
868
 
869
869
  .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);
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);
879
879
  }
880
880
 
881
881
  .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);
882
+ color: var(--text-brand);
883
+ background: var(--surface-promo);
884
+ box-shadow: 0 0 0 1px var(--border-brand-subtle);
885
885
  }
886
886
 
887
887
  .assistant-icon-spin {
888
- animation: assistant-icon-spin 0.85s linear infinite;
888
+ animation: assistant-icon-spin 0.85s linear infinite;
889
889
  }
890
890
 
891
891
  .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);
892
+ color: var(--text-danger);
893
+ background: var(--danger-soft);
894
+ box-shadow: 0 0 0 1px var(--border-danger-subtle);
895
895
  }
896
896
 
897
897
  .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;
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;
907
907
  }
908
908
 
909
909
  .assistant-composer:focus-within {
910
- border-color: var(--border-default-medium);
910
+ border-color: var(--border-default-medium);
911
911
  }
912
912
 
913
913
  .assistant-composer__input-row {
914
- display: flex;
915
- align-items: flex-end;
916
- gap: 0.5rem;
917
- padding: 0.5rem;
914
+ display: flex;
915
+ align-items: flex-end;
916
+ gap: 0.5rem;
917
+ padding: 0.5rem;
918
918
  }
919
919
 
920
920
  .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;
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;
933
933
  }
934
934
 
935
935
  .assistant-composer__textarea:focus,
936
936
  .assistant-composer__textarea:focus-visible {
937
- outline: none;
938
- box-shadow: none;
937
+ outline: none;
938
+ box-shadow: none;
939
939
  }
940
940
 
941
941
  .assistant-composer__textarea::placeholder {
942
- color: var(--text-chat-tertiary);
942
+ color: var(--text-chat-tertiary);
943
943
  }
944
944
 
945
945
  .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;
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;
952
952
  }
953
953
 
954
954
  .assistant-composer__tools {
955
- display: inline-flex;
956
- flex-shrink: 0;
957
- align-items: center;
958
- gap: 0.125rem;
959
- margin-left: auto;
955
+ display: inline-flex;
956
+ flex-shrink: 0;
957
+ align-items: center;
958
+ gap: 0.125rem;
959
+ margin-left: auto;
960
960
  }
961
961
 
962
962
  .assistant-composer__tool {
963
- padding: 0.375rem;
963
+ padding: 0.375rem;
964
964
  }
965
965
 
966
966
  .assistant-composer__tool-spinner {
967
- animation: assistant-empty-state-spin 0.8s linear infinite;
967
+ animation: assistant-empty-state-spin 0.8s linear infinite;
968
968
  }
969
969
 
970
970
  .assistant-composer__hint {
971
- margin-top: 0.5rem;
972
- text-align: center;
973
- font-size: 0.6875rem;
974
- color: var(--text-chat-tertiary);
971
+ margin-top: 0.5rem;
972
+ text-align: center;
973
+ font-size: 0.6875rem;
974
+ color: var(--text-chat-tertiary);
975
975
  }
976
976
 
977
977
  .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);
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);
989
989
  }
990
990
 
991
991
  .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);
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);
999
999
  }
1000
1000
 
1001
1001
  .composer-command-menu__list {
1002
- max-height: 12rem;
1003
- overflow-y: auto;
1004
- padding-block: 0.25rem;
1002
+ max-height: 12rem;
1003
+ overflow-y: auto;
1004
+ padding-block: 0.25rem;
1005
1005
  }
1006
1006
 
1007
1007
  .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;
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;
1016
1016
  }
1017
1017
 
1018
1018
  .composer-command-menu__item:hover,
1019
1019
  .composer-command-menu__item--active {
1020
- background: var(--overlay-hover);
1020
+ background: var(--overlay-hover);
1021
1021
  }
1022
1022
 
1023
1023
  .composer-command-menu__icon {
1024
- margin-top: 0.125rem;
1025
- flex-shrink: 0;
1026
- color: var(--text-chat-tertiary);
1024
+ margin-top: 0.125rem;
1025
+ flex-shrink: 0;
1026
+ color: var(--text-chat-tertiary);
1027
1027
  }
1028
1028
 
1029
1029
  .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);
1030
+ display: block;
1031
+ font-family: ui-monospace, monospace;
1032
+ font-size: 0.75rem;
1033
+ font-weight: 500;
1034
+ color: var(--text-heading);
1035
1035
  }
1036
1036
 
1037
1037
  .composer-command-menu__description {
1038
- display: block;
1039
- margin-top: 0.125rem;
1040
- font-size: 0.6875rem;
1041
- color: var(--text-chat-secondary);
1038
+ display: block;
1039
+ margin-top: 0.125rem;
1040
+ font-size: 0.6875rem;
1041
+ color: var(--text-chat-secondary);
1042
1042
  }
1043
1043
 
1044
1044
  .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;
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;
1054
1054
  }
1055
1055
 
1056
1056
  .assistant-command-error__text {
1057
- min-width: 0;
1058
- font-size: 0.75rem;
1059
- line-height: 1.4;
1060
- color: var(--text-danger);
1057
+ min-width: 0;
1058
+ font-size: 0.75rem;
1059
+ line-height: 1.4;
1060
+ color: var(--text-danger);
1061
1061
  }
1062
1062
 
1063
1063
  .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;
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;
1074
1074
  }
1075
1075
 
1076
1076
  .assistant-command-error__dismiss:hover {
1077
- background: color-mix(in oklab, var(--danger) 12%, transparent);
1077
+ background: color-mix(in oklab, var(--danger) 12%, transparent);
1078
1078
  }
1079
1079
 
1080
1080
  .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));
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));
1084
1084
  }
1085
1085
 
1086
1086
  .assistant-llm-setup--banner {
1087
- margin-bottom: 0.625rem;
1088
- padding: 0.5rem 0.625rem;
1087
+ margin-bottom: 0.625rem;
1088
+ padding: 0.5rem 0.625rem;
1089
1089
  }
1090
1090
 
1091
1091
  .assistant-llm-setup__row {
1092
- display: flex;
1093
- align-items: center;
1094
- gap: 0.5rem;
1095
- min-width: 0;
1092
+ display: flex;
1093
+ align-items: center;
1094
+ gap: 0.5rem;
1095
+ min-width: 0;
1096
1096
  }
1097
1097
 
1098
1098
  .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));
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));
1108
1108
  }
1109
1109
 
1110
1110
  .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));
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));
1117
1117
  }
1118
1118
 
1119
1119
  .assistant-llm-setup .assistant-llm-setup__copy strong {
1120
- font-weight: 600;
1121
- color: var(--text-body-strong, var(--text-body));
1120
+ font-weight: 600;
1121
+ color: var(--text-body-strong, var(--text-body));
1122
1122
  }
1123
1123
 
1124
1124
  .assistant-llm-setup__sep {
1125
- margin-inline: 0.25rem;
1126
- opacity: 0.55;
1125
+ margin-inline: 0.25rem;
1126
+ opacity: 0.55;
1127
1127
  }
1128
1128
 
1129
1129
  .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;
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;
1147
1147
  }
1148
1148
 
1149
1149
  .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));
1150
+ background: color-mix(in oklab, var(--surface-panel) 78%, var(--brand) 22%);
1151
+ border-color: var(--border-brand-subtle, var(--border-default));
1152
1152
  }
1153
1153
 
1154
1154
  .assistant-llm-setup__chip:focus-visible {
1155
- outline: 2px solid var(--border-brand-subtle, var(--border-default));
1156
- outline-offset: 2px;
1155
+ outline: 2px solid var(--border-brand-subtle, var(--border-default));
1156
+ outline-offset: 2px;
1157
1157
  }
1158
1158
 
1159
1159
  .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;
1160
+ min-width: 0;
1161
+ flex: 1;
1162
+ padding: 0.625rem 0.75rem;
1163
+ border-radius: 0.375rem 1.125rem 1.125rem 1.125rem;
1164
1164
  }
1165
1165
 
1166
1166
  .assistant-llm-setup--inline .assistant-llm-setup__copy {
1167
- font-size: 0.8125rem;
1167
+ font-size: 0.8125rem;
1168
1168
  }
1169
1169
 
1170
1170
  .assistant-llm-setup__label {
1171
- font-weight: 600;
1172
- color: var(--text-body-strong, var(--text-body));
1171
+ font-weight: 600;
1172
+ color: var(--text-body-strong, var(--text-body));
1173
1173
  }
1174
1174
 
1175
1175
  .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;
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;
1189
1189
  }
1190
1190
 
1191
1191
  .assistant-llm-setup__action:hover {
1192
- text-decoration-color: currentColor;
1192
+ text-decoration-color: currentColor;
1193
1193
  }
1194
1194
 
1195
1195
  .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;
1196
+ outline: 2px solid var(--border-brand-subtle, var(--border-default));
1197
+ outline-offset: 2px;
1198
+ border-radius: 0.125rem;
1199
1199
  }
1200
1200
 
1201
1201
  .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;
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;
1209
1209
  }
1210
1210
 
1211
1211
  .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);
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);
1231
1231
  }
1232
1232
 
1233
1233
  .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;
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;
1245
1245
  }
1246
1246
 
1247
1247
  .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;
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;
1255
1255
  }
1256
1256
 
1257
1257
  .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);
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);
1264
1264
  }
1265
1265
 
1266
1266
  .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;
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;
1277
1277
  }
1278
1278
 
1279
1279
  .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);
1280
+ margin: 0;
1281
+ font-size: 1.125rem;
1282
+ font-weight: 600;
1283
+ letter-spacing: -0.02em;
1284
+ color: var(--text-heading);
1285
1285
  }
1286
1286
 
1287
1287
  .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);
1288
+ margin: 0;
1289
+ max-width: 32ch;
1290
+ font-size: 0.8125rem;
1291
+ line-height: 1.55;
1292
+ color: var(--text-body-subtle);
1293
1293
  }
1294
1294
 
1295
1295
  .assistant-empty-state__capabilities {
1296
- display: flex;
1297
- flex-wrap: wrap;
1298
- justify-content: center;
1299
- gap: 0.375rem;
1300
- margin-top: 0.25rem;
1296
+ display: flex;
1297
+ flex-wrap: wrap;
1298
+ justify-content: center;
1299
+ gap: 0.375rem;
1300
+ margin-top: 0.25rem;
1301
1301
  }
1302
1302
 
1303
1303
  .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);
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);
1314
1314
  }
1315
1315
 
1316
1316
  .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;
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;
1335
1335
  }
1336
1336
 
1337
1337
  .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));
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));
1342
1342
  }
1343
1343
 
1344
1344
  .assistant-empty-state__cta:active {
1345
- transform: translateY(0);
1345
+ transform: translateY(0);
1346
1346
  }
1347
1347
 
1348
1348
  .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);
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);
1359
1359
  }
1360
1360
 
1361
1361
  .assistant-empty-state__cta-text {
1362
- min-width: 0;
1363
- flex: 1;
1362
+ min-width: 0;
1363
+ flex: 1;
1364
1364
  }
1365
1365
 
1366
1366
  .assistant-empty-state__cta-label {
1367
- display: block;
1368
- font-size: 0.8125rem;
1369
- font-weight: 600;
1370
- color: var(--text-heading);
1367
+ display: block;
1368
+ font-size: 0.8125rem;
1369
+ font-weight: 600;
1370
+ color: var(--text-heading);
1371
1371
  }
1372
1372
 
1373
1373
  .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);
1374
+ display: block;
1375
+ margin-top: 0.125rem;
1376
+ font-size: 0.6875rem;
1377
+ line-height: 1.4;
1378
+ color: var(--text-body-subtle);
1379
1379
  }
1380
1380
 
1381
1381
  .assistant-empty-state__section {
1382
- min-width: 0;
1382
+ min-width: 0;
1383
1383
  }
1384
1384
 
1385
1385
  .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;
1386
+ display: flex;
1387
+ align-items: center;
1388
+ justify-content: space-between;
1389
+ gap: 0.75rem;
1390
+ margin-bottom: 0.625rem;
1391
1391
  }
1392
1392
 
1393
1393
  .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);
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);
1403
1403
  }
1404
1404
 
1405
1405
  .assistant-empty-state__section-spinner {
1406
- animation: assistant-empty-state-spin 0.8s linear infinite;
1406
+ animation: assistant-empty-state-spin 0.8s linear infinite;
1407
1407
  }
1408
1408
 
1409
1409
  .assistant-empty-state__section-refresh {
1410
- gap: 0.375rem;
1411
- padding-inline: 0.5rem;
1412
- font-size: 0.75rem;
1410
+ gap: 0.375rem;
1411
+ padding-inline: 0.5rem;
1412
+ font-size: 0.75rem;
1413
1413
  }
1414
1414
 
1415
1415
  .assistant-empty-state__hero {
1416
- display: flex;
1417
- flex-direction: column;
1418
- align-items: center;
1419
- gap: 0.75rem;
1420
- text-align: center;
1416
+ display: flex;
1417
+ flex-direction: column;
1418
+ align-items: center;
1419
+ gap: 0.75rem;
1420
+ text-align: center;
1421
1421
  }
1422
1422
 
1423
1423
  .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);
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);
1433
1433
  }
1434
1434
 
1435
1435
  .assistant-empty-state__grid {
1436
- display: grid;
1437
- grid-template-columns: minmax(0, 1fr);
1438
- gap: 0.625rem;
1436
+ display: grid;
1437
+ grid-template-columns: minmax(0, 1fr);
1438
+ gap: 0.625rem;
1439
1439
  }
1440
1440
 
1441
1441
  @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
- }
1442
+ .assistant-empty-state__grid:not(.assistant-empty-state__grid--compact) {
1443
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1444
+ }
1445
1445
  }
1446
1446
 
1447
1447
  .assistant-empty-state__grid--compact {
1448
- margin-top: 0;
1448
+ margin-top: 0;
1449
1449
  }
1450
1450
 
1451
1451
  .assistant-empty-state__actions {
1452
- display: flex;
1453
- justify-content: center;
1454
- margin-top: 1rem;
1452
+ display: flex;
1453
+ justify-content: center;
1454
+ margin-top: 1rem;
1455
1455
  }
1456
1456
 
1457
1457
  .assistant-empty-state__actions--inline {
1458
- margin-top: 0.75rem;
1459
- margin-bottom: -0.25rem;
1458
+ margin-top: 0.75rem;
1459
+ margin-bottom: -0.25rem;
1460
1460
  }
1461
1461
 
1462
1462
  .assistant-empty-state__fetch {
1463
- gap: 0.5rem;
1463
+ gap: 0.5rem;
1464
1464
  }
1465
1465
 
1466
1466
  .assistant-empty-state__refresh {
1467
- font-size: 0.8125rem;
1467
+ font-size: 0.8125rem;
1468
1468
  }
1469
1469
 
1470
1470
  .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));
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));
1478
1478
  }
1479
1479
 
1480
1480
  .assistant-error-callout--embedded {
1481
- padding: 0.625rem 0.75rem;
1481
+ padding: 0.625rem 0.75rem;
1482
1482
  }
1483
1483
 
1484
1484
  .assistant-error-callout--panel {
1485
- margin-top: 0.25rem;
1486
- padding: 0.625rem 0.75rem;
1485
+ margin-top: 0.25rem;
1486
+ padding: 0.625rem 0.75rem;
1487
1487
  }
1488
1488
 
1489
1489
  .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);
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);
1499
1499
  }
1500
1500
 
1501
1501
  .assistant-error-callout__body {
1502
- display: flex;
1503
- min-width: 0;
1504
- flex: 1;
1505
- flex-direction: column;
1506
- gap: 0.125rem;
1502
+ display: flex;
1503
+ min-width: 0;
1504
+ flex: 1;
1505
+ flex-direction: column;
1506
+ gap: 0.125rem;
1507
1507
  }
1508
1508
 
1509
1509
  .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));
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));
1515
1515
  }
1516
1516
 
1517
1517
  .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);
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);
1523
1523
  }
1524
1524
 
1525
1525
  .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));
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));
1530
1530
  }
1531
1531
 
1532
1532
  .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;
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;
1551
1551
  }
1552
1552
 
1553
1553
  .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);
1554
+ background: color-mix(in oklab, var(--surface-panel) 82%, var(--danger) 18%);
1555
+ border-color: color-mix(in oklab, var(--danger) 40%, transparent);
1556
1556
  }
1557
1557
 
1558
1558
  .assistant-error-callout__chip:focus-visible {
1559
- outline: 2px solid color-mix(in oklab, var(--danger) 45%, transparent);
1560
- outline-offset: 2px;
1559
+ outline: 2px solid color-mix(in oklab, var(--danger) 45%, transparent);
1560
+ outline-offset: 2px;
1561
1561
  }
1562
1562
 
1563
1563
  .assistant-error-callout__chip:disabled {
1564
- opacity: 0.55;
1565
- cursor: not-allowed;
1564
+ opacity: 0.55;
1565
+ cursor: not-allowed;
1566
1566
  }
1567
1567
 
1568
1568
  .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);
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);
1574
1574
  }
1575
1575
 
1576
1576
  .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;
1577
+ display: flex;
1578
+ align-items: center;
1579
+ justify-content: space-between;
1580
+ gap: 0.5rem;
1581
+ margin-bottom: 0.5rem;
1582
1582
  }
1583
1583
 
1584
1584
  .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);
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);
1591
1591
  }
1592
1592
 
1593
1593
  .assistant-suggestions-strip__actions {
1594
- display: inline-flex;
1595
- align-items: center;
1596
- gap: 0.25rem;
1594
+ display: inline-flex;
1595
+ align-items: center;
1596
+ gap: 0.25rem;
1597
1597
  }
1598
1598
 
1599
1599
  .assistant-suggestions-strip__refresh {
1600
- gap: 0.375rem;
1601
- font-size: 0.8125rem;
1600
+ gap: 0.375rem;
1601
+ font-size: 0.8125rem;
1602
1602
  }
1603
1603
 
1604
1604
  .assistant-panel__clear {
1605
- padding: 0.5rem;
1605
+ padding: 0.5rem;
1606
1606
  }
1607
1607
 
1608
1608
  .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;
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;
1628
1628
  }
1629
1629
 
1630
1630
  .assistant-empty-state__prompt:not(
1631
- .assistant-empty-state__prompt--compact
1631
+ .assistant-empty-state__prompt--compact
1632
1632
  ):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));
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));
1637
1637
  }
1638
1638
 
1639
1639
  .assistant-empty-state__prompt--compact {
1640
- align-items: center;
1641
- padding: 0.625rem 0.75rem;
1640
+ align-items: center;
1641
+ padding: 0.625rem 0.75rem;
1642
1642
  }
1643
1643
 
1644
1644
  .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));
1645
+ border-color: var(--border-brand-subtle);
1646
+ background: color-mix(in oklab, var(--brand) 4%, var(--surface-panel));
1647
1647
  }
1648
1648
 
1649
1649
  .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);
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);
1660
1660
  }
1661
1661
 
1662
1662
  .assistant-empty-state__prompt--compact .assistant-empty-state__icon {
1663
- width: 1.75rem;
1664
- height: 1.75rem;
1663
+ width: 1.75rem;
1664
+ height: 1.75rem;
1665
1665
  }
1666
1666
 
1667
1667
  .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);
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);
1685
1685
  }
1686
1686
 
1687
1687
  .model-selector--footer {
1688
- min-width: 0;
1689
- flex: 1;
1688
+ min-width: 0;
1689
+ flex: 1;
1690
1690
  }
1691
1691
 
1692
1692
  .model-selector--footer .model-selector__field {
1693
- width: 100%;
1694
- max-width: none;
1693
+ width: 100%;
1694
+ max-width: none;
1695
1695
  }
1696
1696
 
1697
1697
  .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);
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);
1704
1704
  }
1705
1705
 
1706
1706
  .model-selector--footer .model-selector__input:focus,
1707
1707
  .model-selector--footer .model-selector__input:focus-visible {
1708
- outline: none;
1709
- box-shadow: none;
1708
+ outline: none;
1709
+ box-shadow: none;
1710
1710
  }
1711
1711
 
1712
1712
  .model-selector--footer .model-selector__list--drop-up {
1713
- top: auto;
1714
- bottom: calc(100% + 0.375rem);
1715
- z-index: 40;
1713
+ top: auto;
1714
+ bottom: calc(100% + 0.375rem);
1715
+ z-index: 40;
1716
1716
  }
1717
1717
 
1718
1718
  /* Interactive confirmation / choices in trace */
1719
1719
  .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;
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;
1732
1732
  }
1733
1733
 
1734
1734
  .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);
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);
1742
1742
  }
1743
1743
 
1744
1744
  .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
- );
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
+ );
1755
1755
  }
1756
1756
 
1757
1757
  .assistant-interactive-prompt--caution::before {
1758
- background: var(--warning);
1758
+ background: var(--warning);
1759
1759
  }
1760
1760
 
1761
1761
  .assistant-interactive-prompt__main {
1762
- display: flex;
1763
- align-items: flex-start;
1764
- gap: 0.4375rem;
1765
- min-width: 0;
1762
+ display: flex;
1763
+ align-items: flex-start;
1764
+ gap: 0.4375rem;
1765
+ min-width: 0;
1766
1766
  }
1767
1767
 
1768
1768
  .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
- );
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
+ );
1782
1782
  }
1783
1783
 
1784
1784
  .assistant-interactive-prompt__icon--caution {
1785
- color: var(--warning);
1786
- background: var(--warning-soft);
1785
+ color: var(--warning);
1786
+ background: var(--warning-soft);
1787
1787
  }
1788
1788
 
1789
1789
  .assistant-interactive-prompt__content {
1790
- display: flex;
1791
- flex-direction: column;
1792
- gap: 0.1875rem;
1793
- min-width: 0;
1794
- flex: 1;
1790
+ display: flex;
1791
+ flex-direction: column;
1792
+ gap: 0.1875rem;
1793
+ min-width: 0;
1794
+ flex: 1;
1795
1795
  }
1796
1796
 
1797
1797
  .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);
1798
+ margin: 0;
1799
+ font-size: 0.75rem;
1800
+ font-weight: 600;
1801
+ line-height: 1.25;
1802
+ color: var(--text-heading);
1803
1803
  }
1804
1804
 
1805
1805
  .assistant-interactive-prompt__body {
1806
- display: flex;
1807
- flex-direction: column;
1808
- gap: 0.125rem;
1809
- min-width: 0;
1806
+ display: flex;
1807
+ flex-direction: column;
1808
+ gap: 0.125rem;
1809
+ min-width: 0;
1810
1810
  }
1811
1811
 
1812
1812
  .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;
1813
+ margin: 0;
1814
+ font-size: 0.75rem;
1815
+ line-height: 1.4;
1816
+ color: var(--text-chat-secondary);
1817
+ overflow-wrap: anywhere;
1818
1818
  }
1819
1819
 
1820
1820
  .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;
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;
1827
1827
  }
1828
1828
 
1829
1829
  .assistant-interactive-prompt__action--caution {
1830
- color: var(--text-danger);
1830
+ color: var(--text-danger);
1831
1831
  }
1832
1832
 
1833
1833
  .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);
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);
1840
1840
  }
1841
1841
 
1842
1842
  .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
- );
1843
+ border-top-color: color-mix(
1844
+ in oklab,
1845
+ var(--warning) 15%,
1846
+ var(--border-default) 85%
1847
+ );
1848
1848
  }
1849
1849
 
1850
1850
  .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;
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;
1857
1857
  }
1858
1858
 
1859
1859
  .assistant-interactive-prompt__actions {
1860
- display: flex;
1861
- flex-shrink: 0;
1862
- align-items: center;
1863
- gap: 0.3125rem;
1860
+ display: flex;
1861
+ flex-shrink: 0;
1862
+ align-items: center;
1863
+ gap: 0.3125rem;
1864
1864
  }
1865
1865
 
1866
1866
  .assistant-interactive-choice-list {
1867
- display: flex;
1868
- flex-direction: column;
1869
- gap: 0.375rem;
1867
+ display: flex;
1868
+ flex-direction: column;
1869
+ gap: 0.375rem;
1870
1870
  }
1871
1871
 
1872
1872
  .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;
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;
1884
1884
  }
1885
1885
 
1886
1886
  .assistant-interactive-choice:hover:not(
1887
- .assistant-interactive-choice--disabled
1887
+ .assistant-interactive-choice--disabled
1888
1888
  ) {
1889
- border-color: var(--border-brand-subtle);
1890
- background: var(--overlay-hover);
1889
+ border-color: var(--border-brand-subtle);
1890
+ background: var(--overlay-hover);
1891
1891
  }
1892
1892
 
1893
1893
  .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
- );
1894
+ border-color: var(--border-brand-subtle);
1895
+ background: color-mix(
1896
+ in oklab,
1897
+ var(--accent-violet) 8%,
1898
+ var(--surface-inset)
1899
+ );
1900
1900
  }
1901
1901
 
1902
1902
  .assistant-interactive-choice--disabled {
1903
- cursor: not-allowed;
1904
- opacity: 0.55;
1903
+ cursor: not-allowed;
1904
+ opacity: 0.55;
1905
1905
  }
1906
1906
 
1907
1907
  .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;
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;
1922
1922
  }
1923
1923
 
1924
1924
  .assistant-interactive-choice__check--on {
1925
- border-color: var(--accent-violet);
1926
- background: var(--accent-violet);
1925
+ border-color: var(--accent-violet);
1926
+ background: var(--accent-violet);
1927
1927
  }
1928
1928
 
1929
1929
  .assistant-interactive-choice__content {
1930
- min-width: 0;
1931
- flex: 1 1 auto;
1930
+ min-width: 0;
1931
+ flex: 1 1 auto;
1932
1932
  }
1933
1933
 
1934
1934
  .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;
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;
1941
1941
  }
1942
1942
 
1943
1943
  .assistant-interactive-choice__label--mono {
1944
- font-family: ui-monospace, monospace;
1945
- font-size: 0.6875rem;
1946
- letter-spacing: -0.01em;
1944
+ font-family: ui-monospace, monospace;
1945
+ font-size: 0.6875rem;
1946
+ letter-spacing: -0.01em;
1947
1947
  }
1948
1948
 
1949
1949
  .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;
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;
1956
1956
  }
1957
1957
 
1958
1958
  .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;
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;
1976
1976
  }
1977
1977
 
1978
1978
  .assistant-interactive-choice:hover .assistant-interactive-kbd,
1979
1979
  .assistant-interactive-choice--selected .assistant-interactive-kbd {
1980
- opacity: 1;
1980
+ opacity: 1;
1981
1981
  }
1982
1982
 
1983
1983
  .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);
1984
+ color: var(--warning);
1985
+ background: var(--warning-soft);
1986
+ box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 30%, transparent);
1987
1987
  }
1988
1988
 
1989
1989
  .assistant-activity-step-details--interactive {
1990
- display: flex;
1991
- flex-direction: column;
1992
- gap: 0.625rem;
1990
+ display: flex;
1991
+ flex-direction: column;
1992
+ gap: 0.625rem;
1993
1993
  }
1994
1994
 
1995
1995
  /* Reply suggestions */
1996
1996
  .assistant-reply-suggestions {
1997
- padding: 0.5rem 0.875rem 0.625rem;
1997
+ padding: 0.5rem 0.875rem 0.625rem;
1998
1998
  }
1999
1999
 
2000
2000
  .assistant-assistant-card .assistant-reply-suggestions {
2001
- border-top: 1px solid var(--border-default);
2002
- background: var(--surface-chat-trace);
2001
+ border-top: 1px solid var(--border-default);
2002
+ background: var(--surface-chat-trace);
2003
2003
  }
2004
2004
 
2005
2005
  .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);
2006
+ overflow: clip;
2007
+ border-radius: calc(var(--radius-base) - 1px);
2008
+ border: 1px solid var(--border-default-medium);
2009
+ background: var(--surface-inset);
2010
2010
  }
2011
2011
 
2012
2012
  .assistant-reply-suggestions__list {
2013
- display: flex;
2014
- flex-direction: column;
2013
+ display: flex;
2014
+ flex-direction: column;
2015
2015
  }
2016
2016
 
2017
2017
  .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;
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;
2030
2030
  }
2031
2031
 
2032
2032
  .assistant-reply-option:last-of-type {
2033
- border-bottom: none;
2033
+ border-bottom: none;
2034
2034
  }
2035
2035
 
2036
2036
  .assistant-reply-option:hover:not(:disabled) {
2037
- background: var(--overlay-hover);
2037
+ background: var(--overlay-hover);
2038
2038
  }
2039
2039
 
2040
2040
  .assistant-reply-option__arrow {
2041
- opacity: 0;
2042
- color: var(--text-chat-tertiary);
2043
- transition:
2044
- opacity 120ms ease,
2045
- color 120ms ease;
2041
+ opacity: 0;
2042
+ color: var(--text-chat-tertiary);
2043
+ transition:
2044
+ opacity 120ms ease,
2045
+ color 120ms ease;
2046
2046
  }
2047
2047
 
2048
2048
  .assistant-reply-option:hover:not(:disabled) .assistant-reply-option__arrow {
2049
- opacity: 1;
2050
- color: var(--accent-violet);
2049
+ opacity: 1;
2050
+ color: var(--accent-violet);
2051
2051
  }
2052
2052
 
2053
2053
  .assistant-reply-option:disabled {
2054
- cursor: not-allowed;
2055
- opacity: 0.55;
2054
+ cursor: not-allowed;
2055
+ opacity: 0.55;
2056
2056
  }
2057
2057
 
2058
2058
  .assistant-reply-option--custom {
2059
- border-bottom-style: dashed;
2059
+ border-bottom-style: dashed;
2060
2060
  }
2061
2061
 
2062
2062
  .assistant-reply-option--structured {
2063
- align-items: flex-start;
2064
- padding-block: 0.5rem;
2063
+ align-items: flex-start;
2064
+ padding-block: 0.5rem;
2065
2065
  }
2066
2066
 
2067
2067
  .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);
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);
2086
2086
  }
2087
2087
 
2088
2088
  .assistant-reply-option__body {
2089
- min-width: 0;
2090
- flex: 1;
2091
- display: flex;
2092
- flex-direction: column;
2093
- gap: 0.125rem;
2089
+ min-width: 0;
2090
+ flex: 1;
2091
+ display: flex;
2092
+ flex-direction: column;
2093
+ gap: 0.125rem;
2094
2094
  }
2095
2095
 
2096
2096
  .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;
2097
+ font-size: 0.75rem;
2098
+ font-weight: 500;
2099
+ line-height: 1.35;
2100
+ color: var(--text-heading);
2101
+ overflow-wrap: anywhere;
2102
2102
  }
2103
2103
 
2104
2104
  .assistant-reply-option__meta {
2105
- font-size: 0.6875rem;
2106
- line-height: 1.35;
2107
- color: var(--text-chat-tertiary);
2108
- overflow-wrap: anywhere;
2105
+ font-size: 0.6875rem;
2106
+ line-height: 1.35;
2107
+ color: var(--text-chat-tertiary);
2108
+ overflow-wrap: anywhere;
2109
2109
  }
2110
2110
 
2111
2111
  .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);
2112
+ display: inline-flex;
2113
+ align-items: center;
2114
+ gap: 0.375rem;
2115
+ font-size: 0.75rem;
2116
+ color: var(--text-chat-secondary);
2117
2117
  }
2118
2118
 
2119
2119
  .assistant-reply-option__badges {
2120
- display: flex;
2121
- flex-wrap: wrap;
2122
- gap: 0.25rem;
2123
- margin-top: 0.125rem;
2120
+ display: flex;
2121
+ flex-wrap: wrap;
2122
+ gap: 0.25rem;
2123
+ margin-top: 0.125rem;
2124
2124
  }
2125
2125
 
2126
2126
  .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);
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);
2135
2135
  }
2136
2136
 
2137
2137
  .assistant-reply-badge__label {
2138
- font-weight: 600;
2139
- text-transform: uppercase;
2140
- color: var(--text-chat-tertiary);
2138
+ font-weight: 600;
2139
+ text-transform: uppercase;
2140
+ color: var(--text-chat-tertiary);
2141
2141
  }
2142
2142
 
2143
2143
  .assistant-reply-badge__value {
2144
- color: var(--text-heading);
2144
+ color: var(--text-heading);
2145
2145
  }
2146
2146
 
2147
2147
  .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
- );
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
+ );
2159
2159
  }
2160
2160
 
2161
2161
  .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);
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);
2172
2172
  }
2173
2173
 
2174
2174
  .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);
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);
2187
2187
  }
2188
2188
 
2189
2189
  /* ── Assistant panel shell ── */
2190
2190
  .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;
2191
+ display: flex;
2192
+ flex-direction: column;
2193
+ height: 100%;
2194
+ min-height: 0;
2195
+ width: 100%;
2196
+ margin-inline: auto;
2197
+ overflow: hidden;
2198
2198
  }
2199
2199
 
2200
2200
  .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;
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;
2208
2208
  }
2209
2209
 
2210
2210
  .assistant-panel__header-main {
2211
- display: flex;
2212
- min-width: 0;
2213
- align-items: center;
2214
- gap: 0.625rem;
2211
+ display: flex;
2212
+ min-width: 0;
2213
+ align-items: center;
2214
+ gap: 0.625rem;
2215
2215
  }
2216
2216
 
2217
2217
  .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);
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);
2228
2228
  }
2229
2229
 
2230
2230
  .assistant-panel__header-text {
2231
- min-width: 0;
2231
+ min-width: 0;
2232
2232
  }
2233
2233
 
2234
2234
  .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);
2235
+ margin: 0;
2236
+ font-size: 0.875rem;
2237
+ font-weight: 600;
2238
+ letter-spacing: -0.01em;
2239
+ color: var(--text-heading);
2240
2240
  }
2241
2241
 
2242
2242
  .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);
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);
2249
2249
  }
2250
2250
 
2251
2251
  .assistant-panel__clear {
2252
- padding: 0.5rem;
2252
+ padding: 0.5rem;
2253
2253
  }
2254
2254
 
2255
2255
  .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;
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;
2263
2263
  }
2264
2264
 
2265
2265
  .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);
2266
+ margin: 0;
2267
+ font-size: 0.875rem;
2268
+ font-weight: 600;
2269
+ letter-spacing: -0.01em;
2270
+ color: var(--text-heading);
2271
2271
  }
2272
2272
 
2273
2273
  .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);
2274
+ margin: 0.25rem 0 0;
2275
+ font-size: 0.6875rem;
2276
+ line-height: 1.5;
2277
+ color: var(--text-body-subtle);
2278
2278
  }
2279
2279
 
2280
2280
  .assistant-empty-state__prompt-text {
2281
- min-width: 0;
2282
- flex: 1;
2283
- text-align: left;
2281
+ min-width: 0;
2282
+ flex: 1;
2283
+ text-align: left;
2284
2284
  }
2285
2285
 
2286
2286
  .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);
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);
2293
2293
  }
2294
2294
 
2295
2295
  .assistant-empty-state__prompt--compact .assistant-empty-state__prompt-label {
2296
- padding-right: 0;
2297
- font-size: 0.75rem;
2296
+ padding-right: 0;
2297
+ font-size: 0.75rem;
2298
2298
  }
2299
2299
 
2300
2300
  .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);
2301
+ display: block;
2302
+ margin-top: 0.1875rem;
2303
+ font-size: 0.6875rem;
2304
+ line-height: 1.4;
2305
+ color: var(--text-body-subtle);
2306
2306
  }
2307
2307
 
2308
2308
  .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;
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;
2317
2317
  }
2318
2318
 
2319
2319
  .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);
2320
+ .assistant-empty-state__prompt--compact
2321
+ ):hover
2322
+ .assistant-empty-state__prompt-arrow {
2323
+ color: var(--text-brand);
2324
+ transform: translateX(2px);
2325
2325
  }
2326
2326
 
2327
2327
  .assistant-empty-state__prompt--compact .assistant-empty-state__prompt-arrow {
2328
- position: static;
2328
+ position: static;
2329
2329
  }
2330
2330
 
2331
2331
  .assistant-composer__send,
2332
2332
  .assistant-composer__stop {
2333
- flex-shrink: 0;
2334
- padding: 0.5rem;
2335
- border-radius: 0.75rem;
2333
+ flex-shrink: 0;
2334
+ padding: 0.5rem;
2335
+ border-radius: 0.75rem;
2336
2336
  }
2337
2337
 
2338
2338
  /* ── Assistant buttons (self-contained) ── */
2339
2339
  .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;
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;
2356
2356
  }
2357
2357
 
2358
2358
  .assistant-btn:active:not(:disabled) {
2359
- transform: scale(0.98);
2359
+ transform: scale(0.98);
2360
2360
  }
2361
2361
 
2362
2362
  .assistant-btn:disabled {
2363
- opacity: 0.45;
2364
- cursor: not-allowed;
2363
+ opacity: 0.45;
2364
+ cursor: not-allowed;
2365
2365
  }
2366
2366
 
2367
2367
  .assistant-btn--primary {
2368
- background: var(--brand);
2369
- color: var(--brand-on-surface);
2368
+ background: var(--brand);
2369
+ color: var(--brand-on-surface);
2370
2370
  }
2371
2371
 
2372
2372
  .assistant-btn--primary:hover:not(:disabled) {
2373
- filter: brightness(1.05);
2373
+ filter: brightness(1.05);
2374
2374
  }
2375
2375
 
2376
2376
  .assistant-btn--secondary {
2377
- background: var(--surface-panel);
2378
- border-color: var(--border-default);
2379
- color: var(--text-heading);
2377
+ background: var(--surface-panel);
2378
+ border-color: var(--border-default);
2379
+ color: var(--text-heading);
2380
2380
  }
2381
2381
 
2382
2382
  .assistant-btn--secondary:hover:not(:disabled) {
2383
- background: var(--overlay-hover);
2383
+ background: var(--overlay-hover);
2384
2384
  }
2385
2385
 
2386
2386
  .assistant-btn--ghost {
2387
- background: transparent;
2388
- color: var(--text-body);
2387
+ background: transparent;
2388
+ color: var(--text-body);
2389
2389
  }
2390
2390
 
2391
2391
  .assistant-btn--ghost:hover:not(:disabled) {
2392
- background: var(--overlay-hover);
2392
+ background: var(--overlay-hover);
2393
2393
  }
2394
2394
 
2395
2395
  .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;
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;
2407
2407
  }
2408
2408
 
2409
2409
  .assistant-input:focus {
2410
- outline: none;
2411
- border-color: var(--border-default-medium);
2412
- background: var(--surface-input-focus, var(--surface-panel));
2410
+ outline: none;
2411
+ border-color: var(--border-default-medium);
2412
+ background: var(--surface-input-focus, var(--surface-panel));
2413
2413
  }
2414
2414
 
2415
2415
  .model-selector__label {
2416
- display: flex;
2417
- min-width: 0;
2418
- align-items: center;
2419
- gap: 0.5rem;
2416
+ display: flex;
2417
+ min-width: 0;
2418
+ align-items: center;
2419
+ gap: 0.5rem;
2420
2420
  }
2421
2421
 
2422
2422
  .model-selector__label-text {
2423
- flex-shrink: 0;
2424
- font-size: 0.75rem;
2425
- color: var(--text-body-subtle);
2423
+ flex-shrink: 0;
2424
+ font-size: 0.75rem;
2425
+ color: var(--text-body-subtle);
2426
2426
  }
2427
2427
 
2428
2428
  .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;
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;
2438
2438
  }
2439
2439
 
2440
2440
  .assistant-empty-state__prompt--skeleton {
2441
- pointer-events: none;
2442
- cursor: default;
2441
+ pointer-events: none;
2442
+ cursor: default;
2443
2443
  }
2444
2444
 
2445
2445
  .assistant-empty-state__icon--skeleton,
2446
2446
  .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;
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;
2455
2455
  }
2456
2456
 
2457
2457
  .assistant-empty-state__icon--skeleton {
2458
- width: 1.75rem;
2459
- height: 1.75rem;
2460
- border-radius: calc(var(--radius-base) - 2px);
2458
+ width: 1.75rem;
2459
+ height: 1.75rem;
2460
+ border-radius: calc(var(--radius-base) - 2px);
2461
2461
  }
2462
2462
 
2463
2463
  .assistant-empty-state__skeleton-line {
2464
- display: block;
2465
- height: 0.625rem;
2466
- border-radius: 9999px;
2464
+ display: block;
2465
+ height: 0.625rem;
2466
+ border-radius: 9999px;
2467
2467
  }
2468
2468
 
2469
2469
  .assistant-empty-state__skeleton-line--title {
2470
- width: 72%;
2470
+ width: 72%;
2471
2471
  }
2472
2472
 
2473
2473
  .assistant-empty-state__skeleton-line--hint {
2474
- width: 48%;
2475
- margin-top: 0.375rem;
2474
+ width: 48%;
2475
+ margin-top: 0.375rem;
2476
2476
  }
2477
2477
 
2478
2478
  @keyframes assistant-skeleton-shimmer {
2479
- 0% {
2480
- background-position: 200% 0;
2481
- }
2482
- 100% {
2483
- background-position: -200% 0;
2484
- }
2479
+ 0% {
2480
+ background-position: 200% 0;
2481
+ }
2482
+ 100% {
2483
+ background-position: -200% 0;
2484
+ }
2485
2485
  }
2486
2486
 
2487
2487
  /* ── LLM settings strip ── */
2488
2488
  .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;
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;
2498
2498
  }
2499
2499
 
2500
2500
  .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;
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;
2507
2507
  }
2508
2508
 
2509
2509
  .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);
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);
2516
2516
  }
2517
2517
 
2518
2518
  .assistant-llm-settings-strip__header-actions {
2519
- display: inline-flex;
2520
- align-items: center;
2521
- gap: 0.125rem;
2522
- flex-shrink: 0;
2519
+ display: inline-flex;
2520
+ align-items: center;
2521
+ gap: 0.125rem;
2522
+ flex-shrink: 0;
2523
2523
  }
2524
2524
 
2525
2525
  .assistant-llm-settings-strip__header-btn {
2526
- padding: 0.375rem;
2526
+ padding: 0.375rem;
2527
2527
  }
2528
2528
 
2529
2529
  .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);
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);
2537
2537
  }
2538
2538
 
2539
2539
  .assistant-llm-settings-strip__form {
2540
- display: flex;
2541
- flex: 1;
2542
- min-height: 0;
2543
- flex-direction: column;
2540
+ display: flex;
2541
+ flex: 1;
2542
+ min-height: 0;
2543
+ flex-direction: column;
2544
2544
  }
2545
2545
 
2546
2546
  .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;
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;
2556
2556
  }
2557
2557
 
2558
2558
  .assistant-llm-settings-strip__field {
2559
- display: flex;
2560
- min-width: 0;
2561
- flex-direction: column;
2562
- gap: 0.25rem;
2559
+ display: flex;
2560
+ min-width: 0;
2561
+ flex-direction: column;
2562
+ gap: 0.25rem;
2563
2563
  }
2564
2564
 
2565
2565
  .assistant-llm-settings-strip__label {
2566
- font-size: 0.6875rem;
2567
- font-weight: 600;
2568
- color: var(--text-body-subtle);
2566
+ font-size: 0.6875rem;
2567
+ font-weight: 600;
2568
+ color: var(--text-body-subtle);
2569
2569
  }
2570
2570
 
2571
2571
  .assistant-llm-settings-strip__input--mono {
2572
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2573
- font-size: 0.75rem;
2572
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
2573
+ font-size: 0.75rem;
2574
2574
  }
2575
2575
 
2576
2576
  .assistant-llm-settings-strip__textarea {
2577
- min-height: 5rem;
2578
- resize: vertical;
2579
- line-height: 1.45;
2580
- font-size: 0.8125rem;
2577
+ min-height: 5rem;
2578
+ resize: vertical;
2579
+ line-height: 1.45;
2580
+ font-size: 0.8125rem;
2581
2581
  }
2582
2582
 
2583
2583
  /* System prompt — compact doc panel */
2584
2584
  .assistant-system-prompt {
2585
- min-width: 0;
2585
+ min-width: 0;
2586
2586
  }
2587
2587
 
2588
2588
  .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));
2589
+ overflow: hidden;
2590
+ border-radius: var(--radius-base);
2591
+ border: 1px solid var(--border-default);
2592
+ background: var(--surface-input, var(--surface-panel));
2593
2593
  }
2594
2594
 
2595
2595
  .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);
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);
2603
2603
  }
2604
2604
 
2605
2605
  .assistant-system-prompt__bar-start {
2606
- display: inline-flex;
2607
- min-width: 0;
2608
- align-items: center;
2609
- gap: 0.375rem;
2606
+ display: inline-flex;
2607
+ min-width: 0;
2608
+ align-items: center;
2609
+ gap: 0.375rem;
2610
2610
  }
2611
2611
 
2612
2612
  .assistant-system-prompt__label {
2613
- font-size: 0.6875rem;
2614
- font-weight: 600;
2615
- color: var(--text-body-subtle);
2613
+ font-size: 0.6875rem;
2614
+ font-weight: 600;
2615
+ color: var(--text-body-subtle);
2616
2616
  }
2617
2617
 
2618
2618
  .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);
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);
2626
2626
  }
2627
2627
 
2628
2628
  .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);
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);
2635
2635
  }
2636
2636
 
2637
2637
  .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;
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;
2652
2652
  }
2653
2653
 
2654
2654
  .assistant-system-prompt__mode:hover {
2655
- color: var(--text-heading);
2656
- background: var(--overlay-hover);
2655
+ color: var(--text-heading);
2656
+ background: var(--overlay-hover);
2657
2657
  }
2658
2658
 
2659
2659
  .assistant-system-prompt__mode--active {
2660
- color: var(--text-brand);
2661
- background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
2660
+ color: var(--text-brand);
2661
+ background: color-mix(in oklab, var(--brand) 10%, var(--surface-panel));
2662
2662
  }
2663
2663
 
2664
2664
  .assistant-system-prompt__editor {
2665
- display: block;
2666
- width: 100%;
2667
- min-height: 9rem;
2668
- max-height: 14rem;
2665
+ display: block;
2666
+ width: 100%;
2667
+ min-height: 9rem;
2668
+ max-height: 14rem;
2669
2669
  }
2670
2670
 
2671
2671
  .assistant-markdown-editor {
2672
- position: relative;
2673
- width: 100%;
2674
- min-height: inherit;
2675
- max-height: inherit;
2676
- overflow: hidden;
2672
+ position: relative;
2673
+ width: 100%;
2674
+ min-height: inherit;
2675
+ max-height: inherit;
2676
+ overflow: hidden;
2677
2677
  }
2678
2678
 
2679
2679
  .assistant-markdown-editor__highlight,
2680
2680
  .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;
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;
2696
2696
  }
2697
2697
 
2698
2698
  .assistant-markdown-editor__highlight {
2699
- position: absolute;
2700
- inset: 0;
2701
- overflow: auto;
2702
- pointer-events: none;
2703
- scrollbar-width: none;
2699
+ position: absolute;
2700
+ inset: 0;
2701
+ overflow: auto;
2702
+ pointer-events: none;
2703
+ scrollbar-width: none;
2704
2704
  }
2705
2705
 
2706
2706
  .assistant-markdown-editor__highlight::-webkit-scrollbar {
2707
- display: none;
2707
+ display: none;
2708
2708
  }
2709
2709
 
2710
2710
  .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;
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;
2722
2722
  }
2723
2723
 
2724
2724
  .assistant-markdown-editor__highlight .hljs-section {
2725
- font-weight: 700;
2726
- color: var(--text-brand);
2725
+ font-weight: 700;
2726
+ color: var(--text-brand);
2727
2727
  }
2728
2728
 
2729
2729
  .assistant-markdown-editor__highlight .hljs-strong {
2730
- font-weight: 600;
2731
- color: var(--text-heading);
2730
+ font-weight: 600;
2731
+ color: var(--text-heading);
2732
2732
  }
2733
2733
 
2734
2734
  .assistant-markdown-editor__highlight .hljs-bullet,
2735
2735
  .assistant-markdown-editor__highlight .hljs-symbol {
2736
- color: var(--text-brand);
2737
- font-weight: 700;
2736
+ color: var(--text-brand);
2737
+ font-weight: 700;
2738
2738
  }
2739
2739
 
2740
2740
  .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;
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;
2750
2750
  }
2751
2751
 
2752
2752
  .assistant-markdown-editor__highlight .hljs-emphasis {
2753
- font-style: italic;
2754
- color: var(--text-body-subtle);
2753
+ font-style: italic;
2754
+ color: var(--text-body-subtle);
2755
2755
  }
2756
2756
 
2757
2757
  .assistant-markdown-editor
2758
- .assistant-markdown-editor__highlight
2759
- code.hljs
2760
- .hljs-link,
2758
+ .assistant-markdown-editor__highlight
2759
+ code.hljs
2760
+ .hljs-link,
2761
2761
  .assistant-markdown-editor
2762
- .assistant-markdown-editor__highlight
2763
- code.hljs
2764
- .hljs-string {
2765
- color: var(--text-brand);
2762
+ .assistant-markdown-editor__highlight
2763
+ code.hljs
2764
+ .hljs-string {
2765
+ color: var(--text-brand);
2766
2766
  }
2767
2767
 
2768
2768
  .assistant-markdown-editor__highlight .hljs-quote {
2769
- color: var(--text-body-subtle);
2769
+ color: var(--text-body-subtle);
2770
2770
  }
2771
2771
 
2772
2772
  .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;
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;
2781
2781
  }
2782
2782
 
2783
2783
  .assistant-markdown-editor__input:focus {
2784
- outline: none;
2784
+ outline: none;
2785
2785
  }
2786
2786
 
2787
2787
  .assistant-markdown-editor__input::placeholder {
2788
- color: var(--text-body-subtle);
2789
- -webkit-text-fill-color: var(--text-body-subtle);
2790
- opacity: 1;
2788
+ color: var(--text-body-subtle);
2789
+ -webkit-text-fill-color: var(--text-body-subtle);
2790
+ opacity: 1;
2791
2791
  }
2792
2792
 
2793
2793
  .assistant-markdown-editor__input:disabled {
2794
- opacity: 0.55;
2795
- cursor: not-allowed;
2794
+ opacity: 0.55;
2795
+ cursor: not-allowed;
2796
2796
  }
2797
2797
 
2798
2798
  .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;
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;
2804
2804
  }
2805
2805
 
2806
2806
  .assistant-system-prompt__md {
2807
- font-family: inherit;
2808
- font-size: 0.75rem;
2809
- line-height: 1.48;
2810
- color: var(--text-body);
2807
+ font-family: inherit;
2808
+ font-size: 0.75rem;
2809
+ line-height: 1.48;
2810
+ color: var(--text-body);
2811
2811
  }
2812
2812
 
2813
2813
  .assistant-system-prompt__md > :first-child {
2814
- margin-top: 0;
2814
+ margin-top: 0;
2815
2815
  }
2816
2816
 
2817
2817
  .assistant-system-prompt__md > :last-child {
2818
- margin-bottom: 0;
2818
+ margin-bottom: 0;
2819
2819
  }
2820
2820
 
2821
2821
  .assistant-system-prompt__md p {
2822
- margin: 0.25rem 0;
2822
+ margin: 0.25rem 0;
2823
2823
  }
2824
2824
 
2825
2825
  .assistant-system-prompt__md h1,
2826
2826
  .assistant-system-prompt__md h2,
2827
2827
  .assistant-system-prompt__md h3,
2828
2828
  .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);
2829
+ margin: 0.375rem 0 0.125rem;
2830
+ font-weight: 600;
2831
+ line-height: 1.3;
2832
+ color: var(--text-heading);
2833
2833
  }
2834
2834
 
2835
2835
  .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);
2836
+ font-size: 0.625rem;
2837
+ font-weight: 700;
2838
+ letter-spacing: 0.05em;
2839
+ text-transform: uppercase;
2840
+ color: var(--text-brand);
2841
2841
  }
2842
2842
 
2843
2843
  .assistant-system-prompt__md h3 {
2844
- font-size: 0.75rem;
2844
+ font-size: 0.75rem;
2845
2845
  }
2846
2846
 
2847
2847
  .assistant-system-prompt__md h2 + p {
2848
- margin-bottom: 0.125rem;
2849
- font-size: 0.6875rem;
2850
- color: var(--text-body-subtle);
2848
+ margin-bottom: 0.125rem;
2849
+ font-size: 0.6875rem;
2850
+ color: var(--text-body-subtle);
2851
2851
  }
2852
2852
 
2853
2853
  .assistant-system-prompt__md ul,
2854
2854
  .assistant-system-prompt__md ol {
2855
- margin: 0.125rem 0 0.25rem;
2856
- padding: 0;
2857
- list-style: none;
2855
+ margin: 0.125rem 0 0.25rem;
2856
+ padding: 0;
2857
+ list-style: none;
2858
2858
  }
2859
2859
 
2860
2860
  .assistant-system-prompt__md ul ul,
2861
2861
  .assistant-system-prompt__md ol ul {
2862
- margin-top: 0.125rem;
2863
- padding-left: 0.625rem;
2862
+ margin-top: 0.125rem;
2863
+ padding-left: 0.625rem;
2864
2864
  }
2865
2865
 
2866
2866
  .assistant-system-prompt .assistant-system-prompt__md li {
2867
- position: relative;
2868
- margin: 0.1875rem 0;
2869
- padding-left: 0.6875rem;
2867
+ position: relative;
2868
+ margin: 0.1875rem 0;
2869
+ padding-left: 0.6875rem;
2870
2870
  }
2871
2871
 
2872
2872
  .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;
2873
+ content: "–";
2874
+ position: absolute;
2875
+ left: 0;
2876
+ top: 0;
2877
+ color: var(--text-brand);
2878
+ font-weight: 600;
2879
+ line-height: inherit;
2880
2880
  }
2881
2881
 
2882
2882
  .assistant-system-prompt__md ul ul > li::before {
2883
- content: "·";
2884
- font-weight: 700;
2883
+ content: "·";
2884
+ font-weight: 700;
2885
2885
  }
2886
2886
 
2887
2887
  .assistant-system-prompt__md ol {
2888
- counter-reset: prompt-item;
2888
+ counter-reset: prompt-item;
2889
2889
  }
2890
2890
 
2891
2891
  .assistant-system-prompt__md ol > li {
2892
- padding-left: 1rem;
2892
+ padding-left: 1rem;
2893
2893
  }
2894
2894
 
2895
2895
  .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;
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;
2906
2906
  }
2907
2907
 
2908
2908
  .assistant-system-prompt .assistant-system-prompt__md strong {
2909
- font-weight: 600;
2910
- color: var(--text-heading);
2909
+ font-weight: 600;
2910
+ color: var(--text-heading);
2911
2911
  }
2912
2912
 
2913
2913
  .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;
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;
2926
2926
  }
2927
2927
 
2928
2928
  .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));
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));
2934
2934
  }
2935
2935
 
2936
2936
  .assistant-llm-settings-strip .assistant-input {
2937
- font-size: 0.8125rem;
2938
- padding: 0.375rem 0.5rem;
2937
+ font-size: 0.8125rem;
2938
+ padding: 0.375rem 0.5rem;
2939
2939
  }
2940
2940
 
2941
2941
  .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;
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;
2956
2956
  }
2957
2957
 
2958
2958
  .assistant-llm-settings-strip__advanced-toggle:hover {
2959
- color: var(--text-heading);
2959
+ color: var(--text-heading);
2960
2960
  }
2961
2961
 
2962
2962
  .assistant-llm-settings-strip__chevron {
2963
- transition: transform 180ms ease;
2963
+ transition: transform 180ms ease;
2964
2964
  }
2965
2965
 
2966
2966
  .assistant-llm-settings-strip__chevron--open {
2967
- transform: rotate(180deg);
2967
+ transform: rotate(180deg);
2968
2968
  }
2969
2969
 
2970
2970
  .assistant-llm-settings-strip__advanced {
2971
- display: flex;
2972
- flex-direction: column;
2973
- gap: 0.5rem;
2974
- padding-left: 0.125rem;
2971
+ display: flex;
2972
+ flex-direction: column;
2973
+ gap: 0.5rem;
2974
+ padding-left: 0.125rem;
2975
2975
  }
2976
2976
 
2977
2977
  .assistant-llm-settings-strip__status {
2978
- margin: 0;
2979
- font-size: 0.6875rem;
2980
- line-height: 1.4;
2978
+ margin: 0;
2979
+ font-size: 0.6875rem;
2980
+ line-height: 1.4;
2981
2981
  }
2982
2982
 
2983
2983
  .assistant-llm-settings-strip__status--error {
2984
- color: var(--danger);
2984
+ color: var(--danger);
2985
2985
  }
2986
2986
 
2987
2987
  .assistant-llm-settings-strip__status--success {
2988
- color: var(--text-brand);
2988
+ color: var(--text-brand);
2989
2989
  }
2990
2990
 
2991
2991
  .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);
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);
3000
3000
  }
3001
3001
 
3002
3002
  .assistant-llm-settings-strip__footer-btn--reset {
3003
- margin-right: auto;
3003
+ margin-right: auto;
3004
3004
  }
3005
3005
 
3006
3006
  .assistant-llm-settings-strip__footer-btn {
3007
- padding: 0.375rem 0.75rem;
3008
- font-size: 0.75rem;
3007
+ padding: 0.375rem 0.75rem;
3008
+ font-size: 0.75rem;
3009
3009
  }