@mevdragon/vidfarm-devcli 0.20.6 → 0.20.9

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 (157) hide show
  1. package/.agents/skills/editor-capabilities/SKILL.md +15 -1
  2. package/.agents/skills/vidfarm-director/SKILL.md +106 -0
  3. package/.agents/skills/vidfarm-director/recipes/find-and-fork-template.md +16 -0
  4. package/.agents/skills/vidfarm-director/recipes/local-edit-render-approve.md +13 -0
  5. package/.agents/skills/vidfarm-director/recipes/onboard-a-new-director.md +13 -0
  6. package/.agents/skills/vidfarm-director/recipes/retheme-template.md +17 -0
  7. package/.agents/skills/vidfarm-director/references/assets-and-sourcing.md +117 -0
  8. package/.agents/skills/vidfarm-director/references/automation-and-local-dev.md +245 -0
  9. package/.agents/skills/vidfarm-director/references/core-workflows.md +273 -0
  10. package/.agents/skills/vidfarm-director/references/editor-workflows.md +365 -0
  11. package/.agents/skills/vidfarm-director/references/onboarding.md +28 -0
  12. package/.agents/skills/vidfarm-director/references/primitives.md +308 -0
  13. package/SKILL.director.md +517 -250
  14. package/dist/src/cli.js +563 -99
  15. package/dist/src/devcli/clips.js +29 -12
  16. package/dist/src/devcli/doctor.js +2 -2
  17. package/dist/src/devcli/local-backend.js +46 -2
  18. package/dist/src/services/clip-curation/cost.js +5 -1
  19. package/dist/src/services/clip-curation/gemini.js +14 -2
  20. package/dist/src/services/clip-curation/hunt.js +56 -0
  21. package/dist/src/services/clip-curation/index.js +1 -1
  22. package/dist/src/services/clip-curation/scan.js +5 -3
  23. package/package.json +30 -10
  24. package/SKILL.platform.md +0 -432
  25. package/demo/README.md +0 -28
  26. package/demo/dist/app.css +0 -1
  27. package/demo/dist/app.js +0 -1850
  28. package/demo/dist/chunks/chunk-DXB73IDG.js +0 -1
  29. package/demo/dist/chunks/chunk-S7OWAJDS.js +0 -36
  30. package/demo/dist/chunks/chunk-VTIBZ6AN.js +0 -1
  31. package/demo/dist/chunks/dist-ADSJKBVE.js +0 -332
  32. package/demo/dist/chunks/domEditingLayers-VZMLL4AP-SGHWPND4.js +0 -1
  33. package/demo/dist/chunks/hyperframes-player-XB65TCD6.js +0 -425
  34. package/demo/dist/chunks/lib-XAQ37YOE.js +0 -1
  35. package/demo/dist/chunks/src-TJ2QYA4U.js +0 -207
  36. package/demo/dist/favicon.ico +0 -0
  37. package/demo/dist/icons/timeline/audio.svg +0 -7
  38. package/demo/dist/icons/timeline/captions.svg +0 -5
  39. package/demo/dist/icons/timeline/composition.svg +0 -12
  40. package/demo/dist/icons/timeline/image.svg +0 -18
  41. package/demo/dist/icons/timeline/music.svg +0 -10
  42. package/demo/dist/icons/timeline/text.svg +0 -3
  43. package/demo/dist/index.html +0 -15
  44. package/dist/src/account-pages-legacy.js +0 -9396
  45. package/dist/src/account-pages.js +0 -61
  46. package/dist/src/app.js +0 -21603
  47. package/dist/src/composition-runtime.js +0 -1053
  48. package/dist/src/config.js +0 -217
  49. package/dist/src/context.js +0 -447
  50. package/dist/src/dev-app-legacy.js +0 -739
  51. package/dist/src/dev-app.js +0 -6
  52. package/dist/src/devcli/migrate-local.js +0 -140
  53. package/dist/src/devcli/sync.js +0 -368
  54. package/dist/src/domain.js +0 -5
  55. package/dist/src/editor-chat-history.js +0 -82
  56. package/dist/src/editor-chat.js +0 -828
  57. package/dist/src/editor-dark-theme.js +0 -1128
  58. package/dist/src/frontend/debug.js +0 -71
  59. package/dist/src/frontend/discover-client.js +0 -130
  60. package/dist/src/frontend/discover-store.js +0 -23
  61. package/dist/src/frontend/file-directory.js +0 -1018
  62. package/dist/src/frontend/flockposter-cache-store.js +0 -124
  63. package/dist/src/frontend/homepage-client.js +0 -446
  64. package/dist/src/frontend/homepage-shared.js +0 -201
  65. package/dist/src/frontend/homepage-store.js +0 -66
  66. package/dist/src/frontend/homepage-view.js +0 -705
  67. package/dist/src/frontend/page-runtime-client.js +0 -132
  68. package/dist/src/frontend/page-runtime-store.js +0 -9
  69. package/dist/src/frontend/sentry.js +0 -42
  70. package/dist/src/frontend/template-editor-chat.js +0 -4181
  71. package/dist/src/help-page.js +0 -346
  72. package/dist/src/homepage.js +0 -1458
  73. package/dist/src/index.js +0 -16
  74. package/dist/src/instrument.js +0 -30
  75. package/dist/src/landing-page.js +0 -384
  76. package/dist/src/page-runtime.js +0 -2
  77. package/dist/src/page-shell.js +0 -1452
  78. package/dist/src/primitive-context.js +0 -416
  79. package/dist/src/primitive-registry.js +0 -3940
  80. package/dist/src/primitive-sdk.js +0 -4
  81. package/dist/src/primitives/hyperframes-media.js +0 -108
  82. package/dist/src/react-page-shell.js +0 -35
  83. package/dist/src/ready-post-schedule-component.js +0 -1540
  84. package/dist/src/registry.js +0 -296
  85. package/dist/src/reskin/agency-page.js +0 -299
  86. package/dist/src/reskin/calendar-page.js +0 -568
  87. package/dist/src/reskin/chat-page.js +0 -942
  88. package/dist/src/reskin/discover-page.js +0 -1788
  89. package/dist/src/reskin/document.js +0 -1587
  90. package/dist/src/reskin/help-page.js +0 -357
  91. package/dist/src/reskin/index-page.js +0 -62
  92. package/dist/src/reskin/inpaint-clipper-page.js +0 -890
  93. package/dist/src/reskin/inpaint-page.js +0 -2554
  94. package/dist/src/reskin/inpaint-video-page.js +0 -1339
  95. package/dist/src/reskin/job-runs-page.js +0 -477
  96. package/dist/src/reskin/library-page.js +0 -1634
  97. package/dist/src/reskin/login-page.js +0 -262
  98. package/dist/src/reskin/portfolio-page.js +0 -687
  99. package/dist/src/reskin/pricing-page.js +0 -390
  100. package/dist/src/reskin/settings-page.js +0 -732
  101. package/dist/src/reskin/theme.js +0 -711
  102. package/dist/src/runtime.js +0 -35
  103. package/dist/src/services/api-call-history.js +0 -249
  104. package/dist/src/services/auth.js +0 -152
  105. package/dist/src/services/billing-pricing.js +0 -39
  106. package/dist/src/services/billing.js +0 -241
  107. package/dist/src/services/cast.js +0 -127
  108. package/dist/src/services/chat-threads.js +0 -92
  109. package/dist/src/services/clip-records.js +0 -250
  110. package/dist/src/services/clip-search.js +0 -77
  111. package/dist/src/services/clip-vectors.js +0 -125
  112. package/dist/src/services/composition-sanitize.js +0 -124
  113. package/dist/src/services/composition-watch.js +0 -79
  114. package/dist/src/services/elevenlabs.js +0 -222
  115. package/dist/src/services/file-directory.js +0 -117
  116. package/dist/src/services/fork-access.js +0 -93
  117. package/dist/src/services/fork-manifest.js +0 -42
  118. package/dist/src/services/ghostcut.js +0 -179
  119. package/dist/src/services/hyperframes.js +0 -3654
  120. package/dist/src/services/job-capacity.js +0 -14
  121. package/dist/src/services/job-logs.js +0 -197
  122. package/dist/src/services/jobs.js +0 -136
  123. package/dist/src/services/local-dynamo.js +0 -0
  124. package/dist/src/services/media-processing.js +0 -766
  125. package/dist/src/services/primitive-media-lambda.js +0 -280
  126. package/dist/src/services/providers.js +0 -2748
  127. package/dist/src/services/rate-limits.js +0 -262
  128. package/dist/src/services/scene-annotations.js +0 -32
  129. package/dist/src/services/serverless-auth.js +0 -382
  130. package/dist/src/services/serverless-jobs.js +0 -1084
  131. package/dist/src/services/serverless-provider-keys.js +0 -409
  132. package/dist/src/services/serverless-records.js +0 -1515
  133. package/dist/src/services/serverless-template-configs.js +0 -75
  134. package/dist/src/services/storage.js +0 -461
  135. package/dist/src/services/swipe-customize.js +0 -437
  136. package/dist/src/services/template-certification.js +0 -413
  137. package/dist/src/services/template-loader.js +0 -99
  138. package/dist/src/services/template-runtime-bundles.js +0 -217
  139. package/dist/src/services/template-sources.js +0 -1017
  140. package/dist/src/services/upstream.js +0 -248
  141. package/dist/src/services/video-normalization.js +0 -2
  142. package/dist/src/services/webhooks.js +0 -62
  143. package/dist/src/template-editor-pages.js +0 -2576
  144. package/dist/src/template-editor-shell.js +0 -2893
  145. package/dist/src/template-sdk.js +0 -4
  146. package/dist/src/worker.js +0 -17
  147. package/public/assets/discover-client-app.js +0 -1
  148. package/public/assets/file-directory-app.js +0 -3
  149. package/public/assets/homepage-app.js +0 -54
  150. package/public/assets/homepage-client-app.js +0 -80
  151. package/public/assets/page-runtime-client-app.js +0 -94
  152. package/public/assets/placeholders/scene-placeholder.png +0 -0
  153. package/src/assets/SELLING_AWARENESS_STAGES.md +0 -579
  154. package/src/assets/SELLING_WITH_HOOKS.md +0 -377
  155. package/src/assets/SELLING_WITH_VSLS.md +0 -606
  156. package/src/assets/favicon.ico +0 -0
  157. package/src/assets/logo-vidfarm.png +0 -0
@@ -1,2893 +0,0 @@
1
- import { escapeAttribute, escapeHtml, resolveAccountDisplayName } from "./page-shell.js";
2
- export const TEMPLATE_EDITOR_SHELL_STYLES = `
3
- .editor-workbench {
4
- min-height: 100%;
5
- height: 100%;
6
- padding: 96px 0 28px 432px;
7
- overflow: hidden;
8
- min-width: 0;
9
- box-sizing: border-box;
10
- }
11
-
12
- .editor-main {
13
- min-height: 0;
14
- height: 100%;
15
- overflow-x: hidden;
16
- overflow-y: auto;
17
- overflow: auto;
18
- padding-left: 10px;
19
- }
20
-
21
- .editor-floating-nav {
22
- position: fixed;
23
- top: 20px;
24
- left: 452px;
25
- right: 20px;
26
- z-index: 60;
27
- display: flex;
28
- flex-wrap: wrap;
29
- align-items: center;
30
- gap: 10px;
31
- max-width: none;
32
- padding: 12px 14px;
33
- border: 1px solid rgba(255, 255, 255, 0.84);
34
- border-radius: 24px;
35
- background: rgba(255, 252, 247, 0.9);
36
- box-shadow: var(--shadow);
37
- backdrop-filter: blur(16px);
38
- }
39
-
40
- .editor-back-link {
41
- display: inline-flex;
42
- align-items: center;
43
- justify-content: center;
44
- min-height: 40px;
45
- padding: 0 14px;
46
- border: 1px solid rgba(191, 164, 109, 0.34);
47
- border-radius: 999px;
48
- background: #dbc17a;
49
- color: #243041;
50
- text-decoration: none;
51
- font-size: 0.9rem;
52
- font-weight: 700;
53
- white-space: nowrap;
54
- }
55
-
56
- .editor-nav-title {
57
- min-width: 0;
58
- flex: 1 1 auto;
59
- margin: 0 4px 0 2px;
60
- font-family: "Instrument Serif", serif;
61
- font-size: 1.4rem;
62
- line-height: 0.95;
63
- letter-spacing: -0.04em;
64
- color: #1f2635;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
- white-space: nowrap;
68
- }
69
-
70
- .editor-nav-account {
71
- min-width: 0;
72
- max-width: min(42vw, 460px);
73
- margin-left: auto;
74
- color: rgba(116, 130, 156, 0.78);
75
- font-size: 0.94rem;
76
- line-height: 1.2;
77
- font-weight: 500;
78
- letter-spacing: -0.01em;
79
- overflow: hidden;
80
- text-overflow: ellipsis;
81
- white-space: nowrap;
82
- }
83
-
84
- .editor-nav-account span {
85
- color: rgba(116, 130, 156, 0.62);
86
- }
87
-
88
- .editor-right-rail {
89
- position: fixed;
90
- top: 0;
91
- left: 0;
92
- bottom: 0;
93
- z-index: 30;
94
- width: 432px;
95
- overflow: hidden;
96
- }
97
-
98
- .editor-chat-panel {
99
- height: 100%;
100
- min-width: 0;
101
- display: flex;
102
- overflow: hidden;
103
- border-right: 1px solid rgba(255, 255, 255, 0.84);
104
- background: rgba(255, 252, 247, 0.92);
105
- }
106
-
107
- .vf-editor-chat-shell,
108
- .vf-editor-chat-thread {
109
- height: 100%;
110
- min-height: 0;
111
- }
112
-
113
- .vf-editor-chat-shell {
114
- display: flex;
115
- flex-direction: column;
116
- min-height: 100%;
117
- min-width: 0;
118
- width: 100%;
119
- }
120
-
121
- .vf-editor-chat-body {
122
- flex: 1 1 auto;
123
- display: flex;
124
- min-height: 0;
125
- min-width: 0;
126
- width: 100%;
127
- }
128
-
129
- .vf-editor-chat-shell[data-layout="brainstorm"] {
130
- height: 100%;
131
- min-height: 0;
132
- }
133
-
134
- .vf-editor-chat-brainstorm-layout {
135
- position: relative;
136
- flex: 1 1 auto;
137
- display: grid;
138
- grid-template-columns: minmax(0, 1fr);
139
- min-height: 0;
140
- height: 100%;
141
- width: 100%;
142
- }
143
-
144
- .vf-editor-chat-brainstorm-layout.has-sidebar {
145
- grid-template-columns: 284px minmax(0, 1fr);
146
- }
147
-
148
- .vf-editor-chat-history-pane {
149
- display: grid;
150
- grid-template-rows: auto auto minmax(0, 1fr);
151
- gap: 10px;
152
- min-height: 0;
153
- height: 100%;
154
- padding: 14px 12px 12px;
155
- background: rgba(255, 251, 244, 0.55);
156
- border-right: 1px solid rgba(102, 82, 43, 0.14);
157
- }
158
-
159
- .vf-editor-chat-history-header {
160
- display: flex;
161
- align-items: center;
162
- justify-content: space-between;
163
- gap: 10px;
164
- }
165
-
166
- .vf-editor-chat-history-header-main {
167
- display: flex;
168
- align-items: center;
169
- gap: 10px;
170
- min-width: 0;
171
- }
172
-
173
- .vf-editor-chat-history-kicker {
174
- color: #8d99ae;
175
- font-size: 0.72rem;
176
- font-weight: 800;
177
- letter-spacing: 0.18em;
178
- text-transform: uppercase;
179
- }
180
-
181
- .vf-editor-chat-new-thread-sidebar {
182
- justify-self: start;
183
- min-height: 34px;
184
- padding: 0 12px;
185
- border-radius: 999px;
186
- }
187
-
188
- .vf-editor-chat-history-close,
189
- .vf-editor-chat-history-toggle,
190
- .vf-editor-chat-back-button {
191
- all: unset;
192
- display: inline-flex;
193
- align-items: center;
194
- justify-content: center;
195
- min-height: 34px;
196
- padding: 0 12px;
197
- border: 1px solid rgba(191, 164, 109, 0.28);
198
- border-radius: 999px;
199
- background: rgba(255, 255, 255, 0.88);
200
- color: #243041;
201
- font-size: 0.8rem;
202
- font-weight: 800;
203
- line-height: 1;
204
- white-space: nowrap;
205
- }
206
-
207
- .vf-editor-chat-back-button {
208
- gap: 6px;
209
- cursor: pointer;
210
- }
211
-
212
- .vf-editor-chat-back-button svg {
213
- width: 15px;
214
- height: 15px;
215
- }
216
-
217
- .vf-editor-chat-history-close {
218
- display: none;
219
- width: 34px;
220
- min-width: 34px;
221
- padding: 0;
222
- font-size: 1rem;
223
- }
224
-
225
- .vf-editor-chat-history-toggle {
226
- display: none;
227
- }
228
-
229
- .vf-editor-chat-thread-list-sidebar {
230
- display: flex;
231
- flex-direction: column;
232
- align-items: stretch;
233
- gap: 8px;
234
- margin-top: 4px;
235
- min-height: 0;
236
- overflow-y: auto;
237
- overflow-x: hidden;
238
- padding: 2px 2px 6px 0;
239
- }
240
-
241
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar {
242
- width: 6px;
243
- }
244
-
245
- .vf-editor-chat-thread-list-sidebar::-webkit-scrollbar-thumb {
246
- border-radius: 999px;
247
- background: rgba(191, 164, 109, 0.42);
248
- }
249
-
250
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip {
251
- display: flex;
252
- width: 100%;
253
- max-width: none;
254
- min-width: 0;
255
- padding: 6px 6px 6px 8px;
256
- border-radius: 14px;
257
- background: rgba(255, 255, 255, 0.78);
258
- }
259
-
260
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-main {
261
- display: block;
262
- flex: 1 1 auto;
263
- width: 100%;
264
- max-width: none;
265
- padding: 1px 0;
266
- }
267
-
268
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-title {
269
- font-size: 0.8rem;
270
- }
271
-
272
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread-chip-tracers {
273
- font-size: 0.64rem;
274
- }
275
-
276
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
277
- border-left: 0;
278
- display: grid;
279
- grid-template-rows: auto minmax(0, 1fr) auto;
280
- }
281
-
282
- .vf-editor-chat-brainstorm-topbar {
283
- display: flex;
284
- align-items: center;
285
- justify-content: space-between;
286
- gap: 12px;
287
- }
288
-
289
- .vf-editor-chat-brainstorm-topbar-left {
290
- display: flex;
291
- align-items: center;
292
- gap: 10px;
293
- min-width: 0;
294
- }
295
-
296
- .vf-editor-chat-brainstorm-title {
297
- color: #1f2635;
298
- font-family: "Instrument Serif", serif;
299
- font-size: 1.8rem;
300
- line-height: 0.96;
301
- letter-spacing: -0.05em;
302
- }
303
-
304
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-header {
305
- padding: 10px 12px 8px;
306
- }
307
-
308
- .vf-editor-chat-mobile-fab,
309
- .vf-editor-chat-minimize,
310
- .vf-editor-chat-expand,
311
- .vf-editor-chat-back-button--header {
312
- display: none;
313
- }
314
-
315
- .vf-editor-chat-thread {
316
- flex: 1 1 auto;
317
- min-height: 0;
318
- min-width: 0;
319
- display: flex;
320
- flex-direction: column;
321
- overflow: hidden;
322
- background:
323
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 26%),
324
- linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(252, 247, 238, 0.94));
325
- }
326
-
327
- .vf-editor-chat-header {
328
- min-width: 0;
329
- padding: 8px 8px 6px;
330
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
331
- background: rgba(255, 251, 244, 0.76);
332
- backdrop-filter: blur(12px);
333
- }
334
-
335
- .vf-editor-chat-header-row {
336
- display: flex;
337
- align-items: center;
338
- justify-content: flex-start;
339
- gap: 10px;
340
- }
341
-
342
- .vf-editor-chat-header-titles {
343
- flex: 1 1 auto;
344
- min-width: 0;
345
- }
346
-
347
- .vf-editor-chat-header-title {
348
- color: #8d99ae;
349
- font-size: 0.78rem;
350
- font-weight: 800;
351
- letter-spacing: 0.16em;
352
- text-transform: uppercase;
353
- }
354
-
355
- .vf-editor-chat-header-subtitle {
356
- margin-top: 4px;
357
- color: #334155;
358
- font-size: 0.92rem;
359
- font-weight: 700;
360
- line-height: 1.3;
361
- }
362
-
363
- .vf-editor-chat-new-thread {
364
- all: unset;
365
- display: inline-flex;
366
- align-items: center;
367
- justify-content: center;
368
- min-height: 30px;
369
- padding: 0 10px;
370
- border-radius: 12px;
371
- border: 1px solid rgba(191, 164, 109, 0.34);
372
- background: rgba(255, 255, 255, 0.92);
373
- color: #243041;
374
- font-size: 0.78rem;
375
- font-weight: 700;
376
- white-space: nowrap;
377
- }
378
-
379
- .vf-editor-chat-history-icon {
380
- all: unset;
381
- display: inline-flex;
382
- align-items: center;
383
- justify-content: center;
384
- width: 32px;
385
- height: 32px;
386
- min-width: 32px;
387
- border-radius: 999px;
388
- border: 1px solid rgba(191, 164, 109, 0.34);
389
- background: rgba(255, 255, 255, 0.92);
390
- color: #5c6a82;
391
- cursor: pointer;
392
- }
393
-
394
- .vf-editor-chat-history-icon[aria-pressed="true"] {
395
- border-color: rgba(219, 193, 122, 0.9);
396
- background: rgba(219, 193, 122, 0.16);
397
- color: #8a6b1b;
398
- }
399
-
400
- .vf-editor-chat-history-icon svg {
401
- width: 18px;
402
- height: 18px;
403
- }
404
-
405
- .vf-editor-chat-history-panel {
406
- display: flex;
407
- flex-direction: column;
408
- min-height: 0;
409
- height: 100%;
410
- padding: 0;
411
- }
412
-
413
- .vf-editor-chat-history-panel .vf-editor-chat-thread-list {
414
- display: flex;
415
- flex-direction: column;
416
- flex-wrap: nowrap;
417
- gap: 6px;
418
- margin: 0;
419
- padding: 4px 0 16px;
420
- width: 100%;
421
- max-width: none;
422
- overflow-y: auto;
423
- overflow-x: hidden;
424
- }
425
-
426
- .vf-editor-chat-history-panel .vf-editor-chat-thread-chip {
427
- display: flex;
428
- align-items: center;
429
- gap: 8px;
430
- width: 100%;
431
- max-width: none;
432
- min-width: 0;
433
- padding: 8px 10px;
434
- border-radius: 12px;
435
- }
436
-
437
- .vf-editor-chat-history-panel .vf-editor-chat-thread-chip-main {
438
- display: block;
439
- flex: 1 1 auto;
440
- min-width: 0;
441
- }
442
-
443
- .vf-editor-chat-branches-panel .vf-editor-chat-branches-header {
444
- display: flex;
445
- align-items: flex-end;
446
- justify-content: space-between;
447
- gap: 10px;
448
- padding: 8px 4px 10px;
449
- border-bottom: 1px solid rgba(191, 164, 109, 0.18);
450
- }
451
-
452
- .vf-editor-chat-branches-header-main {
453
- display: flex;
454
- flex-direction: column;
455
- gap: 2px;
456
- min-width: 0;
457
- }
458
-
459
- .vf-editor-chat-branches-kicker {
460
- text-transform: uppercase;
461
- font-size: 0.66rem;
462
- font-weight: 700;
463
- letter-spacing: 0.08em;
464
- color: #94826a;
465
- }
466
-
467
- .vf-editor-chat-branches-title {
468
- font-size: 0.9rem;
469
- font-weight: 700;
470
- color: #243041;
471
- }
472
-
473
- .vf-editor-chat-branches-refresh {
474
- all: unset;
475
- cursor: pointer;
476
- padding: 6px 10px;
477
- border-radius: 10px;
478
- border: 1px solid rgba(191, 164, 109, 0.34);
479
- background: rgba(255, 255, 255, 0.92);
480
- color: #243041;
481
- font-size: 0.74rem;
482
- font-weight: 700;
483
- }
484
-
485
- .vf-editor-chat-branches-refresh[disabled] {
486
- opacity: 0.6;
487
- cursor: default;
488
- }
489
-
490
- .vf-editor-chat-branch-chip-link {
491
- all: unset;
492
- display: block;
493
- flex: 1 1 auto;
494
- min-width: 0;
495
- cursor: pointer;
496
- }
497
-
498
- .vf-editor-chat-branch-chip-link:focus-visible {
499
- outline: 2px solid rgba(219, 193, 122, 0.9);
500
- outline-offset: 2px;
501
- border-radius: 8px;
502
- }
503
-
504
- .vf-editor-chat-branch-current-badge {
505
- display: inline-flex;
506
- align-items: center;
507
- margin-left: 8px;
508
- padding: 2px 6px;
509
- border-radius: 999px;
510
- background: rgba(219, 193, 122, 0.32);
511
- color: #6a4a0f;
512
- font-size: 0.62rem;
513
- font-weight: 700;
514
- text-transform: uppercase;
515
- letter-spacing: 0.08em;
516
- }
517
-
518
- .vf-editor-chat-thread-list {
519
- display: flex;
520
- flex-wrap: nowrap;
521
- gap: 4px;
522
- margin-top: 8px;
523
- width: 100%;
524
- max-width: 100%;
525
- min-width: 0;
526
- overflow-x: auto;
527
- overflow-y: hidden;
528
- padding: 0 4px 5px 0;
529
- overscroll-behavior-x: contain;
530
- scrollbar-width: thin;
531
- -webkit-overflow-scrolling: touch;
532
- }
533
-
534
- .vf-editor-chat-thread-list::-webkit-scrollbar {
535
- height: 6px;
536
- }
537
-
538
- .vf-editor-chat-thread-list::-webkit-scrollbar-thumb {
539
- border-radius: 999px;
540
- background: rgba(191, 164, 109, 0.42);
541
- }
542
-
543
- .vf-editor-chat-tracer-bar {
544
- display: grid;
545
- gap: 8px;
546
- margin-top: 10px;
547
- padding-top: 10px;
548
- border-top: 1px solid rgba(191, 164, 109, 0.12);
549
- }
550
-
551
- .vf-editor-chat-tracer-bar-head {
552
- display: flex;
553
- align-items: center;
554
- justify-content: space-between;
555
- gap: 8px;
556
- }
557
-
558
- .vf-editor-chat-tracer-label {
559
- color: #8d99ae;
560
- font-size: 0.72rem;
561
- font-weight: 800;
562
- letter-spacing: 0.14em;
563
- text-transform: uppercase;
564
- }
565
-
566
- .vf-editor-chat-tracer-add {
567
- all: unset;
568
- display: inline-flex;
569
- align-items: center;
570
- justify-content: center;
571
- min-height: 28px;
572
- padding: 0 10px;
573
- border-radius: 999px;
574
- border: 1px solid rgba(191, 164, 109, 0.34);
575
- background: rgba(255, 255, 255, 0.92);
576
- color: #243041;
577
- font-size: 0.74rem;
578
- font-weight: 700;
579
- white-space: nowrap;
580
- }
581
-
582
- .vf-editor-chat-tracer-list {
583
- display: flex;
584
- flex-wrap: wrap;
585
- gap: 6px;
586
- }
587
-
588
- .vf-editor-chat-tracer-chip {
589
- display: inline-flex;
590
- align-items: center;
591
- gap: 6px;
592
- min-height: 30px;
593
- padding: 0 4px 0 10px;
594
- border-radius: 999px;
595
- border: 1px solid rgba(191, 164, 109, 0.24);
596
- background: rgba(255, 255, 255, 0.84);
597
- }
598
-
599
- .vf-editor-chat-tracer-chip[data-active="true"] {
600
- border-color: rgba(219, 193, 122, 0.82);
601
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
602
- }
603
-
604
- .vf-editor-chat-tracer-chip-button,
605
- .vf-editor-chat-tracer-chip-remove {
606
- all: unset;
607
- color: inherit;
608
- }
609
-
610
- .vf-editor-chat-tracer-chip-button {
611
- display: inline-flex;
612
- align-items: center;
613
- min-width: 0;
614
- font-size: 0.74rem;
615
- font-weight: 800;
616
- color: #334155;
617
- }
618
-
619
- .vf-editor-chat-tracer-chip-text {
620
- display: inline-block;
621
- max-width: 184px;
622
- overflow: hidden;
623
- text-overflow: ellipsis;
624
- white-space: nowrap;
625
- }
626
-
627
- .vf-editor-chat-tracer-chip-remove {
628
- display: inline-flex;
629
- align-items: center;
630
- justify-content: center;
631
- width: 18px;
632
- height: 18px;
633
- border-radius: 999px;
634
- color: #617087;
635
- font-size: 0.9rem;
636
- line-height: 1;
637
- }
638
-
639
- .vf-editor-chat-tracer-help {
640
- color: #617087;
641
- font-size: 0.72rem;
642
- line-height: 1.45;
643
- }
644
-
645
- .vf-editor-chat-thread-chip {
646
- display: inline-flex;
647
- align-items: center;
648
- gap: 2px;
649
- flex: 0 0 auto;
650
- width: auto;
651
- max-width: 184px;
652
- min-width: 0;
653
- padding: 0 4px;
654
- border: 1px solid rgba(191, 164, 109, 0.16);
655
- border-radius: 8px;
656
- background: rgba(255, 255, 255, 0.75);
657
- color: #243041;
658
- transition:
659
- border-color 140ms ease,
660
- background 140ms ease;
661
- }
662
-
663
- .vf-editor-chat-thread-chip[data-active="true"] {
664
- border-color: rgba(219, 193, 122, 0.82);
665
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.22), rgba(255, 255, 255, 0.92));
666
- }
667
-
668
- .vf-editor-chat-thread-chip-main {
669
- all: unset;
670
- display: inline-block;
671
- flex: 0 1 auto;
672
- min-width: 0;
673
- width: auto;
674
- max-width: 148px;
675
- padding: 3px 0;
676
- margin: 0;
677
- border: 0;
678
- border-radius: 0;
679
- background: transparent;
680
- text-align: left;
681
- color: inherit;
682
- box-shadow: none;
683
- min-height: 0;
684
- appearance: none;
685
- -webkit-appearance: none;
686
- font: inherit;
687
- outline: none;
688
- }
689
-
690
- .vf-editor-chat-thread-menu-wrap {
691
- position: relative;
692
- display: inline-flex;
693
- flex: 0 0 auto;
694
- }
695
-
696
- .vf-editor-chat-thread-chip-menu {
697
- all: unset;
698
- display: inline-flex;
699
- align-items: center;
700
- justify-content: center;
701
- flex: 0 0 auto;
702
- width: 20px;
703
- min-width: 20px;
704
- height: 20px;
705
- padding: 0;
706
- border: 0;
707
- border-radius: 999px;
708
- background: transparent;
709
- color: #617087;
710
- box-shadow: none;
711
- font-size: 0.72rem;
712
- font-weight: 900;
713
- line-height: 1;
714
- opacity: 0.8;
715
- }
716
-
717
- .vf-editor-chat-thread-chip-menu:hover {
718
- background: rgba(219, 193, 122, 0.18);
719
- opacity: 1;
720
- }
721
-
722
- .vf-editor-chat-thread-menu {
723
- position: fixed;
724
- z-index: 1000;
725
- display: grid;
726
- gap: 2px;
727
- min-width: 138px;
728
- padding: 6px;
729
- border: 1px solid rgba(191, 164, 109, 0.28);
730
- border-radius: 10px;
731
- background: rgba(255, 252, 247, 0.98);
732
- box-shadow: 0 14px 34px rgba(37, 45, 61, 0.16);
733
- }
734
-
735
- .vf-editor-chat-thread-menu button {
736
- all: unset;
737
- padding: 8px 9px;
738
- border-radius: 7px;
739
- color: #324156;
740
- font-size: 0.76rem;
741
- font-weight: 800;
742
- white-space: nowrap;
743
- }
744
-
745
- .vf-editor-chat-thread-menu button:hover {
746
- background: rgba(219, 193, 122, 0.16);
747
- }
748
-
749
- .vf-editor-chat-thread-menu button[data-danger="true"] {
750
- color: #8d4a3b;
751
- }
752
-
753
- .vf-editor-chat-thread-chip-title {
754
- display: block;
755
- max-width: 100%;
756
- overflow: hidden;
757
- text-overflow: ellipsis;
758
- white-space: nowrap;
759
- font-size: 0.74rem;
760
- font-weight: 800;
761
- line-height: 1.2;
762
- }
763
-
764
- .vf-editor-chat-thread-chip-tracers,
765
- .vf-editor-chat-thread-chip-preview,
766
- .vf-editor-chat-thread-empty {
767
- display: block;
768
- overflow: hidden;
769
- text-overflow: ellipsis;
770
- white-space: nowrap;
771
- color: #617087;
772
- font-size: 0.68rem;
773
- line-height: 1.25;
774
- }
775
-
776
- .vf-editor-chat-thread-chip-tracers {
777
- max-width: 100%;
778
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
779
- font-size: 0.62rem;
780
- }
781
-
782
- .vf-editor-chat-empty h2,
783
- .vf-editor-chat-disabled h2 {
784
- margin: 0;
785
- font-family: inherit;
786
- font-size: 1.35rem;
787
- line-height: 1.08;
788
- letter-spacing: -0.03em;
789
- color: #1f2635;
790
- }
791
-
792
- .vf-editor-chat-kicker {
793
- color: #8d99ae;
794
- font-size: 0.75rem;
795
- font-weight: 700;
796
- letter-spacing: 0.18em;
797
- text-transform: uppercase;
798
- }
799
-
800
- .vf-editor-chat-viewport {
801
- min-height: 0;
802
- flex: 1 1 0;
803
- overflow: auto;
804
- overscroll-behavior: contain;
805
- padding: 8px 8px 10px;
806
- }
807
-
808
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
809
- height: 100%;
810
- align-self: stretch;
811
- }
812
-
813
- .vf-editor-chat-empty,
814
- .vf-editor-chat-disabled {
815
- display: grid;
816
- gap: 8px;
817
- margin: 0;
818
- padding: 12px;
819
- border: 1px solid rgba(191, 164, 109, 0.18);
820
- border-radius: 10px;
821
- background: rgba(255, 255, 255, 0.86);
822
- box-shadow: 0 10px 20px rgba(15, 23, 42, 0.035);
823
- }
824
-
825
- .vf-editor-chat-empty p,
826
- .vf-editor-chat-disabled p {
827
- color: #617087;
828
- line-height: 1.7;
829
- }
830
-
831
- .vf-editor-chat-empty-prompts {
832
- display: grid;
833
- gap: 6px;
834
- margin-top: 2px;
835
- }
836
-
837
- .vf-editor-chat-empty-prompts div {
838
- padding: 8px 10px;
839
- border: 1px solid rgba(141, 153, 174, 0.22);
840
- border-radius: 8px;
841
- background: rgba(248, 250, 252, 0.84);
842
- color: #334155;
843
- font-size: 0.78rem;
844
- line-height: 1.35;
845
- }
846
-
847
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-empty,
848
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-disabled {
849
- padding: 16px;
850
- border-radius: 16px;
851
- }
852
-
853
- .vf-editor-chat-message {
854
- display: flex;
855
- flex-direction: column;
856
- align-items: flex-start;
857
- gap: 6px;
858
- min-width: 0;
859
- margin-bottom: 14px;
860
- }
861
-
862
- .vf-editor-chat-message.is-user {
863
- align-items: flex-end;
864
- }
865
-
866
- .vf-editor-chat-message-meta {
867
- font-size: 0.72rem;
868
- font-weight: 700;
869
- letter-spacing: 0.12em;
870
- text-transform: uppercase;
871
- color: #8d99ae;
872
- }
873
-
874
- .vf-editor-chat-message.is-user .vf-editor-chat-message-meta {
875
- text-align: right;
876
- }
877
-
878
- .vf-editor-chat-bubble {
879
- display: grid;
880
- justify-items: start;
881
- gap: 8px;
882
- max-width: min(100%, 340px);
883
- width: auto;
884
- min-width: 0;
885
- padding: 10px 12px;
886
- border-radius: 10px;
887
- border: 1px solid rgba(191, 164, 109, 0.18);
888
- background: rgba(255, 255, 255, 0.9);
889
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
890
- }
891
-
892
- .vf-editor-chat-bubble[data-pending="true"] {
893
- background:
894
- linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(252, 248, 240, 0.96)),
895
- linear-gradient(90deg, rgba(219, 193, 122, 0.08), rgba(255, 255, 255, 0.4), rgba(219, 193, 122, 0.08));
896
- }
897
-
898
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble {
899
- align-self: flex-start;
900
- border-top-left-radius: 4px;
901
- }
902
-
903
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
904
- align-self: flex-end;
905
- border-top-right-radius: 4px;
906
- max-width: min(82%, 340px);
907
- background: linear-gradient(180deg, rgba(219, 193, 122, 0.32), rgba(255, 255, 255, 0.94));
908
- }
909
-
910
- .vf-editor-chat-viewport .vf-editor-chat-message-attachment-thumb,
911
- .vf-editor-chat-composer-images .vf-editor-chat-message-attachment-thumb {
912
- width: min(220px, 100%);
913
- max-width: min(220px, 100%);
914
- }
915
-
916
- .vf-editor-chat-message-body {
917
- display: block;
918
- width: 100%;
919
- color: #334155;
920
- line-height: 1.6;
921
- font-size: 0.92rem;
922
- white-space: pre-wrap;
923
- word-break: break-word;
924
- overflow-wrap: break-word;
925
- text-align: left;
926
- }
927
-
928
- .vf-editor-chat-message-body p + p {
929
- margin-top: 0.8em;
930
- }
931
-
932
- .vf-editor-chat-message-body a {
933
- color: #8a6b1b;
934
- text-decoration: underline;
935
- text-underline-offset: 0.16em;
936
- word-break: break-word;
937
- }
938
-
939
- .vf-editor-chat-message-body strong {
940
- font-weight: 800;
941
- color: #243041;
942
- }
943
-
944
- .vf-editor-chat-message-body em {
945
- font-style: italic;
946
- }
947
-
948
- .vf-editor-chat-message-body code {
949
- padding: 0.08rem 0.32rem;
950
- border-radius: 0.35rem;
951
- background: rgba(36, 48, 65, 0.08);
952
- color: #243041;
953
- font-size: 0.88em;
954
- font-family: "SFMono-Regular", "Menlo", monospace;
955
- }
956
-
957
- .vf-editor-chat-message-body pre {
958
- margin: 0;
959
- padding: 10px 11px;
960
- border-radius: 10px;
961
- background: rgba(36, 48, 65, 0.06);
962
- overflow: auto;
963
- }
964
-
965
- .vf-editor-chat-message-body pre code {
966
- padding: 0;
967
- background: transparent;
968
- font-size: 0.82em;
969
- white-space: pre-wrap;
970
- }
971
-
972
- .vf-editor-chat-message-body ul,
973
- .vf-editor-chat-message-body ol {
974
- margin: 0;
975
- padding-left: 1.2rem;
976
- }
977
-
978
- .vf-editor-chat-message-body li + li {
979
- margin-top: 0.28rem;
980
- }
981
-
982
- .vf-editor-chat-http-list {
983
- display: grid;
984
- gap: 6px;
985
- width: 100%;
986
- }
987
-
988
- .vf-editor-chat-json-list {
989
- display: grid;
990
- gap: 8px;
991
- width: 100%;
992
- }
993
-
994
- .vf-editor-chat-json-card {
995
- width: min(100%, 860px);
996
- border-radius: 12px;
997
- border: 1px solid rgba(191, 164, 109, 0.18);
998
- background: rgba(251, 247, 238, 0.92);
999
- overflow: hidden;
1000
- }
1001
-
1002
- .vf-editor-chat-json-card-head {
1003
- display: flex;
1004
- align-items: flex-start;
1005
- justify-content: space-between;
1006
- gap: 12px;
1007
- padding: 10px 12px;
1008
- }
1009
-
1010
- .vf-editor-chat-json-card-kicker {
1011
- color: #8a6b1b;
1012
- font-size: 0.64rem;
1013
- font-weight: 800;
1014
- letter-spacing: 0.08em;
1015
- text-transform: uppercase;
1016
- }
1017
-
1018
- .vf-editor-chat-json-card-title {
1019
- color: #243041;
1020
- font-size: 0.92rem;
1021
- font-weight: 800;
1022
- line-height: 1.3;
1023
- }
1024
-
1025
- .vf-editor-chat-json-card-actions {
1026
- display: inline-flex;
1027
- align-items: center;
1028
- gap: 8px;
1029
- flex: 0 0 auto;
1030
- }
1031
-
1032
- .vf-editor-chat-json-card-action {
1033
- all: unset;
1034
- display: inline-flex;
1035
- align-items: center;
1036
- justify-content: center;
1037
- min-height: 30px;
1038
- padding: 0 11px;
1039
- border-radius: 999px;
1040
- background: rgba(255, 255, 255, 0.92);
1041
- color: #617087;
1042
- font-size: 0.76rem;
1043
- font-weight: 800;
1044
- cursor: pointer;
1045
- }
1046
-
1047
- .vf-editor-chat-json-card-action.is-strong {
1048
- background: rgba(225, 201, 136, 0.36);
1049
- color: #7a5d19;
1050
- }
1051
-
1052
- .vf-editor-chat-json-card-body {
1053
- padding: 0 12px 12px;
1054
- }
1055
-
1056
- .vf-editor-chat-json-state {
1057
- padding: 12px;
1058
- border-radius: 10px;
1059
- background: rgba(255, 255, 255, 0.9);
1060
- color: #526179;
1061
- font-size: 0.78rem;
1062
- }
1063
-
1064
- .vf-editor-chat-json-state.is-error {
1065
- color: #a14444;
1066
- }
1067
-
1068
- .vf-editor-chat-json-viewer {
1069
- border-radius: 12px;
1070
- border: 1px solid rgba(191, 164, 109, 0.16);
1071
- background: rgba(255, 255, 255, 0.9);
1072
- overflow: hidden;
1073
- }
1074
-
1075
- .vf-editor-chat-json-toolbar {
1076
- display: flex;
1077
- align-items: center;
1078
- justify-content: space-between;
1079
- gap: 12px;
1080
- padding: 10px 12px;
1081
- border-bottom: 1px solid rgba(191, 164, 109, 0.12);
1082
- background: rgba(250, 245, 236, 0.88);
1083
- }
1084
-
1085
- .vf-editor-chat-json-file,
1086
- .vf-editor-chat-json-copy-state {
1087
- color: #617087;
1088
- font-size: 0.7rem;
1089
- font-weight: 700;
1090
- line-height: 1.35;
1091
- }
1092
-
1093
- .vf-editor-chat-json-copy-state[data-state="done"] {
1094
- color: #2f7d4f;
1095
- }
1096
-
1097
- .vf-editor-chat-json-copy-state[data-state="error"] {
1098
- color: #a14444;
1099
- }
1100
-
1101
- .vf-editor-chat-json-scroll {
1102
- max-height: 320px;
1103
- overflow: auto;
1104
- padding: 10px 0;
1105
- }
1106
-
1107
- .vf-editor-chat-json-toggle-row {
1108
- display: flex;
1109
- align-items: flex-start;
1110
- gap: 2px;
1111
- }
1112
-
1113
- .vf-editor-chat-json-toggle-icon {
1114
- all: unset;
1115
- display: inline-flex;
1116
- align-items: center;
1117
- justify-content: center;
1118
- width: 24px;
1119
- min-width: 24px;
1120
- height: 26px;
1121
- margin-left: 6px;
1122
- color: #7b879b;
1123
- cursor: pointer;
1124
- }
1125
-
1126
- .vf-editor-chat-json-toggle-icon svg {
1127
- width: 14px;
1128
- height: 14px;
1129
- transition: transform 120ms ease;
1130
- }
1131
-
1132
- .vf-editor-chat-json-line {
1133
- position: relative;
1134
- display: flex;
1135
- align-items: flex-start;
1136
- width: 100%;
1137
- min-height: 24px;
1138
- box-sizing: border-box;
1139
- padding-right: 12px;
1140
- }
1141
-
1142
- .vf-editor-chat-json-line:hover {
1143
- background: rgba(138, 107, 27, 0.05);
1144
- }
1145
-
1146
- .vf-editor-chat-json-line-text {
1147
- display: block;
1148
- width: 100%;
1149
- color: #2c3748;
1150
- font-size: 0.78rem;
1151
- line-height: 1.5;
1152
- white-space: pre-wrap;
1153
- word-break: break-word;
1154
- user-select: text;
1155
- font-family: "SFMono-Regular", "Menlo", monospace;
1156
- }
1157
-
1158
- .vf-editor-chat-json-copy {
1159
- all: unset;
1160
- position: absolute;
1161
- left: 0;
1162
- top: 3px;
1163
- width: 20px;
1164
- height: 20px;
1165
- border-radius: 6px;
1166
- background: rgba(255, 255, 255, 0.96);
1167
- color: #7b879b;
1168
- opacity: 0;
1169
- box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
1170
- cursor: pointer;
1171
- transition: opacity 120ms ease, color 120ms ease;
1172
- }
1173
-
1174
- .vf-editor-chat-json-line:hover .vf-editor-chat-json-copy,
1175
- .vf-editor-chat-json-copy:focus-visible {
1176
- opacity: 1;
1177
- }
1178
-
1179
- .vf-editor-chat-json-copy:hover {
1180
- color: #8a6b1b;
1181
- }
1182
-
1183
- .vf-editor-chat-json-copy svg {
1184
- width: 14px;
1185
- height: 14px;
1186
- margin: 3px;
1187
- }
1188
-
1189
- .vf-editor-chat-http-card {
1190
- width: 100%;
1191
- border-radius: 8px;
1192
- border: 1px solid rgba(191, 164, 109, 0.18);
1193
- background: rgba(248, 244, 235, 0.82);
1194
- overflow: hidden;
1195
- }
1196
-
1197
- .vf-editor-chat-http-card-header {
1198
- all: unset;
1199
- display: flex;
1200
- align-items: center;
1201
- gap: 6px;
1202
- min-width: 0;
1203
- width: 100%;
1204
- box-sizing: border-box;
1205
- padding: 6px 8px;
1206
- cursor: pointer;
1207
- }
1208
-
1209
- .vf-editor-chat-http-pill,
1210
- .vf-editor-chat-http-status {
1211
- display: inline-flex;
1212
- align-items: center;
1213
- min-height: 18px;
1214
- padding: 0 6px;
1215
- border-radius: 999px;
1216
- font-size: 0.62rem;
1217
- font-weight: 800;
1218
- letter-spacing: 0.04em;
1219
- background: rgba(255, 255, 255, 0.92);
1220
- color: #3f4a5d;
1221
- flex: 0 0 auto;
1222
- }
1223
-
1224
- .vf-editor-chat-http-status[data-error="true"] {
1225
- color: #a33c32;
1226
- background: rgba(245, 213, 208, 0.92);
1227
- }
1228
-
1229
- .vf-editor-chat-http-status[data-success="true"] {
1230
- color: #1f6a3a;
1231
- background: rgba(214, 240, 222, 0.96);
1232
- }
1233
-
1234
- .vf-editor-chat-http-url {
1235
- min-width: 0;
1236
- flex: 1 1 auto;
1237
- color: #526179;
1238
- font-size: 0.68rem;
1239
- line-height: 1.25;
1240
- white-space: nowrap;
1241
- overflow: hidden;
1242
- text-overflow: ellipsis;
1243
- }
1244
-
1245
- .vf-editor-chat-http-expand {
1246
- display: inline-flex;
1247
- align-items: center;
1248
- justify-content: center;
1249
- width: 16px;
1250
- min-width: 16px;
1251
- height: 16px;
1252
- border-radius: 999px;
1253
- background: rgba(255, 255, 255, 0.92);
1254
- color: #617087;
1255
- font-size: 0.8rem;
1256
- line-height: 1;
1257
- flex: 0 0 auto;
1258
- }
1259
-
1260
- .vf-editor-chat-http-card-body {
1261
- display: grid;
1262
- gap: 6px;
1263
- padding: 0 8px 8px;
1264
- }
1265
-
1266
- .vf-editor-chat-http-card-body.is-modal {
1267
- padding: 14px;
1268
- gap: 10px;
1269
- }
1270
-
1271
- .vf-editor-chat-http-modal-backdrop {
1272
- position: fixed;
1273
- inset: 0;
1274
- z-index: 120;
1275
- display: flex;
1276
- align-items: center;
1277
- justify-content: center;
1278
- padding: 18px;
1279
- background: rgba(31, 38, 53, 0.42);
1280
- backdrop-filter: blur(8px);
1281
- }
1282
-
1283
- .vf-editor-chat-http-modal-backdrop[hidden] {
1284
- display: none;
1285
- }
1286
-
1287
- .vf-editor-chat-http-modal {
1288
- width: min(860px, calc(100vw - 36px));
1289
- max-height: min(82vh, 920px);
1290
- overflow: auto;
1291
- border-radius: 18px;
1292
- border: 1px solid rgba(191, 164, 109, 0.2);
1293
- background: rgba(255, 251, 244, 0.98);
1294
- box-shadow: 0 24px 56px rgba(15, 23, 42, 0.22);
1295
- }
1296
-
1297
- .vf-editor-chat-http-modal-header {
1298
- display: flex;
1299
- align-items: flex-start;
1300
- justify-content: space-between;
1301
- gap: 10px;
1302
- padding: 14px;
1303
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1304
- position: sticky;
1305
- top: 0;
1306
- background: rgba(255, 251, 244, 0.98);
1307
- }
1308
-
1309
- .vf-editor-chat-http-modal-header-main {
1310
- display: flex;
1311
- align-items: center;
1312
- gap: 8px;
1313
- min-width: 0;
1314
- flex-wrap: wrap;
1315
- }
1316
-
1317
- .vf-editor-chat-http-modal-url {
1318
- min-width: 0;
1319
- color: #334155;
1320
- font-size: 0.78rem;
1321
- line-height: 1.4;
1322
- word-break: break-word;
1323
- overflow-wrap: anywhere;
1324
- flex: 1 1 320px;
1325
- }
1326
-
1327
- .vf-editor-chat-http-modal-close {
1328
- all: unset;
1329
- display: inline-flex;
1330
- align-items: center;
1331
- justify-content: center;
1332
- width: 30px;
1333
- min-width: 30px;
1334
- height: 30px;
1335
- border-radius: 999px;
1336
- background: rgba(36, 48, 65, 0.08);
1337
- color: #617087;
1338
- font-size: 1.2rem;
1339
- line-height: 1;
1340
- cursor: pointer;
1341
- }
1342
-
1343
- .vf-editor-chat-http-note,
1344
- .vf-editor-chat-http-label {
1345
- color: #7b879b;
1346
- font-size: 0.68rem;
1347
- font-weight: 800;
1348
- letter-spacing: 0.08em;
1349
- text-transform: uppercase;
1350
- }
1351
-
1352
- .vf-editor-chat-http-block {
1353
- display: grid;
1354
- gap: 4px;
1355
- }
1356
-
1357
- .vf-editor-chat-http-pre {
1358
- margin: 0;
1359
- padding: 6px 7px;
1360
- border-radius: 6px;
1361
- background: rgba(255, 255, 255, 0.9);
1362
- color: #334155;
1363
- font-size: 0.66rem;
1364
- line-height: 1.4;
1365
- white-space: pre-wrap;
1366
- word-break: break-word;
1367
- overflow-wrap: anywhere;
1368
- max-height: 180px;
1369
- overflow: auto;
1370
- }
1371
-
1372
- .vf-editor-chat-message-status,
1373
- .vf-editor-chat-runtime-status {
1374
- display: inline-flex;
1375
- align-items: center;
1376
- gap: 8px;
1377
- color: #8a6b1b;
1378
- font-size: 0.78rem;
1379
- font-weight: 700;
1380
- line-height: 1.35;
1381
- }
1382
-
1383
- .vf-editor-chat-status-dot {
1384
- width: 8px;
1385
- height: 8px;
1386
- border-radius: 999px;
1387
- background: #dbc17a;
1388
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.14);
1389
- animation: vf-editor-chat-pulse 1.35s ease-in-out infinite;
1390
- }
1391
-
1392
- .vf-editor-chat-message-loading {
1393
- display: inline-flex;
1394
- align-items: center;
1395
- gap: 5px;
1396
- min-height: 18px;
1397
- }
1398
-
1399
- .vf-editor-chat-message-loading span {
1400
- width: 7px;
1401
- height: 7px;
1402
- border-radius: 999px;
1403
- background: rgba(141, 153, 174, 0.72);
1404
- animation: vf-editor-chat-bounce 1s ease-in-out infinite;
1405
- }
1406
-
1407
- .vf-editor-chat-message-loading span:nth-child(2) {
1408
- animation-delay: 120ms;
1409
- }
1410
-
1411
- .vf-editor-chat-message-loading span:nth-child(3) {
1412
- animation-delay: 240ms;
1413
- }
1414
-
1415
- .vf-editor-chat-message-attachments,
1416
- .vf-editor-chat-composer-attachments {
1417
- display: flex;
1418
- flex-wrap: wrap;
1419
- gap: 8px;
1420
- }
1421
-
1422
- .vf-editor-chat-message-attachments {
1423
- flex-direction: column;
1424
- align-items: flex-start;
1425
- width: 100%;
1426
- min-width: 0;
1427
- }
1428
-
1429
- .vf-editor-chat-message-attachment-row {
1430
- display: grid;
1431
- gap: 8px;
1432
- width: fit-content;
1433
- max-width: 100%;
1434
- min-width: 0;
1435
- }
1436
-
1437
- .vf-editor-chat-message-preview-link {
1438
- display: inline-flex;
1439
- width: fit-content;
1440
- max-width: 100%;
1441
- text-decoration: none;
1442
- }
1443
-
1444
- .vf-editor-chat-message-thumb-button {
1445
- all: unset;
1446
- position: relative;
1447
- display: inline-flex;
1448
- width: fit-content;
1449
- max-width: 100%;
1450
- cursor: zoom-in;
1451
- }
1452
-
1453
- .vf-editor-chat-message-thumb-button.is-image {
1454
- flex: 0 0 86px;
1455
- width: 86px;
1456
- height: 86px;
1457
- border-radius: 8px;
1458
- overflow: hidden;
1459
- background: rgba(255, 255, 255, 0.96);
1460
- }
1461
-
1462
- .vf-editor-chat-message-attachment-thumb {
1463
- width: min(240px, 100%);
1464
- max-width: 100%;
1465
- max-height: 180px;
1466
- border-radius: 12px;
1467
- object-fit: contain;
1468
- border: 1px solid rgba(191, 164, 109, 0.22);
1469
- }
1470
-
1471
- .vf-editor-chat-message-thumb-button.is-image .vf-editor-chat-message-attachment-thumb {
1472
- width: 86px;
1473
- max-width: 86px;
1474
- height: 86px;
1475
- max-height: 86px;
1476
- border-radius: 8px;
1477
- object-fit: cover;
1478
- }
1479
-
1480
- .vf-editor-chat-message-image-rail {
1481
- display: flex;
1482
- gap: 8px;
1483
- width: 100%;
1484
- max-width: 100%;
1485
- min-width: 0;
1486
- overflow-x: auto;
1487
- overflow-y: hidden;
1488
- padding: 1px 2px 5px;
1489
- scrollbar-width: thin;
1490
- }
1491
-
1492
- .vf-editor-chat-message-thumb-fallback {
1493
- display: flex;
1494
- align-items: center;
1495
- justify-content: center;
1496
- box-sizing: border-box;
1497
- width: 86px;
1498
- height: 86px;
1499
- padding: 8px;
1500
- border: 1px dashed rgba(141, 153, 174, 0.5);
1501
- border-radius: 8px;
1502
- background: rgba(248, 244, 235, 0.9);
1503
- color: #7b879b;
1504
- font-size: 0.66rem;
1505
- font-weight: 800;
1506
- line-height: 1.15;
1507
- text-align: center;
1508
- }
1509
-
1510
- .vf-editor-chat-message-video-thumb {
1511
- background: rgba(255, 255, 255, 0.96);
1512
- }
1513
-
1514
- .vf-editor-chat-message-video-play {
1515
- position: absolute;
1516
- left: 50%;
1517
- top: 50%;
1518
- width: 38px;
1519
- height: 38px;
1520
- transform: translate(-50%, -50%);
1521
- display: inline-flex;
1522
- align-items: center;
1523
- justify-content: center;
1524
- border-radius: 999px;
1525
- background: rgba(18, 24, 34, 0.74);
1526
- box-shadow: 0 10px 26px rgba(12, 18, 28, 0.24);
1527
- pointer-events: none;
1528
- }
1529
-
1530
- .vf-editor-chat-message-video-play::before {
1531
- content: "";
1532
- display: block;
1533
- width: 0;
1534
- height: 0;
1535
- margin-left: 3px;
1536
- border-top: 8px solid transparent;
1537
- border-bottom: 8px solid transparent;
1538
- border-left: 12px solid #fff8ee;
1539
- }
1540
-
1541
- .vf-editor-chat-media-modal-backdrop {
1542
- position: fixed;
1543
- inset: 0;
1544
- z-index: 125;
1545
- display: flex;
1546
- align-items: center;
1547
- justify-content: center;
1548
- padding: 20px;
1549
- background: rgba(31, 38, 53, 0.58);
1550
- backdrop-filter: blur(10px);
1551
- }
1552
-
1553
- .vf-editor-chat-media-modal {
1554
- width: min(920px, calc(100vw - 40px));
1555
- max-height: min(88vh, 980px);
1556
- overflow: hidden;
1557
- border-radius: 20px;
1558
- border: 1px solid rgba(191, 164, 109, 0.24);
1559
- background: rgba(255, 251, 244, 0.99);
1560
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1561
- }
1562
-
1563
- .vf-editor-chat-json-modal {
1564
- width: min(1080px, calc(100vw - 40px));
1565
- max-height: min(88vh, 980px);
1566
- overflow: hidden;
1567
- border-radius: 20px;
1568
- border: 1px solid rgba(191, 164, 109, 0.24);
1569
- background: rgba(255, 251, 244, 0.99);
1570
- box-shadow: 0 28px 64px rgba(15, 23, 42, 0.28);
1571
- }
1572
-
1573
- .vf-editor-chat-json-modal-body {
1574
- padding: 18px;
1575
- max-height: calc(88vh - 76px);
1576
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1577
- }
1578
-
1579
- .vf-editor-chat-json-modal-body .vf-editor-chat-json-scroll {
1580
- max-height: calc(88vh - 164px);
1581
- }
1582
-
1583
- .vf-editor-chat-doc-viewer {
1584
- max-height: calc(88vh - 164px);
1585
- overflow: auto;
1586
- padding: 16px 18px;
1587
- border-radius: 12px;
1588
- border: 1px solid rgba(191, 164, 109, 0.16);
1589
- background: rgba(255, 255, 255, 0.92);
1590
- }
1591
-
1592
- .vf-editor-chat-doc-viewer.is-inline {
1593
- max-height: 320px;
1594
- }
1595
-
1596
- .vf-editor-chat-doc-pre {
1597
- margin: 0;
1598
- white-space: pre-wrap;
1599
- word-break: break-word;
1600
- color: #2c3748;
1601
- font-size: 0.8rem;
1602
- line-height: 1.55;
1603
- font-family: "SFMono-Regular", "Menlo", monospace;
1604
- }
1605
-
1606
- .vf-editor-chat-doc-markdown {
1607
- color: #334155;
1608
- font-size: 0.92rem;
1609
- line-height: 1.65;
1610
- }
1611
-
1612
- .vf-editor-chat-doc-markdown > :first-child {
1613
- margin-top: 0;
1614
- }
1615
-
1616
- .vf-editor-chat-doc-markdown > :last-child {
1617
- margin-bottom: 0;
1618
- }
1619
-
1620
- .vf-editor-chat-doc-markdown h1,
1621
- .vf-editor-chat-doc-markdown h2,
1622
- .vf-editor-chat-doc-markdown h3 {
1623
- color: #243041;
1624
- line-height: 1.2;
1625
- margin: 0 0 0.7rem;
1626
- }
1627
-
1628
- .vf-editor-chat-doc-markdown p,
1629
- .vf-editor-chat-doc-markdown ul,
1630
- .vf-editor-chat-doc-markdown ol,
1631
- .vf-editor-chat-doc-markdown blockquote,
1632
- .vf-editor-chat-doc-markdown pre {
1633
- margin: 0 0 0.85rem;
1634
- }
1635
-
1636
- .vf-editor-chat-doc-markdown ul,
1637
- .vf-editor-chat-doc-markdown ol {
1638
- padding-left: 1.2rem;
1639
- }
1640
-
1641
- .vf-editor-chat-doc-markdown blockquote {
1642
- margin-left: 0;
1643
- padding-left: 0.9rem;
1644
- border-left: 3px solid rgba(191, 164, 109, 0.34);
1645
- color: #617087;
1646
- }
1647
-
1648
- .vf-editor-chat-doc-markdown a {
1649
- color: #8a6b1b;
1650
- text-decoration: underline;
1651
- text-underline-offset: 0.16em;
1652
- word-break: break-word;
1653
- }
1654
-
1655
- .vf-editor-chat-media-modal-header {
1656
- display: flex;
1657
- align-items: center;
1658
- justify-content: space-between;
1659
- gap: 12px;
1660
- padding: 14px 16px;
1661
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1662
- }
1663
-
1664
- .vf-editor-chat-media-modal-link {
1665
- min-width: 0;
1666
- flex: 1 1 auto;
1667
- color: #8a6b1b;
1668
- font-size: 0.92rem;
1669
- font-weight: 700;
1670
- line-height: 1.35;
1671
- word-break: break-word;
1672
- overflow-wrap: anywhere;
1673
- }
1674
-
1675
- .vf-editor-chat-media-modal-actions {
1676
- display: inline-flex;
1677
- align-items: center;
1678
- gap: 8px;
1679
- flex: 0 0 auto;
1680
- }
1681
-
1682
- .vf-editor-chat-media-modal-control {
1683
- all: unset;
1684
- display: inline-flex;
1685
- align-items: center;
1686
- justify-content: center;
1687
- width: 32px;
1688
- min-width: 32px;
1689
- height: 32px;
1690
- border-radius: 999px;
1691
- background: rgba(36, 48, 65, 0.08);
1692
- color: #617087;
1693
- font-size: 1.2rem;
1694
- line-height: 1;
1695
- cursor: pointer;
1696
- }
1697
-
1698
- a.vf-editor-chat-media-modal-control {
1699
- text-decoration: none;
1700
- }
1701
-
1702
- .vf-editor-chat-media-modal-control:hover,
1703
- .vf-editor-chat-media-modal-control:focus-visible {
1704
- background: rgba(138, 107, 27, 0.14);
1705
- color: #8a6b1b;
1706
- }
1707
-
1708
- .vf-editor-chat-media-modal-control[data-state="done"] {
1709
- background: rgba(56, 142, 91, 0.14);
1710
- color: #2f7d4f;
1711
- }
1712
-
1713
- .vf-editor-chat-media-modal-control[data-state="error"] {
1714
- background: rgba(161, 68, 68, 0.12);
1715
- color: #a14444;
1716
- }
1717
-
1718
- .vf-editor-chat-media-modal-control svg {
1719
- width: 18px;
1720
- height: 18px;
1721
- }
1722
-
1723
- .vf-editor-chat-media-modal-body {
1724
- display: flex;
1725
- align-items: center;
1726
- justify-content: center;
1727
- padding: 18px;
1728
- max-height: calc(88vh - 76px);
1729
- background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(248, 242, 231, 0.96));
1730
- }
1731
-
1732
- .vf-editor-chat-media-modal-image,
1733
- .vf-editor-chat-media-modal-video {
1734
- width: auto;
1735
- max-width: 100%;
1736
- max-height: calc(88vh - 112px);
1737
- border-radius: 16px;
1738
- border: 1px solid rgba(191, 164, 109, 0.18);
1739
- background: rgba(255, 255, 255, 0.96);
1740
- object-fit: contain;
1741
- }
1742
-
1743
- .vf-editor-upload-drawer-backdrop {
1744
- position: fixed;
1745
- inset: 0;
1746
- z-index: 124;
1747
- background: transparent;
1748
- pointer-events: none;
1749
- }
1750
-
1751
- .vf-editor-upload-drawer {
1752
- box-sizing: border-box;
1753
- width: min(420px, 100vw);
1754
- height: 100vh;
1755
- display: grid;
1756
- grid-template-rows: auto auto minmax(0, 1fr) auto;
1757
- border-right: 1px solid rgba(191, 164, 109, 0.24);
1758
- background: rgba(255, 251, 244, 0.99);
1759
- box-shadow: 24px 0 48px rgba(15, 23, 42, 0.22);
1760
- pointer-events: auto;
1761
- }
1762
-
1763
- .vf-editor-upload-header,
1764
- .vf-editor-upload-footer {
1765
- display: flex;
1766
- align-items: center;
1767
- justify-content: space-between;
1768
- gap: 10px;
1769
- padding: 14px;
1770
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1771
- }
1772
-
1773
- .vf-editor-upload-footer {
1774
- border-top: 1px solid rgba(191, 164, 109, 0.14);
1775
- border-bottom: 0;
1776
- }
1777
-
1778
- .vf-editor-upload-footer-confirm {
1779
- display: inline-flex;
1780
- align-items: center;
1781
- gap: 10px;
1782
- color: #7b879b;
1783
- font-size: 0.78rem;
1784
- font-weight: 850;
1785
- }
1786
-
1787
- .vf-editor-upload-title {
1788
- color: #243041;
1789
- font-size: 1rem;
1790
- font-weight: 800;
1791
- }
1792
-
1793
- .vf-editor-upload-subtitle {
1794
- margin-top: 2px;
1795
- color: #7b879b;
1796
- font-size: 0.76rem;
1797
- font-weight: 700;
1798
- }
1799
-
1800
- .vf-editor-upload-close,
1801
- .vf-editor-upload-file-actions button,
1802
- .vf-editor-upload-file-actions a {
1803
- all: unset;
1804
- display: inline-flex;
1805
- align-items: center;
1806
- justify-content: center;
1807
- width: 30px;
1808
- min-width: 30px;
1809
- height: 30px;
1810
- border-radius: 8px;
1811
- background: rgba(36, 48, 65, 0.08);
1812
- color: #617087;
1813
- font-size: 0.94rem;
1814
- font-weight: 800;
1815
- text-decoration: none;
1816
- cursor: pointer;
1817
- }
1818
-
1819
- .vf-editor-upload-tabs {
1820
- display: grid;
1821
- grid-template-columns: repeat(3, minmax(0, 1fr));
1822
- gap: 6px;
1823
- padding: 10px 12px;
1824
- border-bottom: 1px solid rgba(191, 164, 109, 0.14);
1825
- }
1826
-
1827
- .vf-editor-upload-tabs button,
1828
- .vf-editor-upload-browser button,
1829
- .vf-editor-upload-footer button,
1830
- .vf-editor-upload-popconfirm button,
1831
- .vf-editor-upload-more {
1832
- all: unset;
1833
- box-sizing: border-box;
1834
- display: inline-flex;
1835
- align-items: center;
1836
- justify-content: center;
1837
- min-height: 30px;
1838
- padding: 0 10px;
1839
- border: 1px solid rgba(191, 164, 109, 0.24);
1840
- border-radius: 8px;
1841
- background: rgba(255, 255, 255, 0.86);
1842
- color: #4b5568;
1843
- font-size: 0.76rem;
1844
- font-weight: 800;
1845
- cursor: pointer;
1846
- }
1847
-
1848
- .vf-editor-upload-tabs button[data-active="true"],
1849
- .vf-editor-upload-confirm {
1850
- background: #d7b84f;
1851
- border-color: rgba(138, 107, 27, 0.36);
1852
- color: #243041;
1853
- }
1854
-
1855
- .vf-editor-upload-footer button:disabled,
1856
- .vf-editor-upload-more:disabled {
1857
- opacity: 0.52;
1858
- cursor: not-allowed;
1859
- }
1860
-
1861
- .vf-editor-upload-more {
1862
- width: 100%;
1863
- }
1864
-
1865
- .vf-editor-upload-body {
1866
- display: grid;
1867
- align-content: start;
1868
- gap: 10px;
1869
- min-height: 0;
1870
- overflow: auto;
1871
- padding: 12px;
1872
- }
1873
-
1874
- .vf-editor-upload-status {
1875
- padding: 9px 10px;
1876
- border-radius: 8px;
1877
- background: rgba(36, 48, 65, 0.07);
1878
- color: #4b5568;
1879
- font-size: 0.76rem;
1880
- font-weight: 800;
1881
- }
1882
-
1883
- .vf-editor-upload-status[data-tone="error"] {
1884
- background: rgba(155, 45, 45, 0.08);
1885
- color: #8b1e1e;
1886
- }
1887
-
1888
- .vf-editor-upload-drop {
1889
- all: unset;
1890
- display: grid;
1891
- gap: 4px;
1892
- place-items: center;
1893
- min-height: 66px;
1894
- padding: 10px 12px;
1895
- border: 1px dashed rgba(138, 107, 27, 0.36);
1896
- border-radius: 10px;
1897
- background: rgba(255, 255, 255, 0.78);
1898
- color: #243041;
1899
- font-size: 0.92rem;
1900
- font-weight: 850;
1901
- cursor: pointer;
1902
- }
1903
-
1904
- .vf-editor-upload-drop span {
1905
- color: #7b879b;
1906
- font-size: 0.74rem;
1907
- font-weight: 700;
1908
- }
1909
-
1910
- .vf-editor-upload-browser {
1911
- display: grid;
1912
- gap: 8px;
1913
- }
1914
-
1915
- .vf-editor-upload-browser-toolbar {
1916
- display: grid;
1917
- grid-template-columns: minmax(0, 1fr) auto;
1918
- align-items: center;
1919
- gap: 6px;
1920
- }
1921
-
1922
- .vf-editor-upload-browser-toolbar button:disabled {
1923
- opacity: 0.5;
1924
- cursor: not-allowed;
1925
- }
1926
-
1927
- .vf-editor-upload-breadcrumb {
1928
- display: flex;
1929
- align-items: center;
1930
- min-width: 0;
1931
- overflow-x: auto;
1932
- gap: 2px;
1933
- padding-bottom: 1px;
1934
- color: #7b879b;
1935
- font-size: 0.78rem;
1936
- font-weight: 850;
1937
- }
1938
-
1939
- .vf-editor-upload-breadcrumb button {
1940
- all: unset;
1941
- flex: 0 0 auto;
1942
- max-width: 120px;
1943
- padding: 3px 7px;
1944
- border-radius: 6px;
1945
- overflow: hidden;
1946
- text-overflow: ellipsis;
1947
- white-space: nowrap;
1948
- color: #4b5568;
1949
- cursor: pointer;
1950
- }
1951
-
1952
- .vf-editor-upload-breadcrumb-segment {
1953
- display: inline-flex;
1954
- align-items: center;
1955
- gap: 2px;
1956
- min-width: 0;
1957
- }
1958
-
1959
- .vf-editor-upload-folder-grid {
1960
- display: grid;
1961
- gap: 6px;
1962
- }
1963
-
1964
- .vf-editor-upload-folder-row {
1965
- position: relative;
1966
- display: grid;
1967
- grid-template-columns: minmax(0, 1fr) auto;
1968
- align-items: center;
1969
- gap: 10px;
1970
- padding: 9px 10px;
1971
- border: 1px solid rgba(191, 164, 109, 0.18);
1972
- border-radius: 8px;
1973
- background: rgba(255, 255, 255, 0.72);
1974
- }
1975
-
1976
- .vf-editor-upload-folder-open {
1977
- justify-content: flex-start !important;
1978
- gap: 10px;
1979
- min-width: 0;
1980
- border: 0 !important;
1981
- background: transparent !important;
1982
- padding: 0 !important;
1983
- color: #243041 !important;
1984
- }
1985
-
1986
- .vf-editor-upload-folder-open span:last-child {
1987
- min-width: 0;
1988
- overflow: hidden;
1989
- text-overflow: ellipsis;
1990
- white-space: nowrap;
1991
- }
1992
-
1993
- .vf-editor-upload-folder-icon {
1994
- position: relative;
1995
- display: inline-flex;
1996
- align-items: center;
1997
- justify-content: center;
1998
- width: 34px;
1999
- min-width: 34px;
2000
- height: 25px;
2001
- border-radius: 4px;
2002
- background: #dbc17a;
2003
- box-shadow: inset 0 -1px 0 rgba(138, 107, 27, 0.18);
2004
- }
2005
-
2006
- .vf-editor-upload-folder-icon::before {
2007
- content: "";
2008
- position: absolute;
2009
- left: 4px;
2010
- top: -6px;
2011
- width: 16px;
2012
- height: 8px;
2013
- border-radius: 4px 4px 0 0;
2014
- background: #e4cd88;
2015
- }
2016
-
2017
- .vf-editor-upload-folder-menu-button {
2018
- width: auto;
2019
- min-width: 34px;
2020
- padding-left: 9px !important;
2021
- padding-right: 9px !important;
2022
- }
2023
-
2024
- .vf-editor-upload-folder-menu {
2025
- position: absolute;
2026
- right: 8px;
2027
- top: calc(100% - 2px);
2028
- z-index: 3;
2029
- display: grid;
2030
- gap: 4px;
2031
- min-width: 132px;
2032
- padding: 6px;
2033
- border: 1px solid rgba(191, 164, 109, 0.2);
2034
- border-radius: 10px;
2035
- background: #fffbf4;
2036
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
2037
- }
2038
-
2039
- .vf-editor-upload-folder-menu button {
2040
- justify-content: flex-start;
2041
- }
2042
-
2043
- .vf-editor-upload-folder-menu button[data-danger="true"] {
2044
- color: #8b1e1e;
2045
- }
2046
-
2047
- .vf-editor-upload-folder-dialog {
2048
- display: grid;
2049
- gap: 9px;
2050
- padding: 10px;
2051
- border: 1px solid rgba(191, 164, 109, 0.22);
2052
- border-radius: 10px;
2053
- background: rgba(255, 255, 255, 0.86);
2054
- box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
2055
- }
2056
-
2057
- .vf-editor-upload-folder-dialog-title {
2058
- color: #243041;
2059
- font-size: 0.82rem;
2060
- font-weight: 850;
2061
- }
2062
-
2063
- .vf-editor-upload-folder-dialog-copy {
2064
- color: #4b5568;
2065
- font-size: 0.78rem;
2066
- font-weight: 750;
2067
- line-height: 1.35;
2068
- overflow-wrap: anywhere;
2069
- }
2070
-
2071
- .vf-editor-upload-folder-dialog input {
2072
- box-sizing: border-box;
2073
- width: 100%;
2074
- height: 34px;
2075
- padding: 0 9px;
2076
- border: 1px solid rgba(191, 164, 109, 0.24);
2077
- border-radius: 8px;
2078
- background: #fff;
2079
- color: #243041;
2080
- font-size: 0.8rem;
2081
- font-weight: 750;
2082
- }
2083
-
2084
- .vf-editor-upload-folder-dialog-actions {
2085
- display: flex;
2086
- justify-content: flex-end;
2087
- gap: 6px;
2088
- }
2089
-
2090
- .vf-editor-upload-folder-dialog-actions button {
2091
- all: unset;
2092
- box-sizing: border-box;
2093
- display: inline-flex;
2094
- align-items: center;
2095
- justify-content: center;
2096
- min-height: 30px;
2097
- padding: 0 10px;
2098
- border: 1px solid rgba(191, 164, 109, 0.24);
2099
- border-radius: 8px;
2100
- background: rgba(255, 255, 255, 0.86);
2101
- color: #4b5568;
2102
- font-size: 0.76rem;
2103
- font-weight: 800;
2104
- cursor: pointer;
2105
- }
2106
-
2107
- .vf-editor-upload-folder-dialog-actions button[data-danger="true"] {
2108
- border-color: rgba(155, 45, 45, 0.22);
2109
- background: rgba(155, 45, 45, 0.08);
2110
- color: #8b1e1e;
2111
- }
2112
-
2113
- .vf-editor-upload-list {
2114
- display: grid;
2115
- gap: 8px;
2116
- }
2117
-
2118
- .vf-editor-upload-file-card {
2119
- position: relative;
2120
- display: grid;
2121
- grid-template-columns: minmax(0, 1fr) auto;
2122
- align-items: center;
2123
- gap: 8px;
2124
- min-width: 0;
2125
- padding: 8px;
2126
- border: 1px solid rgba(191, 164, 109, 0.18);
2127
- border-radius: 10px;
2128
- background: rgba(255, 255, 255, 0.82);
2129
- }
2130
-
2131
- .vf-editor-upload-file-card[data-selected="true"] {
2132
- border-color: rgba(138, 107, 27, 0.72);
2133
- background: rgba(255, 248, 226, 0.94);
2134
- box-shadow: inset 0 0 0 2px rgba(215, 184, 79, 0.44);
2135
- }
2136
-
2137
- .vf-editor-upload-file-select {
2138
- all: unset;
2139
- display: grid;
2140
- grid-template-columns: auto minmax(0, 1fr);
2141
- align-items: center;
2142
- gap: 9px;
2143
- min-width: 0;
2144
- cursor: pointer;
2145
- }
2146
-
2147
- .vf-editor-upload-file-thumb,
2148
- .vf-editor-upload-file-icon {
2149
- width: 44px;
2150
- min-width: 44px;
2151
- height: 44px;
2152
- border-radius: 8px;
2153
- border: 1px solid rgba(191, 164, 109, 0.2);
2154
- background: rgba(252, 248, 240, 0.94);
2155
- }
2156
-
2157
- .vf-editor-upload-file-thumb {
2158
- object-fit: cover;
2159
- }
2160
-
2161
- .vf-editor-upload-file-icon {
2162
- display: inline-flex;
2163
- align-items: center;
2164
- justify-content: center;
2165
- color: #617087;
2166
- font-weight: 850;
2167
- }
2168
-
2169
- .vf-editor-upload-file-main {
2170
- display: grid;
2171
- gap: 3px;
2172
- min-width: 0;
2173
- }
2174
-
2175
- .vf-editor-upload-file-name,
2176
- .vf-editor-upload-file-meta {
2177
- min-width: 0;
2178
- overflow: hidden;
2179
- text-overflow: ellipsis;
2180
- white-space: nowrap;
2181
- }
2182
-
2183
- .vf-editor-upload-file-name {
2184
- color: #243041;
2185
- font-size: 0.8rem;
2186
- font-weight: 850;
2187
- }
2188
-
2189
- .vf-editor-upload-file-meta {
2190
- color: #7b879b;
2191
- font-size: 0.7rem;
2192
- font-weight: 700;
2193
- }
2194
-
2195
- .vf-editor-upload-file-actions {
2196
- display: inline-flex;
2197
- align-items: center;
2198
- gap: 4px;
2199
- }
2200
-
2201
- .vf-editor-upload-file-actions svg {
2202
- width: 18px;
2203
- height: 18px;
2204
- fill: none;
2205
- stroke: currentColor;
2206
- stroke-width: 2;
2207
- stroke-linecap: round;
2208
- stroke-linejoin: round;
2209
- }
2210
-
2211
- .vf-editor-upload-selection-indicator {
2212
- display: inline-flex;
2213
- align-items: center;
2214
- justify-content: center;
2215
- width: 26px;
2216
- min-width: 26px;
2217
- height: 26px;
2218
- border: 2px solid rgba(123, 135, 155, 0.42);
2219
- border-radius: 7px;
2220
- color: #243041;
2221
- font-size: 0.9rem;
2222
- font-weight: 900;
2223
- background: rgba(255, 255, 255, 0.82);
2224
- }
2225
-
2226
- .vf-editor-upload-selection-indicator[data-selected="true"] {
2227
- border-color: rgba(138, 107, 27, 0.72);
2228
- background: #d7b84f;
2229
- }
2230
-
2231
- .vf-editor-upload-popconfirm {
2232
- position: absolute;
2233
- right: 8px;
2234
- top: calc(100% - 2px);
2235
- z-index: 2;
2236
- display: grid;
2237
- gap: 6px;
2238
- min-width: 180px;
2239
- padding: 8px;
2240
- border: 1px solid rgba(191, 164, 109, 0.2);
2241
- border-radius: 10px;
2242
- background: #fffbf4;
2243
- box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
2244
- color: #4b5568;
2245
- font-size: 0.76rem;
2246
- font-weight: 800;
2247
- }
2248
-
2249
- .vf-editor-upload-popconfirm button[data-danger="true"] {
2250
- border-color: rgba(155, 45, 45, 0.22);
2251
- background: rgba(155, 45, 45, 0.08);
2252
- color: #8b1e1e;
2253
- }
2254
-
2255
- .vf-editor-upload-empty {
2256
- padding: 20px 10px;
2257
- border: 1px dashed rgba(191, 164, 109, 0.24);
2258
- border-radius: 10px;
2259
- color: #7b879b;
2260
- font-size: 0.8rem;
2261
- font-weight: 800;
2262
- text-align: center;
2263
- }
2264
-
2265
- .vf-editor-chat-attachment {
2266
- display: inline-flex;
2267
- align-items: center;
2268
- gap: 8px;
2269
- min-height: 32px;
2270
- padding: 0 10px;
2271
- border-radius: 999px;
2272
- border: 1px solid rgba(191, 164, 109, 0.24);
2273
- background: rgba(252, 248, 240, 0.98);
2274
- color: #4b5568;
2275
- max-width: 100%;
2276
- }
2277
-
2278
- .vf-editor-chat-attachment-name {
2279
- display: inline-flex;
2280
- min-width: 0;
2281
- overflow: hidden;
2282
- text-overflow: ellipsis;
2283
- white-space: nowrap;
2284
- font-size: 0.78rem;
2285
- font-weight: 700;
2286
- }
2287
-
2288
- .vf-editor-chat-attachment-remove {
2289
- display: inline-flex;
2290
- align-items: center;
2291
- justify-content: center;
2292
- width: 18px;
2293
- height: 18px;
2294
- padding: 0;
2295
- border: 0;
2296
- border-radius: 999px;
2297
- background: rgba(36, 48, 65, 0.08);
2298
- color: #617087;
2299
- cursor: pointer;
2300
- box-shadow: none;
2301
- min-height: 0;
2302
- }
2303
-
2304
- .vf-editor-chat-footer {
2305
- padding: 0;
2306
- border-top: 1px solid rgba(191, 164, 109, 0.14);
2307
- background: rgba(255, 251, 244, 0.9);
2308
- backdrop-filter: blur(16px);
2309
- }
2310
-
2311
- .vf-editor-chat-composer {
2312
- display: grid;
2313
- gap: 6px;
2314
- padding: 4px 6px;
2315
- border: 0;
2316
- border-radius: 0;
2317
- background: rgba(255, 255, 255, 0.92);
2318
- box-shadow: none;
2319
- }
2320
-
2321
- .vf-editor-chat-composer-attachments-strip {
2322
- display: flex;
2323
- gap: 8px;
2324
- overflow-x: auto;
2325
- overflow-y: hidden;
2326
- padding-bottom: 2px;
2327
- scrollbar-width: thin;
2328
- }
2329
-
2330
- .vf-editor-chat-composer-attachment-item {
2331
- display: flex;
2332
- align-items: center;
2333
- gap: 8px;
2334
- flex: 0 0 auto;
2335
- min-width: 0;
2336
- max-width: 190px;
2337
- padding: 6px 8px;
2338
- border: 1px solid rgba(191, 164, 109, 0.22);
2339
- border-radius: 12px;
2340
- background: rgba(252, 248, 240, 0.94);
2341
- }
2342
-
2343
- .vf-editor-chat-composer-attachment-thumb,
2344
- .vf-editor-chat-composer-attachment-file {
2345
- width: 42px;
2346
- min-width: 42px;
2347
- height: 42px;
2348
- border-radius: 8px;
2349
- border: 1px solid rgba(191, 164, 109, 0.2);
2350
- background: rgba(255, 255, 255, 0.92);
2351
- }
2352
-
2353
- .vf-editor-chat-composer-attachment-thumb {
2354
- object-fit: cover;
2355
- }
2356
-
2357
- .vf-editor-chat-composer-attachment-file {
2358
- display: inline-flex;
2359
- align-items: center;
2360
- justify-content: center;
2361
- color: #617087;
2362
- font-size: 0.82rem;
2363
- font-weight: 800;
2364
- }
2365
-
2366
- .vf-editor-chat-composer-attachment-meta {
2367
- min-width: 0;
2368
- flex: 1 1 auto;
2369
- }
2370
-
2371
- .vf-editor-chat-composer-attachment-name {
2372
- display: block;
2373
- overflow: hidden;
2374
- text-overflow: ellipsis;
2375
- white-space: nowrap;
2376
- color: #334155;
2377
- font-size: 0.76rem;
2378
- font-weight: 700;
2379
- line-height: 1.2;
2380
- }
2381
-
2382
- .vf-editor-chat-composer-attachment-remove {
2383
- all: unset;
2384
- display: inline-flex;
2385
- align-items: center;
2386
- justify-content: center;
2387
- width: 16px;
2388
- min-width: 16px;
2389
- height: 16px;
2390
- padding: 0;
2391
- border: 0;
2392
- border-radius: 999px;
2393
- background: transparent;
2394
- color: #7b879b;
2395
- box-shadow: none;
2396
- font-size: 0.95rem;
2397
- line-height: 1;
2398
- }
2399
-
2400
- .vf-editor-chat-composer-row {
2401
- display: grid;
2402
- grid-template-columns: auto minmax(0, 1fr) auto;
2403
- grid-template-areas: "field field field" "attach . send";
2404
- align-items: center;
2405
- gap: 6px 8px;
2406
- }
2407
-
2408
- .vf-editor-chat-composer-row .vf-editor-chat-input {
2409
- grid-area: field;
2410
- }
2411
-
2412
- .vf-editor-chat-composer-row .vf-editor-chat-attach-button {
2413
- grid-area: attach;
2414
- }
2415
-
2416
- .vf-editor-chat-composer-row .vf-editor-chat-send-button {
2417
- grid-area: send;
2418
- justify-self: end;
2419
- }
2420
-
2421
- .vf-editor-chat-attach-button,
2422
- .vf-editor-chat-send-button {
2423
- all: unset;
2424
- display: inline-flex;
2425
- align-items: center;
2426
- justify-content: center;
2427
- min-height: 32px;
2428
- height: 32px;
2429
- border-radius: 8px;
2430
- border: 1px solid rgba(191, 164, 109, 0.34);
2431
- background: rgba(255, 255, 255, 0.92);
2432
- color: #243041;
2433
- font-weight: 700;
2434
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
2435
- }
2436
-
2437
- .vf-editor-chat-attach-button {
2438
- width: 32px;
2439
- min-width: 32px;
2440
- padding: 0;
2441
- font-size: 1.1rem;
2442
- line-height: 1;
2443
- }
2444
-
2445
- .vf-editor-chat-send-button {
2446
- padding: 0 12px;
2447
- background: #dbc17a;
2448
- }
2449
-
2450
- .vf-editor-chat-attach-button:disabled,
2451
- .vf-editor-chat-send-button:disabled,
2452
- .vf-editor-chat-new-thread:disabled {
2453
- opacity: 0.58;
2454
- cursor: not-allowed;
2455
- }
2456
-
2457
- .vf-editor-chat-input {
2458
- all: unset;
2459
- display: block;
2460
- width: 100%;
2461
- min-height: 96px;
2462
- max-height: 180px;
2463
- padding: 10px 0;
2464
- background: transparent;
2465
- box-shadow: none;
2466
- color: #243041;
2467
- font-size: 0.88rem;
2468
- line-height: 1.45;
2469
- resize: none;
2470
- border: 0;
2471
- }
2472
-
2473
- .vf-editor-chat-input:focus {
2474
- border: 0;
2475
- box-shadow: none;
2476
- }
2477
-
2478
- .vf-editor-chat-input::placeholder {
2479
- color: #7b879b;
2480
- }
2481
-
2482
- .vf-editor-chat-error {
2483
- margin: 10px 10px 0;
2484
- padding: 12px 14px;
2485
- border-radius: 10px;
2486
- border: 1px solid rgba(155, 45, 45, 0.18);
2487
- background: rgba(155, 45, 45, 0.08);
2488
- color: #8b1e1e;
2489
- font-size: 0.88rem;
2490
- }
2491
-
2492
- @keyframes vf-editor-chat-bounce {
2493
- 0%, 80%, 100% {
2494
- transform: translateY(0);
2495
- opacity: 0.55;
2496
- }
2497
- 40% {
2498
- transform: translateY(-3px);
2499
- opacity: 1;
2500
- }
2501
- }
2502
-
2503
- @keyframes vf-editor-chat-pulse {
2504
- 0%, 100% {
2505
- box-shadow: 0 0 0 0 rgba(219, 193, 122, 0.26);
2506
- }
2507
- 50% {
2508
- box-shadow: 0 0 0 6px rgba(219, 193, 122, 0.08);
2509
- }
2510
- }
2511
-
2512
- @media (max-width: 1180px) {
2513
- .editor-workbench {
2514
- padding-top: 0;
2515
- padding-right: 0;
2516
- padding-bottom: 18px;
2517
- }
2518
-
2519
- .editor-main {
2520
- overflow-x: hidden;
2521
- overflow-y: auto;
2522
- }
2523
-
2524
- .editor-floating-nav {
2525
- position: sticky;
2526
- top: 16px;
2527
- left: auto;
2528
- max-width: none;
2529
- margin: 0 0 16px;
2530
- }
2531
-
2532
- .editor-right-rail {
2533
- position: static;
2534
- width: auto;
2535
- height: 45vh;
2536
- min-height: 240px;
2537
- margin-top: 18px;
2538
- }
2539
-
2540
- .vf-editor-chat-thread-chip {
2541
- max-width: 180px;
2542
- }
2543
-
2544
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2545
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2546
- max-width: min(100%, 340px);
2547
- }
2548
- }
2549
-
2550
- @media (max-width: 1024px) {
2551
- .editor-workbench {
2552
- padding-bottom: 12px;
2553
- }
2554
-
2555
- .editor-floating-nav {
2556
- top: 8px;
2557
- grid-template-columns: auto minmax(0, 1fr) auto;
2558
- gap: 8px;
2559
- padding: 8px;
2560
- border-radius: 18px;
2561
- flex-wrap: nowrap;
2562
- }
2563
-
2564
- .editor-nav-title {
2565
- min-width: 0;
2566
- overflow: hidden;
2567
- text-overflow: ellipsis;
2568
- white-space: nowrap;
2569
- }
2570
-
2571
- .editor-nav-account {
2572
- display: none;
2573
- }
2574
-
2575
- .editor-right-rail {
2576
- position: fixed !important;
2577
- inset: 0;
2578
- z-index: 110;
2579
- width: 100%;
2580
- height: 100svh;
2581
- min-height: 0;
2582
- margin: 0;
2583
- border-radius: 0;
2584
- overflow: visible;
2585
- pointer-events: none;
2586
- }
2587
-
2588
- .editor-chat-panel {
2589
- height: 100%;
2590
- border-left: 0;
2591
- background: transparent;
2592
- pointer-events: none;
2593
- }
2594
-
2595
- .vf-editor-chat-shell {
2596
- height: 100%;
2597
- min-height: 0;
2598
- pointer-events: none;
2599
- }
2600
-
2601
- .vf-editor-chat-shell[data-mobile-open="true"] {
2602
- pointer-events: auto;
2603
- }
2604
-
2605
- .vf-editor-chat-mobile-fab {
2606
- all: unset;
2607
- position: fixed;
2608
- right: 18px;
2609
- bottom: calc(18px + env(safe-area-inset-bottom));
2610
- z-index: 2;
2611
- display: inline-flex;
2612
- align-items: center;
2613
- justify-content: center;
2614
- width: 58px;
2615
- height: 58px;
2616
- border-radius: 999px;
2617
- border: 1px solid rgba(255, 255, 255, 0.86);
2618
- background:
2619
- radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.36), transparent 30%),
2620
- linear-gradient(180deg, #e2c675, #c79f3b);
2621
- color: #243041;
2622
- box-shadow:
2623
- 0 18px 36px rgba(102, 82, 43, 0.24),
2624
- 0 0 0 1px rgba(102, 82, 43, 0.14) inset;
2625
- pointer-events: auto;
2626
- transition:
2627
- transform 160ms ease,
2628
- opacity 160ms ease,
2629
- box-shadow 160ms ease;
2630
- }
2631
-
2632
- .vf-editor-chat-mobile-fab:active {
2633
- transform: translateY(1px) scale(0.98);
2634
- }
2635
-
2636
- .vf-editor-chat-mobile-fab svg {
2637
- width: 29px;
2638
- height: 29px;
2639
- fill: none;
2640
- stroke: currentColor;
2641
- stroke-width: 1.9;
2642
- stroke-linecap: round;
2643
- stroke-linejoin: round;
2644
- }
2645
-
2646
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-mobile-fab {
2647
- opacity: 0;
2648
- transform: scale(0.86);
2649
- pointer-events: none;
2650
- }
2651
-
2652
- /* Chat opens as a floating popup card anchored above the FAB; the expand
2653
- toggle promotes it to a full-screen sheet (data-mobile-expanded). */
2654
- .vf-editor-chat-thread {
2655
- position: fixed;
2656
- top: auto;
2657
- left: auto;
2658
- right: 12px;
2659
- bottom: calc(12px + env(safe-area-inset-bottom));
2660
- z-index: 1;
2661
- display: none;
2662
- width: min(430px, calc(100vw - 24px));
2663
- height: min(72svh, 640px);
2664
- border: 1px solid rgba(219, 193, 122, 0.46);
2665
- border-radius: 24px;
2666
- overflow: hidden;
2667
- background:
2668
- radial-gradient(circle at top right, rgba(219, 193, 122, 0.12), transparent 30%),
2669
- linear-gradient(180deg, rgba(255, 252, 247, 0.99), rgba(252, 247, 238, 0.98));
2670
- box-shadow: 0 30px 72px rgba(37, 45, 61, 0.34);
2671
- pointer-events: auto;
2672
- }
2673
-
2674
- .vf-editor-chat-shell[data-mobile-open="true"] .vf-editor-chat-thread {
2675
- display: flex;
2676
- }
2677
-
2678
- /* Outranks the desktop brainstorm thread rule (display:grid), which has
2679
- higher specificity than the plain .vf-editor-chat-thread hide above. */
2680
- .vf-editor-chat-shell:not([data-mobile-open="true"]) .vf-editor-chat-thread {
2681
- display: none;
2682
- }
2683
-
2684
- .vf-editor-chat-shell[data-mobile-expanded="true"] .vf-editor-chat-thread {
2685
- inset: 0;
2686
- width: 100%;
2687
- height: 100svh;
2688
- border: 0;
2689
- border-radius: 0;
2690
- box-shadow: none;
2691
- }
2692
-
2693
- .vf-editor-chat-expand,
2694
- .vf-editor-chat-minimize {
2695
- all: unset;
2696
- display: inline-flex;
2697
- align-items: center;
2698
- justify-content: center;
2699
- flex: 0 0 auto;
2700
- width: 34px;
2701
- height: 34px;
2702
- border-radius: 999px;
2703
- border: 1px solid rgba(191, 164, 109, 0.24);
2704
- background: rgba(255, 255, 255, 0.9);
2705
- color: #617087;
2706
- font-size: 1.35rem;
2707
- line-height: 1;
2708
- }
2709
-
2710
- .vf-editor-chat-header-row {
2711
- align-items: flex-start;
2712
- justify-content: flex-start;
2713
- gap: 8px;
2714
- }
2715
-
2716
- .vf-editor-chat-header-row > div:first-child {
2717
- flex: 1 1 auto;
2718
- min-width: 0;
2719
- }
2720
-
2721
- .vf-editor-chat-new-thread,
2722
- .vf-editor-chat-expand,
2723
- .vf-editor-chat-minimize {
2724
- flex: 0 0 auto;
2725
- }
2726
-
2727
- .vf-editor-chat-expand svg {
2728
- width: 16px;
2729
- height: 16px;
2730
- fill: none;
2731
- stroke: currentColor;
2732
- stroke-width: 1.9;
2733
- stroke-linecap: round;
2734
- stroke-linejoin: round;
2735
- }
2736
-
2737
- .vf-editor-chat-header,
2738
- .vf-editor-chat-tracer-bar,
2739
- .vf-editor-chat-footer {
2740
- padding-left: 12px;
2741
- padding-right: 12px;
2742
- }
2743
-
2744
- .vf-editor-chat-message.is-assistant .vf-editor-chat-bubble,
2745
- .vf-editor-chat-message.is-user .vf-editor-chat-bubble {
2746
- max-width: 100%;
2747
- }
2748
-
2749
- .vf-editor-chat-thread-chip {
2750
- max-width: 72vw;
2751
- }
2752
-
2753
- /* iOS auto-zooms the viewport when focusing sub-16px inputs; the chat
2754
- composer is the page's primary interaction on phones. */
2755
- .vf-editor-chat-input,
2756
- .vf-editor-upload-folder-dialog input {
2757
- font-size: 16px;
2758
- }
2759
-
2760
- .vf-editor-chat-shell[data-layout="brainstorm"] .editor-chat-panel,
2761
- .vf-editor-chat-shell[data-layout="brainstorm"] {
2762
- background: transparent;
2763
- }
2764
-
2765
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-brainstorm-layout {
2766
- grid-template-columns: minmax(0, 1fr);
2767
- }
2768
-
2769
- /* On narrow screens the persistent history sidebar collapses; the
2770
- overlay history toggle in the header takes over instead. */
2771
- .vf-editor-chat-brainstorm-layout.has-sidebar > .vf-editor-chat-history-pane {
2772
- display: none;
2773
- }
2774
-
2775
- /* Brainstorm surfaces (Discover/Library/Clips) use the same FAB + popup
2776
- dock as everything else; the thread just lays out as a grid. */
2777
- .vf-editor-chat-shell[data-layout="brainstorm"][data-mobile-open="true"] .vf-editor-chat-thread {
2778
- display: grid;
2779
- grid-template-rows: auto minmax(0, 1fr) auto;
2780
- }
2781
-
2782
- .vf-editor-chat-history-close,
2783
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2784
- display: inline-flex;
2785
- }
2786
-
2787
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-viewport {
2788
- padding-left: 12px;
2789
- padding-right: 12px;
2790
- }
2791
-
2792
- /* /chat is the one surface where the chat IS the page: no FAB, no
2793
- minimize/expand, thread pinned full-screen, with a back-to-Discover
2794
- escape hatch in the header (the page has no topbar on phones). */
2795
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] {
2796
- pointer-events: auto;
2797
- }
2798
-
2799
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-mobile-fab,
2800
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-minimize,
2801
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-expand {
2802
- display: none;
2803
- }
2804
-
2805
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header {
2806
- display: inline-flex;
2807
- align-items: center;
2808
- justify-content: center;
2809
- flex: 0 0 auto;
2810
- width: 34px;
2811
- height: 34px;
2812
- padding: 0;
2813
- border: 1px solid rgba(191, 164, 109, 0.24);
2814
- border-radius: 999px;
2815
- background: rgba(255, 255, 255, 0.9);
2816
- color: #617087;
2817
- }
2818
-
2819
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-back-button--header svg {
2820
- width: 18px;
2821
- height: 18px;
2822
- }
2823
-
2824
- .is-chat-page .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-thread {
2825
- position: relative;
2826
- inset: auto;
2827
- display: grid;
2828
- grid-template-rows: auto minmax(0, 1fr) auto;
2829
- width: 100%;
2830
- height: 100%;
2831
- min-height: 0;
2832
- border: 0;
2833
- border-radius: 0;
2834
- box-shadow: none;
2835
- }
2836
- }
2837
-
2838
- @media (min-width: 1025px) {
2839
- .vf-editor-chat-shell[data-layout="brainstorm"] .vf-editor-chat-history-toggle {
2840
- display: none;
2841
- }
2842
-
2843
- /* With the persistent sidebar visible on desktop, the header's overlay
2844
- history toggle is redundant, so hide just that icon (keep forks). */
2845
- .vf-editor-chat-brainstorm-layout.has-sidebar .vf-editor-chat-history-icon:not(.vf-editor-chat-branches-icon) {
2846
- display: none;
2847
- }
2848
- }
2849
- `;
2850
- export const TEMPLATE_EDITOR_SHELL_SCRIPT = `
2851
- document.addEventListener("click", async (event) => {
2852
- const target = event.target;
2853
- if (!(target instanceof HTMLElement)) {
2854
- return;
2855
- }
2856
- const button = target.closest("[data-editor-copy]");
2857
- if (!(button instanceof HTMLButtonElement)) {
2858
- return;
2859
- }
2860
- const value = button.getAttribute("data-editor-copy") || "";
2861
- if (!value) {
2862
- return;
2863
- }
2864
- try {
2865
- await navigator.clipboard.writeText(value);
2866
- button.setAttribute("data-copied", "true");
2867
- const original = button.textContent || "";
2868
- button.textContent = "Copied";
2869
- window.setTimeout(() => {
2870
- button.textContent = original;
2871
- button.setAttribute("data-copied", "false");
2872
- }, 1200);
2873
- } catch {}
2874
- });
2875
- `;
2876
- export function renderTemplateEditorChrome(input) {
2877
- const email = input.account?.email?.trim() || "";
2878
- const displayName = resolveAccountDisplayName(input.account);
2879
- const accountMeta = email
2880
- ? `<div class="editor-nav-account">${escapeHtml(displayName)} <span>(${escapeHtml(email)})</span></div>`
2881
- : "";
2882
- return `
2883
- <nav class="editor-floating-nav" aria-label="Editor workspace">
2884
- <a class="editor-back-link" href="${escapeAttribute(input.backHref)}">Back to Studio</a>
2885
- <div class="editor-nav-title">${escapeHtml(input.templateTitle)}</div>
2886
- ${accountMeta}
2887
- </nav>
2888
- <aside class="editor-right-rail" aria-label="Layer copilot panel">
2889
- <div class="editor-chat-panel" data-template-editor-chat-root></div>
2890
- </aside>
2891
- `;
2892
- }
2893
- //# sourceMappingURL=template-editor-shell.js.map