DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Viewing files at commit 1f74f1f0e3abCommit detailsView latest

apps/dashboard/src/styles.css 2517 lines · 41.4 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');
2
3
:root {
4
  color-scheme: dark;
5
  --font: Manrope, ui-sans-serif, system-ui, sans-serif;
6
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
7
  --bg: #0b0d0b;
8
  --bg-sidebar: #0e100e;
9
  --bg-elevated: #101310;
10
  --bg-card: #111411;
11
  --bg-hover: #191d19;
12
  --bg-input: #0c0f0c;
13
  --bg-well: #0d110d;
14
  --border: #2a2f2a;
15
  --border-strong: #3a413a;
16
  --text: #e8ebe6;
17
  --text-muted: #8b948c;
18
  --text-faint: #6b746c;
19
  --accent: #b9f27c;
20
  --accent-hover: #cafb96;
21
  --accent-ink: #11150f;
22
  --accent-dim: #172015;
23
  --accent-line: #3d5931;
24
  --warn: #f1c476;
25
  --warn-dim: #211b12;
26
  --warn-line: #5b4931;
27
  --danger: #ef826f;
28
  --danger-dim: #261513;
29
  --danger-line: #673e38;
30
  --info: #80b9e9;
31
  --shadow: 0 18px 40px rgb(0 0 0 / 18%);
32
  --radius: 10px;
33
  --radius-sm: 7px;
34
  font-family: var(--font);
35
  color: var(--text);
36
  background: var(--bg);
37
  font-synthesis: none;
38
  line-height: 1.45;
39
}
40
41
:root[data-theme='light'] {
42
  color-scheme: light;
43
  --bg: #f4f6f1;
44
  --bg-sidebar: #ffffff;
45
  --bg-elevated: #ffffff;
46
  --bg-card: #ffffff;
47
  --bg-hover: #eef2ea;
48
  --bg-input: #f8faf6;
49
  --bg-well: #f7f9f4;
50
  --border: #d7ddd3;
51
  --border-strong: #c4cdc0;
52
  --text: #172017;
53
  --text-muted: #5c675d;
54
  --text-faint: #566157;
55
  --accent-dim: #eef6e8;
56
  --accent-line: #bdd9a6;
57
  --warn-dim: #fff8ea;
58
  --warn-line: #d8c59f;
59
  --danger-dim: #f8ecea;
60
  --danger-line: #e3b6ae;
61
  --shadow: 0 16px 32px rgb(23 32 23 / 6%);
62
}
63
64
* {
65
  box-sizing: border-box;
66
}
67
68
html,
69
body {
70
  min-height: 100%;
71
}
72
73
body {
74
  margin: 0;
75
  min-width: 320px;
76
  background: var(--bg);
77
}
78
79
button,
80
input,
81
select,
82
textarea {
83
  font: inherit;
84
}
85
86
button,
87
a,
88
input,
89
select,
90
textarea {
91
  outline: none;
92
}
93
94
:focus-visible {
95
  outline: 2px solid var(--accent);
96
  outline-offset: 2px;
97
}
98
99
.skipLink {
100
  position: absolute;
101
  top: 8px;
102
  left: 8px;
103
  z-index: 20;
104
  padding: 8px 12px;
105
  border-radius: var(--radius-sm);
106
  color: var(--accent-ink);
107
  background: var(--accent);
108
  font-size: 13px;
109
  font-weight: 600;
110
  text-decoration: none;
111
  transform: translateY(-140%);
112
}
113
114
.skipLink:focus {
115
  transform: none;
116
}
117
118
.eyebrow {
119
  margin: 0;
120
  color: var(--text-faint);
121
  font: 500 11px/1.2 var(--mono);
122
  letter-spacing: 0.12em;
123
  text-transform: uppercase;
124
}
125
126
.mark {
127
  display: grid;
128
  width: 36px;
129
  height: 36px;
130
  place-items: center;
131
  border-radius: 8px;
132
  color: var(--accent-ink);
133
  background: var(--accent);
134
  font: 600 12px/1 var(--mono);
135
}
136
137
.appShell {
138
  display: grid;
139
  grid-template-columns: 260px minmax(0, 1fr);
140
  min-height: 100vh;
141
}
142
143
.appShell aside {
144
  position: sticky;
145
  top: 0;
146
  display: flex;
147
  height: 100vh;
148
  flex-direction: column;
149
  padding: 22px 16px;
150
  border-right: 1px solid var(--border);
151
  background: var(--bg-sidebar);
152
}
153
154
.brand {
155
  display: flex;
156
  align-items: center;
157
  gap: 12px;
158
}
159
160
.brand > div:last-child {
161
  display: flex;
162
  flex-direction: column;
163
  gap: 2px;
164
}
165
166
.brand strong {
167
  font-size: 15px;
168
  font-weight: 600;
169
}
170
171
.brand small {
172
  color: var(--text-faint);
173
  font: 10px/1.3 var(--mono);
174
  letter-spacing: 0.08em;
175
}
176
177
.appShell nav {
178
  display: flex;
179
  flex-direction: column;
180
  gap: 4px;
181
  margin-top: 28px;
182
}
183
184
.appShell nav button {
185
  display: flex;
186
  align-items: center;
187
  gap: 10px;
188
  padding: 9px 10px;
189
  border: 0;
190
  border-radius: var(--radius-sm);
191
  color: var(--text-muted);
192
  background: transparent;
193
  text-align: left;
194
  font-size: 13px;
195
  font-weight: 500;
196
  cursor: pointer;
197
}
198
199
.appShell nav button svg {
200
  width: 16px;
201
  height: 16px;
202
  flex: none;
203
  stroke: currentColor;
204
  fill: none;
205
  stroke-width: 1.8;
206
}
207
208
.appShell nav button:hover {
209
  color: var(--text);
210
  background: var(--bg-hover);
211
}
212
213
.appShell nav button.active {
214
  color: var(--text);
215
  background: var(--bg-hover);
216
}
217
218
.appShell nav button.active svg {
219
  color: var(--accent);
220
}
221
222
.navBadge {
223
  margin-left: auto;
224
  min-width: 18px;
225
  padding: 1px 6px;
226
  border-radius: 999px;
227
  color: var(--accent-ink);
228
  background: var(--accent);
229
  font: 600 10px/1.4 var(--mono);
230
  text-align: center;
231
}
232
233
.themeSwitch,
234
.ghostButton {
235
  display: flex;
236
  align-items: center;
237
  gap: 10px;
238
  width: 100%;
239
  margin-top: 16px;
240
  padding: 9px 10px;
241
  border: 1px solid var(--border);
242
  border-radius: var(--radius-sm);
243
  color: var(--text);
244
  background: var(--bg-well);
245
  font-size: 12px;
246
  cursor: pointer;
247
}
248
249
.themeSwitch:hover,
250
.ghostButton:hover,
251
.secondary:hover {
252
  background: var(--bg-hover);
253
}
254
255
.themeSwitch svg,
256
.ghostButton svg {
257
  width: 16px;
258
  height: 16px;
259
  flex: none;
260
}
261
262
.privacyStamp {
263
  display: flex;
264
  align-items: flex-start;
265
  gap: 10px;
266
  margin-top: auto;
267
  padding: 12px;
268
  border: 1px solid var(--border);
269
  border-radius: var(--radius-sm);
270
  background: var(--bg-well);
271
}
272
273
.privacyStamp > div {
274
  display: flex;
275
  flex-direction: column;
276
  gap: 3px;
277
}
278
279
.privacyStamp strong {
280
  font-size: 12px;
281
}
282
283
.privacyStamp small {
284
  color: var(--text-faint);
285
  font-size: 11px;
286
  line-height: 1.4;
287
}
288
289
.liveDot {
290
  width: 7px;
291
  height: 7px;
292
  margin-top: 5px;
293
  border-radius: 50%;
294
  background: var(--accent);
295
  box-shadow: 0 0 8px var(--accent);
296
}
297
298
.account {
299
  display: flex;
300
  align-items: center;
301
  gap: 10px;
302
  width: 100%;
303
  margin-top: 10px;
304
  padding: 8px;
305
  border: 0;
306
  border-radius: var(--radius-sm);
307
  color: var(--text);
308
  background: transparent;
309
  text-align: left;
310
  cursor: pointer;
311
}
312
313
.account:hover {
314
  background: var(--bg-hover);
315
}
316
317
.account > span {
318
  display: grid;
319
  width: 32px;
320
  height: 32px;
321
  place-items: center;
322
  border: 1px solid var(--border);
323
  border-radius: 50%;
324
  color: var(--accent);
325
  font: 600 11px/1 var(--mono);
326
}
327
328
.account > div {
329
  display: flex;
330
  min-width: 0;
331
  flex: 1;
332
  flex-direction: column;
333
  gap: 2px;
334
}
335
336
.account strong,
337
.account small {
338
  overflow: hidden;
339
  text-overflow: ellipsis;
340
  white-space: nowrap;
341
}
342
343
.account strong {
344
  font-size: 12px;
345
}
346
347
.account small {
348
  color: var(--text-faint);
349
  font-size: 11px;
350
}
351
352
.account > b {
353
  color: var(--text-faint);
354
  font-size: 11px;
355
  font-weight: 500;
356
}
357
358
.mobileBar {
359
  display: none;
360
  align-items: center;
361
  justify-content: space-between;
362
  gap: 12px;
363
  padding: 12px 16px 0;
364
}
365
366
.mobileBar .brand small,
367
.mobileBar .account > div,
368
.mobileBar .account > b {
369
  display: none;
370
}
371
372
.mobileActions {
373
  display: flex;
374
  align-items: center;
375
  gap: 8px;
376
}
377
378
.iconButton {
379
  display: grid;
380
  width: 36px;
381
  height: 36px;
382
  place-items: center;
383
  border: 1px solid var(--border);
384
  border-radius: var(--radius-sm);
385
  color: var(--text);
386
  background: var(--bg-card);
387
  cursor: pointer;
388
}
389
390
.iconButton svg {
391
  width: 16px;
392
  height: 16px;
393
}
394
395
.appShell main {
396
  width: 100%;
397
  max-width: 1180px;
398
  padding: 36px 40px 80px;
399
}
400
401
.previewBanner {
402
  margin-bottom: 16px;
403
  padding: 10px 12px;
404
  border: 1px solid var(--accent-line);
405
  border-radius: var(--radius-sm);
406
  color: var(--text);
407
  background: var(--accent-dim);
408
  font-size: 13px;
409
}
410
411
.pageHead {
412
  display: flex;
413
  align-items: flex-end;
414
  justify-content: space-between;
415
  gap: 20px;
416
  padding-bottom: 22px;
417
  border-bottom: 1px solid var(--border);
418
}
419
420
.pageHead h1 {
421
  max-width: 720px;
422
  margin: 6px 0 0;
423
  font-size: clamp(26px, 3vw, 34px);
424
  font-weight: 600;
425
  letter-spacing: -0.04em;
426
  line-height: 1.15;
427
}
428
429
.pageHead p.lede {
430
  max-width: 640px;
431
  margin: 8px 0 0;
432
  color: var(--text-muted);
433
  font-size: 14px;
434
}
435
436
.primary,
437
.secondary {
438
  padding: 9px 14px;
439
  border-radius: var(--radius-sm);
440
  cursor: pointer;
441
  font-size: 13px;
442
  font-weight: 600;
443
}
444
445
.primary {
446
  border: 1px solid var(--accent);
447
  color: var(--accent-ink);
448
  background: var(--accent);
449
}
450
451
.primary:hover {
452
  background: var(--accent-hover);
453
}
454
455
.primary:disabled,
456
.secondary:disabled {
457
  opacity: 0.5;
458
  cursor: not-allowed;
459
}
460
461
.secondary {
462
  border: 1px solid var(--border-strong);
463
  color: var(--text);
464
  background: var(--bg-well);
465
}
466
467
.metrics {
468
  display: grid;
469
  grid-template-columns: repeat(4, minmax(0, 1fr));
470
  gap: 12px;
471
  margin: 18px 0;
472
}
473
474
.readiness,
475
.attentionBanner {
476
  display: flex;
477
  align-items: center;
478
  justify-content: space-between;
479
  gap: 16px;
480
  margin: 18px 0 0;
481
  padding: 16px 18px;
482
  border: 1px solid var(--warn-line);
483
  border-radius: var(--radius);
484
  background: var(--warn-dim);
485
}
486
487
.readiness.ready {
488
  border-color: var(--accent-line);
489
  background: var(--accent-dim);
490
}
491
492
.attentionBanner {
493
  width: 100%;
494
  color: inherit;
495
  text-align: left;
496
  cursor: pointer;
497
}
498
499
.readiness > div,
500
.attentionBanner > div {
501
  display: flex;
502
  align-items: center;
503
  gap: 12px;
504
}
505
506
.readiness > div > div,
507
.attentionBanner > div > div {
508
  display: flex;
509
  flex-direction: column;
510
  gap: 3px;
511
}
512
513
.readiness strong,
514
.attentionBanner strong {
515
  font-size: 14px;
516
}
517
518
.readiness small,
519
.attentionBanner small {
520
  color: var(--text-muted);
521
  font-size: 12px;
522
}
523
524
.statusOrb {
525
  display: grid;
526
  width: 32px;
527
  height: 32px;
528
  flex: none;
529
  place-items: center;
530
  border-radius: 50%;
531
  color: var(--accent-ink);
532
  background: var(--warn);
533
  font: 600 13px/1 var(--mono);
534
}
535
536
.readiness.ready .statusOrb,
537
.attentionBanner .statusOrb {
538
  background: var(--accent);
539
}
540
541
.metric {
542
  display: flex;
543
  min-height: 128px;
544
  flex-direction: column;
545
  padding: 16px 18px;
546
  border: 1px solid var(--border);
547
  border-radius: var(--radius);
548
  background: var(--bg-card);
549
}
550
551
.metric > span {
552
  color: var(--text-faint);
553
  font: 11px/1.3 var(--mono);
554
  letter-spacing: 0.04em;
555
  text-transform: uppercase;
556
}
557
558
.metric > strong {
559
  margin: auto 0 6px;
560
  font: 500 32px/1 var(--mono);
561
  letter-spacing: -0.04em;
562
}
563
564
.metric > small {
565
  color: var(--text-muted);
566
  font-size: 12px;
567
}
568
569
.metric.warn > strong {
570
  color: var(--warn);
571
}
572
573
.contentGrid,
574
.connectLayout {
575
  display: grid;
576
  grid-template-columns: 1.25fr 1fr;
577
  gap: 16px;
578
}
579
580
.setupRequests {
581
  margin: 18px 0;
582
  padding: 22px;
583
  border: 1px solid var(--accent-line);
584
  border-radius: var(--radius);
585
  background: var(--accent-dim);
586
}
587
588
.setupRequests > div:first-child h2 {
589
  margin: 8px 0 4px;
590
  font-size: 20px;
591
  letter-spacing: -0.03em;
592
}
593
594
.setupRequests > div:first-child > p:last-child {
595
  margin: 0 0 16px;
596
  color: var(--text-muted);
597
  font-size: 13px;
598
}
599
600
.setupRequest {
601
  display: flex;
602
  align-items: center;
603
  justify-content: space-between;
604
  gap: 16px;
605
  padding: 14px 16px;
606
  border: 1px solid var(--border);
607
  border-radius: var(--radius-sm);
608
  background: var(--bg-card);
609
}
610
611
.setupRequest + .setupRequest {
612
  margin-top: 10px;
613
}
614
615
.setupRequest > div:first-child {
616
  display: flex;
617
  min-width: 0;
618
  flex-direction: column;
619
  gap: 4px;
620
}
621
622
.setupRequest strong {
623
  font-size: 14px;
624
}
625
626
.setupRequest small {
627
  color: var(--text-muted);
628
  font: 12px/1.4 var(--mono);
629
}
630
631
.decisionButtons {
632
  display: flex;
633
  flex: none;
634
  gap: 8px;
635
}
636
637
.setupRequests > .loginError {
638
  margin-top: 10px;
639
}
640
641
.panel {
642
  min-width: 0;
643
  padding: 20px;
644
  border: 1px solid var(--border);
645
  border-radius: var(--radius);
646
  background: var(--bg-card);
647
}
648
649
.panelHead {
650
  padding-bottom: 14px;
651
  border-bottom: 1px solid var(--border);
652
}
653
654
.panelHead h2 {
655
  margin: 0;
656
  font-size: 16px;
657
  font-weight: 600;
658
}
659
660
.panelHead p {
661
  margin: 4px 0 0;
662
  color: var(--text-muted);
663
  font-size: 13px;
664
}
665
666
.toolbar {
667
  display: flex;
668
  flex-wrap: wrap;
669
  align-items: center;
670
  gap: 10px;
671
  margin: 16px 0 8px;
672
}
673
674
.searchField {
675
  min-width: 220px;
676
  flex: 1;
677
  padding: 9px 12px;
678
  border: 1px solid var(--border);
679
  border-radius: var(--radius-sm);
680
  color: var(--text);
681
  background: var(--bg-input);
682
  font-size: 13px;
683
}
684
685
.filterRow {
686
  display: flex;
687
  flex-wrap: wrap;
688
  gap: 6px;
689
}
690
691
.filterChip {
692
  padding: 6px 10px;
693
  border: 1px solid var(--border);
694
  border-radius: 999px;
695
  color: var(--text-muted);
696
  background: transparent;
697
  font-size: 12px;
698
  cursor: pointer;
699
}
700
701
.filterChip.active,
702
.filterChip:hover {
703
  color: var(--text);
704
  background: var(--bg-hover);
705
}
706
707
.filterChip.active {
708
  border-color: var(--accent-line);
709
  color: var(--accent-ink);
710
  background: var(--accent);
711
}
712
713
.historyRow {
714
  display: flex;
715
  align-items: center;
716
  gap: 12px;
717
  padding: 13px 4px;
718
  border-bottom: 1px solid var(--border);
719
}
720
721
.historyRow:last-child {
722
  border-bottom: 0;
723
}
724
725
.historyRow:hover {
726
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
727
}
728
729
.historyRow > div {
730
  display: flex;
731
  min-width: 0;
732
  flex: 1;
733
  flex-direction: column;
734
  gap: 3px;
735
}
736
737
.historyRow strong {
738
  font-size: 13px;
739
  font-weight: 600;
740
  text-transform: capitalize;
741
}
742
743
.historyRow small {
744
  overflow: hidden;
745
  color: var(--text-muted);
746
  font: 12px/1.4 var(--mono);
747
  text-overflow: ellipsis;
748
  white-space: nowrap;
749
}
750
751
.historyRow > b {
752
  color: var(--text-faint);
753
  font: 11px/1.3 var(--mono);
754
  text-transform: uppercase;
755
}
756
757
.eventDot {
758
  width: 8px;
759
  height: 8px;
760
  flex: none;
761
  border-radius: 50%;
762
  background: #91b96b;
763
}
764
765
.eventDot.policy_warning,
766
.eventDot.objection {
767
  background: var(--warn);
768
}
769
770
.eventDot.policy_violation,
771
.eventDot.dispute {
772
  background: var(--danger);
773
}
774
775
.eventDot.receipt {
776
  background: var(--info);
777
}
778
779
.textButton {
780
  margin-top: 14px;
781
  padding: 0;
782
  border: 0;
783
  color: var(--accent);
784
  background: transparent;
785
  font-size: 13px;
786
  font-weight: 600;
787
  cursor: pointer;
788
}
789
790
.empty {
791
  display: grid;
792
  min-height: 220px;
793
  place-items: center;
794
  align-content: center;
795
  padding: 28px;
796
  text-align: center;
797
}
798
799
.empty > span,
800
.empty > svg {
801
  display: grid;
802
  width: 42px;
803
  height: 42px;
804
  place-items: center;
805
  margin-bottom: 12px;
806
  border: 1px solid var(--border);
807
  border-radius: 50%;
808
  color: var(--text-muted);
809
}
810
811
.empty strong {
812
  font-size: 15px;
813
}
814
815
.empty p {
816
  max-width: 420px;
817
  margin: 8px 0 16px;
818
  color: var(--text-muted);
819
  font-size: 13px;
820
  line-height: 1.55;
821
}
822
823
.profile {
824
  padding: 16px 0;
825
  border-bottom: 1px solid var(--border);
826
}
827
828
.profile:last-child {
829
  border-bottom: 0;
830
}
831
832
.profile > div:first-child {
833
  display: flex;
834
  justify-content: space-between;
835
  gap: 12px;
836
  margin-bottom: 12px;
837
}
838
839
.profile > div:first-child strong {
840
  font-size: 13px;
841
}
842
843
.profile > div:first-child small {
844
  color: var(--text-muted);
845
  font: 12px/1.3 var(--mono);
846
}
847
848
.meter {
849
  display: grid;
850
  grid-template-columns: 96px 1fr 40px;
851
  align-items: center;
852
  gap: 10px;
853
  margin: 8px 0;
854
  color: var(--text-muted);
855
  font: 11px/1.3 var(--mono);
856
}
857
858
.meter i {
859
  height: 5px;
860
  overflow: hidden;
861
  border-radius: 99px;
862
  background: var(--border);
863
}
864
865
.meter i b {
866
  display: block;
867
  height: 100%;
868
  background: var(--accent);
869
}
870
871
.meter strong {
872
  text-align: right;
873
}
874
875
.agentGrid {
876
  display: grid;
877
  grid-template-columns: repeat(2, minmax(0, 1fr));
878
  gap: 16px;
879
  margin-top: 18px;
880
}
881
882
.agentGrid > .empty {
883
  grid-column: 1 / -1;
884
  border: 1px solid var(--border);
885
  border-radius: var(--radius);
886
  background: var(--bg-card);
887
}
888
889
.agentCard {
890
  display: flex;
891
  min-height: 230px;
892
  flex-direction: column;
893
  padding: 20px;
894
  border: 1px solid var(--border);
895
  border-radius: var(--radius);
896
  background: var(--bg-card);
897
}
898
899
.agentTop {
900
  display: flex;
901
  align-items: flex-start;
902
  justify-content: space-between;
903
  gap: 12px;
904
}
905
906
.agentGlyph {
907
  display: grid;
908
  width: 40px;
909
  height: 40px;
910
  place-items: center;
911
  border: 1px solid var(--border);
912
  border-radius: var(--radius-sm);
913
  color: var(--accent);
914
}
915
916
.agentGlyph svg {
917
  width: 18px;
918
  height: 18px;
919
}
920
921
.agentBadges {
922
  display: flex;
923
  flex-wrap: wrap;
924
  justify-content: flex-end;
925
  gap: 6px;
926
}
927
928
.agentTop b {
929
  padding: 4px 8px;
930
  border: 1px solid var(--border);
931
  border-radius: 999px;
932
  color: var(--text-muted);
933
  background: var(--bg-well);
934
  font: 11px/1.3 var(--mono);
935
}
936
937
.agentTop b.bad {
938
  border-color: var(--danger-line);
939
  color: var(--danger);
940
  background: var(--danger-dim);
941
}
942
943
.agentTop .readyBadge,
944
.agentTop .onlineBadge {
945
  border-color: var(--accent-line);
946
  color: #7cb34a;
947
  background: var(--accent-dim);
948
}
949
950
:root[data-theme='dark'] .agentTop .readyBadge,
951
:root[data-theme='dark'] .agentTop .onlineBadge {
952
  color: var(--accent);
953
}
954
955
.agentTop .needsBadge {
956
  border-color: var(--warn-line);
957
  color: var(--warn);
958
  background: var(--warn-dim);
959
}
960
961
.agentTop .offlineBadge {
962
  color: var(--text-faint);
963
}
964
965
.agentCard h2 {
966
  margin: 18px 0 4px;
967
  font-size: 18px;
968
  letter-spacing: -0.03em;
969
}
970
971
.agentCard p,
972
.agentCard > small {
973
  color: var(--text-muted);
974
  font-size: 13px;
975
}
976
977
.agentCard > small {
978
  display: block;
979
  margin-top: 10px;
980
}
981
982
.agentCard > a {
983
  display: inline-block;
984
  margin-top: 10px;
985
  color: var(--accent);
986
  font-size: 13px;
987
  font-weight: 600;
988
  text-decoration: none;
989
}
990
991
.agentCard > button,
992
.agentCard > .agentActions {
993
  width: 100%;
994
  margin-top: 16px;
995
}
996
997
.automationSummary {
998
  display: flex;
999
  flex-wrap: wrap;
1000
  gap: 6px;
1001
  margin-top: 14px;
1002
}
1003
1004
.automationSummary span,
1005
.automationPreview span {
1006
  padding: 5px 8px;
1007
  border: 1px solid var(--border);
1008
  border-radius: 6px;
1009
  color: var(--text-muted);
1010
  background: var(--bg-well);
1011
  font: 11px/1.3 var(--mono);
1012
}
1013
1014
.automationForm {
1015
  display: grid;
1016
  gap: 12px;
1017
  margin-top: 16px;
1018
  padding-top: 16px;
1019
  border-top: 1px solid var(--border);
1020
}
1021
1022
.runtimeBox {
1023
  display: grid;
1024
  gap: 10px;
1025
  margin-top: 16px;
1026
  padding: 14px;
1027
  border: 1px solid var(--border);
1028
  border-radius: var(--radius-sm);
1029
  background: var(--bg-well);
1030
}
1031
1032
.runtimeBox > div:first-child {
1033
  display: flex;
1034
  align-items: center;
1035
  justify-content: space-between;
1036
  gap: 12px;
1037
}
1038
1039
.runtimeBox p,
1040
.runtimeBox small {
1041
  margin: 0;
1042
  color: var(--text-muted);
1043
  font-size: 12px;
1044
  line-height: 1.5;
1045
}
1046
1047
.runtimeBox input,
1048
.automationForm input,
1049
.automationForm select,
1050
.setting input,
1051
.setting select {
1052
  width: 100%;
1053
  padding: 10px 12px;
1054
  border: 1px solid var(--border);
1055
  border-radius: var(--radius-sm);
1056
  color: var(--text);
1057
  background: var(--bg-input);
1058
  font-size: 13px;
1059
}
1060
1061
.runtimeBox input:focus,
1062
.automationForm input:focus,
1063
.automationForm select:focus,
1064
.setting input:focus,
1065
.setting select:focus,
1066
.searchField:focus {
1067
  border-color: #82a761;
1068
  box-shadow: 0 0 0 3px rgb(185 242 124 / 14%);
1069
}
1070
1071
.runtimeLive,
1072
.runtimeMissing {
1073
  font: 11px/1.3 var(--mono);
1074
}
1075
1076
.runtimeLive {
1077
  color: var(--accent);
1078
}
1079
1080
.runtimeMissing {
1081
  color: var(--warn);
1082
}
1083
1084
.accessTokenBox {
1085
  display: grid;
1086
  gap: 12px;
1087
  margin-top: 12px;
1088
  padding: 14px;
1089
  border: 1px solid var(--border);
1090
  border-radius: var(--radius-sm);
1091
  background: var(--bg-well);
1092
}
1093
1094
.accessTokenHead > div {
1095
  display: flex;
1096
  align-items: center;
1097
  justify-content: space-between;
1098
  gap: 12px;
1099
}
1100
1101
.accessTokenHead span {
1102
  color: var(--accent);
1103
  font: 11px/1.3 var(--mono);
1104
}
1105
1106
.accessTokenHead p {
1107
  margin: 8px 0 0;
1108
  color: var(--text-muted);
1109
  font-size: 12px;
1110
  line-height: 1.5;
1111
}
1112
1113
.tokenList {
1114
  display: grid;
1115
  border-top: 1px solid var(--border);
1116
}
1117
1118
.tokenList > div {
1119
  display: flex;
1120
  align-items: center;
1121
  justify-content: space-between;
1122
  gap: 12px;
1123
  padding-top: 10px;
1124
}
1125
1126
.tokenList span {
1127
  display: grid;
1128
  min-width: 0;
1129
  gap: 3px;
1130
}
1131
1132
.tokenList small {
1133
  color: var(--text-muted);
1134
  font: 10px/1.4 var(--mono);
1135
}
1136
1137
.automationForm label {
1138
  display: grid;
1139
  gap: 6px;
1140
  color: var(--text-muted);
1141
  font-size: 12px;
1142
}
1143
1144
.automationForm .checkControl {
1145
  display: flex;
1146
  grid-template-columns: none;
1147
  align-items: center;
1148
  gap: 8px;
1149
}
1150
1151
.automationForm .checkControl input {
1152
  width: 15px;
1153
  height: 15px;
1154
  accent-color: var(--accent);
1155
}
1156
1157
.agentActions {
1158
  display: flex;
1159
  justify-content: flex-end;
1160
  gap: 8px;
1161
}
1162
1163
.agentManagementActions {
1164
  justify-content: space-between;
1165
}
1166
1167
.dangerButton {
1168
  border-color: var(--danger-line);
1169
  color: var(--danger);
1170
  background: var(--danger-dim);
1171
}
1172
1173
.dangerButton:hover:not(:disabled) {
1174
  border-color: var(--danger);
1175
}
1176
1177
.automationPreview {
1178
  display: flex;
1179
  flex-wrap: wrap;
1180
  gap: 6px;
1181
  margin-top: 8px;
1182
}
1183
1184
.autoAccepted {
1185
  color: #91ba6b !important;
1186
}
1187
1188
.tags {
1189
  display: flex;
1190
  flex-wrap: wrap;
1191
  gap: 6px;
1192
  margin-top: 12px;
1193
}
1194
1195
.tags span {
1196
  padding: 4px 8px;
1197
  border: 1px solid var(--border);
1198
  border-radius: 6px;
1199
  color: var(--text-muted);
1200
  font: 11px/1.3 var(--mono);
1201
}
1202
1203
.notice {
1204
  margin: 18px 0;
1205
  padding: 14px 16px;
1206
  border-left: 3px solid var(--accent);
1207
  color: var(--text-muted);
1208
  background: var(--accent-dim);
1209
  font-size: 13px;
1210
}
1211
1212
.notice strong {
1213
  margin-right: 6px;
1214
  color: var(--text);
1215
}
1216
1217
.connectionTypePicker {
1218
  display: grid;
1219
  grid-template-columns: repeat(2, minmax(0, 1fr));
1220
  gap: 10px;
1221
  margin-top: 18px;
1222
}
1223
1224
.connectionTypePicker button {
1225
  display: grid;
1226
  gap: 5px;
1227
  padding: 14px 16px;
1228
  border: 1px solid var(--border);
1229
  border-radius: var(--radius-sm);
1230
  color: var(--text);
1231
  background: var(--bg-card);
1232
  font-size: 14px;
1233
  font-weight: 600;
1234
  text-align: left;
1235
  cursor: pointer;
1236
}
1237
1238
.connectionTypePicker button.active {
1239
  border-color: var(--accent-line);
1240
  background: var(--accent-dim);
1241
}
1242
1243
.connectionTypePicker small {
1244
  color: var(--text-muted);
1245
  font-size: 12px;
1246
  font-weight: 400;
1247
}
1248
1249
.connectLayout {
1250
  margin-top: 18px;
1251
}
1252
1253
.providerForm {
1254
  display: grid;
1255
  grid-template-columns: repeat(2, minmax(0, 1fr));
1256
  gap: 12px;
1257
  margin-top: 18px;
1258
}
1259
1260
.providerForm label,
1261
.providerResult label {
1262
  display: grid;
1263
  gap: 6px;
1264
  color: var(--text-muted);
1265
  font-size: 12px;
1266
}
1267
1268
.providerForm input,
1269
.providerForm select,
1270
.providerForm textarea {
1271
  width: 100%;
1272
  padding: 10px 12px;
1273
  border: 1px solid var(--border);
1274
  border-radius: var(--radius-sm);
1275
  color: var(--text);
1276
  background: var(--bg-input);
1277
  font: inherit;
1278
}
1279
1280
.providerForm textarea {
1281
  min-height: 82px;
1282
  resize: vertical;
1283
}
1284
1285
.providerForm .fullWidth {
1286
  grid-column: 1 / -1;
1287
}
1288
1289
.providerSubmit {
1290
  display: flex;
1291
  align-items: center;
1292
  justify-content: space-between;
1293
  gap: 12px;
1294
}
1295
1296
.providerSubmit p {
1297
  margin: 0;
1298
  color: var(--text-muted);
1299
  font-size: 12px;
1300
}
1301
1302
.providerResult {
1303
  display: grid;
1304
  gap: 14px;
1305
  margin-top: 18px;
1306
}
1307
1308
.providerResult code {
1309
  padding: 11px 12px;
1310
  border: 1px solid var(--border);
1311
  border-radius: var(--radius-sm);
1312
  color: var(--accent);
1313
  background: var(--bg-input);
1314
  overflow-wrap: anywhere;
1315
  user-select: all;
1316
}
1317
1318
.successBanner {
1319
  display: grid;
1320
  gap: 3px;
1321
  padding: 12px;
1322
  border: 1px solid var(--accent-line);
1323
  border-radius: var(--radius-sm);
1324
  background: var(--accent-dim);
1325
}
1326
1327
.successBanner span {
1328
  color: var(--text-muted);
1329
  font: 11px/1.4 var(--mono);
1330
  overflow-wrap: anywhere;
1331
}
1332
1333
.providerNotice {
1334
  margin-bottom: 0;
1335
}
1336
1337
.endpoint {
1338
  display: flex;
1339
  gap: 8px;
1340
  margin: 20px 0;
1341
}
1342
1343
.endpoint code {
1344
  overflow: auto;
1345
  flex: 1;
1346
  padding: 12px 14px;
1347
  border: 1px solid var(--border);
1348
  border-radius: var(--radius-sm);
1349
  color: var(--accent);
1350
  background: var(--bg-input);
1351
  font: 13px/1.4 var(--mono);
1352
  white-space: nowrap;
1353
}
1354
1355
.endpoint button {
1356
  padding: 0 14px;
1357
  border: 1px solid var(--border-strong);
1358
  border-radius: var(--radius-sm);
1359
  color: var(--text);
1360
  background: var(--bg-well);
1361
  font-weight: 600;
1362
  cursor: pointer;
1363
}
1364
1365
.connectLayout ol {
1366
  margin: 8px 0 0;
1367
  padding-left: 22px;
1368
  color: var(--text-muted);
1369
  font-size: 14px;
1370
  line-height: 1.7;
1371
}
1372
1373
.connectSteps {
1374
  display: grid;
1375
  gap: 12px;
1376
  margin-top: 18px;
1377
}
1378
1379
.connectStep {
1380
  display: grid;
1381
  grid-template-columns: 28px 1fr;
1382
  gap: 12px;
1383
  color: var(--text-muted);
1384
  font-size: 14px;
1385
}
1386
1387
.connectStep b {
1388
  display: grid;
1389
  width: 28px;
1390
  height: 28px;
1391
  place-items: center;
1392
  border-radius: 50%;
1393
  color: var(--accent-ink);
1394
  background: var(--accent);
1395
  font: 600 12px/1 var(--mono);
1396
}
1397
1398
.checkList {
1399
  margin: 16px 0 0;
1400
  padding: 0;
1401
  list-style: none;
1402
}
1403
1404
.checkList li {
1405
  padding: 11px 0;
1406
  border-bottom: 1px solid var(--border);
1407
  color: var(--text-muted);
1408
  font-size: 14px;
1409
}
1410
1411
.checkList li:last-child {
1412
  border-bottom: 0;
1413
}
1414
1415
.checkList li::before {
1416
  content: '✓';
1417
  margin-right: 10px;
1418
  color: var(--accent);
1419
}
1420
1421
.settingsCard {
1422
  margin-top: 18px;
1423
  border: 1px solid var(--border);
1424
  border-radius: var(--radius);
1425
  background: var(--bg-card);
1426
}
1427
1428
.setting {
1429
  display: grid;
1430
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1431
  align-items: center;
1432
  gap: 24px;
1433
  padding: 20px 22px;
1434
  border-bottom: 1px solid var(--border);
1435
}
1436
1437
.setting strong {
1438
  font-size: 14px;
1439
}
1440
1441
.setting p {
1442
  max-width: 580px;
1443
  margin: 5px 0 0;
1444
  color: var(--text-muted);
1445
  font-size: 13px;
1446
  line-height: 1.5;
1447
}
1448
1449
.locked {
1450
  float: right;
1451
  color: var(--text-faint);
1452
  font: 12px/1.3 var(--mono);
1453
}
1454
1455
.toggle {
1456
  position: relative;
1457
  display: block;
1458
  width: 44px;
1459
  height: 26px;
1460
  margin-left: auto;
1461
  padding: 0;
1462
  border: 1px solid var(--border-strong);
1463
  border-radius: 99px;
1464
  background: var(--bg-well);
1465
  cursor: pointer;
1466
}
1467
1468
.toggle span {
1469
  position: absolute;
1470
  top: 4px;
1471
  left: 4px;
1472
  width: 16px;
1473
  height: 16px;
1474
  border-radius: 50%;
1475
  background: var(--text-faint);
1476
  transition: transform 0.18s ease;
1477
}
1478
1479
.toggle.on {
1480
  border-color: var(--accent-line);
1481
  background: var(--accent-dim);
1482
}
1483
1484
.toggle.on span {
1485
  left: 4px;
1486
  background: var(--accent);
1487
  transform: translateX(18px);
1488
}
1489
1490
.saveRow {
1491
  display: flex;
1492
  align-items: center;
1493
  gap: 12px;
1494
  padding: 18px 22px;
1495
}
1496
1497
.saveRow span {
1498
  color: var(--accent);
1499
  font-size: 13px;
1500
}
1501
1502
.loginPage {
1503
  display: grid;
1504
  grid-template-columns: 1.05fr 0.95fr;
1505
  min-height: 100vh;
1506
}
1507
1508
.loginPitch {
1509
  display: flex;
1510
  flex-direction: column;
1511
  justify-content: space-between;
1512
  padding: 48px 7vw;
1513
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), var(--bg);
1514
}
1515
1516
:root[data-theme='light'] .loginPitch {
1517
  background: radial-gradient(circle at 10% 90%, #d9ebcc 0, transparent 36rem), var(--bg);
1518
}
1519
1520
.loginPitch h1 {
1521
  max-width: 650px;
1522
  margin: 14px 0 18px;
1523
  font-size: clamp(42px, 5.4vw, 72px);
1524
  font-weight: 600;
1525
  letter-spacing: -0.06em;
1526
  line-height: 0.96;
1527
}
1528
1529
.loginPitch > div > p:last-child {
1530
  max-width: 540px;
1531
  color: var(--text-muted);
1532
  font-size: 16px;
1533
  line-height: 1.65;
1534
}
1535
1536
.loginProof {
1537
  display: grid;
1538
  grid-template-columns: auto 1fr;
1539
  gap: 10px 12px;
1540
  color: var(--text-muted);
1541
  font: 12px/1.3 var(--mono);
1542
  text-transform: uppercase;
1543
}
1544
1545
.loginProof span {
1546
  color: var(--accent);
1547
}
1548
1549
.loginCard {
1550
  display: flex;
1551
  flex-direction: column;
1552
  justify-content: center;
1553
  padding: 8vw;
1554
  gap: 28px;
1555
  border-left: 1px solid var(--border);
1556
  background: var(--bg-elevated);
1557
}
1558
1559
.loginCard h2 {
1560
  margin: 8px 0;
1561
  font-size: 30px;
1562
  font-weight: 600;
1563
  letter-spacing: -0.04em;
1564
}
1565
1566
.socialButtons {
1567
  display: grid;
1568
  gap: 10px;
1569
}
1570
1571
.socialButtons button {
1572
  display: flex;
1573
  align-items: center;
1574
  justify-content: center;
1575
  gap: 10px;
1576
  width: 100%;
1577
  padding: 12px;
1578
  border: 1px solid var(--border-strong);
1579
  border-radius: var(--radius-sm);
1580
  color: var(--text);
1581
  background: var(--bg-well);
1582
  font-size: 14px;
1583
  font-weight: 600;
1584
  cursor: pointer;
1585
}
1586
1587
.socialButtons button:hover {
1588
  background: var(--bg-hover);
1589
}
1590
1591
.socialButtons svg {
1592
  width: 18px;
1593
  height: 18px;
1594
}
1595
1596
.loginError,
1597
.errorBar {
1598
  padding: 11px 12px;
1599
  border: 1px solid var(--danger-line);
1600
  border-radius: var(--radius-sm);
1601
  color: var(--danger);
1602
  background: var(--danger-dim);
1603
  font-size: 13px;
1604
}
1605
1606
.loginCard > div > p:last-child,
1607
.loginCard > small {
1608
  color: var(--text-muted);
1609
  font-size: 13px;
1610
  line-height: 1.55;
1611
}
1612
1613
.loading {
1614
  display: grid;
1615
  min-height: 100vh;
1616
  place-items: center;
1617
  align-content: center;
1618
  gap: 14px;
1619
  color: var(--text-muted);
1620
  font: 12px/1.3 var(--mono);
1621
  text-transform: uppercase;
1622
}
1623
1624
.loading.compact {
1625
  min-height: 50vh;
1626
}
1627
1628
.spinner {
1629
  width: 22px;
1630
  height: 22px;
1631
  border: 2px solid var(--border);
1632
  border-top-color: var(--accent);
1633
  border-radius: 50%;
1634
  animation: spin 0.8s linear infinite;
1635
}
1636
1637
.errorBar {
1638
  margin-bottom: 14px;
1639
}
1640
1641
@keyframes spin {
1642
  to {
1643
    transform: rotate(360deg);
1644
  }
1645
}
1646
1647
.conversationLayout {
1648
  display: grid;
1649
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1650
  gap: 16px;
1651
}
1652
1653
.threadList,
1654
.conversationDetail,
1655
.messageList {
1656
  display: grid;
1657
  gap: 10px;
1658
}
1659
1660
.threadList > button {
1661
  display: flex;
1662
  align-items: center;
1663
  justify-content: space-between;
1664
  width: 100%;
1665
  padding: 12px;
1666
  border: 1px solid var(--border);
1667
  border-radius: var(--radius-sm);
1668
  color: var(--text);
1669
  background: var(--bg-well);
1670
  text-align: left;
1671
  cursor: pointer;
1672
}
1673
1674
.threadList > button.active,
1675
.threadList > button:hover {
1676
  border-color: var(--border-strong);
1677
  background: var(--bg-hover);
1678
}
1679
1680
.threadList span,
1681
.threadList small {
1682
  display: block;
1683
}
1684
1685
.threadList small,
1686
.messageList span {
1687
  margin-top: 4px;
1688
  color: var(--text-muted);
1689
  font-size: 11px;
1690
}
1691
1692
.threadList b,
1693
.conversationInsights b {
1694
  color: var(--accent);
1695
  font: 10px/1.2 var(--mono);
1696
}
1697
1698
.conversationInsights {
1699
  padding: 12px;
1700
  border: 1px solid var(--warn-line);
1701
  border-radius: var(--radius-sm);
1702
  background: var(--warn-dim);
1703
}
1704
1705
.conversationInsights p {
1706
  margin: 0 0 6px;
1707
  font-size: 12px;
1708
  line-height: 1.5;
1709
}
1710
1711
.conversationInsights p:last-child {
1712
  margin-bottom: 0;
1713
}
1714
1715
.messageList article {
1716
  max-width: 82%;
1717
  padding: 10px 12px;
1718
  border: 1px solid var(--border);
1719
  border-radius: var(--radius-sm);
1720
  background: var(--bg-well);
1721
}
1722
1723
.messageList article.sent {
1724
  justify-self: end;
1725
  border-color: var(--accent-line);
1726
  background: var(--accent-dim);
1727
}
1728
1729
.messageList article p {
1730
  margin: 4px 0;
1731
  white-space: pre-wrap;
1732
}
1733
1734
.replyBox {
1735
  display: grid;
1736
  gap: 8px;
1737
}
1738
1739
.replyBox textarea {
1740
  min-height: 100px;
1741
  resize: vertical;
1742
}
1743
1744
.historyToolbar {
1745
  display: flex;
1746
  flex-wrap: wrap;
1747
  align-items: center;
1748
  gap: 10px;
1749
  margin-bottom: 16px;
1750
}
1751
1752
.journeyLayout {
1753
  display: grid;
1754
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1755
  gap: 16px;
1756
  align-items: start;
1757
}
1758
1759
.journeyList {
1760
  display: grid;
1761
  gap: 8px;
1762
}
1763
1764
.journeyList > button {
1765
  display: flex;
1766
  width: 100%;
1767
  flex-direction: column;
1768
  gap: 7px;
1769
  padding: 15px;
1770
  border: 1px solid var(--border);
1771
  border-radius: var(--radius);
1772
  color: var(--text);
1773
  background: var(--bg-card);
1774
  text-align: left;
1775
  cursor: pointer;
1776
}
1777
1778
.journeyList > button:hover {
1779
  border-color: var(--border-strong);
1780
  background: var(--bg-hover);
1781
}
1782
1783
.journeyList > button.active {
1784
  border-color: var(--accent-line);
1785
  box-shadow: inset 3px 0 0 var(--accent);
1786
}
1787
1788
.journeyListTop,
1789
.journeyListMeta {
1790
  display: flex;
1791
  align-items: center;
1792
  justify-content: space-between;
1793
  gap: 10px;
1794
}
1795
1796
.journeyListTop > b {
1797
  color: var(--text-faint);
1798
  font: 500 10px/1.2 var(--mono);
1799
  letter-spacing: 0.08em;
1800
  text-transform: uppercase;
1801
}
1802
1803
.journeyList > button > strong {
1804
  font-size: 13px;
1805
  line-height: 1.4;
1806
}
1807
1808
.journeyList > button > small {
1809
  overflow: hidden;
1810
  color: var(--text-muted);
1811
  font: 11px/1.4 var(--mono);
1812
  text-overflow: ellipsis;
1813
  white-space: nowrap;
1814
}
1815
1816
.journeyListMeta {
1817
  color: var(--text-faint);
1818
  font: 10px/1.3 var(--mono);
1819
}
1820
1821
.journeyListMeta i {
1822
  font-style: normal;
1823
}
1824
1825
.statusPill {
1826
  display: inline-flex;
1827
  width: fit-content;
1828
  flex: none;
1829
  align-items: center;
1830
  padding: 4px 7px;
1831
  border: 1px solid var(--border);
1832
  border-radius: 999px;
1833
  color: var(--text-muted);
1834
  background: var(--bg-well);
1835
  font: 500 9px/1 var(--mono);
1836
  letter-spacing: 0.04em;
1837
  text-transform: uppercase;
1838
}
1839
1840
.statusPill.good {
1841
  border-color: var(--accent-line);
1842
  color: var(--accent);
1843
  background: var(--accent-dim);
1844
}
1845
1846
:root[data-theme='light'] .statusPill.good {
1847
  color: #3d681c;
1848
}
1849
1850
.statusPill.warn {
1851
  border-color: var(--warn-line);
1852
  color: var(--warn);
1853
  background: var(--warn-dim);
1854
}
1855
1856
:root[data-theme='light'] .statusPill.warn {
1857
  color: #7a5612;
1858
}
1859
1860
.statusPill.danger {
1861
  border-color: var(--danger-line);
1862
  color: var(--danger);
1863
  background: var(--danger-dim);
1864
}
1865
1866
.journeyDetail {
1867
  min-width: 0;
1868
  overflow: hidden;
1869
  border: 1px solid var(--border);
1870
  border-radius: var(--radius);
1871
  background: var(--bg-card);
1872
}
1873
1874
.journeyHero {
1875
  display: flex;
1876
  align-items: flex-start;
1877
  justify-content: space-between;
1878
  gap: 20px;
1879
  padding: 22px;
1880
  border-bottom: 1px solid var(--border);
1881
}
1882
1883
.journeyHero h2 {
1884
  max-width: 780px;
1885
  margin: 8px 0 5px;
1886
  font-size: clamp(18px, 2vw, 24px);
1887
  line-height: 1.25;
1888
  letter-spacing: -0.03em;
1889
}
1890
1891
.journeyHero p {
1892
  margin: 0;
1893
  color: var(--text-muted);
1894
  font: 11px/1.4 var(--mono);
1895
}
1896
1897
.journeySummaryGrid {
1898
  display: grid;
1899
  grid-template-columns: repeat(4, minmax(0, 1fr));
1900
  border-bottom: 1px solid var(--border);
1901
}
1902
1903
.journeySummaryGrid section {
1904
  display: flex;
1905
  min-width: 0;
1906
  flex-direction: column;
1907
  gap: 5px;
1908
  padding: 16px 20px;
1909
  border-right: 1px solid var(--border);
1910
}
1911
1912
.journeySummaryGrid section:last-child {
1913
  border-right: 0;
1914
}
1915
1916
.journeySummaryGrid span,
1917
.outcomeCard > div > span,
1918
.profileDelta > span {
1919
  color: var(--text-faint);
1920
  font: 10px/1.3 var(--mono);
1921
  letter-spacing: 0.05em;
1922
  text-transform: uppercase;
1923
}
1924
1925
.journeySummaryGrid strong {
1926
  overflow: hidden;
1927
  font-size: 15px;
1928
  text-overflow: ellipsis;
1929
  white-space: nowrap;
1930
}
1931
1932
.journeySummaryGrid small {
1933
  overflow: hidden;
1934
  color: var(--text-muted);
1935
  font-size: 11px;
1936
  text-overflow: ellipsis;
1937
  white-space: nowrap;
1938
}
1939
1940
.outcomeCard {
1941
  margin: 18px;
1942
  padding: 18px;
1943
  border: 1px solid var(--accent-line);
1944
  border-radius: var(--radius-sm);
1945
  background: var(--accent-dim);
1946
}
1947
1948
.outcomeCard h3 {
1949
  max-width: 800px;
1950
  margin: 7px 0 14px;
1951
  font-size: 14px;
1952
  font-weight: 500;
1953
  line-height: 1.55;
1954
}
1955
1956
.outcomeCard ul {
1957
  display: grid;
1958
  gap: 7px;
1959
  margin: 0;
1960
  padding: 0;
1961
  list-style: none;
1962
}
1963
1964
.outcomeCard li {
1965
  display: flex;
1966
  align-items: center;
1967
  gap: 9px;
1968
  color: var(--text-muted);
1969
  font-size: 12px;
1970
}
1971
1972
.ratingGrid {
1973
  display: grid;
1974
  grid-template-columns: repeat(2, minmax(0, 1fr));
1975
  gap: 0 24px;
1976
  margin-top: 16px;
1977
  padding-top: 10px;
1978
  border-top: 1px solid var(--accent-line);
1979
}
1980
1981
.progressCard {
1982
  margin: 18px;
1983
  padding: 18px;
1984
  border: 1px solid var(--border);
1985
  border-radius: var(--radius-sm);
1986
  background: var(--bg-well);
1987
}
1988
1989
.progressCardTop {
1990
  display: flex;
1991
  align-items: flex-start;
1992
  justify-content: space-between;
1993
  gap: 16px;
1994
}
1995
1996
.progressCardTop h3 {
1997
  margin: 6px 0 0;
1998
  font-size: 15px;
1999
}
2000
2001
.progressCardTop > strong {
2002
  color: var(--accent);
2003
  font: 600 22px/1 var(--mono);
2004
}
2005
2006
.progressTrack {
2007
  height: 7px;
2008
  margin: 16px 0 13px;
2009
  overflow: hidden;
2010
  border-radius: 999px;
2011
  background: var(--border);
2012
}
2013
2014
.progressTrack i {
2015
  display: block;
2016
  height: 100%;
2017
  border-radius: inherit;
2018
  background: var(--accent);
2019
  transition: width 180ms ease;
2020
}
2021
2022
.progressFacts {
2023
  display: flex;
2024
  flex-wrap: wrap;
2025
  gap: 7px;
2026
}
2027
2028
.progressFacts span {
2029
  padding: 5px 8px;
2030
  border: 1px solid var(--border);
2031
  border-radius: 999px;
2032
  color: var(--text-muted);
2033
  background: var(--bg-card);
2034
  font-size: 10px;
2035
}
2036
2037
.progressWarning {
2038
  margin: 13px 0 0;
2039
  padding-top: 12px;
2040
  border-top: 1px solid var(--warn-line);
2041
  color: var(--warn);
2042
  font-size: 11px;
2043
}
2044
2045
.journeyNotice {
2046
  margin: 18px;
2047
  padding: 13px 15px;
2048
  border: 1px solid var(--warn-line);
2049
  border-radius: var(--radius-sm);
2050
  color: var(--text-muted);
2051
  background: var(--warn-dim);
2052
  font-size: 12px;
2053
}
2054
2055
.journeyTimelineSection {
2056
  padding: 4px 22px 24px;
2057
}
2058
2059
.journeyTimelineSection > div:first-child h3 {
2060
  margin: 0;
2061
  font-size: 14px;
2062
}
2063
2064
.journeyTimelineSection > div:first-child small {
2065
  color: var(--text-muted);
2066
  font-size: 11px;
2067
}
2068
2069
.journeyTimeline {
2070
  margin: 18px 0 0;
2071
  padding: 0;
2072
  list-style: none;
2073
}
2074
2075
.journeyTimeline li {
2076
  position: relative;
2077
  display: grid;
2078
  grid-template-columns: 15px minmax(0, 1fr) auto;
2079
  gap: 11px;
2080
  min-height: 76px;
2081
}
2082
2083
.journeyTimeline li:not(:last-child)::before {
2084
  position: absolute;
2085
  top: 12px;
2086
  bottom: -4px;
2087
  left: 5px;
2088
  width: 1px;
2089
  background: var(--border-strong);
2090
  content: '';
2091
}
2092
2093
.journeyNode {
2094
  z-index: 1;
2095
  width: 11px;
2096
  height: 11px;
2097
  margin-top: 3px;
2098
  border: 2px solid var(--bg-card);
2099
  border-radius: 50%;
2100
  background: var(--text-faint);
2101
  box-shadow: 0 0 0 1px var(--border-strong);
2102
}
2103
2104
.journeyNode.good {
2105
  background: var(--accent);
2106
}
2107
2108
.journeyNode.warn {
2109
  background: var(--warn);
2110
}
2111
2112
.journeyNode.danger {
2113
  background: var(--danger);
2114
}
2115
2116
.journeyTimeline li > div {
2117
  display: flex;
2118
  min-width: 0;
2119
  flex-direction: column;
2120
  gap: 3px;
2121
  padding-bottom: 18px;
2122
}
2123
2124
.journeyTimeline li > div > span {
2125
  color: var(--text-faint);
2126
  font: 9px/1.3 var(--mono);
2127
  text-transform: uppercase;
2128
}
2129
2130
.journeyTimeline li strong {
2131
  font-size: 12px;
2132
}
2133
2134
.journeyTimeline li p {
2135
  margin: 0;
2136
  color: var(--text-muted);
2137
  font-size: 11px;
2138
  line-height: 1.5;
2139
}
2140
2141
.insightPrinciple {
2142
  display: grid;
2143
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2144
  gap: 30px;
2145
  align-items: center;
2146
  margin-bottom: 16px;
2147
  padding: 22px;
2148
  border: 1px solid var(--accent-line);
2149
  border-radius: var(--radius);
2150
  background: var(--accent-dim);
2151
}
2152
2153
.insightPrinciple h2 {
2154
  margin: 7px 0 5px;
2155
  font-size: 20px;
2156
  letter-spacing: -0.03em;
2157
}
2158
2159
.insightPrinciple p {
2160
  max-width: 680px;
2161
  margin: 0;
2162
  color: var(--text-muted);
2163
  font-size: 13px;
2164
  line-height: 1.55;
2165
}
2166
2167
.insightStats {
2168
  display: grid;
2169
  grid-template-columns: repeat(3, 1fr);
2170
  gap: 8px;
2171
}
2172
2173
.insightStats span {
2174
  display: flex;
2175
  min-width: 0;
2176
  flex-direction: column;
2177
  padding: 12px;
2178
  border: 1px solid var(--accent-line);
2179
  border-radius: var(--radius-sm);
2180
  color: var(--text-muted);
2181
  background: var(--bg-card);
2182
  font-size: 10px;
2183
  text-align: center;
2184
}
2185
2186
.insightStats strong {
2187
  margin-bottom: 3px;
2188
  color: var(--text);
2189
  font: 500 22px/1 var(--mono);
2190
}
2191
2192
.insightGrid {
2193
  display: grid;
2194
  grid-template-columns: repeat(2, minmax(0, 1fr));
2195
  gap: 16px;
2196
  margin-bottom: 16px;
2197
}
2198
2199
.insightGrid > .empty {
2200
  grid-column: 1 / -1;
2201
  border: 1px solid var(--border);
2202
  border-radius: var(--radius);
2203
  background: var(--bg-card);
2204
}
2205
2206
.profileHead {
2207
  display: flex;
2208
  align-items: flex-start;
2209
  justify-content: space-between;
2210
  gap: 12px;
2211
  margin-bottom: 2px;
2212
}
2213
2214
.profileHead > div {
2215
  display: flex;
2216
  min-width: 0;
2217
  flex-direction: column;
2218
  gap: 3px;
2219
}
2220
2221
.profileHeadCompact {
2222
  align-items: center;
2223
  margin-bottom: 11px;
2224
}
2225
2226
.profileHeadCompact > small {
2227
  color: var(--text-faint);
2228
  font: 10px/1.4 var(--mono);
2229
}
2230
2231
.sampleBadge {
2232
  padding: 4px 7px;
2233
  border-radius: 999px;
2234
  color: var(--accent);
2235
  background: var(--accent-dim);
2236
  font: 9px/1.2 var(--mono);
2237
  white-space: nowrap;
2238
}
2239
2240
:root[data-theme='light'] .sampleBadge {
2241
  color: #3d681c;
2242
}
2243
2244
:root[data-theme='light'] .account > span,
2245
:root[data-theme='light'] .profileDelta b.positive {
2246
  color: #456d22;
2247
}
2248
2249
:root[data-theme='light'] .profileDelta b.negative {
2250
  color: #a33d2e;
2251
}
2252
2253
.profileEvidenceLine {
2254
  margin-bottom: 11px;
2255
  color: var(--text-faint);
2256
  font: 10px/1.4 var(--mono);
2257
}
2258
2259
.profileDelta {
2260
  margin-top: 14px;
2261
  padding-top: 12px;
2262
  border-top: 1px solid var(--border);
2263
}
2264
2265
.profileDelta > div {
2266
  display: flex;
2267
  flex-wrap: wrap;
2268
  gap: 5px;
2269
  margin-top: 7px;
2270
}
2271
2272
.profileDelta b {
2273
  padding: 4px 6px;
2274
  border-radius: 4px;
2275
  color: var(--text-muted);
2276
  background: var(--bg-well);
2277
  font: 9px/1.2 var(--mono);
2278
}
2279
2280
.profileDelta b.positive {
2281
  color: var(--accent);
2282
}
2283
2284
.profileDelta b.negative {
2285
  color: var(--danger);
2286
}
2287
2288
.learningDecisionList {
2289
  display: grid;
2290
}
2291
2292
.learningDecisionList article {
2293
  display: grid;
2294
  grid-template-columns: auto minmax(0, 1fr);
2295
  gap: 12px;
2296
  padding: 14px 0;
2297
  border-bottom: 1px solid var(--border);
2298
}
2299
2300
.learningDecisionList article:last-child {
2301
  border-bottom: 0;
2302
}
2303
2304
.learningDecisionList article > div {
2305
  display: flex;
2306
  min-width: 0;
2307
  flex-direction: column;
2308
  gap: 3px;
2309
}
2310
2311
.learningDecisionList strong {
2312
  overflow: hidden;
2313
  font: 11px/1.4 var(--mono);
2314
  text-overflow: ellipsis;
2315
}
2316
2317
.learningDecisionList small {
2318
  color: var(--text-muted);
2319
  font-size: 10px;
2320
}
2321
2322
.learningDecisionList p {
2323
  margin: 2px 0 0;
2324
  color: var(--text-muted);
2325
  font-size: 11px;
2326
}
2327
2328
@media (prefers-reduced-motion: reduce) {
2329
  .spinner,
2330
  .toggle span {
2331
    animation: none;
2332
    transition: none;
2333
  }
2334
}
2335
2336
@media (max-width: 980px) {
2337
  .contentGrid,
2338
  .connectLayout,
2339
  .conversationLayout,
2340
  .journeyLayout,
2341
  .insightPrinciple {
2342
    grid-template-columns: 1fr;
2343
  }
2344
2345
  .journeyList {
2346
    grid-template-columns: repeat(2, minmax(0, 1fr));
2347
  }
2348
2349
  .loginPage {
2350
    grid-template-columns: 1fr;
2351
  }
2352
2353
  .loginPitch {
2354
    display: none;
2355
  }
2356
2357
  .loginCard {
2358
    min-height: 100vh;
2359
    border: 0;
2360
  }
2361
2362
  .metrics {
2363
    grid-template-columns: 1fr 1fr;
2364
  }
2365
2366
  .agentGrid {
2367
    grid-template-columns: 1fr;
2368
  }
2369
2370
  .insightGrid {
2371
    grid-template-columns: 1fr;
2372
  }
2373
}
2374
2375
@media (max-width: 840px) {
2376
  .appShell {
2377
    display: block;
2378
  }
2379
2380
  .mobileBar {
2381
    display: flex;
2382
  }
2383
2384
  .appShell aside {
2385
    position: fixed;
2386
    z-index: 10;
2387
    top: auto;
2388
    bottom: 0;
2389
    width: 100%;
2390
    height: 68px;
2391
    flex-direction: row;
2392
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
2393
    border: 0;
2394
    border-top: 1px solid var(--border);
2395
  }
2396
2397
  .appShell aside > .brand,
2398
  .privacyStamp,
2399
  .account,
2400
  .themeSwitch {
2401
    display: none;
2402
  }
2403
2404
  .appShell nav {
2405
    display: grid;
2406
    width: 100%;
2407
    grid-template-columns: repeat(7, minmax(0, 1fr));
2408
    gap: 2px;
2409
    margin: 0;
2410
  }
2411
2412
  .appShell nav button {
2413
    flex-direction: column;
2414
    justify-content: center;
2415
    gap: 3px;
2416
    min-width: 0;
2417
    padding: 6px 2px;
2418
    font-size: 10px;
2419
    line-height: 1.15;
2420
    text-align: center;
2421
  }
2422
2423
  .navBadge {
2424
    display: none;
2425
  }
2426
2427
  .appShell main {
2428
    padding: 16px 16px 96px;
2429
  }
2430
2431
  .pageHead {
2432
    align-items: flex-start;
2433
    flex-direction: column;
2434
  }
2435
2436
  .setting {
2437
    grid-template-columns: 1fr;
2438
    gap: 12px;
2439
  }
2440
2441
  .connectionTypePicker,
2442
  .providerForm {
2443
    grid-template-columns: 1fr;
2444
  }
2445
2446
  .providerSubmit {
2447
    align-items: flex-start;
2448
    flex-direction: column;
2449
  }
2450
2451
  .tokenList > div {
2452
    align-items: flex-start;
2453
    flex-direction: column;
2454
  }
2455
2456
  .toggle {
2457
    margin-left: 0;
2458
  }
2459
2460
  .endpoint {
2461
    flex-direction: column;
2462
  }
2463
2464
  .readiness,
2465
  .attentionBanner,
2466
  .setupRequest {
2467
    align-items: flex-start;
2468
    flex-direction: column;
2469
  }
2470
2471
  .readiness > button,
2472
  .attentionBanner,
2473
  .decisionButtons {
2474
    width: 100%;
2475
  }
2476
2477
  .decisionButtons button {
2478
    flex: 1;
2479
  }
2480
2481
  .loginCard {
2482
    padding: 28px 20px;
2483
  }
2484
2485
  .historyRow > b {
2486
    display: none;
2487
  }
2488
2489
  .journeyList {
2490
    grid-template-columns: 1fr;
2491
  }
2492
2493
  .journeySummaryGrid,
2494
  .ratingGrid,
2495
  .insightStats {
2496
    grid-template-columns: 1fr;
2497
  }
2498
2499
  .journeySummaryGrid section {
2500
    border-right: 0;
2501
    border-bottom: 1px solid var(--border);
2502
  }
2503
2504
  .journeySummaryGrid section:last-child {
2505
    border-bottom: 0;
2506
  }
2507
2508
  .journeyTimeline li {
2509
    grid-template-columns: 15px minmax(0, 1fr);
2510
  }
2511
2512
  .journeyTimeline li > .statusPill {
2513
    grid-column: 2;
2514
    margin-top: -15px;
2515
    margin-bottom: 16px;
2516
  }
2517
}