@199-bio/engram 0.8.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/.env.example +5 -0
  2. package/boba-prompt.md +107 -0
  3. package/dist/consolidation/consolidator.d.ts.map +1 -1
  4. package/dist/consolidation/plan.d.ts.map +1 -0
  5. package/dist/index.js +170 -9
  6. package/dist/retrieval/hybrid.d.ts.map +1 -1
  7. package/dist/storage/database.d.ts.map +1 -1
  8. package/dist/transport/http.d.ts.map +1 -0
  9. package/dist/transport/index.d.ts.map +1 -0
  10. package/dist/web/chat-handler.d.ts.map +1 -1
  11. package/nixpacks.toml +11 -0
  12. package/package.json +2 -1
  13. package/railway.json +13 -0
  14. package/src/consolidation/consolidator.ts +381 -29
  15. package/src/consolidation/plan.ts +444 -0
  16. package/src/index.ts +181 -10
  17. package/src/retrieval/hybrid.ts +69 -5
  18. package/src/storage/database.ts +358 -38
  19. package/src/transport/http.ts +111 -0
  20. package/src/transport/index.ts +24 -0
  21. package/src/web/chat-handler.ts +116 -70
  22. package/src/web/static/app.js +612 -360
  23. package/src/web/static/index.html +377 -130
  24. package/src/web/static/style.css +1249 -672
package/src/web/static/style.css CHANGED
@@ -1,31 +1,131 @@
1
- /* Engram Web Interface
2
- * Claude Desktop aesthetic: serif, cream, sharp corners, generous spacing
1
+ /* Engram Web Interface - Liquid Glass Design
2
+ * Inspired by macOS 26 Liquid Glass aesthetic
3
+ * Light/Dark mode with glassmorphism, blur effects, and modern UI
3
4
  */
4
5
 
6
+ /* ============ Design Tokens ============ */
5
7
  :root {
6
- /* Cream color scheme */
7
- --bg-primary: #faf8f5;
8
- --bg-secondary: #f5f2ed;
9
- --bg-tertiary: #ebe7e0;
10
- --text-primary: #1a1a1a;
11
- --text-secondary: #5c5c5c;
12
- --text-muted: #8c8c8c;
13
- --border: #d4d0c8;
14
- --border-hover: #b8b4ac;
15
- --accent: #d97706;
16
- --accent-hover: #b45309;
17
- --accent-subtle: rgba(217, 119, 6, 0.1);
18
- --success: #059669;
19
- --success-subtle: rgba(5, 150, 105, 0.1);
20
- --danger: #dc2626;
21
- --danger-subtle: rgba(220, 38, 38, 0.1);
22
- --shadow: rgba(0, 0, 0, 0.06);
23
- --shadow-lg: rgba(0, 0, 0, 0.1);
24
- --radius: 3px;
25
- --transition: 0.15s ease;
26
- }
27
-
28
- * {
8
+ /* Light Mode Colors */
9
+ --bg-base: #f5f5f7;
10
+ --bg-elevated: rgba(255, 255, 255, 0.72);
11
+ --bg-glass: rgba(255, 255, 255, 0.6);
12
+ --bg-glass-hover: rgba(255, 255, 255, 0.8);
13
+ --bg-solid: #ffffff;
14
+ --bg-input: rgba(255, 255, 255, 0.9);
15
+
16
+ --text-primary: #1d1d1f;
17
+ --text-secondary: #6e6e73;
18
+ --text-tertiary: #86868b;
19
+ --text-inverse: #ffffff;
20
+
21
+ --accent: #0071e3;
22
+ --accent-hover: #0077ed;
23
+ --accent-subtle: rgba(0, 113, 227, 0.12);
24
+ --accent-glow: rgba(0, 113, 227, 0.3);
25
+
26
+ --success: #34c759;
27
+ --success-subtle: rgba(52, 199, 89, 0.12);
28
+ --warning: #ff9f0a;
29
+ --warning-subtle: rgba(255, 159, 10, 0.12);
30
+ --danger: #ff3b30;
31
+ --danger-subtle: rgba(255, 59, 48, 0.12);
32
+
33
+ --border: rgba(0, 0, 0, 0.06);
34
+ --border-strong: rgba(0, 0, 0, 0.1);
35
+ --divider: rgba(0, 0, 0, 0.04);
36
+
37
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
38
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
39
+ --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
40
+ --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
41
+ --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);
42
+ --shadow-glow: 0 0 24px var(--accent-glow);
43
+
44
+ --blur-sm: 8px;
45
+ --blur-md: 16px;
46
+ --blur-lg: 24px;
47
+ --blur-xl: 40px;
48
+
49
+ --radius-sm: 8px;
50
+ --radius-md: 12px;
51
+ --radius-lg: 16px;
52
+ --radius-xl: 24px;
53
+ --radius-full: 9999px;
54
+
55
+ --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
56
+ --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
57
+ --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
58
+
59
+ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
60
+ --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, monospace;
61
+
62
+ --sidebar-width: 260px;
63
+ --header-height: 64px;
64
+ --chat-width: 400px;
65
+ }
66
+
67
+ /* Dark Mode */
68
+ [data-theme="dark"] {
69
+ --bg-base: #1c1c1e;
70
+ --bg-elevated: rgba(44, 44, 46, 0.72);
71
+ --bg-glass: rgba(44, 44, 46, 0.6);
72
+ --bg-glass-hover: rgba(58, 58, 60, 0.8);
73
+ --bg-solid: #2c2c2e;
74
+ --bg-input: rgba(58, 58, 60, 0.9);
75
+
76
+ --text-primary: #f5f5f7;
77
+ --text-secondary: #a1a1a6;
78
+ --text-tertiary: #8e8e93;
79
+ --text-inverse: #1d1d1f;
80
+
81
+ --accent: #0a84ff;
82
+ --accent-hover: #409cff;
83
+ --accent-subtle: rgba(10, 132, 255, 0.2);
84
+ --accent-glow: rgba(10, 132, 255, 0.4);
85
+
86
+ --success: #30d158;
87
+ --success-subtle: rgba(48, 209, 88, 0.2);
88
+ --warning: #ffd60a;
89
+ --warning-subtle: rgba(255, 214, 10, 0.2);
90
+ --danger: #ff453a;
91
+ --danger-subtle: rgba(255, 69, 58, 0.2);
92
+
93
+ --border: rgba(255, 255, 255, 0.08);
94
+ --border-strong: rgba(255, 255, 255, 0.12);
95
+ --divider: rgba(255, 255, 255, 0.05);
96
+ }
97
+
98
+ /* System preference detection */
99
+ @media (prefers-color-scheme: dark) {
100
+ :root:not([data-theme="light"]) {
101
+ --bg-base: #1c1c1e;
102
+ --bg-elevated: rgba(44, 44, 46, 0.72);
103
+ --bg-glass: rgba(44, 44, 46, 0.6);
104
+ --bg-glass-hover: rgba(58, 58, 60, 0.8);
105
+ --bg-solid: #2c2c2e;
106
+ --bg-input: rgba(58, 58, 60, 0.9);
107
+ --text-primary: #f5f5f7;
108
+ --text-secondary: #a1a1a6;
109
+ --text-tertiary: #8e8e93;
110
+ --text-inverse: #1d1d1f;
111
+ --accent: #0a84ff;
112
+ --accent-hover: #409cff;
113
+ --accent-subtle: rgba(10, 132, 255, 0.2);
114
+ --accent-glow: rgba(10, 132, 255, 0.4);
115
+ --success: #30d158;
116
+ --success-subtle: rgba(48, 209, 88, 0.2);
117
+ --warning: #ffd60a;
118
+ --warning-subtle: rgba(255, 214, 10, 0.2);
119
+ --danger: #ff453a;
120
+ --danger-subtle: rgba(255, 69, 58, 0.2);
121
+ --border: rgba(255, 255, 255, 0.08);
122
+ --border-strong: rgba(255, 255, 255, 0.12);
123
+ --divider: rgba(255, 255, 255, 0.05);
124
+ }
125
+ }
126
+
127
+ /* ============ Reset & Base ============ */
128
+ *, *::before, *::after {
29
129
  box-sizing: border-box;
30
130
  margin: 0;
31
131
  padding: 0;
@@ -33,452 +133,923 @@
33
133
 
34
134
  html {
35
135
  font-size: 16px;
136
+ -webkit-font-smoothing: antialiased;
137
+ -moz-osx-font-smoothing: grayscale;
36
138
  }
37
139
 
38
140
  body {
39
- font-family: "Tiempos Text", "Times New Roman", Georgia, serif;
40
- background: var(--bg-primary);
141
+ font-family: var(--font-sans);
142
+ background: var(--bg-base);
41
143
  color: var(--text-primary);
42
- line-height: 1.6;
144
+ line-height: 1.5;
43
145
  min-height: 100vh;
146
+ overflow-x: hidden;
147
+ transition: background-color var(--transition-normal), color var(--transition-normal);
44
148
  }
45
149
 
46
- /* Typography */
47
- h1, h2, h3, h4 {
48
- font-weight: 500;
150
+ /* ============ Typography ============ */
151
+ h1, h2, h3, h4, h5, h6 {
152
+ font-weight: 600;
153
+ letter-spacing: -0.025em;
154
+ line-height: 1.2;
155
+ }
156
+
157
+ h1 { font-size: 2rem; }
158
+ h2 { font-size: 1.5rem; }
159
+ h3 { font-size: 1.125rem; }
160
+ h4 { font-size: 1rem; }
161
+
162
+ /* ============ Layout Container ============ */
163
+ .app-container {
164
+ display: flex;
165
+ min-height: 100vh;
166
+ }
167
+
168
+ /* ============ Sidebar ============ */
169
+ .sidebar {
170
+ position: fixed;
171
+ top: 0;
172
+ left: 0;
173
+ width: var(--sidebar-width);
174
+ height: 100vh;
175
+ background: var(--bg-glass);
176
+ backdrop-filter: blur(var(--blur-xl)) saturate(180%);
177
+ -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
178
+ border-right: 1px solid var(--border);
179
+ display: flex;
180
+ flex-direction: column;
181
+ z-index: 100;
182
+ transition: transform var(--transition-normal), width var(--transition-normal);
183
+ }
184
+
185
+ .sidebar.collapsed {
186
+ width: 72px;
187
+ }
188
+
189
+ .sidebar.collapsed .sidebar-brand span,
190
+ .sidebar.collapsed .nav-label,
191
+ .sidebar.collapsed .sidebar-footer-content {
192
+ opacity: 0;
193
+ visibility: hidden;
194
+ }
195
+
196
+ .sidebar-brand {
197
+ display: flex;
198
+ align-items: center;
199
+ gap: 12px;
200
+ padding: 20px 20px 16px;
201
+ border-bottom: 1px solid var(--divider);
202
+ }
203
+
204
+ .sidebar-brand .logo {
205
+ width: 32px;
206
+ height: 32px;
207
+ background: linear-gradient(135deg, var(--accent) 0%, #5856d6 100%);
208
+ border-radius: var(--radius-md);
209
+ display: flex;
210
+ align-items: center;
211
+ justify-content: center;
212
+ flex-shrink: 0;
213
+ box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.2);
214
+ }
215
+
216
+ .sidebar-brand .logo svg {
217
+ width: 18px;
218
+ height: 18px;
219
+ color: white;
220
+ }
221
+
222
+ .sidebar-brand span {
223
+ font-size: 1.125rem;
224
+ font-weight: 700;
49
225
  letter-spacing: -0.02em;
226
+ background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
227
+ -webkit-background-clip: text;
228
+ -webkit-text-fill-color: transparent;
229
+ background-clip: text;
230
+ transition: opacity var(--transition-fast);
231
+ }
232
+
233
+ .sidebar-nav {
234
+ flex: 1;
235
+ padding: 16px 12px;
236
+ overflow-y: auto;
50
237
  }
51
238
 
52
- h1 {
53
- font-size: 1.75rem;
239
+ .nav-section {
240
+ margin-bottom: 24px;
54
241
  }
55
242
 
56
- h2 {
57
- font-size: 1.25rem;
243
+ .nav-section-title {
244
+ font-size: 0.6875rem;
245
+ font-weight: 600;
246
+ text-transform: uppercase;
247
+ letter-spacing: 0.08em;
248
+ color: var(--text-tertiary);
249
+ padding: 0 8px;
250
+ margin-bottom: 8px;
58
251
  }
59
252
 
60
- /* Header */
61
- header {
253
+ .sidebar.collapsed .nav-section-title {
254
+ opacity: 0;
255
+ height: 0;
256
+ margin: 0;
257
+ overflow: hidden;
258
+ }
259
+
260
+ .nav-item {
62
261
  display: flex;
63
262
  align-items: center;
64
- gap: 1.5rem;
65
- padding: 1rem 1.5rem;
66
- background: var(--bg-secondary);
67
- border-bottom: 1px solid var(--border);
263
+ gap: 12px;
264
+ padding: 10px 12px;
265
+ border-radius: var(--radius-md);
266
+ color: var(--text-secondary);
267
+ text-decoration: none;
268
+ font-size: 0.9375rem;
269
+ font-weight: 500;
270
+ cursor: pointer;
271
+ border: none;
272
+ background: transparent;
273
+ width: 100%;
274
+ text-align: left;
275
+ transition: all var(--transition-fast);
276
+ position: relative;
68
277
  }
69
278
 
70
- header h1 {
279
+ .nav-item:hover {
280
+ background: var(--bg-glass-hover);
71
281
  color: var(--text-primary);
72
- font-size: 1.25rem;
282
+ }
283
+
284
+ .nav-item.active {
285
+ background: var(--accent-subtle);
286
+ color: var(--accent);
287
+ }
288
+
289
+ .nav-item.active::before {
290
+ content: '';
291
+ position: absolute;
292
+ left: 0;
293
+ top: 50%;
294
+ transform: translateY(-50%);
295
+ width: 3px;
296
+ height: 20px;
297
+ background: var(--accent);
298
+ border-radius: 0 3px 3px 0;
299
+ }
300
+
301
+ .nav-item svg {
302
+ width: 20px;
303
+ height: 20px;
304
+ flex-shrink: 0;
305
+ opacity: 0.8;
306
+ }
307
+
308
+ .nav-item.active svg {
309
+ opacity: 1;
310
+ }
311
+
312
+ .nav-label {
313
+ white-space: nowrap;
314
+ transition: opacity var(--transition-fast);
315
+ }
316
+
317
+ .nav-badge {
318
+ margin-left: auto;
319
+ font-size: 0.6875rem;
73
320
  font-weight: 600;
74
- letter-spacing: -0.01em;
321
+ padding: 2px 8px;
322
+ background: var(--accent);
323
+ color: white;
324
+ border-radius: var(--radius-full);
325
+ }
326
+
327
+ .sidebar-footer {
328
+ padding: 16px;
329
+ border-top: 1px solid var(--divider);
75
330
  }
76
331
 
77
- nav {
332
+ .sidebar-stats {
78
333
  display: flex;
79
- gap: 0.25rem;
334
+ flex-direction: column;
335
+ gap: 8px;
336
+ padding: 12px;
337
+ background: var(--bg-glass);
338
+ border-radius: var(--radius-md);
339
+ font-size: 0.75rem;
80
340
  }
81
341
 
82
- .nav-btn {
83
- font-family: inherit;
84
- font-size: 0.8125rem;
85
- padding: 0.5rem 0.875rem;
86
- background: transparent;
87
- border: 1px solid transparent;
88
- border-radius: var(--radius);
342
+ .stat-row {
343
+ display: flex;
344
+ justify-content: space-between;
345
+ color: var(--text-tertiary);
346
+ }
347
+
348
+ .stat-row span:last-child {
349
+ font-weight: 600;
89
350
  color: var(--text-secondary);
351
+ font-variant-numeric: tabular-nums;
352
+ }
353
+
354
+ .sidebar-toggle {
355
+ position: absolute;
356
+ top: 20px;
357
+ right: -12px;
358
+ width: 24px;
359
+ height: 24px;
360
+ background: var(--bg-solid);
361
+ border: 1px solid var(--border-strong);
362
+ border-radius: var(--radius-full);
363
+ display: flex;
364
+ align-items: center;
365
+ justify-content: center;
90
366
  cursor: pointer;
91
- transition: all var(--transition);
367
+ box-shadow: var(--shadow-sm);
368
+ transition: all var(--transition-fast);
369
+ z-index: 10;
92
370
  }
93
371
 
94
- .nav-btn:hover {
95
- color: var(--text-primary);
96
- background: var(--bg-tertiary);
372
+ .sidebar-toggle:hover {
373
+ background: var(--bg-glass-hover);
374
+ transform: scale(1.1);
97
375
  }
98
376
 
99
- .nav-btn.active {
377
+ .sidebar-toggle svg {
378
+ width: 14px;
379
+ height: 14px;
380
+ color: var(--text-secondary);
381
+ transition: transform var(--transition-fast);
382
+ }
383
+
384
+ .sidebar.collapsed .sidebar-toggle svg {
385
+ transform: rotate(180deg);
386
+ }
387
+
388
+ /* ============ Main Content Area ============ */
389
+ .main-wrapper {
390
+ flex: 1;
391
+ margin-left: var(--sidebar-width);
392
+ transition: margin-left var(--transition-normal);
393
+ display: flex;
394
+ flex-direction: column;
395
+ min-height: 100vh;
396
+ }
397
+
398
+ body.sidebar-collapsed .main-wrapper {
399
+ margin-left: 72px;
400
+ }
401
+
402
+ /* ============ Header ============ */
403
+ .header {
404
+ position: sticky;
405
+ top: 0;
406
+ height: var(--header-height);
407
+ background: var(--bg-glass);
408
+ backdrop-filter: blur(var(--blur-lg)) saturate(180%);
409
+ -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(180%);
410
+ border-bottom: 1px solid var(--border);
411
+ display: flex;
412
+ align-items: center;
413
+ padding: 0 24px;
414
+ gap: 16px;
415
+ z-index: 50;
416
+ }
417
+
418
+ .header-title {
419
+ font-size: 1.25rem;
420
+ font-weight: 600;
421
+ }
422
+
423
+ .header-search {
424
+ flex: 1;
425
+ max-width: 400px;
426
+ position: relative;
427
+ }
428
+
429
+ .header-search input {
430
+ width: 100%;
431
+ padding: 10px 16px 10px 40px;
432
+ background: var(--bg-input);
433
+ border: 1px solid var(--border);
434
+ border-radius: var(--radius-full);
435
+ font-family: inherit;
436
+ font-size: 0.875rem;
100
437
  color: var(--text-primary);
101
- background: var(--bg-primary);
102
- border-color: var(--border);
103
- box-shadow: 0 1px 2px var(--shadow);
438
+ transition: all var(--transition-fast);
104
439
  }
105
440
 
106
- .stats {
441
+ .header-search input:focus {
442
+ outline: none;
443
+ border-color: var(--accent);
444
+ box-shadow: 0 0 0 3px var(--accent-subtle);
445
+ }
446
+
447
+ .header-search input::placeholder {
448
+ color: var(--text-tertiary);
449
+ }
450
+
451
+ .header-search svg {
452
+ position: absolute;
453
+ left: 14px;
454
+ top: 50%;
455
+ transform: translateY(-50%);
456
+ width: 16px;
457
+ height: 16px;
458
+ color: var(--text-tertiary);
459
+ pointer-events: none;
460
+ }
461
+
462
+ .header-actions {
463
+ display: flex;
464
+ align-items: center;
465
+ gap: 8px;
107
466
  margin-left: auto;
108
- font-size: 0.8125rem;
109
- color: var(--text-muted);
110
- font-variant-numeric: tabular-nums;
111
467
  }
112
468
 
113
- /* API Status indicator */
114
- .api-status {
469
+ /* Icon Button */
470
+ .icon-btn {
471
+ width: 40px;
472
+ height: 40px;
115
473
  display: flex;
116
474
  align-items: center;
117
- gap: 0.5rem;
118
- font-size: 0.75rem;
119
- color: var(--text-muted);
120
- padding: 0.375rem 0.75rem;
121
- background: var(--bg-tertiary);
122
- border-radius: var(--radius);
123
- border: 1px solid transparent;
124
- transition: all var(--transition);
475
+ justify-content: center;
476
+ background: var(--bg-glass);
477
+ border: 1px solid var(--border);
478
+ border-radius: var(--radius-md);
479
+ cursor: pointer;
480
+ color: var(--text-secondary);
481
+ transition: all var(--transition-fast);
482
+ }
483
+
484
+ .icon-btn:hover {
485
+ background: var(--bg-glass-hover);
486
+ color: var(--text-primary);
487
+ border-color: var(--border-strong);
488
+ }
489
+
490
+ .icon-btn.active {
491
+ background: var(--accent-subtle);
492
+ color: var(--accent);
493
+ border-color: var(--accent);
494
+ }
495
+
496
+ .icon-btn svg {
497
+ width: 20px;
498
+ height: 20px;
499
+ }
500
+
501
+ /* Status Indicator */
502
+ .status-indicator {
503
+ display: flex;
504
+ align-items: center;
505
+ gap: 8px;
506
+ padding: 8px 14px;
507
+ background: var(--bg-glass);
508
+ border: 1px solid var(--border);
509
+ border-radius: var(--radius-full);
510
+ font-size: 0.8125rem;
511
+ font-weight: 500;
512
+ color: var(--text-secondary);
513
+ transition: all var(--transition-fast);
125
514
  }
126
515
 
127
- .api-dot {
516
+ .status-dot {
128
517
  width: 8px;
129
518
  height: 8px;
130
519
  border-radius: 50%;
131
- background: var(--text-muted);
132
- transition: all var(--transition);
133
- flex-shrink: 0;
520
+ background: var(--text-tertiary);
521
+ transition: all var(--transition-fast);
134
522
  }
135
523
 
136
- .api-status.connected {
524
+ .status-indicator.connected {
137
525
  background: var(--success-subtle);
138
526
  border-color: var(--success);
527
+ color: var(--success);
139
528
  }
140
529
 
141
- .api-status.connected .api-dot {
530
+ .status-indicator.connected .status-dot {
142
531
  background: var(--success);
143
- box-shadow: 0 0 6px var(--success);
532
+ box-shadow: 0 0 8px var(--success);
144
533
  }
145
534
 
146
- .api-status.connected .api-label {
147
- color: var(--success);
148
- }
149
-
150
- .api-status.disconnected {
535
+ .status-indicator.disconnected {
151
536
  background: var(--danger-subtle);
152
537
  border-color: var(--danger);
538
+ color: var(--danger);
153
539
  }
154
540
 
155
- .api-status.disconnected .api-dot {
541
+ .status-indicator.disconnected .status-dot {
156
542
  background: var(--danger);
157
- box-shadow: 0 0 6px var(--danger);
158
543
  }
159
544
 
160
- .api-status.disconnected .api-label {
161
- color: var(--danger);
162
- }
163
-
164
- .api-status.checking .api-dot {
165
- background: var(--accent);
166
- animation: pulse 1s infinite;
545
+ .status-indicator.checking .status-dot {
546
+ animation: pulse 1.5s ease-in-out infinite;
167
547
  }
168
548
 
169
549
  @keyframes pulse {
170
- 0%, 100% { opacity: 1; }
171
- 50% { opacity: 0.4; }
550
+ 0%, 100% { opacity: 1; transform: scale(1); }
551
+ 50% { opacity: 0.5; transform: scale(0.85); }
172
552
  }
173
553
 
174
- /* Main content */
554
+ /* ============ Main Content ============ */
175
555
  main {
176
- max-width: 960px;
556
+ flex: 1;
557
+ padding: 24px;
558
+ max-width: 1200px;
559
+ width: 100%;
177
560
  margin: 0 auto;
178
- padding: 2rem;
179
561
  }
180
562
 
181
563
  .view {
182
564
  display: none;
565
+ animation: fadeIn 0.3s ease;
183
566
  }
184
567
 
185
568
  .view.active {
186
569
  display: block;
187
570
  }
188
571
 
189
- /* Search bar */
190
- .search-bar {
191
- display: flex;
192
- gap: 0.5rem;
193
- margin-bottom: 1.5rem;
572
+ @keyframes fadeIn {
573
+ from { opacity: 0; transform: translateY(8px); }
574
+ to { opacity: 1; transform: translateY(0); }
194
575
  }
195
576
 
196
- .search-bar input {
197
- flex: 1;
198
- font-family: inherit;
199
- font-size: 0.9375rem;
200
- padding: 0.625rem 1rem;
577
+ /* ============ Cards ============ */
578
+ .card {
579
+ background: var(--bg-glass);
580
+ backdrop-filter: blur(var(--blur-md));
581
+ -webkit-backdrop-filter: blur(var(--blur-md));
201
582
  border: 1px solid var(--border);
202
- border-radius: var(--radius);
203
- background: var(--bg-secondary);
204
- color: var(--text-primary);
205
- transition: all var(--transition);
583
+ border-radius: var(--radius-lg);
584
+ padding: 20px;
585
+ transition: all var(--transition-fast);
206
586
  }
207
587
 
208
- .search-bar input:focus {
209
- outline: none;
210
- border-color: var(--accent);
211
- box-shadow: 0 0 0 2px var(--accent-subtle);
588
+ .card:hover {
589
+ border-color: var(--border-strong);
590
+ box-shadow: var(--shadow-md);
212
591
  }
213
592
 
214
- .search-bar input::placeholder {
215
- color: var(--text-muted);
593
+ .card-header {
594
+ display: flex;
595
+ align-items: center;
596
+ justify-content: space-between;
597
+ margin-bottom: 16px;
598
+ }
599
+
600
+ .card-title {
601
+ font-size: 1rem;
602
+ font-weight: 600;
216
603
  }
217
604
 
218
- /* Buttons */
219
- button {
605
+ .card-content {
606
+ color: var(--text-secondary);
607
+ font-size: 0.9375rem;
608
+ line-height: 1.6;
609
+ }
610
+
611
+ /* ============ Buttons ============ */
612
+ .btn {
613
+ display: inline-flex;
614
+ align-items: center;
615
+ justify-content: center;
616
+ gap: 8px;
617
+ padding: 10px 20px;
220
618
  font-family: inherit;
221
- font-size: 0.8125rem;
222
- font-weight: 500;
223
- padding: 0.5rem 1rem;
224
- background: var(--text-primary);
225
- color: var(--bg-primary);
226
- border: 1px solid transparent;
227
- border-radius: var(--radius);
619
+ font-size: 0.875rem;
620
+ font-weight: 600;
621
+ border-radius: var(--radius-md);
622
+ border: none;
228
623
  cursor: pointer;
229
- transition: all var(--transition);
624
+ transition: all var(--transition-fast);
625
+ white-space: nowrap;
626
+ }
627
+
628
+ .btn svg {
629
+ width: 16px;
630
+ height: 16px;
230
631
  }
231
632
 
232
- button:hover {
233
- background: var(--text-secondary);
633
+ .btn-primary {
634
+ background: var(--accent);
635
+ color: white;
636
+ box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.15);
637
+ }
638
+
639
+ .btn-primary:hover {
640
+ background: var(--accent-hover);
234
641
  transform: translateY(-1px);
235
- box-shadow: 0 2px 4px var(--shadow);
642
+ box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.15);
236
643
  }
237
644
 
238
- button:active {
645
+ .btn-primary:active {
239
646
  transform: translateY(0);
240
- box-shadow: none;
647
+ box-shadow: var(--shadow-xs);
241
648
  }
242
649
 
243
- button:disabled {
244
- opacity: 0.5;
245
- cursor: not-allowed;
246
- transform: none;
247
- box-shadow: none;
650
+ .btn-secondary {
651
+ background: var(--bg-glass);
652
+ color: var(--text-primary);
653
+ border: 1px solid var(--border);
248
654
  }
249
655
 
250
- .toolbar {
251
- display: flex;
252
- gap: 0.75rem;
253
- margin-bottom: 1.5rem;
656
+ .btn-secondary:hover {
657
+ background: var(--bg-glass-hover);
658
+ border-color: var(--border-strong);
254
659
  }
255
660
 
256
- #add-memory-btn {
257
- background: var(--accent);
661
+ .btn-ghost {
662
+ background: transparent;
663
+ color: var(--text-secondary);
258
664
  }
259
665
 
260
- #add-memory-btn:hover {
261
- background: var(--accent-hover);
666
+ .btn-ghost:hover {
667
+ background: var(--bg-glass);
668
+ color: var(--text-primary);
262
669
  }
263
670
 
264
- /* Filter bar */
265
- .filter-bar {
266
- margin-bottom: 1.5rem;
671
+ .btn-danger {
672
+ background: var(--danger);
673
+ color: white;
267
674
  }
268
675
 
269
- .filter-bar select {
270
- font-family: inherit;
676
+ .btn-danger:hover {
677
+ background: #e6352b;
678
+ }
679
+
680
+ .btn-sm {
681
+ padding: 6px 12px;
682
+ font-size: 0.8125rem;
683
+ }
684
+
685
+ .btn-lg {
686
+ padding: 14px 28px;
687
+ font-size: 1rem;
688
+ border-radius: var(--radius-lg);
689
+ }
690
+
691
+ .btn:disabled {
692
+ opacity: 0.5;
693
+ cursor: not-allowed;
694
+ transform: none !important;
695
+ }
696
+
697
+ /* ============ Form Elements ============ */
698
+ .form-group {
699
+ margin-bottom: 20px;
700
+ }
701
+
702
+ .form-label {
703
+ display: block;
271
704
  font-size: 0.875rem;
272
- padding: 0.625rem 1rem;
705
+ font-weight: 500;
706
+ color: var(--text-secondary);
707
+ margin-bottom: 8px;
708
+ }
709
+
710
+ .form-input {
711
+ width: 100%;
712
+ padding: 12px 16px;
713
+ background: var(--bg-input);
273
714
  border: 1px solid var(--border);
274
- background: var(--bg-secondary);
715
+ border-radius: var(--radius-md);
716
+ font-family: inherit;
717
+ font-size: 0.9375rem;
275
718
  color: var(--text-primary);
276
- cursor: pointer;
719
+ transition: all var(--transition-fast);
277
720
  }
278
721
 
279
- .filter-bar select:focus {
722
+ .form-input:focus {
280
723
  outline: none;
281
724
  border-color: var(--accent);
725
+ box-shadow: 0 0 0 3px var(--accent-subtle);
726
+ }
727
+
728
+ .form-input::placeholder {
729
+ color: var(--text-tertiary);
730
+ }
731
+
732
+ textarea.form-input {
733
+ min-height: 120px;
734
+ resize: vertical;
735
+ line-height: 1.6;
736
+ }
737
+
738
+ .form-select {
739
+ appearance: none;
740
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
741
+ background-repeat: no-repeat;
742
+ background-position: right 12px center;
743
+ padding-right: 40px;
744
+ cursor: pointer;
745
+ }
746
+
747
+ .form-range {
748
+ width: 100%;
749
+ height: 4px;
750
+ background: var(--border);
751
+ border-radius: var(--radius-full);
752
+ appearance: none;
753
+ cursor: pointer;
754
+ }
755
+
756
+ .form-range::-webkit-slider-thumb {
757
+ appearance: none;
758
+ width: 20px;
759
+ height: 20px;
760
+ background: var(--accent);
761
+ border-radius: 50%;
762
+ cursor: pointer;
763
+ box-shadow: var(--shadow-sm);
764
+ transition: transform var(--transition-fast);
765
+ }
766
+
767
+ .form-range::-webkit-slider-thumb:hover {
768
+ transform: scale(1.15);
769
+ }
770
+
771
+ /* Input Group */
772
+ .input-group {
773
+ display: flex;
774
+ gap: 8px;
775
+ }
776
+
777
+ .input-group .form-input {
778
+ flex: 1;
779
+ }
780
+
781
+ /* ============ Toolbar ============ */
782
+ .toolbar {
783
+ display: flex;
784
+ align-items: center;
785
+ gap: 12px;
786
+ margin-bottom: 24px;
787
+ flex-wrap: wrap;
788
+ }
789
+
790
+ .toolbar-group {
791
+ display: flex;
792
+ align-items: center;
793
+ gap: 8px;
794
+ }
795
+
796
+ .toolbar-divider {
797
+ width: 1px;
798
+ height: 24px;
799
+ background: var(--border);
800
+ margin: 0 4px;
282
801
  }
283
802
 
284
- /* List items */
803
+ /* ============ List Items ============ */
285
804
  .list {
286
805
  display: flex;
287
806
  flex-direction: column;
288
- gap: 0.75rem;
807
+ gap: 12px;
289
808
  }
290
809
 
291
810
  .list-item {
292
- background: var(--bg-secondary);
811
+ background: var(--bg-glass);
812
+ backdrop-filter: blur(var(--blur-sm));
813
+ -webkit-backdrop-filter: blur(var(--blur-sm));
293
814
  border: 1px solid var(--border);
294
- border-radius: var(--radius);
295
- padding: 1rem 1.25rem;
296
- transition: all var(--transition);
815
+ border-radius: var(--radius-lg);
816
+ padding: 20px;
817
+ transition: all var(--transition-fast);
818
+ cursor: default;
297
819
  }
298
820
 
299
821
  .list-item:hover {
300
- border-color: var(--border-hover);
301
- box-shadow: 0 2px 8px var(--shadow);
822
+ border-color: var(--border-strong);
823
+ box-shadow: var(--shadow-md);
824
+ transform: translateY(-1px);
825
+ }
826
+
827
+ .list-item.clickable {
828
+ cursor: pointer;
302
829
  }
303
830
 
831
+ /* Memory Item */
304
832
  .memory-item .content {
305
- font-size: 1rem;
833
+ font-size: 0.9375rem;
306
834
  line-height: 1.7;
307
- margin-bottom: 1rem;
835
+ color: var(--text-primary);
836
+ margin-bottom: 16px;
308
837
  white-space: pre-wrap;
309
838
  }
310
839
 
311
840
  .memory-item .meta {
312
841
  display: flex;
313
- gap: 1.5rem;
842
+ flex-wrap: wrap;
843
+ gap: 16px;
314
844
  font-size: 0.8125rem;
315
- color: var(--text-muted);
845
+ color: var(--text-tertiary);
316
846
  }
317
847
 
318
- .memory-item .meta span {
848
+ .memory-item .meta-item {
319
849
  display: flex;
320
850
  align-items: center;
321
- gap: 0.375rem;
851
+ gap: 6px;
852
+ }
853
+
854
+ .memory-item .meta-item svg {
855
+ width: 14px;
856
+ height: 14px;
857
+ opacity: 0.7;
322
858
  }
323
859
 
324
860
  .memory-item .actions {
325
861
  display: flex;
326
- gap: 0.5rem;
327
- margin-top: 1rem;
328
- padding-top: 1rem;
329
- border-top: 1px solid var(--border);
862
+ gap: 8px;
863
+ margin-top: 16px;
864
+ padding-top: 16px;
865
+ border-top: 1px solid var(--divider);
330
866
  }
331
867
 
332
- .memory-item .actions button {
868
+ .score-badge {
869
+ display: inline-flex;
870
+ align-items: center;
871
+ padding: 4px 10px;
872
+ background: var(--accent-subtle);
873
+ color: var(--accent);
333
874
  font-size: 0.75rem;
334
- padding: 0.375rem 0.75rem;
335
- background: var(--bg-tertiary);
336
- color: var(--text-secondary);
337
- }
338
-
339
- .memory-item .actions button:hover {
340
- background: var(--border);
341
- color: var(--text-primary);
342
- }
343
-
344
- .memory-item .actions .delete-btn:hover {
345
- background: var(--danger);
346
- color: white;
875
+ font-weight: 600;
876
+ border-radius: var(--radius-full);
877
+ font-variant-numeric: tabular-nums;
347
878
  }
348
879
 
349
- /* Entity items */
880
+ /* Entity Item */
350
881
  .entity-item {
351
882
  cursor: pointer;
352
883
  }
353
884
 
354
- .entity-item .name {
885
+ .entity-item .entity-name {
355
886
  font-size: 1rem;
356
- font-weight: 500;
357
- margin-bottom: 0.375rem;
887
+ font-weight: 600;
888
+ margin-bottom: 4px;
358
889
  }
359
890
 
360
- .entity-item .type {
891
+ .entity-item .entity-type {
892
+ display: inline-flex;
893
+ align-items: center;
894
+ gap: 6px;
361
895
  font-size: 0.8125rem;
362
- color: var(--text-muted);
896
+ color: var(--text-tertiary);
363
897
  text-transform: capitalize;
364
898
  }
365
899
 
366
- /* Graph container */
900
+ .entity-item .entity-type svg {
901
+ width: 14px;
902
+ height: 14px;
903
+ }
904
+
905
+ /* ============ Empty State ============ */
906
+ .empty-state {
907
+ display: flex;
908
+ flex-direction: column;
909
+ align-items: center;
910
+ justify-content: center;
911
+ padding: 60px 24px;
912
+ text-align: center;
913
+ }
914
+
915
+ .empty-state svg {
916
+ width: 64px;
917
+ height: 64px;
918
+ color: var(--text-tertiary);
919
+ margin-bottom: 16px;
920
+ opacity: 0.5;
921
+ }
922
+
923
+ .empty-state h3 {
924
+ font-size: 1.125rem;
925
+ margin-bottom: 8px;
926
+ color: var(--text-secondary);
927
+ }
928
+
929
+ .empty-state p {
930
+ color: var(--text-tertiary);
931
+ font-size: 0.9375rem;
932
+ max-width: 300px;
933
+ }
934
+
935
+ /* ============ Load More ============ */
936
+ .load-more-container {
937
+ display: flex;
938
+ justify-content: center;
939
+ padding: 24px 0;
940
+ }
941
+
942
+ /* ============ Graph Container ============ */
367
943
  #graph-container {
368
944
  width: 100%;
369
- height: 600px;
370
- background: var(--bg-secondary);
945
+ height: 500px;
946
+ background: var(--bg-glass);
947
+ backdrop-filter: blur(var(--blur-sm));
371
948
  border: 1px solid var(--border);
949
+ border-radius: var(--radius-lg);
950
+ overflow: hidden;
372
951
  }
373
952
 
374
- /* Modal */
953
+ /* ============ Modal ============ */
375
954
  .modal {
376
955
  position: fixed;
377
956
  inset: 0;
378
- background: rgba(0, 0, 0, 0.4);
957
+ background: rgba(0, 0, 0, 0.5);
958
+ backdrop-filter: blur(4px);
379
959
  display: flex;
380
960
  align-items: center;
381
961
  justify-content: center;
382
- padding: 2rem;
962
+ padding: 24px;
963
+ z-index: 200;
964
+ animation: modalFadeIn 0.2s ease;
383
965
  }
384
966
 
385
967
  .modal.hidden {
386
968
  display: none;
387
969
  }
388
970
 
971
+ @keyframes modalFadeIn {
972
+ from { opacity: 0; }
973
+ to { opacity: 1; }
974
+ }
975
+
389
976
  .modal-content {
390
- background: var(--bg-primary);
977
+ background: var(--bg-solid);
391
978
  border: 1px solid var(--border);
392
- padding: 2rem;
979
+ border-radius: var(--radius-xl);
980
+ padding: 28px;
393
981
  width: 100%;
394
- max-width: 600px;
395
- max-height: 90vh;
982
+ max-width: 560px;
983
+ max-height: 85vh;
396
984
  overflow-y: auto;
985
+ box-shadow: var(--shadow-xl);
986
+ animation: modalSlideIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
397
987
  }
398
988
 
399
- .modal-content h2 {
400
- margin-bottom: 1.5rem;
989
+ @keyframes modalSlideIn {
990
+ from { opacity: 0; transform: scale(0.95) translateY(10px); }
991
+ to { opacity: 1; transform: scale(1) translateY(0); }
401
992
  }
402
993
 
403
- .modal-content textarea,
404
- .modal-content input[type="text"] {
405
- width: 100%;
406
- font-family: inherit;
407
- font-size: 1rem;
408
- padding: 0.75rem 1rem;
409
- border: 1px solid var(--border);
410
- background: var(--bg-secondary);
411
- color: var(--text-primary);
412
- resize: vertical;
413
- }
414
-
415
- .modal-content textarea:focus,
416
- .modal-content input:focus {
417
- outline: none;
418
- border-color: var(--accent);
994
+ .modal-header {
995
+ display: flex;
996
+ align-items: center;
997
+ justify-content: space-between;
998
+ margin-bottom: 24px;
419
999
  }
420
1000
 
421
- .form-row {
422
- display: flex;
423
- gap: 1.5rem;
424
- margin-top: 1rem;
1001
+ .modal-header h2 {
1002
+ font-size: 1.25rem;
425
1003
  }
426
1004
 
427
- .form-row label {
1005
+ .modal-close {
1006
+ width: 32px;
1007
+ height: 32px;
428
1008
  display: flex;
429
1009
  align-items: center;
430
- gap: 0.5rem;
431
- font-size: 0.875rem;
1010
+ justify-content: center;
1011
+ background: var(--bg-glass);
1012
+ border: none;
1013
+ border-radius: var(--radius-full);
1014
+ cursor: pointer;
432
1015
  color: var(--text-secondary);
1016
+ transition: all var(--transition-fast);
433
1017
  }
434
1018
 
435
- .form-row input[type="text"] {
436
- width: 120px;
437
- padding: 0.5rem;
438
- font-size: 0.875rem;
1019
+ .modal-close:hover {
1020
+ background: var(--danger-subtle);
1021
+ color: var(--danger);
439
1022
  }
440
1023
 
441
- .form-row input[type="range"] {
442
- width: 100px;
1024
+ .modal-close svg {
1025
+ width: 16px;
1026
+ height: 16px;
443
1027
  }
444
1028
 
445
- #importance-value {
446
- font-variant-numeric: tabular-nums;
447
- min-width: 2rem;
1029
+ .modal-body {
1030
+ margin-bottom: 24px;
448
1031
  }
449
1032
 
450
- .modal-actions {
1033
+ .modal-footer {
451
1034
  display: flex;
452
1035
  justify-content: flex-end;
453
- gap: 0.75rem;
454
- margin-top: 1.5rem;
455
- padding-top: 1.5rem;
456
- border-top: 1px solid var(--border);
1036
+ gap: 12px;
1037
+ padding-top: 20px;
1038
+ border-top: 1px solid var(--divider);
457
1039
  }
458
1040
 
459
- #modal-cancel,
460
- #entity-modal-close {
461
- background: var(--bg-tertiary);
462
- color: var(--text-secondary);
463
- }
464
-
465
- #modal-cancel:hover,
466
- #entity-modal-close:hover {
467
- background: var(--border);
468
- color: var(--text-primary);
469
- }
470
-
471
- /* Entity detail modal */
472
- #entity-modal-body {
473
- font-size: 0.9375rem;
1041
+ .modal-wide {
1042
+ max-width: 720px;
474
1043
  }
475
1044
 
1045
+ /* Entity Modal */
476
1046
  #entity-modal-body h3 {
477
- font-size: 0.875rem;
478
- color: var(--text-muted);
1047
+ font-size: 0.75rem;
1048
+ font-weight: 600;
479
1049
  text-transform: uppercase;
480
- letter-spacing: 0.05em;
481
- margin: 1.5rem 0 0.75rem;
1050
+ letter-spacing: 0.08em;
1051
+ color: var(--text-tertiary);
1052
+ margin: 24px 0 12px;
482
1053
  }
483
1054
 
484
1055
  #entity-modal-body h3:first-child {
@@ -487,99 +1058,40 @@ button:disabled {
487
1058
 
488
1059
  #entity-modal-body ul {
489
1060
  list-style: none;
490
- padding: 0;
491
1061
  }
492
1062
 
493
1063
  #entity-modal-body li {
494
- padding: 0.5rem 0;
495
- border-bottom: 1px solid var(--border);
1064
+ padding: 12px 0;
1065
+ border-bottom: 1px solid var(--divider);
1066
+ font-size: 0.9375rem;
1067
+ color: var(--text-secondary);
496
1068
  }
497
1069
 
498
1070
  #entity-modal-body li:last-child {
499
1071
  border-bottom: none;
500
1072
  }
501
1073
 
502
- /* Empty states */
503
- .empty-state {
504
- text-align: center;
505
- padding: 3rem 2rem;
506
- color: var(--text-muted);
507
- font-style: italic;
508
- }
509
-
510
- /* Load more button */
511
- .load-more-container {
512
- display: flex;
513
- justify-content: center;
514
- padding: 1.5rem 0;
515
- }
516
-
517
- .load-more-btn {
518
- background: var(--bg-tertiary);
519
- color: var(--text-secondary);
520
- padding: 0.75rem 2rem;
521
- font-size: 0.875rem;
522
- }
523
-
524
- .load-more-btn:hover {
525
- background: var(--border);
526
- color: var(--text-primary);
527
- }
528
-
529
- /* Score badge */
530
- .score {
531
- display: inline-block;
532
- font-size: 0.6875rem;
533
- padding: 0.125rem 0.375rem;
534
- background: var(--bg-tertiary);
535
- color: var(--text-muted);
536
- font-variant-numeric: tabular-nums;
537
- }
538
-
539
- /* Chat toggle button */
540
- .chat-toggle {
541
- margin-left: auto;
542
- background: var(--accent);
543
- font-size: 0.75rem;
544
- font-weight: 600;
545
- padding: 0.5rem 1rem;
546
- letter-spacing: 0.02em;
547
- }
548
-
549
- .chat-toggle:hover {
550
- background: var(--accent-hover);
551
- }
552
-
553
- .chat-toggle.active {
554
- background: var(--text-primary);
555
- }
556
-
557
- .chat-toggle.disabled {
558
- background: var(--text-muted);
559
- cursor: not-allowed;
560
- opacity: 0.6;
561
- }
562
-
563
- /* Chat panel */
1074
+ /* ============ Chat Panel ============ */
564
1075
  .chat-panel {
565
1076
  position: fixed;
566
1077
  top: 0;
567
1078
  right: 0;
568
- width: 380px;
1079
+ width: var(--chat-width);
569
1080
  height: 100vh;
570
- background: var(--bg-primary);
1081
+ background: var(--bg-glass);
1082
+ backdrop-filter: blur(var(--blur-xl)) saturate(180%);
1083
+ -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(180%);
571
1084
  border-left: 1px solid var(--border);
572
1085
  display: flex;
573
1086
  flex-direction: column;
574
- box-shadow: -8px 0 32px var(--shadow-lg);
575
- z-index: 100;
1087
+ z-index: 150;
576
1088
  transform: translateX(0);
577
- transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
1089
+ transition: transform var(--transition-normal);
1090
+ box-shadow: var(--shadow-xl);
578
1091
  }
579
1092
 
580
1093
  .chat-panel.hidden {
581
1094
  transform: translateX(100%);
582
- visibility: hidden;
583
1095
  pointer-events: none;
584
1096
  }
585
1097
 
@@ -587,167 +1099,163 @@ button:disabled {
587
1099
  display: flex;
588
1100
  align-items: center;
589
1101
  justify-content: space-between;
590
- padding: 0.875rem 1rem;
591
- background: var(--bg-secondary);
1102
+ padding: 16px 20px;
592
1103
  border-bottom: 1px solid var(--border);
1104
+ background: var(--bg-glass);
593
1105
  }
594
1106
 
595
1107
  .chat-header h3 {
596
- font-size: 0.9375rem;
1108
+ font-size: 1rem;
597
1109
  font-weight: 600;
598
- letter-spacing: -0.01em;
599
- }
600
-
601
- .chat-actions {
602
1110
  display: flex;
603
1111
  align-items: center;
604
- gap: 0.375rem;
1112
+ gap: 8px;
605
1113
  }
606
1114
 
607
- .chat-actions button {
608
- font-size: 0.6875rem;
609
- font-weight: 500;
610
- padding: 0.375rem 0.625rem;
611
- background: var(--bg-tertiary);
612
- color: var(--text-secondary);
613
- border-radius: var(--radius);
614
- }
615
-
616
- .chat-actions button:hover {
617
- background: var(--border);
618
- color: var(--text-primary);
619
- transform: none;
620
- box-shadow: none;
621
- }
622
-
623
- #chat-close {
624
- font-size: 1.125rem;
625
- padding: 0.25rem 0.5rem;
626
- line-height: 1;
627
- background: transparent;
628
- color: var(--text-muted);
1115
+ .chat-header h3 svg {
1116
+ width: 20px;
1117
+ height: 20px;
1118
+ color: var(--accent);
629
1119
  }
630
1120
 
631
- #chat-close:hover {
632
- background: var(--danger-subtle);
633
- color: var(--danger);
1121
+ .chat-actions {
1122
+ display: flex;
1123
+ gap: 8px;
634
1124
  }
635
1125
 
636
1126
  .chat-messages {
637
1127
  flex: 1;
638
1128
  overflow-y: auto;
639
- padding: 1rem;
1129
+ padding: 20px;
640
1130
  display: flex;
641
1131
  flex-direction: column;
642
- gap: 0.75rem;
1132
+ gap: 16px;
643
1133
  }
644
1134
 
645
1135
  .chat-message {
646
- padding: 0.75rem 1rem;
647
- font-size: 0.875rem;
1136
+ max-width: 85%;
1137
+ padding: 14px 18px;
1138
+ font-size: 0.9375rem;
648
1139
  line-height: 1.6;
649
- max-width: 88%;
650
- border-radius: var(--radius);
1140
+ border-radius: var(--radius-lg);
1141
+ animation: messageIn 0.2s ease;
1142
+ }
1143
+
1144
+ @keyframes messageIn {
1145
+ from { opacity: 0; transform: translateY(8px); }
1146
+ to { opacity: 1; transform: translateY(0); }
651
1147
  }
652
1148
 
653
1149
  .chat-message.user {
654
1150
  background: var(--accent);
655
1151
  color: white;
656
1152
  align-self: flex-end;
657
- box-shadow: 0 2px 4px rgba(217, 119, 6, 0.2);
1153
+ border-bottom-right-radius: 4px;
1154
+ box-shadow: var(--shadow-sm);
658
1155
  }
659
1156
 
660
1157
  .chat-message.assistant {
661
- background: var(--bg-secondary);
1158
+ background: var(--bg-solid);
662
1159
  border: 1px solid var(--border);
663
1160
  align-self: flex-start;
1161
+ border-bottom-left-radius: 4px;
664
1162
  }
665
1163
 
666
1164
  .chat-message p {
667
- margin: 0 0 0.5rem;
1165
+ margin: 0 0 8px;
668
1166
  }
669
1167
 
670
1168
  .chat-message p:last-child {
671
1169
  margin-bottom: 0;
672
1170
  }
673
1171
 
674
- .chat-message ul {
675
- margin: 0.5rem 0 0;
676
- padding-left: 1.25rem;
677
- }
678
-
679
- .chat-message li {
680
- margin: 0.25rem 0;
681
- font-size: 0.875rem;
682
- color: var(--text-secondary);
1172
+ .chat-message code {
1173
+ font-family: var(--font-mono);
1174
+ font-size: 0.8125rem;
1175
+ background: var(--bg-glass);
1176
+ padding: 2px 6px;
1177
+ border-radius: 4px;
683
1178
  }
684
1179
 
685
- .chat-message.user li {
686
- color: rgba(255, 255, 255, 0.85);
1180
+ .chat-message.user code {
1181
+ background: rgba(255, 255, 255, 0.2);
687
1182
  }
688
1183
 
689
1184
  .chat-message pre {
690
- background: var(--bg-tertiary);
691
- padding: 0.5rem 0.75rem;
692
- margin: 0.5rem 0;
1185
+ background: var(--bg-base);
1186
+ padding: 12px;
1187
+ border-radius: var(--radius-sm);
693
1188
  overflow-x: auto;
694
- font-family: "SF Mono", Monaco, monospace;
695
- font-size: 0.8125rem;
1189
+ margin: 8px 0;
696
1190
  }
697
1191
 
698
- .chat-message.thinking {
699
- background: transparent;
700
- border: 1px dashed var(--border);
701
- color: var(--text-muted);
702
- font-style: italic;
1192
+ .chat-message pre code {
1193
+ background: none;
1194
+ padding: 0;
703
1195
  }
704
1196
 
705
- /* Streaming message indicator */
706
- .chat-message.streaming {
707
- position: relative;
1197
+ .chat-message ul {
1198
+ margin: 8px 0;
1199
+ padding-left: 20px;
1200
+ }
1201
+
1202
+ .chat-message li {
1203
+ margin: 4px 0;
708
1204
  }
709
1205
 
1206
+ /* Streaming indicator */
710
1207
  .chat-message.streaming::after {
711
1208
  content: '';
712
1209
  display: inline-block;
713
- width: 0.5rem;
714
- height: 1rem;
1210
+ width: 8px;
1211
+ height: 16px;
715
1212
  background: var(--accent);
716
- margin-left: 0.25rem;
717
- animation: blink 0.7s infinite;
1213
+ margin-left: 4px;
1214
+ border-radius: 2px;
1215
+ animation: blink 0.8s steps(2) infinite;
718
1216
  vertical-align: text-bottom;
719
1217
  }
720
1218
 
721
1219
  @keyframes blink {
722
- 0%, 50% { opacity: 1; }
723
- 51%, 100% { opacity: 0; }
1220
+ 0%, 100% { opacity: 1; }
1221
+ 50% { opacity: 0; }
724
1222
  }
725
1223
 
726
- /* Tool indicator in streaming */
727
1224
  .tool-indicator {
728
- display: block;
729
- font-size: 0.75rem;
730
- color: var(--accent);
1225
+ display: flex;
1226
+ align-items: center;
1227
+ gap: 8px;
1228
+ font-size: 0.8125rem;
1229
+ color: var(--text-tertiary);
731
1230
  font-style: italic;
732
- padding: 0.5rem 0;
1231
+ padding: 8px 0;
733
1232
  border-top: 1px dashed var(--border);
734
- margin-top: 0.5rem;
1233
+ margin-top: 8px;
1234
+ }
1235
+
1236
+ .tool-indicator svg {
1237
+ width: 14px;
1238
+ height: 14px;
1239
+ animation: spin 1.5s linear infinite;
735
1240
  }
736
1241
 
737
- .tool-indicator::before {
738
- content: '⚙ ';
1242
+ @keyframes spin {
1243
+ from { transform: rotate(0deg); }
1244
+ to { transform: rotate(360deg); }
739
1245
  }
740
1246
 
741
1247
  .chat-status {
742
- padding: 0.5rem 1rem;
1248
+ padding: 8px 20px;
743
1249
  font-size: 0.75rem;
744
- color: var(--text-muted);
745
1250
  text-align: center;
1251
+ color: var(--text-tertiary);
1252
+ background: var(--bg-glass);
1253
+ border-top: 1px solid var(--divider);
746
1254
  }
747
1255
 
748
1256
  .chat-status.error {
1257
+ background: var(--danger-subtle);
749
1258
  color: var(--danger);
750
- background: rgba(220, 38, 38, 0.1);
751
1259
  }
752
1260
 
753
1261
  .chat-status:empty {
@@ -756,243 +1264,239 @@ button:disabled {
756
1264
 
757
1265
  .chat-input-form {
758
1266
  display: flex;
759
- gap: 0.5rem;
760
- padding: 0.875rem 1rem;
761
- background: var(--bg-secondary);
1267
+ gap: 12px;
1268
+ padding: 16px 20px;
1269
+ background: var(--bg-glass);
762
1270
  border-top: 1px solid var(--border);
763
1271
  }
764
1272
 
765
1273
  .chat-input-form input {
766
1274
  flex: 1;
767
- font-family: inherit;
768
- font-size: 0.875rem;
769
- padding: 0.5rem 0.75rem;
1275
+ padding: 12px 16px;
1276
+ background: var(--bg-input);
770
1277
  border: 1px solid var(--border);
771
- border-radius: var(--radius);
772
- background: var(--bg-primary);
1278
+ border-radius: var(--radius-full);
1279
+ font-family: inherit;
1280
+ font-size: 0.9375rem;
773
1281
  color: var(--text-primary);
774
- transition: border-color var(--transition);
1282
+ transition: all var(--transition-fast);
775
1283
  }
776
1284
 
777
1285
  .chat-input-form input:focus {
778
1286
  outline: none;
779
1287
  border-color: var(--accent);
780
- box-shadow: 0 0 0 2px var(--accent-subtle);
1288
+ box-shadow: 0 0 0 3px var(--accent-subtle);
781
1289
  }
782
1290
 
783
- .chat-input-form input:disabled {
784
- background: var(--bg-tertiary);
785
- color: var(--text-muted);
786
- cursor: not-allowed;
1291
+ .chat-input-form input::placeholder {
1292
+ color: var(--text-tertiary);
787
1293
  }
788
1294
 
789
- .chat-input-form input::placeholder {
790
- color: var(--text-muted);
1295
+ .chat-input-form input:disabled {
1296
+ background: var(--bg-glass);
1297
+ color: var(--text-tertiary);
1298
+ cursor: not-allowed;
791
1299
  }
792
1300
 
793
1301
  .chat-input-form button {
1302
+ width: 44px;
1303
+ height: 44px;
1304
+ display: flex;
1305
+ align-items: center;
1306
+ justify-content: center;
794
1307
  background: var(--accent);
795
- padding: 0.5rem 0.875rem;
1308
+ border: none;
1309
+ border-radius: var(--radius-full);
1310
+ cursor: pointer;
1311
+ color: white;
1312
+ transition: all var(--transition-fast);
796
1313
  }
797
1314
 
798
- .chat-input-form button:hover {
1315
+ .chat-input-form button:hover:not(:disabled) {
799
1316
  background: var(--accent-hover);
1317
+ transform: scale(1.05);
800
1318
  }
801
1319
 
802
1320
  .chat-input-form button:disabled {
803
- background: var(--text-muted);
804
- transform: none;
805
- box-shadow: none;
1321
+ background: var(--text-tertiary);
1322
+ cursor: not-allowed;
1323
+ }
1324
+
1325
+ .chat-input-form button svg {
1326
+ width: 20px;
1327
+ height: 20px;
806
1328
  }
807
1329
 
808
- /* Adjust main content when chat is open */
809
- body.chat-open main {
810
- margin-right: 380px;
1330
+ /* Adjust main when chat open */
1331
+ body.chat-open .main-wrapper {
1332
+ margin-right: var(--chat-width);
811
1333
  }
812
1334
 
813
- /* Consolidation View */
1335
+ /* ============ Consolidation View ============ */
814
1336
  .consolidation-header {
815
1337
  display: flex;
816
1338
  justify-content: space-between;
817
1339
  align-items: center;
818
- margin-bottom: 2rem;
819
- padding: 1rem 1.5rem;
820
- background: var(--bg-secondary);
1340
+ padding: 24px;
1341
+ background: var(--bg-glass);
1342
+ backdrop-filter: blur(var(--blur-sm));
821
1343
  border: 1px solid var(--border);
1344
+ border-radius: var(--radius-lg);
1345
+ margin-bottom: 24px;
822
1346
  }
823
1347
 
824
- .consolidation-status {
1348
+ .consolidation-stats {
825
1349
  display: flex;
826
- gap: 2rem;
827
- font-size: 0.9375rem;
1350
+ gap: 32px;
828
1351
  }
829
1352
 
830
- .status-item {
831
- color: var(--text-secondary);
1353
+ .stat-block {
1354
+ text-align: center;
832
1355
  }
833
1356
 
834
- .status-item strong {
1357
+ .stat-value {
1358
+ font-size: 2rem;
1359
+ font-weight: 700;
835
1360
  color: var(--text-primary);
836
- font-weight: 500;
837
- }
838
-
839
- #run-consolidation-btn {
840
- background: var(--accent);
841
- }
842
-
843
- #run-consolidation-btn:hover {
844
- background: var(--accent-hover);
1361
+ font-variant-numeric: tabular-nums;
1362
+ line-height: 1;
845
1363
  }
846
1364
 
847
- #run-consolidation-btn:disabled {
848
- background: var(--text-muted);
1365
+ .stat-label {
1366
+ font-size: 0.75rem;
1367
+ color: var(--text-tertiary);
1368
+ text-transform: uppercase;
1369
+ letter-spacing: 0.05em;
1370
+ margin-top: 4px;
849
1371
  }
850
1372
 
851
1373
  .consolidation-sections {
852
1374
  display: flex;
853
1375
  flex-direction: column;
854
- gap: 2.5rem;
1376
+ gap: 32px;
1377
+ }
1378
+
1379
+ .section-header {
1380
+ display: flex;
1381
+ align-items: center;
1382
+ gap: 12px;
1383
+ margin-bottom: 16px;
855
1384
  }
856
1385
 
857
- .consolidation-sections .section h2 {
858
- margin-bottom: 0.5rem;
1386
+ .section-header h2 {
1387
+ font-size: 1.125rem;
859
1388
  }
860
1389
 
861
1390
  .section-desc {
862
1391
  font-size: 0.875rem;
863
- color: var(--text-muted);
864
- margin-bottom: 1rem;
1392
+ color: var(--text-tertiary);
1393
+ margin-top: 4px;
865
1394
  }
866
1395
 
867
- /* Contradiction item */
1396
+ /* Contradiction Item */
868
1397
  .contradiction-item {
869
- background: var(--bg-secondary);
1398
+ background: var(--bg-glass);
870
1399
  border: 1px solid var(--border);
871
- border-left: 3px solid var(--danger);
872
- padding: 1.25rem 1.5rem;
1400
+ border-left: 4px solid var(--danger);
1401
+ border-radius: var(--radius-lg);
1402
+ padding: 20px;
873
1403
  }
874
1404
 
875
1405
  .contradiction-item .description {
876
1406
  font-size: 1rem;
877
- line-height: 1.6;
878
- margin-bottom: 1rem;
879
1407
  font-weight: 500;
1408
+ margin-bottom: 16px;
880
1409
  }
881
1410
 
882
- .contradiction-item .memories {
883
- display: flex;
884
- flex-direction: column;
885
- gap: 0.75rem;
886
- margin-bottom: 1rem;
887
- }
888
-
889
- .contradiction-item .memory-quote {
890
- padding: 0.75rem 1rem;
891
- background: var(--bg-tertiary);
892
- font-size: 0.875rem;
893
- line-height: 1.5;
1411
+ .memory-quote {
1412
+ padding: 16px;
1413
+ background: var(--bg-base);
1414
+ border-radius: var(--radius-md);
1415
+ font-size: 0.9375rem;
1416
+ line-height: 1.6;
894
1417
  color: var(--text-secondary);
1418
+ margin-bottom: 12px;
895
1419
  }
896
1420
 
897
- .contradiction-item .memory-quote .date {
1421
+ .memory-quote .date {
898
1422
  display: block;
899
1423
  font-size: 0.75rem;
900
- color: var(--text-muted);
901
- margin-top: 0.375rem;
1424
+ color: var(--text-tertiary);
1425
+ margin-top: 8px;
902
1426
  }
903
1427
 
904
- .contradiction-item .entity-tag {
905
- display: inline-block;
1428
+ .entity-tag {
1429
+ display: inline-flex;
1430
+ align-items: center;
1431
+ gap: 4px;
1432
+ padding: 4px 10px;
1433
+ background: var(--bg-glass);
1434
+ border-radius: var(--radius-full);
906
1435
  font-size: 0.75rem;
907
- padding: 0.125rem 0.5rem;
908
- background: var(--bg-tertiary);
909
- color: var(--text-muted);
910
- margin-bottom: 0.75rem;
911
- }
912
-
913
- .contradiction-item .actions {
914
- padding-top: 1rem;
915
- border-top: 1px solid var(--border);
916
- }
917
-
918
- .contradiction-item .actions button {
919
- font-size: 0.8125rem;
920
- padding: 0.5rem 1rem;
921
- background: var(--text-primary);
922
- color: var(--bg-primary);
1436
+ color: var(--text-secondary);
1437
+ margin-bottom: 16px;
923
1438
  }
924
1439
 
925
- /* Digest hierarchy */
1440
+ /* Digest Item */
926
1441
  .digest-level {
927
- margin-bottom: 2rem;
1442
+ margin-bottom: 24px;
928
1443
  }
929
1444
 
930
1445
  .level-header {
931
1446
  display: flex;
932
1447
  align-items: center;
933
- gap: 0.5rem;
934
- font-size: 1rem;
935
- font-weight: 500;
936
- margin-bottom: 0.25rem;
1448
+ gap: 12px;
1449
+ margin-bottom: 16px;
937
1450
  }
938
1451
 
939
1452
  .level-badge {
940
- display: inline-flex;
1453
+ display: flex;
941
1454
  align-items: center;
942
1455
  justify-content: center;
943
- width: 1.75rem;
944
- height: 1.75rem;
1456
+ width: 28px;
1457
+ height: 28px;
945
1458
  background: var(--accent);
946
1459
  color: white;
947
- font-size: 0.6875rem;
948
- font-weight: 600;
949
- border-radius: 2px;
1460
+ font-size: 0.75rem;
1461
+ font-weight: 700;
1462
+ border-radius: var(--radius-sm);
950
1463
  }
951
1464
 
952
- .level-count {
953
- font-size: 0.8125rem;
954
- font-weight: 400;
955
- color: var(--text-muted);
1465
+ .level-title {
1466
+ font-size: 1rem;
1467
+ font-weight: 600;
956
1468
  }
957
1469
 
958
- .level-desc {
1470
+ .level-count {
959
1471
  font-size: 0.8125rem;
960
- color: var(--text-muted);
961
- margin-bottom: 1rem;
1472
+ color: var(--text-tertiary);
962
1473
  }
963
1474
 
964
1475
  .digest-list {
965
1476
  display: flex;
966
1477
  flex-direction: column;
967
- gap: 0.75rem;
1478
+ gap: 12px;
968
1479
  }
969
1480
 
970
- /* Digest item */
971
1481
  .digest-item {
972
- background: var(--bg-secondary);
1482
+ background: var(--bg-glass);
973
1483
  border: 1px solid var(--border);
974
- padding: 1.25rem 1.5rem;
1484
+ border-radius: var(--radius-lg);
1485
+ padding: 20px;
975
1486
  }
976
1487
 
977
1488
  .digest-item[data-level="3"] {
978
- border-left: 3px solid var(--accent);
1489
+ border-left: 4px solid var(--warning);
979
1490
  }
980
1491
 
981
1492
  .digest-item[data-level="2"] {
982
- border-left: 3px solid var(--success);
1493
+ border-left: 4px solid var(--success);
983
1494
  }
984
1495
 
985
1496
  .digest-item .content {
986
- font-size: 1rem;
1497
+ font-size: 0.9375rem;
987
1498
  line-height: 1.7;
988
- margin-bottom: 1rem;
989
- }
990
-
991
- .digest-item .meta {
992
- display: flex;
993
- gap: 1.5rem;
994
- font-size: 0.8125rem;
995
- color: var(--text-muted);
1499
+ margin-bottom: 12px;
996
1500
  }
997
1501
 
998
1502
  .digest-item .topic {
@@ -1000,208 +1504,281 @@ body.chat-open main {
1000
1504
  color: var(--accent);
1001
1505
  }
1002
1506
 
1003
- /* Modal wide */
1004
- .modal-wide {
1005
- max-width: 800px;
1006
- }
1007
-
1008
- .modal-wide .memory-quote {
1009
- padding: 0.75rem 1rem;
1010
- background: var(--bg-secondary);
1011
- font-size: 0.875rem;
1012
- line-height: 1.5;
1013
- margin-bottom: 0.75rem;
1014
- border: 1px solid var(--border);
1015
- }
1016
-
1017
- .modal-wide .memory-quote .date {
1018
- display: block;
1019
- font-size: 0.75rem;
1020
- color: var(--text-muted);
1021
- margin-top: 0.375rem;
1507
+ .digest-item .meta {
1508
+ display: flex;
1509
+ gap: 16px;
1510
+ font-size: 0.8125rem;
1511
+ color: var(--text-tertiary);
1022
1512
  }
1023
1513
 
1024
- .modal-wide label {
1025
- display: block;
1026
- margin-top: 1.5rem;
1027
- font-size: 0.875rem;
1028
- color: var(--text-secondary);
1514
+ /* ============ Settings View ============ */
1515
+ .settings-container {
1516
+ max-width: 640px;
1029
1517
  }
1030
1518
 
1031
- .modal-wide textarea {
1032
- width: 100%;
1033
- margin-top: 0.5rem;
1034
- font-family: inherit;
1035
- font-size: 0.9375rem;
1036
- padding: 0.75rem 1rem;
1519
+ .settings-section {
1520
+ background: var(--bg-glass);
1521
+ backdrop-filter: blur(var(--blur-sm));
1037
1522
  border: 1px solid var(--border);
1038
- background: var(--bg-secondary);
1039
- color: var(--text-primary);
1040
- resize: vertical;
1523
+ border-radius: var(--radius-lg);
1524
+ padding: 24px;
1525
+ margin-bottom: 20px;
1041
1526
  }
1042
1527
 
1043
- .modal-wide textarea:focus {
1044
- outline: none;
1045
- border-color: var(--accent);
1528
+ .settings-section-header {
1529
+ display: flex;
1530
+ align-items: center;
1531
+ justify-content: space-between;
1532
+ margin-bottom: 20px;
1046
1533
  }
1047
1534
 
1048
- #contradiction-dismiss {
1049
- background: var(--bg-tertiary);
1050
- color: var(--text-secondary);
1051
- margin-right: auto;
1535
+ .settings-section h3 {
1536
+ font-size: 1rem;
1537
+ font-weight: 600;
1538
+ display: flex;
1539
+ align-items: center;
1540
+ gap: 10px;
1052
1541
  }
1053
1542
 
1054
- #contradiction-dismiss:hover {
1055
- background: var(--border);
1056
- color: var(--text-primary);
1543
+ .settings-section h3 svg {
1544
+ width: 20px;
1545
+ height: 20px;
1546
+ color: var(--text-tertiary);
1057
1547
  }
1058
1548
 
1059
- /* Settings View */
1060
- .settings-container {
1061
- max-width: 600px;
1549
+ .status-badge {
1550
+ display: inline-flex;
1551
+ align-items: center;
1552
+ gap: 6px;
1553
+ padding: 4px 12px;
1554
+ font-size: 0.75rem;
1555
+ font-weight: 600;
1556
+ border-radius: var(--radius-full);
1557
+ background: var(--bg-glass);
1558
+ color: var(--text-tertiary);
1062
1559
  }
1063
1560
 
1064
- .settings-section {
1065
- background: var(--bg-secondary);
1066
- border: 1px solid var(--border);
1067
- border-radius: var(--radius);
1068
- padding: 1.5rem;
1069
- margin-bottom: 1.5rem;
1561
+ .status-badge.configured {
1562
+ background: var(--success-subtle);
1563
+ color: var(--success);
1070
1564
  }
1071
1565
 
1072
- .settings-section h3 {
1073
- font-size: 1rem;
1074
- font-weight: 600;
1075
- margin-bottom: 0.5rem;
1566
+ .status-badge.not-configured {
1567
+ background: var(--danger-subtle);
1568
+ color: var(--danger);
1076
1569
  }
1077
1570
 
1078
1571
  .settings-row {
1079
1572
  display: flex;
1080
1573
  align-items: center;
1081
- gap: 1rem;
1082
- margin: 1rem 0;
1574
+ gap: 16px;
1575
+ margin-bottom: 16px;
1576
+ }
1577
+
1578
+ .settings-row:last-child {
1579
+ margin-bottom: 0;
1083
1580
  }
1084
1581
 
1085
1582
  .settings-row label {
1086
1583
  font-size: 0.875rem;
1584
+ font-weight: 500;
1087
1585
  color: var(--text-secondary);
1088
1586
  min-width: 80px;
1089
1587
  }
1090
1588
 
1091
- .input-group {
1589
+ .settings-actions {
1092
1590
  display: flex;
1093
- flex: 1;
1094
- gap: 0.5rem;
1591
+ gap: 12px;
1592
+ margin-top: 20px;
1593
+ padding-top: 20px;
1594
+ border-top: 1px solid var(--divider);
1095
1595
  }
1096
1596
 
1097
- .input-group input {
1098
- flex: 1;
1099
- font-family: "SF Mono", Monaco, monospace;
1100
- font-size: 0.875rem;
1101
- padding: 0.5rem 0.75rem;
1102
- border: 1px solid var(--border);
1103
- border-radius: var(--radius);
1104
- background: var(--bg-primary);
1105
- color: var(--text-primary);
1597
+ .help-text {
1598
+ font-size: 0.8125rem;
1599
+ color: var(--text-tertiary);
1600
+ margin-top: 16px;
1601
+ line-height: 1.6;
1106
1602
  }
1107
1603
 
1108
- .input-group input:focus {
1109
- outline: none;
1110
- border-color: var(--accent);
1111
- box-shadow: 0 0 0 2px var(--accent-subtle);
1604
+ .help-text a {
1605
+ color: var(--accent);
1606
+ text-decoration: none;
1112
1607
  }
1113
1608
 
1114
- .input-group button {
1115
- padding: 0.5rem 0.75rem;
1116
- background: var(--bg-tertiary);
1117
- color: var(--text-secondary);
1118
- font-size: 0.875rem;
1609
+ .help-text a:hover {
1610
+ text-decoration: underline;
1119
1611
  }
1120
1612
 
1121
- .input-group button:hover {
1122
- background: var(--border);
1123
- transform: none;
1124
- box-shadow: none;
1613
+ /* ============ Theme Toggle ============ */
1614
+ .theme-toggle {
1615
+ position: relative;
1616
+ width: 64px;
1617
+ height: 32px;
1618
+ background: var(--bg-glass);
1619
+ border: 1px solid var(--border);
1620
+ border-radius: var(--radius-full);
1621
+ cursor: pointer;
1622
+ padding: 4px;
1623
+ display: flex;
1624
+ align-items: center;
1625
+ justify-content: space-between;
1626
+ transition: all var(--transition-fast);
1125
1627
  }
1126
1628
 
1127
- .primary-btn {
1128
- background: var(--accent) !important;
1129
- color: white !important;
1629
+ .theme-toggle:hover {
1630
+ border-color: var(--border-strong);
1130
1631
  }
1131
1632
 
1132
- .primary-btn:hover {
1133
- background: var(--accent-hover) !important;
1633
+ .theme-toggle .toggle-icon {
1634
+ width: 20px;
1635
+ height: 20px;
1636
+ display: flex;
1637
+ align-items: center;
1638
+ justify-content: center;
1639
+ color: var(--text-tertiary);
1640
+ z-index: 1;
1641
+ transition: color var(--transition-fast);
1134
1642
  }
1135
1643
 
1136
- .danger-btn {
1137
- background: var(--bg-tertiary) !important;
1138
- color: var(--text-secondary) !important;
1644
+ .theme-toggle .toggle-icon svg {
1645
+ width: 14px;
1646
+ height: 14px;
1139
1647
  }
1140
1648
 
1141
- .danger-btn:hover {
1142
- background: var(--danger) !important;
1143
- color: white !important;
1649
+ .theme-toggle .toggle-slider {
1650
+ position: absolute;
1651
+ top: 3px;
1652
+ left: 3px;
1653
+ width: 26px;
1654
+ height: 26px;
1655
+ background: var(--accent);
1656
+ border-radius: 50%;
1657
+ transition: transform var(--transition-normal);
1658
+ box-shadow: var(--shadow-sm);
1144
1659
  }
1145
1660
 
1146
- .status-badge {
1147
- display: inline-block;
1148
- font-size: 0.75rem;
1149
- font-weight: 500;
1150
- padding: 0.25rem 0.625rem;
1151
- border-radius: var(--radius);
1152
- background: var(--bg-tertiary);
1153
- color: var(--text-muted);
1661
+ [data-theme="dark"] .theme-toggle .toggle-slider {
1662
+ transform: translateX(32px);
1154
1663
  }
1155
1664
 
1156
- .status-badge.configured {
1157
- background: var(--success-subtle);
1158
- color: var(--success);
1665
+ .theme-toggle .toggle-icon.sun {
1666
+ color: var(--accent);
1159
1667
  }
1160
1668
 
1161
- .status-badge.not-configured {
1162
- background: var(--danger-subtle);
1163
- color: var(--danger);
1669
+ [data-theme="dark"] .theme-toggle .toggle-icon.sun {
1670
+ color: var(--text-tertiary);
1164
1671
  }
1165
1672
 
1166
- .help-text {
1167
- font-size: 0.8125rem;
1168
- color: var(--text-muted);
1169
- margin-top: 1rem;
1673
+ [data-theme="dark"] .theme-toggle .toggle-icon.moon {
1674
+ color: var(--accent);
1170
1675
  }
1171
1676
 
1172
- .help-text a {
1173
- color: var(--accent);
1174
- text-decoration: none;
1677
+ /* ============ Scrollbar ============ */
1678
+ ::-webkit-scrollbar {
1679
+ width: 8px;
1680
+ height: 8px;
1175
1681
  }
1176
1682
 
1177
- .help-text a:hover {
1178
- text-decoration: underline;
1683
+ ::-webkit-scrollbar-track {
1684
+ background: transparent;
1685
+ }
1686
+
1687
+ ::-webkit-scrollbar-thumb {
1688
+ background: var(--border-strong);
1689
+ border-radius: var(--radius-full);
1690
+ }
1691
+
1692
+ ::-webkit-scrollbar-thumb:hover {
1693
+ background: var(--text-tertiary);
1179
1694
  }
1180
1695
 
1181
- /* Responsive */
1182
- @media (max-width: 640px) {
1183
- header {
1184
- flex-wrap: wrap;
1185
- gap: 1rem;
1186
- padding: 1rem;
1696
+ /* ============ Responsive ============ */
1697
+ @media (max-width: 1024px) {
1698
+ .sidebar {
1699
+ transform: translateX(-100%);
1187
1700
  }
1188
1701
 
1189
- nav {
1190
- width: 100%;
1191
- order: 3;
1702
+ .sidebar.open {
1703
+ transform: translateX(0);
1192
1704
  }
1193
1705
 
1194
- .stats {
1195
- margin-left: 0;
1706
+ .main-wrapper {
1707
+ margin-left: 0 !important;
1708
+ }
1709
+
1710
+ .chat-panel {
1196
1711
  width: 100%;
1712
+ max-width: 400px;
1713
+ }
1714
+
1715
+ body.chat-open .main-wrapper {
1716
+ margin-right: 0;
1717
+ }
1718
+ }
1719
+
1720
+ @media (max-width: 768px) {
1721
+ .header {
1722
+ padding: 0 16px;
1723
+ }
1724
+
1725
+ .header-search {
1726
+ display: none;
1197
1727
  }
1198
1728
 
1199
1729
  main {
1200
- padding: 1rem;
1730
+ padding: 16px;
1731
+ }
1732
+
1733
+ .consolidation-header {
1734
+ flex-direction: column;
1735
+ gap: 16px;
1736
+ align-items: stretch;
1201
1737
  }
1202
1738
 
1203
- .form-row {
1739
+ .consolidation-stats {
1740
+ justify-content: space-around;
1741
+ }
1742
+
1743
+ .toolbar {
1744
+ flex-direction: column;
1745
+ align-items: stretch;
1746
+ }
1747
+
1748
+ .toolbar-group {
1749
+ justify-content: space-between;
1750
+ }
1751
+
1752
+ .modal-content {
1753
+ padding: 20px;
1754
+ margin: 16px;
1755
+ max-height: calc(100vh - 32px);
1756
+ }
1757
+ }
1758
+
1759
+ @media (max-width: 480px) {
1760
+ .memory-item .meta {
1761
+ flex-direction: column;
1762
+ gap: 8px;
1763
+ }
1764
+
1765
+ .settings-row {
1204
1766
  flex-direction: column;
1205
- gap: 1rem;
1767
+ align-items: stretch;
1768
+ gap: 8px;
1769
+ }
1770
+
1771
+ .settings-row label {
1772
+ min-width: auto;
1206
1773
  }
1207
1774
  }
1775
+
1776
+ /* ============ Utility Classes ============ */
1777
+ .hidden { display: none !important; }
1778
+ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
1779
+ .text-muted { color: var(--text-tertiary); }
1780
+ .text-accent { color: var(--accent); }
1781
+ .text-success { color: var(--success); }
1782
+ .text-danger { color: var(--danger); }
1783
+ .font-mono { font-family: var(--font-mono); }
1784
+ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }