@agent-link/server 0.1.163 → 0.1.165

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