DocsLog in

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

Viewing files at commit 2c749578ec22Commit detailsView latest

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