DocsLog in

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

Viewing files at commit 39e235ac59f4Commit detailsView latest

apps/dashboard/src/styles.css 1816 lines · 29.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: #6d776e;
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
.tokenCreateRow {
1114
  display: grid;
1115
  grid-template-columns: minmax(0, 1fr) 110px auto;
1116
  align-items: end;
1117
  gap: 8px;
1118
}
1119
1120
.tokenCreateRow label {
1121
  display: grid;
1122
  gap: 5px;
1123
  color: var(--text-muted);
1124
  font-size: 11px;
1125
}
1126
1127
.tokenCreateRow input,
1128
.tokenCreateRow select {
1129
  min-width: 0;
1130
  width: 100%;
1131
  padding: 9px 10px;
1132
  border: 1px solid var(--border);
1133
  border-radius: var(--radius-sm);
1134
  color: var(--text);
1135
  background: var(--bg-input);
1136
}
1137
1138
.generatedToken {
1139
  display: grid;
1140
  gap: 10px;
1141
  padding: 12px;
1142
  border: 1px solid var(--warn);
1143
  border-radius: var(--radius-sm);
1144
  background: var(--warn-dim);
1145
}
1146
1147
.generatedToken > strong {
1148
  color: var(--warn);
1149
  font-size: 12px;
1150
}
1151
1152
.generatedToken code {
1153
  overflow-wrap: anywhere;
1154
  user-select: all;
1155
}
1156
1157
.tokenList {
1158
  display: grid;
1159
  border-top: 1px solid var(--border);
1160
}
1161
1162
.tokenList > div {
1163
  display: flex;
1164
  align-items: center;
1165
  justify-content: space-between;
1166
  gap: 12px;
1167
  padding-top: 10px;
1168
}
1169
1170
.tokenList span {
1171
  display: grid;
1172
  min-width: 0;
1173
  gap: 3px;
1174
}
1175
1176
.tokenList small {
1177
  color: var(--text-muted);
1178
  font: 10px/1.4 var(--mono);
1179
}
1180
1181
.automationForm label {
1182
  display: grid;
1183
  gap: 6px;
1184
  color: var(--text-muted);
1185
  font-size: 12px;
1186
}
1187
1188
.automationForm .checkControl {
1189
  display: flex;
1190
  grid-template-columns: none;
1191
  align-items: center;
1192
  gap: 8px;
1193
}
1194
1195
.automationForm .checkControl input {
1196
  width: 15px;
1197
  height: 15px;
1198
  accent-color: var(--accent);
1199
}
1200
1201
.agentActions {
1202
  display: flex;
1203
  justify-content: flex-end;
1204
  gap: 8px;
1205
}
1206
1207
.agentManagementActions {
1208
  justify-content: space-between;
1209
}
1210
1211
.dangerButton {
1212
  border-color: var(--danger-line);
1213
  color: var(--danger);
1214
  background: var(--danger-dim);
1215
}
1216
1217
.dangerButton:hover:not(:disabled) {
1218
  border-color: var(--danger);
1219
}
1220
1221
.automationPreview {
1222
  display: flex;
1223
  flex-wrap: wrap;
1224
  gap: 6px;
1225
  margin-top: 8px;
1226
}
1227
1228
.autoAccepted {
1229
  color: #91ba6b !important;
1230
}
1231
1232
.tags {
1233
  display: flex;
1234
  flex-wrap: wrap;
1235
  gap: 6px;
1236
  margin-top: 12px;
1237
}
1238
1239
.tags span {
1240
  padding: 4px 8px;
1241
  border: 1px solid var(--border);
1242
  border-radius: 6px;
1243
  color: var(--text-muted);
1244
  font: 11px/1.3 var(--mono);
1245
}
1246
1247
.notice {
1248
  margin: 18px 0;
1249
  padding: 14px 16px;
1250
  border-left: 3px solid var(--accent);
1251
  color: var(--text-muted);
1252
  background: var(--accent-dim);
1253
  font-size: 13px;
1254
}
1255
1256
.notice strong {
1257
  margin-right: 6px;
1258
  color: var(--text);
1259
}
1260
1261
.connectLayout {
1262
  margin-top: 18px;
1263
}
1264
1265
.endpoint {
1266
  display: flex;
1267
  gap: 8px;
1268
  margin: 20px 0;
1269
}
1270
1271
.endpoint code {
1272
  overflow: auto;
1273
  flex: 1;
1274
  padding: 12px 14px;
1275
  border: 1px solid var(--border);
1276
  border-radius: var(--radius-sm);
1277
  color: var(--accent);
1278
  background: var(--bg-input);
1279
  font: 13px/1.4 var(--mono);
1280
  white-space: nowrap;
1281
}
1282
1283
.endpoint button {
1284
  padding: 0 14px;
1285
  border: 1px solid var(--border-strong);
1286
  border-radius: var(--radius-sm);
1287
  color: var(--text);
1288
  background: var(--bg-well);
1289
  font-weight: 600;
1290
  cursor: pointer;
1291
}
1292
1293
.connectLayout ol {
1294
  margin: 8px 0 0;
1295
  padding-left: 22px;
1296
  color: var(--text-muted);
1297
  font-size: 14px;
1298
  line-height: 1.7;
1299
}
1300
1301
.connectSteps {
1302
  display: grid;
1303
  gap: 12px;
1304
  margin-top: 18px;
1305
}
1306
1307
.connectStep {
1308
  display: grid;
1309
  grid-template-columns: 28px 1fr;
1310
  gap: 12px;
1311
  color: var(--text-muted);
1312
  font-size: 14px;
1313
}
1314
1315
.connectStep b {
1316
  display: grid;
1317
  width: 28px;
1318
  height: 28px;
1319
  place-items: center;
1320
  border-radius: 50%;
1321
  color: var(--accent-ink);
1322
  background: var(--accent);
1323
  font: 600 12px/1 var(--mono);
1324
}
1325
1326
.checkList {
1327
  margin: 16px 0 0;
1328
  padding: 0;
1329
  list-style: none;
1330
}
1331
1332
.checkList li {
1333
  padding: 11px 0;
1334
  border-bottom: 1px solid var(--border);
1335
  color: var(--text-muted);
1336
  font-size: 14px;
1337
}
1338
1339
.checkList li:last-child {
1340
  border-bottom: 0;
1341
}
1342
1343
.checkList li::before {
1344
  content: '✓';
1345
  margin-right: 10px;
1346
  color: var(--accent);
1347
}
1348
1349
.settingsCard {
1350
  margin-top: 18px;
1351
  border: 1px solid var(--border);
1352
  border-radius: var(--radius);
1353
  background: var(--bg-card);
1354
}
1355
1356
.setting {
1357
  display: grid;
1358
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1359
  align-items: center;
1360
  gap: 24px;
1361
  padding: 20px 22px;
1362
  border-bottom: 1px solid var(--border);
1363
}
1364
1365
.setting strong {
1366
  font-size: 14px;
1367
}
1368
1369
.setting p {
1370
  max-width: 580px;
1371
  margin: 5px 0 0;
1372
  color: var(--text-muted);
1373
  font-size: 13px;
1374
  line-height: 1.5;
1375
}
1376
1377
.locked {
1378
  float: right;
1379
  color: var(--text-faint);
1380
  font: 12px/1.3 var(--mono);
1381
}
1382
1383
.toggle {
1384
  position: relative;
1385
  display: block;
1386
  width: 44px;
1387
  height: 26px;
1388
  margin-left: auto;
1389
  padding: 0;
1390
  border: 1px solid var(--border-strong);
1391
  border-radius: 99px;
1392
  background: var(--bg-well);
1393
  cursor: pointer;
1394
}
1395
1396
.toggle span {
1397
  position: absolute;
1398
  top: 4px;
1399
  left: 4px;
1400
  width: 16px;
1401
  height: 16px;
1402
  border-radius: 50%;
1403
  background: var(--text-faint);
1404
  transition: transform 0.18s ease;
1405
}
1406
1407
.toggle.on {
1408
  border-color: var(--accent-line);
1409
  background: var(--accent-dim);
1410
}
1411
1412
.toggle.on span {
1413
  left: 4px;
1414
  background: var(--accent);
1415
  transform: translateX(18px);
1416
}
1417
1418
.saveRow {
1419
  display: flex;
1420
  align-items: center;
1421
  gap: 12px;
1422
  padding: 18px 22px;
1423
}
1424
1425
.saveRow span {
1426
  color: var(--accent);
1427
  font-size: 13px;
1428
}
1429
1430
.loginPage {
1431
  display: grid;
1432
  grid-template-columns: 1.05fr 0.95fr;
1433
  min-height: 100vh;
1434
}
1435
1436
.loginPitch {
1437
  display: flex;
1438
  flex-direction: column;
1439
  justify-content: space-between;
1440
  padding: 48px 7vw;
1441
  background: radial-gradient(circle at 10% 90%, #273c2e 0, transparent 36rem), var(--bg);
1442
}
1443
1444
:root[data-theme='light'] .loginPitch {
1445
  background: radial-gradient(circle at 10% 90%, #d9ebcc 0, transparent 36rem), var(--bg);
1446
}
1447
1448
.loginPitch h1 {
1449
  max-width: 650px;
1450
  margin: 14px 0 18px;
1451
  font-size: clamp(42px, 5.4vw, 72px);
1452
  font-weight: 600;
1453
  letter-spacing: -0.06em;
1454
  line-height: 0.96;
1455
}
1456
1457
.loginPitch > div > p:last-child {
1458
  max-width: 540px;
1459
  color: var(--text-muted);
1460
  font-size: 16px;
1461
  line-height: 1.65;
1462
}
1463
1464
.loginProof {
1465
  display: grid;
1466
  grid-template-columns: auto 1fr;
1467
  gap: 10px 12px;
1468
  color: var(--text-muted);
1469
  font: 12px/1.3 var(--mono);
1470
  text-transform: uppercase;
1471
}
1472
1473
.loginProof span {
1474
  color: var(--accent);
1475
}
1476
1477
.loginCard {
1478
  display: flex;
1479
  flex-direction: column;
1480
  justify-content: center;
1481
  padding: 8vw;
1482
  gap: 28px;
1483
  border-left: 1px solid var(--border);
1484
  background: var(--bg-elevated);
1485
}
1486
1487
.loginCard h2 {
1488
  margin: 8px 0;
1489
  font-size: 30px;
1490
  font-weight: 600;
1491
  letter-spacing: -0.04em;
1492
}
1493
1494
.socialButtons {
1495
  display: grid;
1496
  gap: 10px;
1497
}
1498
1499
.socialButtons button {
1500
  display: flex;
1501
  align-items: center;
1502
  justify-content: center;
1503
  gap: 10px;
1504
  width: 100%;
1505
  padding: 12px;
1506
  border: 1px solid var(--border-strong);
1507
  border-radius: var(--radius-sm);
1508
  color: var(--text);
1509
  background: var(--bg-well);
1510
  font-size: 14px;
1511
  font-weight: 600;
1512
  cursor: pointer;
1513
}
1514
1515
.socialButtons button:hover {
1516
  background: var(--bg-hover);
1517
}
1518
1519
.socialButtons svg {
1520
  width: 18px;
1521
  height: 18px;
1522
}
1523
1524
.loginError,
1525
.errorBar {
1526
  padding: 11px 12px;
1527
  border: 1px solid var(--danger-line);
1528
  border-radius: var(--radius-sm);
1529
  color: var(--danger);
1530
  background: var(--danger-dim);
1531
  font-size: 13px;
1532
}
1533
1534
.loginCard > div > p:last-child,
1535
.loginCard > small {
1536
  color: var(--text-muted);
1537
  font-size: 13px;
1538
  line-height: 1.55;
1539
}
1540
1541
.loading {
1542
  display: grid;
1543
  min-height: 100vh;
1544
  place-items: center;
1545
  align-content: center;
1546
  gap: 14px;
1547
  color: var(--text-muted);
1548
  font: 12px/1.3 var(--mono);
1549
  text-transform: uppercase;
1550
}
1551
1552
.loading.compact {
1553
  min-height: 50vh;
1554
}
1555
1556
.spinner {
1557
  width: 22px;
1558
  height: 22px;
1559
  border: 2px solid var(--border);
1560
  border-top-color: var(--accent);
1561
  border-radius: 50%;
1562
  animation: spin 0.8s linear infinite;
1563
}
1564
1565
.errorBar {
1566
  margin-bottom: 14px;
1567
}
1568
1569
@keyframes spin {
1570
  to {
1571
    transform: rotate(360deg);
1572
  }
1573
}
1574
1575
.conversationLayout {
1576
  display: grid;
1577
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1578
  gap: 16px;
1579
}
1580
1581
.threadList,
1582
.conversationDetail,
1583
.messageList {
1584
  display: grid;
1585
  gap: 10px;
1586
}
1587
1588
.threadList > button {
1589
  display: flex;
1590
  align-items: center;
1591
  justify-content: space-between;
1592
  width: 100%;
1593
  padding: 12px;
1594
  border: 1px solid var(--border);
1595
  border-radius: var(--radius-sm);
1596
  color: var(--text);
1597
  background: var(--bg-well);
1598
  text-align: left;
1599
  cursor: pointer;
1600
}
1601
1602
.threadList > button.active,
1603
.threadList > button:hover {
1604
  border-color: var(--border-strong);
1605
  background: var(--bg-hover);
1606
}
1607
1608
.threadList span,
1609
.threadList small {
1610
  display: block;
1611
}
1612
1613
.threadList small,
1614
.messageList span {
1615
  margin-top: 4px;
1616
  color: var(--text-muted);
1617
  font-size: 11px;
1618
}
1619
1620
.threadList b,
1621
.conversationInsights b {
1622
  color: var(--accent);
1623
  font: 10px/1.2 var(--mono);
1624
}
1625
1626
.conversationInsights {
1627
  padding: 12px;
1628
  border: 1px solid var(--warn-line);
1629
  border-radius: var(--radius-sm);
1630
  background: var(--warn-dim);
1631
}
1632
1633
.conversationInsights p {
1634
  margin: 0 0 6px;
1635
  font-size: 12px;
1636
  line-height: 1.5;
1637
}
1638
1639
.conversationInsights p:last-child {
1640
  margin-bottom: 0;
1641
}
1642
1643
.messageList article {
1644
  max-width: 82%;
1645
  padding: 10px 12px;
1646
  border: 1px solid var(--border);
1647
  border-radius: var(--radius-sm);
1648
  background: var(--bg-well);
1649
}
1650
1651
.messageList article.sent {
1652
  justify-self: end;
1653
  border-color: var(--accent-line);
1654
  background: var(--accent-dim);
1655
}
1656
1657
.messageList article p {
1658
  margin: 4px 0;
1659
  white-space: pre-wrap;
1660
}
1661
1662
.replyBox {
1663
  display: grid;
1664
  gap: 8px;
1665
}
1666
1667
.replyBox textarea {
1668
  min-height: 100px;
1669
  resize: vertical;
1670
}
1671
1672
@media (prefers-reduced-motion: reduce) {
1673
  .spinner,
1674
  .toggle span {
1675
    animation: none;
1676
    transition: none;
1677
  }
1678
}
1679
1680
@media (max-width: 980px) {
1681
  .contentGrid,
1682
  .connectLayout,
1683
  .conversationLayout {
1684
    grid-template-columns: 1fr;
1685
  }
1686
1687
  .loginPage {
1688
    grid-template-columns: 1fr;
1689
  }
1690
1691
  .loginPitch {
1692
    display: none;
1693
  }
1694
1695
  .loginCard {
1696
    min-height: 100vh;
1697
    border: 0;
1698
  }
1699
1700
  .metrics {
1701
    grid-template-columns: 1fr 1fr;
1702
  }
1703
1704
  .agentGrid {
1705
    grid-template-columns: 1fr;
1706
  }
1707
}
1708
1709
@media (max-width: 840px) {
1710
  .appShell {
1711
    display: block;
1712
  }
1713
1714
  .mobileBar {
1715
    display: flex;
1716
  }
1717
1718
  .appShell aside {
1719
    position: fixed;
1720
    z-index: 10;
1721
    top: auto;
1722
    bottom: 0;
1723
    width: 100%;
1724
    height: 68px;
1725
    flex-direction: row;
1726
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
1727
    border: 0;
1728
    border-top: 1px solid var(--border);
1729
  }
1730
1731
  .appShell aside > .brand,
1732
  .privacyStamp,
1733
  .account,
1734
  .themeSwitch {
1735
    display: none;
1736
  }
1737
1738
  .appShell nav {
1739
    display: grid;
1740
    width: 100%;
1741
    grid-template-columns: repeat(7, minmax(0, 1fr));
1742
    gap: 2px;
1743
    margin: 0;
1744
  }
1745
1746
  .appShell nav button {
1747
    flex-direction: column;
1748
    justify-content: center;
1749
    gap: 3px;
1750
    min-width: 0;
1751
    padding: 6px 2px;
1752
    font-size: 10px;
1753
    line-height: 1.15;
1754
    text-align: center;
1755
  }
1756
1757
  .navBadge {
1758
    display: none;
1759
  }
1760
1761
  .appShell main {
1762
    padding: 16px 16px 96px;
1763
  }
1764
1765
  .pageHead {
1766
    align-items: flex-start;
1767
    flex-direction: column;
1768
  }
1769
1770
  .setting {
1771
    grid-template-columns: 1fr;
1772
    gap: 12px;
1773
  }
1774
1775
  .tokenCreateRow {
1776
    grid-template-columns: 1fr;
1777
  }
1778
1779
  .tokenList > div {
1780
    align-items: flex-start;
1781
    flex-direction: column;
1782
  }
1783
1784
  .toggle {
1785
    margin-left: 0;
1786
  }
1787
1788
  .endpoint {
1789
    flex-direction: column;
1790
  }
1791
1792
  .readiness,
1793
  .attentionBanner,
1794
  .setupRequest {
1795
    align-items: flex-start;
1796
    flex-direction: column;
1797
  }
1798
1799
  .readiness > button,
1800
  .attentionBanner,
1801
  .decisionButtons {
1802
    width: 100%;
1803
  }
1804
1805
  .decisionButtons button {
1806
    flex: 1;
1807
  }
1808
1809
  .loginCard {
1810
    padding: 28px 20px;
1811
  }
1812
1813
  .historyRow > b {
1814
    display: none;
1815
  }
1816
}