django-lucy-assist 0.1.0__py3-none-any.whl → 1.0.2__py3-none-any.whl

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,160 +1,920 @@
1
1
  /**
2
- * Lucy Assist - Styles CSS
2
+ * Lucy Assist - Styles CSS autonomes
3
3
  *
4
- * Ce fichier contient les styles spécifiques au chatbot Lucy Assist.
5
- * Il complète DaisyUI/Tailwind avec des styles personnalisés.
4
+ * Ce fichier contient tous les styles necessaires pour le chatbot Lucy Assist.
5
+ * Il est concu pour fonctionner sans dependances externes (DaisyUI/Tailwind).
6
6
  */
7
7
 
8
- /* Cacher les éléments x-cloak avant Alpine init */
8
+ /* Variables CSS */
9
+ :root {
10
+ --lucy-primary: #6366f1;
11
+ --lucy-primary-dark: #4f46e5;
12
+ --lucy-primary-light: #818cf8;
13
+ --lucy-secondary: #64748b;
14
+ --lucy-success: #22c55e;
15
+ --lucy-warning: #f59e0b;
16
+ --lucy-error: #ef4444;
17
+ --lucy-info: #3b82f6;
18
+ --lucy-bg: #ffffff;
19
+ --lucy-bg-dark: #f1f5f9;
20
+ --lucy-bg-darker: #e2e8f0;
21
+ --lucy-text: #1e293b;
22
+ --lucy-text-muted: #64748b;
23
+ --lucy-border: #e2e8f0;
24
+ --lucy-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
25
+ --lucy-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
26
+ }
27
+
28
+ /* Dark mode */
29
+ [data-bs-theme="dark"] {
30
+ --lucy-primary: #818cf8;
31
+ --lucy-primary-dark: #6366f1;
32
+ --lucy-bg: #1e293b;
33
+ --lucy-bg-dark: #334155;
34
+ --lucy-bg-darker: #475569;
35
+ --lucy-text: #f1f5f9;
36
+ --lucy-text-muted: #94a3b8;
37
+ --lucy-border: #475569;
38
+ }
39
+
40
+ /* Cacher les elements x-cloak avant Alpine init */
9
41
  [x-cloak] {
10
42
  display: none !important;
11
43
  }
12
44
 
13
- /* Animation du bouton flottant */
45
+ /* ========================================
46
+ BOUTON FLOTTANT
47
+ ======================================== */
48
+ .lucy-float-btn {
49
+ position: fixed;
50
+ right: 1rem;
51
+ bottom: 1rem;
52
+ z-index: 9998;
53
+ width: 56px;
54
+ height: 56px;
55
+ border-radius: 50%;
56
+ background: var(--lucy-primary);
57
+ color: white;
58
+ border: none;
59
+ cursor: pointer;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ box-shadow: var(--lucy-shadow-lg);
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .lucy-float-btn:hover {
68
+ transform: scale(1.1);
69
+ background: var(--lucy-primary-dark);
70
+ }
71
+
72
+ .lucy-float-btn svg {
73
+ width: 24px;
74
+ height: 24px;
75
+ }
76
+
77
+ .lucy-float-btn.animate-pulse {
78
+ animation: lucy-pulse 2s infinite;
79
+ }
80
+
14
81
  @keyframes lucy-pulse {
15
82
  0%, 100% {
16
83
  transform: scale(1);
17
- box-shadow: 0 0 0 0 rgba(var(--p), 0.7);
84
+ box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7);
18
85
  }
19
86
  50% {
20
87
  transform: scale(1.05);
21
- box-shadow: 0 0 0 10px rgba(var(--p), 0);
88
+ box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
22
89
  }
23
90
  }
24
91
 
25
- .lucy-assist-btn-pulse {
26
- animation: lucy-pulse 2s infinite;
92
+ /* ========================================
93
+ SIDEBAR PRINCIPAL
94
+ ======================================== */
95
+ .lucy-sidebar {
96
+ position: fixed;
97
+ right: 0;
98
+ top: 0;
99
+ height: 100vh;
100
+ width: 384px;
101
+ max-width: 100vw;
102
+ background: var(--lucy-bg);
103
+ box-shadow: var(--lucy-shadow-lg);
104
+ z-index: 9999;
105
+ display: flex;
106
+ flex-direction: column;
107
+ border-left: 1px solid var(--lucy-border);
108
+ transform: translateX(0);
109
+ transition: transform 0.3s ease;
110
+ }
111
+
112
+ .lucy-sidebar.hidden {
113
+ transform: translateX(100%);
27
114
  }
28
115
 
29
- /* Sidebar responsive */
30
116
  @media (max-width: 640px) {
31
- .lucy-assist-sidebar {
32
- width: 100% !important;
117
+ .lucy-sidebar {
118
+ width: 100%;
33
119
  }
34
120
  }
35
121
 
36
- /* Zone de messages avec scroll personnalisé */
37
- .lucy-assist-messages::-webkit-scrollbar {
122
+ /* ========================================
123
+ HEADER
124
+ ======================================== */
125
+ .lucy-header {
126
+ background: var(--lucy-primary);
127
+ color: white;
128
+ padding: 0.75rem 1rem;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: space-between;
132
+ flex-shrink: 0;
133
+ }
134
+
135
+ .lucy-header-title {
136
+ font-size: 1.125rem;
137
+ font-weight: 700;
138
+ margin: 0;
139
+ }
140
+
141
+ .lucy-header-actions {
142
+ display: flex;
143
+ gap: 0.25rem;
144
+ }
145
+
146
+ .lucy-header-btn {
147
+ width: 32px;
148
+ height: 32px;
149
+ border-radius: 50%;
150
+ background: transparent;
151
+ color: white;
152
+ border: none;
153
+ cursor: pointer;
154
+ display: flex;
155
+ align-items: center;
156
+ justify-content: center;
157
+ transition: background 0.2s;
158
+ }
159
+
160
+ .lucy-header-btn:hover {
161
+ background: rgba(255, 255, 255, 0.2);
162
+ }
163
+
164
+ .lucy-header-btn.active {
165
+ background: rgba(255, 255, 255, 0.3);
166
+ }
167
+
168
+ /* ========================================
169
+ CREDITS BAR
170
+ ======================================== */
171
+ .lucy-credits-bar {
172
+ background: var(--lucy-bg-dark);
173
+ padding: 0.5rem 1rem;
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: space-between;
177
+ font-size: 0.875rem;
178
+ color: var(--lucy-text-muted);
179
+ flex-shrink: 0;
180
+ }
181
+
182
+ .lucy-btn-warning {
183
+ background: var(--lucy-warning);
184
+ color: white;
185
+ border: none;
186
+ padding: 0.25rem 0.75rem;
187
+ border-radius: 0.375rem;
188
+ font-size: 0.75rem;
189
+ cursor: pointer;
190
+ display: flex;
191
+ align-items: center;
192
+ gap: 0.25rem;
193
+ transition: background 0.2s;
194
+ }
195
+
196
+ .lucy-btn-warning:hover {
197
+ background: #d97706;
198
+ }
199
+
200
+ /* ========================================
201
+ ZONE DE CONTENU PRINCIPAL
202
+ ======================================== */
203
+ .lucy-content {
204
+ flex: 1;
205
+ overflow: hidden;
206
+ display: flex;
207
+ flex-direction: column;
208
+ }
209
+
210
+ /* ========================================
211
+ HISTORIQUE
212
+ ======================================== */
213
+ .lucy-history {
214
+ flex: 1;
215
+ overflow-y: auto;
216
+ padding: 1rem;
217
+ }
218
+
219
+ .lucy-history h3 {
220
+ font-weight: 600;
221
+ margin-bottom: 0.75rem;
222
+ color: var(--lucy-text);
223
+ }
224
+
225
+ .lucy-history-empty {
226
+ color: var(--lucy-text-muted);
227
+ font-size: 0.875rem;
228
+ }
229
+
230
+ .lucy-history-list {
231
+ display: flex;
232
+ flex-direction: column;
233
+ gap: 0.5rem;
234
+ }
235
+
236
+ .lucy-history-item {
237
+ padding: 0.75rem;
238
+ background: var(--lucy-bg-dark);
239
+ border-radius: 0.5rem;
240
+ cursor: pointer;
241
+ transition: background 0.2s;
242
+ }
243
+
244
+ .lucy-history-item:hover {
245
+ background: var(--lucy-bg-darker);
246
+ }
247
+
248
+ .lucy-history-item.active {
249
+ outline: 2px solid var(--lucy-primary);
250
+ }
251
+
252
+ .lucy-history-item-title {
253
+ font-weight: 500;
254
+ font-size: 0.875rem;
255
+ color: var(--lucy-text);
256
+ overflow: hidden;
257
+ text-overflow: ellipsis;
258
+ white-space: nowrap;
259
+ }
260
+
261
+ .lucy-history-item-meta {
262
+ font-size: 0.75rem;
263
+ color: var(--lucy-text-muted);
264
+ margin-top: 0.25rem;
265
+ }
266
+
267
+ .lucy-btn-delete {
268
+ background: transparent;
269
+ color: var(--lucy-error);
270
+ border: none;
271
+ padding: 0.25rem 0.5rem;
272
+ font-size: 0.75rem;
273
+ cursor: pointer;
274
+ margin-top: 0.25rem;
275
+ border-radius: 0.25rem;
276
+ transition: background 0.2s;
277
+ }
278
+
279
+ .lucy-btn-delete:hover {
280
+ background: rgba(239, 68, 68, 0.1);
281
+ }
282
+
283
+ /* ========================================
284
+ DOCUMENTATION
285
+ ======================================== */
286
+ .lucy-doc {
287
+ flex: 1;
288
+ overflow-y: auto;
289
+ padding: 1rem;
290
+ color: var(--lucy-text);
291
+ }
292
+
293
+ /* ========================================
294
+ ZONE CHAT
295
+ ======================================== */
296
+ .lucy-chat {
297
+ flex: 1;
298
+ display: flex;
299
+ flex-direction: column;
300
+ overflow: hidden;
301
+ }
302
+
303
+ /* Zone messages */
304
+ .lucy-messages {
305
+ flex: 1;
306
+ overflow-y: auto;
307
+ padding: 1rem;
308
+ display: flex;
309
+ flex-direction: column;
310
+ gap: 1rem;
311
+ }
312
+
313
+ .lucy-messages::-webkit-scrollbar {
38
314
  width: 6px;
39
315
  }
40
316
 
41
- .lucy-assist-messages::-webkit-scrollbar-track {
317
+ .lucy-messages::-webkit-scrollbar-track {
42
318
  background: transparent;
43
319
  }
44
320
 
45
- .lucy-assist-messages::-webkit-scrollbar-thumb {
321
+ .lucy-messages::-webkit-scrollbar-thumb {
46
322
  background-color: rgba(0, 0, 0, 0.2);
47
323
  border-radius: 3px;
48
324
  }
49
325
 
50
- .lucy-assist-messages::-webkit-scrollbar-thumb:hover {
51
- background-color: rgba(0, 0, 0, 0.3);
326
+ /* Message de bienvenue */
327
+ .lucy-welcome {
328
+ text-align: center;
329
+ padding: 2rem 0;
52
330
  }
53
331
 
54
- /* Animation de typing pour le chargement */
55
- @keyframes lucy-typing {
56
- 0% { opacity: 0.3; }
57
- 50% { opacity: 1; }
58
- 100% { opacity: 0.3; }
332
+ .lucy-welcome-icon {
333
+ margin-bottom: 1rem;
334
+ }
335
+
336
+ .lucy-welcome-icon img {
337
+ width: 80px;
338
+ height: 80px;
339
+ margin: 0 auto;
340
+ }
341
+
342
+ .lucy-welcome h3 {
343
+ font-weight: 600;
344
+ font-size: 1.125rem;
345
+ margin-bottom: 0.5rem;
346
+ color: var(--lucy-text);
59
347
  }
60
348
 
61
- .lucy-typing-dot {
349
+ .lucy-welcome p {
350
+ color: var(--lucy-text-muted);
351
+ font-size: 0.875rem;
352
+ margin-bottom: 1rem;
353
+ }
354
+
355
+ /* Suggestions */
356
+ .lucy-suggestions {
357
+ display: flex;
358
+ flex-direction: column;
359
+ gap: 0.5rem;
360
+ }
361
+
362
+ .lucy-suggestion-btn {
363
+ width: 100%;
364
+ text-align: left;
365
+ padding: 0.5rem 0.75rem;
366
+ background: var(--lucy-bg);
367
+ border: 1px solid var(--lucy-border);
368
+ border-radius: 0.5rem;
369
+ cursor: pointer;
370
+ display: flex;
371
+ align-items: center;
372
+ gap: 0.5rem;
373
+ font-size: 0.875rem;
374
+ color: var(--lucy-text);
375
+ transition: all 0.2s;
376
+ }
377
+
378
+ .lucy-suggestion-btn:hover {
379
+ background: var(--lucy-bg-dark);
380
+ transform: translateX(4px);
381
+ }
382
+
383
+ .lucy-suggestion-btn i {
384
+ color: var(--lucy-warning);
385
+ }
386
+
387
+ /* Messages chat */
388
+ .lucy-message {
389
+ display: flex;
390
+ gap: 0.5rem;
391
+ max-width: 85%;
392
+ }
393
+
394
+ .lucy-message.user {
395
+ flex-direction: row-reverse;
396
+ margin-left: auto;
397
+ }
398
+
399
+ .lucy-message-avatar {
400
+ width: 32px;
401
+ height: 32px;
402
+ border-radius: 50%;
403
+ overflow: hidden;
404
+ flex-shrink: 0;
405
+ display: flex;
406
+ align-items: center;
407
+ justify-content: center;
408
+ background: var(--lucy-bg-dark);
409
+ }
410
+
411
+ .lucy-message-avatar img {
412
+ width: 100%;
413
+ height: 100%;
414
+ object-fit: cover;
415
+ }
416
+
417
+ .lucy-message-avatar i {
418
+ font-size: 0.875rem;
419
+ color: var(--lucy-text-muted);
420
+ }
421
+
422
+ .lucy-message-content {
423
+ display: flex;
424
+ flex-direction: column;
425
+ }
426
+
427
+ .lucy-message-bubble {
428
+ padding: 0.75rem 1rem;
429
+ border-radius: 1rem;
430
+ font-size: 0.875rem;
431
+ line-height: 1.5;
432
+ word-wrap: break-word;
433
+ }
434
+
435
+ .lucy-message.bot .lucy-message-bubble {
436
+ background: var(--lucy-bg-dark);
437
+ color: var(--lucy-text);
438
+ border-bottom-left-radius: 0.25rem;
439
+ }
440
+
441
+ .lucy-message.user .lucy-message-bubble {
442
+ background: var(--lucy-primary);
443
+ color: white;
444
+ border-bottom-right-radius: 0.25rem;
445
+ }
446
+
447
+ .lucy-message-time {
448
+ font-size: 0.625rem;
449
+ color: var(--lucy-text-muted);
450
+ margin-top: 0.25rem;
451
+ opacity: 0.7;
452
+ }
453
+
454
+ .lucy-message.user .lucy-message-time {
455
+ text-align: right;
456
+ }
457
+
458
+ /* Loading dots */
459
+ .lucy-loading-dots {
460
+ display: inline-flex;
461
+ gap: 4px;
462
+ }
463
+
464
+ .lucy-loading-dots span {
465
+ width: 6px;
466
+ height: 6px;
467
+ background: var(--lucy-text-muted);
468
+ border-radius: 50%;
62
469
  animation: lucy-typing 1.4s infinite;
63
470
  }
64
471
 
65
- .lucy-typing-dot:nth-child(2) {
472
+ .lucy-loading-dots span:nth-child(2) {
66
473
  animation-delay: 0.2s;
67
474
  }
68
475
 
69
- .lucy-typing-dot:nth-child(3) {
476
+ .lucy-loading-dots span:nth-child(3) {
70
477
  animation-delay: 0.4s;
71
478
  }
72
479
 
73
- /* Message bubble avec effet d'apparition */
74
- @keyframes lucy-message-appear {
75
- from {
76
- opacity: 0;
77
- transform: translateY(10px);
78
- }
79
- to {
80
- opacity: 1;
81
- transform: translateY(0);
82
- }
480
+ @keyframes lucy-typing {
481
+ 0%, 100% { opacity: 0.3; }
482
+ 50% { opacity: 1; }
83
483
  }
84
484
 
85
- .lucy-message-new {
86
- animation: lucy-message-appear 0.3s ease-out;
485
+ /* ========================================
486
+ FEEDBACK BARS
487
+ ======================================== */
488
+ .lucy-feedback-bar {
489
+ padding: 0.5rem 1rem;
490
+ border-top: 1px solid;
87
491
  }
88
492
 
89
- /* Guide overlay */
90
- .lucy-guide-overlay {
91
- backdrop-filter: blur(2px);
493
+ .lucy-feedback-bar.info {
494
+ background: rgba(59, 130, 246, 0.1);
495
+ border-color: rgba(59, 130, 246, 0.3);
92
496
  }
93
497
 
94
- .lucy-guide-highlight {
95
- position: relative;
96
- z-index: 51;
97
- box-shadow: 0 0 0 4px rgba(var(--p), 0.5),
98
- 0 0 0 9999px rgba(0, 0, 0, 0.5);
99
- border-radius: 8px;
498
+ .lucy-feedback-bar.warning {
499
+ background: rgba(245, 158, 11, 0.1);
500
+ border-color: rgba(245, 158, 11, 0.3);
100
501
  }
101
502
 
102
- /* Code blocks dans les messages */
103
- .lucy-message-content pre {
104
- background-color: var(--b3);
105
- padding: 0.5rem;
503
+ .lucy-feedback-btn {
504
+ width: 100%;
505
+ padding: 0.5rem 1rem;
106
506
  border-radius: 0.375rem;
107
- overflow-x: auto;
108
- margin: 0.5rem 0;
507
+ border: 1px solid;
508
+ background: transparent;
509
+ cursor: pointer;
510
+ display: flex;
511
+ align-items: center;
512
+ justify-content: center;
513
+ gap: 0.5rem;
514
+ font-size: 0.875rem;
515
+ transition: background 0.2s;
109
516
  }
110
517
 
111
- .lucy-message-content code {
112
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
113
- font-size: 0.875em;
518
+ .lucy-feedback-btn.info {
519
+ color: var(--lucy-info);
520
+ border-color: var(--lucy-info);
114
521
  }
115
522
 
116
- /* Suggestions avec hover effect */
117
- .lucy-suggestion-btn {
118
- transition: all 0.2s ease;
523
+ .lucy-feedback-btn.info:hover {
524
+ background: rgba(59, 130, 246, 0.1);
119
525
  }
120
526
 
121
- .lucy-suggestion-btn:hover {
122
- transform: translateX(4px);
527
+ .lucy-feedback-btn.warning {
528
+ color: var(--lucy-warning);
529
+ border-color: var(--lucy-warning);
123
530
  }
124
531
 
125
- /* Modal backdrop blur */
126
- .lucy-modal-backdrop {
127
- backdrop-filter: blur(4px);
532
+ .lucy-feedback-btn.warning:hover {
533
+ background: rgba(245, 158, 11, 0.1);
128
534
  }
129
535
 
130
- /* Stats cards animation */
131
- .lucy-stat-card {
132
- transition: transform 0.2s ease, box-shadow 0.2s ease;
536
+ /* ========================================
537
+ ZONE DE SAISIE
538
+ ======================================== */
539
+ .lucy-input-area {
540
+ padding: 1rem;
541
+ border-top: 1px solid var(--lucy-border);
542
+ background: var(--lucy-bg);
543
+ flex-shrink: 0;
133
544
  }
134
545
 
135
- .lucy-stat-card:hover {
136
- transform: translateY(-2px);
137
- box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
546
+ .lucy-input-wrapper {
547
+ display: flex;
548
+ gap: 0.5rem;
549
+ align-items: flex-end;
550
+ }
551
+
552
+ .lucy-input {
553
+ flex: 1;
554
+ padding: 0.5rem 0.75rem;
555
+ border: 1px solid var(--lucy-border);
556
+ border-radius: 0.5rem;
557
+ font-size: 0.875rem;
558
+ resize: none;
559
+ min-height: 40px;
560
+ max-height: 128px;
561
+ font-family: inherit;
562
+ background: var(--lucy-bg);
563
+ color: var(--lucy-text);
138
564
  }
139
565
 
140
- /* Input focus state */
141
566
  .lucy-input:focus {
142
567
  outline: none;
143
- box-shadow: 0 0 0 2px rgba(var(--p), 0.3);
568
+ border-color: var(--lucy-primary);
569
+ box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
570
+ }
571
+
572
+ .lucy-input:disabled {
573
+ background: var(--lucy-bg-dark);
574
+ cursor: not-allowed;
575
+ }
576
+
577
+ .lucy-send-btn {
578
+ width: 40px;
579
+ height: 40px;
580
+ background: var(--lucy-primary);
581
+ color: white;
582
+ border: none;
583
+ border-radius: 0.5rem;
584
+ cursor: pointer;
585
+ display: flex;
586
+ align-items: center;
587
+ justify-content: center;
588
+ transition: background 0.2s;
589
+ flex-shrink: 0;
590
+ }
591
+
592
+ .lucy-send-btn:hover:not(:disabled) {
593
+ background: var(--lucy-primary-dark);
594
+ }
595
+
596
+ .lucy-send-btn:disabled {
597
+ background: var(--lucy-secondary);
598
+ cursor: not-allowed;
599
+ }
600
+
601
+ .lucy-input-hint {
602
+ text-align: center;
603
+ font-size: 0.75rem;
604
+ color: var(--lucy-text-muted);
605
+ margin-top: 0.5rem;
606
+ }
607
+
608
+ /* ========================================
609
+ MODALS
610
+ ======================================== */
611
+ .lucy-modal-overlay {
612
+ position: fixed;
613
+ inset: 0;
614
+ background: rgba(0, 0, 0, 0.5);
615
+ z-index: 10000;
616
+ display: flex;
617
+ align-items: center;
618
+ justify-content: center;
619
+ padding: 1rem;
620
+ }
621
+
622
+ .lucy-modal {
623
+ background: var(--lucy-bg);
624
+ border-radius: 1rem;
625
+ max-width: 400px;
626
+ width: 100%;
627
+ max-height: 90vh;
628
+ overflow-y: auto;
629
+ box-shadow: var(--lucy-shadow-lg);
630
+ }
631
+
632
+ .lucy-modal-header {
633
+ padding: 1rem 1.5rem;
634
+ font-weight: 700;
635
+ font-size: 1.125rem;
636
+ color: var(--lucy-text);
637
+ display: flex;
638
+ align-items: center;
639
+ gap: 0.5rem;
640
+ }
641
+
642
+ .lucy-modal-body {
643
+ padding: 0 1.5rem 1rem;
644
+ }
645
+
646
+ .lucy-modal-footer {
647
+ padding: 1rem 1.5rem;
648
+ display: flex;
649
+ justify-content: flex-end;
650
+ gap: 0.5rem;
651
+ }
652
+
653
+ /* Form controls */
654
+ .lucy-form-group {
655
+ margin-bottom: 1rem;
656
+ }
657
+
658
+ .lucy-form-label {
659
+ display: block;
660
+ font-size: 0.875rem;
661
+ font-weight: 500;
662
+ margin-bottom: 0.5rem;
663
+ color: var(--lucy-text);
664
+ }
665
+
666
+ .lucy-form-input {
667
+ width: 100%;
668
+ padding: 0.5rem 0.75rem;
669
+ border: 1px solid var(--lucy-border);
670
+ border-radius: 0.5rem;
671
+ font-size: 0.875rem;
672
+ background: var(--lucy-bg);
673
+ color: var(--lucy-text);
674
+ }
675
+
676
+ .lucy-form-input:focus {
677
+ outline: none;
678
+ border-color: var(--lucy-primary);
679
+ }
680
+
681
+ .lucy-form-textarea {
682
+ width: 100%;
683
+ padding: 0.5rem 0.75rem;
684
+ border: 1px solid var(--lucy-border);
685
+ border-radius: 0.5rem;
686
+ font-size: 0.875rem;
687
+ resize: vertical;
688
+ min-height: 100px;
689
+ font-family: inherit;
690
+ background: var(--lucy-bg);
691
+ color: var(--lucy-text);
692
+ }
693
+
694
+ .lucy-form-textarea:focus {
695
+ outline: none;
696
+ border-color: var(--lucy-primary);
697
+ }
698
+
699
+ /* Info box */
700
+ .lucy-info-box {
701
+ background: rgba(59, 130, 246, 0.1);
702
+ border: 1px solid rgba(59, 130, 246, 0.3);
703
+ border-radius: 0.5rem;
704
+ padding: 0.75rem 1rem;
705
+ font-size: 0.875rem;
706
+ color: var(--lucy-info);
707
+ display: flex;
708
+ align-items: flex-start;
709
+ gap: 0.5rem;
710
+ margin-bottom: 1rem;
711
+ }
712
+
713
+ /* Stats box */
714
+ .lucy-stats-box {
715
+ background: var(--lucy-bg-dark);
716
+ border-radius: 0.5rem;
717
+ padding: 1rem;
718
+ margin-bottom: 1rem;
719
+ }
720
+
721
+ .lucy-stats-row {
722
+ display: flex;
723
+ justify-content: space-between;
724
+ margin-bottom: 0.5rem;
725
+ }
726
+
727
+ .lucy-stats-row:last-child {
728
+ margin-bottom: 0;
729
+ }
730
+
731
+ .lucy-stats-label {
732
+ color: var(--lucy-text-muted);
144
733
  }
145
734
 
146
- /* Dark mode adjustments */
147
- [data-theme="dark"] .lucy-assist-messages::-webkit-scrollbar-thumb {
148
- background-color: rgba(255, 255, 255, 0.2);
735
+ .lucy-stats-value {
736
+ font-weight: 600;
737
+ color: var(--lucy-text);
738
+ }
739
+
740
+ /* Buttons */
741
+ .lucy-btn {
742
+ padding: 0.5rem 1rem;
743
+ border-radius: 0.5rem;
744
+ font-size: 0.875rem;
745
+ font-weight: 500;
746
+ cursor: pointer;
747
+ border: none;
748
+ display: inline-flex;
749
+ align-items: center;
750
+ justify-content: center;
751
+ gap: 0.5rem;
752
+ transition: all 0.2s;
753
+ }
754
+
755
+ .lucy-btn:disabled {
756
+ opacity: 0.6;
757
+ cursor: not-allowed;
758
+ }
759
+
760
+ .lucy-btn-ghost {
761
+ background: transparent;
762
+ color: var(--lucy-text-muted);
763
+ }
764
+
765
+ .lucy-btn-ghost:hover:not(:disabled) {
766
+ background: var(--lucy-bg-dark);
767
+ }
768
+
769
+ .lucy-btn-primary {
770
+ background: var(--lucy-primary);
771
+ color: white;
772
+ }
773
+
774
+ .lucy-btn-primary:hover:not(:disabled) {
775
+ background: var(--lucy-primary-dark);
776
+ }
777
+
778
+ .lucy-btn-warning-solid {
779
+ background: var(--lucy-warning);
780
+ color: white;
781
+ }
782
+
783
+ .lucy-btn-warning-solid:hover:not(:disabled) {
784
+ background: #d97706;
785
+ }
786
+
787
+ /* Loading spinner */
788
+ .lucy-spinner {
789
+ width: 16px;
790
+ height: 16px;
791
+ border: 2px solid currentColor;
792
+ border-right-color: transparent;
793
+ border-radius: 50%;
794
+ animation: lucy-spin 0.75s linear infinite;
795
+ }
796
+
797
+ @keyframes lucy-spin {
798
+ to { transform: rotate(360deg); }
799
+ }
800
+
801
+ /* ========================================
802
+ GUIDE INTERACTIF
803
+ ======================================== */
804
+ .lucy-guide-overlay {
805
+ position: fixed;
806
+ inset: 0;
807
+ background: rgba(0, 0, 0, 0.5);
808
+ z-index: 10001;
809
+ backdrop-filter: blur(2px);
810
+ }
811
+
812
+ .lucy-guide-modal {
813
+ position: absolute;
814
+ background: var(--lucy-bg);
815
+ border-radius: 1rem;
816
+ padding: 1.5rem;
817
+ max-width: 400px;
818
+ box-shadow: var(--lucy-shadow-lg);
819
+ }
820
+
821
+ .lucy-guide-modal.center {
822
+ top: 50%;
823
+ left: 50%;
824
+ transform: translate(-50%, -50%);
825
+ }
826
+
827
+ .lucy-guide-modal.bottom-right {
828
+ bottom: 80px;
829
+ right: 1rem;
830
+ }
831
+
832
+ .lucy-guide-modal.bottom-right::after {
833
+ content: '';
834
+ position: absolute;
835
+ bottom: -8px;
836
+ right: 32px;
837
+ width: 16px;
838
+ height: 16px;
839
+ background: var(--lucy-bg);
840
+ transform: rotate(45deg);
841
+ }
842
+
843
+ .lucy-guide-title {
844
+ font-size: 1.25rem;
845
+ font-weight: 700;
846
+ margin-bottom: 1rem;
847
+ color: var(--lucy-text);
848
+ display: flex;
849
+ align-items: center;
850
+ gap: 0.5rem;
851
+ }
852
+
853
+ .lucy-guide-title i {
854
+ color: var(--lucy-warning);
855
+ }
856
+
857
+ .lucy-guide-list {
858
+ list-style: disc;
859
+ padding-left: 1.5rem;
860
+ margin-bottom: 1rem;
861
+ font-size: 0.875rem;
862
+ color: var(--lucy-text);
863
+ }
864
+
865
+ .lucy-guide-list li {
866
+ margin-bottom: 0.25rem;
867
+ }
868
+
869
+ .lucy-guide-text {
870
+ font-size: 0.875rem;
871
+ margin-bottom: 0.75rem;
872
+ color: var(--lucy-text);
873
+ }
874
+
875
+ .lucy-guide-actions {
876
+ display: flex;
877
+ justify-content: flex-end;
878
+ gap: 0.5rem;
879
+ }
880
+
881
+ .lucy-kbd {
882
+ display: inline-block;
883
+ padding: 0.125rem 0.375rem;
884
+ background: var(--lucy-bg-dark);
885
+ border: 1px solid var(--lucy-border);
886
+ border-radius: 0.25rem;
887
+ font-size: 0.75rem;
888
+ font-family: monospace;
889
+ }
890
+
891
+ /* ========================================
892
+ CODE BLOCKS
893
+ ======================================== */
894
+ .lucy-message-bubble pre {
895
+ background: var(--lucy-bg-darker);
896
+ padding: 0.5rem;
897
+ border-radius: 0.375rem;
898
+ overflow-x: auto;
899
+ margin: 0.5rem 0;
900
+ }
901
+
902
+ .lucy-message-bubble code {
903
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
904
+ font-size: 0.875em;
149
905
  }
150
906
 
151
- [data-theme="dark"] .lucy-assist-messages::-webkit-scrollbar-thumb:hover {
152
- background-color: rgba(255, 255, 255, 0.3);
907
+ .lucy-message-bubble a {
908
+ color: var(--lucy-primary);
909
+ text-decoration: underline;
153
910
  }
154
911
 
155
- /* Print styles - hide chatbot */
912
+ /* ========================================
913
+ PRINT STYLES
914
+ ======================================== */
156
915
  @media print {
157
- .lucy-assist-container {
916
+ .lucy-float-btn,
917
+ .lucy-sidebar {
158
918
  display: none !important;
159
919
  }
160
920
  }