@imenam/mcp-messenger 1.0.17 → 1.0.18

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 (10) hide show
  1. package/README.md +38 -6
  2. package/dist/src/core/store.d.ts +25 -0
  3. package/dist/src/core/store.js +58 -1
  4. package/dist/src/server/app.js +48 -1
  5. package/dist/src/server/ui/app.js +181 -1
  6. package/dist/src/server/ui/index.html +48 -1
  7. package/dist/src/server/ui/styles.css +1560 -1409
  8. package/dist/src/version.d.ts +1 -1
  9. package/dist/src/version.js +1 -1
  10. package/package.json +1 -1
package/dist/src/server/ui/styles.css CHANGED
@@ -1,1409 +1,1560 @@
1
- :root {
2
- --bg: #f6f7f9;
3
- --panel: #ffffff;
4
- --border: #e2e5ea;
5
- --border-soft: #eef0f3;
6
- --text: #1c2024;
7
- --muted: #6b7280;
8
- --accent: #2f6feb;
9
- --accent-soft: #e8f0fe;
10
- --accent-softer: #dbe6fb;
11
- --ok: #1e7a34;
12
- --ok-soft: #e6f4ea;
13
- --warn: #b45309;
14
- --warn-soft: #fff3e0;
15
- --danger: #c8362f;
16
- --danger-soft: #fdecea;
17
- --neutral-soft: #eef0f3;
18
- --radius: 8px;
19
- --topbar-h: 56px;
20
- }
21
-
22
- @media (prefers-color-scheme: dark) {
23
- :root {
24
- --bg: #14171c;
25
- --panel: #1b1f26;
26
- --border: #2b313b;
27
- --border-soft: #232831;
28
- --text: #e6e9ee;
29
- --muted: #98a1b0;
30
- --accent: #7aa2f7;
31
- --accent-soft: #223049;
32
- --accent-softer: #2b3d5c;
33
- --ok: #7ee2a0;
34
- --ok-soft: #1d3327;
35
- --warn: #f0b429;
36
- --warn-soft: #3a2c14;
37
- --danger: #f07178;
38
- --danger-soft: #3a2023;
39
- --neutral-soft: #262c35;
40
- }
41
- }
42
-
43
- * {
44
- box-sizing: border-box;
45
- }
46
-
47
- [hidden] {
48
- display: none !important;
49
- }
50
-
51
- body {
52
- margin: 0;
53
- font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
54
- background: var(--bg);
55
- color: var(--text);
56
- }
57
-
58
- .icon {
59
- width: 16px;
60
- height: 16px;
61
- fill: none;
62
- stroke: currentColor;
63
- stroke-width: 2;
64
- stroke-linecap: round;
65
- stroke-linejoin: round;
66
- flex: none;
67
- }
68
-
69
- .muted {
70
- color: var(--muted);
71
- }
72
-
73
- /* --- Barre du haut -------------------------------------------------------- */
74
-
75
- .topbar {
76
- display: flex;
77
- align-items: center;
78
- gap: 16px;
79
- height: var(--topbar-h);
80
- padding: 0 20px;
81
- background: var(--panel);
82
- border-bottom: 1px solid var(--border);
83
- }
84
-
85
- .brand {
86
- display: flex;
87
- align-items: center;
88
- gap: 12px;
89
- flex: none;
90
- }
91
-
92
- .brand-mark {
93
- width: 20px;
94
- height: 20px;
95
- fill: none;
96
- stroke: var(--accent);
97
- stroke-width: 2;
98
- stroke-linecap: round;
99
- stroke-linejoin: round;
100
- }
101
-
102
- .brand h1 {
103
- font-size: 16px;
104
- margin: 0;
105
- white-space: nowrap;
106
- }
107
-
108
- /* La pastille dit l'état du serveur d'un coup d'œil : couleur + mot, jamais la couleur seule. */
109
- .pill {
110
- display: inline-flex;
111
- align-items: center;
112
- gap: 6px;
113
- padding: 2px 10px;
114
- border-radius: 999px;
115
- font-size: 12px;
116
- white-space: nowrap;
117
- background: var(--neutral-soft);
118
- color: var(--muted);
119
- }
120
-
121
- .pill-dot {
122
- width: 6px;
123
- height: 6px;
124
- border-radius: 50%;
125
- background: currentColor;
126
- }
127
-
128
- .pill--ok {
129
- background: var(--ok-soft);
130
- color: var(--ok);
131
- }
132
-
133
- .pill--ko {
134
- background: var(--danger-soft);
135
- color: var(--danger);
136
- }
137
-
138
- .topbar-search {
139
- display: flex;
140
- align-items: center;
141
- gap: 8px;
142
- flex: 1;
143
- max-width: 420px;
144
- margin: 0 auto;
145
- padding: 0 12px;
146
- height: 32px;
147
- border-radius: var(--radius);
148
- border: 1px solid var(--border);
149
- background: var(--bg);
150
- color: var(--muted);
151
- }
152
-
153
- .topbar-search input {
154
- flex: 1;
155
- min-width: 0;
156
- border: 0;
157
- background: none;
158
- font: inherit;
159
- font-size: 13px;
160
- color: var(--text);
161
- outline: none;
162
- }
163
-
164
- .topbar-controls {
165
- display: flex;
166
- align-items: center;
167
- gap: 12px;
168
- flex: none;
169
- margin-left: auto;
170
- }
171
-
172
- /* Interrupteur du rafraîchissement : la case native est masquée, pas retirée. */
173
- .switch {
174
- display: flex;
175
- align-items: center;
176
- gap: 8px;
177
- cursor: pointer;
178
- user-select: none;
179
- }
180
-
181
- .switch input {
182
- position: absolute;
183
- opacity: 0;
184
- width: 0;
185
- height: 0;
186
- }
187
-
188
- .switch-track {
189
- width: 34px;
190
- height: 18px;
191
- border-radius: 999px;
192
- background: var(--border);
193
- padding: 2px;
194
- transition: background 0.15s;
195
- }
196
-
197
- .switch-knob {
198
- display: block;
199
- width: 14px;
200
- height: 14px;
201
- border-radius: 50%;
202
- background: var(--panel);
203
- transition: transform 0.15s;
204
- }
205
-
206
- .switch input:checked + .switch-track {
207
- background: var(--accent);
208
- }
209
-
210
- .switch input:checked + .switch-track .switch-knob {
211
- transform: translateX(16px);
212
- }
213
-
214
- .switch input:focus-visible + .switch-track {
215
- outline: 2px solid var(--accent);
216
- outline-offset: 2px;
217
- }
218
-
219
- .switch-label {
220
- font-size: 13px;
221
- color: var(--muted);
222
- }
223
-
224
- /* --- Boutons -------------------------------------------------------------- */
225
-
226
- .btn {
227
- font: inherit;
228
- font-size: 13px;
229
- display: inline-flex;
230
- align-items: center;
231
- justify-content: center;
232
- gap: 8px;
233
- padding: 7px 12px;
234
- border-radius: var(--radius);
235
- border: 1px solid var(--border);
236
- background: var(--panel);
237
- color: var(--text);
238
- cursor: pointer;
239
- }
240
-
241
- .btn:hover {
242
- border-color: var(--accent);
243
- }
244
-
245
- .btn:focus-visible {
246
- outline: 2px solid var(--accent);
247
- outline-offset: 2px;
248
- }
249
-
250
- .btn--icon {
251
- padding: 7px;
252
- }
253
-
254
- .btn--ghost {
255
- border-color: transparent;
256
- background: none;
257
- color: var(--muted);
258
- }
259
-
260
- .btn--link {
261
- border-color: transparent;
262
- background: none;
263
- color: var(--accent);
264
- padding: 7px 4px;
265
- }
266
-
267
- .btn--primary {
268
- background: var(--accent);
269
- border-color: var(--accent);
270
- color: #ffffff;
271
- font-weight: 600;
272
- padding: 10px 12px;
273
- }
274
-
275
- .btn--primary:hover {
276
- filter: brightness(1.05);
277
- }
278
-
279
- .btn--block {
280
- width: 100%;
281
- }
282
-
283
- /* --- Connexion ------------------------------------------------------------ */
284
-
285
- .login {
286
- display: flex;
287
- justify-content: center;
288
- padding: 120px 20px 20px;
289
- }
290
-
291
- .card {
292
- width: 420px;
293
- max-width: 100%;
294
- padding: 32px;
295
- border-radius: 12px;
296
- border: 1px solid var(--border);
297
- background: var(--panel);
298
- box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
299
- text-align: center;
300
- }
301
-
302
- .card-badge {
303
- width: 48px;
304
- height: 48px;
305
- margin: 0 auto 16px;
306
- border-radius: 50%;
307
- display: grid;
308
- place-items: center;
309
- background: var(--accent-soft);
310
- color: var(--accent);
311
- }
312
-
313
- .card-badge .icon {
314
- width: 22px;
315
- height: 22px;
316
- }
317
-
318
- .card h2 {
319
- margin: 0;
320
- font-size: 18px;
321
- }
322
-
323
- .card-sub {
324
- margin: 4px 0 0;
325
- font-size: 13px;
326
- color: var(--muted);
327
- }
328
-
329
- .card-note {
330
- margin: 16px 0 0;
331
- font-size: 12px;
332
- line-height: 1.4;
333
- color: var(--muted);
334
- text-align: left;
335
- }
336
-
337
- .field {
338
- display: block;
339
- margin: 24px 0 16px;
340
- text-align: left;
341
- }
342
-
343
- .field-label {
344
- display: block;
345
- font-size: 13px;
346
- font-weight: 600;
347
- margin-bottom: 6px;
348
- }
349
-
350
- .field-input {
351
- display: flex;
352
- align-items: center;
353
- gap: 8px;
354
- padding: 0 12px;
355
- height: 40px;
356
- border-radius: var(--radius);
357
- border: 1px solid var(--border);
358
- background: var(--panel);
359
- color: var(--muted);
360
- }
361
-
362
- .field-input:focus-within {
363
- border-color: var(--accent);
364
- }
365
-
366
- .field-input input {
367
- flex: 1;
368
- min-width: 0;
369
- border: 0;
370
- background: none;
371
- font: inherit;
372
- color: var(--text);
373
- outline: none;
374
- }
375
-
376
- .field-eye {
377
- border: 0;
378
- background: none;
379
- padding: 0;
380
- color: var(--muted);
381
- cursor: pointer;
382
- display: flex;
383
- }
384
-
385
- .field-error {
386
- display: block;
387
- margin-top: 8px;
388
- min-height: 16px;
389
- font-size: 12px;
390
- color: var(--danger);
391
- }
392
-
393
- /* Le champ vire au rouge en même temps que le message : l'erreur est portée par les deux. */
394
- .field.is-invalid .field-input {
395
- border-color: var(--danger);
396
- }
397
-
398
- /* --- Console -------------------------------------------------------------- */
399
-
400
- .console {
401
- display: grid;
402
- grid-template-columns: 240px 400px minmax(0, 1fr);
403
- height: calc(100vh - var(--topbar-h));
404
- }
405
-
406
- .console.has-sheet {
407
- grid-template-columns: 240px 360px minmax(0, 1fr) 360px;
408
- }
409
-
410
- .console.is-collapsed {
411
- grid-template-columns: 57px 360px minmax(0, 1fr);
412
- }
413
-
414
- .console.is-collapsed.has-sheet {
415
- grid-template-columns: 57px 360px minmax(0, 1fr) 360px;
416
- }
417
-
418
- /* --- Colonne des agents --------------------------------------------------- */
419
-
420
- .agents {
421
- border-right: 1px solid var(--border);
422
- overflow-y: auto;
423
- display: flex;
424
- flex-direction: column;
425
- }
426
-
427
- .agents-head {
428
- display: flex;
429
- align-items: center;
430
- justify-content: space-between;
431
- padding: 18px 12px 8px 20px;
432
- }
433
-
434
- .section-label {
435
- font-size: 12px;
436
- font-weight: 600;
437
- letter-spacing: 0.06em;
438
- text-transform: uppercase;
439
- color: var(--muted);
440
- }
441
-
442
- .agent-list {
443
- list-style: none;
444
- margin: 0;
445
- padding: 0 8px;
446
- flex: 1;
447
- }
448
-
449
- .agent {
450
- display: flex;
451
- align-items: center;
452
- gap: 8px;
453
- width: 100%;
454
- padding: 10px;
455
- border: 0;
456
- border-radius: var(--radius);
457
- background: none;
458
- font: inherit;
459
- color: var(--text);
460
- text-align: left;
461
- cursor: pointer;
462
- }
463
-
464
- .agent:hover {
465
- background: var(--border-soft);
466
- }
467
-
468
- .agent.is-selected {
469
- background: var(--accent-soft);
470
- }
471
-
472
- .agent:focus-visible {
473
- outline: 2px solid var(--accent);
474
- outline-offset: -2px;
475
- }
476
-
477
- .agent-text {
478
- flex: 1;
479
- min-width: 0;
480
- }
481
-
482
- .agent-name {
483
- font-weight: 600;
484
- white-space: nowrap;
485
- overflow: hidden;
486
- text-overflow: ellipsis;
487
- }
488
-
489
- /* Le nom de la boîte dit de quoi la session s'occupe : sous le nom de l'agent, en second. */
490
- .agent-box {
491
- font-size: 12px;
492
- color: var(--muted);
493
- white-space: nowrap;
494
- overflow: hidden;
495
- text-overflow: ellipsis;
496
- }
497
-
498
- .agent-box.is-absent {
499
- font-style: italic;
500
- }
501
-
502
- .agent--muted .agent-name {
503
- color: var(--muted);
504
- }
505
-
506
- /* --- Agent et ses boîtes --------------------------------------------------- */
507
-
508
- /* Deux zones de clic sur une même ligne : le chevron ouvre, le reste filtre. */
509
- .agent-head {
510
- display: flex;
511
- align-items: center;
512
- }
513
-
514
- .agent-toggle {
515
- display: flex;
516
- align-items: center;
517
- justify-content: center;
518
- width: 20px;
519
- height: 28px;
520
- padding: 0;
521
- border: 0;
522
- border-radius: 4px;
523
- background: none;
524
- color: var(--muted);
525
- cursor: pointer;
526
- flex: none;
527
- }
528
-
529
- .agent-toggle:hover {
530
- color: var(--text);
531
- }
532
-
533
- .agent-toggle:focus-visible {
534
- outline: 2px solid var(--accent);
535
- outline-offset: 1px;
536
- }
537
-
538
- .agent-toggle .icon {
539
- width: 14px;
540
- height: 14px;
541
- transition: transform 0.15s;
542
- }
543
-
544
- .agent-head.is-open .agent-toggle .icon {
545
- transform: rotate(90deg);
546
- }
547
-
548
- /* Le chevron mange sa gouttière : la ligne d'agent reste alignée sur « Tous les agents ». */
549
- .agent-head .agent {
550
- padding-left: 4px;
551
- }
552
-
553
- /* Les boîtes vivent sous leur agent : un cran d'indentation et un filet de rattachement. */
554
- .box-list {
555
- list-style: none;
556
- margin: 0 0 4px 22px;
557
- padding: 0 0 0 14px;
558
- border-left: 1px solid var(--border);
559
- }
560
-
561
- .box {
562
- padding: 7px 10px;
563
- }
564
-
565
- .box .agent-name {
566
- font-weight: 500;
567
- font-size: 13px;
568
- }
569
-
570
- /* Une boîte sans nom se lit à son adresse : en mono, pour ce que c'est. */
571
- .box .agent-name.is-absent {
572
- font-weight: 400;
573
- color: var(--muted);
574
- }
575
-
576
- .box .agent-box {
577
- font-size: 11px;
578
- }
579
-
580
- /* Les boîtes vides sont repliées derrière ce bouton : le lien ferme la liste plutôt que
581
- d'aligner des sessions qui n'ont jamais rien échangé. */
582
- .box-empty-toggle {
583
- display: block;
584
- width: 100%;
585
- padding: 6px 10px;
586
- border: 0;
587
- border-radius: var(--radius);
588
- background: none;
589
- font: inherit;
590
- font-size: 12px;
591
- color: var(--muted);
592
- text-align: left;
593
- cursor: pointer;
594
- }
595
-
596
- .box-empty-toggle:hover {
597
- background: var(--border-soft);
598
- color: var(--accent);
599
- }
600
-
601
- .box-empty-toggle:focus-visible {
602
- outline: 2px solid var(--accent);
603
- outline-offset: -2px;
604
- }
605
-
606
- /* Une boîte vide reste lisible mais s'efface : elle est là pour être retrouvée, pas lue. */
607
- .box.is-empty .agent-name {
608
- color: var(--muted);
609
- font-weight: 400;
610
- }
611
-
612
- .box.is-empty .avatar {
613
- opacity: 0.5;
614
- }
615
-
616
- .agents-foot {
617
- padding: 16px 20px;
618
- font-size: 12px;
619
- border-top: 1px solid var(--border-soft);
620
- }
621
-
622
- /* Avatar : les initiales de l'agent, teintées par son adresse. Pas de couleur seule — le
623
- nom reste écrit à côté partout où l'avatar n'est pas le seul repère. */
624
- .avatar {
625
- width: 28px;
626
- height: 28px;
627
- border-radius: 50%;
628
- display: grid;
629
- place-items: center;
630
- font-size: 11px;
631
- font-weight: 600;
632
- color: #ffffff;
633
- flex: none;
634
- }
635
-
636
- .avatar--sm {
637
- width: 24px;
638
- height: 24px;
639
- font-size: 10px;
640
- }
641
-
642
- .avatar--stack {
643
- box-shadow: 0 0 0 2px var(--panel);
644
- }
645
-
646
- .avatar--c0 { background: #2f6feb; }
647
- .avatar--c1 { background: #7c3aed; }
648
- .avatar--c2 { background: #0f9d58; }
649
- .avatar--c3 { background: #d9480f; }
650
- .avatar--c4 { background: #0b7285; }
651
- .avatar--c5 { background: #b02a6f; }
652
- .avatar--c6 { background: #5b6472; }
653
- .avatar--c7 { background: #7048e8; }
654
-
655
- /* Boîte jamais connectée : contour au lieu d'aplat, pour la distinguer sans l'effacer. */
656
- .avatar--absent {
657
- background: var(--panel);
658
- border: 1px solid var(--border);
659
- color: var(--muted);
660
- }
661
-
662
- .count {
663
- min-width: 24px;
664
- padding: 0 7px;
665
- height: 18px;
666
- border-radius: 999px;
667
- display: inline-flex;
668
- align-items: center;
669
- justify-content: center;
670
- font-size: 11px;
671
- font-weight: 600;
672
- background: var(--neutral-soft);
673
- color: var(--muted);
674
- flex: none;
675
- }
676
-
677
- .count--accent {
678
- background: var(--accent);
679
- color: #ffffff;
680
- }
681
-
682
- .count--soft {
683
- background: var(--accent-softer);
684
- color: var(--accent);
685
- }
686
-
687
- /* Colonne repliée : il ne reste que les avatars d'agents, nom en info-bulle. La
688
- hiérarchie n'y tient pas — les boîtes se retrouvent en dépliant la colonne. */
689
- .is-collapsed .agents-head,
690
- .is-collapsed .agent-text,
691
- .is-collapsed .agents-foot,
692
- .is-collapsed .agent-toggle,
693
- .is-collapsed .box-list,
694
- .is-collapsed .agent .count {
695
- display: none;
696
- }
697
-
698
- .is-collapsed .agent-list {
699
- padding: 16px 6px;
700
- }
701
-
702
- .is-collapsed .agent {
703
- padding: 8px;
704
- justify-content: center;
705
- }
706
-
707
- .is-collapsed .agent-head .agent {
708
- padding-left: 8px;
709
- }
710
-
711
- /* Le badge des non-lus survit au repli, réduit à une pastille sur l'avatar. */
712
- .is-collapsed .agent.has-unread .avatar {
713
- box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
714
- }
715
-
716
- .is-collapsed .agents {
717
- overflow-x: hidden;
718
- }
719
-
720
- /* --- Colonne des fils ----------------------------------------------------- */
721
-
722
- .threads {
723
- background: var(--panel);
724
- border-right: 1px solid var(--border);
725
- overflow-y: auto;
726
- min-width: 0;
727
- }
728
-
729
- .threads-head {
730
- padding: 16px 20px 12px;
731
- }
732
-
733
- .threads-head h2 {
734
- margin: 0;
735
- font-size: 15px;
736
- }
737
-
738
- .threads-head p {
739
- margin: 2px 0 0;
740
- font-size: 12px;
741
- }
742
-
743
- .chips {
744
- display: flex;
745
- flex-wrap: wrap;
746
- gap: 8px;
747
- margin-top: 12px;
748
- }
749
-
750
- .chip {
751
- font: inherit;
752
- font-size: 12px;
753
- padding: 3px 12px;
754
- border-radius: 999px;
755
- border: 1px solid var(--border);
756
- background: var(--panel);
757
- color: var(--text);
758
- cursor: pointer;
759
- white-space: nowrap;
760
- }
761
-
762
- .chip:hover {
763
- border-color: var(--accent);
764
- }
765
-
766
- .chip.is-active {
767
- background: var(--text);
768
- border-color: var(--text);
769
- color: var(--panel);
770
- font-weight: 600;
771
- }
772
-
773
- .chip:focus-visible {
774
- outline: 2px solid var(--accent);
775
- outline-offset: 2px;
776
- }
777
-
778
- .thread-list {
779
- list-style: none;
780
- margin: 0;
781
- padding: 0;
782
- }
783
-
784
- .thread {
785
- display: block;
786
- width: 100%;
787
- padding: 12px 16px 12px 32px;
788
- border: 0;
789
- border-top: 1px solid var(--border-soft);
790
- background: none;
791
- font: inherit;
792
- color: var(--text);
793
- text-align: left;
794
- cursor: pointer;
795
- position: relative;
796
- }
797
-
798
- .thread:hover {
799
- background: var(--border-soft);
800
- }
801
-
802
- .thread.is-selected {
803
- background: var(--accent-soft);
804
- border-top-color: transparent;
805
- }
806
-
807
- /* Barre d'accent à gauche : le fil ouvert, repérable sans lire. */
808
- .thread.is-selected::before {
809
- content: "";
810
- position: absolute;
811
- inset: 0 auto 0 0;
812
- width: 3px;
813
- background: var(--accent);
814
- }
815
-
816
- .thread:focus-visible {
817
- outline: 2px solid var(--accent);
818
- outline-offset: -2px;
819
- }
820
-
821
- /* Point bleu du fil non lu, dans la gouttière réservée à gauche. */
822
- .thread.is-unread::after {
823
- content: "";
824
- position: absolute;
825
- left: 14px;
826
- top: 19px;
827
- width: 8px;
828
- height: 8px;
829
- border-radius: 50%;
830
- background: var(--accent);
831
- }
832
-
833
- .thread.is-selected.is-unread::after {
834
- left: 17px;
835
- }
836
-
837
- .thread-top {
838
- display: flex;
839
- align-items: baseline;
840
- gap: 8px;
841
- }
842
-
843
- .thread-title {
844
- font-weight: 600;
845
- flex: 1;
846
- min-width: 0;
847
- white-space: nowrap;
848
- overflow: hidden;
849
- text-overflow: ellipsis;
850
- }
851
-
852
- .thread.is-unread .thread-title {
853
- font-weight: 700;
854
- }
855
-
856
- .thread-time {
857
- font-size: 12px;
858
- color: var(--muted);
859
- white-space: nowrap;
860
- flex: none;
861
- }
862
-
863
- .thread.is-unread .thread-time {
864
- color: var(--accent);
865
- }
866
-
867
- .thread-who {
868
- font-size: 12px;
869
- color: var(--muted);
870
- margin-top: 2px;
871
- white-space: nowrap;
872
- overflow: hidden;
873
- text-overflow: ellipsis;
874
- }
875
-
876
- .thread-bottom {
877
- display: flex;
878
- align-items: center;
879
- gap: 8px;
880
- margin-top: 4px;
881
- }
882
-
883
- .thread-preview {
884
- flex: 1;
885
- min-width: 0;
886
- font-size: 13px;
887
- color: var(--muted);
888
- white-space: nowrap;
889
- overflow: hidden;
890
- text-overflow: ellipsis;
891
- }
892
-
893
- .thread.is-unread .thread-preview {
894
- color: var(--text);
895
- }
896
-
897
- .tag {
898
- display: inline-flex;
899
- align-items: center;
900
- gap: 4px;
901
- padding: 1px 8px;
902
- border-radius: 999px;
903
- font-size: 11px;
904
- font-weight: 600;
905
- background: var(--neutral-soft);
906
- color: var(--muted);
907
- flex: none;
908
- }
909
-
910
- .tag--high {
911
- background: var(--danger-soft);
912
- color: var(--danger);
913
- }
914
-
915
- .tag--ok {
916
- background: var(--ok-soft);
917
- color: var(--ok);
918
- }
919
-
920
- .tag--warn {
921
- background: var(--warn-soft);
922
- color: var(--warn);
923
- }
924
-
925
- .tag .icon {
926
- width: 10px;
927
- height: 10px;
928
- stroke-width: 2.5;
929
- }
930
-
931
- /* --- Lecteur du fil ------------------------------------------------------- */
932
-
933
- .reader {
934
- overflow-y: auto;
935
- background: var(--panel);
936
- min-width: 0;
937
- }
938
-
939
- .reader-head {
940
- padding: 24px 32px 16px;
941
- border-bottom: 1px solid var(--border);
942
- }
943
-
944
- .reader-head h2 {
945
- margin: 0;
946
- font-size: 18px;
947
- }
948
-
949
- .reader-desc {
950
- margin: 6px 0 0;
951
- font-size: 13px;
952
- color: var(--muted);
953
- }
954
-
955
- .reader-meta {
956
- display: flex;
957
- align-items: center;
958
- gap: 10px;
959
- margin-top: 14px;
960
- }
961
-
962
- .avatar-stack {
963
- display: flex;
964
- }
965
-
966
- .avatar-stack .avatar + .avatar {
967
- margin-left: -8px;
968
- }
969
-
970
- .reader-participants {
971
- font-size: 12px;
972
- color: var(--muted);
973
- flex: 1;
974
- min-width: 0;
975
- }
976
-
977
- .messages {
978
- list-style: none;
979
- margin: 0;
980
- padding: 20px 32px 40px;
981
- }
982
-
983
- .message {
984
- display: flex;
985
- gap: 12px;
986
- padding: 12px;
987
- margin: 0 -12px;
988
- border-radius: var(--radius);
989
- }
990
-
991
- /* Le dernier message du fil : posé sur un fond discret, sans bordure ni couleur d'état. */
992
- .message.is-last {
993
- background: var(--bg);
994
- }
995
-
996
- .message.is-open {
997
- background: var(--accent-soft);
998
- box-shadow: inset 0 0 0 1px var(--accent);
999
- }
1000
-
1001
- .message-body-col {
1002
- flex: 1;
1003
- min-width: 0;
1004
- }
1005
-
1006
- .message-head {
1007
- display: flex;
1008
- align-items: baseline;
1009
- gap: 8px;
1010
- flex-wrap: wrap;
1011
- }
1012
-
1013
- .message-from {
1014
- font-weight: 600;
1015
- }
1016
-
1017
- .message-to {
1018
- font-size: 13px;
1019
- color: var(--muted);
1020
- }
1021
-
1022
- .message-time {
1023
- margin-left: auto;
1024
- font-size: 12px;
1025
- color: var(--muted);
1026
- white-space: nowrap;
1027
- }
1028
-
1029
- .message-subject {
1030
- margin: 8px 0 0;
1031
- font-size: 13px;
1032
- font-weight: 600;
1033
- color: var(--muted);
1034
- }
1035
-
1036
- .message-text {
1037
- margin: 6px 0 0;
1038
- white-space: pre-wrap;
1039
- overflow-wrap: anywhere;
1040
- }
1041
-
1042
- /* Le markdown est déjà mis en forme : plus besoin de conserver les blancs du source. */
1043
- .message-text.markdown {
1044
- white-space: normal;
1045
- }
1046
-
1047
- /* --- Corps de message rendu en markdown --- */
1048
-
1049
- .markdown > *:first-child {
1050
- margin-top: 0;
1051
- }
1052
-
1053
- .markdown > *:last-child {
1054
- margin-bottom: 0;
1055
- }
1056
-
1057
- .md-p {
1058
- margin: 0 0 8px;
1059
- }
1060
-
1061
- .markdown .md-heading {
1062
- margin: 14px 0 6px;
1063
- line-height: 1.35;
1064
- font-weight: 600;
1065
- }
1066
-
1067
- .markdown h1.md-heading {
1068
- font-size: 17px;
1069
- }
1070
-
1071
- .markdown h2.md-heading {
1072
- font-size: 15px;
1073
- }
1074
-
1075
- .markdown h3.md-heading,
1076
- .markdown h4.md-heading,
1077
- .markdown h5.md-heading,
1078
- .markdown h6.md-heading {
1079
- font-size: 14px;
1080
- }
1081
-
1082
- .markdown h4.md-heading,
1083
- .markdown h5.md-heading,
1084
- .markdown h6.md-heading {
1085
- color: var(--muted);
1086
- }
1087
-
1088
- .md-list {
1089
- margin: 0 0 8px;
1090
- padding-left: 20px;
1091
- }
1092
-
1093
- .md-item {
1094
- margin: 2px 0;
1095
- }
1096
-
1097
- /* Un article qui porte une sous-liste passe par un paragraphe : il ne doit pas s'en écarter. */
1098
- .md-item > .md-p {
1099
- margin-bottom: 2px;
1100
- }
1101
-
1102
- .md-list .md-list {
1103
- margin: 2px 0;
1104
- }
1105
-
1106
- .md-quote {
1107
- margin: 0 0 8px;
1108
- padding: 2px 0 2px 10px;
1109
- border-left: 3px solid var(--border);
1110
- color: var(--muted);
1111
- }
1112
-
1113
- .md-rule {
1114
- margin: 12px 0;
1115
- border: 0;
1116
- border-top: 1px solid var(--border);
1117
- }
1118
-
1119
- /* La langue annoncée par l'agent, posée en coin du bloc : elle dit ce qu'on lit. */
1120
- .md-code[data-language]::before {
1121
- content: attr(data-language);
1122
- display: block;
1123
- margin-bottom: 6px;
1124
- color: var(--muted);
1125
- font-size: 11px;
1126
- letter-spacing: 0.04em;
1127
- text-transform: uppercase;
1128
- }
1129
-
1130
- .md-code {
1131
- margin: 0 0 8px;
1132
- padding: 10px 12px;
1133
- border: 1px solid var(--border-soft);
1134
- border-radius: var(--radius);
1135
- background: var(--neutral-soft);
1136
- overflow-x: auto;
1137
- }
1138
-
1139
- .md-code code {
1140
- font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1141
- white-space: pre;
1142
- }
1143
-
1144
- .md-inline-code {
1145
- padding: 1px 5px;
1146
- border-radius: 4px;
1147
- background: var(--neutral-soft);
1148
- font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1149
- overflow-wrap: anywhere;
1150
- }
1151
-
1152
- .md-link {
1153
- color: var(--accent);
1154
- overflow-wrap: anywhere;
1155
- }
1156
-
1157
- .md-strong {
1158
- font-weight: 600;
1159
- }
1160
-
1161
- .md-del {
1162
- color: var(--muted);
1163
- }
1164
-
1165
- .md-table {
1166
- display: block;
1167
- width: max-content;
1168
- max-width: 100%;
1169
- margin: 0 0 8px;
1170
- border-collapse: collapse;
1171
- overflow-x: auto;
1172
- }
1173
-
1174
- .md-table th,
1175
- .md-table td {
1176
- padding: 5px 10px;
1177
- border: 1px solid var(--border-soft);
1178
- text-align: left;
1179
- vertical-align: top;
1180
- }
1181
-
1182
- .md-table th {
1183
- background: var(--neutral-soft);
1184
- font-weight: 600;
1185
- }
1186
-
1187
- .message-foot {
1188
- display: flex;
1189
- align-items: center;
1190
- gap: 12px;
1191
- margin-top: 10px;
1192
- }
1193
-
1194
- .message-foot .btn--link {
1195
- margin-left: auto;
1196
- font-size: 12px;
1197
- }
1198
-
1199
- /* --- Volet de détail ------------------------------------------------------ */
1200
-
1201
- .sheet {
1202
- border-left: 1px solid var(--border);
1203
- background: var(--panel);
1204
- overflow-y: auto;
1205
- min-width: 0;
1206
- }
1207
-
1208
- .sheet-head {
1209
- display: flex;
1210
- align-items: flex-start;
1211
- gap: 8px;
1212
- padding: 18px 20px 14px;
1213
- border-bottom: 1px solid var(--border);
1214
- }
1215
-
1216
- .sheet-head h3 {
1217
- margin: 0;
1218
- font-size: 15px;
1219
- }
1220
-
1221
- .sheet-subject {
1222
- margin: 4px 0 0;
1223
- font-size: 13px;
1224
- color: var(--muted);
1225
- }
1226
-
1227
- .sheet-head .btn {
1228
- margin-left: auto;
1229
- }
1230
-
1231
- .sheet-section {
1232
- padding: 16px 20px;
1233
- border-bottom: 1px solid var(--border);
1234
- }
1235
-
1236
- .sheet-section:last-of-type {
1237
- border-bottom: 0;
1238
- }
1239
-
1240
- .sheet-section .section-label {
1241
- display: block;
1242
- margin-bottom: 12px;
1243
- }
1244
-
1245
- .kv {
1246
- display: grid;
1247
- grid-template-columns: 96px minmax(0, 1fr) auto;
1248
- align-items: center;
1249
- gap: 8px;
1250
- margin-bottom: 10px;
1251
- }
1252
-
1253
- .kv:last-child {
1254
- margin-bottom: 0;
1255
- }
1256
-
1257
- .kv-key {
1258
- font-size: 12px;
1259
- color: var(--muted);
1260
- }
1261
-
1262
- .kv-value {
1263
- font-size: 13px;
1264
- overflow-wrap: anywhere;
1265
- }
1266
-
1267
- /* Une pastille est large de son texte : en cellule de grille, elle s'étirerait sinon. */
1268
- .kv > .tag {
1269
- justify-self: start;
1270
- }
1271
-
1272
- /* Les adresses ne se recopient pas à la main : elles s'affichent en mono, avec un bouton. */
1273
- .mono {
1274
- font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1275
- font-size: 12px;
1276
- }
1277
-
1278
- .party {
1279
- display: flex;
1280
- gap: 10px;
1281
- }
1282
-
1283
- .party-name {
1284
- font-size: 13px;
1285
- font-weight: 600;
1286
- }
1287
-
1288
- .party-box {
1289
- font-size: 12px;
1290
- color: var(--muted);
1291
- }
1292
-
1293
- .party-addr {
1294
- display: flex;
1295
- align-items: center;
1296
- gap: 6px;
1297
- margin-top: 2px;
1298
- color: var(--muted);
1299
- }
1300
-
1301
- .copy {
1302
- border: 0;
1303
- background: none;
1304
- padding: 2px;
1305
- color: var(--muted);
1306
- cursor: pointer;
1307
- display: inline-flex;
1308
- border-radius: 4px;
1309
- }
1310
-
1311
- .copy:hover {
1312
- color: var(--accent);
1313
- }
1314
-
1315
- .copy:focus-visible {
1316
- outline: 2px solid var(--accent);
1317
- outline-offset: 1px;
1318
- }
1319
-
1320
- .copy .icon {
1321
- width: 14px;
1322
- height: 14px;
1323
- }
1324
-
1325
- .deliveries {
1326
- width: 100%;
1327
- border-collapse: collapse;
1328
- font-size: 13px;
1329
- }
1330
-
1331
- .deliveries th {
1332
- text-align: left;
1333
- font-size: 11px;
1334
- font-weight: 400;
1335
- color: var(--muted);
1336
- padding: 0 8px 8px 0;
1337
- border-bottom: 1px solid var(--border-soft);
1338
- }
1339
-
1340
- .deliveries td {
1341
- padding: 8px 8px 8px 0;
1342
- vertical-align: middle;
1343
- }
1344
-
1345
- .deliveries td.role,
1346
- .deliveries td.folder {
1347
- font-size: 12px;
1348
- color: var(--muted);
1349
- }
1350
-
1351
- /* --- États vides et erreurs ----------------------------------------------- */
1352
-
1353
- .empty {
1354
- padding: 48px 24px;
1355
- text-align: center;
1356
- color: var(--muted);
1357
- }
1358
-
1359
- .empty-title {
1360
- display: block;
1361
- color: var(--text);
1362
- font-weight: 600;
1363
- margin-bottom: 4px;
1364
- }
1365
-
1366
- .banner {
1367
- margin: 16px 20px;
1368
- padding: 12px 14px;
1369
- border-radius: var(--radius);
1370
- background: var(--danger-soft);
1371
- color: var(--danger);
1372
- font-size: 13px;
1373
- }
1374
-
1375
- /* --- Écrans étroits ------------------------------------------------------- */
1376
-
1377
- @media (max-width: 1200px) {
1378
- .console.has-sheet,
1379
- .console.is-collapsed.has-sheet {
1380
- grid-template-columns: 57px 320px minmax(0, 1fr) 320px;
1381
- }
1382
- }
1383
-
1384
- @media (max-width: 1000px) {
1385
- .topbar-search {
1386
- max-width: 240px;
1387
- }
1388
-
1389
- .console,
1390
- .console.is-collapsed {
1391
- grid-template-columns: 57px 300px minmax(0, 1fr);
1392
- }
1393
-
1394
- /* Trop étroit pour quatre colonnes : le volet recouvre le lecteur. */
1395
- .console.has-sheet,
1396
- .console.is-collapsed.has-sheet {
1397
- grid-template-columns: 57px 300px minmax(0, 1fr);
1398
- }
1399
-
1400
- .console.has-sheet .sheet {
1401
- position: fixed;
1402
- top: var(--topbar-h);
1403
- right: 0;
1404
- bottom: 0;
1405
- width: 340px;
1406
- max-width: 100%;
1407
- box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
1408
- }
1409
- }
1
+ :root {
2
+ --bg: #f6f7f9;
3
+ --panel: #ffffff;
4
+ --border: #e2e5ea;
5
+ --border-soft: #eef0f3;
6
+ --text: #1c2024;
7
+ --muted: #6b7280;
8
+ --accent: #2f6feb;
9
+ --accent-soft: #e8f0fe;
10
+ --accent-softer: #dbe6fb;
11
+ --ok: #1e7a34;
12
+ --ok-soft: #e6f4ea;
13
+ --warn: #b45309;
14
+ --warn-soft: #fff3e0;
15
+ --danger: #c8362f;
16
+ --danger-soft: #fdecea;
17
+ --neutral-soft: #eef0f3;
18
+ --radius: 8px;
19
+ --topbar-h: 56px;
20
+ }
21
+
22
+ @media (prefers-color-scheme: dark) {
23
+ :root {
24
+ --bg: #14171c;
25
+ --panel: #1b1f26;
26
+ --border: #2b313b;
27
+ --border-soft: #232831;
28
+ --text: #e6e9ee;
29
+ --muted: #98a1b0;
30
+ --accent: #7aa2f7;
31
+ --accent-soft: #223049;
32
+ --accent-softer: #2b3d5c;
33
+ --ok: #7ee2a0;
34
+ --ok-soft: #1d3327;
35
+ --warn: #f0b429;
36
+ --warn-soft: #3a2c14;
37
+ --danger: #f07178;
38
+ --danger-soft: #3a2023;
39
+ --neutral-soft: #262c35;
40
+ }
41
+ }
42
+
43
+ * {
44
+ box-sizing: border-box;
45
+ }
46
+
47
+ [hidden] {
48
+ display: none !important;
49
+ }
50
+
51
+ body {
52
+ margin: 0;
53
+ font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
54
+ background: var(--bg);
55
+ color: var(--text);
56
+ }
57
+
58
+ .icon {
59
+ width: 16px;
60
+ height: 16px;
61
+ fill: none;
62
+ stroke: currentColor;
63
+ stroke-width: 2;
64
+ stroke-linecap: round;
65
+ stroke-linejoin: round;
66
+ flex: none;
67
+ }
68
+
69
+ .muted {
70
+ color: var(--muted);
71
+ }
72
+
73
+ /* --- Barre du haut -------------------------------------------------------- */
74
+
75
+ .topbar {
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 16px;
79
+ height: var(--topbar-h);
80
+ padding: 0 20px;
81
+ background: var(--panel);
82
+ border-bottom: 1px solid var(--border);
83
+ }
84
+
85
+ .brand {
86
+ display: flex;
87
+ align-items: center;
88
+ gap: 12px;
89
+ flex: none;
90
+ }
91
+
92
+ .brand-mark {
93
+ width: 20px;
94
+ height: 20px;
95
+ fill: none;
96
+ stroke: var(--accent);
97
+ stroke-width: 2;
98
+ stroke-linecap: round;
99
+ stroke-linejoin: round;
100
+ }
101
+
102
+ .brand h1 {
103
+ font-size: 16px;
104
+ margin: 0;
105
+ white-space: nowrap;
106
+ }
107
+
108
+ /* La pastille dit l'état du serveur d'un coup d'œil : couleur + mot, jamais la couleur seule. */
109
+ .pill {
110
+ display: inline-flex;
111
+ align-items: center;
112
+ gap: 6px;
113
+ padding: 2px 10px;
114
+ border-radius: 999px;
115
+ font-size: 12px;
116
+ white-space: nowrap;
117
+ background: var(--neutral-soft);
118
+ color: var(--muted);
119
+ }
120
+
121
+ .pill-dot {
122
+ width: 6px;
123
+ height: 6px;
124
+ border-radius: 50%;
125
+ background: currentColor;
126
+ }
127
+
128
+ .pill--ok {
129
+ background: var(--ok-soft);
130
+ color: var(--ok);
131
+ }
132
+
133
+ .pill--ko {
134
+ background: var(--danger-soft);
135
+ color: var(--danger);
136
+ }
137
+
138
+ .topbar-search {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 8px;
142
+ flex: 1;
143
+ max-width: 420px;
144
+ margin: 0 auto;
145
+ padding: 0 12px;
146
+ height: 32px;
147
+ border-radius: var(--radius);
148
+ border: 1px solid var(--border);
149
+ background: var(--bg);
150
+ color: var(--muted);
151
+ }
152
+
153
+ .topbar-search input {
154
+ flex: 1;
155
+ min-width: 0;
156
+ border: 0;
157
+ background: none;
158
+ font: inherit;
159
+ font-size: 13px;
160
+ color: var(--text);
161
+ outline: none;
162
+ }
163
+
164
+ .topbar-controls {
165
+ display: flex;
166
+ align-items: center;
167
+ gap: 12px;
168
+ flex: none;
169
+ margin-left: auto;
170
+ }
171
+
172
+ /* Interrupteur du rafraîchissement : la case native est masquée, pas retirée. */
173
+ .switch {
174
+ display: flex;
175
+ align-items: center;
176
+ gap: 8px;
177
+ cursor: pointer;
178
+ user-select: none;
179
+ }
180
+
181
+ .switch input {
182
+ position: absolute;
183
+ opacity: 0;
184
+ width: 0;
185
+ height: 0;
186
+ }
187
+
188
+ .switch-track {
189
+ width: 34px;
190
+ height: 18px;
191
+ border-radius: 999px;
192
+ background: var(--border);
193
+ padding: 2px;
194
+ transition: background 0.15s;
195
+ }
196
+
197
+ .switch-knob {
198
+ display: block;
199
+ width: 14px;
200
+ height: 14px;
201
+ border-radius: 50%;
202
+ background: var(--panel);
203
+ transition: transform 0.15s;
204
+ }
205
+
206
+ .switch input:checked + .switch-track {
207
+ background: var(--accent);
208
+ }
209
+
210
+ .switch input:checked + .switch-track .switch-knob {
211
+ transform: translateX(16px);
212
+ }
213
+
214
+ .switch input:focus-visible + .switch-track {
215
+ outline: 2px solid var(--accent);
216
+ outline-offset: 2px;
217
+ }
218
+
219
+ .switch-label {
220
+ font-size: 13px;
221
+ color: var(--muted);
222
+ }
223
+
224
+ /* --- Boutons -------------------------------------------------------------- */
225
+
226
+ .btn {
227
+ font: inherit;
228
+ font-size: 13px;
229
+ display: inline-flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ gap: 8px;
233
+ padding: 7px 12px;
234
+ border-radius: var(--radius);
235
+ border: 1px solid var(--border);
236
+ background: var(--panel);
237
+ color: var(--text);
238
+ cursor: pointer;
239
+ }
240
+
241
+ .btn:hover {
242
+ border-color: var(--accent);
243
+ }
244
+
245
+ .btn:focus-visible {
246
+ outline: 2px solid var(--accent);
247
+ outline-offset: 2px;
248
+ }
249
+
250
+ .btn--icon {
251
+ padding: 7px;
252
+ }
253
+
254
+ .btn--ghost {
255
+ border-color: transparent;
256
+ background: none;
257
+ color: var(--muted);
258
+ }
259
+
260
+ .btn--link {
261
+ border-color: transparent;
262
+ background: none;
263
+ color: var(--accent);
264
+ padding: 7px 4px;
265
+ }
266
+
267
+ .btn--primary {
268
+ background: var(--accent);
269
+ border-color: var(--accent);
270
+ color: #ffffff;
271
+ font-weight: 600;
272
+ padding: 10px 12px;
273
+ }
274
+
275
+ .btn--primary:hover {
276
+ filter: brightness(1.05);
277
+ }
278
+
279
+ .btn--block {
280
+ width: 100%;
281
+ }
282
+
283
+ /* Une seule action détruit dans cette console : elle est la seule à porter cette couleur. */
284
+ .btn--danger {
285
+ background: var(--danger);
286
+ border-color: var(--danger);
287
+ color: #ffffff;
288
+ font-weight: 600;
289
+ }
290
+
291
+ .btn--danger:hover {
292
+ border-color: var(--danger);
293
+ filter: brightness(1.05);
294
+ }
295
+
296
+ .btn:disabled {
297
+ opacity: 0.5;
298
+ cursor: not-allowed;
299
+ filter: none;
300
+ }
301
+
302
+ /* --- Purge des boîtes inactives ------------------------------------------- */
303
+
304
+ .modal {
305
+ width: min(560px, calc(100vw - 32px));
306
+ padding: 0;
307
+ border: 1px solid var(--border);
308
+ border-radius: var(--radius);
309
+ background: var(--panel);
310
+ color: var(--text);
311
+ }
312
+
313
+ .modal::backdrop {
314
+ background: rgba(12, 15, 20, 0.55);
315
+ }
316
+
317
+ .modal-card {
318
+ padding: 18px 20px 16px;
319
+ }
320
+
321
+ .modal-head {
322
+ display: flex;
323
+ align-items: center;
324
+ justify-content: space-between;
325
+ gap: 12px;
326
+ }
327
+
328
+ .modal-head h2 {
329
+ margin: 0;
330
+ font-size: 15px;
331
+ }
332
+
333
+ .modal-sub {
334
+ margin: 8px 0 16px;
335
+ color: var(--muted);
336
+ }
337
+
338
+ .purge-controls {
339
+ display: flex;
340
+ align-items: flex-end;
341
+ gap: 12px;
342
+ }
343
+
344
+ .purge-controls .field {
345
+ margin: 0;
346
+ flex: 1;
347
+ }
348
+
349
+ .purge-result {
350
+ margin-top: 14px;
351
+ max-height: 42vh;
352
+ overflow-y: auto;
353
+ }
354
+
355
+ .purge-count,
356
+ .purge-empty,
357
+ .purge-done,
358
+ .purge-error {
359
+ margin: 0 0 8px;
360
+ }
361
+
362
+ .purge-done {
363
+ color: var(--ok);
364
+ }
365
+
366
+ .purge-error {
367
+ color: var(--danger);
368
+ }
369
+
370
+ .purge-list {
371
+ list-style: none;
372
+ margin: 0;
373
+ padding: 0;
374
+ border: 1px solid var(--border-soft);
375
+ border-radius: var(--radius);
376
+ }
377
+
378
+ .purge-item + .purge-item {
379
+ border-top: 1px solid var(--border-soft);
380
+ }
381
+
382
+ .purge-line {
383
+ display: flex;
384
+ align-items: flex-start;
385
+ gap: 10px;
386
+ padding: 8px 10px;
387
+ cursor: pointer;
388
+ }
389
+
390
+ .purge-text {
391
+ display: grid;
392
+ gap: 2px;
393
+ min-width: 0;
394
+ }
395
+
396
+ .purge-name {
397
+ font-weight: 600;
398
+ }
399
+
400
+ .purge-text .mono,
401
+ .purge-meta {
402
+ font-size: 12px;
403
+ overflow-wrap: anywhere;
404
+ }
405
+
406
+ .purge-meta {
407
+ color: var(--muted);
408
+ }
409
+
410
+ .modal-foot {
411
+ display: flex;
412
+ align-items: center;
413
+ justify-content: flex-end;
414
+ gap: 10px;
415
+ margin-top: 16px;
416
+ }
417
+
418
+ /* --- Connexion ------------------------------------------------------------ */
419
+
420
+ .login {
421
+ display: flex;
422
+ justify-content: center;
423
+ padding: 120px 20px 20px;
424
+ }
425
+
426
+ .card {
427
+ width: 420px;
428
+ max-width: 100%;
429
+ padding: 32px;
430
+ border-radius: 12px;
431
+ border: 1px solid var(--border);
432
+ background: var(--panel);
433
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
434
+ text-align: center;
435
+ }
436
+
437
+ .card-badge {
438
+ width: 48px;
439
+ height: 48px;
440
+ margin: 0 auto 16px;
441
+ border-radius: 50%;
442
+ display: grid;
443
+ place-items: center;
444
+ background: var(--accent-soft);
445
+ color: var(--accent);
446
+ }
447
+
448
+ .card-badge .icon {
449
+ width: 22px;
450
+ height: 22px;
451
+ }
452
+
453
+ .card h2 {
454
+ margin: 0;
455
+ font-size: 18px;
456
+ }
457
+
458
+ .card-sub {
459
+ margin: 4px 0 0;
460
+ font-size: 13px;
461
+ color: var(--muted);
462
+ }
463
+
464
+ .card-note {
465
+ margin: 16px 0 0;
466
+ font-size: 12px;
467
+ line-height: 1.4;
468
+ color: var(--muted);
469
+ text-align: left;
470
+ }
471
+
472
+ .field {
473
+ display: block;
474
+ margin: 24px 0 16px;
475
+ text-align: left;
476
+ }
477
+
478
+ .field-label {
479
+ display: block;
480
+ font-size: 13px;
481
+ font-weight: 600;
482
+ margin-bottom: 6px;
483
+ }
484
+
485
+ .field-input {
486
+ display: flex;
487
+ align-items: center;
488
+ gap: 8px;
489
+ padding: 0 12px;
490
+ height: 40px;
491
+ border-radius: var(--radius);
492
+ border: 1px solid var(--border);
493
+ background: var(--panel);
494
+ color: var(--muted);
495
+ }
496
+
497
+ .field-input:focus-within {
498
+ border-color: var(--accent);
499
+ }
500
+
501
+ .field-input input {
502
+ flex: 1;
503
+ min-width: 0;
504
+ border: 0;
505
+ background: none;
506
+ font: inherit;
507
+ color: var(--text);
508
+ outline: none;
509
+ }
510
+
511
+ .field-eye {
512
+ border: 0;
513
+ background: none;
514
+ padding: 0;
515
+ color: var(--muted);
516
+ cursor: pointer;
517
+ display: flex;
518
+ }
519
+
520
+ .field-error {
521
+ display: block;
522
+ margin-top: 8px;
523
+ min-height: 16px;
524
+ font-size: 12px;
525
+ color: var(--danger);
526
+ }
527
+
528
+ /* Le champ vire au rouge en même temps que le message : l'erreur est portée par les deux. */
529
+ .field.is-invalid .field-input {
530
+ border-color: var(--danger);
531
+ }
532
+
533
+ /* --- Console -------------------------------------------------------------- */
534
+
535
+ .console {
536
+ display: grid;
537
+ grid-template-columns: 240px 400px minmax(0, 1fr);
538
+ height: calc(100vh - var(--topbar-h));
539
+ }
540
+
541
+ .console.has-sheet {
542
+ grid-template-columns: 240px 360px minmax(0, 1fr) 360px;
543
+ }
544
+
545
+ .console.is-collapsed {
546
+ grid-template-columns: 57px 360px minmax(0, 1fr);
547
+ }
548
+
549
+ .console.is-collapsed.has-sheet {
550
+ grid-template-columns: 57px 360px minmax(0, 1fr) 360px;
551
+ }
552
+
553
+ /* --- Colonne des agents --------------------------------------------------- */
554
+
555
+ .agents {
556
+ border-right: 1px solid var(--border);
557
+ overflow-y: auto;
558
+ display: flex;
559
+ flex-direction: column;
560
+ }
561
+
562
+ .agents-head {
563
+ display: flex;
564
+ align-items: center;
565
+ justify-content: space-between;
566
+ padding: 18px 12px 8px 20px;
567
+ }
568
+
569
+ .section-label {
570
+ font-size: 12px;
571
+ font-weight: 600;
572
+ letter-spacing: 0.06em;
573
+ text-transform: uppercase;
574
+ color: var(--muted);
575
+ }
576
+
577
+ .agent-list {
578
+ list-style: none;
579
+ margin: 0;
580
+ padding: 0 8px;
581
+ flex: 1;
582
+ }
583
+
584
+ .agent {
585
+ display: flex;
586
+ align-items: center;
587
+ gap: 8px;
588
+ width: 100%;
589
+ padding: 10px;
590
+ border: 0;
591
+ border-radius: var(--radius);
592
+ background: none;
593
+ font: inherit;
594
+ color: var(--text);
595
+ text-align: left;
596
+ cursor: pointer;
597
+ }
598
+
599
+ .agent:hover {
600
+ background: var(--border-soft);
601
+ }
602
+
603
+ .agent.is-selected {
604
+ background: var(--accent-soft);
605
+ }
606
+
607
+ .agent:focus-visible {
608
+ outline: 2px solid var(--accent);
609
+ outline-offset: -2px;
610
+ }
611
+
612
+ .agent-text {
613
+ flex: 1;
614
+ min-width: 0;
615
+ }
616
+
617
+ .agent-name {
618
+ font-weight: 600;
619
+ white-space: nowrap;
620
+ overflow: hidden;
621
+ text-overflow: ellipsis;
622
+ }
623
+
624
+ /* Le nom de la boîte dit de quoi la session s'occupe : sous le nom de l'agent, en second. */
625
+ .agent-box {
626
+ font-size: 12px;
627
+ color: var(--muted);
628
+ white-space: nowrap;
629
+ overflow: hidden;
630
+ text-overflow: ellipsis;
631
+ }
632
+
633
+ .agent-box.is-absent {
634
+ font-style: italic;
635
+ }
636
+
637
+ .agent--muted .agent-name {
638
+ color: var(--muted);
639
+ }
640
+
641
+ /* --- Agent et ses boîtes --------------------------------------------------- */
642
+
643
+ /* Deux zones de clic sur une même ligne : le chevron ouvre, le reste filtre. */
644
+ .agent-head {
645
+ display: flex;
646
+ align-items: center;
647
+ }
648
+
649
+ .agent-toggle {
650
+ display: flex;
651
+ align-items: center;
652
+ justify-content: center;
653
+ width: 20px;
654
+ height: 28px;
655
+ padding: 0;
656
+ border: 0;
657
+ border-radius: 4px;
658
+ background: none;
659
+ color: var(--muted);
660
+ cursor: pointer;
661
+ flex: none;
662
+ }
663
+
664
+ .agent-toggle:hover {
665
+ color: var(--text);
666
+ }
667
+
668
+ .agent-toggle:focus-visible {
669
+ outline: 2px solid var(--accent);
670
+ outline-offset: 1px;
671
+ }
672
+
673
+ .agent-toggle .icon {
674
+ width: 14px;
675
+ height: 14px;
676
+ transition: transform 0.15s;
677
+ }
678
+
679
+ .agent-head.is-open .agent-toggle .icon {
680
+ transform: rotate(90deg);
681
+ }
682
+
683
+ /* Le chevron mange sa gouttière : la ligne d'agent reste alignée sur « Tous les agents ». */
684
+ .agent-head .agent {
685
+ padding-left: 4px;
686
+ }
687
+
688
+ /* Les boîtes vivent sous leur agent : un cran d'indentation et un filet de rattachement. */
689
+ .box-list {
690
+ list-style: none;
691
+ margin: 0 0 4px 22px;
692
+ padding: 0 0 0 14px;
693
+ border-left: 1px solid var(--border);
694
+ }
695
+
696
+ .box {
697
+ padding: 7px 10px;
698
+ }
699
+
700
+ .box .agent-name {
701
+ font-weight: 500;
702
+ font-size: 13px;
703
+ }
704
+
705
+ /* Une boîte sans nom se lit à son adresse : en mono, pour ce que c'est. */
706
+ .box .agent-name.is-absent {
707
+ font-weight: 400;
708
+ color: var(--muted);
709
+ }
710
+
711
+ .box .agent-box {
712
+ font-size: 11px;
713
+ }
714
+
715
+ /* Les boîtes vides sont repliées derrière ce bouton : le lien ferme la liste plutôt que
716
+ d'aligner des sessions qui n'ont jamais rien échangé. */
717
+ .box-empty-toggle {
718
+ display: block;
719
+ width: 100%;
720
+ padding: 6px 10px;
721
+ border: 0;
722
+ border-radius: var(--radius);
723
+ background: none;
724
+ font: inherit;
725
+ font-size: 12px;
726
+ color: var(--muted);
727
+ text-align: left;
728
+ cursor: pointer;
729
+ }
730
+
731
+ .box-empty-toggle:hover {
732
+ background: var(--border-soft);
733
+ color: var(--accent);
734
+ }
735
+
736
+ .box-empty-toggle:focus-visible {
737
+ outline: 2px solid var(--accent);
738
+ outline-offset: -2px;
739
+ }
740
+
741
+ /* Une boîte vide reste lisible mais s'efface : elle est là pour être retrouvée, pas lue. */
742
+ .box.is-empty .agent-name {
743
+ color: var(--muted);
744
+ font-weight: 400;
745
+ }
746
+
747
+ .box.is-empty .avatar {
748
+ opacity: 0.5;
749
+ }
750
+
751
+ .agents-foot {
752
+ padding: 16px 20px;
753
+ font-size: 12px;
754
+ border-top: 1px solid var(--border-soft);
755
+ }
756
+
757
+ /* Avatar : les initiales de l'agent, teintées par son adresse. Pas de couleur seule — le
758
+ nom reste écrit à côté partout où l'avatar n'est pas le seul repère. */
759
+ .avatar {
760
+ width: 28px;
761
+ height: 28px;
762
+ border-radius: 50%;
763
+ display: grid;
764
+ place-items: center;
765
+ font-size: 11px;
766
+ font-weight: 600;
767
+ color: #ffffff;
768
+ flex: none;
769
+ }
770
+
771
+ .avatar--sm {
772
+ width: 24px;
773
+ height: 24px;
774
+ font-size: 10px;
775
+ }
776
+
777
+ .avatar--stack {
778
+ box-shadow: 0 0 0 2px var(--panel);
779
+ }
780
+
781
+ .avatar--c0 { background: #2f6feb; }
782
+ .avatar--c1 { background: #7c3aed; }
783
+ .avatar--c2 { background: #0f9d58; }
784
+ .avatar--c3 { background: #d9480f; }
785
+ .avatar--c4 { background: #0b7285; }
786
+ .avatar--c5 { background: #b02a6f; }
787
+ .avatar--c6 { background: #5b6472; }
788
+ .avatar--c7 { background: #7048e8; }
789
+
790
+ /* Boîte jamais connectée : contour au lieu d'aplat, pour la distinguer sans l'effacer. */
791
+ .avatar--absent {
792
+ background: var(--panel);
793
+ border: 1px solid var(--border);
794
+ color: var(--muted);
795
+ }
796
+
797
+ .count {
798
+ min-width: 24px;
799
+ padding: 0 7px;
800
+ height: 18px;
801
+ border-radius: 999px;
802
+ display: inline-flex;
803
+ align-items: center;
804
+ justify-content: center;
805
+ font-size: 11px;
806
+ font-weight: 600;
807
+ background: var(--neutral-soft);
808
+ color: var(--muted);
809
+ flex: none;
810
+ }
811
+
812
+ .count--accent {
813
+ background: var(--accent);
814
+ color: #ffffff;
815
+ }
816
+
817
+ .count--soft {
818
+ background: var(--accent-softer);
819
+ color: var(--accent);
820
+ }
821
+
822
+ /* Colonne repliée : il ne reste que les avatars d'agents, nom en info-bulle. La
823
+ hiérarchie n'y tient pas — les boîtes se retrouvent en dépliant la colonne. */
824
+ .is-collapsed .agent-text,
825
+ .is-collapsed .agents-foot,
826
+ .is-collapsed .agent-toggle,
827
+ .is-collapsed .box-list,
828
+ .is-collapsed .agent .count {
829
+ display: none;
830
+ }
831
+
832
+ /* Le bouton de repli survit au repli : c'est la seule commande qui déplie la colonne, la
833
+ cacher enfermerait la console dans son état réduit. Seul son intitulé s'efface. */
834
+ .is-collapsed .agents-head {
835
+ justify-content: center;
836
+ padding-left: 0;
837
+ padding-right: 0;
838
+ }
839
+
840
+ .is-collapsed .agents-head .section-label {
841
+ display: none;
842
+ }
843
+
844
+ /* Le pictogramme se retourne : replié, il montre le sens dans lequel il va rouvrir. */
845
+ .is-collapsed #collapse .icon {
846
+ transform: scaleX(-1);
847
+ }
848
+
849
+ .is-collapsed .agent-list {
850
+ padding: 16px 6px;
851
+ }
852
+
853
+ .is-collapsed .agent {
854
+ padding: 8px;
855
+ justify-content: center;
856
+ }
857
+
858
+ .is-collapsed .agent-head .agent {
859
+ padding-left: 8px;
860
+ }
861
+
862
+ /* Le badge des non-lus survit au repli, réduit à une pastille sur l'avatar. */
863
+ .is-collapsed .agent.has-unread .avatar {
864
+ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
865
+ }
866
+
867
+ .is-collapsed .agents {
868
+ overflow-x: hidden;
869
+ }
870
+
871
+ /* --- Colonne des fils ----------------------------------------------------- */
872
+
873
+ .threads {
874
+ background: var(--panel);
875
+ border-right: 1px solid var(--border);
876
+ overflow-y: auto;
877
+ min-width: 0;
878
+ }
879
+
880
+ .threads-head {
881
+ padding: 16px 20px 12px;
882
+ }
883
+
884
+ .threads-head h2 {
885
+ margin: 0;
886
+ font-size: 15px;
887
+ }
888
+
889
+ .threads-head p {
890
+ margin: 2px 0 0;
891
+ font-size: 12px;
892
+ }
893
+
894
+ .chips {
895
+ display: flex;
896
+ flex-wrap: wrap;
897
+ gap: 8px;
898
+ margin-top: 12px;
899
+ }
900
+
901
+ .chip {
902
+ font: inherit;
903
+ font-size: 12px;
904
+ padding: 3px 12px;
905
+ border-radius: 999px;
906
+ border: 1px solid var(--border);
907
+ background: var(--panel);
908
+ color: var(--text);
909
+ cursor: pointer;
910
+ white-space: nowrap;
911
+ }
912
+
913
+ .chip:hover {
914
+ border-color: var(--accent);
915
+ }
916
+
917
+ .chip.is-active {
918
+ background: var(--text);
919
+ border-color: var(--text);
920
+ color: var(--panel);
921
+ font-weight: 600;
922
+ }
923
+
924
+ .chip:focus-visible {
925
+ outline: 2px solid var(--accent);
926
+ outline-offset: 2px;
927
+ }
928
+
929
+ .thread-list {
930
+ list-style: none;
931
+ margin: 0;
932
+ padding: 0;
933
+ }
934
+
935
+ .thread {
936
+ display: block;
937
+ width: 100%;
938
+ padding: 12px 16px 12px 32px;
939
+ border: 0;
940
+ border-top: 1px solid var(--border-soft);
941
+ background: none;
942
+ font: inherit;
943
+ color: var(--text);
944
+ text-align: left;
945
+ cursor: pointer;
946
+ position: relative;
947
+ }
948
+
949
+ .thread:hover {
950
+ background: var(--border-soft);
951
+ }
952
+
953
+ .thread.is-selected {
954
+ background: var(--accent-soft);
955
+ border-top-color: transparent;
956
+ }
957
+
958
+ /* Barre d'accent à gauche : le fil ouvert, repérable sans lire. */
959
+ .thread.is-selected::before {
960
+ content: "";
961
+ position: absolute;
962
+ inset: 0 auto 0 0;
963
+ width: 3px;
964
+ background: var(--accent);
965
+ }
966
+
967
+ .thread:focus-visible {
968
+ outline: 2px solid var(--accent);
969
+ outline-offset: -2px;
970
+ }
971
+
972
+ /* Point bleu du fil non lu, dans la gouttière réservée à gauche. */
973
+ .thread.is-unread::after {
974
+ content: "";
975
+ position: absolute;
976
+ left: 14px;
977
+ top: 19px;
978
+ width: 8px;
979
+ height: 8px;
980
+ border-radius: 50%;
981
+ background: var(--accent);
982
+ }
983
+
984
+ .thread.is-selected.is-unread::after {
985
+ left: 17px;
986
+ }
987
+
988
+ .thread-top {
989
+ display: flex;
990
+ align-items: baseline;
991
+ gap: 8px;
992
+ }
993
+
994
+ .thread-title {
995
+ font-weight: 600;
996
+ flex: 1;
997
+ min-width: 0;
998
+ white-space: nowrap;
999
+ overflow: hidden;
1000
+ text-overflow: ellipsis;
1001
+ }
1002
+
1003
+ .thread.is-unread .thread-title {
1004
+ font-weight: 700;
1005
+ }
1006
+
1007
+ .thread-time {
1008
+ font-size: 12px;
1009
+ color: var(--muted);
1010
+ white-space: nowrap;
1011
+ flex: none;
1012
+ }
1013
+
1014
+ .thread.is-unread .thread-time {
1015
+ color: var(--accent);
1016
+ }
1017
+
1018
+ .thread-who {
1019
+ font-size: 12px;
1020
+ color: var(--muted);
1021
+ margin-top: 2px;
1022
+ white-space: nowrap;
1023
+ overflow: hidden;
1024
+ text-overflow: ellipsis;
1025
+ }
1026
+
1027
+ .thread-bottom {
1028
+ display: flex;
1029
+ align-items: center;
1030
+ gap: 8px;
1031
+ margin-top: 4px;
1032
+ }
1033
+
1034
+ .thread-preview {
1035
+ flex: 1;
1036
+ min-width: 0;
1037
+ font-size: 13px;
1038
+ color: var(--muted);
1039
+ white-space: nowrap;
1040
+ overflow: hidden;
1041
+ text-overflow: ellipsis;
1042
+ }
1043
+
1044
+ .thread.is-unread .thread-preview {
1045
+ color: var(--text);
1046
+ }
1047
+
1048
+ .tag {
1049
+ display: inline-flex;
1050
+ align-items: center;
1051
+ gap: 4px;
1052
+ padding: 1px 8px;
1053
+ border-radius: 999px;
1054
+ font-size: 11px;
1055
+ font-weight: 600;
1056
+ background: var(--neutral-soft);
1057
+ color: var(--muted);
1058
+ flex: none;
1059
+ }
1060
+
1061
+ .tag--high {
1062
+ background: var(--danger-soft);
1063
+ color: var(--danger);
1064
+ }
1065
+
1066
+ .tag--ok {
1067
+ background: var(--ok-soft);
1068
+ color: var(--ok);
1069
+ }
1070
+
1071
+ .tag--warn {
1072
+ background: var(--warn-soft);
1073
+ color: var(--warn);
1074
+ }
1075
+
1076
+ .tag .icon {
1077
+ width: 10px;
1078
+ height: 10px;
1079
+ stroke-width: 2.5;
1080
+ }
1081
+
1082
+ /* --- Lecteur du fil ------------------------------------------------------- */
1083
+
1084
+ .reader {
1085
+ overflow-y: auto;
1086
+ background: var(--panel);
1087
+ min-width: 0;
1088
+ }
1089
+
1090
+ .reader-head {
1091
+ padding: 24px 32px 16px;
1092
+ border-bottom: 1px solid var(--border);
1093
+ }
1094
+
1095
+ .reader-head h2 {
1096
+ margin: 0;
1097
+ font-size: 18px;
1098
+ }
1099
+
1100
+ .reader-desc {
1101
+ margin: 6px 0 0;
1102
+ font-size: 13px;
1103
+ color: var(--muted);
1104
+ }
1105
+
1106
+ .reader-meta {
1107
+ display: flex;
1108
+ align-items: center;
1109
+ gap: 10px;
1110
+ margin-top: 14px;
1111
+ }
1112
+
1113
+ .avatar-stack {
1114
+ display: flex;
1115
+ }
1116
+
1117
+ .avatar-stack .avatar + .avatar {
1118
+ margin-left: -8px;
1119
+ }
1120
+
1121
+ .reader-participants {
1122
+ font-size: 12px;
1123
+ color: var(--muted);
1124
+ flex: 1;
1125
+ min-width: 0;
1126
+ }
1127
+
1128
+ .messages {
1129
+ list-style: none;
1130
+ margin: 0;
1131
+ padding: 20px 32px 40px;
1132
+ }
1133
+
1134
+ .message {
1135
+ display: flex;
1136
+ gap: 12px;
1137
+ padding: 12px;
1138
+ margin: 0 -12px;
1139
+ border-radius: var(--radius);
1140
+ }
1141
+
1142
+ /* Le dernier message du fil : posé sur un fond discret, sans bordure ni couleur d'état. */
1143
+ .message.is-last {
1144
+ background: var(--bg);
1145
+ }
1146
+
1147
+ .message.is-open {
1148
+ background: var(--accent-soft);
1149
+ box-shadow: inset 0 0 0 1px var(--accent);
1150
+ }
1151
+
1152
+ .message-body-col {
1153
+ flex: 1;
1154
+ min-width: 0;
1155
+ }
1156
+
1157
+ .message-head {
1158
+ display: flex;
1159
+ align-items: baseline;
1160
+ gap: 8px;
1161
+ flex-wrap: wrap;
1162
+ }
1163
+
1164
+ .message-from {
1165
+ font-weight: 600;
1166
+ }
1167
+
1168
+ .message-to {
1169
+ font-size: 13px;
1170
+ color: var(--muted);
1171
+ }
1172
+
1173
+ .message-time {
1174
+ margin-left: auto;
1175
+ font-size: 12px;
1176
+ color: var(--muted);
1177
+ white-space: nowrap;
1178
+ }
1179
+
1180
+ .message-subject {
1181
+ margin: 8px 0 0;
1182
+ font-size: 13px;
1183
+ font-weight: 600;
1184
+ color: var(--muted);
1185
+ }
1186
+
1187
+ .message-text {
1188
+ margin: 6px 0 0;
1189
+ white-space: pre-wrap;
1190
+ overflow-wrap: anywhere;
1191
+ }
1192
+
1193
+ /* Le markdown est déjà mis en forme : plus besoin de conserver les blancs du source. */
1194
+ .message-text.markdown {
1195
+ white-space: normal;
1196
+ }
1197
+
1198
+ /* --- Corps de message rendu en markdown --- */
1199
+
1200
+ .markdown > *:first-child {
1201
+ margin-top: 0;
1202
+ }
1203
+
1204
+ .markdown > *:last-child {
1205
+ margin-bottom: 0;
1206
+ }
1207
+
1208
+ .md-p {
1209
+ margin: 0 0 8px;
1210
+ }
1211
+
1212
+ .markdown .md-heading {
1213
+ margin: 14px 0 6px;
1214
+ line-height: 1.35;
1215
+ font-weight: 600;
1216
+ }
1217
+
1218
+ .markdown h1.md-heading {
1219
+ font-size: 17px;
1220
+ }
1221
+
1222
+ .markdown h2.md-heading {
1223
+ font-size: 15px;
1224
+ }
1225
+
1226
+ .markdown h3.md-heading,
1227
+ .markdown h4.md-heading,
1228
+ .markdown h5.md-heading,
1229
+ .markdown h6.md-heading {
1230
+ font-size: 14px;
1231
+ }
1232
+
1233
+ .markdown h4.md-heading,
1234
+ .markdown h5.md-heading,
1235
+ .markdown h6.md-heading {
1236
+ color: var(--muted);
1237
+ }
1238
+
1239
+ .md-list {
1240
+ margin: 0 0 8px;
1241
+ padding-left: 20px;
1242
+ }
1243
+
1244
+ .md-item {
1245
+ margin: 2px 0;
1246
+ }
1247
+
1248
+ /* Un article qui porte une sous-liste passe par un paragraphe : il ne doit pas s'en écarter. */
1249
+ .md-item > .md-p {
1250
+ margin-bottom: 2px;
1251
+ }
1252
+
1253
+ .md-list .md-list {
1254
+ margin: 2px 0;
1255
+ }
1256
+
1257
+ .md-quote {
1258
+ margin: 0 0 8px;
1259
+ padding: 2px 0 2px 10px;
1260
+ border-left: 3px solid var(--border);
1261
+ color: var(--muted);
1262
+ }
1263
+
1264
+ .md-rule {
1265
+ margin: 12px 0;
1266
+ border: 0;
1267
+ border-top: 1px solid var(--border);
1268
+ }
1269
+
1270
+ /* La langue annoncée par l'agent, posée en coin du bloc : elle dit ce qu'on lit. */
1271
+ .md-code[data-language]::before {
1272
+ content: attr(data-language);
1273
+ display: block;
1274
+ margin-bottom: 6px;
1275
+ color: var(--muted);
1276
+ font-size: 11px;
1277
+ letter-spacing: 0.04em;
1278
+ text-transform: uppercase;
1279
+ }
1280
+
1281
+ .md-code {
1282
+ margin: 0 0 8px;
1283
+ padding: 10px 12px;
1284
+ border: 1px solid var(--border-soft);
1285
+ border-radius: var(--radius);
1286
+ background: var(--neutral-soft);
1287
+ overflow-x: auto;
1288
+ }
1289
+
1290
+ .md-code code {
1291
+ font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1292
+ white-space: pre;
1293
+ }
1294
+
1295
+ .md-inline-code {
1296
+ padding: 1px 5px;
1297
+ border-radius: 4px;
1298
+ background: var(--neutral-soft);
1299
+ font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1300
+ overflow-wrap: anywhere;
1301
+ }
1302
+
1303
+ .md-link {
1304
+ color: var(--accent);
1305
+ overflow-wrap: anywhere;
1306
+ }
1307
+
1308
+ .md-strong {
1309
+ font-weight: 600;
1310
+ }
1311
+
1312
+ .md-del {
1313
+ color: var(--muted);
1314
+ }
1315
+
1316
+ .md-table {
1317
+ display: block;
1318
+ width: max-content;
1319
+ max-width: 100%;
1320
+ margin: 0 0 8px;
1321
+ border-collapse: collapse;
1322
+ overflow-x: auto;
1323
+ }
1324
+
1325
+ .md-table th,
1326
+ .md-table td {
1327
+ padding: 5px 10px;
1328
+ border: 1px solid var(--border-soft);
1329
+ text-align: left;
1330
+ vertical-align: top;
1331
+ }
1332
+
1333
+ .md-table th {
1334
+ background: var(--neutral-soft);
1335
+ font-weight: 600;
1336
+ }
1337
+
1338
+ .message-foot {
1339
+ display: flex;
1340
+ align-items: center;
1341
+ gap: 12px;
1342
+ margin-top: 10px;
1343
+ }
1344
+
1345
+ .message-foot .btn--link {
1346
+ margin-left: auto;
1347
+ font-size: 12px;
1348
+ }
1349
+
1350
+ /* --- Volet de détail ------------------------------------------------------ */
1351
+
1352
+ .sheet {
1353
+ border-left: 1px solid var(--border);
1354
+ background: var(--panel);
1355
+ overflow-y: auto;
1356
+ min-width: 0;
1357
+ }
1358
+
1359
+ .sheet-head {
1360
+ display: flex;
1361
+ align-items: flex-start;
1362
+ gap: 8px;
1363
+ padding: 18px 20px 14px;
1364
+ border-bottom: 1px solid var(--border);
1365
+ }
1366
+
1367
+ .sheet-head h3 {
1368
+ margin: 0;
1369
+ font-size: 15px;
1370
+ }
1371
+
1372
+ .sheet-subject {
1373
+ margin: 4px 0 0;
1374
+ font-size: 13px;
1375
+ color: var(--muted);
1376
+ }
1377
+
1378
+ .sheet-head .btn {
1379
+ margin-left: auto;
1380
+ }
1381
+
1382
+ .sheet-section {
1383
+ padding: 16px 20px;
1384
+ border-bottom: 1px solid var(--border);
1385
+ }
1386
+
1387
+ .sheet-section:last-of-type {
1388
+ border-bottom: 0;
1389
+ }
1390
+
1391
+ .sheet-section .section-label {
1392
+ display: block;
1393
+ margin-bottom: 12px;
1394
+ }
1395
+
1396
+ .kv {
1397
+ display: grid;
1398
+ grid-template-columns: 96px minmax(0, 1fr) auto;
1399
+ align-items: center;
1400
+ gap: 8px;
1401
+ margin-bottom: 10px;
1402
+ }
1403
+
1404
+ .kv:last-child {
1405
+ margin-bottom: 0;
1406
+ }
1407
+
1408
+ .kv-key {
1409
+ font-size: 12px;
1410
+ color: var(--muted);
1411
+ }
1412
+
1413
+ .kv-value {
1414
+ font-size: 13px;
1415
+ overflow-wrap: anywhere;
1416
+ }
1417
+
1418
+ /* Une pastille est large de son texte : en cellule de grille, elle s'étirerait sinon. */
1419
+ .kv > .tag {
1420
+ justify-self: start;
1421
+ }
1422
+
1423
+ /* Les adresses ne se recopient pas à la main : elles s'affichent en mono, avec un bouton. */
1424
+ .mono {
1425
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
1426
+ font-size: 12px;
1427
+ }
1428
+
1429
+ .party {
1430
+ display: flex;
1431
+ gap: 10px;
1432
+ }
1433
+
1434
+ .party-name {
1435
+ font-size: 13px;
1436
+ font-weight: 600;
1437
+ }
1438
+
1439
+ .party-box {
1440
+ font-size: 12px;
1441
+ color: var(--muted);
1442
+ }
1443
+
1444
+ .party-addr {
1445
+ display: flex;
1446
+ align-items: center;
1447
+ gap: 6px;
1448
+ margin-top: 2px;
1449
+ color: var(--muted);
1450
+ }
1451
+
1452
+ .copy {
1453
+ border: 0;
1454
+ background: none;
1455
+ padding: 2px;
1456
+ color: var(--muted);
1457
+ cursor: pointer;
1458
+ display: inline-flex;
1459
+ border-radius: 4px;
1460
+ }
1461
+
1462
+ .copy:hover {
1463
+ color: var(--accent);
1464
+ }
1465
+
1466
+ .copy:focus-visible {
1467
+ outline: 2px solid var(--accent);
1468
+ outline-offset: 1px;
1469
+ }
1470
+
1471
+ .copy .icon {
1472
+ width: 14px;
1473
+ height: 14px;
1474
+ }
1475
+
1476
+ .deliveries {
1477
+ width: 100%;
1478
+ border-collapse: collapse;
1479
+ font-size: 13px;
1480
+ }
1481
+
1482
+ .deliveries th {
1483
+ text-align: left;
1484
+ font-size: 11px;
1485
+ font-weight: 400;
1486
+ color: var(--muted);
1487
+ padding: 0 8px 8px 0;
1488
+ border-bottom: 1px solid var(--border-soft);
1489
+ }
1490
+
1491
+ .deliveries td {
1492
+ padding: 8px 8px 8px 0;
1493
+ vertical-align: middle;
1494
+ }
1495
+
1496
+ .deliveries td.role,
1497
+ .deliveries td.folder {
1498
+ font-size: 12px;
1499
+ color: var(--muted);
1500
+ }
1501
+
1502
+ /* --- États vides et erreurs ----------------------------------------------- */
1503
+
1504
+ .empty {
1505
+ padding: 48px 24px;
1506
+ text-align: center;
1507
+ color: var(--muted);
1508
+ }
1509
+
1510
+ .empty-title {
1511
+ display: block;
1512
+ color: var(--text);
1513
+ font-weight: 600;
1514
+ margin-bottom: 4px;
1515
+ }
1516
+
1517
+ .banner {
1518
+ margin: 16px 20px;
1519
+ padding: 12px 14px;
1520
+ border-radius: var(--radius);
1521
+ background: var(--danger-soft);
1522
+ color: var(--danger);
1523
+ font-size: 13px;
1524
+ }
1525
+
1526
+ /* --- Écrans étroits ------------------------------------------------------- */
1527
+
1528
+ @media (max-width: 1200px) {
1529
+ .console.has-sheet,
1530
+ .console.is-collapsed.has-sheet {
1531
+ grid-template-columns: 57px 320px minmax(0, 1fr) 320px;
1532
+ }
1533
+ }
1534
+
1535
+ @media (max-width: 1000px) {
1536
+ .topbar-search {
1537
+ max-width: 240px;
1538
+ }
1539
+
1540
+ .console,
1541
+ .console.is-collapsed {
1542
+ grid-template-columns: 57px 300px minmax(0, 1fr);
1543
+ }
1544
+
1545
+ /* Trop étroit pour quatre colonnes : le volet recouvre le lecteur. */
1546
+ .console.has-sheet,
1547
+ .console.is-collapsed.has-sheet {
1548
+ grid-template-columns: 57px 300px minmax(0, 1fr);
1549
+ }
1550
+
1551
+ .console.has-sheet .sheet {
1552
+ position: fixed;
1553
+ top: var(--topbar-h);
1554
+ right: 0;
1555
+ bottom: 0;
1556
+ width: 340px;
1557
+ max-width: 100%;
1558
+ box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
1559
+ }
1560
+ }