DocsLog in

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

Viewing files at commit 5b7999fcbb0cCommit detailsView latest

apps/dashboard/src/styles.css 1894 lines · 30.7 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
.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
@media (prefers-reduced-motion: reduce) {
1745
  .spinner,
1746
  .toggle span {
1747
    animation: none;
1748
    transition: none;
1749
  }
1750
}
1751
1752
@media (max-width: 980px) {
1753
  .contentGrid,
1754
  .connectLayout,
1755
  .conversationLayout {
1756
    grid-template-columns: 1fr;
1757
  }
1758
1759
  .loginPage {
1760
    grid-template-columns: 1fr;
1761
  }
1762
1763
  .loginPitch {
1764
    display: none;
1765
  }
1766
1767
  .loginCard {
1768
    min-height: 100vh;
1769
    border: 0;
1770
  }
1771
1772
  .metrics {
1773
    grid-template-columns: 1fr 1fr;
1774
  }
1775
1776
  .agentGrid {
1777
    grid-template-columns: 1fr;
1778
  }
1779
}
1780
1781
@media (max-width: 840px) {
1782
  .appShell {
1783
    display: block;
1784
  }
1785
1786
  .mobileBar {
1787
    display: flex;
1788
  }
1789
1790
  .appShell aside {
1791
    position: fixed;
1792
    z-index: 10;
1793
    top: auto;
1794
    bottom: 0;
1795
    width: 100%;
1796
    height: 68px;
1797
    flex-direction: row;
1798
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
1799
    border: 0;
1800
    border-top: 1px solid var(--border);
1801
  }
1802
1803
  .appShell aside > .brand,
1804
  .privacyStamp,
1805
  .account,
1806
  .themeSwitch {
1807
    display: none;
1808
  }
1809
1810
  .appShell nav {
1811
    display: grid;
1812
    width: 100%;
1813
    grid-template-columns: repeat(7, minmax(0, 1fr));
1814
    gap: 2px;
1815
    margin: 0;
1816
  }
1817
1818
  .appShell nav button {
1819
    flex-direction: column;
1820
    justify-content: center;
1821
    gap: 3px;
1822
    min-width: 0;
1823
    padding: 6px 2px;
1824
    font-size: 10px;
1825
    line-height: 1.15;
1826
    text-align: center;
1827
  }
1828
1829
  .navBadge {
1830
    display: none;
1831
  }
1832
1833
  .appShell main {
1834
    padding: 16px 16px 96px;
1835
  }
1836
1837
  .pageHead {
1838
    align-items: flex-start;
1839
    flex-direction: column;
1840
  }
1841
1842
  .setting {
1843
    grid-template-columns: 1fr;
1844
    gap: 12px;
1845
  }
1846
1847
  .connectionTypePicker,
1848
  .providerForm {
1849
    grid-template-columns: 1fr;
1850
  }
1851
1852
  .providerSubmit {
1853
    align-items: flex-start;
1854
    flex-direction: column;
1855
  }
1856
1857
  .tokenList > div {
1858
    align-items: flex-start;
1859
    flex-direction: column;
1860
  }
1861
1862
  .toggle {
1863
    margin-left: 0;
1864
  }
1865
1866
  .endpoint {
1867
    flex-direction: column;
1868
  }
1869
1870
  .readiness,
1871
  .attentionBanner,
1872
  .setupRequest {
1873
    align-items: flex-start;
1874
    flex-direction: column;
1875
  }
1876
1877
  .readiness > button,
1878
  .attentionBanner,
1879
  .decisionButtons {
1880
    width: 100%;
1881
  }
1882
1883
  .decisionButtons button {
1884
    flex: 1;
1885
  }
1886
1887
  .loginCard {
1888
    padding: 28px 20px;
1889
  }
1890
1891
  .historyRow > b {
1892
    display: none;
1893
  }
1894
}