@jay-framework/aiditor 0.19.1 → 0.19.4

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 (3) hide show
  1. package/dist/index.client.js +13 -7
  2. package/dist/pages/aiditor/page.css +1138 -229
  3. package/package.json +6 -6
package/dist/pages/aiditor/page.css CHANGED
@@ -30,13 +30,18 @@
30
30
  --harmony-sidebar-width: 52px;
31
31
  --harmony-global-bar-height: 52px;
32
32
  --harmony-secondary-bar-height: 44px;
33
- --harmony-font: 'Madefor', 'Helvetica Neue', Helvetica, Arial, sans-serif;
34
- --harmony-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
33
+ --harmony-font: "Madefor", "Helvetica Neue", Helvetica, Arial, sans-serif;
34
+ --harmony-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
35
35
  }
36
36
 
37
- *, *::before, *::after { box-sizing: border-box; }
37
+ *,
38
+ *::before,
39
+ *::after {
40
+ box-sizing: border-box;
41
+ }
38
42
 
39
- html, body {
43
+ html,
44
+ body {
40
45
  margin: 0;
41
46
  padding: 0;
42
47
  height: 100%;
@@ -56,10 +61,28 @@ html, body {
56
61
  background: var(--harmony-bg-workspace);
57
62
  gap: 10px;
58
63
  }
59
- .setup-title { margin: 0 0 4px; font-size: 28px; font-weight: 600; color: var(--harmony-text); }
60
- .setup-desc { margin: 0 0 20px; font-size: 14px; color: var(--harmony-text-secondary); }
61
- .setup-form { display: flex; flex-direction: column; gap: 6px; width: 360px; }
62
- .setup-label { font-size: 12px; color: var(--harmony-text-secondary); margin-top: 8px; }
64
+ .setup-title {
65
+ margin: 0 0 4px;
66
+ font-size: 28px;
67
+ font-weight: 600;
68
+ color: var(--harmony-text);
69
+ }
70
+ .setup-desc {
71
+ margin: 0 0 20px;
72
+ font-size: 14px;
73
+ color: var(--harmony-text-secondary);
74
+ }
75
+ .setup-form {
76
+ display: flex;
77
+ flex-direction: column;
78
+ gap: 6px;
79
+ width: 360px;
80
+ }
81
+ .setup-label {
82
+ font-size: 12px;
83
+ color: var(--harmony-text-secondary);
84
+ margin-top: 8px;
85
+ }
63
86
  .setup-input {
64
87
  background: var(--harmony-bg-surface);
65
88
  color: var(--harmony-text);
@@ -71,8 +94,15 @@ html, body {
71
94
  font-family: var(--harmony-mono);
72
95
  width: 100%;
73
96
  }
74
- .setup-input:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
75
- .setup-hint { margin: 2px 0 0; font-size: 11px; color: var(--harmony-text-muted); }
97
+ .setup-input:focus {
98
+ border-color: var(--harmony-primary);
99
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
100
+ }
101
+ .setup-hint {
102
+ margin: 2px 0 0;
103
+ font-size: 11px;
104
+ color: var(--harmony-text-muted);
105
+ }
76
106
  .setup-btn {
77
107
  margin-top: 16px;
78
108
  background: var(--harmony-primary);
@@ -85,9 +115,19 @@ html, body {
85
115
  cursor: pointer;
86
116
  align-self: flex-start;
87
117
  }
88
- .setup-btn:hover { background: var(--harmony-primary-hover); }
89
- .setup-btn:disabled { opacity: 0.45; cursor: not-allowed; }
90
- .bootstrap-msg { max-width: 420px; text-align: center; line-height: 1.45; color: var(--harmony-danger); }
118
+ .setup-btn:hover {
119
+ background: var(--harmony-primary-hover);
120
+ }
121
+ .setup-btn:disabled {
122
+ opacity: 0.45;
123
+ cursor: not-allowed;
124
+ }
125
+ .bootstrap-msg {
126
+ max-width: 420px;
127
+ text-align: center;
128
+ line-height: 1.45;
129
+ color: var(--harmony-danger);
130
+ }
91
131
 
92
132
  /* ── Root layout ── */
93
133
  .root {
@@ -169,8 +209,19 @@ html, body {
169
209
  background: var(--harmony-bg-subtle);
170
210
  border-bottom: 1px solid var(--harmony-border);
171
211
  }
172
- .canvas-chrome-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
173
- .canvas-chrome-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; }
212
+ .canvas-chrome-left {
213
+ display: flex;
214
+ align-items: center;
215
+ gap: 8px;
216
+ flex-shrink: 0;
217
+ }
218
+ .canvas-chrome-right {
219
+ display: flex;
220
+ align-items: center;
221
+ gap: 4px;
222
+ flex-shrink: 0;
223
+ margin-left: auto;
224
+ }
174
225
  .canvas-page-badge {
175
226
  font-size: 12px;
176
227
  font-weight: 600;
@@ -192,7 +243,9 @@ html, body {
192
243
  background: var(--harmony-bg-surface);
193
244
  border: 1px solid var(--harmony-border);
194
245
  border-radius: var(--harmony-radius-pill);
195
- box-shadow: 0 6px 28px rgba(22, 45, 61, 0.14), 0 2px 6px rgba(22, 45, 61, 0.06);
246
+ box-shadow:
247
+ 0 6px 28px rgba(22, 45, 61, 0.14),
248
+ 0 2px 6px rgba(22, 45, 61, 0.06);
196
249
  pointer-events: auto;
197
250
  }
198
251
  .annotate-dock-label {
@@ -224,7 +277,9 @@ html, body {
224
277
  min-width: 0;
225
278
  flex: 1;
226
279
  }
227
- .harmony-global-spacer { display: none; }
280
+ .harmony-global-spacer {
281
+ display: none;
282
+ }
228
283
  .harmony-global-right {
229
284
  display: flex;
230
285
  align-items: center;
@@ -258,7 +313,9 @@ html, body {
258
313
  flex-shrink: 0;
259
314
  font-family: var(--harmony-font);
260
315
  }
261
- .aiditor-logo-ai { color: var(--harmony-primary); }
316
+ .aiditor-logo-ai {
317
+ color: var(--harmony-primary);
318
+ }
262
319
 
263
320
  .aiditor-dropdown {
264
321
  min-width: 180px;
@@ -281,11 +338,31 @@ html, body {
281
338
  border-color: var(--harmony-primary);
282
339
  box-shadow: 0 0 0 3px var(--harmony-primary-soft);
283
340
  }
284
- .aiditor-dropdown option { background: #fff; color: var(--harmony-text); }
285
- .harmony-page-select { flex: 1; min-width: 160px; }
286
- .preview-path-select { flex: 1; min-width: 0; max-width: 400px; }
287
- .path-select-row { display: flex; align-items: center; gap: 8px; width: 100%; }
288
- .params-loading-hint { font-size: 11px; color: var(--harmony-text-muted); white-space: nowrap; flex-shrink: 0; }
341
+ .aiditor-dropdown option {
342
+ background: #fff;
343
+ color: var(--harmony-text);
344
+ }
345
+ .harmony-page-select {
346
+ flex: 1;
347
+ min-width: 160px;
348
+ }
349
+ .preview-path-select {
350
+ flex: 1;
351
+ min-width: 0;
352
+ max-width: 400px;
353
+ }
354
+ .path-select-row {
355
+ display: flex;
356
+ align-items: center;
357
+ gap: 8px;
358
+ width: 100%;
359
+ }
360
+ .params-loading-hint {
361
+ font-size: 11px;
362
+ color: var(--harmony-text-muted);
363
+ white-space: nowrap;
364
+ flex-shrink: 0;
365
+ }
289
366
 
290
367
  /* Harmony buttons */
291
368
  .harmony-btn-primary {
@@ -300,8 +377,13 @@ html, body {
300
377
  flex-shrink: 0;
301
378
  white-space: nowrap;
302
379
  }
303
- .harmony-btn-primary:hover { background: var(--harmony-primary-hover); }
304
- .harmony-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
380
+ .harmony-btn-primary:hover {
381
+ background: var(--harmony-primary-hover);
382
+ }
383
+ .harmony-btn-primary:disabled {
384
+ opacity: 0.5;
385
+ cursor: not-allowed;
386
+ }
305
387
 
306
388
  .harmony-btn-secondary {
307
389
  background: var(--harmony-bg-surface);
@@ -315,18 +397,39 @@ html, body {
315
397
  flex-shrink: 0;
316
398
  white-space: nowrap;
317
399
  }
318
- .harmony-btn-secondary:hover { background: var(--harmony-bg-hover); border-color: var(--harmony-border-strong); }
319
- .harmony-btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
400
+ .harmony-btn-secondary:hover {
401
+ background: var(--harmony-bg-hover);
402
+ border-color: var(--harmony-border-strong);
403
+ }
404
+ .harmony-btn-secondary:disabled {
405
+ opacity: 0.5;
406
+ cursor: not-allowed;
407
+ }
320
408
 
321
- .add-page-open-btn { /* inherits harmony-btn-primary */ }
322
- .add-page-from-brief-btn { /* inherits harmony-btn-secondary */ }
323
- .project-settings-btn { /* inherits harmony-btn-secondary */ }
409
+ .add-page-open-btn {
410
+ /* inherits harmony-btn-primary */
411
+ }
412
+ .add-page-from-brief-btn {
413
+ /* inherits harmony-btn-secondary */
414
+ }
415
+ .project-settings-btn {
416
+ /* inherits harmony-btn-secondary */
417
+ }
324
418
 
325
419
  .harmony-editor-body,
326
420
  .harmony-sidebar,
327
- .harmony-secondary-bar { display: none !important; }
328
- .harmony-workspace { display: contents; }
329
- .preview-visual-tools { display: flex; flex-shrink: 0; gap: 2px; align-items: center; }
421
+ .harmony-secondary-bar {
422
+ display: none !important;
423
+ }
424
+ .harmony-workspace {
425
+ display: contents;
426
+ }
427
+ .preview-visual-tools {
428
+ display: flex;
429
+ flex-shrink: 0;
430
+ gap: 2px;
431
+ align-items: center;
432
+ }
330
433
 
331
434
  .visual-tool-btn {
332
435
  background: transparent;
@@ -343,7 +446,10 @@ html, body {
343
446
  min-width: 34px;
344
447
  min-height: 34px;
345
448
  }
346
- .visual-tool-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
449
+ .visual-tool-btn:hover {
450
+ background: var(--harmony-bg-hover);
451
+ color: var(--harmony-text);
452
+ }
347
453
  .visual-tool-on {
348
454
  background: var(--harmony-primary-soft) !important;
349
455
  color: var(--harmony-primary) !important;
@@ -389,7 +495,12 @@ html, body {
389
495
  background: var(--harmony-bg-subtle);
390
496
  border-bottom: 1px solid var(--harmony-border);
391
497
  }
392
- .harmony-canvas-chrome-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
498
+ .harmony-canvas-chrome-left {
499
+ display: flex;
500
+ align-items: center;
501
+ gap: 8px;
502
+ flex-shrink: 0;
503
+ }
393
504
  .harmony-canvas-page-badge {
394
505
  font-size: 12px;
395
506
  font-weight: 600;
@@ -399,8 +510,14 @@ html, body {
399
510
  border-radius: var(--harmony-radius-sm);
400
511
  padding: 4px 10px;
401
512
  }
402
- .harmony-url-bar-wrap { flex: 1; min-width: 0; }
403
- .url-bar-wrap { flex: 1; min-width: 200px; }
513
+ .harmony-url-bar-wrap {
514
+ flex: 1;
515
+ min-width: 0;
516
+ }
517
+ .url-bar-wrap {
518
+ flex: 1;
519
+ min-width: 200px;
520
+ }
404
521
  .url-bar {
405
522
  font-size: 12px;
406
523
  font-family: var(--harmony-mono);
@@ -412,7 +529,10 @@ html, body {
412
529
  word-break: break-all;
413
530
  }
414
531
 
415
- .preview-loading { font-size: 13px; color: var(--harmony-text-muted); }
532
+ .preview-loading {
533
+ font-size: 13px;
534
+ color: var(--harmony-text-muted);
535
+ }
416
536
  .preview-error {
417
537
  font-size: 13px;
418
538
  color: var(--harmony-danger);
@@ -433,14 +553,36 @@ html, body {
433
553
  position: relative;
434
554
  isolation: isolate;
435
555
  }
436
- .harmony-canvas-content { flex: 1; }
437
- .preview-frame { width: 100%; height: 100%; min-height: 360px; border: none; display: block; }
438
- .preview-frame-tablet { align-self: center; width: 768px; max-width: 100%; }
439
- .preview-frame-mobile { align-self: center; width: 390px; max-width: 100%; }
556
+ .harmony-canvas-content {
557
+ flex: 1;
558
+ }
559
+ .preview-frame {
560
+ width: 100%;
561
+ height: 100%;
562
+ min-height: 360px;
563
+ border: none;
564
+ display: block;
565
+ }
566
+ .preview-frame-tablet {
567
+ align-self: center;
568
+ width: 768px;
569
+ max-width: 100%;
570
+ }
571
+ .preview-frame-mobile {
572
+ align-self: center;
573
+ width: 390px;
574
+ max-width: 100%;
575
+ }
440
576
 
441
577
  /* ── Visual annotations ── */
442
- .visual-overlay { position: absolute; inset: 0; z-index: 2; }
443
- .visual-overlay-none { pointer-events: none; }
578
+ .visual-overlay {
579
+ position: absolute;
580
+ inset: 0;
581
+ z-index: 2;
582
+ }
583
+ .visual-overlay-none {
584
+ pointer-events: none;
585
+ }
444
586
  .point-marker {
445
587
  position: absolute;
446
588
  width: 14px;
@@ -490,7 +632,11 @@ html, body {
490
632
  pointer-events: none;
491
633
  z-index: 1;
492
634
  }
493
- .area-rect-draft { border-style: solid; border-color: var(--harmony-primary); background: var(--harmony-primary-soft); }
635
+ .area-rect-draft {
636
+ border-style: solid;
637
+ border-color: var(--harmony-primary);
638
+ background: var(--harmony-primary-soft);
639
+ }
494
640
  .arrow-pending-dot {
495
641
  position: absolute;
496
642
  width: 10px;
@@ -502,8 +648,18 @@ html, body {
502
648
  box-shadow: var(--harmony-shadow-sm);
503
649
  pointer-events: none;
504
650
  }
505
- .arrow-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
506
- .arrow-svg line { stroke: var(--harmony-primary); stroke-width: 2; marker-end: url(#aiditor-arrowhead); }
651
+ .arrow-svg {
652
+ position: absolute;
653
+ inset: 0;
654
+ width: 100%;
655
+ height: 100%;
656
+ pointer-events: none;
657
+ }
658
+ .arrow-svg line {
659
+ stroke: var(--harmony-primary);
660
+ stroke-width: 2;
661
+ marker-end: url(#aiditor-arrowhead);
662
+ }
507
663
  .arrow-end-pin {
508
664
  position: absolute;
509
665
  width: 22px;
@@ -522,7 +678,12 @@ html, body {
522
678
  pointer-events: none;
523
679
  z-index: 3;
524
680
  }
525
- .visual-popovers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
681
+ .visual-popovers {
682
+ position: absolute;
683
+ inset: 0;
684
+ z-index: 4;
685
+ pointer-events: none;
686
+ }
526
687
  .visual-popover {
527
688
  position: absolute;
528
689
  width: 280px;
@@ -543,12 +704,31 @@ html, body {
543
704
  overflow-x: hidden;
544
705
  min-height: 0;
545
706
  }
546
- .visual-popover-flip-x { transform: translate(calc(-100% - 14px), 10px); }
547
- .visual-popover-flip-y { transform: translate(10px, calc(-100% - 14px)); }
548
- .visual-popover-flip-x.visual-popover-flip-y { transform: translate(calc(-100% - 14px), calc(-100% - 14px)); }
549
- .visual-annotation-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
550
- .visual-annotation-kind { font-size: 11px; color: var(--harmony-primary); font-weight: 600; }
551
- .visual-annotation-actions { display: flex; gap: 6px; flex-shrink: 0; }
707
+ .visual-popover-flip-x {
708
+ transform: translate(calc(-100% - 14px), 10px);
709
+ }
710
+ .visual-popover-flip-y {
711
+ transform: translate(10px, calc(-100% - 14px));
712
+ }
713
+ .visual-popover-flip-x.visual-popover-flip-y {
714
+ transform: translate(calc(-100% - 14px), calc(-100% - 14px));
715
+ }
716
+ .visual-annotation-row-head {
717
+ display: flex;
718
+ align-items: center;
719
+ justify-content: space-between;
720
+ gap: 8px;
721
+ }
722
+ .visual-annotation-kind {
723
+ font-size: 11px;
724
+ color: var(--harmony-primary);
725
+ font-weight: 600;
726
+ }
727
+ .visual-annotation-actions {
728
+ display: flex;
729
+ gap: 6px;
730
+ flex-shrink: 0;
731
+ }
552
732
  .visual-annotation-remove {
553
733
  background: transparent;
554
734
  color: var(--harmony-text-muted);
@@ -558,7 +738,10 @@ html, body {
558
738
  font-size: 11px;
559
739
  cursor: pointer;
560
740
  }
561
- .visual-annotation-remove:hover { color: var(--harmony-danger); border-color: var(--harmony-danger); }
741
+ .visual-annotation-remove:hover {
742
+ color: var(--harmony-danger);
743
+ border-color: var(--harmony-danger);
744
+ }
562
745
  .visual-annotation-run {
563
746
  background: var(--harmony-primary);
564
747
  color: #fff;
@@ -569,8 +752,13 @@ html, body {
569
752
  font-weight: 600;
570
753
  cursor: pointer;
571
754
  }
572
- .visual-annotation-run:hover { background: var(--harmony-primary-hover); }
573
- .visual-annotation-run:disabled { opacity: 0.45; cursor: not-allowed; }
755
+ .visual-annotation-run:hover {
756
+ background: var(--harmony-primary-hover);
757
+ }
758
+ .visual-annotation-run:disabled {
759
+ opacity: 0.45;
760
+ cursor: not-allowed;
761
+ }
574
762
  .visual-annotation-instruction {
575
763
  width: 100%;
576
764
  min-height: 48px;
@@ -584,9 +772,22 @@ html, body {
584
772
  font-family: inherit;
585
773
  outline: none;
586
774
  }
587
- .visual-annotation-instruction:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
588
- .visual-annotation-files { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
589
- .visual-attach-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
775
+ .visual-annotation-instruction:focus {
776
+ border-color: var(--harmony-primary);
777
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
778
+ }
779
+ .visual-annotation-files {
780
+ display: flex;
781
+ flex-direction: column;
782
+ gap: 6px;
783
+ margin-top: 4px;
784
+ }
785
+ .visual-attach-row {
786
+ display: flex;
787
+ flex-wrap: wrap;
788
+ align-items: center;
789
+ gap: 6px;
790
+ }
590
791
  .visual-attach-btn {
591
792
  background: var(--harmony-bg-subtle);
592
793
  color: var(--harmony-text-secondary);
@@ -596,8 +797,15 @@ html, body {
596
797
  font-size: 11px;
597
798
  cursor: pointer;
598
799
  }
599
- .visual-attach-btn:hover { border-color: var(--harmony-primary); color: var(--harmony-primary); }
600
- .visual-attachment-chips { display: flex; flex-wrap: wrap; gap: 6px; }
800
+ .visual-attach-btn:hover {
801
+ border-color: var(--harmony-primary);
802
+ color: var(--harmony-primary);
803
+ }
804
+ .visual-attachment-chips {
805
+ display: flex;
806
+ flex-wrap: wrap;
807
+ gap: 6px;
808
+ }
601
809
  .visual-attachment-chip {
602
810
  display: inline-flex;
603
811
  align-items: center;
@@ -610,18 +818,68 @@ html, body {
610
818
  font-size: 11px;
611
819
  color: var(--harmony-text-secondary);
612
820
  }
613
- .visual-attachment-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex-shrink: 0; background: var(--harmony-bg-hover); }
614
- .visual-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
615
- .visual-attachment-remove-file { background: transparent; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
616
- .visual-attachment-remove-file:hover { color: var(--harmony-danger); }
617
- .file-input-hidden { display: none; }
618
- .visual-error { font-size: 12px; color: var(--harmony-danger); }
619
- .visual-submit-error { font-size: 12px; color: var(--harmony-danger); margin: 0; padding: 0 2px; }
620
- .visual-submit-progress { font-size: 12px; color: var(--harmony-primary); margin: 0; padding: 0 2px; }
821
+ .visual-attachment-thumb {
822
+ width: 36px;
823
+ height: 36px;
824
+ object-fit: cover;
825
+ border-radius: 4px;
826
+ flex-shrink: 0;
827
+ background: var(--harmony-bg-hover);
828
+ }
829
+ .visual-attachment-name {
830
+ overflow: hidden;
831
+ text-overflow: ellipsis;
832
+ white-space: nowrap;
833
+ max-width: 160px;
834
+ }
835
+ .visual-attachment-remove-file {
836
+ background: transparent;
837
+ border: none;
838
+ color: var(--harmony-text-muted);
839
+ cursor: pointer;
840
+ font-size: 14px;
841
+ line-height: 1;
842
+ padding: 0 4px;
843
+ }
844
+ .visual-attachment-remove-file:hover {
845
+ color: var(--harmony-danger);
846
+ }
847
+ .file-input-hidden {
848
+ display: none;
849
+ }
850
+ .visual-error {
851
+ font-size: 12px;
852
+ color: var(--harmony-danger);
853
+ }
854
+ .visual-submit-error {
855
+ font-size: 12px;
856
+ color: var(--harmony-danger);
857
+ margin: 0;
858
+ padding: 0 2px;
859
+ }
860
+ .visual-submit-progress {
861
+ font-size: 12px;
862
+ color: var(--harmony-primary);
863
+ margin: 0;
864
+ padding: 0 2px;
865
+ }
621
866
 
622
- .video-record-btn { border-color: var(--harmony-primary) !important; color: var(--harmony-primary) !important; }
623
- .video-record-active { animation: pulse-rec 1.2s ease-in-out infinite; }
624
- @keyframes pulse-rec { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
867
+ .video-record-btn {
868
+ border-color: var(--harmony-primary) !important;
869
+ color: var(--harmony-primary) !important;
870
+ }
871
+ .video-record-active {
872
+ animation: pulse-rec 1.2s ease-in-out infinite;
873
+ }
874
+ @keyframes pulse-rec {
875
+ 0%,
876
+ 100% {
877
+ opacity: 1;
878
+ }
879
+ 50% {
880
+ opacity: 0.55;
881
+ }
882
+ }
625
883
 
626
884
  /* ── Bottom agent panel ── */
627
885
  .bottom-panel {
@@ -635,9 +893,20 @@ html, body {
635
893
  height: 200px;
636
894
  box-shadow: 0 -2px 12px rgba(22, 45, 61, 0.06);
637
895
  }
638
- .bottom-panel-collapsed { max-height: 32px; overflow: hidden; }
639
- .bottom-panel-resize { height: 4px; cursor: ns-resize; background: transparent; flex-shrink: 0; }
640
- .bottom-panel-resize:hover, .bottom-panel-resize:active { background: var(--harmony-primary); }
896
+ .bottom-panel-collapsed {
897
+ max-height: 32px;
898
+ overflow: hidden;
899
+ }
900
+ .bottom-panel-resize {
901
+ height: 4px;
902
+ cursor: ns-resize;
903
+ background: transparent;
904
+ flex-shrink: 0;
905
+ }
906
+ .bottom-panel-resize:hover,
907
+ .bottom-panel-resize:active {
908
+ background: var(--harmony-primary);
909
+ }
641
910
  .bottom-panel-header {
642
911
  display: flex;
643
912
  align-items: center;
@@ -664,12 +933,41 @@ html, body {
664
933
  animation: pulse-dot 1.2s ease-in-out infinite;
665
934
  margin-left: 4px;
666
935
  }
667
- @keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
668
- .bottom-panel-toggle { background: none; border: none; color: var(--harmony-text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; line-height: 1; }
669
- .bottom-panel-toggle:hover { color: var(--harmony-text); }
670
- .bottom-panel-spacer { flex: 1; }
671
- .bottom-panel-clear { background: none; border: none; color: var(--harmony-text-muted); font-size: 11px; cursor: pointer; padding: 2px 6px; }
672
- .bottom-panel-clear:hover { color: var(--harmony-text); }
936
+ @keyframes pulse-dot {
937
+ 0%,
938
+ 100% {
939
+ opacity: 1;
940
+ }
941
+ 50% {
942
+ opacity: 0.3;
943
+ }
944
+ }
945
+ .bottom-panel-toggle {
946
+ background: none;
947
+ border: none;
948
+ color: var(--harmony-text-muted);
949
+ font-size: 14px;
950
+ cursor: pointer;
951
+ padding: 0 4px;
952
+ line-height: 1;
953
+ }
954
+ .bottom-panel-toggle:hover {
955
+ color: var(--harmony-text);
956
+ }
957
+ .bottom-panel-spacer {
958
+ flex: 1;
959
+ }
960
+ .bottom-panel-clear {
961
+ background: none;
962
+ border: none;
963
+ color: var(--harmony-text-muted);
964
+ font-size: 11px;
965
+ cursor: pointer;
966
+ padding: 2px 6px;
967
+ }
968
+ .bottom-panel-clear:hover {
969
+ color: var(--harmony-text);
970
+ }
673
971
  .output-panel {
674
972
  overflow-y: auto;
675
973
  padding: 8px 16px;
@@ -682,14 +980,32 @@ html, body {
682
980
  min-height: 0;
683
981
  background: var(--harmony-bg-surface);
684
982
  }
685
- .chunk { color: var(--harmony-text); }
686
- .chunk-status { color: var(--harmony-text-muted); font-style: italic; }
687
- .chunk-tool { color: var(--harmony-primary); }
688
- .chunk-error { color: var(--harmony-danger); }
689
- .chunk-thinking { color: var(--harmony-text-muted); font-style: italic; }
690
- .chunk-result { color: var(--harmony-success); }
691
- .chunk-user { color: var(--harmony-text); }
692
- .chunk-user-prefix { color: var(--harmony-text-muted); }
983
+ .chunk {
984
+ color: var(--harmony-text);
985
+ }
986
+ .chunk-status {
987
+ color: var(--harmony-text-muted);
988
+ font-style: italic;
989
+ }
990
+ .chunk-tool {
991
+ color: var(--harmony-primary);
992
+ }
993
+ .chunk-error {
994
+ color: var(--harmony-danger);
995
+ }
996
+ .chunk-thinking {
997
+ color: var(--harmony-text-muted);
998
+ font-style: italic;
999
+ }
1000
+ .chunk-result {
1001
+ color: var(--harmony-success);
1002
+ }
1003
+ .chunk-user {
1004
+ color: var(--harmony-text);
1005
+ }
1006
+ .chunk-user-prefix {
1007
+ color: var(--harmony-text-muted);
1008
+ }
693
1009
  .agent-chat-row {
694
1010
  display: flex;
695
1011
  gap: 8px;
@@ -713,8 +1029,15 @@ html, body {
713
1029
  font-size: 12px;
714
1030
  line-height: 1.4;
715
1031
  }
716
- .agent-chat-input:focus { outline: none; border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
717
- .agent-chat-input:disabled { opacity: 0.6; cursor: not-allowed; }
1032
+ .agent-chat-input:focus {
1033
+ outline: none;
1034
+ border-color: var(--harmony-primary);
1035
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
1036
+ }
1037
+ .agent-chat-input:disabled {
1038
+ opacity: 0.6;
1039
+ cursor: not-allowed;
1040
+ }
718
1041
  .agent-chat-send {
719
1042
  background: var(--harmony-primary);
720
1043
  color: #fff;
@@ -727,15 +1050,30 @@ html, body {
727
1050
  flex-shrink: 0;
728
1051
  height: 32px;
729
1052
  }
730
- .agent-chat-send:hover:not(:disabled) { background: var(--harmony-primary-hover); }
731
- .agent-chat-send:disabled { opacity: 0.45; cursor: not-allowed; }
1053
+ .agent-chat-send:hover:not(:disabled) {
1054
+ background: var(--harmony-primary-hover);
1055
+ }
1056
+ .agent-chat-send:disabled {
1057
+ opacity: 0.45;
1058
+ cursor: not-allowed;
1059
+ }
732
1060
 
733
- .file-link { color: var(--harmony-primary); text-decoration: underline; cursor: pointer; }
734
- .file-link:hover { color: var(--harmony-primary-hover); }
735
- .chunk-tool-prefix { color: var(--harmony-primary); }
1061
+ .file-link {
1062
+ color: var(--harmony-primary);
1063
+ text-decoration: underline;
1064
+ cursor: pointer;
1065
+ }
1066
+ .file-link:hover {
1067
+ color: var(--harmony-primary-hover);
1068
+ }
1069
+ .chunk-tool-prefix {
1070
+ color: var(--harmony-primary);
1071
+ }
736
1072
 
737
1073
  /* ── Result banner ── */
738
- .add-page-result-slot { flex-shrink: 0; }
1074
+ .add-page-result-slot {
1075
+ flex-shrink: 0;
1076
+ }
739
1077
  .add-page-result-banner {
740
1078
  margin: 0 24px 8px;
741
1079
  padding: 10px 14px;
@@ -746,9 +1084,21 @@ html, body {
746
1084
  align-items: center;
747
1085
  gap: 10px;
748
1086
  }
749
- .add-page-result-success { background: var(--harmony-success-soft); border: 1px solid rgba(0, 168, 98, 0.25); color: var(--harmony-success); }
750
- .add-page-result-failed { background: var(--harmony-danger-soft); border: 1px solid rgba(232, 76, 61, 0.25); color: var(--harmony-danger); }
751
- .add-page-result-actions { display: flex; gap: 8px; margin-left: auto; }
1087
+ .add-page-result-success {
1088
+ background: var(--harmony-success-soft);
1089
+ border: 1px solid rgba(0, 168, 98, 0.25);
1090
+ color: var(--harmony-success);
1091
+ }
1092
+ .add-page-result-failed {
1093
+ background: var(--harmony-danger-soft);
1094
+ border: 1px solid rgba(232, 76, 61, 0.25);
1095
+ color: var(--harmony-danger);
1096
+ }
1097
+ .add-page-result-actions {
1098
+ display: flex;
1099
+ gap: 8px;
1100
+ margin-left: auto;
1101
+ }
752
1102
  .add-page-result-btn {
753
1103
  background: var(--harmony-bg-surface);
754
1104
  color: var(--harmony-text-secondary);
@@ -758,7 +1108,10 @@ html, body {
758
1108
  font-size: 11px;
759
1109
  cursor: pointer;
760
1110
  }
761
- .add-page-result-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
1111
+ .add-page-result-btn:hover {
1112
+ background: var(--harmony-bg-hover);
1113
+ color: var(--harmony-text);
1114
+ }
762
1115
 
763
1116
  /* ── Modals & overlays ── */
764
1117
  .file-preview-overlay {
@@ -801,15 +1154,49 @@ html, body {
801
1154
  white-space: nowrap;
802
1155
  flex: 1;
803
1156
  }
804
- .file-preview-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; flex-shrink: 0; }
805
- .file-preview-close:hover { color: var(--harmony-text); }
806
- .file-preview-body { flex: 1; overflow: auto; padding: 16px; min-height: 0; }
807
- .file-preview-text { font-family: var(--harmony-mono); font-size: 12px; line-height: 1.5; color: var(--harmony-text); white-space: pre-wrap; word-break: break-word; margin: 0; }
808
- .file-preview-image { max-width: 100%; max-height: 70vh; display: block; margin: 0 auto; }
809
- .file-preview-loading { color: var(--harmony-text-muted); font-style: italic; font-size: 12px; }
810
-
811
- .video-review-overlay, .snapshot-overlay {
812
- position: fixed;
1157
+ .file-preview-close {
1158
+ background: none;
1159
+ border: none;
1160
+ color: var(--harmony-text-muted);
1161
+ font-size: 18px;
1162
+ cursor: pointer;
1163
+ padding: 0 4px;
1164
+ line-height: 1;
1165
+ flex-shrink: 0;
1166
+ }
1167
+ .file-preview-close:hover {
1168
+ color: var(--harmony-text);
1169
+ }
1170
+ .file-preview-body {
1171
+ flex: 1;
1172
+ overflow: auto;
1173
+ padding: 16px;
1174
+ min-height: 0;
1175
+ }
1176
+ .file-preview-text {
1177
+ font-family: var(--harmony-mono);
1178
+ font-size: 12px;
1179
+ line-height: 1.5;
1180
+ color: var(--harmony-text);
1181
+ white-space: pre-wrap;
1182
+ word-break: break-word;
1183
+ margin: 0;
1184
+ }
1185
+ .file-preview-image {
1186
+ max-width: 100%;
1187
+ max-height: 70vh;
1188
+ display: block;
1189
+ margin: 0 auto;
1190
+ }
1191
+ .file-preview-loading {
1192
+ color: var(--harmony-text-muted);
1193
+ font-style: italic;
1194
+ font-size: 12px;
1195
+ }
1196
+
1197
+ .video-review-overlay,
1198
+ .snapshot-overlay {
1199
+ position: fixed;
813
1200
  inset: 0;
814
1201
  z-index: 200;
815
1202
  background: rgba(22, 45, 61, 0.45);
@@ -819,7 +1206,8 @@ html, body {
819
1206
  padding: 20px;
820
1207
  box-sizing: border-box;
821
1208
  }
822
- .video-review-panel, .snapshot-panel {
1209
+ .video-review-panel,
1210
+ .snapshot-panel {
823
1211
  background: var(--harmony-bg-surface);
824
1212
  border: 1px solid var(--harmony-border);
825
1213
  border-radius: var(--harmony-radius-lg);
@@ -832,12 +1220,42 @@ html, body {
832
1220
  overflow: auto;
833
1221
  box-shadow: var(--harmony-shadow-lg);
834
1222
  }
835
- .snapshot-panel { width: min(1200px, 96vw); overflow: hidden; }
836
- .video-review-header, .snapshot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
837
- .video-review-title, .snapshot-title { font-size: 15px; font-weight: 600; color: var(--harmony-text); margin: 0; }
838
- .video-review-meta { font-size: 12px; color: var(--harmony-text-muted); }
839
- .video-review-tools, .snapshot-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
840
- .video-review-transport { display: flex; align-items: center; gap: 10px; width: 100%; }
1223
+ .snapshot-panel {
1224
+ width: min(1200px, 96vw);
1225
+ overflow: hidden;
1226
+ }
1227
+ .video-review-header,
1228
+ .snapshot-header {
1229
+ display: flex;
1230
+ justify-content: space-between;
1231
+ align-items: center;
1232
+ gap: 12px;
1233
+ flex-wrap: wrap;
1234
+ }
1235
+ .video-review-title,
1236
+ .snapshot-title {
1237
+ font-size: 15px;
1238
+ font-weight: 600;
1239
+ color: var(--harmony-text);
1240
+ margin: 0;
1241
+ }
1242
+ .video-review-meta {
1243
+ font-size: 12px;
1244
+ color: var(--harmony-text-muted);
1245
+ }
1246
+ .video-review-tools,
1247
+ .snapshot-tools {
1248
+ display: flex;
1249
+ flex-wrap: wrap;
1250
+ gap: 4px;
1251
+ align-items: center;
1252
+ }
1253
+ .video-review-transport {
1254
+ display: flex;
1255
+ align-items: center;
1256
+ gap: 10px;
1257
+ width: 100%;
1258
+ }
841
1259
  .video-play-pause-btn {
842
1260
  flex-shrink: 0;
843
1261
  width: 40px;
@@ -850,10 +1268,26 @@ html, body {
850
1268
  line-height: 1;
851
1269
  cursor: pointer;
852
1270
  }
853
- .video-play-pause-btn:hover { background: var(--harmony-bg-hover); border-color: var(--harmony-primary); }
854
- .video-timeline-wrap { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
855
- .video-timeline { width: 100%; accent-color: var(--harmony-primary); }
856
- .video-timeline-markers { position: relative; height: 10px; margin: 0 2px; }
1271
+ .video-play-pause-btn:hover {
1272
+ background: var(--harmony-bg-hover);
1273
+ border-color: var(--harmony-primary);
1274
+ }
1275
+ .video-timeline-wrap {
1276
+ display: flex;
1277
+ flex-direction: column;
1278
+ gap: 6px;
1279
+ flex: 1;
1280
+ min-width: 0;
1281
+ }
1282
+ .video-timeline {
1283
+ width: 100%;
1284
+ accent-color: var(--harmony-primary);
1285
+ }
1286
+ .video-timeline-markers {
1287
+ position: relative;
1288
+ height: 10px;
1289
+ margin: 0 2px;
1290
+ }
857
1291
  .video-timeline-marker {
858
1292
  position: absolute;
859
1293
  top: 0;
@@ -865,8 +1299,16 @@ html, body {
865
1299
  transform: translateX(-50%);
866
1300
  cursor: pointer;
867
1301
  }
868
- .video-review-actions, .snapshot-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
869
- .video-review-secondary, .snapshot-secondary {
1302
+ .video-review-actions,
1303
+ .snapshot-footer {
1304
+ display: flex;
1305
+ gap: 10px;
1306
+ justify-content: flex-end;
1307
+ flex-wrap: wrap;
1308
+ margin-top: 4px;
1309
+ }
1310
+ .video-review-secondary,
1311
+ .snapshot-secondary {
870
1312
  background: var(--harmony-bg-surface);
871
1313
  color: var(--harmony-text);
872
1314
  border: 1px solid var(--harmony-border);
@@ -875,8 +1317,12 @@ html, body {
875
1317
  font-size: 13px;
876
1318
  cursor: pointer;
877
1319
  }
878
- .video-review-secondary:hover, .snapshot-secondary:hover { background: var(--harmony-bg-hover); }
879
- .video-review-primary, .snapshot-primary {
1320
+ .video-review-secondary:hover,
1321
+ .snapshot-secondary:hover {
1322
+ background: var(--harmony-bg-hover);
1323
+ }
1324
+ .video-review-primary,
1325
+ .snapshot-primary {
880
1326
  background: var(--harmony-primary);
881
1327
  color: #fff;
882
1328
  border: none;
@@ -886,11 +1332,34 @@ html, body {
886
1332
  font-weight: 600;
887
1333
  cursor: pointer;
888
1334
  }
889
- .video-review-primary:hover, .snapshot-primary:hover { background: var(--harmony-primary-hover); }
890
- .video-review-primary:disabled, .snapshot-primary:disabled { opacity: 0.45; cursor: not-allowed; }
891
- .snapshot-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1; }
892
- .snapshot-close:hover { color: var(--harmony-text); }
893
- .snapshot-body { display: flex; gap: 14px; flex: 1; min-height: 0; overflow: hidden; }
1335
+ .video-review-primary:hover,
1336
+ .snapshot-primary:hover {
1337
+ background: var(--harmony-primary-hover);
1338
+ }
1339
+ .video-review-primary:disabled,
1340
+ .snapshot-primary:disabled {
1341
+ opacity: 0.45;
1342
+ cursor: not-allowed;
1343
+ }
1344
+ .snapshot-close {
1345
+ background: none;
1346
+ border: none;
1347
+ color: var(--harmony-text-muted);
1348
+ font-size: 18px;
1349
+ cursor: pointer;
1350
+ padding: 0 4px;
1351
+ line-height: 1;
1352
+ }
1353
+ .snapshot-close:hover {
1354
+ color: var(--harmony-text);
1355
+ }
1356
+ .snapshot-body {
1357
+ display: flex;
1358
+ gap: 14px;
1359
+ flex: 1;
1360
+ min-height: 0;
1361
+ overflow: hidden;
1362
+ }
894
1363
  .snapshot-capture-area {
895
1364
  flex: 2;
896
1365
  min-width: 0;
@@ -903,10 +1372,31 @@ html, body {
903
1372
  overflow: hidden;
904
1373
  border: 1px solid var(--harmony-border);
905
1374
  }
906
- .snapshot-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
907
- .snapshot-img-overlay { position: absolute; inset: 0; z-index: 2; }
908
- .snapshot-img-overlay-none { pointer-events: none; }
909
- .snapshot-annotations-panel { flex: 1; min-width: 220px; max-width: 340px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
1375
+ .snapshot-img {
1376
+ max-width: 100%;
1377
+ max-height: 100%;
1378
+ object-fit: contain;
1379
+ display: block;
1380
+ user-select: none;
1381
+ -webkit-user-drag: none;
1382
+ }
1383
+ .snapshot-img-overlay {
1384
+ position: absolute;
1385
+ inset: 0;
1386
+ z-index: 2;
1387
+ }
1388
+ .snapshot-img-overlay-none {
1389
+ pointer-events: none;
1390
+ }
1391
+ .snapshot-annotations-panel {
1392
+ flex: 1;
1393
+ min-width: 220px;
1394
+ max-width: 340px;
1395
+ display: flex;
1396
+ flex-direction: column;
1397
+ gap: 8px;
1398
+ overflow-y: auto;
1399
+ }
910
1400
  .snapshot-annotation-card {
911
1401
  background: var(--harmony-bg-subtle);
912
1402
  border: 1px solid var(--harmony-border);
@@ -916,8 +1406,17 @@ html, body {
916
1406
  flex-direction: column;
917
1407
  gap: 6px;
918
1408
  }
919
- .snapshot-annotation-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
920
- .snapshot-annotation-kind { font-size: 11px; color: var(--harmony-primary); font-weight: 600; }
1409
+ .snapshot-annotation-card-head {
1410
+ display: flex;
1411
+ align-items: center;
1412
+ justify-content: space-between;
1413
+ gap: 8px;
1414
+ }
1415
+ .snapshot-annotation-kind {
1416
+ font-size: 11px;
1417
+ color: var(--harmony-primary);
1418
+ font-weight: 600;
1419
+ }
921
1420
  .snapshot-annotation-remove {
922
1421
  background: transparent;
923
1422
  color: var(--harmony-text-muted);
@@ -927,10 +1426,26 @@ html, body {
927
1426
  font-size: 11px;
928
1427
  cursor: pointer;
929
1428
  }
930
- .snapshot-annotation-remove:hover { color: var(--harmony-danger); border-color: var(--harmony-danger); }
931
- .snapshot-empty-hint { color: var(--harmony-text-muted); font-size: 12px; font-style: italic; padding: 8px 0; }
932
- .snapshot-discard-confirm { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--harmony-danger); }
933
- .snapshot-discard-confirm-msg { flex: 1; }
1429
+ .snapshot-annotation-remove:hover {
1430
+ color: var(--harmony-danger);
1431
+ border-color: var(--harmony-danger);
1432
+ }
1433
+ .snapshot-empty-hint {
1434
+ color: var(--harmony-text-muted);
1435
+ font-size: 12px;
1436
+ font-style: italic;
1437
+ padding: 8px 0;
1438
+ }
1439
+ .snapshot-discard-confirm {
1440
+ display: flex;
1441
+ align-items: center;
1442
+ gap: 10px;
1443
+ font-size: 13px;
1444
+ color: var(--harmony-danger);
1445
+ }
1446
+ .snapshot-discard-confirm-msg {
1447
+ flex: 1;
1448
+ }
934
1449
 
935
1450
  /* ── Add Page slideover ── */
936
1451
  .add-page-overlay {
@@ -971,9 +1486,26 @@ html, body {
971
1486
  border-bottom: 1px solid var(--harmony-border);
972
1487
  background: var(--harmony-bg-subtle);
973
1488
  }
974
- .project-settings-title { font-size: 14px; font-weight: 600; color: var(--harmony-text); }
975
- .project-settings-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; }
976
- .project-settings-body { padding: 14px 16px; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
1489
+ .project-settings-title {
1490
+ font-size: 14px;
1491
+ font-weight: 600;
1492
+ color: var(--harmony-text);
1493
+ }
1494
+ .project-settings-close {
1495
+ background: none;
1496
+ border: none;
1497
+ color: var(--harmony-text-muted);
1498
+ font-size: 20px;
1499
+ cursor: pointer;
1500
+ line-height: 1;
1501
+ }
1502
+ .project-settings-body {
1503
+ padding: 14px 16px;
1504
+ overflow: auto;
1505
+ display: flex;
1506
+ flex-direction: column;
1507
+ gap: 12px;
1508
+ }
977
1509
  .add-page-slideover {
978
1510
  width: min(480px, 100vw);
979
1511
  height: 100%;
@@ -993,13 +1525,51 @@ html, body {
993
1525
  flex-shrink: 0;
994
1526
  background: var(--harmony-bg-subtle);
995
1527
  }
996
- .add-page-title { font-size: 14px; font-weight: 600; color: var(--harmony-text); flex: 1; }
997
- .add-page-close { background: none; border: none; color: var(--harmony-text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
998
- .add-page-close:hover { color: var(--harmony-text); }
999
- .add-page-body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 16px; }
1000
- .add-page-section-label { font-size: 11px; font-weight: 600; color: var(--harmony-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
1001
- .add-page-section-header-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
1002
- .add-page-section-header-row .add-page-section-label { margin-bottom: 0; flex: 1; }
1528
+ .add-page-title {
1529
+ font-size: 14px;
1530
+ font-weight: 600;
1531
+ color: var(--harmony-text);
1532
+ flex: 1;
1533
+ }
1534
+ .add-page-close {
1535
+ background: none;
1536
+ border: none;
1537
+ color: var(--harmony-text-muted);
1538
+ font-size: 20px;
1539
+ cursor: pointer;
1540
+ line-height: 1;
1541
+ padding: 0 4px;
1542
+ }
1543
+ .add-page-close:hover {
1544
+ color: var(--harmony-text);
1545
+ }
1546
+ .add-page-body {
1547
+ flex: 1;
1548
+ overflow: auto;
1549
+ padding: 14px 16px;
1550
+ display: flex;
1551
+ flex-direction: column;
1552
+ gap: 16px;
1553
+ }
1554
+ .add-page-section-label {
1555
+ font-size: 11px;
1556
+ font-weight: 600;
1557
+ color: var(--harmony-text-muted);
1558
+ text-transform: uppercase;
1559
+ letter-spacing: 0.4px;
1560
+ margin-bottom: 6px;
1561
+ }
1562
+ .add-page-section-header-row {
1563
+ display: flex;
1564
+ align-items: center;
1565
+ justify-content: space-between;
1566
+ gap: 8px;
1567
+ margin-bottom: 6px;
1568
+ }
1569
+ .add-page-section-header-row .add-page-section-label {
1570
+ margin-bottom: 0;
1571
+ flex: 1;
1572
+ }
1003
1573
  .add-page-fill-from-image-btn {
1004
1574
  background: var(--harmony-bg-subtle);
1005
1575
  color: var(--harmony-primary);
@@ -1011,8 +1581,13 @@ html, body {
1011
1581
  cursor: pointer;
1012
1582
  flex-shrink: 0;
1013
1583
  }
1014
- .add-page-fill-from-image-btn:hover { background: var(--harmony-primary-soft); }
1015
- .add-page-fill-from-image-btn:disabled { opacity: 0.45; cursor: not-allowed; }
1584
+ .add-page-fill-from-image-btn:hover {
1585
+ background: var(--harmony-primary-soft);
1586
+ }
1587
+ .add-page-fill-from-image-btn:disabled {
1588
+ opacity: 0.45;
1589
+ cursor: not-allowed;
1590
+ }
1016
1591
  .add-page-suggested-route {
1017
1592
  display: flex;
1018
1593
  flex-wrap: wrap;
@@ -1026,7 +1601,10 @@ html, body {
1026
1601
  color: var(--harmony-text-secondary);
1027
1602
  margin-bottom: 8px;
1028
1603
  }
1029
- .add-page-suggested-route code { font-family: var(--harmony-mono); color: var(--harmony-primary); }
1604
+ .add-page-suggested-route code {
1605
+ font-family: var(--harmony-mono);
1606
+ color: var(--harmony-primary);
1607
+ }
1030
1608
  .add-page-brief-fill-popover {
1031
1609
  position: absolute;
1032
1610
  inset: 0;
@@ -1051,8 +1629,17 @@ html, body {
1051
1629
  gap: 10px;
1052
1630
  box-shadow: var(--harmony-shadow-lg);
1053
1631
  }
1054
- .add-page-brief-fill-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
1055
- .add-page-brief-fill-title { font-size: 13px; font-weight: 600; color: var(--harmony-text); }
1632
+ .add-page-brief-fill-header {
1633
+ display: flex;
1634
+ align-items: center;
1635
+ justify-content: space-between;
1636
+ gap: 8px;
1637
+ }
1638
+ .add-page-brief-fill-title {
1639
+ font-size: 13px;
1640
+ font-weight: 600;
1641
+ color: var(--harmony-text);
1642
+ }
1056
1643
  .add-page-brief-fill-context {
1057
1644
  width: 100%;
1058
1645
  min-height: 64px;
@@ -1075,10 +1662,25 @@ html, body {
1075
1662
  font-size: 12px;
1076
1663
  cursor: pointer;
1077
1664
  }
1078
- .add-page-brief-fill-dropzone-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
1079
- .add-page-brief-fill-context:disabled { opacity: 0.6; cursor: not-allowed; }
1080
- .add-page-brief-fill-dropzone:focus { outline: none; border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
1081
- .add-page-brief-fill-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
1665
+ .add-page-brief-fill-dropzone-disabled {
1666
+ opacity: 0.45;
1667
+ cursor: not-allowed;
1668
+ pointer-events: none;
1669
+ }
1670
+ .add-page-brief-fill-context:disabled {
1671
+ opacity: 0.6;
1672
+ cursor: not-allowed;
1673
+ }
1674
+ .add-page-brief-fill-dropzone:focus {
1675
+ outline: none;
1676
+ border-color: var(--harmony-primary);
1677
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
1678
+ }
1679
+ .add-page-brief-fill-thumbs {
1680
+ display: flex;
1681
+ flex-wrap: wrap;
1682
+ gap: 8px;
1683
+ }
1082
1684
  .add-page-brief-fill-thumb {
1083
1685
  position: relative;
1084
1686
  width: 72px;
@@ -1088,7 +1690,12 @@ html, body {
1088
1690
  border: 1px solid var(--harmony-border);
1089
1691
  background: var(--harmony-bg-subtle);
1090
1692
  }
1091
- .add-page-brief-fill-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
1693
+ .add-page-brief-fill-thumb img {
1694
+ width: 100%;
1695
+ height: 100%;
1696
+ object-fit: cover;
1697
+ display: block;
1698
+ }
1092
1699
  .add-page-brief-fill-thumb-remove {
1093
1700
  position: absolute;
1094
1701
  top: 2px;
@@ -1104,8 +1711,18 @@ html, body {
1104
1711
  cursor: pointer;
1105
1712
  padding: 0;
1106
1713
  }
1107
- .add-page-brief-fill-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
1108
- .add-page-route-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
1714
+ .add-page-brief-fill-actions {
1715
+ display: flex;
1716
+ gap: 8px;
1717
+ justify-content: flex-end;
1718
+ margin-top: 4px;
1719
+ }
1720
+ .add-page-route-row {
1721
+ display: flex;
1722
+ align-items: center;
1723
+ gap: 8px;
1724
+ flex-wrap: wrap;
1725
+ }
1109
1726
  .add-page-route-input {
1110
1727
  flex: 1;
1111
1728
  min-width: 160px;
@@ -1118,10 +1735,28 @@ html, body {
1118
1735
  font-family: var(--harmony-mono);
1119
1736
  box-sizing: border-box;
1120
1737
  }
1121
- .add-page-route-input:focus { border-color: var(--harmony-primary); outline: none; box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
1122
- .add-page-route-badge { font-size: 10px; color: var(--harmony-primary); background: var(--harmony-primary-soft); padding: 2px 8px; border-radius: 4px; }
1123
- .add-page-field-error { font-size: 12px; color: var(--harmony-danger); margin-top: 4px; }
1124
- .add-page-hint { font-size: 12px; color: var(--harmony-text-muted); margin-top: 4px; }
1738
+ .add-page-route-input:focus {
1739
+ border-color: var(--harmony-primary);
1740
+ outline: none;
1741
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
1742
+ }
1743
+ .add-page-route-badge {
1744
+ font-size: 10px;
1745
+ color: var(--harmony-primary);
1746
+ background: var(--harmony-primary-soft);
1747
+ padding: 2px 8px;
1748
+ border-radius: 4px;
1749
+ }
1750
+ .add-page-field-error {
1751
+ font-size: 12px;
1752
+ color: var(--harmony-danger);
1753
+ margin-top: 4px;
1754
+ }
1755
+ .add-page-hint {
1756
+ font-size: 12px;
1757
+ color: var(--harmony-text-muted);
1758
+ margin-top: 4px;
1759
+ }
1125
1760
  .add-page-textarea {
1126
1761
  width: 100%;
1127
1762
  min-height: 120px;
@@ -1136,7 +1771,10 @@ html, body {
1136
1771
  box-sizing: border-box;
1137
1772
  outline: none;
1138
1773
  }
1139
- .add-page-textarea:focus { border-color: var(--harmony-primary); box-shadow: 0 0 0 3px var(--harmony-primary-soft); }
1774
+ .add-page-textarea:focus {
1775
+ border-color: var(--harmony-primary);
1776
+ box-shadow: 0 0 0 3px var(--harmony-primary-soft);
1777
+ }
1140
1778
  .add-page-dropzone {
1141
1779
  border: 1px dashed var(--harmony-border-strong);
1142
1780
  border-radius: var(--harmony-radius-md);
@@ -1145,7 +1783,12 @@ html, body {
1145
1783
  color: var(--harmony-text-muted);
1146
1784
  font-size: 12px;
1147
1785
  }
1148
- .add-page-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
1786
+ .add-page-chips {
1787
+ display: flex;
1788
+ flex-direction: column;
1789
+ gap: 6px;
1790
+ margin-top: 8px;
1791
+ }
1149
1792
  .add-page-chip {
1150
1793
  display: flex;
1151
1794
  align-items: center;
@@ -1156,11 +1799,38 @@ html, body {
1156
1799
  padding: 6px 8px;
1157
1800
  font-size: 11px;
1158
1801
  }
1159
- .add-page-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--harmony-text-secondary); }
1160
- .add-page-chip-path { font-size: 10px; color: var(--harmony-text-muted); font-family: var(--harmony-mono); }
1161
- .add-page-chip select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; padding: 2px 4px; }
1162
- .add-page-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; font-size: 14px; padding: 0 4px; }
1163
- .add-page-chip-remove:hover { color: var(--harmony-danger); }
1802
+ .add-page-chip-name {
1803
+ flex: 1;
1804
+ min-width: 0;
1805
+ overflow: hidden;
1806
+ text-overflow: ellipsis;
1807
+ white-space: nowrap;
1808
+ color: var(--harmony-text-secondary);
1809
+ }
1810
+ .add-page-chip-path {
1811
+ font-size: 10px;
1812
+ color: var(--harmony-text-muted);
1813
+ font-family: var(--harmony-mono);
1814
+ }
1815
+ .add-page-chip select {
1816
+ background: var(--harmony-bg-surface);
1817
+ color: var(--harmony-text);
1818
+ border: 1px solid var(--harmony-border);
1819
+ border-radius: 4px;
1820
+ font-size: 11px;
1821
+ padding: 2px 4px;
1822
+ }
1823
+ .add-page-chip-remove {
1824
+ background: none;
1825
+ border: none;
1826
+ color: var(--harmony-text-muted);
1827
+ cursor: pointer;
1828
+ font-size: 14px;
1829
+ padding: 0 4px;
1830
+ }
1831
+ .add-page-chip-remove:hover {
1832
+ color: var(--harmony-danger);
1833
+ }
1164
1834
  .add-page-plugins {
1165
1835
  border: 1px solid var(--harmony-border);
1166
1836
  border-radius: var(--harmony-radius-md);
@@ -1181,22 +1851,61 @@ html, body {
1181
1851
  display: flex;
1182
1852
  flex-direction: column;
1183
1853
  }
1184
- .add-menu-panel .add-page-plugins-zone-title { flex-shrink: 0; }
1185
- .add-menu-panel .add-menu-panel-attached { flex: 0 1 auto; min-height: 0; max-height: 120px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
1186
- .add-menu-panel .add-page-plugin-chips { margin-top: 0; }
1854
+ .add-menu-panel .add-page-plugins-zone-title {
1855
+ flex-shrink: 0;
1856
+ }
1857
+ .add-menu-panel .add-menu-panel-attached {
1858
+ flex: 0 1 auto;
1859
+ min-height: 0;
1860
+ max-height: 120px;
1861
+ overflow-y: auto;
1862
+ overflow-x: hidden;
1863
+ -webkit-overflow-scrolling: touch;
1864
+ }
1865
+ .add-menu-panel .add-page-plugin-chips {
1866
+ margin-top: 0;
1867
+ }
1187
1868
  .add-menu-panel .add-page-btn,
1188
1869
  .add-menu-panel .add-page-manage-link,
1189
1870
  .add-menu-panel .add-page-hint,
1190
1871
  .add-menu-panel .add-page-field-error,
1191
1872
  .add-menu-panel .add-menu-route-params,
1192
1873
  .add-menu-panel .add-page-suggested-route,
1193
- .add-menu-panel .add-menu-route-confirm { flex-shrink: 0; }
1194
- .add-menu-panel .add-menu-popover { flex-shrink: 0; min-height: 180px; max-height: min(240px, 36vh); margin-top: 4px; }
1195
- .add-menu-panel .add-menu-nav { min-height: 140px; }
1196
- .add-page-plugins-zone-title { font-size: 11px; font-weight: 600; color: var(--harmony-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
1197
- .add-page-plugin-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 11px; border-bottom: 1px solid var(--harmony-border); }
1198
- .add-page-plugin-row:last-child { border-bottom: none; }
1199
- .add-page-plugin-label { flex: 1; color: var(--harmony-text-secondary); }
1874
+ .add-menu-panel .add-menu-route-confirm {
1875
+ flex-shrink: 0;
1876
+ }
1877
+ .add-menu-panel .add-menu-popover {
1878
+ flex-shrink: 0;
1879
+ min-height: 180px;
1880
+ max-height: min(240px, 36vh);
1881
+ margin-top: 4px;
1882
+ }
1883
+ .add-menu-panel .add-menu-nav {
1884
+ min-height: 140px;
1885
+ }
1886
+ .add-page-plugins-zone-title {
1887
+ font-size: 11px;
1888
+ font-weight: 600;
1889
+ color: var(--harmony-text-secondary);
1890
+ text-transform: uppercase;
1891
+ letter-spacing: 0.04em;
1892
+ margin-bottom: 4px;
1893
+ }
1894
+ .add-page-plugin-row {
1895
+ display: flex;
1896
+ align-items: center;
1897
+ gap: 8px;
1898
+ padding: 4px 0;
1899
+ font-size: 11px;
1900
+ border-bottom: 1px solid var(--harmony-border);
1901
+ }
1902
+ .add-page-plugin-row:last-child {
1903
+ border-bottom: none;
1904
+ }
1905
+ .add-page-plugin-label {
1906
+ flex: 1;
1907
+ color: var(--harmony-text-secondary);
1908
+ }
1200
1909
  .add-page-plugin-btn {
1201
1910
  background: var(--harmony-bg-subtle);
1202
1911
  color: var(--harmony-text-secondary);
@@ -1206,18 +1915,65 @@ html, body {
1206
1915
  font-size: 10px;
1207
1916
  cursor: pointer;
1208
1917
  }
1209
- .add-page-plugin-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); }
1210
- .add-page-plugin-btn:disabled { opacity: 0.45; cursor: not-allowed; }
1211
- .add-page-plugin-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
1212
- .add-page-setup-ok { color: var(--harmony-success); font-size: 10px; }
1213
- .add-page-setup-warn { color: var(--harmony-warning); font-size: 10px; }
1214
- .add-page-setup-error { color: var(--harmony-danger); font-size: 10px; }
1215
- .add-page-plugin-contract { padding-left: 0; font-size: 11px; color: var(--harmony-text-muted); display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
1216
- .add-page-plugin-contract-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--harmony-border); }
1217
- .add-page-plugin-contract-row:last-child { border-bottom: none; }
1218
- .add-page-plugin-contract-name { flex: 1; color: var(--harmony-text-secondary); font-size: 11px; }
1219
- .add-page-plugin-contract-added { font-size: 10px; color: var(--harmony-success); }
1220
- .add-page-plugin-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
1918
+ .add-page-plugin-btn:hover {
1919
+ background: var(--harmony-bg-hover);
1920
+ color: var(--harmony-text);
1921
+ }
1922
+ .add-page-plugin-btn:disabled {
1923
+ opacity: 0.45;
1924
+ cursor: not-allowed;
1925
+ }
1926
+ .add-page-plugin-btn-primary {
1927
+ background: var(--harmony-primary);
1928
+ color: #fff;
1929
+ border-color: var(--harmony-primary);
1930
+ }
1931
+ .add-page-setup-ok {
1932
+ color: var(--harmony-success);
1933
+ font-size: 10px;
1934
+ }
1935
+ .add-page-setup-warn {
1936
+ color: var(--harmony-warning);
1937
+ font-size: 10px;
1938
+ }
1939
+ .add-page-setup-error {
1940
+ color: var(--harmony-danger);
1941
+ font-size: 10px;
1942
+ }
1943
+ .add-page-plugin-contract {
1944
+ padding-left: 0;
1945
+ font-size: 11px;
1946
+ color: var(--harmony-text-muted);
1947
+ display: flex;
1948
+ flex-direction: column;
1949
+ gap: 4px;
1950
+ margin-top: 6px;
1951
+ }
1952
+ .add-page-plugin-contract-row {
1953
+ display: flex;
1954
+ align-items: center;
1955
+ gap: 8px;
1956
+ padding: 4px 0;
1957
+ border-bottom: 1px solid var(--harmony-border);
1958
+ }
1959
+ .add-page-plugin-contract-row:last-child {
1960
+ border-bottom: none;
1961
+ }
1962
+ .add-page-plugin-contract-name {
1963
+ flex: 1;
1964
+ color: var(--harmony-text-secondary);
1965
+ font-size: 11px;
1966
+ }
1967
+ .add-page-plugin-contract-added {
1968
+ font-size: 10px;
1969
+ color: var(--harmony-success);
1970
+ }
1971
+ .add-page-plugin-chips {
1972
+ display: flex;
1973
+ flex-wrap: wrap;
1974
+ gap: 6px;
1975
+ margin-top: 4px;
1976
+ }
1221
1977
  .add-page-plugin-chip {
1222
1978
  background: var(--harmony-bg-subtle);
1223
1979
  border: 1px solid var(--harmony-border);
@@ -1229,10 +1985,30 @@ html, body {
1229
1985
  align-items: center;
1230
1986
  gap: 4px;
1231
1987
  }
1232
- .add-page-plugin-chip-remove { background: none; border: none; color: var(--harmony-text-muted); cursor: pointer; padding: 0 2px; }
1233
- .add-page-plugins-warn { font-size: 11px; color: var(--harmony-warning); margin-top: 4px; }
1234
- .add-page-install-live { font-size: 11px; color: var(--harmony-text-muted); }
1235
- .add-page-local-plugin-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--harmony-border); }
1988
+ .add-page-plugin-chip-remove {
1989
+ background: none;
1990
+ border: none;
1991
+ color: var(--harmony-text-muted);
1992
+ cursor: pointer;
1993
+ padding: 0 2px;
1994
+ }
1995
+ .add-page-plugins-warn {
1996
+ font-size: 11px;
1997
+ color: var(--harmony-warning);
1998
+ margin-top: 4px;
1999
+ }
2000
+ .add-page-install-live {
2001
+ font-size: 11px;
2002
+ color: var(--harmony-text-muted);
2003
+ }
2004
+ .add-page-local-plugin-form {
2005
+ display: flex;
2006
+ flex-direction: column;
2007
+ gap: 6px;
2008
+ margin-top: 8px;
2009
+ padding-top: 8px;
2010
+ border-top: 1px solid var(--harmony-border);
2011
+ }
1236
2012
  .add-page-local-plugin-form input {
1237
2013
  background: var(--harmony-bg-surface);
1238
2014
  color: var(--harmony-text);
@@ -1251,13 +2027,57 @@ html, body {
1251
2027
  padding: 6px 8px;
1252
2028
  margin-top: 6px;
1253
2029
  }
1254
- .add-page-manage-link { font-size: 11px; color: var(--harmony-primary); cursor: pointer; margin-top: 6px; background: none; border: none; padding: 0; text-align: left; }
1255
- .annotation-binding { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
1256
- .annotation-add-menu { margin-top: 6px; border-top: 1px solid var(--harmony-border); padding-top: 6px; }
1257
- .annotation-add-menu-toggle { background: none; border: none; color: var(--harmony-primary); font-size: 11px; cursor: pointer; padding: 0; text-align: left; }
1258
- .annotation-add-menu-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 11px; color: var(--harmony-text-secondary); }
1259
- .change-request-add-menu { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--harmony-border); border-radius: var(--harmony-radius-md); background: var(--harmony-bg-subtle); }
1260
- .add-menu-route-params { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
2030
+ .add-page-manage-link {
2031
+ font-size: 11px;
2032
+ color: var(--harmony-primary);
2033
+ cursor: pointer;
2034
+ margin-top: 6px;
2035
+ background: none;
2036
+ border: none;
2037
+ padding: 0;
2038
+ text-align: left;
2039
+ }
2040
+ .annotation-binding {
2041
+ margin-top: 6px;
2042
+ border-top: 1px solid var(--harmony-border);
2043
+ padding-top: 6px;
2044
+ }
2045
+ .annotation-add-menu {
2046
+ margin-top: 6px;
2047
+ border-top: 1px solid var(--harmony-border);
2048
+ padding-top: 6px;
2049
+ }
2050
+ .annotation-add-menu-toggle {
2051
+ background: none;
2052
+ border: none;
2053
+ color: var(--harmony-primary);
2054
+ font-size: 11px;
2055
+ cursor: pointer;
2056
+ padding: 0;
2057
+ text-align: left;
2058
+ }
2059
+ .annotation-add-menu-panel {
2060
+ display: flex;
2061
+ flex-direction: column;
2062
+ gap: 6px;
2063
+ margin-top: 6px;
2064
+ font-size: 11px;
2065
+ color: var(--harmony-text-secondary);
2066
+ }
2067
+ .change-request-add-menu {
2068
+ margin-top: 8px;
2069
+ padding: 10px 12px;
2070
+ border: 1px solid var(--harmony-border);
2071
+ border-radius: var(--harmony-radius-md);
2072
+ background: var(--harmony-bg-subtle);
2073
+ }
2074
+ .add-menu-route-params {
2075
+ display: flex;
2076
+ flex-wrap: wrap;
2077
+ align-items: center;
2078
+ gap: 6px;
2079
+ margin-top: 4px;
2080
+ }
1261
2081
  .add-menu-popover {
1262
2082
  border: 1px solid var(--harmony-border);
1263
2083
  border-radius: var(--harmony-radius-sm);
@@ -1284,10 +2104,31 @@ html, body {
1284
2104
  margin-bottom: 4px;
1285
2105
  flex-shrink: 0;
1286
2106
  }
1287
- .add-menu-popover-header button { background: none; border: none; color: var(--harmony-text-muted); font-size: 14px; cursor: pointer; padding: 0 4px; }
1288
- .add-menu-popover-header button:hover { color: var(--harmony-text); }
1289
- .add-menu-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 2px; -webkit-overflow-scrolling: touch; }
1290
- .add-menu-nav-row { display: contents; }
2107
+ .add-menu-popover-header button {
2108
+ background: none;
2109
+ border: none;
2110
+ color: var(--harmony-text-muted);
2111
+ font-size: 14px;
2112
+ cursor: pointer;
2113
+ padding: 0 4px;
2114
+ }
2115
+ .add-menu-popover-header button:hover {
2116
+ color: var(--harmony-text);
2117
+ }
2118
+ .add-menu-nav {
2119
+ display: flex;
2120
+ flex-direction: column;
2121
+ gap: 4px;
2122
+ flex: 1;
2123
+ min-height: 0;
2124
+ overflow-y: auto;
2125
+ overflow-x: hidden;
2126
+ padding-right: 2px;
2127
+ -webkit-overflow-scrolling: touch;
2128
+ }
2129
+ .add-menu-nav-row {
2130
+ display: contents;
2131
+ }
1291
2132
  .add-menu-nav-btn {
1292
2133
  background: var(--harmony-bg-surface);
1293
2134
  color: var(--harmony-text-secondary);
@@ -1298,7 +2139,11 @@ html, body {
1298
2139
  cursor: pointer;
1299
2140
  text-align: left;
1300
2141
  }
1301
- .add-menu-nav-btn:hover { background: var(--harmony-bg-hover); color: var(--harmony-text); border-color: var(--harmony-primary); }
2142
+ .add-menu-nav-btn:hover {
2143
+ background: var(--harmony-bg-hover);
2144
+ color: var(--harmony-text);
2145
+ border-color: var(--harmony-primary);
2146
+ }
1302
2147
  .add-menu-item-btn {
1303
2148
  background: var(--harmony-primary);
1304
2149
  color: #fff;
@@ -1309,11 +2154,31 @@ html, body {
1309
2154
  cursor: pointer;
1310
2155
  text-align: left;
1311
2156
  }
1312
- .add-menu-item-btn:hover { background: var(--harmony-primary-hover); }
1313
- .annotation-binding-preview { font-size: 10px; color: var(--harmony-success); margin: 0; }
1314
- .annotation-binding-panel label { display: flex; flex-direction: column; gap: 2px; }
1315
- .annotation-binding-panel select { background: var(--harmony-bg-surface); color: var(--harmony-text); border: 1px solid var(--harmony-border); border-radius: 4px; font-size: 11px; }
1316
- .annotation-binding-scope-row { display: flex; gap: 10px; flex-wrap: wrap; }
2157
+ .add-menu-item-btn:hover {
2158
+ background: var(--harmony-primary-hover);
2159
+ }
2160
+ .annotation-binding-preview {
2161
+ font-size: 10px;
2162
+ color: var(--harmony-success);
2163
+ margin: 0;
2164
+ }
2165
+ .annotation-binding-panel label {
2166
+ display: flex;
2167
+ flex-direction: column;
2168
+ gap: 2px;
2169
+ }
2170
+ .annotation-binding-panel select {
2171
+ background: var(--harmony-bg-surface);
2172
+ color: var(--harmony-text);
2173
+ border: 1px solid var(--harmony-border);
2174
+ border-radius: 4px;
2175
+ font-size: 11px;
2176
+ }
2177
+ .annotation-binding-scope-row {
2178
+ display: flex;
2179
+ gap: 10px;
2180
+ flex-wrap: wrap;
2181
+ }
1317
2182
  .annotation-binding-install {
1318
2183
  background: var(--harmony-primary);
1319
2184
  color: #fff;
@@ -1324,18 +2189,57 @@ html, body {
1324
2189
  cursor: pointer;
1325
2190
  align-self: flex-start;
1326
2191
  }
1327
- .add-page-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--harmony-border); flex-shrink: 0; background: var(--harmony-bg-subtle); }
1328
- .add-page-btn { flex: 1; padding: 10px; border-radius: var(--harmony-radius-pill); font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--harmony-border); }
1329
- .add-page-btn-cancel { background: var(--harmony-bg-surface); color: var(--harmony-text-secondary); }
1330
- .add-page-btn-primary { background: var(--harmony-primary); color: #fff; border-color: var(--harmony-primary); }
1331
- .add-page-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
1332
- .add-page-hidden-file { display: none; }
2192
+ .add-page-footer {
2193
+ display: flex;
2194
+ gap: 8px;
2195
+ padding: 12px 16px;
2196
+ border-top: 1px solid var(--harmony-border);
2197
+ flex-shrink: 0;
2198
+ background: var(--harmony-bg-subtle);
2199
+ }
2200
+ .add-page-btn {
2201
+ flex: 1;
2202
+ padding: 10px;
2203
+ border-radius: var(--harmony-radius-pill);
2204
+ font-size: 13px;
2205
+ font-weight: 600;
2206
+ cursor: pointer;
2207
+ border: 1px solid var(--harmony-border);
2208
+ }
2209
+ .add-page-btn-cancel {
2210
+ background: var(--harmony-bg-surface);
2211
+ color: var(--harmony-text-secondary);
2212
+ }
2213
+ .add-page-btn-primary {
2214
+ background: var(--harmony-primary);
2215
+ color: #fff;
2216
+ border-color: var(--harmony-primary);
2217
+ }
2218
+ .add-page-btn-primary:disabled {
2219
+ opacity: 0.45;
2220
+ cursor: not-allowed;
2221
+ }
2222
+ .add-page-hidden-file {
2223
+ display: none;
2224
+ }
1333
2225
 
1334
2226
  /* Legacy class aliases (kept for compatibility) */
1335
- .main-panel { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
1336
- .main-top-bar { display: none; }
1337
- .preview-stack { display: contents; }
1338
- .preview-url-row { display: none; }
2227
+ .main-panel {
2228
+ flex: 1;
2229
+ display: flex;
2230
+ flex-direction: column;
2231
+ min-height: 0;
2232
+ overflow: hidden;
2233
+ }
2234
+ .main-top-bar {
2235
+ display: none;
2236
+ }
2237
+ .preview-stack {
2238
+ display: contents;
2239
+ }
2240
+ .preview-url-row {
2241
+ display: none;
2242
+ }
1339
2243
  .reset-btn {
1340
2244
  background: var(--harmony-bg-surface);
1341
2245
  border: 1px solid var(--harmony-border);
@@ -1346,5 +2250,10 @@ html, body {
1346
2250
  border-radius: var(--harmony-radius-pill);
1347
2251
  line-height: 1;
1348
2252
  }
1349
- .reset-btn:hover { color: var(--harmony-text); border-color: var(--harmony-border-strong); }
1350
- .route-picker-stack { display: contents; }
2253
+ .reset-btn:hover {
2254
+ color: var(--harmony-text);
2255
+ border-color: var(--harmony-border-strong);
2256
+ }
2257
+ .route-picker-stack {
2258
+ display: contents;
2259
+ }