daedalus-cli 3.72.0 → 3.74.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,15 +1,29 @@
1
1
  :root {
2
- --bg-primary: #0a0e17;
3
- --bg-secondary: #121826;
4
- --bg-panel: #182234;
5
- --border-color: #1e293b;
6
- --border-glow: #00f0ff33;
7
- --text-primary: #f8fafc;
8
- --text-muted: #64748b;
9
- --accent-cyan: #00f0ff;
10
- --accent-green: #10b981;
11
- --accent-purple: #8b5cf6;
12
- --accent-red: #ef4444;
2
+ --bg-void: #04070d;
3
+ --bg-obsidian: #080f1d;
4
+ --bg-panel: #0d1728;
5
+ --bg-panel-elevated: #122038;
6
+ --bg-panel-translucent: rgba(13, 23, 40, 0.85);
7
+ --gold-aurum: #e5a93c;
8
+ --gold-bright: #f5c358;
9
+ --gold-deep: #b45309;
10
+ --gold-glow: rgba(229, 169, 60, 0.28);
11
+ --gold-subtle: rgba(229, 169, 60, 0.08);
12
+ --bronze-border: rgba(229, 169, 60, 0.22);
13
+ --bronze-border-strong: rgba(229, 169, 60, 0.5);
14
+ --aegean-cyan: #38bdf8;
15
+ --aegean-glow: rgba(56, 189, 248, 0.25);
16
+ --athena-purple: #a78bfa;
17
+ --delphic-green: #34d399;
18
+ --icarus-red: #f87171;
19
+ --solar-amber: #fbbf24;
20
+ --text-marble: #f8fafc;
21
+ --text-parchment: #e2e8f0;
22
+ --text-dim: #94a3b8;
23
+ --text-ancient: #64748b;
24
+ --font-mythic: 'Cinzel', serif, Georgia;
25
+ --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
26
+ --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
13
27
  }
14
28
 
15
29
  * {
@@ -18,19 +32,63 @@
18
32
  padding: 0;
19
33
  }
20
34
 
35
+ * {
36
+ scrollbar-width: thin;
37
+ scrollbar-color: rgba(229, 169, 60, 0.3) var(--bg-void);
38
+ }
39
+
40
+ ::-webkit-scrollbar {
41
+ width: 6px;
42
+ height: 6px;
43
+ }
44
+
45
+ ::-webkit-scrollbar-track {
46
+ background: var(--bg-void);
47
+ }
48
+
49
+ ::-webkit-scrollbar-thumb {
50
+ background: rgba(229, 169, 60, 0.25);
51
+ border-radius: 2px;
52
+ border: 1px solid rgba(229, 169, 60, 0.1);
53
+ transition: background 0.2s, box-shadow 0.2s;
54
+ }
55
+
56
+ ::-webkit-scrollbar-thumb:hover {
57
+ background: var(--gold-aurum);
58
+ box-shadow: 0 0 8px var(--gold-glow);
59
+ }
60
+
21
61
  body {
22
- background-color: var(--bg-primary);
23
- color: var(--text-primary);
24
- font-family: 'JetBrains Mono', 'Fira Code', monospace, system-ui, sans-serif;
62
+ background-color: var(--bg-void);
63
+ color: var(--text-parchment);
64
+ font-family: var(--font-sans);
25
65
  min-height: 100vh;
26
66
  display: flex;
27
67
  flex-direction: column;
68
+ position: relative;
69
+ overflow-x: hidden;
70
+ }
71
+
72
+ .mythic-bg-overlay {
73
+ position: fixed;
74
+ inset: 0;
75
+ pointer-events: none;
76
+ z-index: 0;
77
+ background-image:
78
+ radial-gradient(circle at 50% -10%, rgba(229, 169, 60, 0.08) 0%, transparent 60%),
79
+ radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.04) 0%, transparent 50%),
80
+ radial-gradient(circle at 0% 100%, rgba(167, 139, 250, 0.03) 0%, transparent 50%),
81
+ linear-gradient(to right, rgba(229, 169, 60, 0.02) 1px, transparent 1px),
82
+ linear-gradient(to bottom, rgba(229, 169, 60, 0.02) 1px, transparent 1px);
83
+ background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
28
84
  }
29
85
 
30
86
  .dashboard {
31
- max-width: 1200px;
87
+ position: relative;
88
+ z-index: 1;
89
+ max-width: 1280px;
32
90
  margin: 0 auto;
33
- padding: 24px;
91
+ padding: 24px 28px 40px;
34
92
  width: 100%;
35
93
  }
36
94
 
@@ -38,63 +96,186 @@ body {
38
96
  display: flex;
39
97
  justify-content: space-between;
40
98
  align-items: center;
41
- border-bottom: 1px solid var(--border-color);
42
- padding-bottom: 20px;
99
+ border-bottom: 1px solid var(--bronze-border);
100
+ padding-bottom: 22px;
43
101
  margin-bottom: 28px;
102
+ position: relative;
103
+ }
104
+
105
+ .header::after {
106
+ content: '';
107
+ position: absolute;
108
+ bottom: -1px;
109
+ left: 0;
110
+ width: 140px;
111
+ height: 2px;
112
+ background: linear-gradient(90deg, var(--gold-bright), var(--gold-aurum), transparent);
113
+ box-shadow: 0 0 10px var(--gold-glow);
44
114
  }
45
115
 
46
116
  .brand {
47
117
  display: flex;
48
118
  align-items: center;
49
- gap: 12px;
119
+ gap: 16px;
120
+ }
121
+
122
+ .logo-crest {
123
+ display: flex;
124
+ align-items: center;
125
+ justify-content: center;
126
+ width: 44px;
127
+ height: 44px;
128
+ filter: drop-shadow(0 0 8px rgba(229, 169, 60, 0.35));
129
+ transition: transform 0.3s ease, filter 0.3s ease;
130
+ }
131
+
132
+ .logo-crest:hover {
133
+ transform: scale(1.06) rotate(3deg);
134
+ filter: drop-shadow(0 0 14px rgba(229, 169, 60, 0.6));
135
+ }
136
+
137
+ .crest-svg {
138
+ width: 100%;
139
+ height: 100%;
50
140
  }
51
141
 
52
- .logo {
53
- color: var(--accent-cyan);
142
+ .brand-titles {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 2px;
146
+ }
147
+
148
+ .brand-main {
149
+ display: flex;
150
+ align-items: baseline;
151
+ gap: 10px;
152
+ }
153
+
154
+ .brand-name {
155
+ font-family: var(--font-mythic);
54
156
  font-size: 24px;
55
- text-shadow: 0 0 10px var(--accent-cyan);
157
+ font-weight: 900;
158
+ letter-spacing: 4px;
159
+ color: var(--text-marble);
160
+ text-shadow: 0 0 14px rgba(245, 195, 88, 0.25);
161
+ background: linear-gradient(135deg, #ffffff 0%, #f5c358 60%, #e5a93c 100%);
162
+ -webkit-background-clip: text;
163
+ -webkit-text-fill-color: transparent;
56
164
  }
57
165
 
58
- h1 {
59
- font-size: 20px;
166
+ .brand-greek {
167
+ font-family: var(--font-mythic);
168
+ font-size: 13px;
169
+ font-weight: 700;
60
170
  letter-spacing: 2px;
61
- color: var(--text-primary);
171
+ color: var(--gold-bright);
172
+ opacity: 0.8;
62
173
  }
63
174
 
64
- .subtitle {
65
- color: var(--text-muted);
66
- font-size: 13px;
67
- margin-left: 8px;
175
+ .brand-sub {
176
+ font-family: var(--font-mono);
177
+ font-size: 10.5px;
178
+ letter-spacing: 1.5px;
179
+ color: var(--text-dim);
180
+ text-transform: uppercase;
68
181
  }
69
182
 
70
183
  .status-bar {
71
184
  display: flex;
72
185
  align-items: center;
73
- gap: 16px;
74
- font-size: 13px;
186
+ gap: 20px;
187
+ }
188
+
189
+ .status-pill-wrapper {
190
+ display: flex;
191
+ align-items: center;
192
+ }
193
+
194
+ .model-pill-wrapper {
195
+ display: flex;
196
+ align-items: center;
197
+ }
198
+
199
+ .model-pill {
200
+ display: inline-flex;
201
+ align-items: center;
202
+ gap: 6px;
203
+ background: rgba(229, 169, 60, 0.08);
204
+ border: 1px solid var(--bronze-border);
205
+ border-radius: 4px;
206
+ color: var(--gold-bright);
207
+ font-family: var(--font-mythic);
208
+ font-size: 10px;
209
+ font-weight: 700;
210
+ letter-spacing: 1px;
211
+ padding: 5px 12px;
212
+ cursor: pointer;
213
+ transition: all 0.2s ease;
214
+ }
215
+
216
+ .model-pill:hover {
217
+ border-color: var(--gold-bright);
218
+ background: rgba(229, 169, 60, 0.16);
219
+ box-shadow: 0 0 10px var(--gold-glow);
220
+ transform: translateY(-1px);
221
+ }
222
+
223
+ .model-pill .model-icon {
224
+ font-size: 11px;
75
225
  }
76
226
 
77
227
  .status {
78
- padding: 4px 10px;
228
+ padding: 5px 12px;
79
229
  border-radius: 4px;
80
- font-weight: bold;
230
+ font-family: var(--font-mono);
231
+ font-size: 11px;
232
+ font-weight: 700;
233
+ letter-spacing: 1px;
234
+ transition: all 0.2s ease;
81
235
  }
82
236
 
83
237
  .status.connected {
84
- color: var(--accent-green);
85
- background: rgba(16, 185, 129, 0.1);
86
- border: 1px solid rgba(16, 185, 129, 0.3);
87
- text-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
238
+ color: var(--delphic-green);
239
+ background: rgba(52, 211, 153, 0.1);
240
+ border: 1px solid rgba(52, 211, 153, 0.4);
241
+ box-shadow: 0 0 10px rgba(52, 211, 153, 0.2);
242
+ text-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
88
243
  }
89
244
 
90
245
  .status.disconnected {
91
- color: var(--accent-red);
92
- background: rgba(239, 68, 68, 0.1);
93
- border: 1px solid rgba(239, 68, 68, 0.3);
246
+ color: var(--icarus-red);
247
+ background: rgba(248, 113, 113, 0.1);
248
+ border: 1px solid rgba(248, 113, 113, 0.35);
249
+ box-shadow: 0 0 8px rgba(248, 113, 113, 0.15);
250
+ }
251
+
252
+ .status.reconnecting {
253
+ color: var(--solar-amber);
254
+ background: rgba(251, 191, 36, 0.1);
255
+ border: 1px solid rgba(251, 191, 36, 0.35);
256
+ box-shadow: 0 0 8px rgba(251, 191, 36, 0.2);
257
+ text-shadow: 0 0 6px rgba(251, 191, 36, 0.4);
258
+ }
259
+
260
+ .oracle-clock {
261
+ display: flex;
262
+ flex-direction: column;
263
+ align-items: flex-end;
264
+ gap: 1px;
265
+ }
266
+
267
+ .oracle-label {
268
+ font-family: var(--font-mythic);
269
+ font-size: 9px;
270
+ letter-spacing: 1.5px;
271
+ color: var(--gold-bright);
272
+ opacity: 0.7;
94
273
  }
95
274
 
96
275
  .timestamp {
97
- color: var(--text-muted);
276
+ font-family: var(--font-mono);
277
+ font-size: 12px;
278
+ color: var(--text-parchment);
98
279
  }
99
280
 
100
281
  .grid {
@@ -105,44 +286,102 @@ h1 {
105
286
  }
106
287
 
107
288
  .panel {
108
- background: var(--bg-secondary);
109
- border: 1px solid var(--border-color);
110
- border-radius: 8px;
111
- padding: 20px;
289
+ background: linear-gradient(180deg, var(--bg-panel-translucent) 0%, rgba(8, 15, 29, 0.95) 100%);
290
+ border: 1px solid var(--bronze-border);
291
+ border-radius: 6px;
292
+ padding: 18px 20px;
112
293
  position: relative;
113
- overflow: hidden;
114
- transition: border-color 0.2s, box-shadow 0.2s;
294
+ backdrop-filter: blur(12px);
295
+ -webkit-backdrop-filter: blur(12px);
296
+ transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
297
+ }
298
+
299
+ .panel::before {
300
+ content: '';
301
+ position: absolute;
302
+ top: -1px;
303
+ left: -1px;
304
+ width: 8px;
305
+ height: 8px;
306
+ border-top: 2px solid var(--gold-bright);
307
+ border-left: 2px solid var(--gold-bright);
308
+ border-top-left-radius: 6px;
309
+ opacity: 0.6;
310
+ pointer-events: none;
311
+ transition: opacity 0.25s;
312
+ }
313
+
314
+ .panel::after {
315
+ content: '';
316
+ position: absolute;
317
+ bottom: -1px;
318
+ right: -1px;
319
+ width: 8px;
320
+ height: 8px;
321
+ border-bottom: 2px solid var(--gold-bright);
322
+ border-right: 2px solid var(--gold-bright);
323
+ border-bottom-right-radius: 6px;
324
+ opacity: 0.6;
325
+ pointer-events: none;
326
+ transition: opacity 0.25s;
115
327
  }
116
328
 
117
329
  .panel:hover {
118
- border-color: var(--accent-cyan);
119
- box-shadow: 0 0 15px var(--border-glow);
330
+ border-color: var(--bronze-border-strong);
331
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px var(--gold-glow);
332
+ }
333
+
334
+ .panel:hover::before,
335
+ .panel:hover::after {
336
+ opacity: 1;
337
+ }
338
+
339
+ .oracle-card {
340
+ display: flex;
341
+ flex-direction: column;
342
+ justify-content: space-between;
120
343
  }
121
344
 
122
345
  .panel-header {
123
346
  display: flex;
124
347
  justify-content: space-between;
125
- align-items: baseline;
126
- margin-bottom: 16px;
348
+ align-items: center;
349
+ margin-bottom: 14px;
350
+ }
351
+
352
+ .metric-meta {
353
+ display: flex;
354
+ align-items: center;
355
+ gap: 8px;
356
+ }
357
+
358
+ .oracle-glyph {
359
+ font-size: 13px;
360
+ filter: drop-shadow(0 0 4px var(--gold-glow));
127
361
  }
128
362
 
129
363
  .metric-name {
130
- font-size: 12px;
364
+ font-family: var(--font-mythic);
365
+ font-size: 11.5px;
366
+ font-weight: 700;
131
367
  letter-spacing: 1.5px;
132
- color: var(--text-muted);
368
+ color: var(--gold-bright);
369
+ text-shadow: 0 0 8px rgba(245, 195, 88, 0.15);
133
370
  }
134
371
 
135
372
  .metric-value {
136
- font-size: 28px;
373
+ font-family: var(--font-mono);
374
+ font-size: 26px;
137
375
  font-weight: 700;
138
- color: var(--accent-cyan);
139
- text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
376
+ color: var(--text-marble);
377
+ text-shadow: 0 0 10px rgba(229, 169, 60, 0.3);
140
378
  }
141
379
 
142
380
  .sparkline {
143
- height: 40px;
144
- background: var(--bg-panel);
145
- border-radius: 4px;
381
+ height: 36px;
382
+ background: rgba(4, 7, 13, 0.6);
383
+ border: 1px solid rgba(229, 169, 60, 0.1);
384
+ border-radius: 3px;
146
385
  margin-bottom: 12px;
147
386
  position: relative;
148
387
  overflow: hidden;
@@ -154,66 +393,1569 @@ h1 {
154
393
  bottom: 0;
155
394
  left: 0;
156
395
  right: 0;
157
- height: 4px;
158
- background: var(--accent-cyan);
159
- box-shadow: 0 0 8px var(--accent-cyan);
396
+ height: 3px;
397
+ box-shadow: 0 0 8px currentColor;
398
+ }
399
+
400
+ .pantheon-sparkline::after {
401
+ background: var(--gold-bright);
402
+ color: var(--gold-bright);
403
+ }
404
+
405
+ .memoria-sparkline::after {
406
+ background: var(--aegean-cyan);
407
+ color: var(--aegean-cyan);
408
+ }
409
+
410
+ .labyrinth-sparkline::after {
411
+ background: var(--solar-amber);
412
+ color: var(--solar-amber);
413
+ }
414
+
415
+ .aegis-sparkline::after {
416
+ background: var(--delphic-green);
417
+ color: var(--delphic-green);
160
418
  }
161
419
 
162
420
  .panel-footer {
163
421
  display: flex;
164
422
  justify-content: space-between;
165
- font-size: 12px;
166
- color: var(--text-muted);
423
+ align-items: center;
424
+ font-family: var(--font-mono);
425
+ font-size: 11px;
426
+ }
427
+
428
+ .footer-label {
429
+ color: var(--text-ancient);
430
+ letter-spacing: 0.5px;
167
431
  }
168
432
 
169
433
  .metric-status {
170
- color: var(--accent-green);
434
+ color: var(--delphic-green);
435
+ font-weight: 700;
436
+ letter-spacing: 0.5px;
171
437
  }
172
438
 
173
439
  .log-panel {
174
440
  grid-column: 1 / -1;
175
- background: var(--bg-secondary);
441
+ background: linear-gradient(180deg, rgba(13, 23, 40, 0.9) 0%, rgba(4, 7, 13, 0.95) 100%);
176
442
  }
177
443
 
178
444
  .clear-btn {
179
- background: transparent;
180
- border: 1px solid var(--border-color);
181
- color: var(--text-muted);
182
- padding: 4px 10px;
183
- border-radius: 4px;
184
- font-family: inherit;
185
- font-size: 11px;
445
+ background: rgba(229, 169, 60, 0.06);
446
+ border: 1px solid var(--bronze-border);
447
+ color: var(--gold-bright);
448
+ padding: 3px 10px;
449
+ border-radius: 3px;
450
+ font-family: var(--font-mythic);
451
+ font-size: 10px;
452
+ font-weight: 700;
453
+ letter-spacing: 1px;
186
454
  cursor: pointer;
187
- transition: all 0.2s;
455
+ transition: all 0.2s ease;
188
456
  }
189
457
 
190
458
  .clear-btn:hover {
191
- border-color: var(--accent-red);
192
- color: var(--accent-red);
459
+ border-color: var(--icarus-red);
460
+ color: var(--icarus-red);
461
+ background: rgba(248, 113, 113, 0.1);
462
+ box-shadow: 0 0 8px rgba(248, 113, 113, 0.2);
193
463
  }
194
464
 
195
465
  .log-container {
196
- height: 180px;
466
+ height: 160px;
197
467
  overflow-y: auto;
198
- background: var(--bg-primary);
199
- border: 1px solid var(--border-color);
468
+ background: var(--bg-void);
469
+ border: 1px solid rgba(229, 169, 60, 0.15);
200
470
  border-radius: 4px;
201
- padding: 12px;
471
+ padding: 12px 14px;
472
+ font-family: var(--font-mono);
202
473
  font-size: 12px;
203
474
  display: flex;
204
475
  flex-direction: column;
205
- gap: 6px;
476
+ gap: 5px;
206
477
  }
207
478
 
208
479
  .log-entry {
209
- color: var(--text-muted);
480
+ color: var(--text-dim);
481
+ line-height: 1.4;
210
482
  }
211
483
 
212
484
  .log-entry.active {
213
- color: var(--text-primary);
485
+ color: var(--text-parchment);
214
486
  }
215
487
 
216
488
  .log-entry .time {
217
- color: var(--accent-purple);
489
+ color: var(--gold-bright);
218
490
  margin-right: 8px;
491
+ font-weight: 500;
492
+ }
493
+
494
+ .chat-section-wrapper {
495
+ grid-column: 1 / -1;
496
+ display: grid;
497
+ grid-template-columns: minmax(0, 1fr) 370px;
498
+ gap: 20px;
499
+ align-items: stretch;
500
+ }
501
+
502
+ @media (max-width: 960px) {
503
+ .chat-section-wrapper {
504
+ grid-template-columns: 1fr;
505
+ }
506
+ }
507
+
508
+ .chat-panel {
509
+ display: flex;
510
+ flex-direction: column;
511
+ background: linear-gradient(180deg, rgba(13, 23, 40, 0.92) 0%, rgba(6, 11, 22, 0.98) 100%);
512
+ height: 100%;
513
+ }
514
+
515
+ .cheatsheet-panel {
516
+ display: flex;
517
+ flex-direction: column;
518
+ height: 100%;
519
+ background: linear-gradient(180deg, rgba(13, 23, 40, 0.92) 0%, rgba(6, 11, 22, 0.98) 100%);
520
+ }
521
+
522
+ .cheatsheet-panel .panel-header {
523
+ flex-direction: column;
524
+ align-items: stretch;
525
+ gap: 10px;
526
+ margin-bottom: 12px;
527
+ }
528
+
529
+ .cheatsheet-panel .panel-header .metric-meta {
530
+ padding-bottom: 2px;
531
+ }
532
+
533
+ .sidebar-tabs {
534
+ display: flex;
535
+ gap: 4px;
536
+ width: 100%;
537
+ }
538
+
539
+ .sidebar-tab {
540
+ flex: 1;
541
+ text-align: center;
542
+ justify-content: center;
543
+ background: rgba(4, 7, 13, 0.6);
544
+ border: 1px solid var(--bronze-border);
545
+ border-radius: 3px;
546
+ color: var(--text-dim);
547
+ font-family: var(--font-mythic);
548
+ font-size: 8.5px;
549
+ font-weight: 700;
550
+ letter-spacing: 0.5px;
551
+ padding: 5px 2px;
552
+ cursor: pointer;
553
+ white-space: nowrap;
554
+ min-width: 0;
555
+ overflow: hidden;
556
+ text-overflow: ellipsis;
557
+ transition: all 0.15s ease-in-out;
558
+ }
559
+
560
+ .sidebar-tab:hover {
561
+ color: var(--gold-bright);
562
+ border-color: var(--gold-aurum);
563
+ }
564
+
565
+ .sidebar-tab.active {
566
+ color: #04070d;
567
+ background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-aurum) 100%);
568
+ border-color: var(--gold-bright);
569
+ box-shadow: 0 0 8px var(--gold-glow);
570
+ }
571
+
572
+ .sidebar-tab-content {
573
+ display: flex;
574
+ flex-direction: column;
575
+ flex: 1;
576
+ min-height: 0;
577
+ overflow: hidden;
578
+ }
579
+
580
+ .hidden {
581
+ display: none !important;
582
+ }
583
+
584
+ .file-tree-toolbar {
585
+ display: flex;
586
+ align-items: center;
587
+ justify-content: space-between;
588
+ padding: 4px 6px 8px;
589
+ border-bottom: 1px solid var(--bronze-border);
590
+ margin-bottom: 8px;
591
+ }
592
+
593
+ .file-tree-cwd {
594
+ font-family: var(--font-mono);
595
+ font-size: 11px;
596
+ font-weight: 700;
597
+ color: var(--gold-bright);
598
+ letter-spacing: 0.5px;
599
+ overflow: hidden;
600
+ text-overflow: ellipsis;
601
+ white-space: nowrap;
602
+ }
603
+
604
+ .file-tree-refresh-btn {
605
+ background: rgba(229, 169, 60, 0.08);
606
+ border: 1px solid var(--bronze-border);
607
+ border-radius: 3px;
608
+ color: var(--gold-bright);
609
+ cursor: pointer;
610
+ font-size: 12px;
611
+ padding: 1px 7px;
612
+ line-height: 1.3;
613
+ transition: all 0.15s ease-in-out;
614
+ }
615
+
616
+ .file-tree-refresh-btn:hover {
617
+ border-color: var(--gold-bright);
618
+ box-shadow: 0 0 6px var(--gold-glow);
619
+ }
620
+
621
+ .file-tree {
622
+ overflow-y: auto;
623
+ flex: 1;
624
+ min-height: 0;
625
+ max-height: 480px;
626
+ padding-right: 4px;
627
+ font-family: var(--font-mono);
628
+ font-size: 12px;
629
+ }
630
+
631
+ .file-tree-loading {
632
+ color: var(--text-dim);
633
+ font-size: 11px;
634
+ font-style: italic;
635
+ padding: 16px 6px;
636
+ text-align: center;
637
+ }
638
+
639
+ .tree-list {
640
+ list-style: none;
641
+ padding: 0;
642
+ margin: 0;
643
+ display: flex;
644
+ flex-direction: column;
645
+ gap: 2px;
646
+ }
647
+
648
+ .tree-node {
649
+ display: flex;
650
+ align-items: center;
651
+ flex-wrap: wrap;
652
+ padding: 2px 0;
653
+ border-radius: 3px;
654
+ transition: background 0.12s ease;
655
+ }
656
+
657
+ .tree-node:hover {
658
+ background: rgba(229, 169, 60, 0.06);
659
+ }
660
+
661
+ .tree-icon {
662
+ display: inline-flex;
663
+ align-items: center;
664
+ justify-content: center;
665
+ width: 18px;
666
+ font-size: 10px;
667
+ color: var(--text-ancient);
668
+ user-select: none;
669
+ }
670
+
671
+ .tree-dir-icon {
672
+ cursor: pointer;
673
+ transition: transform 0.15s ease-in-out;
674
+ color: var(--gold-bright);
675
+ font-size: 9px;
676
+ }
677
+
678
+ .tree-dir-icon.expanded {
679
+ transform: rotate(90deg);
680
+ }
681
+
682
+ .tree-file-icon {
683
+ font-size: 11px;
684
+ opacity: 0.8;
685
+ }
686
+
687
+ .tree-label {
688
+ cursor: pointer;
689
+ padding: 2px 5px;
690
+ border-radius: 3px;
691
+ overflow: hidden;
692
+ text-overflow: ellipsis;
693
+ white-space: nowrap;
694
+ user-select: none;
695
+ font-family: inherit;
696
+ }
697
+
698
+ .tree-label.tree-dir {
699
+ font-weight: 600;
700
+ color: var(--text-parchment);
701
+ }
702
+
703
+ .tree-label.tree-dir:hover {
704
+ color: var(--gold-bright);
705
+ }
706
+
707
+ .tree-label.tree-file {
708
+ color: var(--text-dim);
709
+ transition: color 0.15s, background 0.15s;
710
+ }
711
+
712
+ .tree-label.tree-file:hover {
713
+ color: var(--gold-bright);
714
+ background: rgba(229, 169, 60, 0.12);
715
+ }
716
+
717
+ .tree-node > .tree-list {
718
+ width: 100%;
719
+ margin-top: 2px;
720
+ }
721
+
722
+ .context-files-list {
723
+ display: flex;
724
+ flex-direction: column;
725
+ gap: 6px;
726
+ flex: 1;
727
+ min-height: 0;
728
+ max-height: 480px;
729
+ overflow-y: auto;
730
+ padding-right: 4px;
731
+ }
732
+
733
+ .context-file-chip {
734
+ display: flex;
735
+ align-items: center;
736
+ justify-content: space-between;
737
+ background: var(--bg-void);
738
+ border: 1px solid var(--bronze-border);
739
+ border-radius: 3px;
740
+ padding: 5px 8px;
741
+ font-family: var(--font-mono);
742
+ font-size: 11px;
743
+ }
744
+
745
+ .context-file-chip:hover {
746
+ border-color: var(--gold-aurum);
747
+ box-shadow: 0 0 6px var(--gold-glow);
748
+ }
749
+
750
+ .context-file-name {
751
+ color: var(--gold-bright);
752
+ overflow: hidden;
753
+ text-overflow: ellipsis;
754
+ white-space: nowrap;
755
+ font-family: inherit;
756
+ cursor: pointer;
757
+ }
758
+
759
+ .context-file-remove {
760
+ background: transparent;
761
+ border: none;
762
+ color: var(--text-ancient);
763
+ cursor: pointer;
764
+ font-size: 12px;
765
+ padding: 0 4px;
766
+ line-height: 1;
767
+ transition: color 0.15s;
768
+ }
769
+
770
+ .context-file-remove:hover {
771
+ color: var(--icarus-red);
772
+ }
773
+
774
+ .cheatsheet-content {
775
+ overflow-y: auto;
776
+ display: flex;
777
+ flex-direction: column;
778
+ gap: 14px;
779
+ padding-right: 4px;
780
+ flex: 1;
781
+ min-height: 0;
782
+ max-height: 480px;
783
+ }
784
+
785
+ .cmd-group {
786
+ display: flex;
787
+ flex-direction: column;
788
+ gap: 6px;
789
+ }
790
+
791
+ .cmd-group-title {
792
+ font-family: var(--font-mythic);
793
+ font-size: 9.5px;
794
+ letter-spacing: 1.5px;
795
+ color: var(--gold-bright);
796
+ font-weight: 700;
797
+ border-bottom: 1px solid var(--bronze-border);
798
+ padding-bottom: 3px;
799
+ margin-top: 2px;
800
+ opacity: 0.85;
801
+ }
802
+
803
+ .cmd-chip {
804
+ background: var(--bg-void);
805
+ border: 1px solid rgba(229, 169, 60, 0.18);
806
+ border-radius: 4px;
807
+ padding: 6px 10px;
808
+ text-align: left;
809
+ cursor: pointer;
810
+ transition: all 0.15s ease-in-out;
811
+ font-family: var(--font-mono);
812
+ font-size: 12px;
813
+ }
814
+
815
+ .cmd-chip code {
816
+ color: var(--gold-bright);
817
+ background: transparent;
818
+ }
819
+
820
+ .cmd-chip:hover {
821
+ border-color: var(--gold-bright);
822
+ background: rgba(229, 169, 60, 0.1);
823
+ transform: translateX(3px);
824
+ box-shadow: 0 0 8px var(--gold-glow);
825
+ }
826
+
827
+ .cmd-chip:active {
828
+ transform: scale(0.98);
829
+ }
830
+
831
+ .chat-badges {
832
+ display: flex;
833
+ align-items: center;
834
+ gap: 8px;
835
+ }
836
+
837
+ .chat-badges .badge {
838
+ font-family: var(--font-mythic);
839
+ font-size: 10px;
840
+ font-weight: 700;
841
+ letter-spacing: 1.5px;
842
+ padding: 3px 10px;
843
+ border-radius: 3px;
844
+ background: rgba(229, 169, 60, 0.1);
845
+ color: var(--gold-bright);
846
+ border: 1px solid var(--bronze-border);
847
+ }
848
+
849
+ .chat-header-btn {
850
+ background: rgba(229, 169, 60, 0.08);
851
+ border: 1px solid var(--bronze-border);
852
+ border-radius: 3px;
853
+ color: var(--gold-bright);
854
+ font-family: var(--font-mythic);
855
+ font-size: 9.5px;
856
+ font-weight: 700;
857
+ letter-spacing: 1px;
858
+ padding: 3px 9px;
859
+ cursor: pointer;
860
+ transition: all 0.2s ease;
861
+ }
862
+
863
+ .chat-header-btn:hover {
864
+ border-color: var(--delphic-green);
865
+ color: var(--delphic-green);
866
+ background: rgba(52, 211, 153, 0.1);
867
+ box-shadow: 0 0 8px rgba(52, 211, 153, 0.2);
868
+ }
869
+
870
+ .chat-messages {
871
+ flex: 1;
872
+ min-height: 520px;
873
+ max-height: calc(100vh - 280px);
874
+ overflow-y: auto;
875
+ background: var(--bg-void);
876
+ border: 1px solid var(--bronze-border);
877
+ border-radius: 6px;
878
+ padding: 20px 24px;
879
+ display: flex;
880
+ flex-direction: column;
881
+ gap: 16px;
882
+ margin-bottom: 12px;
883
+ }
884
+
885
+ .chat-msg {
886
+ padding: 14px 18px;
887
+ border-radius: 6px;
888
+ font-size: 14px;
889
+ line-height: 1.65;
890
+ max-width: 95%;
891
+ position: relative;
892
+ transition: border-color 0.2s ease;
893
+ }
894
+
895
+ .chat-msg.assistant {
896
+ align-self: flex-start;
897
+ width: 98%;
898
+ background: linear-gradient(145deg, rgba(13, 23, 40, 0.95) 0%, rgba(6, 12, 24, 0.98) 100%);
899
+ border-left: 3px solid var(--gold-bright);
900
+ border-top: 1px solid rgba(229, 169, 60, 0.15);
901
+ border-right: 1px solid rgba(229, 169, 60, 0.1);
902
+ border-bottom: 1px solid rgba(229, 169, 60, 0.1);
903
+ color: var(--text-parchment);
904
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
905
+ }
906
+
907
+ .chat-msg.user {
908
+ align-self: flex-end;
909
+ background: linear-gradient(135deg, rgba(30, 27, 75, 0.85) 0%, rgba(20, 18, 50, 0.95) 100%);
910
+ border-right: 3px solid var(--athena-purple);
911
+ border-top: 1px solid rgba(167, 139, 250, 0.25);
912
+ border-left: 1px solid rgba(167, 139, 250, 0.12);
913
+ border-bottom: 1px solid rgba(167, 139, 250, 0.12);
914
+ color: #fff;
915
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
916
+ }
917
+
918
+ .chat-msg.error {
919
+ align-self: center;
920
+ background: rgba(248, 113, 113, 0.12);
921
+ border: 1px solid rgba(248, 113, 113, 0.4);
922
+ color: #fca5a5;
923
+ width: 100%;
924
+ }
925
+
926
+ .msg-header {
927
+ display: flex;
928
+ align-items: center;
929
+ gap: 8px;
930
+ margin-bottom: 8px;
931
+ padding-bottom: 6px;
932
+ border-bottom: 1px solid rgba(229, 169, 60, 0.08);
933
+ width: 100%;
934
+ }
935
+
936
+ .msg-header .sender {
937
+ font-family: var(--font-mythic);
938
+ font-weight: 700;
939
+ font-size: 11px;
940
+ letter-spacing: 1.5px;
941
+ }
942
+
943
+ .chat-msg.assistant .sender {
944
+ color: var(--gold-bright);
945
+ }
946
+
947
+ .chat-msg.user .sender {
948
+ color: var(--athena-purple);
949
+ }
950
+
951
+ .badge-role {
952
+ font-family: var(--font-mythic);
953
+ font-size: 9px;
954
+ font-weight: 700;
955
+ letter-spacing: 1px;
956
+ padding: 1px 6px;
957
+ border-radius: 2px;
958
+ background: rgba(229, 169, 60, 0.12);
959
+ border: 1px solid rgba(229, 169, 60, 0.25);
960
+ color: var(--gold-bright);
961
+ }
962
+
963
+ .badge-role.themis, .badge-role[data-role="spec"] {
964
+ background: rgba(56, 189, 248, 0.12);
965
+ border-color: rgba(56, 189, 248, 0.3);
966
+ color: #38bdf8;
967
+ }
968
+
969
+ .badge-role.metis, .badge-role[data-role="planner"] {
970
+ background: rgba(167, 139, 250, 0.12);
971
+ border-color: rgba(167, 139, 250, 0.3);
972
+ color: #a78bfa;
973
+ }
974
+
975
+ .badge-role.hephaestus, .badge-role[data-role="coder"] {
976
+ background: rgba(249, 115, 22, 0.12);
977
+ border-color: rgba(249, 115, 22, 0.3);
978
+ color: #fb923c;
979
+ }
980
+
981
+ .badge-role.apollo, .badge-role[data-role="reviewer"] {
982
+ background: rgba(245, 158, 11, 0.12);
983
+ border-color: rgba(245, 158, 11, 0.3);
984
+ color: #fbbf24;
985
+ }
986
+
987
+ .badge-role.asclepius, .badge-role[data-role="debugger"] {
988
+ background: rgba(52, 211, 153, 0.12);
989
+ border-color: rgba(52, 211, 153, 0.3);
990
+ color: #34d399;
991
+ }
992
+
993
+ .badge-role.mnemosyne, .badge-role[data-role="researcher"] {
994
+ background: rgba(192, 132, 252, 0.12);
995
+ border-color: rgba(192, 132, 252, 0.3);
996
+ color: #c084fc;
997
+ }
998
+
999
+ .msg-timestamp {
1000
+ margin-left: auto;
1001
+ font-family: var(--font-mono);
1002
+ font-size: 10px;
1003
+ color: var(--text-ancient);
1004
+ letter-spacing: 0.5px;
1005
+ opacity: 0.85;
1006
+ }
1007
+
1008
+ .copy-btn {
1009
+ background: transparent;
1010
+ border: 1px solid var(--bronze-border);
1011
+ border-radius: 3px;
1012
+ color: var(--gold-bright);
1013
+ font-family: var(--font-mythic);
1014
+ font-size: 9px;
1015
+ font-weight: 700;
1016
+ letter-spacing: 1px;
1017
+ padding: 1px 7px;
1018
+ cursor: pointer;
1019
+ opacity: 0;
1020
+ transition: opacity 0.15s, color 0.15s, border-color 0.15s;
1021
+ line-height: 1.6;
1022
+ }
1023
+
1024
+ .chat-msg.assistant:hover .copy-btn {
1025
+ opacity: 1;
1026
+ }
1027
+
1028
+ .copy-btn:hover {
1029
+ color: #04070d;
1030
+ background: var(--gold-bright);
1031
+ border-color: var(--gold-bright);
1032
+ box-shadow: 0 0 6px var(--gold-glow);
1033
+ }
1034
+
1035
+ .copy-btn.copied {
1036
+ opacity: 1;
1037
+ color: var(--delphic-green);
1038
+ border-color: var(--delphic-green);
1039
+ background: transparent;
1040
+ }
1041
+
1042
+ .msg-body {
1043
+ word-break: break-word;
1044
+ font-size: 14px;
1045
+ line-height: 1.68;
1046
+ color: #f1f5f9;
1047
+ }
1048
+
1049
+ .msg-body p {
1050
+ margin: 0 0 10px;
1051
+ }
1052
+
1053
+ .msg-body p:last-child {
1054
+ margin-bottom: 0;
1055
+ }
1056
+
1057
+ .msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4 {
1058
+ margin: 16px 0 8px;
1059
+ color: #ffffff;
1060
+ font-family: var(--font-mythic);
1061
+ font-weight: 700;
1062
+ letter-spacing: 0.8px;
1063
+ line-height: 1.35;
1064
+ }
1065
+
1066
+ .msg-body h1 {
1067
+ font-size: 16px;
1068
+ color: var(--gold-bright);
1069
+ border-bottom: 1px solid rgba(229, 169, 60, 0.25);
1070
+ padding-bottom: 5px;
1071
+ }
1072
+
1073
+ .msg-body h2 {
1074
+ font-size: 14.5px;
1075
+ color: var(--gold-bright);
1076
+ }
1077
+
1078
+ .msg-body h3 {
1079
+ font-size: 13.5px;
1080
+ color: var(--aegean-cyan);
1081
+ }
1082
+
1083
+ .msg-body h4 {
1084
+ font-size: 12.5px;
1085
+ color: var(--text-parchment);
1086
+ }
1087
+
1088
+ .msg-body ul, .msg-body ol {
1089
+ margin: 8px 0 12px;
1090
+ padding-left: 20px;
1091
+ }
1092
+
1093
+ .msg-body li {
1094
+ margin-bottom: 5px;
1095
+ line-height: 1.6;
1096
+ }
1097
+
1098
+ .msg-body li::marker {
1099
+ color: var(--gold-aurum);
1100
+ }
1101
+
1102
+ .msg-body hr {
1103
+ border: none;
1104
+ border-top: 1px solid rgba(229, 169, 60, 0.2);
1105
+ margin: 16px 0;
1106
+ }
1107
+
1108
+ .msg-body pre {
1109
+ background: #02050b;
1110
+ border: 1px solid var(--bronze-border);
1111
+ border-radius: 4px;
1112
+ padding: 12px;
1113
+ overflow-x: auto;
1114
+ margin: 10px 0;
1115
+ }
1116
+
1117
+ .msg-body pre code {
1118
+ background: transparent;
1119
+ padding: 0;
1120
+ border-radius: 0;
1121
+ color: var(--text-parchment);
1122
+ font-family: var(--font-mono);
1123
+ font-size: 12.5px;
1124
+ border: none;
1125
+ }
1126
+
1127
+ .msg-body code {
1128
+ background: rgba(4, 7, 13, 0.85);
1129
+ padding: 2px 6px;
1130
+ border-radius: 3px;
1131
+ color: var(--gold-bright);
1132
+ font-family: var(--font-mono);
1133
+ font-size: 12px;
1134
+ border: 1px solid rgba(229, 169, 60, 0.18);
1135
+ }
1136
+
1137
+ .msg-body table {
1138
+ border-collapse: collapse;
1139
+ width: 100%;
1140
+ margin: 12px 0;
1141
+ font-size: 12.5px;
1142
+ }
1143
+
1144
+ .msg-body th, .msg-body td {
1145
+ border: 1px solid rgba(229, 169, 60, 0.15);
1146
+ padding: 7px 12px;
1147
+ text-align: left;
1148
+ }
1149
+
1150
+ .msg-body th {
1151
+ background: rgba(229, 169, 60, 0.08);
1152
+ color: var(--gold-bright);
1153
+ font-family: var(--font-mythic);
1154
+ font-weight: 700;
1155
+ letter-spacing: 0.5px;
1156
+ }
1157
+
1158
+ .msg-body blockquote {
1159
+ margin: 10px 0;
1160
+ padding-left: 14px;
1161
+ border-left: 3px solid var(--gold-aurum);
1162
+ color: var(--text-dim);
1163
+ font-style: italic;
1164
+ }
1165
+
1166
+ /* Assistant Message CLI-Style Metadata Footer */
1167
+ .msg-cli-footer {
1168
+ display: flex;
1169
+ align-items: center;
1170
+ justify-content: space-between;
1171
+ margin-top: 12px;
1172
+ padding-top: 8px;
1173
+ border-top: 1px solid rgba(229, 169, 60, 0.12);
1174
+ font-family: var(--font-mono);
1175
+ font-size: 10.5px;
1176
+ color: var(--text-dim);
1177
+ letter-spacing: 0.3px;
1178
+ }
1179
+
1180
+ .msg-cli-footer-left {
1181
+ display: flex;
1182
+ align-items: center;
1183
+ flex-wrap: wrap;
1184
+ gap: 8px;
1185
+ }
1186
+
1187
+ .msg-cli-footer-divider {
1188
+ color: var(--bronze-border-strong);
1189
+ font-size: 9px;
1190
+ user-select: none;
1191
+ }
1192
+
1193
+ .cli-pill {
1194
+ display: inline-flex;
1195
+ align-items: center;
1196
+ gap: 4px;
1197
+ }
1198
+
1199
+ .cli-pill-intel {
1200
+ color: var(--delphic-green);
1201
+ font-weight: 600;
1202
+ }
1203
+
1204
+ .cli-pill-intel .cli-dot {
1205
+ font-size: 8px;
1206
+ }
1207
+
1208
+ .cli-pill-model {
1209
+ color: var(--aegean-cyan);
1210
+ background: rgba(56, 189, 248, 0.08);
1211
+ padding: 1px 6px;
1212
+ border-radius: 3px;
1213
+ border: 1px solid rgba(56, 189, 248, 0.2);
1214
+ }
1215
+
1216
+ .cli-pill-tools {
1217
+ color: var(--solar-amber);
1218
+ }
1219
+
1220
+ .cli-pill-speed {
1221
+ color: var(--gold-bright);
1222
+ }
1223
+
1224
+ .cli-pill-time {
1225
+ color: var(--text-ancient);
1226
+ }
1227
+
1228
+ .chat-form {
1229
+ display: flex;
1230
+ gap: 8px;
1231
+ }
1232
+
1233
+ .chat-form textarea,
1234
+ .chat-form input {
1235
+ flex: 1;
1236
+ background: var(--bg-void);
1237
+ border: 1px solid var(--bronze-border);
1238
+ border-radius: 4px;
1239
+ padding: 10px 14px;
1240
+ color: var(--text-marble);
1241
+ font-family: var(--font-mono);
1242
+ font-size: 13px;
1243
+ line-height: 1.5;
1244
+ outline: none;
1245
+ resize: none;
1246
+ min-height: 40px;
1247
+ max-height: 180px;
1248
+ overflow-y: auto;
1249
+ transition: border-color 0.2s, box-shadow 0.2s;
1250
+ }
1251
+
1252
+ .chat-form textarea:focus,
1253
+ .chat-form input:focus {
1254
+ border-color: var(--gold-bright);
1255
+ box-shadow: 0 0 10px var(--gold-glow);
1256
+ }
1257
+
1258
+ .send-btn {
1259
+ background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold-aurum) 100%);
1260
+ color: #04070d;
1261
+ font-family: var(--font-mythic);
1262
+ font-weight: 900;
1263
+ border: none;
1264
+ border-radius: 4px;
1265
+ padding: 10px 20px;
1266
+ font-size: 11px;
1267
+ cursor: pointer;
1268
+ letter-spacing: 1.5px;
1269
+ transition: all 0.2s ease;
1270
+ box-shadow: 0 0 10px var(--gold-glow);
1271
+ }
1272
+
1273
+ .send-btn:hover {
1274
+ transform: translateY(-1px);
1275
+ box-shadow: 0 0 16px rgba(245, 195, 88, 0.45);
1276
+ }
1277
+
1278
+ .send-btn:active {
1279
+ transform: scale(0.97);
1280
+ }
1281
+
1282
+ .chat-msg.thinking {
1283
+ align-self: flex-start;
1284
+ background: rgba(13, 23, 40, 0.7);
1285
+ border-left: 3px solid var(--gold-aurum);
1286
+ display: flex;
1287
+ align-items: center;
1288
+ gap: 12px;
1289
+ color: var(--gold-bright);
1290
+ font-family: var(--font-mythic);
1291
+ font-size: 11px;
1292
+ letter-spacing: 1px;
1293
+ }
1294
+
1295
+ .thinking-dots {
1296
+ display: inline-flex;
1297
+ align-items: center;
1298
+ gap: 5px;
1299
+ }
1300
+
1301
+ .thinking-dots span {
1302
+ width: 6px;
1303
+ height: 6px;
1304
+ background: var(--gold-bright);
1305
+ border-radius: 50%;
1306
+ animation: pulse-dot 1.2s infinite ease-in-out both;
1307
+ box-shadow: 0 0 6px var(--gold-glow);
1308
+ }
1309
+
1310
+ .thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
1311
+ .thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
1312
+ .thinking-dots span:nth-child(3) { animation-delay: 0s; }
1313
+
1314
+ @keyframes pulse-dot {
1315
+ 0%, 80%, 100% {
1316
+ transform: scale(0.3);
1317
+ opacity: 0.3;
1318
+ }
1319
+ 40% {
1320
+ transform: scale(1);
1321
+ opacity: 1;
1322
+ }
1323
+ }
1324
+
1325
+ .chat-panel.drag-over {
1326
+ border-color: var(--gold-bright) !important;
1327
+ box-shadow: 0 0 16px rgba(229, 169, 60, 0.3) inset;
1328
+ }
1329
+
1330
+ .attach-btn {
1331
+ background: var(--bg-void) !important;
1332
+ border: 1px solid var(--bronze-border);
1333
+ border-radius: 4px;
1334
+ color: var(--gold-bright);
1335
+ font-size: 14px;
1336
+ padding: 0 14px;
1337
+ cursor: pointer;
1338
+ display: inline-flex;
1339
+ align-items: center;
1340
+ justify-content: center;
1341
+ transition: all 0.15s ease-in-out;
1342
+ outline: none;
1343
+ flex-shrink: 0;
1344
+ }
1345
+
1346
+ .attach-btn svg {
1347
+ stroke: var(--gold-bright);
1348
+ transition: stroke 0.15s ease-in-out, transform 0.15s ease-in-out;
1349
+ }
1350
+
1351
+ .attach-btn:hover {
1352
+ border-color: var(--gold-bright);
1353
+ background: rgba(229, 169, 60, 0.12) !important;
1354
+ box-shadow: 0 0 8px var(--gold-glow);
1355
+ }
1356
+
1357
+ .attach-btn:hover svg {
1358
+ transform: rotate(-12deg) scale(1.1);
1359
+ }
1360
+
1361
+ .attach-btn:active {
1362
+ transform: scale(0.95);
1363
+ }
1364
+
1365
+ .attachment-preview {
1366
+ display: flex;
1367
+ flex-wrap: wrap;
1368
+ gap: 8px;
1369
+ margin-bottom: 8px;
1370
+ padding: 4px 2px;
1371
+ }
1372
+
1373
+ .attachment-chip {
1374
+ display: inline-flex;
1375
+ align-items: center;
1376
+ gap: 6px;
1377
+ background: rgba(229, 169, 60, 0.08);
1378
+ border: 1px solid var(--bronze-border);
1379
+ border-radius: 4px;
1380
+ padding: 4px 8px;
1381
+ font-family: var(--font-mono);
1382
+ font-size: 11px;
1383
+ color: var(--text-marble);
1384
+ max-width: 240px;
1385
+ }
1386
+
1387
+ .attachment-thumb {
1388
+ width: 24px;
1389
+ height: 24px;
1390
+ border-radius: 3px;
1391
+ object-fit: cover;
1392
+ border: 1px solid rgba(229, 169, 60, 0.2);
1393
+ }
1394
+
1395
+ .attachment-name {
1396
+ overflow: hidden;
1397
+ text-overflow: ellipsis;
1398
+ white-space: nowrap;
1399
+ font-weight: 600;
1400
+ color: var(--gold-bright);
1401
+ }
1402
+
1403
+ .attachment-remove {
1404
+ background: transparent;
1405
+ border: none;
1406
+ color: var(--text-ancient);
1407
+ cursor: pointer;
1408
+ font-size: 14px;
1409
+ line-height: 1;
1410
+ padding: 0 2px;
1411
+ transition: color 0.15s;
1412
+ }
1413
+
1414
+ .attachment-remove:hover {
1415
+ color: var(--icarus-red);
1416
+ }
1417
+
1418
+ .chat-msg-img {
1419
+ max-width: 100%;
1420
+ max-height: 240px;
1421
+ border-radius: 4px;
1422
+ margin-bottom: 8px;
1423
+ border: 1px solid var(--bronze-border);
1424
+ display: block;
1425
+ }
1426
+
1427
+ /* Sessions (Chronicles) Tab */
1428
+ .session-toolbar-actions {
1429
+ display: flex;
1430
+ gap: 4px;
1431
+ }
1432
+
1433
+ .sessions-list {
1434
+ display: flex;
1435
+ flex-direction: column;
1436
+ gap: 8px;
1437
+ flex: 1;
1438
+ min-height: 0;
1439
+ max-height: 480px;
1440
+ overflow-y: auto;
1441
+ padding-right: 4px;
1442
+ }
1443
+
1444
+ .session-card {
1445
+ background: var(--bg-void);
1446
+ border: 1px solid var(--bronze-border);
1447
+ border-radius: 4px;
1448
+ padding: 8px 10px;
1449
+ transition: all 0.2s ease;
1450
+ display: flex;
1451
+ flex-direction: column;
1452
+ gap: 4px;
1453
+ }
1454
+
1455
+ .session-card:hover {
1456
+ border-color: var(--gold-bright);
1457
+ background: rgba(229, 169, 60, 0.05);
1458
+ box-shadow: 0 0 8px var(--gold-glow);
1459
+ }
1460
+
1461
+ .session-card.active {
1462
+ border-color: var(--gold-bright);
1463
+ border-left: 3px solid var(--gold-bright);
1464
+ background: rgba(229, 169, 60, 0.08);
1465
+ }
1466
+
1467
+ .session-card-header {
1468
+ display: flex;
1469
+ align-items: center;
1470
+ justify-content: space-between;
1471
+ gap: 6px;
1472
+ }
1473
+
1474
+ .session-card-title {
1475
+ font-family: var(--font-mythic);
1476
+ font-size: 11px;
1477
+ font-weight: 700;
1478
+ color: var(--text-parchment);
1479
+ overflow: hidden;
1480
+ text-overflow: ellipsis;
1481
+ white-space: nowrap;
1482
+ letter-spacing: 0.5px;
1483
+ }
1484
+
1485
+ .session-card-date {
1486
+ font-family: var(--font-mono);
1487
+ font-size: 9.5px;
1488
+ color: var(--text-ancient);
1489
+ }
1490
+
1491
+ .session-card-meta {
1492
+ display: flex;
1493
+ align-items: center;
1494
+ justify-content: space-between;
1495
+ margin-top: 2px;
1496
+ }
1497
+
1498
+ .session-actions {
1499
+ display: flex;
1500
+ gap: 4px;
1501
+ margin-left: auto;
1502
+ }
1503
+
1504
+ .session-btn {
1505
+ background: rgba(229, 169, 60, 0.08);
1506
+ border: 1px solid var(--bronze-border);
1507
+ border-radius: 2px;
1508
+ color: var(--gold-bright);
1509
+ font-family: var(--font-mythic);
1510
+ font-size: 9px;
1511
+ font-weight: 700;
1512
+ padding: 1px 6px;
1513
+ cursor: pointer;
1514
+ transition: all 0.15s ease;
1515
+ }
1516
+
1517
+ .session-btn:hover {
1518
+ background: var(--gold-bright);
1519
+ color: #04070d;
1520
+ }
1521
+
1522
+ .session-btn.delete:hover {
1523
+ background: rgba(248, 113, 113, 0.2);
1524
+ border-color: var(--icarus-red);
1525
+ color: var(--icarus-red);
1526
+ }
1527
+
1528
+ /* Code Block Wrapper & Header */
1529
+ .code-block-wrapper {
1530
+ margin: 10px 0;
1531
+ background: #03060c;
1532
+ border: 1px solid var(--bronze-border);
1533
+ border-radius: 4px;
1534
+ overflow: hidden;
1535
+ }
1536
+
1537
+ .code-block-header {
1538
+ display: flex;
1539
+ align-items: center;
1540
+ justify-content: space-between;
1541
+ background: rgba(229, 169, 60, 0.06);
1542
+ border-bottom: 1px solid rgba(229, 169, 60, 0.15);
1543
+ padding: 3px 10px;
1544
+ font-family: var(--font-mono);
1545
+ font-size: 10.5px;
1546
+ }
1547
+
1548
+ .code-lang {
1549
+ color: var(--gold-bright);
1550
+ font-weight: 600;
1551
+ letter-spacing: 0.5px;
1552
+ text-transform: uppercase;
1553
+ }
1554
+
1555
+ .code-copy-btn {
1556
+ background: transparent;
1557
+ border: 1px solid rgba(229, 169, 60, 0.2);
1558
+ border-radius: 2px;
1559
+ color: var(--text-ancient);
1560
+ font-family: var(--font-mythic);
1561
+ font-size: 8.5px;
1562
+ font-weight: 700;
1563
+ letter-spacing: 0.5px;
1564
+ padding: 1px 6px;
1565
+ cursor: pointer;
1566
+ transition: all 0.15s ease;
1567
+ }
1568
+
1569
+ .code-copy-btn:hover {
1570
+ border-color: var(--gold-bright);
1571
+ color: var(--gold-bright);
1572
+ box-shadow: 0 0 6px var(--gold-glow);
1573
+ }
1574
+
1575
+ .code-copy-btn.copied {
1576
+ color: var(--delphic-green);
1577
+ border-color: var(--delphic-green);
1578
+ }
1579
+
1580
+ .code-block-wrapper pre {
1581
+ margin: 0;
1582
+ border: none;
1583
+ border-radius: 0;
1584
+ padding: 12px;
1585
+ background: transparent;
1586
+ }
1587
+
1588
+ /* Syntax Highlighting Colors */
1589
+ .hl-keyword { color: #f472b6; font-weight: 600; }
1590
+ .hl-string { color: #34d399; }
1591
+ .hl-number { color: #fb923c; }
1592
+ .hl-comment { color: #64748b; font-style: italic; }
1593
+ .hl-function { color: #38bdf8; font-weight: 600; }
1594
+ .hl-operator { color: #e5a93c; }
1595
+ .hl-boolean { color: #a78bfa; font-weight: 600; }
1596
+ .hl-builtin { color: #f5c358; }
1597
+ .hl-variable { color: #e2e8f0; }
1598
+
1599
+ /* In-Chat CLI-Style Tool Execution Tree */
1600
+ .tool-execution-tree {
1601
+ margin: 8px 0 10px;
1602
+ background: rgba(4, 7, 13, 0.95);
1603
+ border: 1px solid var(--bronze-border);
1604
+ border-left: 3px solid var(--gold-aurum);
1605
+ border-radius: 4px;
1606
+ font-family: var(--font-mono);
1607
+ font-size: 11.5px;
1608
+ overflow: hidden;
1609
+ transition: all 0.2s ease;
1610
+ width: 98%;
1611
+ }
1612
+
1613
+ .tool-execution-tree.running {
1614
+ border-left-color: var(--solar-amber);
1615
+ }
1616
+
1617
+ .tool-execution-tree.completed {
1618
+ border-left-color: var(--delphic-green);
1619
+ }
1620
+
1621
+ .tool-execution-tree.error {
1622
+ border-left-color: var(--icarus-red);
1623
+ }
1624
+
1625
+ .tool-tree-header {
1626
+ display: flex;
1627
+ align-items: center;
1628
+ justify-content: space-between;
1629
+ padding: 6px 12px;
1630
+ cursor: pointer;
1631
+ user-select: none;
1632
+ background: rgba(229, 169, 60, 0.03);
1633
+ }
1634
+
1635
+ .tool-tree-header:hover {
1636
+ background: rgba(229, 169, 60, 0.08);
1637
+ }
1638
+
1639
+ .tool-tree-left {
1640
+ display: flex;
1641
+ align-items: center;
1642
+ gap: 8px;
1643
+ }
1644
+
1645
+ .tool-tree-rail {
1646
+ color: var(--text-ancient);
1647
+ font-weight: 700;
1648
+ font-size: 13px;
1649
+ }
1650
+
1651
+ .tool-tree-icon {
1652
+ font-size: 11px;
1653
+ }
1654
+
1655
+ .tool-tree-label {
1656
+ color: var(--text-parchment);
1657
+ font-weight: 500;
1658
+ font-size: 11.5px;
1659
+ }
1660
+
1661
+ .tool-tree-right {
1662
+ display: flex;
1663
+ align-items: center;
1664
+ gap: 8px;
1665
+ }
1666
+
1667
+ .tool-tree-badge {
1668
+ font-family: var(--font-mythic);
1669
+ font-size: 8.5px;
1670
+ font-weight: 700;
1671
+ letter-spacing: 0.5px;
1672
+ padding: 1px 6px;
1673
+ border-radius: 2px;
1674
+ }
1675
+
1676
+ .tool-tree-badge.running {
1677
+ background: rgba(251, 191, 36, 0.15);
1678
+ color: var(--solar-amber);
1679
+ }
1680
+
1681
+ .tool-tree-badge.completed {
1682
+ background: rgba(52, 211, 153, 0.15);
1683
+ color: var(--delphic-green);
1684
+ }
1685
+
1686
+ .tool-tree-count {
1687
+ font-size: 10px;
1688
+ color: var(--text-dim);
1689
+ }
1690
+
1691
+ .tool-tree-chevron {
1692
+ font-size: 9px;
1693
+ color: var(--text-ancient);
1694
+ transition: transform 0.2s ease;
1695
+ }
1696
+
1697
+ .tool-execution-tree.open .tool-tree-chevron {
1698
+ transform: rotate(90deg);
1699
+ }
1700
+
1701
+ .tool-tree-details {
1702
+ border-top: 1px solid rgba(229, 169, 60, 0.1);
1703
+ padding: 8px 12px;
1704
+ background: #02050a;
1705
+ max-height: 220px;
1706
+ overflow-y: auto;
1707
+ display: flex;
1708
+ flex-direction: column;
1709
+ gap: 6px;
1710
+ }
1711
+
1712
+ .tool-tree-details.hidden {
1713
+ display: none;
1714
+ }
1715
+
1716
+ .tool-tree-item {
1717
+ display: flex;
1718
+ align-items: flex-start;
1719
+ gap: 6px;
1720
+ font-size: 11px;
1721
+ line-height: 1.5;
1722
+ color: var(--text-dim);
1723
+ }
1724
+
1725
+ .tool-tree-item-rail {
1726
+ color: var(--text-ancient);
1727
+ user-select: none;
1728
+ font-weight: 700;
1729
+ white-space: nowrap;
1730
+ }
1731
+
1732
+ .tool-tree-item-name {
1733
+ color: var(--gold-bright);
1734
+ font-weight: 600;
1735
+ }
1736
+
1737
+ .tool-tree-item-summary {
1738
+ color: var(--text-dim);
1739
+ word-break: break-all;
1740
+ }
1741
+
1742
+ /* In-Chat Legacy Tool Accordions (Fallback) */
1743
+ .tool-accordion {
1744
+ margin: 6px 0;
1745
+ background: rgba(4, 7, 13, 0.95);
1746
+ border: 1px solid var(--bronze-border);
1747
+ border-left: 3px solid var(--gold-aurum);
1748
+ border-radius: 4px;
1749
+ overflow: hidden;
1750
+ transition: border-color 0.2s ease;
1751
+ width: 98%;
1752
+ }
1753
+
1754
+ .tool-accordion.running {
1755
+ border-left: 3px solid var(--solar-amber);
1756
+ }
1757
+
1758
+ .tool-accordion.completed {
1759
+ border-left: 3px solid var(--delphic-green);
1760
+ }
1761
+
1762
+ .tool-accordion.error {
1763
+ border-left: 3px solid var(--icarus-red);
1764
+ }
1765
+
1766
+ .tool-accordion-header {
1767
+ display: flex;
1768
+ align-items: center;
1769
+ justify-content: space-between;
1770
+ padding: 5px 10px;
1771
+ cursor: pointer;
1772
+ user-select: none;
1773
+ background: rgba(229, 169, 60, 0.03);
1774
+ }
1775
+
1776
+ .tool-accordion-header:hover {
1777
+ background: rgba(229, 169, 60, 0.08);
1778
+ }
1779
+
1780
+ .tool-accordion-left {
1781
+ display: flex;
1782
+ align-items: center;
1783
+ gap: 6px;
1784
+ }
1785
+
1786
+ .tool-accordion-icon {
1787
+ font-size: 11px;
1788
+ }
1789
+
1790
+ .tool-accordion-name {
1791
+ font-family: var(--font-mono);
1792
+ font-size: 11px;
1793
+ font-weight: 600;
1794
+ color: var(--text-parchment);
1795
+ }
1796
+
1797
+ .tool-accordion-status {
1798
+ font-family: var(--font-mythic);
1799
+ font-size: 8.5px;
1800
+ font-weight: 700;
1801
+ letter-spacing: 0.5px;
1802
+ padding: 1px 5px;
1803
+ border-radius: 2px;
1804
+ }
1805
+
1806
+ .tool-accordion-status.running {
1807
+ background: rgba(251, 191, 36, 0.15);
1808
+ color: var(--solar-amber);
1809
+ }
1810
+
1811
+ .tool-accordion-status.completed {
1812
+ background: rgba(52, 211, 153, 0.15);
1813
+ color: var(--delphic-green);
1814
+ }
1815
+
1816
+ .tool-accordion-chevron {
1817
+ font-size: 9px;
1818
+ color: var(--text-ancient);
1819
+ transition: transform 0.2s ease;
1820
+ margin-left: 6px;
1821
+ }
1822
+
1823
+ .tool-accordion.open .tool-accordion-chevron {
1824
+ transform: rotate(90deg);
1825
+ }
1826
+
1827
+ .tool-accordion-body {
1828
+ padding: 8px 10px;
1829
+ background: #02050a;
1830
+ border-top: 1px solid rgba(229, 169, 60, 0.1);
1831
+ font-family: var(--font-mono);
1832
+ font-size: 11px;
1833
+ color: var(--text-dim);
1834
+ max-height: 200px;
1835
+ overflow-y: auto;
1836
+ white-space: pre-wrap;
1837
+ word-break: break-word;
1838
+ }
1839
+
1840
+ /* Modal Dialog */
1841
+ .modal-overlay {
1842
+ position: fixed;
1843
+ top: 0;
1844
+ left: 0;
1845
+ right: 0;
1846
+ bottom: 0;
1847
+ background: rgba(3, 6, 12, 0.85);
1848
+ backdrop-filter: blur(8px);
1849
+ -webkit-backdrop-filter: blur(8px);
1850
+ display: flex;
1851
+ align-items: center;
1852
+ justify-content: center;
1853
+ z-index: 1000;
1854
+ padding: 20px;
1855
+ }
1856
+
1857
+ .modal-overlay.hidden {
1858
+ display: none;
1859
+ }
1860
+
1861
+ .modal-card {
1862
+ background: linear-gradient(180deg, rgba(13, 23, 40, 0.98) 0%, rgba(6, 11, 22, 1) 100%);
1863
+ border: 1px solid var(--bronze-border-strong);
1864
+ border-radius: 6px;
1865
+ width: 100%;
1866
+ max-width: 520px;
1867
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), 0 0 24px var(--gold-glow);
1868
+ overflow: hidden;
1869
+ position: relative;
1870
+ }
1871
+
1872
+ .modal-header {
1873
+ display: flex;
1874
+ align-items: center;
1875
+ justify-content: space-between;
1876
+ padding: 16px 20px;
1877
+ border-bottom: 1px solid var(--bronze-border);
1878
+ }
1879
+
1880
+ .modal-close-btn {
1881
+ background: transparent;
1882
+ border: none;
1883
+ color: var(--text-ancient);
1884
+ font-size: 20px;
1885
+ cursor: pointer;
1886
+ line-height: 1;
1887
+ padding: 2px 6px;
1888
+ transition: color 0.15s;
1889
+ }
1890
+
1891
+ .modal-close-btn:hover {
1892
+ color: var(--gold-bright);
1893
+ }
1894
+
1895
+ .modal-body {
1896
+ padding: 18px 20px 22px;
1897
+ }
1898
+
1899
+ .modal-subtitle {
1900
+ font-size: 12px;
1901
+ color: var(--text-dim);
1902
+ margin-bottom: 14px;
1903
+ }
1904
+
1905
+ .model-options-list {
1906
+ display: flex;
1907
+ flex-direction: column;
1908
+ gap: 8px;
1909
+ }
1910
+
1911
+ .model-option-card {
1912
+ background: var(--bg-void);
1913
+ border: 1px solid var(--bronze-border);
1914
+ border-radius: 4px;
1915
+ padding: 10px 14px;
1916
+ cursor: pointer;
1917
+ transition: all 0.2s ease;
1918
+ display: flex;
1919
+ flex-direction: column;
1920
+ gap: 4px;
1921
+ }
1922
+
1923
+ .model-option-card:hover {
1924
+ border-color: var(--gold-bright);
1925
+ background: rgba(229, 169, 60, 0.08);
1926
+ box-shadow: 0 0 10px var(--gold-glow);
1927
+ }
1928
+
1929
+ .model-option-card.active {
1930
+ border-color: var(--gold-bright);
1931
+ border-left: 4px solid var(--gold-bright);
1932
+ background: rgba(229, 169, 60, 0.12);
1933
+ }
1934
+
1935
+ .model-option-header {
1936
+ display: flex;
1937
+ align-items: center;
1938
+ justify-content: space-between;
1939
+ }
1940
+
1941
+ .model-option-name {
1942
+ font-family: var(--font-mythic);
1943
+ font-size: 12px;
1944
+ font-weight: 700;
1945
+ color: var(--gold-bright);
1946
+ letter-spacing: 0.5px;
1947
+ }
1948
+
1949
+ .model-option-badge {
1950
+ font-family: var(--font-mono);
1951
+ font-size: 10px;
1952
+ padding: 1px 6px;
1953
+ border-radius: 2px;
1954
+ background: rgba(229, 169, 60, 0.15);
1955
+ color: var(--text-parchment);
1956
+ }
1957
+
1958
+ .model-option-desc {
1959
+ font-size: 11px;
1960
+ color: var(--text-dim);
219
1961
  }