@cychien/ezdesign 0.9.2 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +209 -550
  2. package/dist/cli.mjs +2640 -655
  3. package/dist/constants.d.ts +8 -4
  4. package/dist/extension/g/0.11.0-75c3fbebc3/dialog.js +1 -0
  5. package/dist/extension/g/0.11.0-75c3fbebc3/media.js +1 -0
  6. package/dist/extension/g/0.11.0-75c3fbebc3/page.js +44 -0
  7. package/dist/extension/g/0.11.0-75c3fbebc3/worker.js +57 -0
  8. package/dist/extension/manifest.json +15 -12
  9. package/dist/home.css +4706 -0
  10. package/dist/home.js +440 -0
  11. package/dist/native-host.mjs +33804 -115
  12. package/dist/overlay.css +5 -1
  13. package/dist/overlay.js +73 -22
  14. package/dist/shell.css +297 -1
  15. package/dist/shell.js +1230 -358
  16. package/dist/video-digest.js +16388 -0
  17. package/dist/vite.mjs +5 -1
  18. package/package.json +4 -3
  19. package/skills/ezdesign/SKILL.md +7 -3
  20. package/skills/ezdesign/reference/start.md +2 -1
  21. package/dist/extension/g/0.9.2-d9aee83dae/dialog.js +0 -1
  22. package/dist/extension/g/0.9.2-d9aee83dae/media.js +0 -1
  23. package/dist/extension/g/0.9.2-d9aee83dae/page.js +0 -39
  24. package/dist/extension/g/0.9.2-d9aee83dae/worker.js +0 -57
  25. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/dialog.css +0 -0
  26. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/dialog.html +0 -0
  27. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/icon-128.png +0 -0
  28. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/icon-16.png +0 -0
  29. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/icon-32.png +0 -0
  30. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/icon-48.png +0 -0
  31. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/media.html +0 -0
  32. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/setup.css +0 -0
  33. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/setup.html +0 -0
  34. /package/dist/extension/g/{0.9.2-d9aee83dae → 0.11.0-75c3fbebc3}/setup.js +0 -0
package/dist/home.css ADDED
@@ -0,0 +1,4706 @@
1
+ /* src/client/shell.css */
2
+ :root {
3
+ --paper: #faf9f6;
4
+ --paper-sunken: #f2f0e9;
5
+ --paper-edge: #e9e6dd;
6
+ --ink: #171717;
7
+ --ink-muted: #676767;
8
+ --ink-faint: #878787;
9
+ --ink-ghost: #b3b3b3;
10
+ --background: var(--paper);
11
+ --panel: #fff;
12
+ --foreground: var(--ink);
13
+ --muted: var(--paper-sunken);
14
+ --muted-foreground: var(--ink-muted);
15
+ --border: var(--paper-edge);
16
+ --primary: var(--ink);
17
+ --primary-foreground: #fff;
18
+ --ring: var(--ink-ghost);
19
+ --ring-halo: color-mix(in oklab, var(--ink) 12%, transparent);
20
+ --radius: 8px;
21
+ --mark: #e56d41;
22
+ --mark-foreground: #fff;
23
+ --arrange: #0d99ff;
24
+ --premium: #d6a21e;
25
+ --app-accent: #ee7a2a;
26
+ --attach: #cee7c1;
27
+ --attach-ink: #3d5c36;
28
+ --ref: #f4d3e2;
29
+ --ref-ink: #7b3a5c;
30
+ --ref-accent: #cf5f92;
31
+ --explore-ink: #5e3f8c;
32
+ --explore-accent: #6b3baa;
33
+ --explore-on-ink: #a97ae0;
34
+ --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
35
+ --t-pop: 0.16s;
36
+ --t-menu: 0.18s;
37
+ --t-view: 0.22s;
38
+ --code-ink: #b4482a;
39
+ --code-fill: rgba(180, 72, 42, 0.09);
40
+ --update-ink: #2566ba;
41
+ --skill-ink: #1a6aa8;
42
+ --tag: #ece3d6;
43
+ --tag-ink: #6b5038;
44
+ --danger: oklch(52% 0.2 25);
45
+ --image-outline: oklch(0% 0 0 / 0.06);
46
+ }
47
+ * {
48
+ box-sizing: border-box;
49
+ }
50
+ html,
51
+ body {
52
+ margin: 0;
53
+ height: 100%;
54
+ }
55
+ body {
56
+ font-family:
57
+ -apple-system,
58
+ BlinkMacSystemFont,
59
+ "Segoe UI",
60
+ "Noto Sans TC",
61
+ sans-serif;
62
+ background: var(--background);
63
+ color: var(--foreground);
64
+ -webkit-font-smoothing: antialiased;
65
+ }
66
+ button {
67
+ font-family: inherit;
68
+ }
69
+ :focus-visible {
70
+ outline: 3px solid var(--ring-halo);
71
+ outline-offset: 0;
72
+ }
73
+ #ez-shell {
74
+ position: relative;
75
+ display: flex;
76
+ height: 100vh;
77
+ }
78
+ .ez-stage-wrap {
79
+ position: relative;
80
+ flex: 1;
81
+ display: flex;
82
+ min-width: 0;
83
+ }
84
+ .ez-shown {
85
+ position: absolute;
86
+ top: 10px;
87
+ right: 10px;
88
+ z-index: 6;
89
+ }
90
+ .ez-shown[data-hidden] {
91
+ display: none;
92
+ }
93
+ .ez-shown-btn {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ width: 28px;
98
+ height: 28px;
99
+ border-radius: 8px;
100
+ border: 1px solid var(--border);
101
+ background: var(--panel);
102
+ color: var(--muted-foreground);
103
+ cursor: pointer;
104
+ box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06);
105
+ transition: color 0.12s ease, border-color 0.12s ease;
106
+ }
107
+ .ez-shown-btn:hover,
108
+ .ez-shown[data-open] .ez-shown-btn {
109
+ color: var(--foreground);
110
+ border-color: var(--ink-ghost);
111
+ }
112
+ .ez-stage {
113
+ flex: 1;
114
+ overflow: auto;
115
+ min-width: 0;
116
+ scrollbar-gutter: stable;
117
+ }
118
+ .ez-grid {
119
+ width: fit-content;
120
+ margin: 0 auto;
121
+ display: flex;
122
+ flex-direction: column;
123
+ align-items: flex-start;
124
+ gap: 26px;
125
+ }
126
+ .ez-grid[hidden],
127
+ .ez-seg[hidden] {
128
+ display: none;
129
+ }
130
+ .ez-stage.ez-multi .ez-grid {
131
+ position: relative;
132
+ display: block;
133
+ margin: 0;
134
+ }
135
+ .ez-stage.ez-multi .ez-card {
136
+ position: absolute;
137
+ }
138
+ .ez-stage.ez-multi .ez-card-head {
139
+ cursor: grab;
140
+ touch-action: none;
141
+ }
142
+ .ez-card.ez-card-drag {
143
+ z-index: 3;
144
+ opacity: 0.92;
145
+ will-change: transform;
146
+ }
147
+ .ez-stage.ez-multi .ez-screen {
148
+ transition: box-shadow 0.18s ease;
149
+ }
150
+ .ez-card.ez-card-drag .ez-screen {
151
+ box-shadow: 0 18px 44px rgba(23, 23, 23, 0.16);
152
+ }
153
+ .ez-grid[data-settle] .ez-card {
154
+ transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
155
+ }
156
+ .ez-drop-hint {
157
+ position: absolute;
158
+ z-index: 4;
159
+ pointer-events: none;
160
+ background: var(--ink);
161
+ border-radius: 2px;
162
+ opacity: 0;
163
+ transition: opacity 0.1s ease;
164
+ }
165
+ .ez-drop-hint[data-on] {
166
+ opacity: 1;
167
+ }
168
+ .ez-drop-hint:not([data-flat]) {
169
+ width: 3px;
170
+ transform: translateX(-50%);
171
+ }
172
+ .ez-drop-hint[data-flat] {
173
+ height: 3px;
174
+ transform: translateY(-50%);
175
+ }
176
+ .ez-stage.ez-framed {
177
+ padding: 16px;
178
+ }
179
+ .ez-stage.ez-multi {
180
+ padding: 28px 32px 44px;
181
+ cursor: grab;
182
+ }
183
+ body.ez-panning,
184
+ body.ez-panning .ez-stage,
185
+ body.ez-arranging,
186
+ body.ez-arranging .ez-stage,
187
+ body.ez-arranging .ez-card-head {
188
+ cursor: grabbing;
189
+ user-select: none;
190
+ }
191
+ body.ez-panning .ez-frame,
192
+ body.ez-arranging .ez-frame {
193
+ pointer-events: none;
194
+ }
195
+ .ez-card {
196
+ display: flex;
197
+ flex-direction: column;
198
+ gap: 7px;
199
+ flex-shrink: 0;
200
+ }
201
+ .ez-stage:not(.ez-multi) .ez-card-head {
202
+ display: none;
203
+ }
204
+ .ez-card-head {
205
+ font-size: 11.5px;
206
+ line-height: 1;
207
+ color: var(--muted-foreground);
208
+ padding-left: 2px;
209
+ white-space: nowrap;
210
+ }
211
+ .ez-framed .ez-screen {
212
+ border-radius: 10px;
213
+ outline: 1px solid var(--border);
214
+ overflow: hidden;
215
+ }
216
+ .ez-screen::after {
217
+ content: "";
218
+ position: absolute;
219
+ inset: 0;
220
+ border-radius: inherit;
221
+ pointer-events: none;
222
+ display: none;
223
+ box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--veil-edge) 62%, transparent);
224
+ }
225
+ .ez-stage[data-ez-veil] .ez-screen::after {
226
+ display: block;
227
+ }
228
+ .ez-stage[data-ez-veil=pick] {
229
+ --veil-edge: var(--ref-accent);
230
+ }
231
+ .ez-stage[data-ez-veil=explore] {
232
+ --veil-edge: var(--explore-accent);
233
+ }
234
+ .ez-screen {
235
+ flex-shrink: 0;
236
+ position: relative;
237
+ }
238
+ .ez-frame-wrap {
239
+ width: 100%;
240
+ height: 100%;
241
+ transform-origin: top left;
242
+ }
243
+ .ez-frame {
244
+ display: block;
245
+ width: 100%;
246
+ height: 100%;
247
+ border: none;
248
+ background: #fff;
249
+ }
250
+ .ez-sidebar-slot {
251
+ display: flex;
252
+ flex-shrink: 0;
253
+ }
254
+ .ez-sidebar-slot[data-collapsed] {
255
+ width: 0;
256
+ overflow: hidden;
257
+ }
258
+ .ez-sidebar {
259
+ position: relative;
260
+ flex-shrink: 0;
261
+ background: var(--background);
262
+ border-left: 1px solid var(--border);
263
+ display: flex;
264
+ flex-direction: column;
265
+ min-height: 0;
266
+ }
267
+ .ez-activity {
268
+ display: flex;
269
+ flex-direction: column;
270
+ align-items: center;
271
+ gap: 4px;
272
+ flex-shrink: 0;
273
+ width: 44px;
274
+ padding-top: 5px;
275
+ background: var(--background);
276
+ border-left: 1px solid var(--border);
277
+ }
278
+ .ez-activity-btn {
279
+ position: relative;
280
+ display: grid;
281
+ place-items: center;
282
+ width: 32px;
283
+ height: 32px;
284
+ padding: 0;
285
+ border: none;
286
+ border-radius: 8px;
287
+ background: transparent;
288
+ color: var(--muted-foreground);
289
+ cursor: pointer;
290
+ transition:
291
+ background 0.12s ease,
292
+ color 0.12s ease,
293
+ box-shadow 0.12s ease;
294
+ }
295
+ .ez-activity-btn path {
296
+ stroke-width: 1.75;
297
+ }
298
+ .ez-activity-btn:hover {
299
+ background: var(--muted);
300
+ color: var(--foreground);
301
+ }
302
+ .ez-activity-btn[aria-pressed=true] {
303
+ background: var(--panel);
304
+ color: var(--foreground);
305
+ box-shadow:
306
+ inset 0 0 0 1px var(--border),
307
+ 0 0 1px 0 rgb(16 12 12 / 0.06),
308
+ 0 1px 1px 0 rgb(16 12 12 / 0.05);
309
+ }
310
+ .ez-activity-btn[aria-pressed=false][data-working]::after {
311
+ content: "";
312
+ position: absolute;
313
+ top: 5px;
314
+ right: 5px;
315
+ width: 6px;
316
+ height: 6px;
317
+ border-radius: 50%;
318
+ background: oklch(70% 0.16 70);
319
+ box-shadow: 0 0 0 2px var(--background);
320
+ animation: ez-pulse 1.2s ease-in-out infinite;
321
+ }
322
+ .ez-account {
323
+ position: relative;
324
+ margin-top: auto;
325
+ margin-bottom: 8px;
326
+ }
327
+ .ez-avatar {
328
+ display: grid;
329
+ place-items: center;
330
+ width: 22px;
331
+ height: 22px;
332
+ border-radius: 50%;
333
+ background: var(--primary);
334
+ color: var(--primary-foreground);
335
+ font-size: 11px;
336
+ font-weight: 600;
337
+ line-height: 1;
338
+ }
339
+ .ez-account-who {
340
+ display: flex;
341
+ flex-direction: column;
342
+ gap: 1px;
343
+ padding: 6px 8px 8px;
344
+ margin-bottom: 2px;
345
+ border-bottom: 1px solid var(--border);
346
+ }
347
+ .ez-account-label {
348
+ font-size: 11px;
349
+ color: var(--muted-foreground);
350
+ }
351
+ .ez-account-email {
352
+ max-width: 240px;
353
+ overflow: hidden;
354
+ text-overflow: ellipsis;
355
+ white-space: nowrap;
356
+ font-size: 12px;
357
+ font-weight: 500;
358
+ color: var(--foreground);
359
+ }
360
+ .ez-account-menu .ez-menu-item svg {
361
+ color: var(--muted-foreground);
362
+ }
363
+ .ez-resizer {
364
+ position: relative;
365
+ flex-shrink: 0;
366
+ width: 9px;
367
+ margin-inline: -4px -5px;
368
+ z-index: 4;
369
+ cursor: col-resize;
370
+ touch-action: none;
371
+ }
372
+ .ez-resizer::after {
373
+ content: "";
374
+ position: absolute;
375
+ inset-block: 0;
376
+ left: 4px;
377
+ width: 1px;
378
+ background: transparent;
379
+ transition: background 0.12s ease;
380
+ }
381
+ .ez-resizer:hover::after,
382
+ .ez-resizer:focus-visible::after,
383
+ .ez-resizing .ez-resizer::after {
384
+ background: var(--ink-ghost);
385
+ }
386
+ .ez-resizing {
387
+ cursor: col-resize;
388
+ user-select: none;
389
+ }
390
+ .ez-resizing .ez-frame {
391
+ pointer-events: none;
392
+ }
393
+ .ez-side-head {
394
+ padding: 12px 14px;
395
+ border-bottom: 1px solid var(--border);
396
+ flex-shrink: 0;
397
+ }
398
+ .ez-head-row {
399
+ position: relative;
400
+ display: flex;
401
+ align-items: center;
402
+ gap: 6px;
403
+ }
404
+ .ez-logo {
405
+ display: flex;
406
+ position: relative;
407
+ top: -0.8px;
408
+ color: var(--ink);
409
+ }
410
+ .ez-logo > svg {
411
+ height: 16px;
412
+ width: auto;
413
+ }
414
+ .ez-version {
415
+ font-size: 11px;
416
+ color: var(--ink-faint);
417
+ }
418
+ .ez-target {
419
+ display: block;
420
+ font-size: 11.5px;
421
+ line-height: 1.15;
422
+ min-height: 1lh;
423
+ color: var(--muted-foreground);
424
+ margin-top: 3px;
425
+ overflow: hidden;
426
+ text-overflow: ellipsis;
427
+ white-space: nowrap;
428
+ }
429
+ .ez-spacer {
430
+ flex: 1;
431
+ }
432
+ .ez-keys-wrap {
433
+ display: flex;
434
+ }
435
+ .ez-keys {
436
+ display: inline-flex;
437
+ align-items: center;
438
+ padding: 0;
439
+ border: none;
440
+ background: none;
441
+ color: var(--ink-faint);
442
+ cursor: pointer;
443
+ transition: color 0.12s ease;
444
+ }
445
+ .ez-keys:hover,
446
+ .ez-keys:focus-visible {
447
+ color: var(--foreground);
448
+ }
449
+ .ez-keys-panel {
450
+ position: absolute;
451
+ top: calc(100% + 6px);
452
+ right: 0;
453
+ z-index: 5;
454
+ width: max-content;
455
+ display: flex;
456
+ flex-direction: column;
457
+ gap: 6px;
458
+ padding: 10px;
459
+ border-radius: 12px;
460
+ background: var(--panel);
461
+ border: 1px solid var(--border);
462
+ box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
463
+ opacity: 0;
464
+ visibility: hidden;
465
+ transition: opacity 0.12s ease, visibility 0.12s ease;
466
+ }
467
+ .ez-keys-wrap[data-open] .ez-keys-panel,
468
+ .ez-keys:focus-visible + .ez-keys-panel {
469
+ opacity: 1;
470
+ visibility: visible;
471
+ }
472
+ .ez-keys-row {
473
+ display: flex;
474
+ align-items: center;
475
+ gap: 8px;
476
+ }
477
+ .ez-kbd {
478
+ flex-shrink: 0;
479
+ min-width: 26px;
480
+ text-align: center;
481
+ font-family: inherit;
482
+ font-size: 11px;
483
+ font-weight: 600;
484
+ line-height: 1.6;
485
+ color: var(--muted-foreground);
486
+ background: var(--muted);
487
+ border-radius: 5px;
488
+ padding: 1px 6px;
489
+ }
490
+ .ez-keys-label {
491
+ font-size: 12px;
492
+ color: var(--foreground);
493
+ white-space: nowrap;
494
+ }
495
+ .ez-badge {
496
+ display: inline-flex;
497
+ align-items: center;
498
+ gap: 5px;
499
+ font-size: 11px;
500
+ font-weight: 500;
501
+ line-height: 1.5;
502
+ color: var(--muted-foreground);
503
+ background: var(--muted);
504
+ border-radius: 999px;
505
+ padding: 3px 9px;
506
+ white-space: nowrap;
507
+ }
508
+ .ez-badge::before {
509
+ content: "";
510
+ width: 6px;
511
+ height: 6px;
512
+ border-radius: 50%;
513
+ background: var(--ink-ghost);
514
+ flex-shrink: 0;
515
+ }
516
+ .ez-badge.ez-online::before {
517
+ background: oklch(62% 0.15 150);
518
+ }
519
+ .ez-badge.ez-offline::before {
520
+ background: var(--danger);
521
+ }
522
+ .ez-badge.ez-working::before {
523
+ background: oklch(70% 0.16 70);
524
+ animation: ez-pulse 1.2s ease-in-out infinite;
525
+ }
526
+ @keyframes ez-pulse {
527
+ 50% {
528
+ opacity: 0.3;
529
+ }
530
+ }
531
+ .ez-annotate-group {
532
+ display: flex;
533
+ gap: 6px;
534
+ margin-top: 8px;
535
+ }
536
+ .ez-seg {
537
+ display: inline-flex;
538
+ align-items: center;
539
+ gap: 2px;
540
+ background: var(--muted);
541
+ border-radius: var(--radius);
542
+ padding: 2px;
543
+ margin-top: 10px;
544
+ width: fit-content;
545
+ }
546
+ .ez-seg-item {
547
+ display: flex;
548
+ align-items: center;
549
+ gap: 0px;
550
+ border: none;
551
+ background: transparent;
552
+ color: var(--muted-foreground);
553
+ font-family: inherit;
554
+ font-size: 12px;
555
+ border-radius: 6px;
556
+ cursor: pointer;
557
+ white-space: nowrap;
558
+ transition: color 0.12s ease;
559
+ }
560
+ .ez-seg-item:not(.ez-on):hover {
561
+ background: oklch(100% 0 0 / 0.6);
562
+ color: var(--foreground);
563
+ }
564
+ .ez-seg-item.ez-on {
565
+ background: var(--panel);
566
+ color: var(--foreground);
567
+ font-weight: 600;
568
+ box-shadow: 0 1px 2px oklch(14.1% 0.005 285.823 / 0.1);
569
+ }
570
+ .ez-seg-multi {
571
+ padding: 6px 9px;
572
+ }
573
+ .ez-seg-device {
574
+ position: relative;
575
+ padding-right: 0;
576
+ }
577
+ .ez-seg-label {
578
+ border: none;
579
+ background: transparent;
580
+ color: inherit;
581
+ font: inherit;
582
+ padding: 6px 3px 6px 9px;
583
+ border-radius: 6px;
584
+ cursor: pointer;
585
+ }
586
+ .ez-seg-caret {
587
+ border: none;
588
+ background: none;
589
+ position: relative;
590
+ display: flex;
591
+ align-items: center;
592
+ align-self: stretch;
593
+ padding: 0 6px;
594
+ cursor: pointer;
595
+ color: var(--muted-foreground);
596
+ }
597
+ .ez-seg-caret::before {
598
+ content: "";
599
+ position: absolute;
600
+ inset: 3px 2px;
601
+ border-radius: 5px;
602
+ background: transparent;
603
+ transition: background 0.12s ease;
604
+ }
605
+ .ez-seg-caret:hover::before {
606
+ background: var(--muted);
607
+ }
608
+ .ez-seg-caret svg {
609
+ position: relative;
610
+ pointer-events: none;
611
+ }
612
+ .ez-menu {
613
+ position: absolute;
614
+ top: calc(100% + 6px);
615
+ left: 0;
616
+ z-index: 5;
617
+ min-width: 100%;
618
+ width: max-content;
619
+ display: none;
620
+ flex-direction: column;
621
+ gap: 2px;
622
+ padding: 4px;
623
+ border-radius: 10px;
624
+ background: var(--panel);
625
+ border: 1px solid var(--border);
626
+ box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
627
+ }
628
+ .ez-seg-device[data-open] .ez-menu,
629
+ .ez-shown[data-open] .ez-menu,
630
+ .ez-config[data-open] .ez-menu,
631
+ .ez-agent[data-open] .ez-menu,
632
+ .ez-update-hint[data-open] .ez-menu,
633
+ .ez-account[data-open] .ez-menu,
634
+ .ez-canvas-menu-wrap[data-open] .ez-menu {
635
+ display: flex;
636
+ }
637
+ .ez-menu-right {
638
+ left: auto;
639
+ right: 0;
640
+ }
641
+ .ez-menu-up {
642
+ top: auto;
643
+ bottom: calc(100% + 6px);
644
+ max-height: 60vh;
645
+ overflow-y: auto;
646
+ }
647
+ .ez-account-menu {
648
+ top: auto;
649
+ left: auto;
650
+ bottom: 0;
651
+ right: calc(100% + 8px);
652
+ min-width: 200px;
653
+ }
654
+ .ez-menu-group {
655
+ display: flex;
656
+ flex-direction: column;
657
+ gap: 2px;
658
+ }
659
+ .ez-menu-group + .ez-menu-group {
660
+ margin-top: 4px;
661
+ border-top: 1px solid var(--border);
662
+ padding-top: 4px;
663
+ }
664
+ .ez-menu-label {
665
+ padding: 4px 8px 2px;
666
+ font-size: 10px;
667
+ font-weight: 500;
668
+ letter-spacing: 0.04em;
669
+ text-transform: uppercase;
670
+ color: var(--ink-ghost);
671
+ }
672
+ .ez-menu-tick {
673
+ display: flex;
674
+ width: 14px;
675
+ color: #3f9e4d;
676
+ visibility: hidden;
677
+ }
678
+ .ez-menu-tick svg * {
679
+ stroke-width: 3;
680
+ }
681
+ .ez-menu-item.ez-on .ez-menu-tick {
682
+ visibility: visible;
683
+ }
684
+ .ez-menu-item[disabled] {
685
+ cursor: default;
686
+ }
687
+ .ez-menu-item[disabled] .ez-menu-name {
688
+ color: var(--muted-foreground);
689
+ }
690
+ .ez-menu-item {
691
+ display: flex;
692
+ align-items: center;
693
+ gap: 7px;
694
+ border: none;
695
+ background: transparent;
696
+ color: var(--foreground);
697
+ font-family: inherit;
698
+ font-size: 12px;
699
+ font-weight: 500;
700
+ text-align: left;
701
+ padding: 5px 8px;
702
+ border-radius: 6px;
703
+ cursor: pointer;
704
+ }
705
+ .ez-menu-item:hover:not([disabled]),
706
+ .ez-menu-item:focus-visible {
707
+ background: var(--muted);
708
+ }
709
+ .ez-menu-check {
710
+ display: flex;
711
+ flex-shrink: 0;
712
+ margin-left: 12px;
713
+ color: var(--muted-foreground);
714
+ visibility: hidden;
715
+ }
716
+ .ez-menu-item[data-current] .ez-menu-check {
717
+ visibility: visible;
718
+ }
719
+ .ez-menu-name {
720
+ flex: 1;
721
+ }
722
+ .ez-tool-btn {
723
+ flex: 1;
724
+ display: inline-flex;
725
+ align-items: center;
726
+ justify-content: center;
727
+ gap: 6px;
728
+ border: 1px solid var(--border);
729
+ background: var(--panel);
730
+ color: var(--foreground);
731
+ font-size: 12px;
732
+ font-weight: 600;
733
+ padding: 6px 10px;
734
+ border-radius: var(--radius);
735
+ cursor: pointer;
736
+ transition: background 0.12s ease, border-color 0.12s ease;
737
+ }
738
+ .ez-tool-btn:not(.ez-on):hover:not(:disabled) {
739
+ background: var(--muted);
740
+ }
741
+ .ez-tool-btn.ez-on {
742
+ background: var(--primary);
743
+ border-color: var(--primary);
744
+ color: var(--primary-foreground);
745
+ }
746
+ .ez-tool-btn:disabled {
747
+ opacity: 0.45;
748
+ cursor: default;
749
+ }
750
+ .ez-send {
751
+ width: 100%;
752
+ display: inline-flex;
753
+ align-items: center;
754
+ justify-content: center;
755
+ gap: 6px;
756
+ border: 1px solid var(--primary);
757
+ background: var(--primary);
758
+ color: var(--primary-foreground);
759
+ font-size: 13px;
760
+ font-weight: 600;
761
+ padding: 8px;
762
+ border-radius: var(--radius);
763
+ cursor: pointer;
764
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
765
+ transition: opacity 0.12s ease;
766
+ }
767
+ .ez-send:hover:not(:disabled) {
768
+ opacity: 0.88;
769
+ }
770
+ .ez-send:disabled {
771
+ opacity: 0.4;
772
+ cursor: default;
773
+ }
774
+ .ez-send-waiting {
775
+ animation: ez-send-wait 1.4s ease-in-out infinite;
776
+ }
777
+ @keyframes ez-send-wait {
778
+ 50% {
779
+ opacity: 0.55;
780
+ }
781
+ }
782
+ @media (prefers-reduced-motion: reduce) {
783
+ .ez-send-waiting {
784
+ animation: none;
785
+ opacity: 0.7;
786
+ }
787
+ }
788
+ .ez-notices {
789
+ position: absolute;
790
+ left: 0;
791
+ right: 0;
792
+ bottom: 0;
793
+ z-index: 2;
794
+ }
795
+ .ez-notices > *:not([hidden]) {
796
+ box-shadow: 0 -2px 6px oklch(0% 0 0 / 0.035);
797
+ }
798
+ .ez-notices > *:not([hidden]) ~ *:not([hidden]) {
799
+ box-shadow: none;
800
+ }
801
+ .ez-notices > * {
802
+ animation: ez-rise 0.16s ease-out;
803
+ }
804
+ .ez-resume,
805
+ .ez-confirm {
806
+ animation: none;
807
+ }
808
+ @keyframes ez-rise {
809
+ from {
810
+ opacity: 0;
811
+ transform: translateY(8px);
812
+ }
813
+ 45% {
814
+ opacity: 1;
815
+ }
816
+ to {
817
+ transform: translateY(0);
818
+ }
819
+ }
820
+ @media (prefers-reduced-motion: reduce) {
821
+ .ez-notices > * {
822
+ animation: none;
823
+ }
824
+ }
825
+ .ez-notices > *:not([hidden]) ~ *:not([hidden]) {
826
+ border-top: 1px solid var(--border);
827
+ }
828
+ .ez-status {
829
+ position: absolute;
830
+ top: 5px;
831
+ left: calc((100% - 44px) / 2);
832
+ z-index: 40;
833
+ display: flex;
834
+ align-items: center;
835
+ gap: 8px;
836
+ max-width: calc(100% - 44px - 32px);
837
+ padding: 7px 14px;
838
+ border-radius: 999px;
839
+ background: var(--ink);
840
+ box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.25), 0 6px 20px oklch(0% 0 0 / 0.3);
841
+ color: #fff;
842
+ font-size: 12px;
843
+ line-height: 1.5;
844
+ white-space: nowrap;
845
+ transform: translateX(-50%);
846
+ animation: ez-toast-in var(--t-view) var(--ease-out) both;
847
+ }
848
+ .ez-status[hidden] {
849
+ display: none;
850
+ }
851
+ .ez-status[data-alert]::before {
852
+ content: "";
853
+ flex-shrink: 0;
854
+ width: 6px;
855
+ height: 6px;
856
+ border-radius: 50%;
857
+ background: oklch(70% 0.16 70);
858
+ }
859
+ .ez-status-title {
860
+ font-weight: 600;
861
+ }
862
+ .ez-status-code {
863
+ padding: 1px 5px;
864
+ border-radius: 4px;
865
+ background: oklch(100% 0 0 / 0.14);
866
+ font-family:
867
+ ui-monospace,
868
+ SFMono-Regular,
869
+ Menlo,
870
+ monospace;
871
+ font-size: 0.92em;
872
+ }
873
+ @media (prefers-reduced-motion: reduce) {
874
+ .ez-status {
875
+ animation-name: ez-fade-in;
876
+ }
877
+ }
878
+ .ez-update {
879
+ position: relative;
880
+ padding: 12px 14px;
881
+ border-top: 1px solid var(--border);
882
+ background: var(--muted);
883
+ font-size: 12.5px;
884
+ line-height: 1.5;
885
+ flex-shrink: 0;
886
+ }
887
+ .ez-update-title {
888
+ font-weight: 600;
889
+ font-size: 13px;
890
+ }
891
+ .ez-update-lines {
892
+ margin: 6px 0 0;
893
+ padding: 0;
894
+ list-style: none;
895
+ color: var(--muted-foreground);
896
+ display: flex;
897
+ flex-direction: column;
898
+ gap: 2px;
899
+ word-break: break-all;
900
+ }
901
+ .ez-update-error {
902
+ color: oklch(45% 0.15 25);
903
+ font-family:
904
+ ui-monospace,
905
+ SFMono-Regular,
906
+ Menlo,
907
+ monospace;
908
+ font-size: 11.5px;
909
+ }
910
+ .ez-update-actions {
911
+ display: flex;
912
+ align-items: center;
913
+ gap: 8px;
914
+ margin-top: 10px;
915
+ }
916
+ .ez-update-go {
917
+ border: 1px solid var(--primary);
918
+ background: var(--primary);
919
+ color: var(--primary-foreground);
920
+ font-size: 12px;
921
+ font-weight: 600;
922
+ padding: 5px 12px;
923
+ border-radius: 6px;
924
+ cursor: pointer;
925
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
926
+ }
927
+ .ez-update-go:hover:not(:disabled) {
928
+ opacity: 0.88;
929
+ }
930
+ .ez-update-go:disabled {
931
+ opacity: 0.4;
932
+ cursor: default;
933
+ }
934
+ .ez-update-label {
935
+ display: inline-block;
936
+ transform: translateY(-1px);
937
+ }
938
+ .ez-update-x {
939
+ position: absolute;
940
+ top: 6px;
941
+ right: 6px;
942
+ display: inline-flex;
943
+ align-items: center;
944
+ justify-content: center;
945
+ padding: 6px;
946
+ border: none;
947
+ background: none;
948
+ color: var(--ink-ghost);
949
+ cursor: pointer;
950
+ }
951
+ .ez-update-x:hover {
952
+ color: var(--foreground);
953
+ }
954
+ .ez-update-hint {
955
+ position: relative;
956
+ display: flex;
957
+ }
958
+ .ez-update-flag {
959
+ display: inline-flex;
960
+ align-items: center;
961
+ border: none;
962
+ background: none;
963
+ padding: 0;
964
+ font-size: 11px;
965
+ font-weight: 500;
966
+ white-space: nowrap;
967
+ color: var(--update-ink);
968
+ cursor: pointer;
969
+ }
970
+ .ez-update-flag:hover {
971
+ color: color-mix(in oklab, var(--update-ink) 82%, var(--ink));
972
+ text-decoration: underline;
973
+ text-underline-offset: 2px;
974
+ }
975
+ .ez-update-hint[hidden],
976
+ .ez-config[hidden],
977
+ .ez-update[hidden] {
978
+ display: none;
979
+ }
980
+ .ez-devserver-card {
981
+ width: min(520px, calc(100% - 48px));
982
+ margin: max(48px, 12vh) auto 48px;
983
+ font-size: 13.5px;
984
+ line-height: 1.55;
985
+ }
986
+ .ez-devserver-card[hidden] {
987
+ display: none;
988
+ }
989
+ .ez-devserver-title {
990
+ margin: 0;
991
+ font-size: 16px;
992
+ font-weight: 600;
993
+ line-height: 1.4;
994
+ }
995
+ .ez-devserver-text {
996
+ margin: 6px 0 0;
997
+ color: var(--muted-foreground);
998
+ }
999
+ .ez-devserver-hint {
1000
+ margin: 10px 0 0;
1001
+ font-size: 12.5px;
1002
+ color: var(--muted-foreground);
1003
+ }
1004
+ .ez-devserver-command {
1005
+ display: flex;
1006
+ flex-direction: column;
1007
+ gap: 4px;
1008
+ margin-top: 14px;
1009
+ padding: 10px 12px;
1010
+ border-radius: 8px;
1011
+ background: var(--muted);
1012
+ }
1013
+ .ez-devserver-line,
1014
+ .ez-devserver-tool,
1015
+ .ez-devserver-log,
1016
+ .ez-devserver-input {
1017
+ font-family:
1018
+ ui-monospace,
1019
+ SFMono-Regular,
1020
+ Menlo,
1021
+ monospace;
1022
+ }
1023
+ .ez-devserver-line {
1024
+ font-size: 13px;
1025
+ -webkit-text-stroke: 0.3px currentColor;
1026
+ color: var(--foreground);
1027
+ word-break: break-all;
1028
+ }
1029
+ .ez-devserver-source {
1030
+ font-size: 12px;
1031
+ color: var(--muted-foreground);
1032
+ }
1033
+ .ez-devserver-log {
1034
+ margin: 14px 0 0;
1035
+ max-height: 260px;
1036
+ overflow: auto;
1037
+ padding: 10px 12px;
1038
+ border-radius: 8px;
1039
+ background: var(--ink);
1040
+ color: #e8e6e1;
1041
+ font-size: 11.5px;
1042
+ line-height: 1.5;
1043
+ white-space: pre-wrap;
1044
+ word-break: break-all;
1045
+ }
1046
+ .ez-devserver-log:empty::before {
1047
+ content: "\7b49\5f85\8f38\51fa\2026";
1048
+ color: var(--ink-faint);
1049
+ }
1050
+ .ez-devserver-missing {
1051
+ display: flex;
1052
+ flex-direction: column;
1053
+ gap: 8px;
1054
+ margin: 14px 0 0;
1055
+ padding: 0;
1056
+ list-style: none;
1057
+ }
1058
+ .ez-devserver-missing li {
1059
+ display: flex;
1060
+ align-items: baseline;
1061
+ gap: 10px;
1062
+ }
1063
+ .ez-devserver-tool {
1064
+ flex-shrink: 0;
1065
+ padding: 1px 6px;
1066
+ border-radius: 5px;
1067
+ background: var(--muted);
1068
+ font-size: 12.5px;
1069
+ font-weight: 600;
1070
+ }
1071
+ .ez-devserver-inline {
1072
+ padding: 0 4px;
1073
+ border-radius: 4px;
1074
+ background: var(--muted);
1075
+ font-family:
1076
+ ui-monospace,
1077
+ SFMono-Regular,
1078
+ Menlo,
1079
+ monospace;
1080
+ font-size: 12px;
1081
+ }
1082
+ .ez-devserver-form {
1083
+ display: flex;
1084
+ flex-direction: column;
1085
+ gap: 12px;
1086
+ margin-top: 14px;
1087
+ }
1088
+ .ez-devserver-label {
1089
+ display: flex;
1090
+ flex-direction: column;
1091
+ gap: 5px;
1092
+ font-size: 12.5px;
1093
+ font-weight: 500;
1094
+ color: var(--muted-foreground);
1095
+ }
1096
+ .ez-devserver-input {
1097
+ height: 34px;
1098
+ padding: 0 10px;
1099
+ border: 1px solid var(--border);
1100
+ border-radius: 7px;
1101
+ background: var(--panel);
1102
+ color: var(--foreground);
1103
+ font-size: 13px;
1104
+ }
1105
+ .ez-devserver-input:focus-visible {
1106
+ outline: none;
1107
+ border-color: var(--ring);
1108
+ box-shadow: 0 0 0 3px var(--ring-halo);
1109
+ }
1110
+ .ez-devserver-actions {
1111
+ display: flex;
1112
+ flex-wrap: wrap;
1113
+ align-items: center;
1114
+ gap: 8px;
1115
+ margin-top: 18px;
1116
+ }
1117
+ .ez-devserver-form .ez-devserver-actions {
1118
+ margin-top: 4px;
1119
+ }
1120
+ .ez-devserver-go,
1121
+ .ez-devserver-secondary {
1122
+ display: inline-flex;
1123
+ align-items: center;
1124
+ gap: 6px;
1125
+ height: 32px;
1126
+ padding: 0 14px;
1127
+ border-radius: 7px;
1128
+ font-family: inherit;
1129
+ font-size: 13px;
1130
+ font-weight: 600;
1131
+ cursor: pointer;
1132
+ }
1133
+ .ez-devserver-go {
1134
+ border: 1px solid var(--primary);
1135
+ background: var(--primary);
1136
+ color: var(--primary-foreground);
1137
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
1138
+ }
1139
+ .ez-devserver-secondary {
1140
+ border: 1px solid var(--border);
1141
+ background: var(--panel);
1142
+ color: var(--foreground);
1143
+ }
1144
+ .ez-devserver-go:hover:not(:disabled) {
1145
+ opacity: 0.88;
1146
+ }
1147
+ .ez-devserver-secondary:hover:not(:disabled) {
1148
+ background: var(--muted);
1149
+ }
1150
+ .ez-devserver-go:disabled,
1151
+ .ez-devserver-secondary:disabled {
1152
+ opacity: 0.4;
1153
+ cursor: default;
1154
+ }
1155
+ .ez-devserver-reason {
1156
+ font-size: 12.5px;
1157
+ color: var(--foreground);
1158
+ }
1159
+ .ez-devserver-asking {
1160
+ display: flex;
1161
+ align-items: center;
1162
+ gap: 8px;
1163
+ margin: 10px 0 0;
1164
+ font-size: 12.5px;
1165
+ color: var(--muted-foreground);
1166
+ animation: ez-devserver-pulse 1.6s ease-in-out infinite;
1167
+ }
1168
+ .ez-devserver-asking::before {
1169
+ content: "";
1170
+ flex-shrink: 0;
1171
+ width: 12px;
1172
+ height: 12px;
1173
+ border: 1.5px solid currentColor;
1174
+ border-right-color: transparent;
1175
+ border-radius: 50%;
1176
+ animation: ez-devserver-spin 0.8s linear infinite;
1177
+ }
1178
+ @keyframes ez-devserver-spin {
1179
+ to {
1180
+ transform: rotate(1turn);
1181
+ }
1182
+ }
1183
+ @keyframes ez-devserver-pulse {
1184
+ 50% {
1185
+ opacity: 0.45;
1186
+ }
1187
+ }
1188
+ .ez-devserver-error {
1189
+ margin: 10px 0 0;
1190
+ font-size: 12.5px;
1191
+ color: oklch(45% 0.15 25);
1192
+ }
1193
+ .ez-section {
1194
+ padding: 14px;
1195
+ padding-block: 8px;
1196
+ display: flex;
1197
+ flex-direction: column;
1198
+ min-height: 0;
1199
+ }
1200
+ .ez-conv-section {
1201
+ flex: 1;
1202
+ padding-block: 0;
1203
+ border-bottom: 1px solid var(--border);
1204
+ position: relative;
1205
+ }
1206
+ .ez-conv {
1207
+ overflow-y: auto;
1208
+ flex: 1;
1209
+ display: flex;
1210
+ flex-direction: column;
1211
+ gap: 10px;
1212
+ padding-block: 18px;
1213
+ padding-right: 2px;
1214
+ }
1215
+ .ez-conv:empty::after {
1216
+ content: "\60f3\8abf\6574\4ec0\9ebc \1f3a8";
1217
+ font-size: 12px;
1218
+ color: var(--muted-foreground);
1219
+ line-height: 1.6;
1220
+ }
1221
+ .ez-msg {
1222
+ display: flex;
1223
+ }
1224
+ .ez-msg-user {
1225
+ justify-content: flex-end;
1226
+ }
1227
+ .ez-msg-user.ez-msg-cont {
1228
+ margin-top: -6px;
1229
+ }
1230
+ .ez-msg-agent:not(:first-child),
1231
+ .ez-msg-agent + .ez-msg-user {
1232
+ margin-top: 10px;
1233
+ }
1234
+ .ez-msg-agent.ez-msg-cont {
1235
+ margin-top: 16px;
1236
+ }
1237
+ .ez-bubble {
1238
+ --bubble-pad-x: 10px;
1239
+ --bubble-pad-y: 8px;
1240
+ max-width: 84%;
1241
+ min-width: 0;
1242
+ font-size: 13px;
1243
+ line-height: 1.6;
1244
+ padding: var(--bubble-pad-y) var(--bubble-pad-x);
1245
+ border-radius: 12px;
1246
+ word-break: break-word;
1247
+ white-space: pre-wrap;
1248
+ background: var(--muted);
1249
+ }
1250
+ .ez-said {
1251
+ min-width: 0;
1252
+ font-size: 13px;
1253
+ line-height: 1.6;
1254
+ word-break: break-word;
1255
+ white-space: pre-wrap;
1256
+ }
1257
+ .ez-bubble-list {
1258
+ list-style: none;
1259
+ margin: 0;
1260
+ padding: 0;
1261
+ display: flex;
1262
+ flex-direction: column;
1263
+ gap: 6px;
1264
+ }
1265
+ .ez-bubble-item {
1266
+ display: flex;
1267
+ align-items: baseline;
1268
+ gap: 6px;
1269
+ }
1270
+ .ez-bi-num {
1271
+ flex-shrink: 0;
1272
+ font-size: 11.5px;
1273
+ font-variant-numeric: tabular-nums;
1274
+ opacity: 0.5;
1275
+ }
1276
+ .ez-bi-body {
1277
+ min-width: 0;
1278
+ }
1279
+ .ez-bubble-note {
1280
+ margin: 6px calc(var(--bubble-pad-x, 0px) * -1) calc(var(--bubble-pad-y, 0px) * -1);
1281
+ padding: 6px var(--bubble-pad-x, 0px);
1282
+ border-top: 1px solid color-mix(in oklab, var(--border) 80%, var(--ink-ghost));
1283
+ }
1284
+ .ez-bubble-more {
1285
+ display: block;
1286
+ width: 100%;
1287
+ text-align: left;
1288
+ border: none;
1289
+ margin-top: 7px;
1290
+ background: transparent;
1291
+ color: inherit;
1292
+ opacity: 0.45;
1293
+ font-size: 11.5px;
1294
+ cursor: pointer;
1295
+ padding-left: 0;
1296
+ padding-right: 0;
1297
+ }
1298
+ .ez-bubble-more:hover {
1299
+ opacity: 0.75;
1300
+ }
1301
+ .ez-thinking {
1302
+ --ez-progress-line: 17px;
1303
+ --ez-progress-pad: 2px;
1304
+ display: flex;
1305
+ align-items: center;
1306
+ gap: 3px;
1307
+ padding: var(--ez-progress-pad) 0;
1308
+ min-height: calc(var(--ez-progress-line) + var(--ez-progress-pad) * 2);
1309
+ min-width: 0;
1310
+ }
1311
+ .ez-progress {
1312
+ margin-left: 6px;
1313
+ min-width: 0;
1314
+ font-size: 12px;
1315
+ line-height: var(--ez-progress-line);
1316
+ color: var(--muted-foreground);
1317
+ white-space: nowrap;
1318
+ overflow: hidden;
1319
+ text-overflow: ellipsis;
1320
+ }
1321
+ .ez-dot {
1322
+ flex: none;
1323
+ width: 4px;
1324
+ height: 4px;
1325
+ border-radius: 50%;
1326
+ background: var(--ink-ghost);
1327
+ animation: ez-think 1.1s ease-in-out infinite;
1328
+ }
1329
+ .ez-dot:nth-child(2) {
1330
+ animation-delay: 0.16s;
1331
+ }
1332
+ .ez-dot:nth-child(3) {
1333
+ animation-delay: 0.32s;
1334
+ }
1335
+ @keyframes ez-think {
1336
+ 0%, 70%, 100% {
1337
+ opacity: 0.28;
1338
+ transform: translateY(0);
1339
+ }
1340
+ 35% {
1341
+ opacity: 1;
1342
+ transform: translateY(-2.5px);
1343
+ }
1344
+ }
1345
+ @media (prefers-reduced-motion: reduce) {
1346
+ .ez-dot {
1347
+ animation: none;
1348
+ opacity: 0.55;
1349
+ }
1350
+ }
1351
+ .ez-msg-system {
1352
+ display: flex;
1353
+ align-items: center;
1354
+ gap: 8px;
1355
+ font-size: 11.5px;
1356
+ color: var(--muted-foreground);
1357
+ padding: 2px 0;
1358
+ }
1359
+ .ez-msg-system::before,
1360
+ .ez-msg-system::after {
1361
+ content: "";
1362
+ flex: 1 1 auto;
1363
+ min-width: 12px;
1364
+ border-top: 1px dashed var(--border);
1365
+ }
1366
+ .ez-msg-system-plain {
1367
+ display: block;
1368
+ text-align: center;
1369
+ white-space: pre-wrap;
1370
+ }
1371
+ .ez-msg-system-plain::before,
1372
+ .ez-msg-system-plain::after {
1373
+ content: none;
1374
+ }
1375
+ .ez-queue-section {
1376
+ flex-shrink: 0;
1377
+ }
1378
+ .ez-fade {
1379
+ position: relative;
1380
+ min-height: 0;
1381
+ }
1382
+ .ez-fade::before,
1383
+ .ez-fade::after {
1384
+ content: "";
1385
+ position: absolute;
1386
+ left: 0;
1387
+ right: 0;
1388
+ height: 22px;
1389
+ pointer-events: none;
1390
+ opacity: 0;
1391
+ transition: opacity 0.15s ease;
1392
+ z-index: 1;
1393
+ }
1394
+ .ez-fade::before {
1395
+ top: 0;
1396
+ background:
1397
+ linear-gradient(
1398
+ to bottom,
1399
+ var(--background),
1400
+ transparent);
1401
+ }
1402
+ .ez-fade::after {
1403
+ bottom: 0;
1404
+ background:
1405
+ linear-gradient(
1406
+ to top,
1407
+ var(--background),
1408
+ transparent);
1409
+ }
1410
+ .ez-fade[data-more-above]::before,
1411
+ .ez-fade[data-more-below]::after {
1412
+ opacity: 1;
1413
+ }
1414
+ .ez-conv-scroll {
1415
+ flex: 1;
1416
+ display: flex;
1417
+ flex-direction: column;
1418
+ }
1419
+ .ez-queue-scroll {
1420
+ display: none;
1421
+ margin-bottom: 10px;
1422
+ }
1423
+ .ez-queue-scroll[data-filled] {
1424
+ display: block;
1425
+ }
1426
+ .ez-queue {
1427
+ list-style: none;
1428
+ margin: 0;
1429
+ padding: 0;
1430
+ overflow-y: auto;
1431
+ display: flex;
1432
+ flex-direction: column;
1433
+ gap: 6px;
1434
+ }
1435
+ .ez-queue-item {
1436
+ border-radius: 12px;
1437
+ padding: 9px 11px;
1438
+ background: var(--muted);
1439
+ }
1440
+ .ez-qi-head {
1441
+ display: flex;
1442
+ align-items: center;
1443
+ gap: 6px;
1444
+ min-width: 0;
1445
+ }
1446
+ .ez-qi-num {
1447
+ width: 18px;
1448
+ height: 18px;
1449
+ border-radius: 50%;
1450
+ background: var(--mark);
1451
+ color: var(--mark-foreground);
1452
+ font-size: 11px;
1453
+ font-weight: 650;
1454
+ line-height: 18px;
1455
+ text-align: center;
1456
+ flex-shrink: 0;
1457
+ }
1458
+ .ez-qi-label {
1459
+ font-size: 11px;
1460
+ color: var(--muted-foreground);
1461
+ overflow: hidden;
1462
+ text-overflow: ellipsis;
1463
+ white-space: nowrap;
1464
+ flex: 1;
1465
+ min-width: 0;
1466
+ }
1467
+ .ez-qi-vp {
1468
+ font-size: 10px;
1469
+ font-variant-numeric: tabular-nums;
1470
+ background: var(--paper-edge);
1471
+ color: var(--muted-foreground);
1472
+ border-radius: 999px;
1473
+ padding: 2px 8px;
1474
+ flex-shrink: 0;
1475
+ }
1476
+ .ez-qi-acts {
1477
+ display: flex;
1478
+ align-items: center;
1479
+ gap: 0;
1480
+ flex-shrink: 0;
1481
+ transform: translateX(1px);
1482
+ }
1483
+ .ez-qi-act {
1484
+ display: inline-flex;
1485
+ align-items: center;
1486
+ justify-content: center;
1487
+ width: 16px;
1488
+ height: 16px;
1489
+ padding: 0;
1490
+ border: none;
1491
+ background: transparent;
1492
+ color: var(--ink-faint);
1493
+ cursor: pointer;
1494
+ flex-shrink: 0;
1495
+ border-radius: 4px;
1496
+ }
1497
+ .ez-qi-act:hover:not(:disabled) {
1498
+ color: var(--foreground);
1499
+ }
1500
+ .ez-qi-edit svg {
1501
+ transform: translateY(-1px);
1502
+ }
1503
+ .ez-qi-tick svg {
1504
+ transform: translateY(0.3px);
1505
+ }
1506
+ .ez-qi-act:disabled {
1507
+ opacity: 0.4;
1508
+ cursor: default;
1509
+ }
1510
+ .ez-qi-act.ez-qi-del:hover:not(:disabled) {
1511
+ color: var(--danger);
1512
+ }
1513
+ .ez-qi-comment {
1514
+ font-size: 13px;
1515
+ margin-top: 4px;
1516
+ line-height: 1.55;
1517
+ word-break: break-word;
1518
+ }
1519
+ .ez-qi-video {
1520
+ margin-top: 4px;
1521
+ font-size: 12px;
1522
+ color: var(--ink-faint);
1523
+ font-variant-numeric: tabular-nums;
1524
+ }
1525
+ .ez-qi-video-failed {
1526
+ color: var(--code-ink);
1527
+ }
1528
+ .ez-queue-item[data-editing] .ez-attach {
1529
+ margin: 6px 0 0;
1530
+ }
1531
+ .ez-qi-input {
1532
+ display: block;
1533
+ position: relative;
1534
+ min-height: 34px;
1535
+ max-height: 34vh;
1536
+ overflow-y: auto;
1537
+ font-family: inherit;
1538
+ font-size: 13px;
1539
+ font-weight: 400;
1540
+ line-height: 1.5;
1541
+ color: var(--foreground);
1542
+ white-space: pre-wrap;
1543
+ word-break: break-word;
1544
+ outline: none;
1545
+ }
1546
+ .ez-qi-input[data-empty]::before {
1547
+ content: attr(data-placeholder);
1548
+ position: absolute;
1549
+ inset: 0 0 auto 0;
1550
+ color: var(--ink-faint);
1551
+ pointer-events: none;
1552
+ }
1553
+ .ez-attach {
1554
+ margin-bottom: 8px;
1555
+ }
1556
+ .ez-attach-field {
1557
+ border: 1px solid var(--border);
1558
+ border-radius: var(--radius);
1559
+ padding: 7px 9px;
1560
+ background: var(--panel);
1561
+ transition: border-color 0.12s ease, background 0.12s ease;
1562
+ }
1563
+ .ez-attach-field[data-drop] {
1564
+ background: var(--paper-sunken);
1565
+ }
1566
+ .ez-control-row {
1567
+ position: relative;
1568
+ display: flex;
1569
+ align-items: center;
1570
+ gap: 8px;
1571
+ margin-bottom: 6px;
1572
+ padding-left: 2px;
1573
+ }
1574
+ .ez-control-row[hidden] {
1575
+ display: none;
1576
+ }
1577
+ .ez-agent .ez-menu,
1578
+ .ez-config .ez-menu {
1579
+ left: 0;
1580
+ right: auto;
1581
+ min-width: 0;
1582
+ max-width: 100%;
1583
+ }
1584
+ .ez-agent .ez-menu-name,
1585
+ .ez-config .ez-menu-name {
1586
+ overflow: hidden;
1587
+ text-overflow: ellipsis;
1588
+ white-space: nowrap;
1589
+ }
1590
+ .ez-agent {
1591
+ position: static;
1592
+ display: flex;
1593
+ min-width: 0;
1594
+ }
1595
+ .ez-agent[hidden] {
1596
+ display: none;
1597
+ }
1598
+ .ez-agent-pill,
1599
+ .ez-config-pill {
1600
+ display: inline-flex;
1601
+ align-items: center;
1602
+ gap: 4px;
1603
+ max-width: 100%;
1604
+ border: none;
1605
+ background: none;
1606
+ color: var(--ink-faint);
1607
+ font-family: inherit;
1608
+ font-size: 11px;
1609
+ font-weight: 600;
1610
+ padding: 0;
1611
+ border-radius: 4px;
1612
+ cursor: pointer;
1613
+ transition: color 0.12s ease;
1614
+ }
1615
+ .ez-brand-mark {
1616
+ display: flex;
1617
+ flex-shrink: 0;
1618
+ transform: translateY(var(--brand-nudge, 0));
1619
+ }
1620
+ .ez-agent-pill {
1621
+ --brand-nudge: 1px;
1622
+ }
1623
+ .ez-agent-pill[data-offline] {
1624
+ color: var(--foreground);
1625
+ }
1626
+ .ez-agent-pill > svg,
1627
+ .ez-config-pill > svg {
1628
+ flex-shrink: 0;
1629
+ margin-left: -2px;
1630
+ margin-top: 3px;
1631
+ }
1632
+ .ez-agent-pill:hover:not(:disabled),
1633
+ .ez-config-pill:hover:not(:disabled),
1634
+ .ez-agent[data-open] .ez-agent-pill,
1635
+ .ez-config[data-open] .ez-config-pill {
1636
+ color: var(--ink-muted);
1637
+ }
1638
+ .ez-harness-row {
1639
+ display: flex;
1640
+ align-items: center;
1641
+ min-height: 17px;
1642
+ margin-bottom: 6px;
1643
+ padding-left: 2px;
1644
+ }
1645
+ .ez-harness-row[hidden] {
1646
+ display: none;
1647
+ }
1648
+ .ez-harness {
1649
+ display: inline-flex;
1650
+ align-items: center;
1651
+ gap: 4px;
1652
+ padding: 0;
1653
+ border: none;
1654
+ border-radius: 4px;
1655
+ background: none;
1656
+ color: var(--ink-faint);
1657
+ font-family: inherit;
1658
+ font-size: 11px;
1659
+ font-weight: 600;
1660
+ line-height: 13px;
1661
+ cursor: pointer;
1662
+ transition: color 0.12s ease;
1663
+ }
1664
+ .ez-harness:hover:not(:disabled) {
1665
+ color: var(--ink-muted);
1666
+ }
1667
+ .ez-harness:disabled {
1668
+ cursor: default;
1669
+ opacity: 0.5;
1670
+ }
1671
+ .ez-harness-mark {
1672
+ display: flex;
1673
+ flex-shrink: 0;
1674
+ color: var(--premium);
1675
+ }
1676
+ .ez-harness-mark path {
1677
+ fill: currentColor;
1678
+ }
1679
+ .ez-harness-label {
1680
+ white-space: nowrap;
1681
+ }
1682
+ .ez-harness-tag {
1683
+ margin-left: 2px;
1684
+ padding: 2px 6px;
1685
+ border-radius: 4px;
1686
+ background: var(--paper-edge);
1687
+ color: var(--ink-muted);
1688
+ font-size: 10px;
1689
+ font-weight: 500;
1690
+ line-height: 13px;
1691
+ white-space: nowrap;
1692
+ }
1693
+ .ez-effort {
1694
+ display: inline-flex;
1695
+ align-items: center;
1696
+ gap: 6px;
1697
+ margin-left: auto;
1698
+ cursor: pointer;
1699
+ }
1700
+ .ez-effort[hidden] {
1701
+ display: none;
1702
+ }
1703
+ .ez-effort-label {
1704
+ color: var(--ink-faint);
1705
+ font-size: 11px;
1706
+ font-weight: 600;
1707
+ line-height: 13px;
1708
+ white-space: nowrap;
1709
+ }
1710
+ .ez-effort-value {
1711
+ min-width: 11px;
1712
+ color: var(--ink-muted);
1713
+ font-size: 11px;
1714
+ font-weight: 600;
1715
+ line-height: 13px;
1716
+ white-space: nowrap;
1717
+ }
1718
+ .ez-effort-slider {
1719
+ --at: 0.5;
1720
+ --span: 45px;
1721
+ position: relative;
1722
+ width: 56px;
1723
+ height: 11px;
1724
+ flex-shrink: 0;
1725
+ }
1726
+ .ez-effort-track {
1727
+ position: absolute;
1728
+ top: 50%;
1729
+ left: 3px;
1730
+ width: calc(var(--span) + 5px);
1731
+ height: 4px;
1732
+ border-radius: 2px;
1733
+ background: #d8d3c8;
1734
+ transform: translateY(-50%);
1735
+ }
1736
+ .ez-effort-fill {
1737
+ position: absolute;
1738
+ inset: 0 auto 0 0;
1739
+ width: calc(2.5px + var(--span) * var(--at));
1740
+ border-radius: 2px 0 0 2px;
1741
+ background: var(--ink);
1742
+ }
1743
+ .ez-effort-thumb {
1744
+ position: absolute;
1745
+ top: 50%;
1746
+ left: calc(2.5px + var(--span) * var(--at));
1747
+ width: 11px;
1748
+ height: 11px;
1749
+ border-radius: 50%;
1750
+ background: #fff;
1751
+ box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.18);
1752
+ transform: translate(-50%, -50%);
1753
+ }
1754
+ .ez-effort-input {
1755
+ position: absolute;
1756
+ inset: 0;
1757
+ width: 100%;
1758
+ height: 100%;
1759
+ margin: 0;
1760
+ opacity: 0;
1761
+ cursor: pointer;
1762
+ }
1763
+ .ez-effort-input:disabled {
1764
+ cursor: default;
1765
+ }
1766
+ .ez-effort-slider:has(.ez-effort-input:disabled) {
1767
+ opacity: 0.5;
1768
+ }
1769
+ .ez-effort-slider:has(.ez-effort-input:focus-visible) .ez-effort-thumb {
1770
+ outline: 2px solid var(--ring, var(--ink));
1771
+ outline-offset: 1px;
1772
+ }
1773
+ .ez-switch {
1774
+ position: relative;
1775
+ flex-shrink: 0;
1776
+ width: 24px;
1777
+ height: 13px;
1778
+ margin-left: 2px;
1779
+ border-radius: 999px;
1780
+ background: #b6b1a5;
1781
+ transition: background-color 0.15s ease, box-shadow 0.15s ease;
1782
+ }
1783
+ .ez-switch::after {
1784
+ content: "";
1785
+ position: absolute;
1786
+ top: 2px;
1787
+ left: 2px;
1788
+ width: 9px;
1789
+ height: 9px;
1790
+ border-radius: 50%;
1791
+ background: #fff;
1792
+ box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 1.5px rgba(0, 0, 0, 0.14);
1793
+ transition: transform 0.15s ease;
1794
+ }
1795
+ .ez-harness[aria-checked=true] .ez-switch {
1796
+ background: var(--ink);
1797
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
1798
+ }
1799
+ .ez-harness[aria-checked=true] .ez-switch::after {
1800
+ transform: translateX(11px);
1801
+ }
1802
+ @media (prefers-reduced-motion: reduce) {
1803
+ .ez-harness,
1804
+ .ez-switch,
1805
+ .ez-switch::after {
1806
+ transition: none;
1807
+ }
1808
+ }
1809
+ .ez-usage {
1810
+ position: relative;
1811
+ margin-left: auto;
1812
+ flex-shrink: 0;
1813
+ display: flex;
1814
+ }
1815
+ .ez-usage[hidden] {
1816
+ display: none;
1817
+ }
1818
+ .ez-limit {
1819
+ appearance: none;
1820
+ padding: 0;
1821
+ border: 0;
1822
+ background: none;
1823
+ cursor: pointer;
1824
+ color: var(--ink-faint);
1825
+ font: inherit;
1826
+ font-size: 11px;
1827
+ font-weight: 600;
1828
+ font-variant-numeric: tabular-nums;
1829
+ white-space: nowrap;
1830
+ transform: translateY(1px);
1831
+ transition: color 0.12s ease;
1832
+ }
1833
+ .ez-usage:hover .ez-limit,
1834
+ .ez-limit:focus-visible {
1835
+ color: var(--ink-muted);
1836
+ }
1837
+ .ez-usage-card {
1838
+ position: absolute;
1839
+ bottom: calc(100% + 8px);
1840
+ right: 0;
1841
+ z-index: 5;
1842
+ width: max-content;
1843
+ min-width: 208px;
1844
+ padding: 10px 12px 11px;
1845
+ border-radius: 10px;
1846
+ background: var(--panel);
1847
+ border: 1px solid var(--border);
1848
+ box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
1849
+ opacity: 0;
1850
+ visibility: hidden;
1851
+ transform: translateY(3px);
1852
+ transition:
1853
+ opacity 0.12s ease,
1854
+ transform 0.12s ease,
1855
+ visibility 0s linear 0.12s;
1856
+ }
1857
+ .ez-usage:hover .ez-usage-card,
1858
+ .ez-usage:focus-within .ez-usage-card {
1859
+ opacity: 1;
1860
+ visibility: visible;
1861
+ transform: translateY(0);
1862
+ transition:
1863
+ opacity 0.12s ease 0.22s,
1864
+ transform 0.12s ease 0.22s,
1865
+ visibility 0s linear 0.22s;
1866
+ }
1867
+ .ez-usage-head {
1868
+ display: flex;
1869
+ align-items: baseline;
1870
+ justify-content: space-between;
1871
+ gap: 12px;
1872
+ margin-bottom: 9px;
1873
+ }
1874
+ .ez-usage-title {
1875
+ font-size: 11px;
1876
+ font-weight: 500;
1877
+ color: var(--ink);
1878
+ }
1879
+ .ez-usage-plan {
1880
+ font-size: 10.5px;
1881
+ font-weight: 600;
1882
+ color: var(--ink-faint);
1883
+ }
1884
+ .ez-usage-row + .ez-usage-row {
1885
+ margin-top: 9px;
1886
+ }
1887
+ .ez-usage-line {
1888
+ display: flex;
1889
+ align-items: baseline;
1890
+ justify-content: space-between;
1891
+ gap: 16px;
1892
+ font-size: 11.5px;
1893
+ line-height: 1.4;
1894
+ }
1895
+ .ez-usage-label {
1896
+ color: var(--ink-muted);
1897
+ }
1898
+ .ez-usage-left {
1899
+ color: var(--ink);
1900
+ font-weight: 600;
1901
+ font-variant-numeric: tabular-nums;
1902
+ }
1903
+ .ez-usage-bar {
1904
+ margin-top: 5px;
1905
+ height: 4px;
1906
+ border-radius: 999px;
1907
+ background: var(--border);
1908
+ overflow: hidden;
1909
+ }
1910
+ .ez-usage-bar i {
1911
+ display: block;
1912
+ height: 100%;
1913
+ border-radius: inherit;
1914
+ background: var(--ink-muted);
1915
+ }
1916
+ .ez-usage-row[data-low] .ez-usage-bar i {
1917
+ background: var(--mark);
1918
+ }
1919
+ .ez-usage-row[data-low] .ez-usage-left {
1920
+ color: var(--mark);
1921
+ }
1922
+ .ez-usage-when {
1923
+ margin-top: 3px;
1924
+ font-size: 10.5px;
1925
+ color: var(--ink-faint);
1926
+ font-variant-numeric: tabular-nums;
1927
+ }
1928
+ @media (prefers-reduced-motion: reduce) {
1929
+ .ez-usage-card {
1930
+ transform: none;
1931
+ }
1932
+ }
1933
+ .ez-agent-name {
1934
+ overflow: hidden;
1935
+ text-overflow: ellipsis;
1936
+ white-space: nowrap;
1937
+ transform: translateY(1px);
1938
+ }
1939
+ .ez-config {
1940
+ display: flex;
1941
+ position: static;
1942
+ }
1943
+ .ez-agent-pill:disabled,
1944
+ .ez-config-pill:disabled {
1945
+ cursor: default;
1946
+ opacity: 0.5;
1947
+ }
1948
+ .ez-config-name {
1949
+ overflow: hidden;
1950
+ text-overflow: ellipsis;
1951
+ white-space: nowrap;
1952
+ transform: translateY(1px);
1953
+ }
1954
+ .ez-note {
1955
+ display: block;
1956
+ position: relative;
1957
+ min-height: 40px;
1958
+ max-height: 160px;
1959
+ overflow-y: auto;
1960
+ font-family: inherit;
1961
+ font-size: 13px;
1962
+ font-weight: 400;
1963
+ line-height: 1.5;
1964
+ color: var(--foreground);
1965
+ white-space: pre-wrap;
1966
+ word-break: break-word;
1967
+ outline: none;
1968
+ }
1969
+ .ez-note[data-empty]::before {
1970
+ content: attr(data-placeholder);
1971
+ position: absolute;
1972
+ inset: 0 0 auto 0;
1973
+ color: var(--ink-ghost);
1974
+ pointer-events: none;
1975
+ }
1976
+ .ez-attach-field:focus-within {
1977
+ border-color: var(--ring);
1978
+ outline: 3px solid var(--ring-halo);
1979
+ outline-offset: 0;
1980
+ }
1981
+ .ez-chip {
1982
+ display: inline-flex;
1983
+ align-items: center;
1984
+ gap: 3px;
1985
+ max-width: 180px;
1986
+ vertical-align: baseline;
1987
+ padding: 1px 6px;
1988
+ border-radius: 4px;
1989
+ background: var(--attach);
1990
+ font-size: 11px;
1991
+ font-weight: 500;
1992
+ line-height: 1.55;
1993
+ color: var(--attach-ink);
1994
+ white-space: nowrap;
1995
+ user-select: none;
1996
+ }
1997
+ .ez-chip-name {
1998
+ overflow: hidden;
1999
+ text-overflow: ellipsis;
2000
+ min-width: 0;
2001
+ }
2002
+ .ez-chip svg {
2003
+ flex-shrink: 0;
2004
+ }
2005
+ .ez-chip-ref {
2006
+ background: var(--ref);
2007
+ color: var(--ref-ink);
2008
+ }
2009
+ .ez-chip-ref.ez-chip-chosen svg {
2010
+ color: var(--explore-accent);
2011
+ }
2012
+ .ez-chip-skill {
2013
+ display: inline;
2014
+ max-width: none;
2015
+ padding: 0;
2016
+ border-radius: 0;
2017
+ background: none;
2018
+ color: var(--skill-ink);
2019
+ font-family:
2020
+ ui-monospace,
2021
+ SFMono-Regular,
2022
+ Menlo,
2023
+ monospace;
2024
+ font-size: 0.92em;
2025
+ font-weight: 400;
2026
+ }
2027
+ .ez-chip-pending {
2028
+ opacity: 0.55;
2029
+ }
2030
+ .ez-chip-note {
2031
+ margin-left: 4px;
2032
+ font-variant-numeric: tabular-nums;
2033
+ opacity: 0.8;
2034
+ }
2035
+ .ez-file-chips {
2036
+ display: flex;
2037
+ flex-wrap: wrap;
2038
+ gap: 4px;
2039
+ margin-top: 4px;
2040
+ }
2041
+ .ez-attach-error {
2042
+ margin-top: 4px;
2043
+ font-size: 11px;
2044
+ line-height: 1.5;
2045
+ color: oklch(52% 0.2 25);
2046
+ }
2047
+ .ez-slash-menu {
2048
+ position: fixed;
2049
+ z-index: 20;
2050
+ min-width: 240px;
2051
+ max-width: 300px;
2052
+ padding: 4px 4px 5px;
2053
+ border-radius: 10px;
2054
+ background: var(--panel);
2055
+ border: 1px solid var(--border);
2056
+ box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
2057
+ }
2058
+ .ez-slash-head {
2059
+ padding: 7px 10px 5px;
2060
+ font-size: 11px;
2061
+ font-weight: 500;
2062
+ line-height: 1.4;
2063
+ color: var(--ink-faint);
2064
+ }
2065
+ .ez-slash-item {
2066
+ display: flex;
2067
+ align-items: center;
2068
+ gap: 6px;
2069
+ padding: 6px 10px;
2070
+ border-radius: 6px;
2071
+ cursor: pointer;
2072
+ color: var(--foreground);
2073
+ }
2074
+ .ez-slash-item[data-active] {
2075
+ background: var(--muted);
2076
+ }
2077
+ .ez-slash-item svg {
2078
+ flex-shrink: 0;
2079
+ color: var(--ink-muted);
2080
+ }
2081
+ .ez-slash-label {
2082
+ font-size: 13px;
2083
+ line-height: 1;
2084
+ white-space: nowrap;
2085
+ }
2086
+ .ez-slash-hint {
2087
+ margin-left: auto;
2088
+ padding-left: 14px;
2089
+ min-width: 0;
2090
+ overflow: hidden;
2091
+ text-overflow: ellipsis;
2092
+ white-space: nowrap;
2093
+ font-size: 12px;
2094
+ color: var(--ink-faint);
2095
+ }
2096
+ .ez-acp-feed {
2097
+ width: 100%;
2098
+ display: flex;
2099
+ flex-direction: column;
2100
+ gap: 3px;
2101
+ font-size: 12px;
2102
+ min-width: 0;
2103
+ }
2104
+ .ez-acp-plan,
2105
+ .ez-acp-tool {
2106
+ display: flex;
2107
+ align-items: baseline;
2108
+ gap: 7px;
2109
+ color: var(--muted-foreground);
2110
+ min-width: 0;
2111
+ }
2112
+ .ez-acp-text {
2113
+ min-width: 0;
2114
+ overflow: hidden;
2115
+ text-overflow: ellipsis;
2116
+ white-space: nowrap;
2117
+ }
2118
+ .ez-acp-tick {
2119
+ flex: none;
2120
+ width: 10px;
2121
+ text-align: center;
2122
+ }
2123
+ .ez-acp-tick::before {
2124
+ content: "\25cb";
2125
+ color: var(--ink-ghost);
2126
+ font-size: 10px;
2127
+ }
2128
+ .ez-acp-plan-in_progress .ez-acp-tick::before {
2129
+ content: "\25d0";
2130
+ color: var(--ink-muted);
2131
+ }
2132
+ .ez-acp-plan-completed {
2133
+ color: var(--ink-ghost);
2134
+ }
2135
+ .ez-acp-plan-completed .ez-acp-tick::before {
2136
+ content: "\25cf";
2137
+ }
2138
+ .ez-acp-dot {
2139
+ flex: none;
2140
+ width: 12px;
2141
+ text-align: center;
2142
+ font-size: 10px;
2143
+ color: var(--ink-ghost);
2144
+ }
2145
+ .ez-acp-dot::before {
2146
+ content: "\2713";
2147
+ }
2148
+ .ez-acp-tool-pending .ez-acp-dot::before,
2149
+ .ez-acp-tool-in_progress .ez-acp-dot::before {
2150
+ content: "\25cf";
2151
+ font-size: 7px;
2152
+ color: var(--ink-muted);
2153
+ animation: ez-think 1.1s ease-in-out infinite;
2154
+ display: inline-block;
2155
+ }
2156
+ .ez-acp-tool-pending .ez-acp-text,
2157
+ .ez-acp-tool-in_progress .ez-acp-text {
2158
+ color: var(--foreground);
2159
+ }
2160
+ .ez-acp-tool-failed .ez-acp-dot {
2161
+ color: var(--mark);
2162
+ }
2163
+ .ez-acp-tool-failed .ez-acp-dot::before {
2164
+ content: "\2715";
2165
+ }
2166
+ .ez-acp-thought {
2167
+ color: var(--ink-faint);
2168
+ font-style: italic;
2169
+ overflow: hidden;
2170
+ display: -webkit-box;
2171
+ -webkit-line-clamp: 2;
2172
+ -webkit-box-orient: vertical;
2173
+ }
2174
+ .ez-acp-say {
2175
+ margin: 8px 0;
2176
+ }
2177
+ .ez-acp-say:first-child {
2178
+ margin-top: 0;
2179
+ }
2180
+ .ez-acp-say:last-child {
2181
+ margin-bottom: 0;
2182
+ }
2183
+ .ez-acp-feed:not(:empty) + .ez-thinking {
2184
+ margin-top: 12px;
2185
+ }
2186
+ .ez-md {
2187
+ font-size: 12.5px;
2188
+ line-height: 1.55;
2189
+ overflow-wrap: anywhere;
2190
+ min-width: 0;
2191
+ }
2192
+ .ez-md > :first-child {
2193
+ margin-top: 0;
2194
+ }
2195
+ .ez-md > :last-child {
2196
+ margin-bottom: 0;
2197
+ }
2198
+ .ez-md p {
2199
+ margin: 10px 0;
2200
+ }
2201
+ .ez-md h5,
2202
+ .ez-md h6 {
2203
+ margin: 12px 0 4px;
2204
+ font-size: 12.5px;
2205
+ font-weight: 650;
2206
+ }
2207
+ .ez-md ul,
2208
+ .ez-md ol {
2209
+ margin: 10px 0;
2210
+ padding-left: 20px;
2211
+ }
2212
+ .ez-md li {
2213
+ margin: 3px 0;
2214
+ }
2215
+ .ez-md strong {
2216
+ font-weight: 600;
2217
+ }
2218
+ .ez-md a {
2219
+ color: inherit;
2220
+ text-decoration: underline;
2221
+ text-underline-offset: 2px;
2222
+ }
2223
+ .ez-md-code {
2224
+ font-family:
2225
+ ui-monospace,
2226
+ SFMono-Regular,
2227
+ Menlo,
2228
+ monospace;
2229
+ font-size: 0.92em;
2230
+ color: var(--code-ink);
2231
+ background: var(--code-fill);
2232
+ padding: 1.5px 5px;
2233
+ border-radius: 4px;
2234
+ overflow-wrap: anywhere;
2235
+ }
2236
+ .ez-md-pre {
2237
+ font-family:
2238
+ ui-monospace,
2239
+ SFMono-Regular,
2240
+ Menlo,
2241
+ monospace;
2242
+ font-size: 11px;
2243
+ line-height: 1.5;
2244
+ background: var(--muted);
2245
+ border-radius: 6px;
2246
+ padding: 8px 10px;
2247
+ margin: 7px 0;
2248
+ overflow-x: auto;
2249
+ white-space: pre;
2250
+ }
2251
+ .ez-acp-ask {
2252
+ margin: 8px 0 2px;
2253
+ border: 1px solid var(--border);
2254
+ border-radius: var(--radius);
2255
+ background: var(--panel);
2256
+ padding: 10px 12px;
2257
+ }
2258
+ .ez-acp-ask-title {
2259
+ font-size: 12.5px;
2260
+ font-weight: 550;
2261
+ margin-bottom: 8px;
2262
+ white-space: pre-wrap;
2263
+ }
2264
+ .ez-acp-ask-options {
2265
+ display: flex;
2266
+ flex-wrap: wrap;
2267
+ gap: 6px;
2268
+ }
2269
+ .ez-acp-opt {
2270
+ border: 1px solid var(--border);
2271
+ border-radius: 6px;
2272
+ background: var(--muted);
2273
+ color: var(--foreground);
2274
+ font-size: 12px;
2275
+ padding: 5px 10px;
2276
+ cursor: pointer;
2277
+ }
2278
+ .ez-acp-opt:hover {
2279
+ border-color: var(--ink-ghost);
2280
+ }
2281
+ .ez-acp-opt:disabled {
2282
+ opacity: 0.45;
2283
+ cursor: default;
2284
+ }
2285
+ .ez-acp-opt-allow_once,
2286
+ .ez-acp-opt-allow_always {
2287
+ background: var(--primary);
2288
+ color: var(--primary-foreground);
2289
+ border-color: var(--primary);
2290
+ }
2291
+ .ez-acp-ask-q {
2292
+ font-size: 12px;
2293
+ color: var(--muted-foreground);
2294
+ margin: 8px 0 6px;
2295
+ }
2296
+ .ez-acp-opt {
2297
+ display: inline-flex;
2298
+ flex-direction: column;
2299
+ align-items: flex-start;
2300
+ gap: 1px;
2301
+ text-align: left;
2302
+ }
2303
+ .ez-acp-opt-desc {
2304
+ font-size: 11px;
2305
+ color: var(--muted-foreground);
2306
+ }
2307
+ .ez-acp-opt.ez-on {
2308
+ border-color: var(--ink);
2309
+ }
2310
+ .ez-acp-field {
2311
+ display: block;
2312
+ width: 100%;
2313
+ box-sizing: border-box;
2314
+ border: 1px solid var(--border);
2315
+ border-radius: 6px;
2316
+ background: var(--panel);
2317
+ color: var(--foreground);
2318
+ font-family: inherit;
2319
+ font-size: 12.5px;
2320
+ line-height: 1.45;
2321
+ padding: 6px 8px;
2322
+ resize: none;
2323
+ outline: none;
2324
+ }
2325
+ .ez-acp-field:focus {
2326
+ border-color: var(--ring);
2327
+ outline: 3px solid var(--ring-halo);
2328
+ outline-offset: 0;
2329
+ }
2330
+ .ez-acp-field:disabled {
2331
+ opacity: 0.45;
2332
+ }
2333
+ .ez-acp-field-number {
2334
+ width: 140px;
2335
+ }
2336
+ .ez-acp-group {
2337
+ display: flex;
2338
+ flex-direction: column;
2339
+ gap: 6px;
2340
+ }
2341
+ .ez-acp-ask [hidden] {
2342
+ display: none;
2343
+ }
2344
+ .ez-acp-ask-actions {
2345
+ display: flex;
2346
+ gap: 6px;
2347
+ justify-content: flex-end;
2348
+ margin-top: 10px;
2349
+ }
2350
+ .ez-acp-opt-primary {
2351
+ background: var(--primary);
2352
+ color: var(--primary-foreground);
2353
+ border-color: var(--primary);
2354
+ }
2355
+ .ez-acp-opt-primary:disabled {
2356
+ opacity: 0.35;
2357
+ }
2358
+ .ez-acp-turn {
2359
+ display: flex;
2360
+ flex-direction: column;
2361
+ width: 100%;
2362
+ min-width: 0;
2363
+ }
2364
+ .ez-notice {
2365
+ position: relative;
2366
+ padding: 12px 14px;
2367
+ border-top: 1px solid var(--border);
2368
+ background: var(--muted);
2369
+ font-size: 12.5px;
2370
+ line-height: 1.5;
2371
+ flex-shrink: 0;
2372
+ }
2373
+ .ez-notice[hidden] {
2374
+ display: none;
2375
+ }
2376
+ .ez-notice-title {
2377
+ font-weight: 600;
2378
+ font-size: 13px;
2379
+ padding-right: 22px;
2380
+ }
2381
+ .ez-resume .ez-notice-title {
2382
+ font-size: 11px;
2383
+ font-weight: 500;
2384
+ line-height: 1.4;
2385
+ color: var(--ink);
2386
+ }
2387
+ .ez-notice-x {
2388
+ position: absolute;
2389
+ top: 6px;
2390
+ right: 6px;
2391
+ display: inline-flex;
2392
+ align-items: center;
2393
+ justify-content: center;
2394
+ padding: 6px;
2395
+ border: none;
2396
+ background: none;
2397
+ color: var(--ink-ghost);
2398
+ cursor: pointer;
2399
+ }
2400
+ .ez-notice-x:hover {
2401
+ color: var(--foreground);
2402
+ }
2403
+ .ez-notice-body {
2404
+ margin-top: 4px;
2405
+ color: var(--muted-foreground);
2406
+ }
2407
+ .ez-notice-actions {
2408
+ display: flex;
2409
+ align-items: center;
2410
+ gap: 8px;
2411
+ margin-top: 10px;
2412
+ }
2413
+ .ez-notice-go {
2414
+ border: 1px solid var(--primary);
2415
+ background: var(--primary);
2416
+ color: var(--primary-foreground);
2417
+ font-family: inherit;
2418
+ font-size: 12px;
2419
+ font-weight: 600;
2420
+ padding: 5px 12px;
2421
+ border-radius: 6px;
2422
+ cursor: pointer;
2423
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
2424
+ }
2425
+ .ez-notice-go:hover {
2426
+ opacity: 0.88;
2427
+ }
2428
+ .ez-notice-no {
2429
+ border: none;
2430
+ background: none;
2431
+ color: var(--muted-foreground);
2432
+ font-family: inherit;
2433
+ font-size: 12px;
2434
+ font-weight: 600;
2435
+ padding: 5px 2px;
2436
+ cursor: pointer;
2437
+ }
2438
+ .ez-notice-no:hover {
2439
+ color: var(--foreground);
2440
+ }
2441
+ .ez-notice-skip {
2442
+ display: inline-flex;
2443
+ align-items: center;
2444
+ gap: 5px;
2445
+ margin-top: 9px;
2446
+ color: var(--muted-foreground);
2447
+ font-size: 11px;
2448
+ cursor: pointer;
2449
+ user-select: none;
2450
+ }
2451
+ .ez-notice-skip[hidden] {
2452
+ display: none;
2453
+ }
2454
+ .ez-notice-skip:hover {
2455
+ color: var(--foreground);
2456
+ }
2457
+ .ez-notice-skip input {
2458
+ margin: 0;
2459
+ width: 12px;
2460
+ height: 12px;
2461
+ accent-color: var(--primary);
2462
+ cursor: pointer;
2463
+ }
2464
+ .ez-notice-list {
2465
+ --notice-row: 20px;
2466
+ display: flex;
2467
+ flex-direction: column;
2468
+ max-height: calc(var(--notice-row) * 7);
2469
+ overflow-y: auto;
2470
+ margin-top: 10px;
2471
+ overscroll-behavior: contain;
2472
+ }
2473
+ .ez-notice-row {
2474
+ display: flex;
2475
+ align-items: baseline;
2476
+ gap: 5px;
2477
+ width: 100%;
2478
+ padding: 0;
2479
+ border: none;
2480
+ background: none;
2481
+ color: var(--ink-faint);
2482
+ font-family: inherit;
2483
+ font-size: 12px;
2484
+ line-height: var(--notice-row);
2485
+ text-align: left;
2486
+ cursor: pointer;
2487
+ }
2488
+ .ez-notice-row:focus-visible {
2489
+ outline: none;
2490
+ }
2491
+ .ez-notice-row[data-active] {
2492
+ color: var(--foreground);
2493
+ }
2494
+ .ez-notice-row svg {
2495
+ flex-shrink: 0;
2496
+ visibility: hidden;
2497
+ color: var(--ink-faint);
2498
+ transform: translateY(2px);
2499
+ }
2500
+ .ez-notice-row[data-active] svg {
2501
+ visibility: visible;
2502
+ }
2503
+ .ez-notice-row[data-current] .ez-notice-row-name {
2504
+ font-weight: 500;
2505
+ }
2506
+ .ez-notice-row-name {
2507
+ flex: 1;
2508
+ min-width: 0;
2509
+ overflow: hidden;
2510
+ text-overflow: ellipsis;
2511
+ white-space: nowrap;
2512
+ }
2513
+ .ez-notice-row-when {
2514
+ flex-shrink: 0;
2515
+ color: var(--ink-ghost);
2516
+ font-size: 11px;
2517
+ font-variant-numeric: tabular-nums;
2518
+ }
2519
+ .ez-notice-row[data-active] .ez-notice-row-when {
2520
+ color: var(--ink-faint);
2521
+ }
2522
+ .ez-strip[hidden] {
2523
+ display: none;
2524
+ }
2525
+ .ez-stage-dock {
2526
+ position: absolute;
2527
+ left: 50%;
2528
+ bottom: 12px;
2529
+ transform: translateX(-50%);
2530
+ z-index: 3;
2531
+ display: flex;
2532
+ flex-direction: column;
2533
+ align-items: center;
2534
+ gap: 8px;
2535
+ max-width: calc(100% - 24px);
2536
+ }
2537
+ .ez-strip {
2538
+ display: flex;
2539
+ flex-direction: column;
2540
+ align-items: center;
2541
+ gap: 8px;
2542
+ max-width: 100%;
2543
+ }
2544
+ .ez-strip-pill,
2545
+ .ez-pick-pill {
2546
+ display: flex;
2547
+ align-items: center;
2548
+ gap: 8px;
2549
+ max-width: 100%;
2550
+ padding: 7px 8px 7px 12px;
2551
+ border-radius: 999px;
2552
+ background: var(--ink);
2553
+ box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.25), 0 6px 20px oklch(0% 0 0 / 0.3);
2554
+ color: #fff;
2555
+ font-size: 12px;
2556
+ line-height: 1.5;
2557
+ }
2558
+ .ez-strip-pill > svg {
2559
+ flex-shrink: 0;
2560
+ color: var(--explore-on-ink);
2561
+ }
2562
+ .ez-pick-pill[hidden] {
2563
+ display: none;
2564
+ }
2565
+ .ez-pick-pill {
2566
+ white-space: nowrap;
2567
+ }
2568
+ .ez-pick-pill > svg {
2569
+ flex-shrink: 0;
2570
+ color: var(--ref-accent);
2571
+ }
2572
+ .ez-pick-pill-text {
2573
+ overflow: hidden;
2574
+ text-overflow: ellipsis;
2575
+ min-width: 0;
2576
+ }
2577
+ .ez-pick-pill-cancel {
2578
+ flex-shrink: 0;
2579
+ padding: 3px 9px;
2580
+ border: 0;
2581
+ border-radius: 999px;
2582
+ background: oklch(100% 0 0 / 0.14);
2583
+ color: inherit;
2584
+ font: inherit;
2585
+ font-size: 11.5px;
2586
+ cursor: pointer;
2587
+ }
2588
+ .ez-pick-pill-cancel:hover {
2589
+ background: oklch(100% 0 0 / 0.24);
2590
+ }
2591
+ .ez-strip-chips {
2592
+ display: flex;
2593
+ align-items: center;
2594
+ gap: 4px;
2595
+ min-width: 0;
2596
+ overflow-x: auto;
2597
+ scrollbar-width: none;
2598
+ }
2599
+ .ez-strip-chips::-webkit-scrollbar {
2600
+ display: none;
2601
+ }
2602
+ .ez-strip-chip {
2603
+ flex: 0 0 auto;
2604
+ border: 0;
2605
+ border-radius: 999px;
2606
+ background: oklch(100% 0 0 / 0.14);
2607
+ color: inherit;
2608
+ font: inherit;
2609
+ padding: 4px 11px;
2610
+ max-width: 18ch;
2611
+ overflow: hidden;
2612
+ text-overflow: ellipsis;
2613
+ white-space: nowrap;
2614
+ cursor: pointer;
2615
+ }
2616
+ .ez-strip-chip:hover {
2617
+ background: oklch(100% 0 0 / 0.24);
2618
+ }
2619
+ .ez-strip-chip.ez-on {
2620
+ background: #fff;
2621
+ color: var(--ink);
2622
+ }
2623
+ .ez-strip-pending {
2624
+ flex: 0 0 auto;
2625
+ padding: 0 4px;
2626
+ color: oklch(100% 0 0 / 0.62);
2627
+ }
2628
+ .ez-strip-actions {
2629
+ position: relative;
2630
+ display: flex;
2631
+ align-items: center;
2632
+ gap: 4px;
2633
+ flex: 0 0 auto;
2634
+ padding-left: 8px;
2635
+ border-left: 1px solid oklch(100% 0 0 / 0.18);
2636
+ }
2637
+ .ez-strip-ask {
2638
+ position: absolute;
2639
+ bottom: calc(100% + 10px);
2640
+ right: 0;
2641
+ z-index: 6;
2642
+ width: 250px;
2643
+ display: flex;
2644
+ flex-direction: column;
2645
+ gap: 9px;
2646
+ padding: 11px 12px;
2647
+ border: 0;
2648
+ border-radius: 12px;
2649
+ background: var(--ink);
2650
+ color: #fff;
2651
+ box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.25), 0 14px 34px oklch(0% 0 0 / 0.38);
2652
+ font-size: 12px;
2653
+ line-height: 1.6;
2654
+ text-align: left;
2655
+ white-space: normal;
2656
+ transform-origin: bottom right;
2657
+ animation: ez-menu-in var(--t-menu) var(--ease-out) both;
2658
+ }
2659
+ .ez-strip-ask-actions {
2660
+ display: flex;
2661
+ align-items: center;
2662
+ gap: 6px;
2663
+ }
2664
+ .ez-strip-ask-go,
2665
+ .ez-strip-ask-no {
2666
+ border: 0;
2667
+ border-radius: 6px;
2668
+ font-family: inherit;
2669
+ font-size: 11.5px;
2670
+ line-height: 1.5;
2671
+ padding: 5px 11px;
2672
+ white-space: nowrap;
2673
+ cursor: pointer;
2674
+ }
2675
+ .ez-strip-ask-go {
2676
+ background: #fff;
2677
+ color: var(--ink);
2678
+ }
2679
+ .ez-strip-ask-no {
2680
+ background: oklch(100% 0 0 / 0.14);
2681
+ color: inherit;
2682
+ }
2683
+ .ez-strip-ask-no:hover {
2684
+ background: oklch(100% 0 0 / 0.24);
2685
+ }
2686
+ .ez-strip-ask-go:focus-visible,
2687
+ .ez-strip-ask-no:focus-visible {
2688
+ outline: 2px solid oklch(100% 0 0 / 0.7);
2689
+ outline-offset: 1px;
2690
+ }
2691
+ .ez-strip-ask-skip {
2692
+ display: flex;
2693
+ align-items: center;
2694
+ gap: 6px;
2695
+ color: oklch(100% 0 0 / 0.62);
2696
+ font-size: 11px;
2697
+ cursor: pointer;
2698
+ }
2699
+ .ez-strip-ask-skip input {
2700
+ accent-color: #fff;
2701
+ margin: 0;
2702
+ cursor: pointer;
2703
+ }
2704
+ .ez-strip-action {
2705
+ border: 0;
2706
+ border-radius: 999px;
2707
+ background: oklch(100% 0 0 / 0.14);
2708
+ color: inherit;
2709
+ font: inherit;
2710
+ font-size: 11.5px;
2711
+ padding: 3px 9px;
2712
+ white-space: nowrap;
2713
+ cursor: pointer;
2714
+ }
2715
+ .ez-strip-action:hover:not(:disabled) {
2716
+ background: oklch(100% 0 0 / 0.24);
2717
+ }
2718
+ .ez-strip-action:disabled {
2719
+ opacity: 0.45;
2720
+ cursor: default;
2721
+ }
2722
+ .ez-strip-chip:focus-visible,
2723
+ .ez-strip-action:focus-visible {
2724
+ outline: 2px solid oklch(100% 0 0 / 0.7);
2725
+ outline-offset: 1px;
2726
+ }
2727
+ .ez-fork-bar {
2728
+ position: relative;
2729
+ z-index: 1;
2730
+ display: flex;
2731
+ align-items: center;
2732
+ gap: 5px;
2733
+ min-width: 0;
2734
+ padding: 7px 0 7px;
2735
+ margin-inline: -14px;
2736
+ padding-inline: 14px;
2737
+ border-bottom: 1px solid var(--border);
2738
+ font-size: 12px;
2739
+ line-height: 1.5;
2740
+ animation: ez-fork-in var(--t-pop) var(--ease-out) both;
2741
+ }
2742
+ .ez-fork-bar[hidden] {
2743
+ display: none;
2744
+ }
2745
+ @keyframes ez-fork-in {
2746
+ from {
2747
+ opacity: 0;
2748
+ transform: translateY(-3px);
2749
+ }
2750
+ }
2751
+ .ez-fork-root {
2752
+ color: var(--muted-foreground);
2753
+ }
2754
+ .ez-fork-sep {
2755
+ display: inline-flex;
2756
+ align-items: center;
2757
+ color: var(--ink-ghost);
2758
+ }
2759
+ .ez-fork-root {
2760
+ flex-shrink: 0;
2761
+ border: none;
2762
+ background: none;
2763
+ padding: 0;
2764
+ font-family: inherit;
2765
+ font-size: inherit;
2766
+ line-height: inherit;
2767
+ cursor: pointer;
2768
+ }
2769
+ .ez-fork-root:hover {
2770
+ color: var(--foreground);
2771
+ }
2772
+ .ez-fork-sep {
2773
+ flex-shrink: 0;
2774
+ user-select: none;
2775
+ }
2776
+ .ez-fork-here {
2777
+ display: inline-flex;
2778
+ align-items: center;
2779
+ gap: 5px;
2780
+ min-width: 0;
2781
+ border: none;
2782
+ background: none;
2783
+ padding: 0;
2784
+ color: var(--foreground);
2785
+ font-family: inherit;
2786
+ font-size: inherit;
2787
+ line-height: inherit;
2788
+ font-weight: 500;
2789
+ color: var(--explore-ink);
2790
+ cursor: pointer;
2791
+ }
2792
+ .ez-fork-here:hover,
2793
+ .ez-fork-here[aria-expanded=true] {
2794
+ color: color-mix(in oklab, var(--explore-ink) 80%, var(--paper));
2795
+ }
2796
+ .ez-fork-here:hover svg,
2797
+ .ez-fork-here[aria-expanded=true] svg {
2798
+ color: color-mix(in oklab, var(--explore-accent) 80%, var(--paper));
2799
+ }
2800
+ .ez-fork-here:disabled {
2801
+ cursor: default;
2802
+ }
2803
+ .ez-fork-here:disabled:hover {
2804
+ color: var(--explore-ink);
2805
+ }
2806
+ .ez-fork-here:disabled:hover svg {
2807
+ color: var(--explore-accent);
2808
+ }
2809
+ .ez-fork-here svg {
2810
+ flex-shrink: 0;
2811
+ color: var(--explore-accent);
2812
+ }
2813
+ .ez-fork-name {
2814
+ overflow: hidden;
2815
+ text-overflow: ellipsis;
2816
+ white-space: nowrap;
2817
+ }
2818
+ .ez-fork-menu,
2819
+ .ez-fork-more-menu {
2820
+ position: absolute;
2821
+ top: calc(100% - 2px);
2822
+ z-index: 5;
2823
+ display: flex;
2824
+ min-width: 170px;
2825
+ max-width: min(100%, 280px);
2826
+ animation: ez-menu-in var(--t-menu) var(--ease-out) both;
2827
+ --notice-row: 22px;
2828
+ padding: 7px 4px;
2829
+ gap: 0;
2830
+ max-height: calc(var(--notice-row) * 7);
2831
+ overflow-y: auto;
2832
+ overscroll-behavior: contain;
2833
+ }
2834
+ .ez-fork-menu {
2835
+ left: 14px;
2836
+ right: auto;
2837
+ transform-origin: top left;
2838
+ }
2839
+ .ez-fork-more-menu {
2840
+ left: auto;
2841
+ right: 14px;
2842
+ transform-origin: top right;
2843
+ }
2844
+ .ez-fork-menu[hidden],
2845
+ .ez-fork-more-menu[hidden] {
2846
+ display: none;
2847
+ }
2848
+ @keyframes ez-menu-in {
2849
+ from {
2850
+ opacity: 0;
2851
+ transform: scale(0.96);
2852
+ }
2853
+ }
2854
+ .ez-fork-row {
2855
+ border-radius: 5px;
2856
+ }
2857
+ .ez-fork-row {
2858
+ padding: 0 6px;
2859
+ }
2860
+ .ez-fork-row .ez-notice-row-name {
2861
+ flex: 0 0 auto;
2862
+ }
2863
+ .ez-fork-row .ez-notice-row-when {
2864
+ flex: 1 1 auto;
2865
+ min-width: 0;
2866
+ overflow: hidden;
2867
+ text-overflow: ellipsis;
2868
+ white-space: nowrap;
2869
+ }
2870
+ .ez-fork-more {
2871
+ display: inline-flex;
2872
+ align-items: center;
2873
+ gap: 3px;
2874
+ flex-shrink: 0;
2875
+ margin-left: auto;
2876
+ border: none;
2877
+ background: none;
2878
+ padding: 0;
2879
+ color: var(--muted-foreground);
2880
+ font-family: inherit;
2881
+ font-size: inherit;
2882
+ line-height: inherit;
2883
+ white-space: nowrap;
2884
+ cursor: pointer;
2885
+ }
2886
+ .ez-fork-more:hover,
2887
+ .ez-fork-more[aria-expanded=true] {
2888
+ color: var(--foreground);
2889
+ }
2890
+ .ez-fork-more svg {
2891
+ color: var(--ink-ghost);
2892
+ }
2893
+ .ez-fork-root:disabled {
2894
+ color: var(--foreground);
2895
+ font-weight: 500;
2896
+ cursor: default;
2897
+ }
2898
+ .ez-fork-sep[hidden],
2899
+ .ez-fork-here[hidden],
2900
+ .ez-fork-more[hidden] {
2901
+ display: none;
2902
+ }
2903
+ .ez-conv-scroll[data-enter=deeper] {
2904
+ animation: ez-push-in var(--t-view) var(--ease-out) both;
2905
+ }
2906
+ .ez-conv-scroll[data-enter=back] {
2907
+ animation: ez-push-out var(--t-view) var(--ease-out) both;
2908
+ }
2909
+ .ez-conv-scroll[data-enter=swap] {
2910
+ animation: ez-fade-in var(--t-view) var(--ease-out) both;
2911
+ }
2912
+ @keyframes ez-push-in {
2913
+ from {
2914
+ opacity: 0;
2915
+ transform: translateX(14px);
2916
+ }
2917
+ }
2918
+ @keyframes ez-push-out {
2919
+ from {
2920
+ opacity: 0;
2921
+ transform: translateX(-14px);
2922
+ }
2923
+ }
2924
+ @keyframes ez-fade-in {
2925
+ from {
2926
+ opacity: 0;
2927
+ }
2928
+ }
2929
+ @media (prefers-reduced-motion: reduce) {
2930
+ .ez-fork-bar,
2931
+ .ez-fork-menu,
2932
+ .ez-conv-scroll[data-enter] {
2933
+ animation-name: ez-fade-in;
2934
+ animation-duration: var(--t-pop);
2935
+ }
2936
+ }
2937
+ .ez-announce {
2938
+ position: absolute;
2939
+ right: 12px;
2940
+ bottom: 12px;
2941
+ z-index: 4;
2942
+ width: 288px;
2943
+ max-width: calc(100% - 24px);
2944
+ padding: 6px 6px 14px;
2945
+ border-radius: 14px;
2946
+ background: var(--ink);
2947
+ color: #fff;
2948
+ box-shadow: 0 0 0 1px oklch(100% 0 0 / 0.08), 0 12px 32px oklch(0% 0 0 / 0.24);
2949
+ animation: ez-rise 0.16s ease-out;
2950
+ }
2951
+ .ez-stage[hidden] ~ .ez-announce {
2952
+ bottom: 52px;
2953
+ }
2954
+ .ez-stage-dock:has(> :not([hidden])) ~ .ez-announce {
2955
+ display: none;
2956
+ }
2957
+ .ez-announce-media {
2958
+ display: block;
2959
+ width: 100%;
2960
+ aspect-ratio: 16 / 10;
2961
+ object-fit: cover;
2962
+ border-radius: 8px;
2963
+ background: oklch(100% 0 0 / 0.06);
2964
+ }
2965
+ .ez-announce-text {
2966
+ padding: 12px 8px 0;
2967
+ }
2968
+ .ez-announce-title {
2969
+ margin: 0;
2970
+ font-size: 14px;
2971
+ font-weight: 600;
2972
+ line-height: 1.4;
2973
+ }
2974
+ .ez-announce-body {
2975
+ display: -webkit-box;
2976
+ -webkit-box-orient: vertical;
2977
+ -webkit-line-clamp: 3;
2978
+ overflow: hidden;
2979
+ margin: 4px 0 0;
2980
+ color: oklch(100% 0 0 / 0.62);
2981
+ font-size: 12.5px;
2982
+ line-height: 1.55;
2983
+ text-wrap: pretty;
2984
+ }
2985
+ .ez-announce-go {
2986
+ display: inline-flex;
2987
+ margin-top: 12px;
2988
+ padding: 6px 12px;
2989
+ border-radius: 7px;
2990
+ background: #fff;
2991
+ color: var(--ink);
2992
+ font-size: 12px;
2993
+ font-weight: 600;
2994
+ text-decoration: none;
2995
+ transition: background 0.12s ease;
2996
+ }
2997
+ .ez-announce-go:hover {
2998
+ background: oklch(100% 0 0 / 0.86);
2999
+ }
3000
+ .ez-announce-x {
3001
+ position: absolute;
3002
+ top: 12px;
3003
+ right: 12px;
3004
+ display: grid;
3005
+ place-items: center;
3006
+ width: 24px;
3007
+ height: 24px;
3008
+ padding: 0;
3009
+ border: none;
3010
+ border-radius: 50%;
3011
+ background: oklch(0% 0 0 / 0.42);
3012
+ color: #fff;
3013
+ backdrop-filter: blur(8px);
3014
+ cursor: pointer;
3015
+ transition: background 0.12s ease;
3016
+ }
3017
+ .ez-announce-x:hover {
3018
+ background: oklch(0% 0 0 / 0.62);
3019
+ }
3020
+ .ez-announce-go:focus-visible,
3021
+ .ez-announce-x:focus-visible {
3022
+ outline: 2px solid oklch(100% 0 0 / 0.7);
3023
+ outline-offset: 2px;
3024
+ }
3025
+ @media (prefers-reduced-motion: reduce) {
3026
+ .ez-announce {
3027
+ animation: none;
3028
+ }
3029
+ }
3030
+ .ez-stage-wrap.ez-tabbed {
3031
+ flex-direction: column;
3032
+ }
3033
+ .ez-stage-wrap.ez-tabbed .ez-shown {
3034
+ top: 52px;
3035
+ }
3036
+ .ez-stage[hidden],
3037
+ .ez-stage[hidden] ~ .ez-shown {
3038
+ display: none;
3039
+ }
3040
+ .ez-tabs-bar {
3041
+ display: flex;
3042
+ align-items: center;
3043
+ height: 42px;
3044
+ flex-shrink: 0;
3045
+ padding: 0 10px 0 0;
3046
+ border-bottom: 1px solid var(--border);
3047
+ background: var(--background);
3048
+ }
3049
+ .ez-tabs {
3050
+ display: flex;
3051
+ align-self: stretch;
3052
+ flex: 1;
3053
+ min-width: 0;
3054
+ overflow-x: auto;
3055
+ scrollbar-width: none;
3056
+ }
3057
+ .ez-tab {
3058
+ position: relative;
3059
+ display: inline-flex;
3060
+ align-items: center;
3061
+ max-width: 220px;
3062
+ margin-right: -1px;
3063
+ padding: 0 14px;
3064
+ --tab-bg: var(--background);
3065
+ background: var(--tab-bg);
3066
+ font-size: 12.5px;
3067
+ font-weight: 500;
3068
+ color: var(--muted-foreground);
3069
+ white-space: nowrap;
3070
+ cursor: pointer;
3071
+ user-select: none;
3072
+ flex-shrink: 0;
3073
+ transition:
3074
+ background-color var(--t-pop) var(--ease-out),
3075
+ box-shadow var(--t-pop) var(--ease-out),
3076
+ color var(--t-pop) var(--ease-out);
3077
+ }
3078
+ .ez-tab:hover {
3079
+ z-index: 1;
3080
+ --tab-bg: color-mix(in srgb, var(--panel) 55%, var(--background));
3081
+ color: var(--foreground);
3082
+ box-shadow: inset 1px 0 color-mix(in srgb, var(--border) 85%, transparent), inset -1px 0 color-mix(in srgb, var(--border) 85%, transparent);
3083
+ }
3084
+ .ez-tab[aria-selected=true] {
3085
+ z-index: 2;
3086
+ --tab-bg: var(--panel);
3087
+ color: var(--foreground);
3088
+ box-shadow: inset 1px 0 var(--border), inset -1px 0 var(--border);
3089
+ }
3090
+ .ez-tab-label {
3091
+ display: flex;
3092
+ align-items: center;
3093
+ min-width: 0;
3094
+ }
3095
+ .ez-tab-label svg {
3096
+ flex-shrink: 0;
3097
+ translate: 0 0.5px;
3098
+ margin-right: 6px;
3099
+ color: var(--app-accent);
3100
+ }
3101
+ .ez-tab-label svg path {
3102
+ stroke-width: 1.9;
3103
+ }
3104
+ .ez-tab-name {
3105
+ overflow: hidden;
3106
+ text-overflow: ellipsis;
3107
+ }
3108
+ .ez-tab-close {
3109
+ position: absolute;
3110
+ top: 50%;
3111
+ right: 6px;
3112
+ translate: 0 -50%;
3113
+ display: grid;
3114
+ place-items: center;
3115
+ width: 18px;
3116
+ height: 18px;
3117
+ padding: 0;
3118
+ border: none;
3119
+ border-radius: 5px;
3120
+ background: var(--tab-bg);
3121
+ color: var(--ink-faint);
3122
+ font-size: 14px;
3123
+ line-height: 1;
3124
+ cursor: pointer;
3125
+ opacity: 0;
3126
+ transition: background-color var(--t-pop) var(--ease-out), opacity var(--t-pop) var(--ease-out);
3127
+ }
3128
+ .ez-tab-close::before {
3129
+ content: "";
3130
+ position: absolute;
3131
+ inset: 0 100% 0 auto;
3132
+ width: 14px;
3133
+ background:
3134
+ linear-gradient(
3135
+ to right,
3136
+ transparent,
3137
+ var(--tab-bg));
3138
+ pointer-events: none;
3139
+ }
3140
+ .ez-tab:hover .ez-tab-close,
3141
+ .ez-tab-close:focus-visible {
3142
+ opacity: 1;
3143
+ }
3144
+ .ez-tab-close:hover {
3145
+ background: color-mix(in srgb, var(--tab-bg), var(--foreground) 8%);
3146
+ color: var(--foreground);
3147
+ }
3148
+ .ez-tab[data-renaming] .ez-tab-name {
3149
+ text-overflow: clip;
3150
+ cursor: text;
3151
+ outline: none;
3152
+ }
3153
+ .ez-tab[data-renaming] .ez-tab-close {
3154
+ display: none;
3155
+ }
3156
+ .ez-tabs-tail {
3157
+ display: flex;
3158
+ align-items: center;
3159
+ flex-shrink: 0;
3160
+ margin-left: 8px;
3161
+ }
3162
+ .ez-tab-new,
3163
+ .ez-canvas-menu {
3164
+ display: grid;
3165
+ place-items: center;
3166
+ width: 28px;
3167
+ height: 28px;
3168
+ padding: 0;
3169
+ border: none;
3170
+ border-radius: 7px;
3171
+ background: transparent;
3172
+ color: var(--muted-foreground);
3173
+ font-family: inherit;
3174
+ cursor: pointer;
3175
+ }
3176
+ .ez-tab-new path {
3177
+ stroke-width: 2.25;
3178
+ }
3179
+ .ez-canvas-menu path {
3180
+ stroke-width: 1.75;
3181
+ }
3182
+ .ez-tab-new:hover,
3183
+ .ez-canvas-menu:hover,
3184
+ .ez-canvas-menu-wrap[data-open] .ez-canvas-menu {
3185
+ background: var(--muted);
3186
+ color: var(--foreground);
3187
+ }
3188
+ .ez-canvas-menu-wrap {
3189
+ position: relative;
3190
+ }
3191
+ .ez-canvas-menu-list {
3192
+ min-width: 200px;
3193
+ max-width: 320px;
3194
+ z-index: 20;
3195
+ }
3196
+ .ez-canvas-menu-item {
3197
+ position: relative;
3198
+ display: flex;
3199
+ align-items: center;
3200
+ }
3201
+ .ez-canvas-menu-item:hover .ez-canvas-menu-open {
3202
+ background: var(--muted);
3203
+ }
3204
+ .ez-canvas-menu-open {
3205
+ flex: 1;
3206
+ min-width: 0;
3207
+ padding-right: 40px;
3208
+ }
3209
+ .ez-canvas-menu-open .ez-menu-name {
3210
+ min-width: 0;
3211
+ overflow: hidden;
3212
+ text-overflow: ellipsis;
3213
+ white-space: nowrap;
3214
+ }
3215
+ .ez-canvas-menu-item[data-archived] .ez-menu-name {
3216
+ color: var(--muted-foreground);
3217
+ }
3218
+ .ez-canvas-menu-delete {
3219
+ position: absolute;
3220
+ top: 50%;
3221
+ right: 8px;
3222
+ translate: 0 -50%;
3223
+ padding: 0;
3224
+ border: none;
3225
+ background: transparent;
3226
+ color: var(--muted-foreground);
3227
+ font-family: inherit;
3228
+ font-size: 12px;
3229
+ cursor: pointer;
3230
+ visibility: hidden;
3231
+ }
3232
+ .ez-canvas-menu-item:is(:hover, :has(:focus-visible)) .ez-canvas-menu-delete {
3233
+ visibility: visible;
3234
+ }
3235
+ .ez-canvas-menu-delete:hover,
3236
+ .ez-canvas-menu-delete:focus-visible {
3237
+ color: var(--foreground);
3238
+ }
3239
+ .ez-canvas-menu-empty {
3240
+ padding: 6px 8px;
3241
+ font-size: 12px;
3242
+ color: var(--muted-foreground);
3243
+ }
3244
+ .ez-dialog {
3245
+ width: min(400px, calc(100vw - 32px));
3246
+ max-width: none;
3247
+ padding: 0;
3248
+ border: 1px solid var(--border);
3249
+ border-radius: 12px;
3250
+ background: var(--panel);
3251
+ color: var(--foreground);
3252
+ box-shadow: 0 24px 64px oklch(0% 0 0 / 0.16), 0 2px 8px oklch(0% 0 0 / 0.06);
3253
+ animation: ez-menu-in var(--t-menu) var(--ease-out) both;
3254
+ }
3255
+ .ez-dialog::backdrop {
3256
+ background: oklch(0% 0 0 / 0.18);
3257
+ animation: ez-fade-in var(--t-menu) var(--ease-out) both;
3258
+ }
3259
+ .ez-dialog-card {
3260
+ padding: 20px;
3261
+ }
3262
+ .ez-dialog-title {
3263
+ margin: 0;
3264
+ font-size: 16px;
3265
+ font-weight: 600;
3266
+ line-height: 1.4;
3267
+ }
3268
+ .ez-dialog-body {
3269
+ margin: 8px 0 0;
3270
+ font-size: 14px;
3271
+ line-height: 1.55;
3272
+ color: var(--muted-foreground);
3273
+ }
3274
+ .ez-dialog-actions {
3275
+ display: flex;
3276
+ justify-content: flex-end;
3277
+ gap: 8px;
3278
+ margin-top: 20px;
3279
+ }
3280
+ .ez-dialog-cancel,
3281
+ .ez-dialog-go {
3282
+ height: 36px;
3283
+ padding: 0 16px;
3284
+ border-radius: 7px;
3285
+ font-family: inherit;
3286
+ font-size: 14px;
3287
+ font-weight: 600;
3288
+ cursor: pointer;
3289
+ }
3290
+ .ez-dialog-cancel {
3291
+ border: 1px solid var(--border);
3292
+ background: var(--panel);
3293
+ color: var(--foreground);
3294
+ }
3295
+ .ez-dialog-cancel:hover {
3296
+ background: var(--muted);
3297
+ }
3298
+ .ez-dialog-go {
3299
+ border: 1px solid var(--primary);
3300
+ background: var(--primary);
3301
+ color: var(--primary-foreground);
3302
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
3303
+ }
3304
+ .ez-dialog-go:hover {
3305
+ opacity: 0.88;
3306
+ }
3307
+ .ez-board {
3308
+ position: relative;
3309
+ flex: 1;
3310
+ min-height: 0;
3311
+ overflow: clip;
3312
+ background: var(--paper-sunken);
3313
+ outline: none;
3314
+ touch-action: none;
3315
+ }
3316
+ .ez-board[hidden] {
3317
+ display: none;
3318
+ }
3319
+ html.ez-on-board,
3320
+ html.ez-on-board body {
3321
+ overscroll-behavior-x: none;
3322
+ }
3323
+ .ez-board.ez-space {
3324
+ cursor: grab;
3325
+ }
3326
+ .ez-board.ez-panning {
3327
+ cursor: grabbing;
3328
+ }
3329
+ .ez-board-world {
3330
+ position: absolute;
3331
+ left: 0;
3332
+ top: 0;
3333
+ transform-origin: 0 0;
3334
+ }
3335
+ .ez-board-frame {
3336
+ position: absolute;
3337
+ left: 0;
3338
+ top: 0;
3339
+ background: #fff;
3340
+ box-shadow: 0 calc(4px / var(--ez-zoom, 1)) calc(18px / var(--ez-zoom, 1)) oklch(0% 0 0 / 0.07);
3341
+ outline: calc(1px / var(--ez-zoom, 1)) solid var(--border);
3342
+ outline-offset: calc(-0.5px / var(--ez-zoom, 1));
3343
+ }
3344
+ .ez-board-frame.ez-live,
3345
+ .ez-board-frame[aria-selected=true] {
3346
+ outline-color: var(--arrange);
3347
+ }
3348
+ .ez-board-marquee {
3349
+ position: absolute;
3350
+ left: 0;
3351
+ top: 0;
3352
+ pointer-events: none;
3353
+ border: 1px solid var(--arrange);
3354
+ background: color-mix(in oklab, var(--arrange) 8%, transparent);
3355
+ }
3356
+ .ez-board-marquee[hidden] {
3357
+ display: none;
3358
+ }
3359
+ .ez-board-heads {
3360
+ position: absolute;
3361
+ left: 0;
3362
+ top: 0;
3363
+ pointer-events: none;
3364
+ }
3365
+ .ez-board-frame-head {
3366
+ position: absolute;
3367
+ left: 0;
3368
+ top: 0;
3369
+ display: flex;
3370
+ padding-bottom: 6px;
3371
+ font-size: 12px;
3372
+ line-height: 16px;
3373
+ white-space: nowrap;
3374
+ cursor: default;
3375
+ user-select: none;
3376
+ pointer-events: auto;
3377
+ }
3378
+ .ez-board-frame-head.ez-selected .ez-board-frame-title {
3379
+ color: var(--ink);
3380
+ }
3381
+ .ez-picking-frames .ez-board-frame-head {
3382
+ cursor: pointer;
3383
+ }
3384
+ .ez-board-frame.ez-pick-target {
3385
+ outline: calc(2px / var(--ez-zoom, 1)) solid var(--ref-accent);
3386
+ outline-offset: calc(-1px / var(--ez-zoom, 1));
3387
+ }
3388
+ .ez-picking-frames .ez-board-frame-head:hover .ez-board-frame-title {
3389
+ color: var(--ref-accent);
3390
+ }
3391
+ .ez-guides {
3392
+ position: absolute;
3393
+ left: 0;
3394
+ top: 0;
3395
+ z-index: 100000;
3396
+ pointer-events: none;
3397
+ }
3398
+ .ez-guide {
3399
+ position: absolute;
3400
+ left: 0;
3401
+ top: 0;
3402
+ background: var(--arrange);
3403
+ }
3404
+ .ez-guide[data-axis=x] {
3405
+ width: calc(1px / var(--ez-zoom, 1));
3406
+ margin-left: calc(-0.5px / var(--ez-zoom, 1));
3407
+ }
3408
+ .ez-guide[data-axis=y] {
3409
+ height: calc(1px / var(--ez-zoom, 1));
3410
+ margin-top: calc(-0.5px / var(--ez-zoom, 1));
3411
+ }
3412
+ .ez-board.ez-arranging,
3413
+ .ez-board.ez-arranging .ez-board-frame,
3414
+ .ez-board.ez-arranging .ez-board-frame-head {
3415
+ cursor: grabbing;
3416
+ user-select: none;
3417
+ }
3418
+ .ez-board-frame-title {
3419
+ max-width: 100%;
3420
+ overflow: hidden;
3421
+ text-overflow: ellipsis;
3422
+ font-weight: 500;
3423
+ color: var(--foreground);
3424
+ }
3425
+ .ez-board-iframe {
3426
+ display: block;
3427
+ width: 100%;
3428
+ height: 100%;
3429
+ border: 0;
3430
+ background: #fff;
3431
+ pointer-events: none;
3432
+ }
3433
+ .ez-board.ez-annotating .ez-board-iframe,
3434
+ .ez-picking .ez-board-iframe,
3435
+ .ez-board-frame.ez-live .ez-board-iframe {
3436
+ pointer-events: auto;
3437
+ }
3438
+ .ez-board.ez-moving .ez-board-iframe,
3439
+ .ez-board.ez-space .ez-board-iframe,
3440
+ .ez-board.ez-arranging .ez-board-iframe {
3441
+ pointer-events: none;
3442
+ }
3443
+ .ez-board-empty {
3444
+ position: absolute;
3445
+ inset: 0;
3446
+ display: grid;
3447
+ place-items: center;
3448
+ color: color-mix(in srgb, var(--paper-edge), var(--ink-ghost) 8%);
3449
+ pointer-events: none;
3450
+ }
3451
+ .ez-board-empty[hidden] {
3452
+ display: none;
3453
+ }
3454
+ .ez-board-tools {
3455
+ position: absolute;
3456
+ right: 12px;
3457
+ bottom: 12px;
3458
+ display: flex;
3459
+ align-items: center;
3460
+ padding: 3px;
3461
+ border-radius: 9px;
3462
+ background: color-mix(in srgb, var(--panel) 72%, transparent);
3463
+ box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.05);
3464
+ backdrop-filter: blur(16px) saturate(1.4);
3465
+ }
3466
+ .ez-board-tool {
3467
+ display: grid;
3468
+ place-items: center;
3469
+ width: 26px;
3470
+ height: 26px;
3471
+ padding: 0;
3472
+ border: none;
3473
+ border-radius: 6px;
3474
+ background: transparent;
3475
+ color: var(--muted-foreground);
3476
+ cursor: pointer;
3477
+ }
3478
+ .ez-board-tool path {
3479
+ stroke-width: 2;
3480
+ }
3481
+ .ez-board-tool:hover {
3482
+ background: var(--muted);
3483
+ color: var(--foreground);
3484
+ }
3485
+ .ez-board-zoom {
3486
+ min-width: 38px;
3487
+ padding-left: 2px;
3488
+ text-align: center;
3489
+ font-size: 12px;
3490
+ font-variant-numeric: tabular-nums;
3491
+ color: var(--muted-foreground);
3492
+ }
3493
+ .ez-library {
3494
+ position: absolute;
3495
+ inset: 0 44px 0 0;
3496
+ z-index: 30;
3497
+ display: flex;
3498
+ background: var(--background);
3499
+ }
3500
+ .ez-library[data-entering] {
3501
+ animation: ez-fade-in var(--t-view) var(--ease-out) both;
3502
+ }
3503
+ .ez-library[hidden] {
3504
+ display: none;
3505
+ }
3506
+ .ez-library-scroll {
3507
+ flex: 1;
3508
+ min-width: 0;
3509
+ overflow-y: auto;
3510
+ }
3511
+ .ez-library-head {
3512
+ position: sticky;
3513
+ top: 0;
3514
+ z-index: 1;
3515
+ display: grid;
3516
+ justify-items: start;
3517
+ gap: 14px;
3518
+ padding: 28px 32px 18px;
3519
+ background: var(--background);
3520
+ }
3521
+ .ez-library-title {
3522
+ margin: 0;
3523
+ font-size: 20px;
3524
+ font-weight: 600;
3525
+ letter-spacing: -0.01em;
3526
+ line-height: 1.3;
3527
+ }
3528
+ .ez-library-search {
3529
+ display: flex;
3530
+ align-items: center;
3531
+ gap: 8px;
3532
+ width: min(420px, 100%);
3533
+ height: 36px;
3534
+ padding: 0 6px 0 11px;
3535
+ border: 1px solid var(--border);
3536
+ border-radius: var(--radius);
3537
+ background: var(--panel);
3538
+ color: var(--ink-faint);
3539
+ cursor: text;
3540
+ transition: border-color var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out);
3541
+ }
3542
+ .ez-library-search:focus-within {
3543
+ border-color: var(--ring);
3544
+ box-shadow: 0 0 0 3px var(--ring-halo);
3545
+ }
3546
+ .ez-library-search input {
3547
+ flex: 1;
3548
+ min-width: 0;
3549
+ height: 100%;
3550
+ padding: 0;
3551
+ border: 0;
3552
+ outline: none;
3553
+ background: transparent;
3554
+ color: var(--foreground);
3555
+ font: inherit;
3556
+ font-size: 14px;
3557
+ }
3558
+ .ez-library-search input::placeholder {
3559
+ color: var(--ink-ghost);
3560
+ }
3561
+ .ez-library-search input::-webkit-search-cancel-button {
3562
+ display: none;
3563
+ }
3564
+ .ez-library-search-clear {
3565
+ display: grid;
3566
+ place-items: center;
3567
+ width: 24px;
3568
+ height: 24px;
3569
+ padding: 0;
3570
+ border: 0;
3571
+ border-radius: 6px;
3572
+ background: transparent;
3573
+ color: var(--ink-faint);
3574
+ cursor: pointer;
3575
+ }
3576
+ .ez-library-search-clear:hover {
3577
+ background: var(--muted);
3578
+ color: var(--foreground);
3579
+ }
3580
+ .ez-library-search-clear[hidden] {
3581
+ display: none;
3582
+ }
3583
+ .ez-library-tags {
3584
+ display: flex;
3585
+ flex-wrap: wrap;
3586
+ gap: 6px;
3587
+ }
3588
+ .ez-library-tags[hidden] {
3589
+ display: none;
3590
+ }
3591
+ .ez-library-tag {
3592
+ display: inline-flex;
3593
+ align-items: center;
3594
+ gap: 6px;
3595
+ height: 28px;
3596
+ padding: 0 10px;
3597
+ border: 0;
3598
+ border-radius: 7px;
3599
+ background: var(--muted);
3600
+ color: var(--foreground);
3601
+ font-family: inherit;
3602
+ font-size: 13px;
3603
+ font-weight: 500;
3604
+ white-space: nowrap;
3605
+ cursor: pointer;
3606
+ transition: background-color var(--t-pop) var(--ease-out), color var(--t-pop) var(--ease-out);
3607
+ }
3608
+ .ez-library-tag:hover {
3609
+ background: var(--border);
3610
+ }
3611
+ .ez-library-tag[aria-pressed=true] {
3612
+ background: var(--primary);
3613
+ color: var(--primary-foreground);
3614
+ }
3615
+ .ez-library-tag-uses {
3616
+ color: var(--ink-faint);
3617
+ font-size: 11px;
3618
+ font-variant-numeric: tabular-nums;
3619
+ }
3620
+ .ez-library-tag[aria-pressed=true] .ez-library-tag-uses {
3621
+ color: oklch(100% 0 0 / 0.6);
3622
+ }
3623
+ .ez-library-grid {
3624
+ display: grid;
3625
+ grid-template-columns: repeat(6, minmax(0, 1fr));
3626
+ gap: 22px 16px;
3627
+ margin: 0;
3628
+ padding: 6px 32px 40px;
3629
+ list-style: none;
3630
+ }
3631
+ .ez-library-card {
3632
+ display: grid;
3633
+ gap: 8px;
3634
+ width: 100%;
3635
+ padding: 0;
3636
+ border: 0;
3637
+ background: none;
3638
+ color: inherit;
3639
+ font: inherit;
3640
+ text-align: left;
3641
+ cursor: pointer;
3642
+ }
3643
+ .ez-library-card:focus-visible {
3644
+ outline: none;
3645
+ }
3646
+ .ez-library-card-media {
3647
+ --tile-radius: 14px;
3648
+ --tile-inset: 10px;
3649
+ --badge-inset: 8px;
3650
+ position: relative;
3651
+ display: block;
3652
+ aspect-ratio: 1;
3653
+ border-radius: var(--tile-radius);
3654
+ background: var(--muted);
3655
+ transition: background-color var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out);
3656
+ }
3657
+ .ez-library-card:hover .ez-library-card-media {
3658
+ background: var(--border);
3659
+ }
3660
+ .ez-library-card:focus-visible .ez-library-card-media {
3661
+ box-shadow: 0 0 0 3px var(--ring-halo);
3662
+ }
3663
+ .ez-library-card-frame {
3664
+ position: absolute;
3665
+ inset: var(--tile-inset);
3666
+ display: flex;
3667
+ align-items: center;
3668
+ justify-content: center;
3669
+ }
3670
+ .ez-library-card-media img {
3671
+ display: block;
3672
+ max-width: 100%;
3673
+ max-height: 100%;
3674
+ border-radius: max(0px, var(--tile-radius) - var(--tile-inset));
3675
+ outline: 1px solid var(--image-outline);
3676
+ outline-offset: -1px;
3677
+ box-shadow: 0 1px 3px oklch(0% 0 0 / 0.06);
3678
+ }
3679
+ .ez-library-card-badge {
3680
+ position: absolute;
3681
+ top: var(--badge-inset);
3682
+ left: var(--badge-inset);
3683
+ display: inline-flex;
3684
+ align-items: center;
3685
+ gap: 3px;
3686
+ height: 20px;
3687
+ padding: 0 7px 0 5px;
3688
+ border-radius: calc(var(--tile-radius) - var(--badge-inset));
3689
+ background: oklch(0% 0 0 / 0.62);
3690
+ backdrop-filter: blur(8px);
3691
+ color: #fff;
3692
+ font-size: 11px;
3693
+ font-weight: 500;
3694
+ }
3695
+ .ez-library-card-caption {
3696
+ overflow: hidden;
3697
+ color: var(--muted-foreground);
3698
+ font-size: 12px;
3699
+ line-height: 1.4;
3700
+ white-space: nowrap;
3701
+ text-overflow: ellipsis;
3702
+ }
3703
+ .ez-library-sentinel {
3704
+ height: 1px;
3705
+ }
3706
+ .ez-library-empty {
3707
+ display: grid;
3708
+ justify-items: center;
3709
+ gap: 6px;
3710
+ max-width: 460px;
3711
+ margin: 12vh auto 0;
3712
+ padding: 0 24px;
3713
+ text-align: center;
3714
+ }
3715
+ .ez-library-empty[hidden] {
3716
+ display: none;
3717
+ }
3718
+ .ez-library-empty-title {
3719
+ margin: 0 0 4px;
3720
+ font-size: 15px;
3721
+ font-weight: 600;
3722
+ }
3723
+ .ez-library-empty-body {
3724
+ margin: 0;
3725
+ color: var(--muted-foreground);
3726
+ font-size: 13px;
3727
+ line-height: 1.6;
3728
+ }
3729
+ .ez-library-empty code,
3730
+ .ez-library-empty kbd {
3731
+ padding: 1px 5px;
3732
+ border-radius: 4px;
3733
+ background: var(--muted);
3734
+ color: var(--foreground);
3735
+ font:
3736
+ 12px ui-monospace,
3737
+ "SF Mono",
3738
+ Menlo,
3739
+ monospace;
3740
+ white-space: nowrap;
3741
+ }
3742
+ .ez-library-empty-action {
3743
+ height: 32px;
3744
+ margin-top: 8px;
3745
+ padding: 0 14px;
3746
+ border: 1px solid var(--border);
3747
+ border-radius: 7px;
3748
+ background: var(--panel);
3749
+ color: var(--foreground);
3750
+ font-family: inherit;
3751
+ font-size: 13px;
3752
+ font-weight: 600;
3753
+ cursor: pointer;
3754
+ }
3755
+ .ez-library-empty-action:hover {
3756
+ background: var(--muted);
3757
+ }
3758
+ .ez-library-empty-link {
3759
+ margin-top: 6px;
3760
+ padding: 0;
3761
+ border: 0;
3762
+ background: none;
3763
+ color: var(--foreground);
3764
+ font-family: inherit;
3765
+ font-size: 13px;
3766
+ font-weight: 500;
3767
+ text-decoration: underline;
3768
+ text-decoration-color: var(--ink-ghost);
3769
+ text-underline-offset: 3px;
3770
+ cursor: pointer;
3771
+ transition: text-decoration-color var(--t-pop) var(--ease-out);
3772
+ }
3773
+ .ez-library-empty-link:hover {
3774
+ text-decoration-color: currentColor;
3775
+ }
3776
+ .ez-library-toast {
3777
+ position: absolute;
3778
+ top: 16px;
3779
+ left: 50%;
3780
+ z-index: 2;
3781
+ margin: 0;
3782
+ padding: 6px 12px;
3783
+ border-radius: 8px;
3784
+ background: oklch(0% 0 0 / 0.78);
3785
+ backdrop-filter: blur(16px) saturate(1.6);
3786
+ box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1), 0 4px 16px oklch(0% 0 0 / 0.16);
3787
+ color: #fff;
3788
+ font-size: 12px;
3789
+ font-weight: 500;
3790
+ line-height: 1.5;
3791
+ white-space: nowrap;
3792
+ pointer-events: none;
3793
+ transform: translateX(-50%);
3794
+ animation: ez-toast-in var(--t-view) var(--ease-out) both;
3795
+ }
3796
+ .ez-library-toast[hidden] {
3797
+ display: none;
3798
+ }
3799
+ @keyframes ez-toast-in {
3800
+ from {
3801
+ opacity: 0;
3802
+ transform: translate(-50%, -6px) scale(0.96);
3803
+ }
3804
+ }
3805
+ @media (prefers-reduced-motion: reduce) {
3806
+ .ez-library-toast {
3807
+ animation-name: ez-fade-in;
3808
+ }
3809
+ }
3810
+ .ez-install {
3811
+ width: min(460px, calc(100vw - 32px));
3812
+ }
3813
+ .ez-install-steps {
3814
+ display: grid;
3815
+ gap: 14px;
3816
+ margin: 14px 0 0;
3817
+ padding: 0;
3818
+ list-style: none;
3819
+ counter-reset: step;
3820
+ }
3821
+ .ez-install-step {
3822
+ display: grid;
3823
+ grid-template-columns: 20px minmax(0, 1fr);
3824
+ column-gap: 10px;
3825
+ row-gap: 6px;
3826
+ font-size: 14px;
3827
+ line-height: 20px;
3828
+ counter-increment: step;
3829
+ }
3830
+ .ez-install-step::before {
3831
+ content: counter(step);
3832
+ grid-row: 1 / span 3;
3833
+ display: grid;
3834
+ place-items: center;
3835
+ width: 20px;
3836
+ height: 20px;
3837
+ border-radius: 50%;
3838
+ background: var(--muted);
3839
+ color: var(--muted-foreground);
3840
+ font-size: 12px;
3841
+ font-weight: 600;
3842
+ font-variant-numeric: tabular-nums;
3843
+ }
3844
+ .ez-install-step > * {
3845
+ grid-column: 2;
3846
+ }
3847
+ .ez-install-copy {
3848
+ display: flex;
3849
+ align-items: center;
3850
+ gap: 4px;
3851
+ padding: 4px 4px 4px 10px;
3852
+ border: 1px solid var(--border);
3853
+ border-radius: 7px;
3854
+ background: var(--muted);
3855
+ }
3856
+ .ez-install-copy code {
3857
+ flex: 1;
3858
+ min-width: 0;
3859
+ overflow-wrap: anywhere;
3860
+ font:
3861
+ 12px/1.5 ui-monospace,
3862
+ "SF Mono",
3863
+ Menlo,
3864
+ monospace;
3865
+ }
3866
+ .ez-install-copy-button {
3867
+ display: grid;
3868
+ flex-shrink: 0;
3869
+ place-items: center;
3870
+ width: 26px;
3871
+ height: 26px;
3872
+ padding: 0;
3873
+ border: 0;
3874
+ border-radius: 5px;
3875
+ background: none;
3876
+ color: var(--muted-foreground);
3877
+ cursor: pointer;
3878
+ }
3879
+ .ez-install-copy-button:hover {
3880
+ background: var(--border);
3881
+ color: var(--foreground);
3882
+ }
3883
+ .ez-install-hint {
3884
+ color: var(--muted-foreground);
3885
+ font-size: 12px;
3886
+ line-height: 1.5;
3887
+ }
3888
+ .ez-install .ez-dialog-actions {
3889
+ align-items: center;
3890
+ }
3891
+ .ez-install-status {
3892
+ display: flex;
3893
+ align-items: center;
3894
+ gap: 6px;
3895
+ margin: 0 auto 0 0;
3896
+ color: var(--muted-foreground);
3897
+ font-size: 13px;
3898
+ }
3899
+ .ez-install-status[data-tone=ok] {
3900
+ color: var(--attach-ink);
3901
+ }
3902
+ .ez-install-waiting {
3903
+ width: 6px;
3904
+ height: 6px;
3905
+ border-radius: 50%;
3906
+ background: currentColor;
3907
+ animation: ez-pulse 1.4s ease-in-out infinite;
3908
+ }
3909
+ .ez-install-body .ez-library-empty-action {
3910
+ margin-top: 12px;
3911
+ }
3912
+ .ez-library-picker {
3913
+ display: flex;
3914
+ flex-direction: column;
3915
+ width: min(960px, calc(100vw - 48px));
3916
+ max-width: none;
3917
+ height: min(720px, calc(100vh - 48px));
3918
+ max-height: none;
3919
+ padding: 0;
3920
+ border: 0;
3921
+ border-radius: 14px;
3922
+ overflow: hidden;
3923
+ background: var(--panel);
3924
+ color: var(--foreground);
3925
+ box-shadow:
3926
+ 0 0 0 1px oklch(0% 0 0 / 0.06),
3927
+ 0 24px 64px oklch(0% 0 0 / 0.24),
3928
+ 0 4px 12px oklch(0% 0 0 / 0.08);
3929
+ animation: ez-menu-in var(--t-view) var(--ease-out) both;
3930
+ }
3931
+ .ez-library-picker:not([open]) {
3932
+ display: none;
3933
+ }
3934
+ .ez-library-picker::backdrop {
3935
+ background: oklch(0% 0 0 / 0.32);
3936
+ animation: ez-fade-in var(--t-view) var(--ease-out) both;
3937
+ }
3938
+ .ez-library-picker-top {
3939
+ display: flex;
3940
+ align-items: center;
3941
+ justify-content: space-between;
3942
+ gap: 8px;
3943
+ padding: 16px 16px 0 24px;
3944
+ }
3945
+ .ez-library-picker-title {
3946
+ margin: 0;
3947
+ font-size: 16px;
3948
+ font-weight: 600;
3949
+ line-height: 1.4;
3950
+ }
3951
+ .ez-library-picker .ez-library-scroll {
3952
+ min-height: 0;
3953
+ }
3954
+ .ez-library-picker .ez-library-head {
3955
+ padding: 12px 24px 14px;
3956
+ background: var(--panel);
3957
+ }
3958
+ .ez-library-picker .ez-library-grid {
3959
+ grid-template-columns: repeat(4, minmax(0, 1fr));
3960
+ gap: 14px;
3961
+ padding: 4px 24px 24px;
3962
+ }
3963
+ .ez-library-picker .ez-library-empty {
3964
+ margin-top: 8vh;
3965
+ }
3966
+ .ez-library-card-check {
3967
+ position: absolute;
3968
+ top: 8px;
3969
+ right: 8px;
3970
+ display: grid;
3971
+ place-items: center;
3972
+ width: 20px;
3973
+ height: 20px;
3974
+ border-radius: 50%;
3975
+ background: var(--primary);
3976
+ color: var(--primary-foreground);
3977
+ opacity: 0;
3978
+ transform: scale(0.8);
3979
+ transition: opacity var(--t-pop) var(--ease-out), transform var(--t-pop) var(--ease-out);
3980
+ }
3981
+ .ez-library-card[aria-pressed=true] .ez-library-card-check {
3982
+ opacity: 1;
3983
+ transform: none;
3984
+ }
3985
+ .ez-library-card-check path {
3986
+ stroke-width: 2.5;
3987
+ }
3988
+ .ez-library-card[aria-pressed=true] .ez-library-card-media {
3989
+ box-shadow: inset 0 0 0 2px var(--primary);
3990
+ }
3991
+ .ez-library-card[aria-pressed=true]:focus-visible .ez-library-card-media {
3992
+ box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 3px var(--ring-halo);
3993
+ }
3994
+ .ez-library-picker-foot {
3995
+ display: flex;
3996
+ align-items: center;
3997
+ gap: 8px;
3998
+ padding: 12px 16px 12px 24px;
3999
+ border-top: 1px solid var(--border);
4000
+ }
4001
+ .ez-library-picker-count {
4002
+ margin: 0 auto 0 0;
4003
+ color: var(--muted-foreground);
4004
+ font-size: 13px;
4005
+ font-variant-numeric: tabular-nums;
4006
+ }
4007
+ .ez-library-picker-foot .ez-dialog-go:disabled {
4008
+ opacity: 0.4;
4009
+ cursor: default;
4010
+ }
4011
+ .ez-library-detail {
4012
+ width: min(1120px, calc(100vw - 48px));
4013
+ max-width: none;
4014
+ height: min(760px, calc(100vh - 48px));
4015
+ max-height: none;
4016
+ padding: 0;
4017
+ border: 0;
4018
+ border-radius: 14px;
4019
+ overflow: hidden;
4020
+ background: var(--panel);
4021
+ color: var(--foreground);
4022
+ box-shadow:
4023
+ 0 0 0 1px oklch(0% 0 0 / 0.06),
4024
+ 0 24px 64px oklch(0% 0 0 / 0.24),
4025
+ 0 4px 12px oklch(0% 0 0 / 0.08);
4026
+ animation: ez-menu-in var(--t-view) var(--ease-out) both;
4027
+ }
4028
+ .ez-library-detail::backdrop {
4029
+ background: oklch(0% 0 0 / 0.32);
4030
+ animation: ez-fade-in var(--t-view) var(--ease-out) both;
4031
+ }
4032
+ .ez-library-detail-body {
4033
+ display: grid;
4034
+ grid-template-columns: minmax(0, 1fr) 340px;
4035
+ height: 100%;
4036
+ }
4037
+ .ez-library-detail-stage {
4038
+ position: relative;
4039
+ container-type: size;
4040
+ display: flex;
4041
+ align-items: center;
4042
+ justify-content: center;
4043
+ min-height: 0;
4044
+ padding: 28px;
4045
+ background: var(--paper-sunken);
4046
+ }
4047
+ .ez-library-detail-media {
4048
+ display: block;
4049
+ max-width: 100%;
4050
+ max-height: 100%;
4051
+ border-radius: 4px;
4052
+ outline: 1px solid var(--image-outline);
4053
+ outline-offset: -1px;
4054
+ }
4055
+ .ez-library-detail-missing {
4056
+ color: var(--muted-foreground);
4057
+ font-size: 13px;
4058
+ }
4059
+ .ez-library-detail-step {
4060
+ position: absolute;
4061
+ top: 50%;
4062
+ display: grid;
4063
+ place-items: center;
4064
+ width: 36px;
4065
+ height: 36px;
4066
+ margin-top: -18px;
4067
+ padding: 0;
4068
+ border: 0;
4069
+ border-radius: 50%;
4070
+ background: oklch(100% 0 0 / 0.92);
4071
+ color: var(--foreground);
4072
+ box-shadow: 0 0 0 1px oklch(0% 0 0 / 0.06), 0 2px 8px oklch(0% 0 0 / 0.12);
4073
+ cursor: pointer;
4074
+ opacity: 0;
4075
+ transition: opacity var(--t-pop) var(--ease-out);
4076
+ }
4077
+ .ez-library-detail-step[data-side=prev] {
4078
+ left: 14px;
4079
+ }
4080
+ .ez-library-detail-step[data-side=next] {
4081
+ right: 14px;
4082
+ }
4083
+ .ez-library-detail-stage:hover .ez-library-detail-step,
4084
+ .ez-library-detail-step:focus-visible {
4085
+ opacity: 1;
4086
+ }
4087
+ .ez-library-detail-step[hidden] {
4088
+ display: none;
4089
+ }
4090
+ .ez-library-detail-side {
4091
+ display: flex;
4092
+ flex-direction: column;
4093
+ gap: 16px;
4094
+ min-height: 0;
4095
+ padding: 18px 20px 16px;
4096
+ overflow-y: auto;
4097
+ }
4098
+ .ez-library-detail-head {
4099
+ display: flex;
4100
+ align-items: flex-start;
4101
+ gap: 8px;
4102
+ }
4103
+ .ez-library-detail-title {
4104
+ display: inline-flex;
4105
+ flex: 1;
4106
+ min-width: 0;
4107
+ padding-top: 3px;
4108
+ color: var(--foreground);
4109
+ font-size: 15px;
4110
+ font-weight: 600;
4111
+ line-height: 1.4;
4112
+ text-decoration: none;
4113
+ }
4114
+ .ez-library-detail-title span {
4115
+ display: -webkit-box;
4116
+ overflow: hidden;
4117
+ overflow-wrap: anywhere;
4118
+ -webkit-box-orient: vertical;
4119
+ -webkit-line-clamp: 2;
4120
+ }
4121
+ .ez-library-detail-title[href]:hover span {
4122
+ text-decoration: underline;
4123
+ text-underline-offset: 2px;
4124
+ }
4125
+ .ez-library-detail-close {
4126
+ display: grid;
4127
+ flex-shrink: 0;
4128
+ place-items: center;
4129
+ width: 28px;
4130
+ height: 28px;
4131
+ padding: 0;
4132
+ border: 0;
4133
+ border-radius: 7px;
4134
+ background: transparent;
4135
+ color: var(--ink-faint);
4136
+ cursor: pointer;
4137
+ }
4138
+ .ez-library-detail-close:hover {
4139
+ background: var(--muted);
4140
+ color: var(--foreground);
4141
+ }
4142
+ .ez-library-detail-meta {
4143
+ margin: -12px 0 0;
4144
+ color: var(--muted-foreground);
4145
+ font-size: 12px;
4146
+ font-variant-numeric: tabular-nums;
4147
+ }
4148
+ .ez-library-detail-notice {
4149
+ margin: 0;
4150
+ padding: 8px 10px;
4151
+ border-radius: var(--radius);
4152
+ background: var(--muted);
4153
+ color: var(--muted-foreground);
4154
+ font-size: 12px;
4155
+ line-height: 1.5;
4156
+ }
4157
+ .ez-library-detail-notice[hidden] {
4158
+ display: none;
4159
+ }
4160
+ .ez-library-field {
4161
+ display: grid;
4162
+ gap: 6px;
4163
+ }
4164
+ .ez-library-field-label {
4165
+ color: var(--muted-foreground);
4166
+ font-size: 12px;
4167
+ font-weight: 500;
4168
+ }
4169
+ .ez-library-combo {
4170
+ position: relative;
4171
+ }
4172
+ .ez-library-tag-box,
4173
+ .ez-library-note {
4174
+ width: 100%;
4175
+ border: 1px solid var(--border);
4176
+ border-radius: var(--radius);
4177
+ background: var(--panel);
4178
+ transition: border-color var(--t-pop) var(--ease-out), box-shadow var(--t-pop) var(--ease-out);
4179
+ }
4180
+ .ez-library-tag-box {
4181
+ display: flex;
4182
+ flex-wrap: wrap;
4183
+ align-items: center;
4184
+ gap: 4px;
4185
+ min-height: 36px;
4186
+ padding: 5px 6px;
4187
+ cursor: text;
4188
+ }
4189
+ .ez-library-tag-box:focus-within,
4190
+ .ez-library-note:focus {
4191
+ border-color: var(--ring);
4192
+ box-shadow: 0 0 0 3px var(--ring-halo);
4193
+ }
4194
+ .ez-library-chips {
4195
+ display: contents;
4196
+ }
4197
+ .ez-library-chip {
4198
+ display: inline-flex;
4199
+ align-items: center;
4200
+ gap: 3px;
4201
+ max-width: 200px;
4202
+ height: 22px;
4203
+ padding: 0 6px;
4204
+ border: 0;
4205
+ border-radius: 4px;
4206
+ background: var(--tag);
4207
+ color: var(--tag-ink);
4208
+ font-family: inherit;
4209
+ font-size: 12px;
4210
+ font-weight: 500;
4211
+ white-space: nowrap;
4212
+ cursor: pointer;
4213
+ }
4214
+ .ez-library-chip > span:first-child {
4215
+ overflow: hidden;
4216
+ text-overflow: ellipsis;
4217
+ }
4218
+ .ez-library-chip-x {
4219
+ font-size: 13px;
4220
+ line-height: 1;
4221
+ opacity: 0.6;
4222
+ }
4223
+ .ez-library-chip:hover .ez-library-chip-x {
4224
+ opacity: 1;
4225
+ }
4226
+ .ez-library-tag-box input {
4227
+ flex: 1;
4228
+ min-width: 56px;
4229
+ height: 24px;
4230
+ padding: 0 2px;
4231
+ border: 0;
4232
+ outline: none;
4233
+ background: transparent;
4234
+ color: var(--foreground);
4235
+ font: inherit;
4236
+ font-size: 13px;
4237
+ }
4238
+ .ez-library-tag-box input::placeholder,
4239
+ .ez-library-note::placeholder {
4240
+ color: var(--ink-ghost);
4241
+ }
4242
+ .ez-library-tag-options {
4243
+ position: absolute;
4244
+ top: calc(100% + 4px);
4245
+ left: 0;
4246
+ z-index: 1;
4247
+ min-width: 200px;
4248
+ max-width: 100%;
4249
+ margin: 0;
4250
+ padding: 4px;
4251
+ border: 1px solid var(--border);
4252
+ border-radius: 10px;
4253
+ background: var(--panel);
4254
+ box-shadow: 0 12px 32px oklch(0% 0 0 / 0.12), 0 2px 8px oklch(0% 0 0 / 0.06);
4255
+ list-style: none;
4256
+ animation: ez-menu-in var(--t-menu) var(--ease-out) both;
4257
+ transform-origin: top left;
4258
+ }
4259
+ .ez-library-tag-options[hidden] {
4260
+ display: none;
4261
+ }
4262
+ .ez-library-tag-options li {
4263
+ padding: 5px 8px;
4264
+ border-radius: 6px;
4265
+ font-size: 13px;
4266
+ cursor: pointer;
4267
+ }
4268
+ .ez-library-tag-options li:hover,
4269
+ .ez-library-tag-options li[aria-selected=true] {
4270
+ background: var(--muted);
4271
+ }
4272
+ .ez-library-note {
4273
+ display: block;
4274
+ min-height: 96px;
4275
+ padding: 7px 9px;
4276
+ outline: none;
4277
+ color: var(--foreground);
4278
+ font: inherit;
4279
+ font-size: 13px;
4280
+ line-height: 1.55;
4281
+ resize: vertical;
4282
+ }
4283
+ .ez-library-detail-foot {
4284
+ display: flex;
4285
+ align-items: center;
4286
+ justify-content: space-between;
4287
+ gap: 12px;
4288
+ margin-top: auto;
4289
+ padding-top: 4px;
4290
+ }
4291
+ .ez-library-detail-remove {
4292
+ display: inline-flex;
4293
+ align-items: center;
4294
+ gap: 6px;
4295
+ height: 32px;
4296
+ margin-left: -8px;
4297
+ padding: 0 10px 0 8px;
4298
+ border: 0;
4299
+ border-radius: 7px;
4300
+ background: transparent;
4301
+ color: var(--muted-foreground);
4302
+ font-family: inherit;
4303
+ font-size: 13px;
4304
+ font-weight: 500;
4305
+ cursor: pointer;
4306
+ }
4307
+ .ez-library-detail-remove:hover {
4308
+ background: color-mix(in oklab, var(--danger) 8%, transparent);
4309
+ color: var(--danger);
4310
+ }
4311
+ .ez-library-detail-status {
4312
+ margin: 0;
4313
+ color: var(--ink-faint);
4314
+ font-size: 12px;
4315
+ }
4316
+ .ez-library-detail-status[data-tone=error] {
4317
+ color: var(--danger);
4318
+ }
4319
+ @media (prefers-reduced-motion: reduce) {
4320
+ .ez-library-detail {
4321
+ animation-name: ez-fade-in;
4322
+ }
4323
+ }
4324
+ [data-host=desktop] .ez-tabs-bar {
4325
+ padding-left: var(--traffic-light-room);
4326
+ -webkit-app-region: drag;
4327
+ }
4328
+ [data-host=desktop][data-sidebar=open] .ez-tab:first-child {
4329
+ margin-left: -1px;
4330
+ }
4331
+ [data-host=desktop] .ez-account {
4332
+ display: none;
4333
+ }
4334
+ [data-host=desktop] .ez-tabs-bar button,
4335
+ [data-host=desktop] .ez-tabs-bar [role=tab],
4336
+ [data-host=desktop] .ez-tabs-bar .ez-menu {
4337
+ -webkit-app-region: no-drag;
4338
+ }
4339
+ .ez-sidebar-toggle {
4340
+ display: none;
4341
+ align-items: center;
4342
+ justify-content: center;
4343
+ flex-shrink: 0;
4344
+ width: 28px;
4345
+ height: 28px;
4346
+ margin: 0 6px 0 -4px;
4347
+ border: none;
4348
+ border-radius: 7px;
4349
+ background: none;
4350
+ color: var(--muted-foreground);
4351
+ cursor: pointer;
4352
+ }
4353
+ .ez-sidebar-toggle:hover {
4354
+ background: var(--muted);
4355
+ color: var(--foreground);
4356
+ }
4357
+ [data-sidebar=closed] .ez-sidebar-toggle {
4358
+ display: inline-flex;
4359
+ }
4360
+
4361
+ /* src/client/home.css */
4362
+ .ez-home {
4363
+ width: min(720px, calc(100% - 48px));
4364
+ margin: 0 auto;
4365
+ padding: 40px 0 64px;
4366
+ }
4367
+ .ez-home-head {
4368
+ display: flex;
4369
+ align-items: center;
4370
+ height: 24px;
4371
+ }
4372
+ .ez-home-lead {
4373
+ margin: 6px 0 0;
4374
+ font-size: 14px;
4375
+ color: var(--muted-foreground);
4376
+ }
4377
+ .ez-home-app-only {
4378
+ margin-top: 36px;
4379
+ max-width: 520px;
4380
+ }
4381
+ html:has(.ez-side) {
4382
+ --side-ground: #ebe9e2;
4383
+ }
4384
+ html:has(.ez-side),
4385
+ html:has(.ez-side) body {
4386
+ background: var(--side-ground);
4387
+ }
4388
+ .ez-side-grip {
4389
+ position: fixed;
4390
+ top: 0;
4391
+ left: var(--sidebar-width);
4392
+ right: 0;
4393
+ height: var(--pane-inset);
4394
+ -webkit-app-region: drag;
4395
+ }
4396
+ html:has(.ez-side) body {
4397
+ isolation: isolate;
4398
+ }
4399
+ html:has(.ez-side) body::before {
4400
+ content: "";
4401
+ position: fixed;
4402
+ inset: 0;
4403
+ z-index: -1;
4404
+ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncG type='linear' slope='1.6' intercept='-0.3'/%3E%3CfeFuncB type='linear' slope='1.6' intercept='-0.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
4405
+ opacity: 0.7;
4406
+ mix-blend-mode: overlay;
4407
+ pointer-events: none;
4408
+ }
4409
+ html:has(.ez-side) body::after {
4410
+ content: "";
4411
+ position: fixed;
4412
+ inset: var(--pane-inset) var(--pane-inset) var(--pane-inset) var(--sidebar-width);
4413
+ z-index: -2;
4414
+ border-radius: var(--pane-radius);
4415
+ box-shadow:
4416
+ inset 0 0 0 1px oklch(0% 0 0 / 0.07),
4417
+ 0 0 0 1px oklch(0% 0 0 / 0.07),
4418
+ 0 1px 2px oklch(0% 0 0 / 0.05),
4419
+ 0 4px 16px oklch(0% 0 0 / 0.05);
4420
+ pointer-events: none;
4421
+ }
4422
+ .ez-side {
4423
+ display: flex;
4424
+ flex-direction: column;
4425
+ width: var(--sidebar-width);
4426
+ height: 100vh;
4427
+ user-select: none;
4428
+ }
4429
+ .ez-side[data-dragging] .ez-side-list {
4430
+ outline: 2px dashed var(--ink-ghost);
4431
+ outline-offset: -2px;
4432
+ border-radius: 9px;
4433
+ }
4434
+ .ez-side-top {
4435
+ display: flex;
4436
+ align-items: center;
4437
+ justify-content: flex-end;
4438
+ flex-shrink: 0;
4439
+ height: 42px;
4440
+ padding: 0 10px;
4441
+ -webkit-app-region: drag;
4442
+ }
4443
+ .ez-side-top > .ez-side-icon {
4444
+ margin-top: 4px;
4445
+ }
4446
+ .ez-side-top button {
4447
+ -webkit-app-region: no-drag;
4448
+ }
4449
+ .ez-side-section {
4450
+ display: flex;
4451
+ align-items: center;
4452
+ justify-content: space-between;
4453
+ padding: 6px 10px 4px 16px;
4454
+ }
4455
+ .ez-side-label {
4456
+ font-size: 11.5px;
4457
+ font-weight: 600;
4458
+ color: var(--muted-foreground);
4459
+ }
4460
+ .ez-side-icon {
4461
+ display: inline-flex;
4462
+ align-items: center;
4463
+ justify-content: center;
4464
+ flex-shrink: 0;
4465
+ width: 26px;
4466
+ height: 26px;
4467
+ border: none;
4468
+ border-radius: 6px;
4469
+ background: none;
4470
+ color: var(--muted-foreground);
4471
+ cursor: pointer;
4472
+ }
4473
+ .ez-side-icon:hover {
4474
+ background: oklch(0% 0 0 / 0.06);
4475
+ color: var(--foreground);
4476
+ }
4477
+ .ez-side-list {
4478
+ flex: 1;
4479
+ display: flex;
4480
+ flex-direction: column;
4481
+ gap: 1px;
4482
+ margin: 0;
4483
+ padding: 2px 8px 12px;
4484
+ overflow-y: auto;
4485
+ list-style: none;
4486
+ }
4487
+ .ez-side-row {
4488
+ position: relative;
4489
+ }
4490
+ .ez-side-open {
4491
+ display: flex;
4492
+ align-items: center;
4493
+ gap: 8px;
4494
+ width: 100%;
4495
+ height: 30px;
4496
+ padding: 0 10px 0 8px;
4497
+ border: none;
4498
+ border-radius: 7px;
4499
+ background: none;
4500
+ color: var(--foreground);
4501
+ font-family: inherit;
4502
+ font-size: 13px;
4503
+ text-align: left;
4504
+ cursor: default;
4505
+ }
4506
+ .ez-side-open > svg {
4507
+ flex-shrink: 0;
4508
+ color: var(--muted-foreground);
4509
+ }
4510
+ .ez-side-row:hover .ez-side-open {
4511
+ background: oklch(0% 0 0 / 0.045);
4512
+ }
4513
+ @font-face {
4514
+ font-family: "ez-cjk-semibold";
4515
+ src: local("PingFangSC-Semibold");
4516
+ unicode-range:
4517
+ U+2E80-9FFF,
4518
+ U+F900-FAFF,
4519
+ U+FE30-FE4F,
4520
+ U+FF00-FFEF;
4521
+ }
4522
+ @font-face {
4523
+ font-family: "ez-cjk-semibold";
4524
+ src: local("PingFangTC-Semibold");
4525
+ unicode-range:
4526
+ U+2E80-9FFF,
4527
+ U+F900-FAFF,
4528
+ U+FE30-FE4F,
4529
+ U+FF00-FFEF;
4530
+ }
4531
+ .ez-side-row[data-current] .ez-side-open {
4532
+ background: oklch(0% 0 0 / 0.085);
4533
+ font-family:
4534
+ -apple-system,
4535
+ BlinkMacSystemFont,
4536
+ "ez-cjk-semibold",
4537
+ sans-serif;
4538
+ font-variation-settings: "GRAD" 600;
4539
+ }
4540
+ .ez-side-row[data-current] .ez-side-open > svg {
4541
+ color: var(--foreground);
4542
+ }
4543
+ .ez-side-row[data-missing] .ez-side-open {
4544
+ color: var(--ink-faint);
4545
+ }
4546
+ .ez-side-name {
4547
+ flex: 1;
4548
+ min-width: 0;
4549
+ overflow: hidden;
4550
+ text-overflow: ellipsis;
4551
+ white-space: nowrap;
4552
+ }
4553
+ .ez-side-actions {
4554
+ position: absolute;
4555
+ top: 2px;
4556
+ right: 3px;
4557
+ display: none;
4558
+ gap: 1px;
4559
+ }
4560
+ .ez-side-row:hover .ez-side-actions {
4561
+ display: flex;
4562
+ }
4563
+ .ez-side-agent {
4564
+ flex-shrink: 0;
4565
+ width: 6px;
4566
+ height: 6px;
4567
+ border-radius: 50%;
4568
+ background: oklch(70% 0.16 70);
4569
+ }
4570
+ .ez-side-agent[data-state=done] {
4571
+ background: oklch(62% 0.15 150);
4572
+ }
4573
+ .ez-side-row:hover .ez-side-agent {
4574
+ visibility: hidden;
4575
+ }
4576
+ .ez-side-row:hover .ez-side-open {
4577
+ padding-right: 32px;
4578
+ }
4579
+ .ez-side-row:hover:has(.ez-side-actions > :nth-child(2)) .ez-side-open {
4580
+ padding-right: 59px;
4581
+ }
4582
+ .ez-side-update {
4583
+ flex-shrink: 0;
4584
+ padding: 0 8px;
4585
+ }
4586
+ .ez-side-update[hidden] {
4587
+ display: none;
4588
+ }
4589
+ .ez-side-update-btn {
4590
+ cursor: pointer;
4591
+ font-weight: 500;
4592
+ }
4593
+ .ez-side-update-btn:hover {
4594
+ background: oklch(0% 0 0 / 0.045);
4595
+ }
4596
+ .ez-side-update-btn > svg {
4597
+ flex-shrink: 0;
4598
+ color: #e56d41;
4599
+ }
4600
+ .ez-side-account {
4601
+ position: relative;
4602
+ flex-shrink: 0;
4603
+ padding: 4px 8px 10px;
4604
+ }
4605
+ .ez-side-account-btn {
4606
+ cursor: pointer;
4607
+ }
4608
+ .ez-side-account-btn:hover {
4609
+ background: oklch(0% 0 0 / 0.045);
4610
+ }
4611
+ .ez-side-account-btn > svg {
4612
+ flex-shrink: 0;
4613
+ color: var(--muted-foreground);
4614
+ }
4615
+ .ez-side-account .ez-avatar {
4616
+ flex-shrink: 0;
4617
+ width: 18px;
4618
+ height: 18px;
4619
+ font-size: 10px;
4620
+ }
4621
+ .ez-side-account .ez-menu {
4622
+ top: auto;
4623
+ bottom: calc(100% - 2px);
4624
+ left: 8px;
4625
+ right: 8px;
4626
+ min-width: 0;
4627
+ width: auto;
4628
+ }
4629
+ .ez-side-account[data-open] .ez-menu {
4630
+ display: flex;
4631
+ }
4632
+ .ez-side-empty {
4633
+ padding: 8px 8px 0;
4634
+ font-size: 12.5px;
4635
+ line-height: 1.5;
4636
+ color: var(--muted-foreground);
4637
+ }
4638
+ .ez-side-error {
4639
+ margin: 0;
4640
+ padding: 8px 16px 12px;
4641
+ font-size: 12px;
4642
+ color: oklch(45% 0.15 25);
4643
+ }
4644
+ .ez-side-error[hidden] {
4645
+ display: none;
4646
+ }
4647
+ .ez-empty {
4648
+ display: flex;
4649
+ flex-direction: column;
4650
+ align-items: center;
4651
+ justify-content: center;
4652
+ height: 100vh;
4653
+ padding: 0 32px;
4654
+ text-align: center;
4655
+ -webkit-app-region: drag;
4656
+ }
4657
+ .ez-empty button {
4658
+ -webkit-app-region: no-drag;
4659
+ }
4660
+ .ez-empty-mark {
4661
+ width: 40px;
4662
+ height: 40px;
4663
+ }
4664
+ .ez-empty-mark > svg {
4665
+ width: 100%;
4666
+ height: 100%;
4667
+ }
4668
+ .ez-empty-title {
4669
+ margin: 18px 0 0;
4670
+ font-size: 17px;
4671
+ font-weight: 600;
4672
+ }
4673
+ .ez-empty-lead {
4674
+ max-width: 340px;
4675
+ text-wrap: balance;
4676
+ margin: 6px 0 20px;
4677
+ font-size: 13.5px;
4678
+ line-height: 1.55;
4679
+ color: var(--muted-foreground);
4680
+ }
4681
+ .ez-empty-error {
4682
+ margin: 12px 0 0;
4683
+ font-size: 12.5px;
4684
+ color: oklch(45% 0.15 25);
4685
+ }
4686
+ .ez-home-add-go {
4687
+ height: 34px;
4688
+ padding: 0 14px;
4689
+ border: 1px solid var(--primary);
4690
+ border-radius: 8px;
4691
+ background: var(--primary);
4692
+ color: var(--primary-foreground);
4693
+ font-family: inherit;
4694
+ font-size: 13px;
4695
+ font-weight: 600;
4696
+ cursor: pointer;
4697
+ box-shadow: inset 0 1px 0 0 oklch(100% 0 0 / 0.14);
4698
+ }
4699
+ .ez-home-add-go:hover:not(:disabled) {
4700
+ opacity: 0.88;
4701
+ }
4702
+ .ez-home-pick {
4703
+ display: inline-flex;
4704
+ align-items: center;
4705
+ gap: 8px;
4706
+ }