DocsLog in

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

Viewing files at commit 4818f40a6317Commit detailsView latest

apps/dashboard/src/styles.css 4613 lines · 76.9 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap');
2
@import 'tailwindcss';
3
@import 'tw-animate-css';
4
@import './landing.css';
5
6
@custom-variant dark (&:is(.dark *));
7
8
@theme inline {
9
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
10
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
11
  --color-background: var(--background);
12
  --color-foreground: var(--foreground);
13
  --color-card: var(--card);
14
  --color-card-foreground: var(--card-foreground);
15
  --color-popover: var(--popover);
16
  --color-popover-foreground: var(--popover-foreground);
17
  --color-primary: var(--primary);
18
  --color-primary-foreground: var(--primary-foreground);
19
  --color-secondary: var(--secondary);
20
  --color-secondary-foreground: var(--secondary-foreground);
21
  --color-muted: var(--muted);
22
  --color-muted-foreground: var(--muted-foreground);
23
  --color-accent: var(--ui-hover);
24
  --color-accent-foreground: var(--ui-hover-foreground);
25
  --color-destructive: var(--destructive);
26
  --color-border: var(--border);
27
  --color-input: var(--input);
28
  --color-ring: var(--ring);
29
  --color-sidebar: var(--sidebar);
30
  --color-sidebar-foreground: var(--sidebar-foreground);
31
  --color-sidebar-primary: var(--sidebar-primary);
32
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
33
  --color-sidebar-accent: var(--sidebar-accent);
34
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
35
  --color-sidebar-border: var(--sidebar-border);
36
  --color-sidebar-ring: var(--sidebar-ring);
37
  --radius-sm: calc(var(--radius) * 0.75);
38
  --radius-md: calc(var(--radius) * 0.875);
39
  --radius-lg: var(--radius);
40
  --radius-xl: calc(var(--radius) * 1.5);
41
}
42
43
:root {
44
  color-scheme: dark;
45
  --font: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
46
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
47
  --bg: #0c0a0a;
48
  --bg-sidebar: transparent;
49
  --bg-elevated: rgb(18 12 11 / 58%);
50
  --bg-card: transparent;
51
  --bg-hover: rgb(240 75 45 / 10%);
52
  --bg-input: rgb(12 10 10 / 78%);
53
  --bg-well: rgb(255 255 255 / 3.5%);
54
  --border: rgb(255 255 255 / 8%);
55
  --border-strong: rgb(255 255 255 / 14%);
56
  --text: #f6f1ee;
57
  --text-muted: #a39a94;
58
  --text-faint: #7a726c;
59
  --accent: #f04b2d;
60
  --accent-hover: #ff5d3d;
61
  --accent-ink: #ffffff;
62
  --accent-dim: rgb(240 75 45 / 16%);
63
  --accent-line: rgb(240 75 45 / 36%);
64
  --live: #2fbf71;
65
  --live-dim: rgb(47 191 113 / 14%);
66
  --warn: #e59a1a;
67
  --warn-dim: rgb(229 154 26 / 12%);
68
  --warn-line: rgb(229 154 26 / 32%);
69
  --danger: #c41f28;
70
  --danger-dim: rgb(196 31 40 / 12%);
71
  --danger-line: rgb(196 31 40 / 32%);
72
  --info: #e07a62;
73
  --shadow: none;
74
  --radius: 0px;
75
  --radius-sm: 0px;
76
  --glow-a: rgb(240 75 45 / 18%);
77
  --glow-b: rgb(240 75 45 / 8%);
78
  --dot: rgb(240 75 45 / 4%);
79
  --background: transparent;
80
  --foreground: var(--text);
81
  --card: transparent;
82
  --card-foreground: var(--text);
83
  --popover: #161211;
84
  --popover-foreground: var(--text);
85
  --primary: var(--accent);
86
  --primary-foreground: var(--accent-ink);
87
  --secondary: var(--bg-well);
88
  --secondary-foreground: var(--text);
89
  --muted: var(--bg-well);
90
  --muted-foreground: var(--text-muted);
91
  --ui-hover: var(--bg-hover);
92
  --ui-hover-foreground: var(--text);
93
  --destructive: var(--danger);
94
  --input: var(--border-strong);
95
  --ring: var(--accent);
96
  --sidebar: transparent;
97
  --sidebar-foreground: var(--text);
98
  --sidebar-primary: var(--accent);
99
  --sidebar-primary-foreground: var(--accent-ink);
100
  --sidebar-accent: var(--bg-hover);
101
  --sidebar-accent-foreground: var(--text);
102
  --sidebar-border: var(--border);
103
  --sidebar-ring: var(--accent);
104
  font-family: var(--font);
105
  color: var(--text);
106
  background: var(--bg);
107
  font-synthesis: none;
108
  line-height: 1.45;
109
}
110
111
:root[data-theme='light'] {
112
  color-scheme: light;
113
  --bg: #f7f4f2;
114
  --bg-sidebar: transparent;
115
  --bg-elevated: rgb(255 255 255 / 78%);
116
  --bg-card: transparent;
117
  --bg-hover: rgb(240 75 45 / 8%);
118
  --bg-input: #ffffff;
119
  --bg-well: rgb(22 14 12 / 3%);
120
  --border: rgb(22 14 12 / 8%);
121
  --border-strong: rgb(22 14 12 / 14%);
122
  --text: #16110f;
123
  --text-muted: #6b625d;
124
  --text-faint: #8a807a;
125
  --accent-dim: rgb(240 75 45 / 10%);
126
  --accent-line: rgb(240 75 45 / 28%);
127
  --live: #168a4d;
128
  --live-dim: rgb(22 138 77 / 10%);
129
  --warn-dim: rgb(229 154 26 / 12%);
130
  --warn-line: rgb(229 154 26 / 26%);
131
  --danger-dim: rgb(196 31 40 / 10%);
132
  --danger-line: rgb(196 31 40 / 22%);
133
  --glow-a: rgb(240 75 45 / 14%);
134
  --glow-b: rgb(240 75 45 / 6%);
135
  --dot: rgb(240 75 45 / 5%);
136
  --shadow: none;
137
  --popover: #ffffff;
138
}
139
140
* {
141
  box-sizing: border-box;
142
}
143
144
html,
145
body {
146
  min-height: 100%;
147
}
148
149
body {
150
  margin: 0;
151
  min-width: 320px;
152
  background: var(--bg);
153
}
154
155
::selection {
156
  color: var(--accent-ink);
157
  background: var(--accent);
158
}
159
160
button,
161
input,
162
select,
163
textarea {
164
  font: inherit;
165
}
166
167
button,
168
a,
169
input,
170
select,
171
textarea {
172
  outline: none;
173
}
174
175
:focus-visible {
176
  outline: 2px solid var(--accent);
177
  outline-offset: 2px;
178
}
179
180
[data-slot]:focus-visible {
181
  outline: none;
182
}
183
184
.skipLink {
185
  position: absolute;
186
  top: 8px;
187
  left: 8px;
188
  z-index: 20;
189
  padding: 8px 12px;
190
  border-radius: var(--radius-sm);
191
  color: var(--accent-ink);
192
  background: var(--accent);
193
  font-size: 13px;
194
  font-weight: 600;
195
  text-decoration: none;
196
  transform: translateY(-140%);
197
}
198
199
.skipLink:focus {
200
  transform: none;
201
}
202
203
.eyebrow {
204
  margin: 0;
205
  color: var(--text-faint);
206
  font: 500 11px/1.2 var(--mono);
207
  letter-spacing: 0.14em;
208
  text-transform: uppercase;
209
}
210
211
.eyebrow::before {
212
  color: var(--accent);
213
  content: '// ';
214
}
215
216
.mark {
217
  display: grid;
218
  width: 30px;
219
  height: 30px;
220
  place-items: center;
221
  border-radius: 8px;
222
  color: #fff;
223
  background: var(--accent);
224
  font: 600 10px/1 var(--mono);
225
}
226
227
.appInset {
228
  background: transparent;
229
}
230
231
.appTopbar {
232
  display: flex;
233
  align-items: center;
234
  gap: 8px;
235
  padding: 14px 24px 0;
236
}
237
238
.commandKbd {
239
  margin-left: auto;
240
  padding: 1px 5px;
241
  border: 1px solid var(--border);
242
  border-radius: 0;
243
  color: var(--text-faint);
244
  font: 500 10px/1.4 var(--mono);
245
}
246
247
@media (max-width: 640px) {
248
  .commandKbd {
249
    display: none;
250
  }
251
}
252
253
.brand {
254
  display: flex;
255
  align-items: center;
256
  gap: 10px;
257
}
258
259
.brand strong {
260
  font-size: 14px;
261
  font-weight: 600;
262
  letter-spacing: -0.03em;
263
}
264
265
.navRule {
266
  display: block;
267
  height: 1px;
268
  margin: 8px 10px;
269
  background: var(--border);
270
}
271
272
.ghostButton {
273
  display: flex;
274
  align-items: center;
275
  gap: 10px;
276
  width: 100%;
277
  margin-top: 16px;
278
  padding: 9px 2px;
279
  border: 0;
280
  border-radius: 0;
281
  color: var(--text-muted);
282
  background: transparent;
283
  font-size: 12px;
284
  cursor: pointer;
285
}
286
287
.ghostButton:hover,
288
.secondary:hover {
289
  background: var(--bg-hover);
290
}
291
292
.ghostButton svg {
293
  width: 16px;
294
  height: 16px;
295
  flex: none;
296
}
297
298
.sidebarFoot {
299
  display: grid;
300
  gap: 10px;
301
  margin-top: auto;
302
  padding-top: 12px;
303
}
304
305
.privacyStamp {
306
  display: flex;
307
  align-items: center;
308
  gap: 8px;
309
  padding: 0 4px;
310
  border: 0;
311
  background: transparent;
312
}
313
314
.privacyStamp small {
315
  color: var(--text-faint);
316
  font-size: 11px;
317
  line-height: 1.3;
318
}
319
320
.liveDot {
321
  width: 6px;
322
  height: 6px;
323
  flex: none;
324
  border-radius: 0;
325
  background: var(--live);
326
}
327
328
.sidebarTools {
329
  display: flex;
330
  align-items: center;
331
  gap: 6px;
332
}
333
334
.sidebarTools .iconButton {
335
  width: 32px;
336
  height: 32px;
337
  flex: none;
338
}
339
340
.account {
341
  display: flex;
342
  min-width: 0;
343
  flex: 1;
344
  align-items: center;
345
  gap: 8px;
346
  padding: 4px;
347
  border: 0;
348
  border-radius: 0;
349
  color: var(--text);
350
  background: transparent;
351
  text-align: left;
352
  cursor: pointer;
353
}
354
355
.account:hover {
356
  background: var(--bg-hover);
357
}
358
359
.account > span {
360
  display: grid;
361
  width: 28px;
362
  height: 28px;
363
  place-items: center;
364
  border: 0;
365
  border-radius: 50%;
366
  color: var(--accent-ink);
367
  background: var(--accent);
368
  font: 600 10px/1 var(--mono);
369
}
370
371
.account > div {
372
  display: flex;
373
  min-width: 0;
374
  flex: 1;
375
  flex-direction: column;
376
  gap: 2px;
377
}
378
379
.account strong,
380
.account small {
381
  overflow: hidden;
382
  text-overflow: ellipsis;
383
  white-space: nowrap;
384
}
385
386
.account strong {
387
  font-size: 12px;
388
}
389
390
.account small {
391
  color: var(--text-faint);
392
  font-size: 11px;
393
}
394
395
.account > b {
396
  color: var(--text-faint);
397
  font-size: 11px;
398
  font-weight: 500;
399
}
400
401
.mobileActions {
402
  display: flex;
403
  align-items: center;
404
  gap: 8px;
405
}
406
407
.iconButton {
408
  display: grid;
409
  width: 36px;
410
  height: 36px;
411
  place-items: center;
412
  border: 1px solid var(--border);
413
  border-radius: 0;
414
  color: var(--text);
415
  background: transparent;
416
  cursor: pointer;
417
}
418
419
.iconButton svg {
420
  width: 16px;
421
  height: 16px;
422
}
423
424
.appMain {
425
  width: 100%;
426
  max-width: 1040px;
427
  padding: 24px 40px 80px;
428
}
429
430
.appMain > * {
431
  animation: none;
432
}
433
434
.previewBanner {
435
  margin-bottom: 22px;
436
  padding: 0 0 14px;
437
  border: 0;
438
  border-bottom: 1px solid var(--accent-line);
439
  border-radius: 0;
440
  color: var(--accent-soft, var(--text));
441
  background: transparent;
442
  font: 500 12px/1.4 var(--mono);
443
}
444
445
.pageHead {
446
  display: flex;
447
  align-items: flex-end;
448
  justify-content: space-between;
449
  gap: 16px;
450
  padding-bottom: 18px;
451
  border-bottom: 1px solid var(--border);
452
}
453
454
.pageHead h1 {
455
  max-width: 720px;
456
  margin: 0;
457
  font-size: clamp(26px, 3vw, 34px);
458
  font-weight: 600;
459
  letter-spacing: -0.045em;
460
  line-height: 1.05;
461
}
462
463
.pageHead p.lede {
464
  max-width: 520px;
465
  margin: 6px 0 0;
466
  color: var(--text-muted);
467
  font-size: 13px;
468
  line-height: 1.45;
469
}
470
471
.primary,
472
.secondary {
473
  display: inline-flex;
474
  align-items: center;
475
  gap: 8px;
476
  padding: 10px 16px;
477
  border-radius: var(--radius-sm);
478
  cursor: pointer;
479
  font-size: 13px;
480
  font-weight: 600;
481
}
482
483
.primary {
484
  border: 0;
485
  color: #fff;
486
  background: var(--accent);
487
  box-shadow: none;
488
  transition:
489
    background 0.16s ease,
490
    transform 0.16s ease;
491
}
492
493
.primary:hover {
494
  background: var(--accent-hover);
495
}
496
497
.primary:disabled,
498
.secondary:disabled {
499
  opacity: 0.5;
500
  cursor: not-allowed;
501
}
502
503
.secondary {
504
  border: 1px solid var(--border-strong);
505
  color: var(--text);
506
  background: transparent;
507
}
508
509
.metrics {
510
  display: grid;
511
  grid-template-columns: repeat(4, minmax(0, 1fr));
512
  gap: 12px;
513
  margin: 14px 0 8px;
514
}
515
516
.readiness,
517
.attentionBanner {
518
  display: flex;
519
  align-items: center;
520
  justify-content: space-between;
521
  gap: 16px;
522
  margin: 22px 0 0;
523
  padding: 16px 4px 18px;
524
  border: 0;
525
  border-bottom: 1px solid var(--border);
526
  border-radius: 0;
527
  background: transparent;
528
}
529
530
.readiness.ready {
531
  border-color: var(--border);
532
  background: transparent;
533
}
534
535
.attentionBanner {
536
  width: 100%;
537
  color: inherit;
538
  text-align: left;
539
  cursor: pointer;
540
}
541
542
.readiness > div,
543
.attentionBanner > div {
544
  display: flex;
545
  align-items: center;
546
  gap: 12px;
547
}
548
549
.readiness > div > div,
550
.attentionBanner > div > div {
551
  display: flex;
552
  flex-direction: column;
553
  gap: 3px;
554
}
555
556
.readiness strong,
557
.attentionBanner strong {
558
  font-size: 14px;
559
}
560
561
.readiness small,
562
.attentionBanner small {
563
  color: var(--text-muted);
564
  font-size: 12px;
565
}
566
567
.statusIndex {
568
  flex: none;
569
  color: var(--accent);
570
  font: 500 11px/1 var(--mono);
571
  letter-spacing: 0.08em;
572
}
573
574
.readiness .statusIndex {
575
  color: var(--warn);
576
}
577
578
.metric {
579
  display: flex;
580
  min-height: 0;
581
  flex-direction: column;
582
  padding: 4px 8px 4px 0;
583
  border: 0;
584
  border-radius: 0;
585
  background: transparent;
586
}
587
588
.metric::before {
589
  width: 20px;
590
  height: 2px;
591
  margin-bottom: 10px;
592
  border-radius: 99px;
593
  background: var(--accent);
594
  content: '';
595
}
596
597
.metric.warn::before {
598
  background: var(--warn);
599
}
600
601
.metric > span {
602
  color: var(--text-faint);
603
  font: 11px/1.3 var(--mono);
604
  letter-spacing: 0.04em;
605
  text-transform: uppercase;
606
}
607
608
.metric > strong {
609
  margin: 0 0 5px;
610
  font: 500 28px/1 var(--mono);
611
  letter-spacing: -0.05em;
612
}
613
614
.metric > small {
615
  color: var(--text-muted);
616
  font-size: 12px;
617
}
618
619
.metric.warn > strong {
620
  color: var(--warn);
621
}
622
623
.contentGrid,
624
.connectLayout {
625
  display: grid;
626
  grid-template-columns: 1.25fr 1fr;
627
  gap: 36px;
628
}
629
630
.setupRequests {
631
  margin: 22px 0;
632
  padding: 8px 0 4px;
633
  border: 0;
634
  border-radius: 0;
635
  background: transparent;
636
}
637
638
.setupRequests > div:first-child h2 {
639
  margin: 8px 0 4px;
640
  font-size: 20px;
641
  letter-spacing: -0.03em;
642
}
643
644
.setupRequests > div:first-child > p:last-child {
645
  margin: 0 0 16px;
646
  color: var(--text-muted);
647
  font-size: 13px;
648
}
649
650
.setupRequest {
651
  display: flex;
652
  align-items: center;
653
  justify-content: space-between;
654
  gap: 16px;
655
  padding: 16px 0;
656
  border: 0;
657
  border-bottom: 1px solid var(--border);
658
  border-radius: 0;
659
  background: transparent;
660
}
661
662
.setupRequest + .setupRequest {
663
  margin-top: 10px;
664
}
665
666
.setupRequest > div:first-child {
667
  display: flex;
668
  min-width: 0;
669
  flex-direction: column;
670
  gap: 4px;
671
}
672
673
.setupRequest strong {
674
  font-size: 14px;
675
}
676
677
.setupRequest small {
678
  color: var(--text-muted);
679
  font: 12px/1.4 var(--mono);
680
}
681
682
.decisionButtons {
683
  display: flex;
684
  flex: none;
685
  gap: 8px;
686
}
687
688
.setupRequests > .loginError {
689
  margin-top: 10px;
690
}
691
692
.panel {
693
  min-width: 0;
694
  padding: 6px 0 0;
695
  border: 0;
696
  border-radius: 0;
697
  background: transparent;
698
}
699
700
.panelHead {
701
  padding-bottom: 14px;
702
  border-bottom: 1px solid var(--border);
703
}
704
705
.panelHead h2 {
706
  margin: 0;
707
  font-size: 20px;
708
  font-weight: 600;
709
  letter-spacing: -0.03em;
710
}
711
712
.panelHead p {
713
  margin: 4px 0 0;
714
  color: var(--text-muted);
715
  font-size: 13px;
716
}
717
718
.toolbar {
719
  display: flex;
720
  flex-wrap: wrap;
721
  align-items: center;
722
  gap: 10px;
723
  margin: 16px 0 8px;
724
}
725
726
.searchField {
727
  min-width: 220px;
728
  flex: 1;
729
  padding: 10px 0;
730
  border: 0;
731
  border-bottom: 1px solid var(--border-strong);
732
  border-radius: 0;
733
  color: var(--text);
734
  background: transparent;
735
  font-size: 13px;
736
}
737
738
.filterRow {
739
  display: flex;
740
  flex-wrap: wrap;
741
  gap: 6px;
742
}
743
744
.filterChip {
745
  padding: 6px 0;
746
  border: 0;
747
  border-bottom: 1px solid transparent;
748
  border-radius: 0;
749
  color: var(--text-muted);
750
  background: transparent;
751
  font: 500 11px/1.3 var(--mono);
752
  letter-spacing: 0.06em;
753
  text-transform: lowercase;
754
  cursor: pointer;
755
}
756
757
.filterChip.active,
758
.filterChip:hover {
759
  color: var(--text);
760
  background: transparent;
761
}
762
763
.filterChip.active {
764
  border-color: var(--accent);
765
  color: var(--text);
766
  background: transparent;
767
}
768
769
.historyRow {
770
  display: flex;
771
  align-items: center;
772
  gap: 12px;
773
  padding: 13px 4px;
774
  border-bottom: 1px solid var(--border);
775
}
776
777
.historyRow:last-child {
778
  border-bottom: 0;
779
}
780
781
.historyRow:hover {
782
  background: transparent;
783
}
784
785
.historyRow > div {
786
  display: flex;
787
  min-width: 0;
788
  flex: 1;
789
  flex-direction: column;
790
  gap: 3px;
791
}
792
793
.historyRow strong {
794
  font-size: 13px;
795
  font-weight: 600;
796
  text-transform: capitalize;
797
}
798
799
.historyRow small {
800
  overflow: hidden;
801
  color: var(--text-muted);
802
  font: 12px/1.4 var(--mono);
803
  text-overflow: ellipsis;
804
  white-space: nowrap;
805
}
806
807
.historyRow > b {
808
  color: var(--text-faint);
809
  font: 11px/1.3 var(--mono);
810
  text-transform: uppercase;
811
}
812
813
.eventDot {
814
  width: 6px;
815
  height: 6px;
816
  flex: none;
817
  border-radius: 0;
818
  background: var(--live);
819
}
820
821
.eventDot.policy_warning,
822
.eventDot.objection {
823
  background: var(--warn);
824
}
825
826
.eventDot.policy_violation,
827
.eventDot.dispute {
828
  background: var(--danger);
829
}
830
831
.eventDot.receipt {
832
  background: var(--info);
833
}
834
835
.textButton {
836
  margin-top: 14px;
837
  padding: 0;
838
  border: 0;
839
  color: var(--accent);
840
  background: transparent;
841
  font-size: 13px;
842
  font-weight: 600;
843
  cursor: pointer;
844
}
845
846
.empty {
847
  display: grid;
848
  min-height: 220px;
849
  place-items: center;
850
  align-content: center;
851
  padding: 28px;
852
  text-align: center;
853
}
854
855
.empty > span,
856
.empty > svg {
857
  display: block;
858
  width: 18px;
859
  height: 18px;
860
  margin-bottom: 12px;
861
  color: var(--accent);
862
}
863
864
.empty strong {
865
  font-size: 15px;
866
}
867
868
.empty p {
869
  max-width: 420px;
870
  margin: 8px 0 16px;
871
  color: var(--text-muted);
872
  font-size: 13px;
873
  line-height: 1.55;
874
}
875
876
.profile {
877
  padding: 16px 0;
878
  border-bottom: 1px solid var(--border);
879
}
880
881
.profile:last-child {
882
  border-bottom: 0;
883
}
884
885
.profile > div:first-child {
886
  display: flex;
887
  justify-content: space-between;
888
  gap: 12px;
889
  margin-bottom: 12px;
890
}
891
892
.profile > div:first-child strong {
893
  font-size: 13px;
894
}
895
896
.profile > div:first-child small {
897
  color: var(--text-muted);
898
  font: 12px/1.3 var(--mono);
899
}
900
901
.meter {
902
  display: grid;
903
  grid-template-columns: 96px 1fr 40px;
904
  align-items: center;
905
  gap: 10px;
906
  margin: 8px 0;
907
  color: var(--text-muted);
908
  font: 11px/1.3 var(--mono);
909
}
910
911
.meter i {
912
  height: 1px;
913
  overflow: hidden;
914
  border-radius: 0;
915
  background: var(--border);
916
}
917
918
.meter i b {
919
  display: block;
920
  height: 100%;
921
  background: var(--accent);
922
}
923
924
.meter strong {
925
  text-align: right;
926
}
927
928
.agentGrid {
929
  display: grid;
930
  grid-template-columns: repeat(2, minmax(0, 1fr));
931
  gap: 16px;
932
  margin-top: 18px;
933
}
934
935
.agentGrid > .empty {
936
  grid-column: 1 / -1;
937
  border: 0;
938
  border-radius: 0;
939
  background: transparent;
940
}
941
942
.agentCard {
943
  display: flex;
944
  min-height: 230px;
945
  flex-direction: column;
946
  padding: 8px 4px 12px;
947
  border: 0;
948
  border-top: 1px solid var(--border);
949
  border-radius: 0;
950
  background: transparent;
951
}
952
953
.agentTop {
954
  display: flex;
955
  align-items: flex-start;
956
  justify-content: space-between;
957
  gap: 12px;
958
}
959
960
.agentGlyph {
961
  display: grid;
962
  width: 28px;
963
  height: 28px;
964
  place-items: center;
965
  border: 0;
966
  border-radius: 0;
967
  color: var(--accent);
968
  background: transparent;
969
}
970
971
.agentGlyph svg {
972
  width: 18px;
973
  height: 18px;
974
}
975
976
.agentBadges {
977
  display: flex;
978
  flex-wrap: wrap;
979
  justify-content: flex-end;
980
  gap: 6px;
981
}
982
983
.agentTop b {
984
  padding: 0;
985
  border: 0;
986
  border-radius: 0;
987
  color: var(--text-muted);
988
  background: transparent;
989
  font: 11px/1.3 var(--mono);
990
  letter-spacing: 0.04em;
991
  text-transform: lowercase;
992
}
993
994
.agentTop b.bad {
995
  color: var(--danger);
996
  background: transparent;
997
}
998
999
.agentTop .readyBadge,
1000
.agentTop .onlineBadge {
1001
  color: var(--live);
1002
  background: transparent;
1003
}
1004
1005
:root[data-theme='dark'] .agentTop .readyBadge,
1006
:root[data-theme='dark'] .agentTop .onlineBadge {
1007
  color: var(--live);
1008
}
1009
1010
.agentTop .needsBadge {
1011
  color: var(--warn);
1012
  background: transparent;
1013
}
1014
1015
.agentTop .offlineBadge {
1016
  color: var(--text-faint);
1017
}
1018
1019
.agentCard h2 {
1020
  margin: 18px 0 4px;
1021
  font-size: 18px;
1022
  letter-spacing: -0.03em;
1023
}
1024
1025
.agentCard p,
1026
.agentCard > small {
1027
  color: var(--text-muted);
1028
  font-size: 13px;
1029
}
1030
1031
.agentCard > small {
1032
  display: block;
1033
  margin-top: 10px;
1034
}
1035
1036
.agentPublicLinks {
1037
  display: flex;
1038
  flex-wrap: wrap;
1039
  gap: 12px;
1040
  margin-top: 10px;
1041
}
1042
1043
.agentPublicLinks a {
1044
  color: var(--accent);
1045
  font-size: 13px;
1046
  font-weight: 600;
1047
  text-decoration: none;
1048
}
1049
1050
.agentPublicLinks a:hover {
1051
  text-decoration: underline;
1052
}
1053
1054
.agentCard > button,
1055
.agentCard > .agentActions {
1056
  width: 100%;
1057
  margin-top: 16px;
1058
}
1059
1060
.automationSummary {
1061
  display: flex;
1062
  flex-wrap: wrap;
1063
  gap: 6px;
1064
  margin-top: 14px;
1065
}
1066
1067
.automationSummary span,
1068
.automationPreview span {
1069
  padding: 5px 0;
1070
  border: 0;
1071
  border-radius: 0;
1072
  color: var(--text-muted);
1073
  background: transparent;
1074
  font: 11px/1.3 var(--mono);
1075
}
1076
1077
.automationForm {
1078
  display: grid;
1079
  gap: 12px;
1080
  margin-top: 16px;
1081
  padding-top: 16px;
1082
  border-top: 1px solid var(--border);
1083
}
1084
1085
.runtimeBox {
1086
  display: grid;
1087
  gap: 10px;
1088
  margin-top: 16px;
1089
  padding: 14px 0 0;
1090
  border: 0;
1091
  border-top: 1px solid var(--border);
1092
  border-radius: 0;
1093
  background: transparent;
1094
}
1095
1096
.runtimeBox > div:first-child {
1097
  display: flex;
1098
  align-items: center;
1099
  justify-content: space-between;
1100
  gap: 12px;
1101
}
1102
1103
.runtimeBox p,
1104
.runtimeBox small {
1105
  margin: 0;
1106
  color: var(--text-muted);
1107
  font-size: 12px;
1108
  line-height: 1.5;
1109
}
1110
1111
.runtimeBox input,
1112
.automationForm input,
1113
.automationForm select,
1114
.setting input,
1115
.setting select {
1116
  width: 100%;
1117
  padding: 10px 0;
1118
  border: 0;
1119
  border-bottom: 1px solid var(--border-strong);
1120
  border-radius: 0;
1121
  color: var(--text);
1122
  background: transparent;
1123
  font-size: 13px;
1124
}
1125
1126
.runtimeBox input:focus,
1127
.automationForm input:focus,
1128
.automationForm select:focus,
1129
.setting input:focus,
1130
.setting select:focus,
1131
.searchField:focus {
1132
  border-color: var(--accent);
1133
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1134
}
1135
1136
.runtimeLive,
1137
.runtimeMissing {
1138
  font: 11px/1.3 var(--mono);
1139
}
1140
1141
.runtimeLive {
1142
  color: var(--live);
1143
}
1144
1145
.runtimeMissing {
1146
  color: var(--warn);
1147
}
1148
1149
.accessTokenBox {
1150
  display: grid;
1151
  gap: 12px;
1152
  margin-top: 12px;
1153
  padding: 14px 0 0;
1154
  border: 0;
1155
  border-top: 1px solid var(--border);
1156
  border-radius: 0;
1157
  background: transparent;
1158
}
1159
1160
.accessTokenHead > div {
1161
  display: flex;
1162
  align-items: center;
1163
  justify-content: space-between;
1164
  gap: 12px;
1165
}
1166
1167
.accessTokenHead span {
1168
  color: var(--accent);
1169
  font: 11px/1.3 var(--mono);
1170
}
1171
1172
.accessTokenHead p {
1173
  margin: 8px 0 0;
1174
  color: var(--text-muted);
1175
  font-size: 12px;
1176
  line-height: 1.5;
1177
}
1178
1179
.tokenList {
1180
  display: grid;
1181
  border-top: 1px solid var(--border);
1182
}
1183
1184
.tokenList > div {
1185
  display: flex;
1186
  align-items: center;
1187
  justify-content: space-between;
1188
  gap: 12px;
1189
  padding-top: 10px;
1190
}
1191
1192
.tokenList span {
1193
  display: grid;
1194
  min-width: 0;
1195
  gap: 3px;
1196
}
1197
1198
.tokenList small {
1199
  color: var(--text-muted);
1200
  font: 10px/1.4 var(--mono);
1201
}
1202
1203
.automationForm label {
1204
  display: grid;
1205
  gap: 6px;
1206
  color: var(--text-muted);
1207
  font-size: 12px;
1208
}
1209
1210
.automationForm .checkControl {
1211
  display: flex;
1212
  grid-template-columns: none;
1213
  align-items: center;
1214
  gap: 8px;
1215
}
1216
1217
.automationForm .checkControl input {
1218
  width: 15px;
1219
  height: 15px;
1220
  accent-color: var(--accent);
1221
}
1222
1223
.agentActions {
1224
  display: flex;
1225
  justify-content: flex-end;
1226
  gap: 8px;
1227
}
1228
1229
.agentManagementActions {
1230
  justify-content: space-between;
1231
}
1232
1233
.dangerButton {
1234
  border-color: var(--danger-line);
1235
  color: var(--danger);
1236
  background: var(--danger-dim);
1237
}
1238
1239
.dangerButton:hover:not(:disabled) {
1240
  border-color: var(--danger);
1241
}
1242
1243
.automationPreview {
1244
  display: flex;
1245
  flex-wrap: wrap;
1246
  gap: 6px;
1247
  margin-top: 8px;
1248
}
1249
1250
.autoAccepted {
1251
  color: var(--live) !important;
1252
}
1253
1254
.tags {
1255
  display: flex;
1256
  flex-wrap: wrap;
1257
  gap: 6px;
1258
  margin-top: 12px;
1259
}
1260
1261
.tags span {
1262
  padding: 4px 0;
1263
  border: 0;
1264
  border-radius: 0;
1265
  color: var(--text-muted);
1266
  font: 11px/1.3 var(--mono);
1267
}
1268
1269
.tags span + span::before,
1270
.automationSummary span + span::before,
1271
.automationPreview span + span::before {
1272
  margin-right: 8px;
1273
  color: var(--accent);
1274
  content: '/';
1275
}
1276
1277
.notice {
1278
  margin: 18px 0;
1279
  padding: 4px 0 16px;
1280
  border: 0;
1281
  border-bottom: 1px solid var(--border);
1282
  color: var(--text-muted);
1283
  background: transparent;
1284
  font-size: 13px;
1285
}
1286
1287
.notice strong {
1288
  margin-right: 6px;
1289
  color: var(--text);
1290
}
1291
1292
.connectionTypePicker {
1293
  display: grid;
1294
  grid-template-columns: repeat(2, minmax(0, 1fr));
1295
  gap: 10px;
1296
  margin-top: 18px;
1297
}
1298
1299
.connectionTypePicker button {
1300
  display: grid;
1301
  gap: 5px;
1302
  padding: 14px 4px 16px;
1303
  border: 0;
1304
  border-top: 2px solid var(--border);
1305
  border-radius: 0;
1306
  color: var(--text);
1307
  background: transparent;
1308
  font-size: 14px;
1309
  font-weight: 600;
1310
  text-align: left;
1311
  cursor: pointer;
1312
}
1313
1314
.connectionTypePicker button.active {
1315
  border-color: var(--accent);
1316
  background: transparent;
1317
}
1318
1319
.connectionTypePicker small {
1320
  color: var(--text-muted);
1321
  font-size: 12px;
1322
  font-weight: 400;
1323
}
1324
1325
.connectLayout {
1326
  margin-top: 18px;
1327
}
1328
1329
.providerForm {
1330
  display: grid;
1331
  grid-template-columns: repeat(2, minmax(0, 1fr));
1332
  gap: 12px;
1333
  margin-top: 18px;
1334
}
1335
1336
.providerForm label,
1337
.providerResult label {
1338
  display: grid;
1339
  gap: 6px;
1340
  color: var(--text-muted);
1341
  font-size: 12px;
1342
}
1343
1344
.providerForm input,
1345
.providerForm select,
1346
.providerForm textarea {
1347
  width: 100%;
1348
  padding: 10px 0;
1349
  border: 0;
1350
  border-bottom: 1px solid var(--border-strong);
1351
  border-radius: 0;
1352
  color: var(--text);
1353
  background: transparent;
1354
  font: inherit;
1355
}
1356
1357
.providerForm textarea {
1358
  min-height: 82px;
1359
  resize: vertical;
1360
}
1361
1362
.providerForm .fullWidth {
1363
  grid-column: 1 / -1;
1364
}
1365
1366
.providerSubmit {
1367
  display: flex;
1368
  align-items: center;
1369
  justify-content: space-between;
1370
  gap: 12px;
1371
}
1372
1373
.providerSubmit p {
1374
  margin: 0;
1375
  color: var(--text-muted);
1376
  font-size: 12px;
1377
}
1378
1379
.providerResult {
1380
  display: grid;
1381
  gap: 14px;
1382
  margin-top: 18px;
1383
}
1384
1385
.providerResult code {
1386
  padding: 11px 0;
1387
  border: 0;
1388
  border-bottom: 1px solid var(--border);
1389
  border-radius: 0;
1390
  color: var(--accent);
1391
  background: transparent;
1392
  overflow-wrap: anywhere;
1393
  user-select: all;
1394
}
1395
1396
.successBanner {
1397
  display: grid;
1398
  gap: 3px;
1399
  padding: 12px 0;
1400
  border: 0;
1401
  border-radius: 0;
1402
  background: transparent;
1403
}
1404
1405
.successBanner span {
1406
  color: var(--text-muted);
1407
  font: 11px/1.4 var(--mono);
1408
  overflow-wrap: anywhere;
1409
}
1410
1411
.providerNotice {
1412
  margin-bottom: 0;
1413
}
1414
1415
.endpoint {
1416
  display: flex;
1417
  gap: 8px;
1418
  margin: 20px 0;
1419
}
1420
1421
.endpoint code {
1422
  overflow: auto;
1423
  flex: 1;
1424
  padding: 12px 0;
1425
  border: 0;
1426
  border-bottom: 1px solid var(--border);
1427
  border-radius: 0;
1428
  color: var(--accent);
1429
  background: transparent;
1430
  font: 13px/1.4 var(--mono);
1431
  white-space: nowrap;
1432
}
1433
1434
.endpoint button {
1435
  padding: 0 4px;
1436
  border: 0;
1437
  border-radius: 0;
1438
  color: var(--accent);
1439
  background: transparent;
1440
  font-weight: 600;
1441
  cursor: pointer;
1442
}
1443
1444
.connectLayout ol {
1445
  margin: 8px 0 0;
1446
  padding-left: 22px;
1447
  color: var(--text-muted);
1448
  font-size: 14px;
1449
  line-height: 1.7;
1450
}
1451
1452
.connectSteps {
1453
  display: grid;
1454
  gap: 12px;
1455
  margin-top: 18px;
1456
}
1457
1458
.connectStep {
1459
  display: grid;
1460
  grid-template-columns: 28px 1fr;
1461
  gap: 12px;
1462
  color: var(--text-muted);
1463
  font-size: 14px;
1464
}
1465
1466
.connectStep b {
1467
  display: grid;
1468
  width: 28px;
1469
  height: 28px;
1470
  place-items: center;
1471
  border-radius: 0;
1472
  color: var(--accent);
1473
  background: transparent;
1474
  font: 500 11px/1 var(--mono);
1475
}
1476
1477
.checkList {
1478
  margin: 16px 0 0;
1479
  padding: 0;
1480
  list-style: none;
1481
}
1482
1483
.checkList li {
1484
  padding: 11px 0;
1485
  border-bottom: 1px solid var(--border);
1486
  color: var(--text-muted);
1487
  font-size: 14px;
1488
}
1489
1490
.checkList li:last-child {
1491
  border-bottom: 0;
1492
}
1493
1494
.checkList li::before {
1495
  content: '✓';
1496
  margin-right: 10px;
1497
  color: var(--accent);
1498
}
1499
1500
.settingsCard {
1501
  margin-top: 10px;
1502
  border: 0;
1503
  border-radius: 0;
1504
  background: transparent;
1505
}
1506
1507
.setting {
1508
  display: grid;
1509
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1510
  align-items: center;
1511
  gap: 24px;
1512
  padding: 22px 0;
1513
  border-bottom: 1px solid var(--border);
1514
}
1515
1516
.setting strong {
1517
  font-size: 14px;
1518
}
1519
1520
.setting p {
1521
  max-width: 580px;
1522
  margin: 5px 0 0;
1523
  color: var(--text-muted);
1524
  font-size: 13px;
1525
  line-height: 1.5;
1526
}
1527
1528
.locked {
1529
  float: right;
1530
  color: var(--text-faint);
1531
  font: 12px/1.3 var(--mono);
1532
}
1533
1534
.toggle {
1535
  position: relative;
1536
  display: block;
1537
  width: 44px;
1538
  height: 26px;
1539
  margin-left: auto;
1540
  padding: 0;
1541
  border: 1px solid var(--border-strong);
1542
  border-radius: 99px;
1543
  background: var(--bg-well);
1544
  cursor: pointer;
1545
}
1546
1547
.toggle span {
1548
  position: absolute;
1549
  top: 4px;
1550
  left: 4px;
1551
  width: 16px;
1552
  height: 16px;
1553
  border-radius: 50%;
1554
  background: var(--text-faint);
1555
  transition: transform 0.18s ease;
1556
}
1557
1558
.toggle.on {
1559
  border-color: var(--accent);
1560
  background: var(--accent);
1561
}
1562
1563
.toggle.on span {
1564
  left: 4px;
1565
  background: #fff;
1566
  transform: translateX(18px);
1567
}
1568
1569
.saveRow {
1570
  display: flex;
1571
  align-items: center;
1572
  gap: 12px;
1573
  padding: 22px 0;
1574
}
1575
1576
.saveRow span {
1577
  color: var(--accent);
1578
  font-size: 13px;
1579
}
1580
1581
.loginPage {
1582
  display: grid;
1583
  grid-template-columns: 1.05fr 0.95fr;
1584
  min-height: 100vh;
1585
}
1586
1587
.loginPitch {
1588
  display: flex;
1589
  flex-direction: column;
1590
  justify-content: space-between;
1591
  padding: 48px 7vw;
1592
  background: transparent;
1593
}
1594
1595
.loginPitch h1 {
1596
  max-width: 680px;
1597
  margin: 10px 0 14px;
1598
  font-size: clamp(40px, 5.4vw, 72px);
1599
  font-weight: 600;
1600
  letter-spacing: -0.06em;
1601
  line-height: 0.94;
1602
}
1603
1604
.loginPitch > div > p:last-child {
1605
  max-width: 540px;
1606
  color: var(--text-muted);
1607
  font-size: 16px;
1608
  line-height: 1.65;
1609
}
1610
1611
.launchBadge {
1612
  display: inline-flex;
1613
  width: fit-content;
1614
  margin: 0 0 18px;
1615
  padding: 5px 10px;
1616
  border: 1px solid var(--accent-line);
1617
  border-radius: 999px;
1618
  color: var(--accent);
1619
  background: var(--accent-dim);
1620
  font: 500 11px/1.3 var(--mono);
1621
}
1622
1623
.loginProof {
1624
  display: grid;
1625
  grid-template-columns: auto 1fr;
1626
  gap: 10px 12px;
1627
  color: var(--text-muted);
1628
  font: 12px/1.3 var(--mono);
1629
  text-transform: uppercase;
1630
}
1631
1632
.loginProof span {
1633
  color: var(--accent);
1634
}
1635
1636
.loginCard {
1637
  display: flex;
1638
  flex-direction: column;
1639
  justify-content: center;
1640
  padding: 8vw;
1641
  gap: 28px;
1642
  border-left: 1px solid var(--border);
1643
  background: transparent;
1644
}
1645
1646
.loginCard h2 {
1647
  margin: 6px 0;
1648
  font-size: 28px;
1649
  font-weight: 600;
1650
  letter-spacing: -0.04em;
1651
}
1652
1653
.socialButtons {
1654
  display: grid;
1655
  gap: 10px;
1656
}
1657
1658
.socialButtons button {
1659
  display: flex;
1660
  align-items: center;
1661
  justify-content: center;
1662
  gap: 10px;
1663
  width: 100%;
1664
  padding: 13px;
1665
  border: 1px solid var(--border-strong);
1666
  border-radius: var(--radius-sm);
1667
  color: var(--text);
1668
  background: transparent;
1669
  font-size: 14px;
1670
  font-weight: 600;
1671
  cursor: pointer;
1672
}
1673
1674
.socialButtons button:first-child {
1675
  border-color: transparent;
1676
  color: var(--accent-ink);
1677
  background: var(--accent);
1678
  box-shadow: none;
1679
}
1680
1681
.socialButtons button:hover {
1682
  border-color: var(--accent);
1683
  background: var(--accent-dim);
1684
}
1685
1686
.socialButtons button:first-child:hover {
1687
  color: var(--accent-ink);
1688
  background: var(--accent-hover);
1689
}
1690
1691
.socialButtons svg {
1692
  width: 18px;
1693
  height: 18px;
1694
}
1695
1696
.loginError,
1697
.errorBar {
1698
  padding: 11px 0;
1699
  border: 0;
1700
  border-radius: 0;
1701
  color: var(--danger);
1702
  background: transparent;
1703
  font-size: 13px;
1704
}
1705
1706
.loginCard > div > p:last-child,
1707
.loginCard > small {
1708
  color: var(--text-muted);
1709
  font-size: 13px;
1710
  line-height: 1.55;
1711
}
1712
1713
.loading {
1714
  display: grid;
1715
  min-height: 100vh;
1716
  place-items: center;
1717
  align-content: center;
1718
  gap: 14px;
1719
  color: var(--text-muted);
1720
  font: 12px/1.3 var(--mono);
1721
  text-transform: uppercase;
1722
}
1723
1724
.loading.compact {
1725
  min-height: 50vh;
1726
}
1727
1728
.spinner {
1729
  width: 22px;
1730
  height: 22px;
1731
  border: 2px solid var(--border);
1732
  border-top-color: var(--accent);
1733
  border-radius: 50%;
1734
  animation: spin 0.8s linear infinite;
1735
}
1736
1737
.errorBar {
1738
  margin-bottom: 14px;
1739
}
1740
1741
@keyframes spin {
1742
  to {
1743
    transform: rotate(360deg);
1744
  }
1745
}
1746
1747
@keyframes fadeUp {
1748
  from {
1749
    opacity: 0;
1750
    transform: translateY(8px);
1751
  }
1752
  to {
1753
    opacity: 1;
1754
    transform: none;
1755
  }
1756
}
1757
1758
@keyframes pulse {
1759
  0%,
1760
  100% {
1761
    opacity: 1;
1762
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
1763
  }
1764
  50% {
1765
    opacity: 0.55;
1766
    box-shadow: 0 0 0 6px transparent;
1767
  }
1768
}
1769
1770
.conversationLayout {
1771
  display: grid;
1772
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1773
  gap: 16px;
1774
}
1775
1776
.threadList,
1777
.conversationDetail,
1778
.messageList {
1779
  display: grid;
1780
  gap: 10px;
1781
}
1782
1783
.threadList > button {
1784
  display: flex;
1785
  align-items: center;
1786
  justify-content: space-between;
1787
  width: 100%;
1788
  padding: 12px 2px;
1789
  border: 0;
1790
  border-bottom: 1px solid var(--border);
1791
  border-radius: 0;
1792
  color: var(--text);
1793
  background: transparent;
1794
  text-align: left;
1795
  cursor: pointer;
1796
}
1797
1798
.threadList > button.active,
1799
.threadList > button:hover {
1800
  border-color: var(--accent);
1801
  background: transparent;
1802
}
1803
1804
.threadList span,
1805
.threadList small {
1806
  display: block;
1807
}
1808
1809
.threadList small,
1810
.messageList span {
1811
  margin-top: 4px;
1812
  color: var(--text-muted);
1813
  font-size: 11px;
1814
}
1815
1816
.threadList b,
1817
.conversationInsights b {
1818
  color: var(--accent);
1819
  font: 10px/1.2 var(--mono);
1820
}
1821
1822
.conversationInsights {
1823
  padding: 4px 0 12px;
1824
  border: 0;
1825
  border-bottom: 1px solid var(--warn-line);
1826
  border-radius: 0;
1827
  background: transparent;
1828
}
1829
1830
.conversationInsights p {
1831
  margin: 0 0 6px;
1832
  font-size: 12px;
1833
  line-height: 1.5;
1834
}
1835
1836
.conversationInsights p:last-child {
1837
  margin-bottom: 0;
1838
}
1839
1840
.messageList article {
1841
  max-width: 82%;
1842
  padding: 4px 0 12px;
1843
  border: 0;
1844
  border-radius: 0;
1845
  background: transparent;
1846
}
1847
1848
.messageList article.sent {
1849
  justify-self: end;
1850
  border-color: transparent;
1851
  background: transparent;
1852
}
1853
1854
.messageList article p {
1855
  margin: 4px 0;
1856
  white-space: pre-wrap;
1857
}
1858
1859
.replyBox {
1860
  display: grid;
1861
  gap: 8px;
1862
}
1863
1864
.replyBox textarea {
1865
  min-height: 100px;
1866
  padding: 10px 0;
1867
  border: 0;
1868
  border-bottom: 1px solid var(--border-strong);
1869
  border-radius: 0;
1870
  color: var(--text);
1871
  background: transparent;
1872
  resize: vertical;
1873
}
1874
1875
.historyToolbar {
1876
  display: flex;
1877
  flex-wrap: wrap;
1878
  align-items: center;
1879
  gap: 10px;
1880
  margin-bottom: 16px;
1881
}
1882
1883
.journeyLayout {
1884
  display: grid;
1885
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1886
  gap: 16px;
1887
  align-items: start;
1888
}
1889
1890
.journeyList {
1891
  display: grid;
1892
  gap: 8px;
1893
}
1894
1895
.journeyList > button {
1896
  display: flex;
1897
  width: 100%;
1898
  flex-direction: column;
1899
  gap: 7px;
1900
  padding: 15px 4px;
1901
  border: 0;
1902
  border-bottom: 1px solid var(--border);
1903
  border-radius: 0;
1904
  color: var(--text);
1905
  background: transparent;
1906
  text-align: left;
1907
  cursor: pointer;
1908
}
1909
1910
.journeyList > button:hover {
1911
  border-color: var(--border-strong);
1912
  background: transparent;
1913
}
1914
1915
.journeyList > button.active {
1916
  border-color: var(--accent);
1917
  box-shadow: none;
1918
}
1919
1920
.journeyListTop,
1921
.journeyListMeta {
1922
  display: flex;
1923
  align-items: center;
1924
  justify-content: space-between;
1925
  gap: 10px;
1926
}
1927
1928
.journeyListTop > b {
1929
  color: var(--text-faint);
1930
  font: 500 10px/1.2 var(--mono);
1931
  letter-spacing: 0.08em;
1932
  text-transform: uppercase;
1933
}
1934
1935
.journeyList > button > strong {
1936
  font-size: 13px;
1937
  line-height: 1.4;
1938
}
1939
1940
.journeyList > button > small {
1941
  overflow: hidden;
1942
  color: var(--text-muted);
1943
  font: 11px/1.4 var(--mono);
1944
  text-overflow: ellipsis;
1945
  white-space: nowrap;
1946
}
1947
1948
.journeyListMeta {
1949
  color: var(--text-faint);
1950
  font: 10px/1.3 var(--mono);
1951
}
1952
1953
.journeyListMeta i {
1954
  font-style: normal;
1955
}
1956
1957
.statusPill {
1958
  display: inline-grid;
1959
  grid-template-columns: 6px minmax(7.4em, max-content);
1960
  align-items: center;
1961
  gap: 7px;
1962
  flex: none;
1963
  min-width: 8.4em;
1964
  padding: 0;
1965
  border: 0;
1966
  border-radius: 0;
1967
  color: var(--text-muted);
1968
  background: transparent;
1969
  font: 500 10px/1 var(--mono);
1970
  letter-spacing: 0.06em;
1971
  text-transform: uppercase;
1972
  white-space: nowrap;
1973
}
1974
1975
.statusPill i {
1976
  width: 6px;
1977
  height: 6px;
1978
  border-radius: 1px;
1979
  background: currentColor;
1980
}
1981
1982
.statusPill.good {
1983
  color: var(--live);
1984
}
1985
1986
.statusPill.warn {
1987
  color: var(--warn);
1988
}
1989
1990
:root[data-theme='light'] .statusPill.warn {
1991
  color: #8a5a16;
1992
}
1993
1994
.statusPill.danger {
1995
  color: var(--danger);
1996
}
1997
1998
.journeyDetail {
1999
  min-width: 0;
2000
  overflow: hidden;
2001
  border: 0;
2002
  border-radius: 0;
2003
  background: transparent;
2004
}
2005
2006
.journeyHero {
2007
  display: flex;
2008
  align-items: flex-start;
2009
  justify-content: space-between;
2010
  gap: 20px;
2011
  padding: 8px 0 22px;
2012
  border-bottom: 1px solid var(--border);
2013
}
2014
2015
.journeyHero h2 {
2016
  max-width: 780px;
2017
  margin: 8px 0 5px;
2018
  font-size: clamp(18px, 2vw, 24px);
2019
  line-height: 1.25;
2020
  letter-spacing: -0.03em;
2021
}
2022
2023
.journeyHero p {
2024
  margin: 0;
2025
  color: var(--text-muted);
2026
  font: 11px/1.4 var(--mono);
2027
}
2028
2029
.journeySummaryGrid {
2030
  display: grid;
2031
  grid-template-columns: repeat(4, minmax(0, 1fr));
2032
  border-bottom: 1px solid var(--border);
2033
}
2034
2035
.journeySummaryGrid section {
2036
  display: flex;
2037
  min-width: 0;
2038
  flex-direction: column;
2039
  gap: 5px;
2040
  padding: 16px 20px 16px 0;
2041
  border-right: 1px solid var(--border);
2042
}
2043
2044
.journeySummaryGrid section:last-child {
2045
  border-right: 0;
2046
}
2047
2048
.journeySummaryGrid span,
2049
.outcomeCard > div > span,
2050
.profileDelta > span {
2051
  color: var(--text-faint);
2052
  font: 10px/1.3 var(--mono);
2053
  letter-spacing: 0.05em;
2054
  text-transform: uppercase;
2055
}
2056
2057
.journeySummaryGrid strong {
2058
  overflow: hidden;
2059
  font-size: 15px;
2060
  text-overflow: ellipsis;
2061
  white-space: nowrap;
2062
}
2063
2064
.journeySummaryGrid small {
2065
  overflow: hidden;
2066
  color: var(--text-muted);
2067
  font-size: 11px;
2068
  text-overflow: ellipsis;
2069
  white-space: nowrap;
2070
}
2071
2072
.outcomeCard {
2073
  margin: 18px 0;
2074
  padding: 18px 0;
2075
  border: 0;
2076
  border-top: 1px solid var(--border);
2077
  border-radius: 0;
2078
  background: transparent;
2079
}
2080
2081
.outcomeCard h3 {
2082
  max-width: 800px;
2083
  margin: 7px 0 14px;
2084
  font-size: 14px;
2085
  font-weight: 500;
2086
  line-height: 1.55;
2087
}
2088
2089
.outcomeCard ul {
2090
  display: grid;
2091
  gap: 7px;
2092
  margin: 0;
2093
  padding: 0;
2094
  list-style: none;
2095
}
2096
2097
.outcomeCard li {
2098
  display: flex;
2099
  align-items: center;
2100
  gap: 9px;
2101
  color: var(--text-muted);
2102
  font-size: 12px;
2103
}
2104
2105
.ratingGrid {
2106
  display: grid;
2107
  grid-template-columns: repeat(2, minmax(0, 1fr));
2108
  gap: 0 24px;
2109
  margin-top: 16px;
2110
  padding-top: 10px;
2111
  border-top: 1px solid var(--accent-line);
2112
}
2113
2114
.progressCard {
2115
  margin: 18px 0;
2116
  padding: 18px 0;
2117
  border: 0;
2118
  border-top: 1px solid var(--border);
2119
  border-radius: 0;
2120
  background: transparent;
2121
}
2122
2123
.progressCardTop {
2124
  display: flex;
2125
  align-items: flex-start;
2126
  justify-content: space-between;
2127
  gap: 16px;
2128
}
2129
2130
.progressCardTop h3 {
2131
  margin: 6px 0 0;
2132
  font-size: 15px;
2133
}
2134
2135
.progressCardTop > strong {
2136
  color: var(--accent);
2137
  font: 600 22px/1 var(--mono);
2138
}
2139
2140
.progressTrack {
2141
  height: 1px;
2142
  margin: 16px 0 13px;
2143
  overflow: hidden;
2144
  border-radius: 0;
2145
  background: var(--border);
2146
}
2147
2148
.progressTrack i {
2149
  display: block;
2150
  height: 100%;
2151
  border-radius: inherit;
2152
  background: var(--accent);
2153
  transition: width 180ms ease;
2154
}
2155
2156
.progressFacts {
2157
  display: flex;
2158
  flex-wrap: wrap;
2159
  gap: 7px;
2160
}
2161
2162
.progressFacts span {
2163
  padding: 5px 0;
2164
  border: 0;
2165
  border-radius: 0;
2166
  color: var(--text-muted);
2167
  background: transparent;
2168
  font-size: 10px;
2169
}
2170
2171
.progressWarning {
2172
  margin: 13px 0 0;
2173
  padding-top: 12px;
2174
  border-top: 1px solid var(--warn-line);
2175
  color: var(--warn);
2176
  font-size: 11px;
2177
}
2178
2179
.journeyNotice {
2180
  margin: 18px 0;
2181
  padding: 13px 0;
2182
  border: 0;
2183
  border-top: 1px solid var(--warn-line);
2184
  border-radius: 0;
2185
  color: var(--text-muted);
2186
  background: transparent;
2187
  font-size: 12px;
2188
}
2189
2190
.journeyTimelineSection {
2191
  padding: 4px 0 24px;
2192
}
2193
2194
.journeyTimelineSection > div:first-child h3 {
2195
  margin: 0;
2196
  font-size: 14px;
2197
}
2198
2199
.journeyTimelineSection > div:first-child small {
2200
  color: var(--text-muted);
2201
  font-size: 11px;
2202
}
2203
2204
.journeyTimeline {
2205
  margin: 18px 0 0;
2206
  padding: 0;
2207
  list-style: none;
2208
}
2209
2210
.journeyTimeline li {
2211
  position: relative;
2212
  display: grid;
2213
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2214
  gap: 12px;
2215
  min-height: 76px;
2216
}
2217
2218
.journeyTimeline li:not(:last-child)::before {
2219
  position: absolute;
2220
  top: 12px;
2221
  bottom: -4px;
2222
  left: 3px;
2223
  width: 1px;
2224
  background: var(--border-strong);
2225
  content: '';
2226
}
2227
2228
.journeyNode {
2229
  z-index: 1;
2230
  width: 7px;
2231
  height: 7px;
2232
  margin-top: 5px;
2233
  border: 0;
2234
  border-radius: 1px;
2235
  background: var(--text-faint);
2236
  box-shadow: none;
2237
}
2238
2239
.journeyNode.good {
2240
  background: var(--live);
2241
}
2242
2243
.journeyNode.warn {
2244
  background: var(--warn);
2245
}
2246
2247
.journeyNode.danger {
2248
  background: var(--danger);
2249
}
2250
2251
.journeyTimeline li > .statusPill {
2252
  justify-self: start;
2253
  width: 100%;
2254
}
2255
2256
.journeyTimeline li > div {
2257
  display: flex;
2258
  min-width: 0;
2259
  flex-direction: column;
2260
  gap: 3px;
2261
  padding-bottom: 18px;
2262
}
2263
2264
.journeyTimeline li > div > span {
2265
  color: var(--text-faint);
2266
  font: 9px/1.3 var(--mono);
2267
  text-transform: uppercase;
2268
}
2269
2270
.journeyTimeline li strong {
2271
  font-size: 12px;
2272
}
2273
2274
.journeyTimeline li p {
2275
  margin: 0;
2276
  color: var(--text-muted);
2277
  font-size: 11px;
2278
  line-height: 1.5;
2279
}
2280
2281
.insightPrinciple {
2282
  display: grid;
2283
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2284
  gap: 30px;
2285
  align-items: center;
2286
  margin-bottom: 16px;
2287
  padding: 8px 0 22px;
2288
  border: 0;
2289
  border-bottom: 1px solid var(--border);
2290
  border-radius: 0;
2291
  background: transparent;
2292
}
2293
2294
.insightPrinciple h2 {
2295
  margin: 7px 0 5px;
2296
  font-size: 20px;
2297
  letter-spacing: -0.03em;
2298
}
2299
2300
.insightPrinciple p {
2301
  max-width: 680px;
2302
  margin: 0;
2303
  color: var(--text-muted);
2304
  font-size: 13px;
2305
  line-height: 1.55;
2306
}
2307
2308
.insightStats {
2309
  display: grid;
2310
  grid-template-columns: repeat(3, 1fr);
2311
  gap: 8px;
2312
}
2313
2314
.insightStats span {
2315
  display: flex;
2316
  min-width: 0;
2317
  flex-direction: column;
2318
  padding: 12px 0;
2319
  border: 0;
2320
  border-radius: 0;
2321
  color: var(--text-muted);
2322
  background: transparent;
2323
  font-size: 10px;
2324
  text-align: left;
2325
}
2326
2327
.insightStats strong {
2328
  margin-bottom: 3px;
2329
  color: var(--text);
2330
  font: 500 22px/1 var(--mono);
2331
}
2332
2333
.insightGrid {
2334
  display: grid;
2335
  grid-template-columns: repeat(2, minmax(0, 1fr));
2336
  gap: 16px;
2337
  margin-bottom: 16px;
2338
}
2339
2340
.insightGrid > .empty {
2341
  grid-column: 1 / -1;
2342
  border: 0;
2343
  border-radius: 0;
2344
  background: transparent;
2345
}
2346
2347
.profileHead {
2348
  display: flex;
2349
  align-items: flex-start;
2350
  justify-content: space-between;
2351
  gap: 12px;
2352
  margin-bottom: 2px;
2353
}
2354
2355
.profileHead > div {
2356
  display: flex;
2357
  min-width: 0;
2358
  flex-direction: column;
2359
  gap: 3px;
2360
}
2361
2362
.profileHeadCompact {
2363
  align-items: center;
2364
  margin-bottom: 11px;
2365
}
2366
2367
.profileHeadCompact > small {
2368
  color: var(--text-faint);
2369
  font: 10px/1.4 var(--mono);
2370
}
2371
2372
.sampleBadge {
2373
  padding: 4px 7px;
2374
  border-radius: 999px;
2375
  color: var(--accent);
2376
  background: var(--accent-dim);
2377
  font: 9px/1.2 var(--mono);
2378
  white-space: nowrap;
2379
}
2380
2381
:root[data-theme='light'] .sampleBadge {
2382
  color: #c43a22;
2383
}
2384
2385
:root[data-theme='light'] .account > span {
2386
  color: var(--accent-ink);
2387
}
2388
2389
:root[data-theme='light'] .profileDelta b.positive {
2390
  color: #c43a22;
2391
}
2392
2393
:root[data-theme='light'] .profileDelta b.negative {
2394
  color: #a33d2e;
2395
}
2396
2397
.profileEvidenceLine {
2398
  margin-bottom: 11px;
2399
  color: var(--text-faint);
2400
  font: 10px/1.4 var(--mono);
2401
}
2402
2403
.profileDelta {
2404
  margin-top: 14px;
2405
  padding-top: 12px;
2406
  border-top: 1px solid var(--border);
2407
}
2408
2409
.profileDelta > div {
2410
  display: flex;
2411
  flex-wrap: wrap;
2412
  gap: 5px;
2413
  margin-top: 7px;
2414
}
2415
2416
.profileDelta b {
2417
  padding: 4px 6px;
2418
  border-radius: 4px;
2419
  color: var(--text-muted);
2420
  background: var(--bg-well);
2421
  font: 9px/1.2 var(--mono);
2422
}
2423
2424
.profileDelta b.positive {
2425
  color: var(--accent);
2426
}
2427
2428
.profileDelta b.negative {
2429
  color: var(--danger);
2430
}
2431
2432
.learningDecisionList {
2433
  display: grid;
2434
}
2435
2436
.learningDecisionList article {
2437
  display: grid;
2438
  grid-template-columns: auto minmax(0, 1fr);
2439
  gap: 12px;
2440
  padding: 14px 0;
2441
  border-bottom: 1px solid var(--border);
2442
}
2443
2444
.learningDecisionList article:last-child {
2445
  border-bottom: 0;
2446
}
2447
2448
.learningDecisionList article > div {
2449
  display: flex;
2450
  min-width: 0;
2451
  flex-direction: column;
2452
  gap: 3px;
2453
}
2454
2455
.learningDecisionList strong {
2456
  overflow: hidden;
2457
  font: 11px/1.4 var(--mono);
2458
  text-overflow: ellipsis;
2459
}
2460
2461
.learningDecisionList small {
2462
  color: var(--text-muted);
2463
  font-size: 10px;
2464
}
2465
2466
.learningDecisionList p {
2467
  margin: 2px 0 0;
2468
  color: var(--text-muted);
2469
  font-size: 11px;
2470
}
2471
2472
@media (prefers-reduced-motion: reduce) {
2473
  .spinner,
2474
  .toggle span,
2475
  .liveDot,
2476
  .appMain > * {
2477
    animation: none;
2478
    transition: none;
2479
  }
2480
2481
  .primary {
2482
    transition: none;
2483
  }
2484
2485
  .primary:hover {
2486
    transform: none;
2487
  }
2488
}
2489
2490
/* Simplified agent workspace */
2491
.simpleShell {
2492
  min-height: 100svh;
2493
  background: radial-gradient(circle at 50% -20%, var(--glow-a), transparent 40rem), var(--bg);
2494
}
2495
2496
.simpleHeader {
2497
  position: sticky;
2498
  top: 0;
2499
  z-index: 30;
2500
  display: grid;
2501
  grid-template-columns: 1fr auto 1fr;
2502
  align-items: center;
2503
  min-height: 68px;
2504
  padding: 0 28px;
2505
  border-bottom: 1px solid var(--border);
2506
  background: color-mix(in srgb, var(--bg) 88%, transparent);
2507
  backdrop-filter: blur(18px);
2508
}
2509
2510
.simpleBrand,
2511
.accountButton,
2512
.viewSwitch button {
2513
  border: 0;
2514
  color: inherit;
2515
  background: transparent;
2516
  cursor: pointer;
2517
}
2518
2519
.simpleBrand {
2520
  display: inline-flex;
2521
  align-items: center;
2522
  gap: 9px;
2523
  width: max-content;
2524
  padding: 6px 0;
2525
}
2526
2527
.simpleBrand strong {
2528
  font-size: 14px;
2529
  letter-spacing: -0.03em;
2530
}
2531
2532
.viewSwitch {
2533
  display: flex;
2534
  gap: 3px;
2535
  padding: 3px;
2536
  border: 1px solid var(--border);
2537
  background: var(--bg-well);
2538
}
2539
2540
.viewSwitch button {
2541
  display: flex;
2542
  align-items: center;
2543
  gap: 7px;
2544
  min-height: 34px;
2545
  padding: 0 13px;
2546
  color: var(--text-muted);
2547
  font-size: 12px;
2548
  font-weight: 600;
2549
}
2550
2551
.viewSwitch button:hover {
2552
  color: var(--text);
2553
}
2554
2555
.viewSwitch button[aria-selected='true'] {
2556
  color: var(--text);
2557
  background: var(--bg-elevated);
2558
  box-shadow: inset 0 0 0 1px var(--border-strong);
2559
}
2560
2561
.viewSwitch svg,
2562
.accountButton svg {
2563
  width: 15px;
2564
  height: 15px;
2565
}
2566
2567
.accountButton {
2568
  justify-self: end;
2569
  padding: 2px;
2570
  border-radius: 999px;
2571
}
2572
2573
.simpleMain {
2574
  width: min(1120px, calc(100% - 40px));
2575
  margin: 0 auto;
2576
  padding: 58px 0 100px;
2577
}
2578
2579
.workspacePage {
2580
  display: grid;
2581
  gap: 28px;
2582
}
2583
2584
.workspaceHead {
2585
  display: flex;
2586
  align-items: end;
2587
  justify-content: space-between;
2588
  gap: 24px;
2589
}
2590
2591
.workspaceHead h1 {
2592
  margin: 8px 0 2px;
2593
  font-size: clamp(31px, 4vw, 46px);
2594
  font-weight: 520;
2595
  letter-spacing: -0.055em;
2596
}
2597
2598
.workspaceHead > div > p:last-child {
2599
  margin: 0;
2600
  color: var(--text-muted);
2601
  font-size: 13px;
2602
}
2603
2604
.connectAgentButton {
2605
  display: inline-flex;
2606
  align-items: center;
2607
  gap: 8px;
2608
  min-height: 42px;
2609
  padding: 0 17px;
2610
  border: 1px solid var(--accent);
2611
  color: var(--accent-ink);
2612
  background: var(--accent);
2613
  font-size: 12px;
2614
  font-weight: 700;
2615
  cursor: pointer;
2616
}
2617
2618
.connectAgentButton:hover {
2619
  background: var(--accent-hover);
2620
}
2621
2622
.connectAgentButton svg {
2623
  width: 16px;
2624
}
2625
2626
.compactRequests {
2627
  display: grid;
2628
  gap: 1px;
2629
  border: 1px solid var(--accent-line);
2630
  background: var(--accent-line);
2631
}
2632
2633
.compactRequests article,
2634
.agentRequests article {
2635
  display: flex;
2636
  align-items: center;
2637
  gap: 13px;
2638
  padding: 12px 14px;
2639
  background: var(--bg-elevated);
2640
}
2641
2642
.compactRequests article > div:nth-child(2),
2643
.agentRequests article > div:nth-child(2) {
2644
  display: grid;
2645
  min-width: 0;
2646
  gap: 2px;
2647
}
2648
2649
.compactRequests strong,
2650
.agentRequests strong {
2651
  overflow: hidden;
2652
  font-size: 13px;
2653
  text-overflow: ellipsis;
2654
  white-space: nowrap;
2655
}
2656
2657
.compactRequests small,
2658
.agentRequests small {
2659
  color: var(--text-muted);
2660
  font-size: 11px;
2661
}
2662
2663
.requestIcon {
2664
  display: grid;
2665
  width: 30px;
2666
  height: 30px;
2667
  place-items: center;
2668
  color: var(--accent);
2669
  background: var(--accent-dim);
2670
}
2671
2672
.requestIcon svg {
2673
  width: 15px;
2674
}
2675
2676
.iconDecisions {
2677
  display: flex;
2678
  gap: 6px;
2679
  margin-left: auto;
2680
}
2681
2682
.iconDecisions button {
2683
  display: grid;
2684
  width: 32px;
2685
  height: 32px;
2686
  place-items: center;
2687
  border: 1px solid var(--border-strong);
2688
  color: var(--text-muted);
2689
  background: transparent;
2690
  cursor: pointer;
2691
}
2692
2693
.iconDecisions button:hover {
2694
  color: var(--danger);
2695
  border-color: var(--danger-line);
2696
  background: var(--danger-dim);
2697
}
2698
2699
.iconDecisions button.approve {
2700
  color: var(--live);
2701
}
2702
2703
.iconDecisions button.approve:hover {
2704
  border-color: color-mix(in srgb, var(--live) 32%, transparent);
2705
  background: var(--live-dim);
2706
}
2707
2708
.iconDecisions svg {
2709
  width: 15px;
2710
}
2711
2712
.agentList {
2713
  display: grid;
2714
  gap: 9px;
2715
}
2716
2717
.agentRow {
2718
  overflow: clip;
2719
  border: 1px solid var(--border);
2720
  background: var(--bg-elevated);
2721
  transition:
2722
    border-color 160ms ease,
2723
    background 160ms ease;
2724
}
2725
2726
.agentRow:hover,
2727
.agentRow.isExpanded {
2728
  border-color: var(--border-strong);
2729
}
2730
2731
.agentRowSummary {
2732
  display: grid;
2733
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto auto;
2734
  align-items: center;
2735
  gap: 16px;
2736
  width: 100%;
2737
  min-height: 82px;
2738
  padding: 13px 17px;
2739
  color: inherit;
2740
  background: transparent;
2741
  text-align: left;
2742
}
2743
2744
.agentRowCore {
2745
  display: grid;
2746
  grid-template-columns: auto minmax(140px, 1.2fr) minmax(320px, 2fr);
2747
  align-items: center;
2748
  gap: 16px;
2749
  min-width: 0;
2750
  padding: 0;
2751
  border: 0;
2752
  color: inherit;
2753
  background: transparent;
2754
  text-align: left;
2755
  cursor: pointer;
2756
}
2757
2758
.agentRowCore:focus-visible,
2759
.scorecardTeaser:focus-visible,
2760
.agentExpandButton:focus-visible {
2761
  outline: 1px solid var(--accent);
2762
  outline-offset: 4px;
2763
}
2764
2765
.agentAvatar {
2766
  position: relative;
2767
  display: grid;
2768
  width: 42px;
2769
  height: 42px;
2770
  flex: none;
2771
  place-items: center;
2772
  border: 1px solid var(--border-strong);
2773
  color: var(--text-muted);
2774
  background: var(--bg-well);
2775
}
2776
2777
.agentAvatar > svg {
2778
  width: 19px;
2779
}
2780
2781
.agentAvatar i {
2782
  position: absolute;
2783
  right: -3px;
2784
  bottom: -3px;
2785
  width: 9px;
2786
  height: 9px;
2787
  border: 2px solid var(--bg);
2788
  border-radius: 999px;
2789
  background: var(--text-faint);
2790
}
2791
2792
.agentAvatar i.online {
2793
  background: var(--live);
2794
  box-shadow: 0 0 0 3px var(--live-dim);
2795
}
2796
2797
.agentIdentity {
2798
  display: grid;
2799
  min-width: 0;
2800
  gap: 3px;
2801
}
2802
2803
.agentIdentity strong {
2804
  overflow: hidden;
2805
  font-size: 14px;
2806
  text-overflow: ellipsis;
2807
  white-space: nowrap;
2808
}
2809
2810
.agentIdentity small {
2811
  color: var(--text-muted);
2812
  font-size: 10px;
2813
}
2814
2815
.agentSignals {
2816
  display: flex;
2817
  flex-wrap: wrap;
2818
  gap: 6px;
2819
}
2820
2821
.agentSignals span {
2822
  display: inline-flex;
2823
  align-items: center;
2824
  gap: 5px;
2825
  padding: 5px 7px;
2826
  border: 1px solid var(--border);
2827
  color: var(--text-muted);
2828
  font: 500 9px/1 var(--mono);
2829
  text-transform: uppercase;
2830
}
2831
2832
.agentSignals svg {
2833
  width: 10px;
2834
  height: 10px;
2835
}
2836
2837
.agentSignals .signalOnline {
2838
  color: var(--live);
2839
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
2840
  background: var(--live-dim);
2841
}
2842
2843
.agentSignals .signalVerified {
2844
  color: var(--accent);
2845
  border-color: var(--accent-line);
2846
  background: var(--accent-dim);
2847
}
2848
2849
.scorecardTeaser {
2850
  display: grid;
2851
  grid-template-columns: 44px 1fr;
2852
  align-items: center;
2853
  gap: 10px;
2854
  min-width: 0;
2855
  padding: 9px 10px;
2856
  border: 1px solid var(--accent-line);
2857
  color: inherit;
2858
  background: linear-gradient(120deg, var(--accent-dim), transparent);
2859
  text-align: left;
2860
  cursor: pointer;
2861
  transition:
2862
    border-color 160ms ease,
2863
    transform 160ms ease;
2864
}
2865
2866
.scorecardTeaser:hover {
2867
  border-color: var(--accent);
2868
  transform: translateY(-1px);
2869
}
2870
2871
.scorecardTeaser > span:last-child {
2872
  display: grid;
2873
  min-width: 0;
2874
  gap: 3px;
2875
}
2876
2877
.scorecardTeaser strong {
2878
  font: 600 9px/1 var(--mono);
2879
  letter-spacing: 0.08em;
2880
  text-transform: uppercase;
2881
}
2882
2883
.scorecardTeaser small {
2884
  overflow: hidden;
2885
  color: var(--text-muted);
2886
  font-size: 8px;
2887
  text-overflow: ellipsis;
2888
  text-transform: uppercase;
2889
  white-space: nowrap;
2890
}
2891
2892
.scorecardBars {
2893
  display: grid;
2894
  align-content: center;
2895
  gap: 3px;
2896
  height: 30px;
2897
  padding: 5px;
2898
  border-left: 2px solid var(--accent);
2899
  background: var(--bg-well);
2900
}
2901
2902
.scorecardBars i {
2903
  height: 2px;
2904
  max-width: 100%;
2905
  background: var(--accent);
2906
}
2907
2908
.agentExpandButton {
2909
  display: grid;
2910
  width: 30px;
2911
  height: 30px;
2912
  place-items: center;
2913
  padding: 0;
2914
  border: 0;
2915
  color: inherit;
2916
  background: transparent;
2917
  cursor: pointer;
2918
}
2919
2920
.notificationCount {
2921
  display: grid;
2922
  width: 22px;
2923
  height: 22px;
2924
  place-items: center;
2925
  border-radius: 999px;
2926
  color: #fff;
2927
  background: var(--accent);
2928
  font: 700 10px/1 var(--mono);
2929
}
2930
2931
.expandIcon {
2932
  width: 17px;
2933
  color: var(--text-faint);
2934
  transition: transform 160ms ease;
2935
}
2936
2937
.agentRow.isExpanded .expandIcon {
2938
  transform: rotate(180deg);
2939
}
2940
2941
.scorecardDialog {
2942
  z-index: 80 !important;
2943
  width: min(1040px, calc(100vw - 32px)) !important;
2944
  max-width: 1040px !important;
2945
  max-height: calc(100vh - 32px);
2946
  gap: 14px !important;
2947
  overflow: auto;
2948
  padding: 18px !important;
2949
  border: 1px solid var(--border-strong) !important;
2950
  border-radius: 0 !important;
2951
  color: var(--text) !important;
2952
  opacity: 1 !important;
2953
  background: #0c0a0a !important;
2954
  box-shadow: 0 28px 100px rgb(0 0 0 / 58%) !important;
2955
}
2956
2957
[data-slot='dialog-overlay'] {
2958
  z-index: 70 !important;
2959
}
2960
2961
.scorecardA11yTitle {
2962
  position: absolute;
2963
  width: 1px;
2964
  height: 1px;
2965
  overflow: hidden;
2966
  clip: rect(0, 0, 0, 0);
2967
  white-space: nowrap;
2968
}
2969
2970
.behaviourScorecard {
2971
  position: relative;
2972
  overflow: hidden;
2973
  border: 1px solid var(--border-strong);
2974
  background: linear-gradient(120deg, #28110d, #100d0c 38%);
2975
}
2976
2977
:root[data-theme='light'] .scorecardDialog {
2978
  background: #f7f4f2 !important;
2979
}
2980
2981
:root[data-theme='light'] .behaviourScorecard {
2982
  background: linear-gradient(120deg, #fff0ec, #fff 38%);
2983
}
2984
2985
.behaviourScorecard::after {
2986
  position: absolute;
2987
  top: -70px;
2988
  right: -50px;
2989
  width: 220px;
2990
  height: 220px;
2991
  border: 1px solid var(--accent-line);
2992
  border-radius: 50%;
2993
  content: '';
2994
  pointer-events: none;
2995
}
2996
2997
.scorecardHeader,
2998
.scorecardIdentity,
2999
.scorecardFoot {
3000
  position: relative;
3001
  z-index: 1;
3002
}
3003
3004
.scorecardHeader {
3005
  display: flex;
3006
  align-items: center;
3007
  justify-content: space-between;
3008
  min-height: 58px;
3009
  padding: 0 24px;
3010
  border-bottom: 1px solid var(--border);
3011
}
3012
3013
.scorecardBrand,
3014
.scorecardHeader > span {
3015
  display: flex;
3016
  align-items: center;
3017
  gap: 8px;
3018
  color: var(--text-muted);
3019
  font: 600 9px/1 var(--mono);
3020
  letter-spacing: 0.08em;
3021
  text-transform: uppercase;
3022
}
3023
3024
.scorecardBrand svg,
3025
.scorecardHeader > span svg {
3026
  width: 14px;
3027
  height: 14px;
3028
}
3029
3030
.scorecardHeader > span.scorecardVerified {
3031
  color: var(--live);
3032
}
3033
3034
.scorecardIdentity {
3035
  display: flex;
3036
  align-items: end;
3037
  justify-content: space-between;
3038
  gap: 24px;
3039
  padding: 28px 24px 22px;
3040
}
3041
3042
.scorecardIdentity p {
3043
  margin: 0 0 8px;
3044
  color: var(--accent);
3045
  font: 600 9px/1 var(--mono);
3046
  letter-spacing: 0.16em;
3047
}
3048
3049
.scorecardIdentity h2 {
3050
  margin: 0;
3051
  font-size: clamp(26px, 4vw, 42px);
3052
  letter-spacing: -0.05em;
3053
}
3054
3055
.scorecardContext {
3056
  display: flex;
3057
  justify-content: flex-end;
3058
  flex-wrap: wrap;
3059
  gap: 5px;
3060
}
3061
3062
.scorecardContext span {
3063
  padding: 5px 7px;
3064
  border: 1px solid var(--border);
3065
  color: var(--text-muted);
3066
  background: var(--bg-well);
3067
  font: 500 8px/1 var(--mono);
3068
  text-transform: uppercase;
3069
}
3070
3071
.scorecardMetrics {
3072
  position: relative;
3073
  z-index: 1;
3074
  display: grid;
3075
  grid-template-columns: 1fr 1fr;
3076
  border-top: 1px solid var(--border);
3077
}
3078
3079
.scorecardMetrics > div {
3080
  display: grid;
3081
  grid-template-columns: minmax(150px, 0.9fr) minmax(120px, 1fr) 36px;
3082
  align-items: center;
3083
  gap: 14px;
3084
  min-height: 66px;
3085
  padding: 11px 24px;
3086
  border-bottom: 1px solid var(--border);
3087
}
3088
3089
.scorecardMetrics > div:nth-child(odd) {
3090
  border-right: 1px solid var(--border);
3091
}
3092
3093
.scorecardMetrics > div > span:first-child {
3094
  display: grid;
3095
  gap: 4px;
3096
}
3097
3098
.scorecardMetrics strong {
3099
  font-size: 11px;
3100
}
3101
3102
.scorecardMetrics small {
3103
  color: var(--text-faint);
3104
  font: 500 8px/1 var(--mono);
3105
  text-transform: uppercase;
3106
}
3107
3108
.scorecardMetrics b {
3109
  font: 500 18px/1 var(--mono);
3110
  text-align: right;
3111
}
3112
3113
.scorecardMeter {
3114
  height: 4px;
3115
  overflow: hidden;
3116
  background: var(--border);
3117
}
3118
3119
.scorecardMeter i {
3120
  display: block;
3121
  height: 100%;
3122
  background: var(--accent);
3123
}
3124
3125
.scorecardMetrics .isUnmeasured {
3126
  opacity: 0.55;
3127
}
3128
3129
.scorecardMetrics .isUnmeasured .scorecardMeter i {
3130
  width: 0 !important;
3131
}
3132
3133
.scorecardFoot {
3134
  display: grid;
3135
  grid-template-columns: auto auto 1fr;
3136
  align-items: center;
3137
  gap: 18px;
3138
  min-height: 58px;
3139
  padding: 12px 24px;
3140
  color: var(--text-muted);
3141
  font: 600 8px/1.2 var(--mono);
3142
  text-transform: uppercase;
3143
}
3144
3145
.scorecardFoot small {
3146
  justify-self: end;
3147
  color: var(--text-faint);
3148
  font: inherit;
3149
}
3150
3151
.scorecardActions {
3152
  display: flex;
3153
  justify-content: flex-end;
3154
  gap: 7px;
3155
}
3156
3157
.scorecardActions > span {
3158
  align-self: center;
3159
  margin-right: auto;
3160
  color: var(--live);
3161
  font: 600 9px/1 var(--mono);
3162
  text-transform: uppercase;
3163
}
3164
3165
.scorecardActions button {
3166
  display: inline-flex;
3167
  align-items: center;
3168
  gap: 7px;
3169
  min-height: 38px;
3170
  padding: 0 13px;
3171
  border: 1px solid var(--border-strong);
3172
  color: var(--text);
3173
  background: var(--bg-elevated);
3174
  font: 600 9px/1 var(--mono);
3175
  text-transform: uppercase;
3176
  cursor: pointer;
3177
}
3178
3179
.scorecardActions button.primary {
3180
  border-color: var(--accent);
3181
  color: white;
3182
  background: var(--accent);
3183
}
3184
3185
.scorecardActions svg {
3186
  width: 13px;
3187
}
3188
3189
.agentExpanded {
3190
  display: grid;
3191
  gap: 24px;
3192
  padding: 8px 18px 22px 77px;
3193
  border-top: 1px solid var(--border);
3194
  background: color-mix(in srgb, var(--bg-well) 70%, transparent);
3195
}
3196
3197
.agentRequests {
3198
  margin-top: 16px;
3199
  border: 1px solid var(--accent-line);
3200
}
3201
3202
.agentRequests .sectionLabel {
3203
  padding: 9px 12px;
3204
  border-bottom: 1px solid var(--accent-line);
3205
  background: var(--accent-dim);
3206
}
3207
3208
.requestPulse {
3209
  width: 7px;
3210
  height: 7px;
3211
  border-radius: 999px;
3212
  background: var(--accent);
3213
}
3214
3215
.sectionLabel {
3216
  margin: 0;
3217
  color: var(--text-faint);
3218
  font: 600 9px/1 var(--mono);
3219
  letter-spacing: 0.14em;
3220
  text-transform: uppercase;
3221
}
3222
3223
.agentDetailStrip {
3224
  display: flex;
3225
  align-items: stretch;
3226
  border: 1px solid var(--border);
3227
}
3228
3229
.agentIntelligence {
3230
  display: grid;
3231
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(240px, 1fr);
3232
  align-items: center;
3233
  gap: 22px;
3234
  padding: 18px;
3235
  border: 1px solid var(--accent-line);
3236
  background: linear-gradient(110deg, var(--accent-dim), transparent 62%);
3237
}
3238
3239
.intelligenceLead {
3240
  display: flex;
3241
  align-items: center;
3242
  gap: 14px;
3243
}
3244
3245
.intelligenceScore {
3246
  font: 500 42px/1 var(--mono);
3247
  letter-spacing: -0.08em;
3248
}
3249
3250
.intelligenceLead > div {
3251
  display: grid;
3252
  gap: 3px;
3253
}
3254
3255
.intelligenceLead strong {
3256
  font-size: 13px;
3257
}
3258
3259
.intelligenceLead small {
3260
  color: var(--text-muted);
3261
  font-size: 9px;
3262
  text-transform: uppercase;
3263
}
3264
3265
.intelligenceTrend {
3266
  display: grid;
3267
  gap: 5px;
3268
  text-align: right;
3269
}
3270
3271
.intelligenceTrend span {
3272
  font: 600 10px/1 var(--mono);
3273
  text-transform: uppercase;
3274
}
3275
3276
.intelligenceTrend .improving {
3277
  color: var(--live);
3278
}
3279
3280
.intelligenceTrend .declining {
3281
  color: var(--danger);
3282
}
3283
3284
.intelligenceTrend b {
3285
  color: var(--warn);
3286
  font: 500 8px/1.2 var(--mono);
3287
  text-transform: uppercase;
3288
}
3289
3290
.intelligenceSignals {
3291
  display: flex;
3292
  justify-content: flex-end;
3293
  flex-wrap: wrap;
3294
  gap: 5px;
3295
}
3296
3297
.intelligenceSignals span {
3298
  display: inline-flex;
3299
  align-items: center;
3300
  gap: 4px;
3301
  padding: 5px 7px;
3302
  border: 1px solid var(--border);
3303
  font: 500 8px/1 var(--mono);
3304
  text-transform: uppercase;
3305
}
3306
3307
.intelligenceSignals svg {
3308
  width: 9px;
3309
  height: 9px;
3310
}
3311
3312
.intelligenceSignals .strength {
3313
  color: var(--live);
3314
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
3315
}
3316
3317
.intelligenceSignals .risk {
3318
  color: var(--warn);
3319
  border-color: var(--warn-line);
3320
}
3321
3322
.categoryScores {
3323
  display: flex;
3324
  grid-column: 1 / -1;
3325
  flex-wrap: wrap;
3326
  gap: 6px;
3327
  padding-top: 12px;
3328
  border-top: 1px solid var(--border);
3329
}
3330
3331
.categoryScores span {
3332
  padding: 5px 8px;
3333
  color: var(--text-muted);
3334
  background: var(--bg-well);
3335
  font: 500 9px/1 var(--mono);
3336
}
3337
3338
.categoryScores b {
3339
  color: var(--text);
3340
}
3341
3342
.intelligenceEmpty {
3343
  display: flex;
3344
  align-items: center;
3345
  gap: 14px;
3346
  padding: 17px;
3347
  border: 1px dashed var(--border-strong);
3348
}
3349
3350
.intelligenceEmpty > span {
3351
  font: 500 30px/1 var(--mono);
3352
  color: var(--text-faint);
3353
}
3354
3355
.intelligenceEmpty > div {
3356
  display: grid;
3357
  gap: 3px;
3358
}
3359
3360
.intelligenceEmpty strong {
3361
  font-size: 11px;
3362
}
3363
3364
.intelligenceEmpty small {
3365
  color: var(--text-muted);
3366
  font-size: 9px;
3367
}
3368
3369
.agentDetailStrip > span {
3370
  display: grid;
3371
  min-width: 140px;
3372
  gap: 3px;
3373
  padding: 13px 16px;
3374
  border-right: 1px solid var(--border);
3375
  color: var(--text-muted);
3376
  font-size: 10px;
3377
  text-transform: uppercase;
3378
}
3379
3380
.agentDetailStrip b {
3381
  color: var(--text);
3382
  font-size: 12px;
3383
  text-transform: none;
3384
}
3385
3386
.agentDetailStrip a {
3387
  display: inline-flex;
3388
  align-items: center;
3389
  gap: 6px;
3390
  margin-left: auto;
3391
  padding: 0 16px;
3392
  color: var(--accent);
3393
  font-size: 11px;
3394
  font-weight: 600;
3395
  text-decoration: none;
3396
}
3397
3398
.agentDetailStrip a svg {
3399
  width: 12px;
3400
}
3401
3402
.agentHistory {
3403
  display: grid;
3404
  gap: 10px;
3405
}
3406
3407
.historyHeading {
3408
  display: flex;
3409
  align-items: center;
3410
  justify-content: space-between;
3411
}
3412
3413
.historyHeading small {
3414
  color: var(--text-muted);
3415
  font-size: 10px;
3416
}
3417
3418
.agentHistory ol {
3419
  display: grid;
3420
  margin: 0;
3421
  padding: 0;
3422
  list-style: none;
3423
}
3424
3425
.agentHistory li {
3426
  display: grid;
3427
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(180px, 1.6fr) auto;
3428
  align-items: center;
3429
  gap: 13px;
3430
  min-height: 58px;
3431
  border-top: 1px solid var(--border);
3432
}
3433
3434
.agentHistory li > div {
3435
  display: grid;
3436
  min-width: 0;
3437
  gap: 2px;
3438
}
3439
3440
.agentHistory li strong,
3441
.historyPurpose {
3442
  overflow: hidden;
3443
  font-size: 11px;
3444
  text-overflow: ellipsis;
3445
  white-space: nowrap;
3446
}
3447
3448
.agentHistory li small {
3449
  color: var(--text-muted);
3450
  font-size: 9px;
3451
}
3452
3453
.historyPurpose {
3454
  color: var(--text-muted);
3455
}
3456
3457
.outcomeSymbol {
3458
  display: grid;
3459
  width: 24px;
3460
  height: 24px;
3461
  place-items: center;
3462
  border: 1px solid var(--border);
3463
  font: 600 10px/1 var(--mono);
3464
}
3465
3466
.outcomeSymbol svg {
3467
  width: 11px;
3468
}
3469
3470
.outcomeSymbol.success,
3471
.outcomeText.success {
3472
  color: var(--live);
3473
}
3474
3475
.outcomeSymbol.failure,
3476
.outcomeText.failure,
3477
.outcomeText.cancelled {
3478
  color: var(--danger);
3479
}
3480
3481
.outcomeSymbol.partial,
3482
.outcomeText.partial,
3483
.outcomeText.provisional {
3484
  color: var(--warn);
3485
}
3486
3487
.outcomeSymbol.pending,
3488
.outcomeText.pending,
3489
.outcomeText.active {
3490
  color: var(--text-faint);
3491
}
3492
3493
.outcomeText {
3494
  font: 600 9px/1 var(--mono);
3495
  text-transform: uppercase;
3496
}
3497
3498
.quietEmpty {
3499
  padding: 28px;
3500
  border: 1px dashed var(--border-strong);
3501
  color: var(--text-muted);
3502
  font-size: 12px;
3503
  text-align: center;
3504
}
3505
3506
.emptyAgentState {
3507
  display: grid;
3508
  min-height: 250px;
3509
  place-items: center;
3510
  align-content: center;
3511
  gap: 7px;
3512
  border: 1px dashed var(--border-strong);
3513
  color: var(--text);
3514
  background: transparent;
3515
  cursor: pointer;
3516
}
3517
3518
.emptyAgentState svg {
3519
  width: 22px;
3520
  color: var(--accent);
3521
}
3522
3523
.emptyAgentState span {
3524
  color: var(--text-muted);
3525
  font-size: 11px;
3526
}
3527
3528
.marketplaceHead {
3529
  align-items: center;
3530
}
3531
3532
.marketSearch {
3533
  display: flex;
3534
  align-items: center;
3535
  gap: 9px;
3536
  width: min(360px, 100%);
3537
  min-height: 42px;
3538
  padding: 0 13px;
3539
  border: 1px solid var(--border-strong);
3540
  background: var(--bg-input);
3541
}
3542
3543
.marketFilters {
3544
  display: flex;
3545
  align-items: end;
3546
  gap: 7px;
3547
}
3548
3549
.marketFilters > label:not(.marketSearch) {
3550
  display: grid;
3551
  gap: 5px;
3552
}
3553
3554
.marketFilters > label > span {
3555
  color: var(--text-faint);
3556
  font: 600 8px/1 var(--mono);
3557
  letter-spacing: 0.1em;
3558
  text-transform: uppercase;
3559
}
3560
3561
.marketFilters select,
3562
.marketFilters > label:not(.marketSearch) input {
3563
  min-width: 130px;
3564
  height: 42px;
3565
  padding: 0 10px;
3566
  border: 1px solid var(--border-strong);
3567
  color: var(--text);
3568
  background: var(--bg-input);
3569
  font-size: 11px;
3570
}
3571
3572
.marketContext {
3573
  margin-top: -13px;
3574
  padding: 10px 12px;
3575
  border-left: 2px solid var(--accent);
3576
  color: var(--text-muted);
3577
  background: var(--accent-dim);
3578
  font-size: 10px;
3579
}
3580
3581
.marketSearch svg {
3582
  width: 16px;
3583
  color: var(--text-faint);
3584
}
3585
3586
.marketSearch input {
3587
  width: 100%;
3588
  border: 0;
3589
  color: var(--text);
3590
  background: transparent;
3591
  font-size: 12px;
3592
}
3593
3594
.marketGrid {
3595
  display: grid;
3596
  grid-template-columns: repeat(3, minmax(0, 1fr));
3597
  gap: 10px;
3598
}
3599
3600
.marketCard {
3601
  display: grid;
3602
  min-height: 285px;
3603
  padding: 18px;
3604
  border: 1px solid var(--border);
3605
  background: var(--bg-elevated);
3606
}
3607
3608
.marketCard:hover {
3609
  border-color: var(--accent-line);
3610
}
3611
3612
.marketCardTop {
3613
  display: flex;
3614
  align-items: start;
3615
  justify-content: space-between;
3616
}
3617
3618
.marketPresence {
3619
  padding: 5px 7px;
3620
  color: var(--text-faint);
3621
  background: var(--bg-well);
3622
  font: 600 9px/1 var(--mono);
3623
  text-transform: uppercase;
3624
}
3625
3626
.marketPresence.online {
3627
  color: var(--live);
3628
  background: var(--live-dim);
3629
}
3630
3631
.marketCard h2 {
3632
  margin: 17px 0 5px;
3633
  font-size: 17px;
3634
  font-weight: 600;
3635
  letter-spacing: -0.03em;
3636
}
3637
3638
.matchBadge {
3639
  display: flex;
3640
  align-items: baseline;
3641
  gap: 7px;
3642
  margin-top: 14px;
3643
  color: var(--text-muted);
3644
}
3645
3646
.matchBadge strong {
3647
  color: var(--text);
3648
  font: 500 18px/1 var(--mono);
3649
}
3650
3651
.matchBadge span {
3652
  font: 500 8px/1 var(--mono);
3653
  text-transform: uppercase;
3654
}
3655
3656
.matchBadge.strong strong,
3657
.matchBadge.strong span {
3658
  color: var(--live);
3659
}
3660
3661
.matchBadge.unproven strong {
3662
  color: var(--text-faint);
3663
}
3664
3665
.marketCard > p {
3666
  display: -webkit-box;
3667
  overflow: hidden;
3668
  min-height: 36px;
3669
  margin: 0 0 14px;
3670
  color: var(--text-muted);
3671
  font-size: 11px;
3672
  -webkit-box-orient: vertical;
3673
  -webkit-line-clamp: 2;
3674
}
3675
3676
.marketTags {
3677
  display: flex;
3678
  align-content: start;
3679
  flex-wrap: wrap;
3680
  gap: 5px;
3681
}
3682
3683
.marketTags span {
3684
  padding: 5px 7px;
3685
  border: 1px solid var(--border);
3686
  color: var(--text-muted);
3687
  font: 500 9px/1 var(--mono);
3688
}
3689
3690
.marketMeta {
3691
  display: flex;
3692
  align-items: center;
3693
  gap: 12px;
3694
  margin-top: auto;
3695
  padding-top: 14px;
3696
  border-top: 1px solid var(--border);
3697
}
3698
3699
.marketIntelligence {
3700
  display: flex;
3701
  align-items: center;
3702
  gap: 8px;
3703
  min-height: 34px;
3704
  margin-top: 10px;
3705
  padding: 8px;
3706
  color: var(--text-muted);
3707
  background: var(--bg-well);
3708
}
3709
3710
.marketIntelligence strong {
3711
  color: var(--accent);
3712
  font: 600 15px/1 var(--mono);
3713
}
3714
3715
.marketIntelligence span {
3716
  font: 500 8px/1.3 var(--mono);
3717
  text-transform: uppercase;
3718
}
3719
3720
.marketMeta span {
3721
  display: inline-flex;
3722
  align-items: center;
3723
  gap: 5px;
3724
  color: var(--text-muted);
3725
  font-size: 9px;
3726
  text-transform: uppercase;
3727
}
3728
3729
.marketMeta svg {
3730
  width: 11px;
3731
}
3732
3733
.marketProfileLink {
3734
  display: flex;
3735
  align-items: center;
3736
  justify-content: space-between;
3737
  margin-top: 14px;
3738
  color: var(--accent);
3739
  font-size: 11px;
3740
  font-weight: 600;
3741
  text-decoration: none;
3742
}
3743
3744
.marketProfileLink svg {
3745
  width: 14px;
3746
}
3747
3748
.marketSkeleton {
3749
  min-height: 285px;
3750
  border: 1px solid var(--border);
3751
  background: linear-gradient(90deg, var(--bg-well), var(--bg-hover), var(--bg-well));
3752
  background-size: 200% 100%;
3753
  animation: marketLoading 1.4s ease infinite;
3754
}
3755
3756
.marketEmpty {
3757
  grid-column: 1 / -1;
3758
}
3759
3760
@keyframes marketLoading {
3761
  to {
3762
    background-position: -200% 0;
3763
  }
3764
}
3765
3766
@media (max-width: 880px) {
3767
  .simpleHeader {
3768
    grid-template-columns: auto 1fr auto;
3769
    padding: 0 16px;
3770
  }
3771
3772
  .simpleBrand strong {
3773
    display: none;
3774
  }
3775
3776
  .viewSwitch {
3777
    justify-self: center;
3778
  }
3779
3780
  .agentRowSummary {
3781
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto auto;
3782
  }
3783
3784
  .agentRowCore {
3785
    grid-template-columns: auto minmax(120px, 1fr);
3786
  }
3787
3788
  .agentSignals {
3789
    display: none;
3790
  }
3791
3792
  .marketGrid {
3793
    grid-template-columns: repeat(2, minmax(0, 1fr));
3794
  }
3795
3796
  .marketFilters {
3797
    flex-wrap: wrap;
3798
    justify-content: flex-end;
3799
  }
3800
3801
  .agentIntelligence {
3802
    grid-template-columns: 1fr auto;
3803
  }
3804
3805
  .intelligenceSignals {
3806
    grid-column: 1 / -1;
3807
    justify-content: flex-start;
3808
  }
3809
}
3810
3811
@media (max-width: 620px) {
3812
  .simpleHeader {
3813
    min-height: 60px;
3814
  }
3815
3816
  .viewSwitch button {
3817
    padding: 0 10px;
3818
  }
3819
3820
  .viewSwitch button span {
3821
    display: none;
3822
  }
3823
3824
  .simpleMain {
3825
    width: min(100% - 24px, 1120px);
3826
    padding: 34px 0 70px;
3827
  }
3828
3829
  .workspaceHead,
3830
  .marketplaceHead {
3831
    display: grid;
3832
    align-items: stretch;
3833
  }
3834
3835
  .connectAgentButton,
3836
  .marketSearch {
3837
    width: 100%;
3838
    justify-content: center;
3839
  }
3840
3841
  .marketFilters {
3842
    display: grid;
3843
    grid-template-columns: 1fr 1fr;
3844
    width: 100%;
3845
  }
3846
3847
  .marketFilters .marketSearch {
3848
    grid-column: 1 / -1;
3849
  }
3850
3851
  .marketFilters select,
3852
  .marketFilters > label:not(.marketSearch) input {
3853
    width: 100%;
3854
    min-width: 0;
3855
  }
3856
3857
  .agentIntelligence {
3858
    grid-template-columns: 1fr;
3859
  }
3860
3861
  .intelligenceTrend {
3862
    text-align: left;
3863
  }
3864
3865
  .intelligenceSignals {
3866
    grid-column: auto;
3867
  }
3868
3869
  .agentRowSummary {
3870
    grid-template-columns: minmax(0, 1fr) auto auto;
3871
    gap: 11px;
3872
    min-height: 74px;
3873
    padding: 12px;
3874
  }
3875
3876
  .agentRowCore {
3877
    grid-template-columns: auto minmax(0, 1fr);
3878
    gap: 11px;
3879
  }
3880
3881
  .scorecardTeaser {
3882
    grid-template-columns: 32px;
3883
    gap: 0;
3884
    width: 48px;
3885
    padding: 7px;
3886
  }
3887
3888
  .scorecardTeaser > span:last-child {
3889
    display: none;
3890
  }
3891
3892
  .scorecardIdentity {
3893
    display: grid;
3894
    align-items: start;
3895
  }
3896
3897
  .scorecardContext {
3898
    justify-content: flex-start;
3899
  }
3900
3901
  .scorecardMetrics {
3902
    grid-template-columns: 1fr;
3903
  }
3904
3905
  .scorecardMetrics > div:nth-child(odd) {
3906
    border-right: 0;
3907
  }
3908
3909
  .scorecardMetrics > div {
3910
    grid-template-columns: minmax(120px, 1fr) minmax(70px, 0.8fr) 30px;
3911
    padding: 10px 14px;
3912
  }
3913
3914
  .scorecardFoot {
3915
    grid-template-columns: 1fr 1fr;
3916
  }
3917
3918
  .scorecardFoot small {
3919
    display: none;
3920
  }
3921
3922
  .scorecardActions {
3923
    display: grid;
3924
    grid-template-columns: repeat(3, 1fr);
3925
  }
3926
3927
  .scorecardActions > span {
3928
    grid-column: 1 / -1;
3929
  }
3930
3931
  .scorecardActions button {
3932
    justify-content: center;
3933
    padding: 0 8px;
3934
    font-size: 8px;
3935
  }
3936
3937
  .agentExpanded {
3938
    padding: 8px 12px 18px;
3939
  }
3940
3941
  .agentDetailStrip {
3942
    display: grid;
3943
    grid-template-columns: repeat(3, 1fr);
3944
  }
3945
3946
  .agentDetailStrip > span {
3947
    min-width: 0;
3948
    padding: 10px;
3949
  }
3950
3951
  .agentDetailStrip a {
3952
    grid-column: 1 / -1;
3953
    min-height: 38px;
3954
    margin-left: 0;
3955
    border-top: 1px solid var(--border);
3956
  }
3957
3958
  .agentHistory li {
3959
    grid-template-columns: auto minmax(0, 1fr) auto;
3960
  }
3961
3962
  .historyPurpose {
3963
    display: none;
3964
  }
3965
3966
  .marketGrid {
3967
    grid-template-columns: 1fr;
3968
  }
3969
}
3970
3971
/* Authenticated product — same protocol chrome as the landing */
3972
html:has(.appInset) {
3973
  scrollbar-gutter: stable;
3974
  scrollbar-width: thin;
3975
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
3976
    color-mix(in srgb, var(--bg) 92%, var(--border));
3977
}
3978
3979
html:has(.appInset)::-webkit-scrollbar,
3980
html:has(.appInset) body::-webkit-scrollbar {
3981
  width: 10px;
3982
}
3983
3984
html:has(.appInset)::-webkit-scrollbar-track,
3985
html:has(.appInset) body::-webkit-scrollbar-track {
3986
  background: var(--bg);
3987
  box-shadow: inset 1px 0 0 var(--border);
3988
}
3989
3990
html:has(.appInset)::-webkit-scrollbar-thumb,
3991
html:has(.appInset) body::-webkit-scrollbar-thumb {
3992
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
3993
  border: 3px solid var(--bg);
3994
  background-clip: padding-box;
3995
}
3996
3997
[data-slot='sidebar-wrapper'] {
3998
  background: var(--bg);
3999
}
4000
4001
[data-slot='sidebar'] {
4002
  border-right: 1px solid var(--border);
4003
  background: var(--bg) !important;
4004
}
4005
4006
[data-slot='sidebar-inner'] {
4007
  border: 0 !important;
4008
  border-radius: 0 !important;
4009
  background: var(--bg) !important;
4010
  box-shadow: none !important;
4011
}
4012
4013
[data-slot='sidebar-header'] {
4014
  padding: 16px 12px 14px;
4015
  border-bottom: 1px solid var(--border);
4016
}
4017
4018
[data-slot='sidebar-content'] {
4019
  padding: 10px 8px;
4020
}
4021
4022
[data-slot='sidebar-footer'] {
4023
  padding: 8px;
4024
  border-top: 1px solid var(--border);
4025
}
4026
4027
.sidebarBrandMark {
4028
  display: block;
4029
  width: 18px;
4030
  height: 18px;
4031
  flex: none;
4032
  color: var(--accent);
4033
}
4034
4035
.sidebarBrandText {
4036
  min-width: 0;
4037
  font-family: var(--mono);
4038
  font-size: 13px;
4039
  font-weight: 500;
4040
  letter-spacing: 0.04em;
4041
  text-transform: lowercase;
4042
}
4043
4044
.sidebarBrandText strong {
4045
  font-weight: 500;
4046
}
4047
4048
[data-sidebar='menu-button'] {
4049
  min-height: 34px;
4050
  border: 0 !important;
4051
  border-radius: 0 !important;
4052
  color: var(--text-muted);
4053
  font-family: var(--mono);
4054
  font-size: 12px;
4055
  letter-spacing: 0.04em;
4056
  text-transform: lowercase;
4057
  background: transparent !important;
4058
  box-shadow: none !important;
4059
}
4060
4061
[data-sidebar='menu-button']:hover {
4062
  color: var(--text);
4063
  background: transparent !important;
4064
}
4065
4066
[data-sidebar='menu-button'][data-active='true'] {
4067
  color: var(--text) !important;
4068
  background: transparent !important;
4069
  box-shadow: inset 2px 0 0 var(--accent);
4070
}
4071
4072
[data-sidebar='menu-button'][data-active='true'] svg {
4073
  color: var(--accent);
4074
}
4075
4076
[data-sidebar='menu-badge'] {
4077
  min-width: 16px;
4078
  height: 16px;
4079
  border: 0;
4080
  border-radius: 0;
4081
  color: var(--accent) !important;
4082
  background: transparent !important;
4083
  font: 500 10px/1 var(--mono);
4084
}
4085
4086
.appInset {
4087
  min-width: 0;
4088
  background: var(--bg) !important;
4089
}
4090
4091
.appTopbar {
4092
  position: sticky;
4093
  top: 0;
4094
  z-index: 8;
4095
  min-height: 52px;
4096
  padding: 0 28px;
4097
  border-bottom: 1px solid var(--border);
4098
  background: color-mix(in srgb, var(--bg) 88%, transparent);
4099
  backdrop-filter: blur(12px);
4100
  -webkit-backdrop-filter: blur(12px);
4101
}
4102
4103
.appTopbar [data-sidebar='trigger'] {
4104
  border: 1px solid var(--border);
4105
  border-radius: 0;
4106
  background: transparent;
4107
}
4108
4109
.commandTrigger {
4110
  height: 34px !important;
4111
  border-color: var(--border) !important;
4112
  border-radius: 0 !important;
4113
  background: transparent !important;
4114
  box-shadow: none !important;
4115
}
4116
4117
.appMain {
4118
  width: min(100%, 1120px);
4119
  max-width: none;
4120
  margin: 0 auto;
4121
  padding: 32px 32px 80px;
4122
}
4123
4124
.previewBanner {
4125
  width: fit-content;
4126
  margin-bottom: 18px;
4127
  padding: 0;
4128
  border: 0;
4129
  border-radius: 0;
4130
  color: var(--text-faint);
4131
  background: transparent;
4132
  font: 400 11px/1.4 var(--mono);
4133
  letter-spacing: 0.06em;
4134
  text-transform: lowercase;
4135
}
4136
4137
.previewBanner::before {
4138
  content: none;
4139
}
4140
4141
.pageKicker {
4142
  display: flex;
4143
  align-items: center;
4144
  gap: 10px;
4145
  margin: 0 0 10px;
4146
  color: var(--text-faint);
4147
  font-family: var(--mono);
4148
  font-size: 11px;
4149
  letter-spacing: 0.08em;
4150
  text-transform: lowercase;
4151
}
4152
4153
.pageKicker > span {
4154
  color: var(--accent);
4155
}
4156
4157
.pageHead {
4158
  min-height: 0;
4159
  padding: 0 0 24px;
4160
  border-bottom: 1px solid var(--border);
4161
}
4162
4163
.pageHead h1 {
4164
  font-size: clamp(28px, 3.4vw, 36px);
4165
  font-weight: 500;
4166
  letter-spacing: -0.04em;
4167
}
4168
4169
.pageHead p.lede {
4170
  margin-top: 8px;
4171
  font-size: 14px;
4172
}
4173
4174
.primary,
4175
.secondary,
4176
.dangerButton {
4177
  min-height: 34px;
4178
  border-radius: 0;
4179
  font-weight: 500;
4180
  letter-spacing: 0.04em;
4181
  text-transform: lowercase;
4182
  box-shadow: none;
4183
}
4184
4185
.primary {
4186
  box-shadow: none;
4187
}
4188
4189
.primary:hover {
4190
  transform: none;
4191
  box-shadow: none;
4192
}
4193
4194
.primary:active,
4195
.secondary:active,
4196
.dangerButton:active {
4197
  transform: translateY(1px);
4198
}
4199
4200
.secondary {
4201
  background: transparent;
4202
}
4203
4204
.attentionBanner,
4205
.readiness {
4206
  min-height: 0;
4207
  margin-top: 16px;
4208
  padding: 14px 0;
4209
  border: 0;
4210
  border-bottom: 1px solid var(--border);
4211
  border-radius: 0;
4212
  background: transparent;
4213
  box-shadow: none;
4214
}
4215
4216
.attentionBanner {
4217
  border-color: transparent;
4218
  border-bottom-color: var(--accent-line);
4219
  background: transparent;
4220
}
4221
4222
.attentionBanner:hover {
4223
  border-color: transparent;
4224
  border-bottom-color: var(--accent);
4225
  transform: none;
4226
}
4227
4228
.statusIndex {
4229
  min-width: 1.6em;
4230
}
4231
4232
.metrics {
4233
  gap: 24px;
4234
  margin: 22px 0 8px;
4235
}
4236
4237
.metric {
4238
  min-height: 0;
4239
  padding: 4px 0;
4240
  border: 0;
4241
  border-radius: 0;
4242
  background: transparent;
4243
  box-shadow: none;
4244
}
4245
4246
.metric:hover {
4247
  border-color: transparent;
4248
  transform: none;
4249
}
4250
4251
.metric::before {
4252
  position: static;
4253
  width: 16px;
4254
  height: 1px;
4255
  margin: 0 0 10px;
4256
  border-radius: 0;
4257
  box-shadow: none;
4258
  background: var(--accent);
4259
}
4260
4261
.metric.warn::before {
4262
  background: var(--warn);
4263
  box-shadow: none;
4264
}
4265
4266
.metric > strong {
4267
  margin: 0 0 6px;
4268
  font-size: 28px;
4269
}
4270
4271
.panel,
4272
.setupRequests,
4273
.agentCard,
4274
.settingsCard,
4275
.insightPrinciple,
4276
.journeyDetail {
4277
  border: 0;
4278
  border-radius: 0;
4279
  background: transparent;
4280
  box-shadow: none;
4281
}
4282
4283
.panel {
4284
  padding: 8px 0 0;
4285
}
4286
4287
.panelHead {
4288
  padding-bottom: 12px;
4289
}
4290
4291
.panelHead h2,
4292
.panelKicker {
4293
  display: flex;
4294
  align-items: center;
4295
  gap: 8px;
4296
  margin: 0;
4297
  color: var(--text);
4298
  font: 500 12px/1.4 var(--mono);
4299
  letter-spacing: 0.06em;
4300
  text-transform: lowercase;
4301
}
4302
4303
.panelKicker > span,
4304
.panelHead h2 > span {
4305
  color: var(--accent);
4306
}
4307
4308
.panelHead p {
4309
  margin: 6px 0 0;
4310
}
4311
4312
.setupRequests > div:first-child h2 {
4313
  margin: 8px 0 4px;
4314
  font-size: 22px;
4315
  font-weight: 500;
4316
  letter-spacing: -0.03em;
4317
}
4318
4319
.setupRequests {
4320
  margin: 18px 0;
4321
  padding: 8px 0;
4322
}
4323
4324
.setupRequest {
4325
  padding: 14px 0;
4326
  border-bottom: 1px solid var(--border);
4327
}
4328
4329
.historyRow {
4330
  margin: 0;
4331
  padding: 12px 0;
4332
  border-radius: 0;
4333
}
4334
4335
.historyRow:hover {
4336
  background: transparent;
4337
  transform: none;
4338
}
4339
4340
.agentGrid,
4341
.insightGrid {
4342
  gap: 16px;
4343
}
4344
4345
.agentCard {
4346
  min-height: 0;
4347
  padding: 18px 0;
4348
  border-top: 1px solid var(--border);
4349
}
4350
4351
.agentCard:hover {
4352
  border-color: var(--border);
4353
  box-shadow: none;
4354
  transform: none;
4355
}
4356
4357
.runtimeBox,
4358
.accessTokenBox,
4359
.notice,
4360
.successBanner,
4361
.conversationInsights,
4362
.outcomeCard,
4363
.insightStats span {
4364
  border-radius: 0;
4365
}
4366
4367
.runtimeBox input,
4368
.automationForm input,
4369
.automationForm select,
4370
.setting input,
4371
.setting select,
4372
.searchField,
4373
.providerForm input,
4374
.providerForm select,
4375
.providerForm textarea,
4376
.replyBox textarea {
4377
  border-radius: 0;
4378
}
4379
4380
.settingsCard {
4381
  padding: 0;
4382
}
4383
4384
.connectionTypePicker button {
4385
  border-radius: 0;
4386
  background: transparent;
4387
}
4388
4389
.threadList,
4390
.conversationDetail,
4391
.journeyDetail {
4392
  padding: 0;
4393
  border: 0;
4394
  border-radius: 0;
4395
  background: transparent;
4396
  box-shadow: none;
4397
}
4398
4399
.threadList > button,
4400
.journeyList > button {
4401
  border-radius: 0;
4402
}
4403
4404
[data-slot='dialog-content'],
4405
[data-slot='dropdown-menu-content'],
4406
[data-slot='command-dialog-content'] {
4407
  border-color: var(--border-strong) !important;
4408
  border-radius: 0 !important;
4409
  background: var(--popover) !important;
4410
  box-shadow: none !important;
4411
}
4412
4413
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
4414
  text-transform: lowercase;
4415
}
4416
4417
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
4418
  font-family: var(--mono);
4419
  font-size: 11px;
4420
  letter-spacing: 0.03em;
4421
}
4422
4423
.appInset [data-slot='tabs-list'],
4424
.appInset [data-slot='tabs-trigger'] {
4425
  border-radius: 0 !important;
4426
}
4427
4428
.appInset [data-slot='tabs-trigger'] {
4429
  font-family: var(--mono);
4430
  font-size: 11px;
4431
  letter-spacing: 0.06em;
4432
  text-transform: lowercase;
4433
  background: transparent !important;
4434
  box-shadow: none !important;
4435
}
4436
4437
.appInset
4438
  [data-slot='tabs-list'][data-variant='line']
4439
  [data-slot='tabs-trigger'][data-state='active']::after {
4440
  height: 1px;
4441
  background: var(--accent);
4442
}
4443
4444
.textButton {
4445
  font-weight: 500;
4446
  letter-spacing: 0.04em;
4447
  text-transform: lowercase;
4448
}
4449
4450
.insightPrinciple .pageKicker {
4451
  margin-bottom: 8px;
4452
}
4453
4454
.setupRequests > div:first-child .pageKicker {
4455
  margin-bottom: 8px;
4456
}
4457
4458
.connectionTypePicker button {
4459
  font-weight: 500;
4460
  letter-spacing: 0.02em;
4461
}
4462
4463
@media (max-width: 840px) {
4464
  .appTopbar {
4465
    min-height: 48px;
4466
    padding: 0 16px;
4467
  }
4468
4469
  .appMain {
4470
    padding: 20px 16px 64px;
4471
  }
4472
4473
  .pageHead {
4474
    min-height: 0;
4475
  }
4476
}
4477
4478
@media (max-width: 980px) {
4479
  .contentGrid,
4480
  .connectLayout,
4481
  .conversationLayout,
4482
  .journeyLayout,
4483
  .insightPrinciple {
4484
    grid-template-columns: 1fr;
4485
  }
4486
4487
  .journeyList {
4488
    grid-template-columns: repeat(2, minmax(0, 1fr));
4489
  }
4490
4491
  .loginPage {
4492
    grid-template-columns: 1fr;
4493
  }
4494
4495
  .loginPitch {
4496
    display: none;
4497
  }
4498
4499
  .loginCard {
4500
    min-height: 100vh;
4501
    border: 0;
4502
  }
4503
4504
  .metrics {
4505
    grid-template-columns: 1fr 1fr;
4506
  }
4507
4508
  .agentGrid {
4509
    grid-template-columns: 1fr;
4510
  }
4511
4512
  .insightGrid {
4513
    grid-template-columns: 1fr;
4514
  }
4515
}
4516
4517
@media (max-width: 840px) {
4518
  .appTopbar {
4519
    min-height: 48px;
4520
    padding: 0 16px;
4521
  }
4522
4523
  .appMain {
4524
    padding: 16px 16px 64px;
4525
  }
4526
4527
  .pageHead {
4528
    align-items: flex-start;
4529
    flex-direction: column;
4530
  }
4531
4532
  .setting {
4533
    grid-template-columns: 1fr;
4534
    gap: 12px;
4535
  }
4536
4537
  .connectionTypePicker,
4538
  .providerForm {
4539
    grid-template-columns: 1fr;
4540
  }
4541
4542
  .providerSubmit {
4543
    align-items: flex-start;
4544
    flex-direction: column;
4545
  }
4546
4547
  .tokenList > div {
4548
    align-items: flex-start;
4549
    flex-direction: column;
4550
  }
4551
4552
  .toggle {
4553
    margin-left: 0;
4554
  }
4555
4556
  .endpoint {
4557
    flex-direction: column;
4558
  }
4559
4560
  .readiness,
4561
  .attentionBanner,
4562
  .setupRequest {
4563
    align-items: flex-start;
4564
    flex-direction: column;
4565
  }
4566
4567
  .readiness > button,
4568
  .attentionBanner,
4569
  .decisionButtons {
4570
    width: 100%;
4571
  }
4572
4573
  .decisionButtons button {
4574
    flex: 1;
4575
  }
4576
4577
  .loginCard {
4578
    padding: 28px 20px;
4579
  }
4580
4581
  .historyRow > b {
4582
    display: none;
4583
  }
4584
4585
  .journeyList {
4586
    grid-template-columns: 1fr;
4587
  }
4588
4589
  .journeySummaryGrid,
4590
  .ratingGrid,
4591
  .insightStats {
4592
    grid-template-columns: 1fr;
4593
  }
4594
4595
  .journeySummaryGrid section {
4596
    border-right: 0;
4597
    border-bottom: 1px solid var(--border);
4598
  }
4599
4600
  .journeySummaryGrid section:last-child {
4601
    border-bottom: 0;
4602
  }
4603
4604
  .journeyTimeline li {
4605
    grid-template-columns: 8px minmax(0, 1fr);
4606
  }
4607
4608
  .journeyTimeline li > .statusPill {
4609
    grid-column: 2;
4610
    margin-top: -12px;
4611
    margin-bottom: 16px;
4612
  }
4613
}