DocsLog in

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

Viewing files at commit 20744dd65349Commit detailsView latest

apps/dashboard/src/styles.css 5231 lines · 87.7 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: center;
448
  justify-content: space-between;
449
  gap: 16px;
450
  min-height: 42px;
451
  padding-bottom: 16px;
452
  border-bottom: 1px solid var(--border);
453
}
454
455
.pageHead h1 {
456
  margin: 0;
457
  font-size: 16px;
458
  font-weight: 500;
459
  letter-spacing: 0;
460
  line-height: 1.2;
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: 16px;
641
  font-weight: 500;
642
  letter-spacing: 0;
643
}
644
645
.setupRequests > div:first-child > p:last-child {
646
  margin: 0 0 16px;
647
  color: var(--text-muted);
648
  font-size: 13px;
649
}
650
651
.setupRequest {
652
  display: flex;
653
  align-items: center;
654
  justify-content: space-between;
655
  gap: 16px;
656
  padding: 16px 0;
657
  border: 0;
658
  border-bottom: 1px solid var(--border);
659
  border-radius: 0;
660
  background: transparent;
661
}
662
663
.setupRequest + .setupRequest {
664
  margin-top: 10px;
665
}
666
667
.setupRequest > div:first-child {
668
  display: flex;
669
  min-width: 0;
670
  flex-direction: column;
671
  gap: 4px;
672
}
673
674
.setupRequest strong {
675
  font-size: 14px;
676
}
677
678
.setupRequest small {
679
  color: var(--text-muted);
680
  font: 12px/1.4 var(--mono);
681
}
682
683
.decisionButtons {
684
  display: flex;
685
  flex: none;
686
  gap: 8px;
687
}
688
689
.setupRequests > .loginError {
690
  margin-top: 10px;
691
}
692
693
.panel {
694
  min-width: 0;
695
  padding: 6px 0 0;
696
  border: 0;
697
  border-radius: 0;
698
  background: transparent;
699
}
700
701
.panelHead {
702
  padding-bottom: 14px;
703
  border-bottom: 1px solid var(--border);
704
}
705
706
.panelHead h2 {
707
  margin: 0;
708
  font-size: 20px;
709
  font-weight: 600;
710
  letter-spacing: -0.03em;
711
}
712
713
.panelHead p {
714
  margin: 4px 0 0;
715
  color: var(--text-muted);
716
  font-size: 13px;
717
}
718
719
.toolbar {
720
  display: flex;
721
  flex-wrap: wrap;
722
  align-items: center;
723
  gap: 10px;
724
  margin: 16px 0 8px;
725
}
726
727
.searchField {
728
  min-width: 220px;
729
  flex: 1;
730
  padding: 10px 0;
731
  border: 0;
732
  border-bottom: 1px solid var(--border-strong);
733
  border-radius: 0;
734
  color: var(--text);
735
  background: transparent;
736
  font-size: 13px;
737
}
738
739
.filterRow {
740
  display: flex;
741
  flex-wrap: wrap;
742
  gap: 6px;
743
}
744
745
.filterChip {
746
  padding: 6px 0;
747
  border: 0;
748
  border-bottom: 1px solid transparent;
749
  border-radius: 0;
750
  color: var(--text-muted);
751
  background: transparent;
752
  font: 500 11px/1.3 var(--mono);
753
  letter-spacing: 0.06em;
754
  text-transform: lowercase;
755
  cursor: pointer;
756
}
757
758
.filterChip.active,
759
.filterChip:hover {
760
  color: var(--text);
761
  background: transparent;
762
}
763
764
.filterChip.active {
765
  border-color: var(--accent);
766
  color: var(--text);
767
  background: transparent;
768
}
769
770
.historyRow {
771
  display: flex;
772
  align-items: center;
773
  gap: 12px;
774
  padding: 13px 4px;
775
  border-bottom: 1px solid var(--border);
776
}
777
778
.historyRow:last-child {
779
  border-bottom: 0;
780
}
781
782
.historyRow:hover {
783
  background: transparent;
784
}
785
786
.historyRow > div {
787
  display: flex;
788
  min-width: 0;
789
  flex: 1;
790
  flex-direction: column;
791
  gap: 3px;
792
}
793
794
.historyRow strong {
795
  font-size: 13px;
796
  font-weight: 600;
797
  text-transform: capitalize;
798
}
799
800
.historyRow small {
801
  overflow: hidden;
802
  color: var(--text-muted);
803
  font: 12px/1.4 var(--mono);
804
  text-overflow: ellipsis;
805
  white-space: nowrap;
806
}
807
808
.historyRow > b {
809
  color: var(--text-faint);
810
  font: 11px/1.3 var(--mono);
811
  text-transform: uppercase;
812
}
813
814
.eventDot {
815
  width: 6px;
816
  height: 6px;
817
  flex: none;
818
  border-radius: 0;
819
  background: var(--live);
820
}
821
822
.eventDot.policy_warning,
823
.eventDot.objection {
824
  background: var(--warn);
825
}
826
827
.eventDot.policy_violation,
828
.eventDot.dispute {
829
  background: var(--danger);
830
}
831
832
.eventDot.receipt {
833
  background: var(--info);
834
}
835
836
.textButton {
837
  margin-top: 14px;
838
  padding: 0;
839
  border: 0;
840
  color: var(--accent);
841
  background: transparent;
842
  font-size: 13px;
843
  font-weight: 600;
844
  cursor: pointer;
845
}
846
847
.empty {
848
  display: grid;
849
  min-height: 180px;
850
  place-items: center;
851
  align-content: center;
852
  padding: 28px;
853
  text-align: center;
854
}
855
856
.empty > span,
857
.empty > svg {
858
  display: block;
859
  margin-bottom: 12px;
860
  color: var(--accent);
861
  font: 500 16px/1 var(--mono);
862
}
863
864
.empty strong {
865
  font-size: 15px;
866
  font-weight: 500;
867
}
868
869
.empty p {
870
  max-width: 420px;
871
  margin: 8px 0 16px;
872
  color: var(--text-muted);
873
  font-size: 13px;
874
  line-height: 1.55;
875
}
876
877
.profile {
878
  padding: 16px 0;
879
  border-bottom: 1px solid var(--border);
880
}
881
882
.profile:last-child {
883
  border-bottom: 0;
884
}
885
886
.profile > div:first-child {
887
  display: flex;
888
  justify-content: space-between;
889
  gap: 12px;
890
  margin-bottom: 12px;
891
}
892
893
.profile > div:first-child strong {
894
  font-size: 13px;
895
}
896
897
.profile > div:first-child small {
898
  color: var(--text-muted);
899
  font: 12px/1.3 var(--mono);
900
}
901
902
.meter {
903
  display: grid;
904
  grid-template-columns: 96px 1fr 40px;
905
  align-items: center;
906
  gap: 10px;
907
  margin: 8px 0;
908
  color: var(--text-muted);
909
  font: 11px/1.3 var(--mono);
910
}
911
912
.meter i {
913
  height: 1px;
914
  overflow: hidden;
915
  border-radius: 0;
916
  background: var(--border);
917
}
918
919
.meter i b {
920
  display: block;
921
  height: 100%;
922
  background: var(--accent);
923
}
924
925
.meter strong {
926
  text-align: right;
927
}
928
929
.agentGrid {
930
  display: grid;
931
  grid-template-columns: repeat(2, minmax(0, 1fr));
932
  gap: 16px;
933
  margin-top: 18px;
934
}
935
936
.agentGrid > .empty {
937
  grid-column: 1 / -1;
938
  border: 0;
939
  border-radius: 0;
940
  background: transparent;
941
}
942
943
.agentCard {
944
  display: flex;
945
  min-height: 230px;
946
  flex-direction: column;
947
  padding: 8px 4px 12px;
948
  border: 0;
949
  border-top: 1px solid var(--border);
950
  border-radius: 0;
951
  background: transparent;
952
}
953
954
.agentTop {
955
  display: flex;
956
  align-items: flex-start;
957
  justify-content: space-between;
958
  gap: 12px;
959
}
960
961
.agentGlyph {
962
  display: grid;
963
  width: 28px;
964
  height: 28px;
965
  place-items: center;
966
  border: 0;
967
  border-radius: 0;
968
  color: var(--accent);
969
  background: transparent;
970
}
971
972
.agentGlyph svg {
973
  width: 18px;
974
  height: 18px;
975
}
976
977
.agentBadges {
978
  display: flex;
979
  flex-wrap: wrap;
980
  justify-content: flex-end;
981
  gap: 6px;
982
}
983
984
.agentTop b {
985
  padding: 0;
986
  border: 0;
987
  border-radius: 0;
988
  color: var(--text-muted);
989
  background: transparent;
990
  font: 11px/1.3 var(--mono);
991
  letter-spacing: 0.04em;
992
  text-transform: lowercase;
993
}
994
995
.agentTop b.bad {
996
  color: var(--danger);
997
  background: transparent;
998
}
999
1000
.agentTop .readyBadge,
1001
.agentTop .onlineBadge {
1002
  color: var(--live);
1003
  background: transparent;
1004
}
1005
1006
:root[data-theme='dark'] .agentTop .readyBadge,
1007
:root[data-theme='dark'] .agentTop .onlineBadge {
1008
  color: var(--live);
1009
}
1010
1011
.agentTop .needsBadge {
1012
  color: var(--warn);
1013
  background: transparent;
1014
}
1015
1016
.agentTop .offlineBadge {
1017
  color: var(--text-faint);
1018
}
1019
1020
.agentCard h2 {
1021
  margin: 18px 0 4px;
1022
  font-size: 18px;
1023
  letter-spacing: -0.03em;
1024
}
1025
1026
.agentCard p,
1027
.agentCard > small {
1028
  color: var(--text-muted);
1029
  font-size: 13px;
1030
}
1031
1032
.agentCard > small {
1033
  display: block;
1034
  margin-top: 10px;
1035
}
1036
1037
.agentPublicLinks {
1038
  display: flex;
1039
  flex-wrap: wrap;
1040
  gap: 12px;
1041
  margin-top: 10px;
1042
}
1043
1044
.agentPublicLinks a {
1045
  color: var(--accent);
1046
  font-size: 13px;
1047
  font-weight: 600;
1048
  text-decoration: none;
1049
}
1050
1051
.agentPublicLinks a:hover {
1052
  text-decoration: underline;
1053
}
1054
1055
.agentCard > button,
1056
.agentCard > .agentActions {
1057
  width: 100%;
1058
  margin-top: 16px;
1059
}
1060
1061
.automationSummary {
1062
  display: flex;
1063
  flex-wrap: wrap;
1064
  gap: 6px;
1065
  margin-top: 14px;
1066
}
1067
1068
.automationSummary span,
1069
.automationPreview span {
1070
  padding: 5px 0;
1071
  border: 0;
1072
  border-radius: 0;
1073
  color: var(--text-muted);
1074
  background: transparent;
1075
  font: 11px/1.3 var(--mono);
1076
}
1077
1078
.automationForm {
1079
  display: grid;
1080
  gap: 12px;
1081
  margin-top: 16px;
1082
  padding-top: 16px;
1083
  border-top: 1px solid var(--border);
1084
}
1085
1086
.runtimeBox {
1087
  display: grid;
1088
  gap: 10px;
1089
  margin-top: 16px;
1090
  padding: 14px 0 0;
1091
  border: 0;
1092
  border-top: 1px solid var(--border);
1093
  border-radius: 0;
1094
  background: transparent;
1095
}
1096
1097
.runtimeBox > div:first-child {
1098
  display: flex;
1099
  align-items: center;
1100
  justify-content: space-between;
1101
  gap: 12px;
1102
}
1103
1104
.runtimeBox p,
1105
.runtimeBox small {
1106
  margin: 0;
1107
  color: var(--text-muted);
1108
  font-size: 12px;
1109
  line-height: 1.5;
1110
}
1111
1112
.runtimeBox input,
1113
.automationForm input,
1114
.automationForm select,
1115
.setting input,
1116
.setting select {
1117
  width: 100%;
1118
  padding: 10px 0;
1119
  border: 0;
1120
  border-bottom: 1px solid var(--border-strong);
1121
  border-radius: 0;
1122
  color: var(--text);
1123
  background: transparent;
1124
  font-size: 13px;
1125
}
1126
1127
.runtimeBox input:focus,
1128
.automationForm input:focus,
1129
.automationForm select:focus,
1130
.setting input:focus,
1131
.setting select:focus,
1132
.searchField:focus {
1133
  border-color: var(--accent);
1134
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1135
}
1136
1137
.runtimeLive,
1138
.runtimeMissing {
1139
  font: 11px/1.3 var(--mono);
1140
}
1141
1142
.runtimeLive {
1143
  color: var(--live);
1144
}
1145
1146
.runtimeMissing {
1147
  color: var(--warn);
1148
}
1149
1150
.accessTokenBox {
1151
  display: grid;
1152
  gap: 12px;
1153
  margin-top: 12px;
1154
  padding: 14px 0 0;
1155
  border: 0;
1156
  border-top: 1px solid var(--border);
1157
  border-radius: 0;
1158
  background: transparent;
1159
}
1160
1161
.accessTokenHead > div {
1162
  display: flex;
1163
  align-items: center;
1164
  justify-content: space-between;
1165
  gap: 12px;
1166
}
1167
1168
.accessTokenHead span {
1169
  color: var(--accent);
1170
  font: 11px/1.3 var(--mono);
1171
}
1172
1173
.accessTokenHead p {
1174
  margin: 8px 0 0;
1175
  color: var(--text-muted);
1176
  font-size: 12px;
1177
  line-height: 1.5;
1178
}
1179
1180
.tokenList {
1181
  display: grid;
1182
  border-top: 1px solid var(--border);
1183
}
1184
1185
.tokenList > div {
1186
  display: flex;
1187
  align-items: center;
1188
  justify-content: space-between;
1189
  gap: 12px;
1190
  padding-top: 10px;
1191
}
1192
1193
.tokenList span {
1194
  display: grid;
1195
  min-width: 0;
1196
  gap: 3px;
1197
}
1198
1199
.tokenList small {
1200
  color: var(--text-muted);
1201
  font: 10px/1.4 var(--mono);
1202
}
1203
1204
.automationForm label {
1205
  display: grid;
1206
  gap: 6px;
1207
  color: var(--text-muted);
1208
  font-size: 12px;
1209
}
1210
1211
.automationForm .checkControl {
1212
  display: flex;
1213
  grid-template-columns: none;
1214
  align-items: center;
1215
  gap: 8px;
1216
}
1217
1218
.automationForm .checkControl input {
1219
  width: 15px;
1220
  height: 15px;
1221
  accent-color: var(--accent);
1222
}
1223
1224
.agentActions {
1225
  display: flex;
1226
  justify-content: flex-end;
1227
  gap: 8px;
1228
}
1229
1230
.agentManagementActions {
1231
  justify-content: space-between;
1232
}
1233
1234
.dangerButton {
1235
  border-color: var(--danger-line);
1236
  color: var(--danger);
1237
  background: var(--danger-dim);
1238
}
1239
1240
.dangerButton:hover:not(:disabled) {
1241
  border-color: var(--danger);
1242
}
1243
1244
.automationPreview {
1245
  display: flex;
1246
  flex-wrap: wrap;
1247
  gap: 6px;
1248
  margin-top: 8px;
1249
}
1250
1251
.autoAccepted {
1252
  color: var(--live) !important;
1253
}
1254
1255
.tags {
1256
  display: flex;
1257
  flex-wrap: wrap;
1258
  gap: 6px;
1259
  margin-top: 12px;
1260
}
1261
1262
.tags span {
1263
  padding: 4px 0;
1264
  border: 0;
1265
  border-radius: 0;
1266
  color: var(--text-muted);
1267
  font: 11px/1.3 var(--mono);
1268
}
1269
1270
.tags span + span::before,
1271
.automationSummary span + span::before,
1272
.automationPreview span + span::before {
1273
  margin-right: 8px;
1274
  color: var(--accent);
1275
  content: '/';
1276
}
1277
1278
.notice {
1279
  margin: 18px 0;
1280
  padding: 4px 0 16px;
1281
  border: 0;
1282
  border-bottom: 1px solid var(--border);
1283
  color: var(--text-muted);
1284
  background: transparent;
1285
  font-size: 13px;
1286
}
1287
1288
.notice strong {
1289
  margin-right: 6px;
1290
  color: var(--text);
1291
}
1292
1293
.connectionTypePicker {
1294
  display: grid;
1295
  grid-template-columns: repeat(2, minmax(0, 1fr));
1296
  gap: 10px;
1297
  margin-top: 18px;
1298
}
1299
1300
.connectionTypePicker button {
1301
  display: grid;
1302
  gap: 5px;
1303
  padding: 14px 4px 16px;
1304
  border: 0;
1305
  border-top: 2px solid var(--border);
1306
  border-radius: 0;
1307
  color: var(--text);
1308
  background: transparent;
1309
  font-size: 14px;
1310
  font-weight: 600;
1311
  text-align: left;
1312
  cursor: pointer;
1313
}
1314
1315
.connectionTypePicker button.active {
1316
  border-color: var(--accent);
1317
  background: transparent;
1318
}
1319
1320
.connectionTypePicker small {
1321
  color: var(--text-muted);
1322
  font-size: 12px;
1323
  font-weight: 400;
1324
}
1325
1326
.connectLayout {
1327
  margin-top: 18px;
1328
}
1329
1330
.providerForm {
1331
  display: grid;
1332
  grid-template-columns: repeat(2, minmax(0, 1fr));
1333
  gap: 12px;
1334
  margin-top: 18px;
1335
}
1336
1337
.providerForm label,
1338
.providerResult label {
1339
  display: grid;
1340
  gap: 6px;
1341
  color: var(--text-muted);
1342
  font-size: 12px;
1343
}
1344
1345
.providerForm input,
1346
.providerForm select,
1347
.providerForm textarea {
1348
  width: 100%;
1349
  padding: 10px 0;
1350
  border: 0;
1351
  border-bottom: 1px solid var(--border-strong);
1352
  border-radius: 0;
1353
  color: var(--text);
1354
  background: transparent;
1355
  font: inherit;
1356
}
1357
1358
.providerForm textarea {
1359
  min-height: 82px;
1360
  resize: vertical;
1361
}
1362
1363
.providerForm .fullWidth {
1364
  grid-column: 1 / -1;
1365
}
1366
1367
.providerSubmit {
1368
  display: flex;
1369
  align-items: center;
1370
  justify-content: space-between;
1371
  gap: 12px;
1372
}
1373
1374
.providerSubmit p {
1375
  margin: 0;
1376
  color: var(--text-muted);
1377
  font-size: 12px;
1378
}
1379
1380
.providerResult {
1381
  display: grid;
1382
  gap: 14px;
1383
  margin-top: 18px;
1384
}
1385
1386
.providerResult code {
1387
  padding: 11px 0;
1388
  border: 0;
1389
  border-bottom: 1px solid var(--border);
1390
  border-radius: 0;
1391
  color: var(--accent);
1392
  background: transparent;
1393
  overflow-wrap: anywhere;
1394
  user-select: all;
1395
}
1396
1397
.successBanner {
1398
  display: grid;
1399
  gap: 3px;
1400
  padding: 12px 0;
1401
  border: 0;
1402
  border-radius: 0;
1403
  background: transparent;
1404
}
1405
1406
.successBanner span {
1407
  color: var(--text-muted);
1408
  font: 11px/1.4 var(--mono);
1409
  overflow-wrap: anywhere;
1410
}
1411
1412
.providerNotice {
1413
  margin-bottom: 0;
1414
}
1415
1416
.endpoint {
1417
  display: flex;
1418
  gap: 8px;
1419
  margin: 20px 0;
1420
}
1421
1422
.endpoint code {
1423
  overflow: auto;
1424
  flex: 1;
1425
  padding: 12px 0;
1426
  border: 0;
1427
  border-bottom: 1px solid var(--border);
1428
  border-radius: 0;
1429
  color: var(--accent);
1430
  background: transparent;
1431
  font: 13px/1.4 var(--mono);
1432
  white-space: nowrap;
1433
}
1434
1435
.endpoint button {
1436
  padding: 0 4px;
1437
  border: 0;
1438
  border-radius: 0;
1439
  color: var(--accent);
1440
  background: transparent;
1441
  font-weight: 600;
1442
  cursor: pointer;
1443
}
1444
1445
.connectLayout ol {
1446
  margin: 8px 0 0;
1447
  padding-left: 22px;
1448
  color: var(--text-muted);
1449
  font-size: 14px;
1450
  line-height: 1.7;
1451
}
1452
1453
.connectSteps {
1454
  display: grid;
1455
  gap: 12px;
1456
  margin-top: 18px;
1457
}
1458
1459
.connectStep {
1460
  display: grid;
1461
  grid-template-columns: 28px 1fr;
1462
  gap: 12px;
1463
  color: var(--text-muted);
1464
  font-size: 14px;
1465
}
1466
1467
.connectStep b {
1468
  display: grid;
1469
  width: 28px;
1470
  height: 28px;
1471
  place-items: center;
1472
  border-radius: 0;
1473
  color: var(--accent);
1474
  background: transparent;
1475
  font: 500 11px/1 var(--mono);
1476
}
1477
1478
.checkList {
1479
  margin: 16px 0 0;
1480
  padding: 0;
1481
  list-style: none;
1482
}
1483
1484
.checkList li {
1485
  padding: 11px 0;
1486
  border-bottom: 1px solid var(--border);
1487
  color: var(--text-muted);
1488
  font-size: 14px;
1489
}
1490
1491
.checkList li:last-child {
1492
  border-bottom: 0;
1493
}
1494
1495
.checkList li::before {
1496
  content: '✓';
1497
  margin-right: 10px;
1498
  color: var(--accent);
1499
}
1500
1501
.settingsCard {
1502
  margin-top: 10px;
1503
  border: 0;
1504
  border-radius: 0;
1505
  background: transparent;
1506
}
1507
1508
.setting {
1509
  display: grid;
1510
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1511
  align-items: center;
1512
  gap: 24px;
1513
  padding: 22px 0;
1514
  border-bottom: 1px solid var(--border);
1515
}
1516
1517
.setting strong {
1518
  font-size: 14px;
1519
}
1520
1521
.setting p {
1522
  max-width: 580px;
1523
  margin: 5px 0 0;
1524
  color: var(--text-muted);
1525
  font-size: 13px;
1526
  line-height: 1.5;
1527
}
1528
1529
.locked {
1530
  float: right;
1531
  color: var(--text-faint);
1532
  font: 12px/1.3 var(--mono);
1533
}
1534
1535
.toggle {
1536
  position: relative;
1537
  display: block;
1538
  width: 42px;
1539
  height: 22px;
1540
  margin-left: auto;
1541
  padding: 0;
1542
  border: 1px solid var(--border-strong);
1543
  border-radius: 0;
1544
  background: var(--bg-well);
1545
  cursor: pointer;
1546
}
1547
1548
.toggle span {
1549
  position: absolute;
1550
  top: 4px;
1551
  left: 4px;
1552
  width: 12px;
1553
  height: 12px;
1554
  border-radius: 0;
1555
  background: var(--text-faint);
1556
  transition: transform 0.18s ease;
1557
}
1558
1559
.toggle.on {
1560
  border-color: var(--accent);
1561
  background: var(--accent);
1562
}
1563
1564
.toggle.on span {
1565
  left: 4px;
1566
  background: #fff;
1567
  transform: translateX(18px);
1568
}
1569
1570
.saveRow {
1571
  display: flex;
1572
  align-items: center;
1573
  gap: 12px;
1574
  padding: 22px 0;
1575
}
1576
1577
.saveRow span {
1578
  color: var(--accent);
1579
  font-size: 13px;
1580
}
1581
1582
.loginPage {
1583
  display: grid;
1584
  grid-template-columns: 1.05fr 0.95fr;
1585
  min-height: 100vh;
1586
}
1587
1588
.loginPitch {
1589
  display: flex;
1590
  flex-direction: column;
1591
  justify-content: space-between;
1592
  padding: 48px 7vw;
1593
  background: transparent;
1594
}
1595
1596
.loginPitch h1 {
1597
  max-width: 680px;
1598
  margin: 10px 0 14px;
1599
  font-size: clamp(40px, 5.4vw, 72px);
1600
  font-weight: 600;
1601
  letter-spacing: -0.06em;
1602
  line-height: 0.94;
1603
}
1604
1605
.loginPitch > div > p:last-child {
1606
  max-width: 540px;
1607
  color: var(--text-muted);
1608
  font-size: 16px;
1609
  line-height: 1.65;
1610
}
1611
1612
.launchBadge {
1613
  display: inline-flex;
1614
  width: fit-content;
1615
  margin: 0 0 18px;
1616
  padding: 5px 10px;
1617
  border: 1px solid var(--accent-line);
1618
  border-radius: 999px;
1619
  color: var(--accent);
1620
  background: var(--accent-dim);
1621
  font: 500 11px/1.3 var(--mono);
1622
}
1623
1624
.loginProof {
1625
  display: grid;
1626
  grid-template-columns: auto 1fr;
1627
  gap: 10px 12px;
1628
  color: var(--text-muted);
1629
  font: 12px/1.3 var(--mono);
1630
  text-transform: uppercase;
1631
}
1632
1633
.loginProof span {
1634
  color: var(--accent);
1635
}
1636
1637
.loginCard {
1638
  display: flex;
1639
  flex-direction: column;
1640
  justify-content: center;
1641
  padding: 8vw;
1642
  gap: 28px;
1643
  border-left: 1px solid var(--border);
1644
  background: transparent;
1645
}
1646
1647
.loginCard h2 {
1648
  margin: 6px 0;
1649
  font-size: 28px;
1650
  font-weight: 600;
1651
  letter-spacing: -0.04em;
1652
}
1653
1654
.socialButtons {
1655
  display: grid;
1656
  gap: 10px;
1657
}
1658
1659
.socialButtons button {
1660
  display: flex;
1661
  align-items: center;
1662
  justify-content: center;
1663
  gap: 10px;
1664
  width: 100%;
1665
  padding: 13px;
1666
  border: 1px solid var(--border-strong);
1667
  border-radius: var(--radius-sm);
1668
  color: var(--text);
1669
  background: transparent;
1670
  font-size: 14px;
1671
  font-weight: 600;
1672
  cursor: pointer;
1673
}
1674
1675
.socialButtons button:first-child {
1676
  border-color: transparent;
1677
  color: var(--accent-ink);
1678
  background: var(--accent);
1679
  box-shadow: none;
1680
}
1681
1682
.socialButtons button:hover {
1683
  border-color: var(--accent);
1684
  background: var(--accent-dim);
1685
}
1686
1687
.socialButtons button:first-child:hover {
1688
  color: var(--accent-ink);
1689
  background: var(--accent-hover);
1690
}
1691
1692
.socialButtons svg {
1693
  width: 18px;
1694
  height: 18px;
1695
}
1696
1697
.loginError,
1698
.errorBar {
1699
  padding: 11px 0;
1700
  border: 0;
1701
  border-radius: 0;
1702
  color: var(--danger);
1703
  background: transparent;
1704
  font-size: 13px;
1705
}
1706
1707
.loginCard > div > p:last-child,
1708
.loginCard > small {
1709
  color: var(--text-muted);
1710
  font-size: 13px;
1711
  line-height: 1.55;
1712
}
1713
1714
.loading {
1715
  display: grid;
1716
  min-height: 100vh;
1717
  place-items: center;
1718
  align-content: center;
1719
  gap: 14px;
1720
  color: var(--text-muted);
1721
  font: 12px/1.3 var(--mono);
1722
  text-transform: uppercase;
1723
}
1724
1725
.loading.compact {
1726
  min-height: 50vh;
1727
}
1728
1729
.spinner {
1730
  width: 22px;
1731
  height: 22px;
1732
  border: 2px solid var(--border);
1733
  border-top-color: var(--accent);
1734
  border-radius: 50%;
1735
  animation: spin 0.8s linear infinite;
1736
}
1737
1738
.errorBar {
1739
  margin-bottom: 14px;
1740
}
1741
1742
@keyframes spin {
1743
  to {
1744
    transform: rotate(360deg);
1745
  }
1746
}
1747
1748
@keyframes fadeUp {
1749
  from {
1750
    opacity: 0;
1751
    transform: translateY(8px);
1752
  }
1753
  to {
1754
    opacity: 1;
1755
    transform: none;
1756
  }
1757
}
1758
1759
@keyframes pulse {
1760
  0%,
1761
  100% {
1762
    opacity: 1;
1763
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
1764
  }
1765
  50% {
1766
    opacity: 0.55;
1767
    box-shadow: 0 0 0 6px transparent;
1768
  }
1769
}
1770
1771
.conversationLayout {
1772
  display: grid;
1773
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1774
  gap: 16px;
1775
}
1776
1777
.threadList,
1778
.conversationDetail,
1779
.messageList {
1780
  display: grid;
1781
  gap: 10px;
1782
}
1783
1784
.threadList > button {
1785
  display: flex;
1786
  align-items: center;
1787
  justify-content: space-between;
1788
  width: 100%;
1789
  padding: 12px 2px;
1790
  border: 0;
1791
  border-bottom: 1px solid var(--border);
1792
  border-radius: 0;
1793
  color: var(--text);
1794
  background: transparent;
1795
  text-align: left;
1796
  cursor: pointer;
1797
}
1798
1799
.threadList > button.active,
1800
.threadList > button:hover {
1801
  border-color: var(--accent);
1802
  background: transparent;
1803
}
1804
1805
.threadList span,
1806
.threadList small {
1807
  display: block;
1808
}
1809
1810
.threadList small,
1811
.messageList span {
1812
  margin-top: 4px;
1813
  color: var(--text-muted);
1814
  font-size: 11px;
1815
}
1816
1817
.threadList b,
1818
.conversationInsights b {
1819
  color: var(--accent);
1820
  font: 10px/1.2 var(--mono);
1821
}
1822
1823
.conversationInsights {
1824
  padding: 4px 0 12px;
1825
  border: 0;
1826
  border-bottom: 1px solid var(--warn-line);
1827
  border-radius: 0;
1828
  background: transparent;
1829
}
1830
1831
.conversationInsights p {
1832
  margin: 0 0 6px;
1833
  font-size: 12px;
1834
  line-height: 1.5;
1835
}
1836
1837
.conversationInsights p:last-child {
1838
  margin-bottom: 0;
1839
}
1840
1841
.messageList article {
1842
  max-width: 82%;
1843
  padding: 4px 0 12px;
1844
  border: 0;
1845
  border-radius: 0;
1846
  background: transparent;
1847
}
1848
1849
.messageList article.sent {
1850
  justify-self: end;
1851
  border-color: transparent;
1852
  background: transparent;
1853
}
1854
1855
.messageList article p {
1856
  margin: 4px 0;
1857
  white-space: pre-wrap;
1858
}
1859
1860
.replyBox {
1861
  display: grid;
1862
  gap: 8px;
1863
}
1864
1865
.replyBox textarea {
1866
  min-height: 100px;
1867
  padding: 10px 0;
1868
  border: 0;
1869
  border-bottom: 1px solid var(--border-strong);
1870
  border-radius: 0;
1871
  color: var(--text);
1872
  background: transparent;
1873
  resize: vertical;
1874
}
1875
1876
.historyToolbar {
1877
  display: flex;
1878
  flex-wrap: wrap;
1879
  align-items: center;
1880
  gap: 10px;
1881
  margin-bottom: 16px;
1882
}
1883
1884
.journeyLayout {
1885
  display: grid;
1886
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1887
  gap: 16px;
1888
  align-items: start;
1889
}
1890
1891
.journeyList {
1892
  display: grid;
1893
  gap: 8px;
1894
}
1895
1896
.journeyList > button {
1897
  display: flex;
1898
  width: 100%;
1899
  flex-direction: column;
1900
  gap: 7px;
1901
  padding: 15px 4px;
1902
  border: 0;
1903
  border-bottom: 1px solid var(--border);
1904
  border-radius: 0;
1905
  color: var(--text);
1906
  background: transparent;
1907
  text-align: left;
1908
  cursor: pointer;
1909
}
1910
1911
.journeyList > button:hover {
1912
  border-color: var(--border-strong);
1913
  background: transparent;
1914
}
1915
1916
.journeyList > button.active {
1917
  border-color: var(--accent);
1918
  box-shadow: none;
1919
}
1920
1921
.journeyListTop,
1922
.journeyListMeta {
1923
  display: flex;
1924
  align-items: center;
1925
  justify-content: space-between;
1926
  gap: 10px;
1927
}
1928
1929
.journeyListTop > b {
1930
  color: var(--text-faint);
1931
  font: 500 10px/1.2 var(--mono);
1932
  letter-spacing: 0.08em;
1933
  text-transform: uppercase;
1934
}
1935
1936
.journeyList > button > strong {
1937
  font-size: 13px;
1938
  line-height: 1.4;
1939
}
1940
1941
.journeyList > button > small {
1942
  overflow: hidden;
1943
  color: var(--text-muted);
1944
  font: 11px/1.4 var(--mono);
1945
  text-overflow: ellipsis;
1946
  white-space: nowrap;
1947
}
1948
1949
.journeyListMeta {
1950
  color: var(--text-faint);
1951
  font: 10px/1.3 var(--mono);
1952
}
1953
1954
.journeyListMeta i {
1955
  font-style: normal;
1956
}
1957
1958
.statusPill {
1959
  display: inline-grid;
1960
  grid-template-columns: 6px minmax(7.4em, max-content);
1961
  align-items: center;
1962
  gap: 7px;
1963
  flex: none;
1964
  min-width: 8.4em;
1965
  padding: 0;
1966
  border: 0;
1967
  border-radius: 0;
1968
  color: var(--text-muted);
1969
  background: transparent;
1970
  font: 500 10px/1 var(--mono);
1971
  letter-spacing: 0.06em;
1972
  text-transform: uppercase;
1973
  white-space: nowrap;
1974
}
1975
1976
.statusPill i {
1977
  width: 6px;
1978
  height: 6px;
1979
  border-radius: 1px;
1980
  background: currentColor;
1981
}
1982
1983
.statusPill.good {
1984
  color: var(--live);
1985
}
1986
1987
.statusPill.warn {
1988
  color: var(--warn);
1989
}
1990
1991
:root[data-theme='light'] .statusPill.warn {
1992
  color: #8a5a16;
1993
}
1994
1995
.statusPill.danger {
1996
  color: var(--danger);
1997
}
1998
1999
.journeyDetail {
2000
  min-width: 0;
2001
  overflow: hidden;
2002
  border: 0;
2003
  border-radius: 0;
2004
  background: transparent;
2005
}
2006
2007
.journeyHero {
2008
  display: flex;
2009
  align-items: flex-start;
2010
  justify-content: space-between;
2011
  gap: 20px;
2012
  padding: 8px 0 22px;
2013
  border-bottom: 1px solid var(--border);
2014
}
2015
2016
.journeyHero h2 {
2017
  max-width: 780px;
2018
  margin: 8px 0 5px;
2019
  font-size: clamp(18px, 2vw, 24px);
2020
  line-height: 1.25;
2021
  letter-spacing: -0.03em;
2022
}
2023
2024
.journeyHero p {
2025
  margin: 0;
2026
  color: var(--text-muted);
2027
  font: 11px/1.4 var(--mono);
2028
}
2029
2030
.journeySummaryGrid {
2031
  display: grid;
2032
  grid-template-columns: repeat(4, minmax(0, 1fr));
2033
  border-bottom: 1px solid var(--border);
2034
}
2035
2036
.journeySummaryGrid section {
2037
  display: flex;
2038
  min-width: 0;
2039
  flex-direction: column;
2040
  gap: 5px;
2041
  padding: 16px 20px 16px 0;
2042
  border-right: 1px solid var(--border);
2043
}
2044
2045
.journeySummaryGrid section:last-child {
2046
  border-right: 0;
2047
}
2048
2049
.journeySummaryGrid span,
2050
.outcomeCard > div > span,
2051
.profileDelta > span {
2052
  color: var(--text-faint);
2053
  font: 10px/1.3 var(--mono);
2054
  letter-spacing: 0.05em;
2055
  text-transform: uppercase;
2056
}
2057
2058
.journeySummaryGrid strong {
2059
  overflow: hidden;
2060
  font-size: 15px;
2061
  text-overflow: ellipsis;
2062
  white-space: nowrap;
2063
}
2064
2065
.journeySummaryGrid small {
2066
  overflow: hidden;
2067
  color: var(--text-muted);
2068
  font-size: 11px;
2069
  text-overflow: ellipsis;
2070
  white-space: nowrap;
2071
}
2072
2073
.outcomeCard {
2074
  margin: 18px 0;
2075
  padding: 18px 0;
2076
  border: 0;
2077
  border-top: 1px solid var(--border);
2078
  border-radius: 0;
2079
  background: transparent;
2080
}
2081
2082
.outcomeCard h3 {
2083
  max-width: 800px;
2084
  margin: 7px 0 14px;
2085
  font-size: 14px;
2086
  font-weight: 500;
2087
  line-height: 1.55;
2088
}
2089
2090
.outcomeCard ul {
2091
  display: grid;
2092
  gap: 7px;
2093
  margin: 0;
2094
  padding: 0;
2095
  list-style: none;
2096
}
2097
2098
.outcomeCard li {
2099
  display: flex;
2100
  align-items: center;
2101
  gap: 9px;
2102
  color: var(--text-muted);
2103
  font-size: 12px;
2104
}
2105
2106
.ratingGrid {
2107
  display: grid;
2108
  grid-template-columns: repeat(2, minmax(0, 1fr));
2109
  gap: 0 24px;
2110
  margin-top: 16px;
2111
  padding-top: 10px;
2112
  border-top: 1px solid var(--accent-line);
2113
}
2114
2115
.progressCard {
2116
  margin: 18px 0;
2117
  padding: 18px 0;
2118
  border: 0;
2119
  border-top: 1px solid var(--border);
2120
  border-radius: 0;
2121
  background: transparent;
2122
}
2123
2124
.progressCardTop {
2125
  display: flex;
2126
  align-items: flex-start;
2127
  justify-content: space-between;
2128
  gap: 16px;
2129
}
2130
2131
.progressCardTop h3 {
2132
  margin: 6px 0 0;
2133
  font-size: 15px;
2134
}
2135
2136
.progressCardTop > strong {
2137
  color: var(--accent);
2138
  font: 600 22px/1 var(--mono);
2139
}
2140
2141
.progressTrack {
2142
  height: 1px;
2143
  margin: 16px 0 13px;
2144
  overflow: hidden;
2145
  border-radius: 0;
2146
  background: var(--border);
2147
}
2148
2149
.progressTrack i {
2150
  display: block;
2151
  height: 100%;
2152
  border-radius: inherit;
2153
  background: var(--accent);
2154
  transition: width 180ms ease;
2155
}
2156
2157
.progressFacts {
2158
  display: flex;
2159
  flex-wrap: wrap;
2160
  gap: 7px;
2161
}
2162
2163
.progressFacts span {
2164
  padding: 5px 0;
2165
  border: 0;
2166
  border-radius: 0;
2167
  color: var(--text-muted);
2168
  background: transparent;
2169
  font-size: 10px;
2170
}
2171
2172
.progressWarning {
2173
  margin: 13px 0 0;
2174
  padding-top: 12px;
2175
  border-top: 1px solid var(--warn-line);
2176
  color: var(--warn);
2177
  font-size: 11px;
2178
}
2179
2180
.assuranceDecisionGrid {
2181
  display: grid;
2182
  margin-top: 16px;
2183
  padding-top: 16px;
2184
  grid-template-columns: repeat(2, minmax(0, 1fr));
2185
  gap: 24px;
2186
  border-top: 1px solid var(--border);
2187
}
2188
2189
.assuranceDecisionGrid > section,
2190
.assuranceRisk,
2191
.assuranceProbe,
2192
.assuranceSafeguards,
2193
.assuranceSafeguard > div:first-child {
2194
  display: grid;
2195
  gap: 6px;
2196
}
2197
2198
.assuranceRisk,
2199
.assuranceProbe {
2200
  padding: 10px 0;
2201
  border-bottom: 1px dashed var(--border);
2202
}
2203
2204
.assuranceRisk strong,
2205
.assuranceProbe strong,
2206
.assuranceSafeguard strong {
2207
  font-size: 12px;
2208
  font-weight: 500;
2209
}
2210
2211
.assuranceRisk small,
2212
.assuranceProbe small,
2213
.assuranceSafeguard small,
2214
.assuranceNotice,
2215
.assuranceCalibration {
2216
  color: var(--text-muted);
2217
  font-size: 10px;
2218
  line-height: 1.5;
2219
}
2220
2221
.assuranceSafeguards {
2222
  margin-top: 16px;
2223
  padding-top: 16px;
2224
  border-top: 1px solid var(--border);
2225
}
2226
2227
.assuranceSafeguard {
2228
  display: flex;
2229
  align-items: center;
2230
  justify-content: space-between;
2231
  gap: 20px;
2232
  padding: 10px 0;
2233
  border-bottom: 1px dashed var(--border);
2234
}
2235
2236
.assuranceDecisionActions {
2237
  display: flex;
2238
  flex: none;
2239
  gap: 6px;
2240
}
2241
2242
.assuranceDecisionActions button {
2243
  min-height: 30px;
2244
  padding: 0 10px;
2245
  border: 1px solid var(--border-strong);
2246
  color: var(--text-muted);
2247
  background: transparent;
2248
  font: 500 10px/1 var(--mono);
2249
  cursor: pointer;
2250
}
2251
2252
.assuranceDecisionActions button.approve {
2253
  border-color: var(--accent-line);
2254
  color: var(--accent);
2255
}
2256
2257
.assuranceDecisionActions button:disabled {
2258
  cursor: wait;
2259
  opacity: 0.45;
2260
}
2261
2262
.assuranceCalibration,
2263
.assuranceNotice {
2264
  margin: 13px 0 0;
2265
}
2266
2267
.assuranceCalibration {
2268
  color: var(--live);
2269
}
2270
2271
@media (max-width: 720px) {
2272
  .assuranceDecisionGrid {
2273
    grid-template-columns: 1fr;
2274
  }
2275
2276
  .assuranceSafeguard {
2277
    align-items: flex-start;
2278
    flex-direction: column;
2279
  }
2280
}
2281
2282
.journeyNotice {
2283
  margin: 18px 0;
2284
  padding: 13px 0;
2285
  border: 0;
2286
  border-top: 1px solid var(--warn-line);
2287
  border-radius: 0;
2288
  color: var(--text-muted);
2289
  background: transparent;
2290
  font-size: 12px;
2291
}
2292
2293
.journeyTimelineSection {
2294
  padding: 4px 0 24px;
2295
}
2296
2297
.journeyTimelineSection > div:first-child h3 {
2298
  margin: 0;
2299
  font-size: 14px;
2300
}
2301
2302
.journeyTimelineSection > div:first-child small {
2303
  color: var(--text-muted);
2304
  font-size: 11px;
2305
}
2306
2307
.journeyTimeline {
2308
  margin: 18px 0 0;
2309
  padding: 0;
2310
  list-style: none;
2311
}
2312
2313
.journeyTimeline li {
2314
  position: relative;
2315
  display: grid;
2316
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2317
  gap: 12px;
2318
  min-height: 76px;
2319
}
2320
2321
.journeyTimeline li:not(:last-child)::before {
2322
  position: absolute;
2323
  top: 12px;
2324
  bottom: -4px;
2325
  left: 3px;
2326
  width: 1px;
2327
  background: var(--border-strong);
2328
  content: '';
2329
}
2330
2331
.journeyNode {
2332
  z-index: 1;
2333
  width: 7px;
2334
  height: 7px;
2335
  margin-top: 5px;
2336
  border: 0;
2337
  border-radius: 1px;
2338
  background: var(--text-faint);
2339
  box-shadow: none;
2340
}
2341
2342
.journeyNode.good {
2343
  background: var(--live);
2344
}
2345
2346
.journeyNode.warn {
2347
  background: var(--warn);
2348
}
2349
2350
.journeyNode.danger {
2351
  background: var(--danger);
2352
}
2353
2354
.journeyTimeline li > .statusPill {
2355
  justify-self: start;
2356
  width: 100%;
2357
}
2358
2359
.journeyTimeline li > div {
2360
  display: flex;
2361
  min-width: 0;
2362
  flex-direction: column;
2363
  gap: 3px;
2364
  padding-bottom: 18px;
2365
}
2366
2367
.journeyTimeline li > div > span {
2368
  color: var(--text-faint);
2369
  font: 9px/1.3 var(--mono);
2370
  text-transform: uppercase;
2371
}
2372
2373
.journeyTimeline li strong {
2374
  font-size: 12px;
2375
}
2376
2377
.journeyTimeline li p {
2378
  margin: 0;
2379
  color: var(--text-muted);
2380
  font-size: 11px;
2381
  line-height: 1.5;
2382
}
2383
2384
.insightPrinciple {
2385
  display: grid;
2386
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2387
  gap: 30px;
2388
  align-items: center;
2389
  margin-bottom: 16px;
2390
  padding: 8px 0 22px;
2391
  border: 0;
2392
  border-bottom: 1px solid var(--border);
2393
  border-radius: 0;
2394
  background: transparent;
2395
}
2396
2397
.insightPrinciple h2 {
2398
  margin: 0 0 5px;
2399
  font-size: 16px;
2400
  font-weight: 500;
2401
  letter-spacing: 0;
2402
}
2403
2404
.insightPrinciple p {
2405
  max-width: 680px;
2406
  margin: 0;
2407
  color: var(--text-muted);
2408
  font-size: 13px;
2409
  line-height: 1.55;
2410
}
2411
2412
.insightStats {
2413
  display: grid;
2414
  grid-template-columns: repeat(3, 1fr);
2415
  gap: 8px;
2416
}
2417
2418
.insightStats span {
2419
  display: flex;
2420
  min-width: 0;
2421
  flex-direction: column;
2422
  padding: 12px 0;
2423
  border: 0;
2424
  border-radius: 0;
2425
  color: var(--text-muted);
2426
  background: transparent;
2427
  font-size: 10px;
2428
  text-align: left;
2429
}
2430
2431
.insightStats strong {
2432
  margin-bottom: 3px;
2433
  color: var(--text);
2434
  font: 500 22px/1 var(--mono);
2435
}
2436
2437
.insightGrid {
2438
  display: grid;
2439
  grid-template-columns: repeat(2, minmax(0, 1fr));
2440
  gap: 16px;
2441
  margin-bottom: 16px;
2442
}
2443
2444
.insightGrid > .empty {
2445
  grid-column: 1 / -1;
2446
  border: 0;
2447
  border-radius: 0;
2448
  background: transparent;
2449
}
2450
2451
.profileHead {
2452
  display: flex;
2453
  align-items: flex-start;
2454
  justify-content: space-between;
2455
  gap: 12px;
2456
  margin-bottom: 2px;
2457
}
2458
2459
.profileHead > div {
2460
  display: flex;
2461
  min-width: 0;
2462
  flex-direction: column;
2463
  gap: 3px;
2464
}
2465
2466
.profileHeadCompact {
2467
  align-items: center;
2468
  margin-bottom: 11px;
2469
}
2470
2471
.profileHeadCompact > small {
2472
  color: var(--text-faint);
2473
  font: 10px/1.4 var(--mono);
2474
}
2475
2476
.sampleBadge {
2477
  padding: 4px 7px;
2478
  border-radius: 999px;
2479
  color: var(--accent);
2480
  background: var(--accent-dim);
2481
  font: 9px/1.2 var(--mono);
2482
  white-space: nowrap;
2483
}
2484
2485
:root[data-theme='light'] .sampleBadge {
2486
  color: #c43a22;
2487
}
2488
2489
:root[data-theme='light'] .account > span {
2490
  color: var(--accent-ink);
2491
}
2492
2493
:root[data-theme='light'] .profileDelta b.positive {
2494
  color: #c43a22;
2495
}
2496
2497
:root[data-theme='light'] .profileDelta b.negative {
2498
  color: #a33d2e;
2499
}
2500
2501
.profileEvidenceLine {
2502
  margin-bottom: 11px;
2503
  color: var(--text-faint);
2504
  font: 10px/1.4 var(--mono);
2505
}
2506
2507
.profileDelta {
2508
  margin-top: 14px;
2509
  padding-top: 12px;
2510
  border-top: 1px solid var(--border);
2511
}
2512
2513
.profileDelta > div {
2514
  display: flex;
2515
  flex-wrap: wrap;
2516
  gap: 5px;
2517
  margin-top: 7px;
2518
}
2519
2520
.profileDelta b {
2521
  padding: 4px 6px;
2522
  border-radius: 4px;
2523
  color: var(--text-muted);
2524
  background: var(--bg-well);
2525
  font: 9px/1.2 var(--mono);
2526
}
2527
2528
.profileDelta b.positive {
2529
  color: var(--accent);
2530
}
2531
2532
.profileDelta b.negative {
2533
  color: var(--danger);
2534
}
2535
2536
.learningDecisionList {
2537
  display: grid;
2538
}
2539
2540
.learningDecisionList article {
2541
  display: grid;
2542
  grid-template-columns: auto minmax(0, 1fr);
2543
  gap: 12px;
2544
  padding: 14px 0;
2545
  border-bottom: 1px solid var(--border);
2546
}
2547
2548
.learningDecisionList article:last-child {
2549
  border-bottom: 0;
2550
}
2551
2552
.learningDecisionList article > div {
2553
  display: flex;
2554
  min-width: 0;
2555
  flex-direction: column;
2556
  gap: 3px;
2557
}
2558
2559
.learningDecisionList strong {
2560
  overflow: hidden;
2561
  font: 11px/1.4 var(--mono);
2562
  text-overflow: ellipsis;
2563
}
2564
2565
.learningDecisionList small {
2566
  color: var(--text-muted);
2567
  font-size: 10px;
2568
}
2569
2570
.learningDecisionList p {
2571
  margin: 2px 0 0;
2572
  color: var(--text-muted);
2573
  font-size: 11px;
2574
}
2575
2576
@media (prefers-reduced-motion: reduce) {
2577
  .spinner,
2578
  .toggle span,
2579
  .liveDot,
2580
  .appMain > * {
2581
    animation: none;
2582
    transition: none;
2583
  }
2584
2585
  .primary {
2586
    transition: none;
2587
  }
2588
2589
  .primary:hover {
2590
    transform: none;
2591
  }
2592
}
2593
2594
/* Simplified agent workspace */
2595
.simpleShell {
2596
  min-height: 100svh;
2597
  background: var(--bg);
2598
}
2599
2600
.simpleShell.landingPage {
2601
  overflow-x: clip;
2602
}
2603
2604
.dashHeader {
2605
  position: sticky;
2606
  z-index: 30;
2607
}
2608
2609
.dashHeader .landingBrand {
2610
  border: 0;
2611
  padding: 0;
2612
  background: transparent;
2613
  cursor: pointer;
2614
}
2615
2616
.dashNav {
2617
  display: flex;
2618
  align-items: center;
2619
  gap: 28px;
2620
  color: var(--text-muted);
2621
  font-size: 12px;
2622
}
2623
2624
.dashNav button {
2625
  padding: 0;
2626
  border: 0;
2627
  color: inherit;
2628
  background: transparent;
2629
  letter-spacing: 0.06em;
2630
  text-transform: lowercase;
2631
  cursor: pointer;
2632
  font: inherit;
2633
  transition: color 140ms ease;
2634
}
2635
2636
.dashNav button::before {
2637
  margin-right: 2px;
2638
  color: var(--text-faint);
2639
  content: '/';
2640
}
2641
2642
.dashNav button:hover,
2643
.dashNav button[aria-current='page'] {
2644
  color: var(--text);
2645
}
2646
2647
.accountMark {
2648
  display: grid;
2649
  width: 34px;
2650
  height: 34px;
2651
  place-items: center;
2652
  border: 1px solid var(--border);
2653
  color: var(--text-muted);
2654
  background: transparent;
2655
  font: 500 10px/1 var(--mono);
2656
  letter-spacing: 0.08em;
2657
  cursor: pointer;
2658
}
2659
2660
.accountMark:hover,
2661
.accountMark[data-state='open'] {
2662
  border-color: var(--border-strong);
2663
  color: var(--text);
2664
}
2665
2666
.dashMenu {
2667
  min-width: 180px;
2668
  border-radius: 0;
2669
  font-family: var(--mono);
2670
  font-size: 12px;
2671
  letter-spacing: 0.04em;
2672
  text-transform: lowercase;
2673
}
2674
2675
.simpleMain {
2676
  position: relative;
2677
  z-index: 1;
2678
  width: min(1120px, calc(100% - 48px));
2679
  margin: 0 auto;
2680
  padding: 28px 0 80px;
2681
}
2682
2683
.simpleMain p,
2684
.simpleMain .lede,
2685
.simpleMain input,
2686
.simpleMain textarea,
2687
.simpleMain select {
2688
  font-family: var(--font);
2689
}
2690
2691
.workspacePage {
2692
  display: grid;
2693
  gap: 22px;
2694
}
2695
2696
.workspaceHead {
2697
  display: flex;
2698
  align-items: center;
2699
  justify-content: space-between;
2700
  gap: 16px;
2701
  min-height: 42px;
2702
}
2703
2704
.landingPage.simpleShell .workspaceHead h1,
2705
.landingPage.simpleShell .pageHead h1 {
2706
  display: flex;
2707
  align-items: baseline;
2708
  gap: 10px;
2709
  margin: 0;
2710
  font-size: 16px;
2711
  font-weight: 500;
2712
  letter-spacing: 0;
2713
  line-height: 1.2;
2714
}
2715
2716
.workspaceHead h1 small {
2717
  color: var(--text-muted);
2718
  font: 400 12px/1 var(--mono);
2719
}
2720
2721
.assuranceOverview {
2722
  display: grid;
2723
  padding: 18px 0;
2724
  grid-template-columns: minmax(240px, 1.15fr) minmax(320px, 1fr) auto;
2725
  align-items: center;
2726
  gap: 28px;
2727
  border-top: 1px solid var(--accent-line);
2728
  border-bottom: 1px solid var(--accent-line);
2729
}
2730
2731
.assuranceOverview h2 {
2732
  margin: 6px 0 4px;
2733
  font-size: 16px;
2734
  font-weight: 500;
2735
}
2736
2737
.assuranceOverview p {
2738
  max-width: 560px;
2739
  margin: 0;
2740
  color: var(--text-muted);
2741
  font-size: 11px;
2742
  line-height: 1.5;
2743
}
2744
2745
.assuranceOverviewStats {
2746
  display: grid;
2747
  grid-template-columns: repeat(4, minmax(70px, 1fr));
2748
  gap: 16px;
2749
}
2750
2751
.assuranceOverviewStats span {
2752
  display: grid;
2753
  gap: 3px;
2754
  color: var(--text-faint);
2755
  font: 400 9px/1.35 var(--mono);
2756
  text-transform: uppercase;
2757
}
2758
2759
.assuranceOverviewStats strong {
2760
  color: var(--text);
2761
  font-size: 16px;
2762
  font-weight: 500;
2763
}
2764
2765
.assuranceOverview > button {
2766
  display: inline-flex;
2767
  min-height: 34px;
2768
  padding: 0 12px;
2769
  align-items: center;
2770
  gap: 8px;
2771
  border: 1px solid var(--border-strong);
2772
  color: var(--text-muted);
2773
  background: transparent;
2774
  font: 500 10px/1 var(--mono);
2775
  cursor: pointer;
2776
  white-space: nowrap;
2777
}
2778
2779
.assuranceOverview > button svg {
2780
  width: 13px;
2781
}
2782
2783
@media (max-width: 980px) {
2784
  .assuranceOverview {
2785
    grid-template-columns: 1fr;
2786
  }
2787
2788
  .assuranceOverview > button {
2789
    width: fit-content;
2790
  }
2791
}
2792
2793
@media (max-width: 620px) {
2794
  .assuranceOverviewStats {
2795
    grid-template-columns: repeat(2, minmax(0, 1fr));
2796
  }
2797
}
2798
2799
.firstRunGuide {
2800
  position: relative;
2801
  display: grid;
2802
  gap: 0;
2803
  padding: 0 0 8px;
2804
  border: 1px solid var(--border-strong);
2805
  border-right-style: dashed;
2806
  background: color-mix(in srgb, var(--bg) 70%, transparent);
2807
}
2808
2809
.firstRunGuide:has(.firstRunComplete) .firstRunHeader,
2810
.firstRunGuide:has(.firstRunComplete) .firstRunSteps {
2811
  display: none;
2812
}
2813
2814
.firstRunGuide:has(.firstRunComplete) .firstRunComplete {
2815
  border-top: 0;
2816
}
2817
2818
.firstRunHeader,
2819
.firstRunStage,
2820
.firstRunWaiting,
2821
.firstRunComplete {
2822
  display: flex;
2823
  align-items: center;
2824
  gap: 14px;
2825
}
2826
2827
.firstRunHeader {
2828
  align-items: start;
2829
  justify-content: space-between;
2830
  padding: 22px 22px 8px;
2831
}
2832
2833
.firstRunHeader h2 {
2834
  margin: 0 0 6px;
2835
  font-size: 16px;
2836
  font-weight: 500;
2837
  letter-spacing: 0;
2838
}
2839
2840
.firstRunHeader p,
2841
.firstRunStage p,
2842
.firstRunWaiting p,
2843
.firstRunComplete p {
2844
  margin: 0;
2845
  color: var(--text-muted);
2846
  font-size: 13px;
2847
  line-height: 1.55;
2848
}
2849
2850
.firstRunCount {
2851
  color: var(--accent);
2852
  font: 600 13px/1 var(--mono);
2853
}
2854
2855
.firstRunSteps {
2856
  display: grid;
2857
  grid-template-columns: repeat(4, minmax(0, 1fr));
2858
  gap: 1px;
2859
  margin: 8px 22px 0;
2860
  padding: 0;
2861
  background: var(--border);
2862
  list-style: none;
2863
}
2864
2865
.firstRunSteps.twoSteps {
2866
  grid-template-columns: repeat(2, minmax(0, 1fr));
2867
}
2868
2869
.firstRunSteps li {
2870
  display: flex;
2871
  align-items: center;
2872
  gap: 9px;
2873
  min-height: 46px;
2874
  padding: 0 12px;
2875
  color: var(--text-muted);
2876
  background: var(--bg-elevated);
2877
  font-size: 12px;
2878
}
2879
2880
.firstRunSteps li > span {
2881
  display: grid;
2882
  width: 22px;
2883
  height: 22px;
2884
  place-items: center;
2885
  border: 1px solid var(--border-strong);
2886
  font: 500 10px/1 var(--mono);
2887
}
2888
2889
.firstRunSteps li.done {
2890
  color: var(--text);
2891
}
2892
2893
.firstRunSteps li.done > span {
2894
  border-color: var(--accent-line);
2895
  color: var(--accent);
2896
  background: var(--accent-dim);
2897
}
2898
2899
.firstRunSteps svg,
2900
.firstRunIcon svg,
2901
.firstRunComplete button svg {
2902
  width: 14px;
2903
  height: 14px;
2904
}
2905
2906
.firstRunForm {
2907
  display: grid;
2908
  grid-template-columns: repeat(2, minmax(0, 1fr));
2909
  gap: 14px;
2910
  padding: 18px 22px 22px;
2911
  border-top: 1px solid var(--border);
2912
}
2913
2914
.firstRunStage,
2915
.firstRunBlocked,
2916
.firstRunWaiting {
2917
  grid-column: 1 / -1;
2918
}
2919
2920
.firstRunStage {
2921
  align-items: start;
2922
}
2923
2924
.firstRunStage > div,
2925
.firstRunWaiting > div,
2926
.firstRunComplete > div {
2927
  display: grid;
2928
  flex: 1;
2929
  gap: 3px;
2930
}
2931
2932
.firstRunIcon {
2933
  display: grid;
2934
  width: 36px;
2935
  height: 36px;
2936
  flex: 0 0 auto;
2937
  place-items: center;
2938
  border: 1px solid var(--accent-line);
2939
  color: var(--accent);
2940
  background: transparent;
2941
  font: 500 11px/1 var(--mono);
2942
  letter-spacing: 0.06em;
2943
}
2944
2945
.firstRunIcon.complete {
2946
  border-color: var(--live);
2947
  color: var(--live);
2948
}
2949
2950
.firstRunForm label {
2951
  display: grid;
2952
  gap: 6px;
2953
  color: var(--text-muted);
2954
  font-size: 12px;
2955
}
2956
2957
.firstRunForm label.fullWidth {
2958
  grid-column: 1 / -1;
2959
}
2960
2961
.firstRunForm input,
2962
.firstRunForm select,
2963
.firstRunForm textarea {
2964
  width: 100%;
2965
  min-height: 42px;
2966
  padding: 9px 10px;
2967
  border: 1px solid var(--border-strong);
2968
  border-radius: 0;
2969
  color: var(--text);
2970
  background: var(--bg-elevated);
2971
  font: inherit;
2972
}
2973
2974
.firstRunForm textarea {
2975
  min-height: 86px;
2976
  resize: vertical;
2977
}
2978
2979
.firstRunForm > button[type='submit'] {
2980
  align-self: end;
2981
  justify-self: start;
2982
  min-height: 42px;
2983
}
2984
2985
.firstRunBlocked {
2986
  display: flex;
2987
  align-items: center;
2988
  justify-content: space-between;
2989
  gap: 14px;
2990
  padding: 14px;
2991
  border: 1px solid var(--border);
2992
  color: var(--text-muted);
2993
  background: var(--bg-elevated);
2994
  font-size: 13px;
2995
}
2996
2997
.firstRunBlocked button {
2998
  flex: 0 0 auto;
2999
}
3000
3001
.firstRunReview {
3002
  display: grid;
3003
  gap: 16px;
3004
  padding: 18px 22px 22px;
3005
  border-top: 1px solid var(--border);
3006
}
3007
3008
.agentCardPreview {
3009
  display: grid;
3010
  gap: 10px;
3011
  padding: 18px;
3012
  border: 1px solid var(--border-strong);
3013
  background: var(--bg-elevated);
3014
}
3015
3016
.agentCardPreview h3,
3017
.agentCardPreview p,
3018
.agentCardPreview dl,
3019
.agentCardPreview dd {
3020
  margin: 0;
3021
}
3022
3023
.agentCardPreview p,
3024
.agentCardPreview small,
3025
.firstRunComplete small {
3026
  color: var(--text-muted);
3027
}
3028
3029
.agentCardPreview dl {
3030
  display: grid;
3031
  grid-template-columns: repeat(2, minmax(0, 1fr));
3032
  gap: 12px;
3033
}
3034
3035
.agentCardPreview dl > div {
3036
  display: grid;
3037
  gap: 3px;
3038
}
3039
3040
.agentCardPreview dt {
3041
  color: var(--text-muted);
3042
  font: 500 10px/1.4 var(--mono);
3043
  letter-spacing: 0.08em;
3044
  text-transform: uppercase;
3045
}
3046
3047
.verifiedPublisher {
3048
  justify-self: start;
3049
  padding: 4px 7px;
3050
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
3051
  color: var(--live);
3052
  font: 500 11px/1 var(--mono);
3053
}
3054
3055
.firstRunWaiting {
3056
  align-items: start;
3057
  padding-top: 18px;
3058
  border-top: 1px solid var(--border);
3059
}
3060
3061
.firstRunWaiting small {
3062
  color: var(--text-muted);
3063
  font-size: 11px;
3064
  line-height: 1.5;
3065
}
3066
3067
.firstRunComplete {
3068
  display: grid;
3069
  grid-template-columns: auto 1fr auto;
3070
  padding: 18px 22px 22px;
3071
  border-top: 1px solid var(--border);
3072
}
3073
3074
.firstRunComplete button,
3075
.firstRunWaiting > button,
3076
.firstRunStage > button {
3077
  display: inline-flex;
3078
  align-items: center;
3079
  gap: 7px;
3080
  white-space: nowrap;
3081
}
3082
3083
.firstRunComplete a:not(.secondary) {
3084
  overflow-wrap: anywhere;
3085
  color: var(--accent);
3086
  font: 500 12px/1.5 var(--mono);
3087
}
3088
3089
.firstRunActions {
3090
  display: flex;
3091
  align-items: center;
3092
  gap: 8px;
3093
}
3094
3095
.firstRunActions svg {
3096
  width: 14px;
3097
  height: 14px;
3098
}
3099
3100
.compactRequests {
3101
  display: grid;
3102
  gap: 0;
3103
  border: 0;
3104
  border-top: 1px solid var(--accent-line);
3105
  border-bottom: 1px solid var(--accent-line);
3106
  background: transparent;
3107
}
3108
3109
.compactRequests article,
3110
.agentRequests article {
3111
  display: flex;
3112
  align-items: center;
3113
  gap: 13px;
3114
  padding: 12px 0;
3115
  background: transparent;
3116
  border-bottom: 1px dashed var(--border);
3117
}
3118
3119
.compactRequests article:last-child,
3120
.agentRequests article:last-child {
3121
  border-bottom: 0;
3122
}
3123
3124
.compactRequests article > div:nth-child(2),
3125
.agentRequests article > div:nth-child(2) {
3126
  display: grid;
3127
  min-width: 0;
3128
  gap: 2px;
3129
}
3130
3131
.compactRequests strong,
3132
.agentRequests strong {
3133
  overflow: hidden;
3134
  font-size: 13px;
3135
  text-overflow: ellipsis;
3136
  white-space: nowrap;
3137
}
3138
3139
.compactRequests small,
3140
.agentRequests small {
3141
  color: var(--text-muted);
3142
  font-size: 11px;
3143
}
3144
3145
.requestIcon {
3146
  display: grid;
3147
  width: 30px;
3148
  height: 30px;
3149
  place-items: center;
3150
  color: var(--accent);
3151
  background: var(--accent-dim);
3152
}
3153
3154
.requestIcon svg {
3155
  width: 15px;
3156
}
3157
3158
.iconDecisions {
3159
  display: flex;
3160
  gap: 6px;
3161
  margin-left: auto;
3162
}
3163
3164
.iconDecisions button {
3165
  display: grid;
3166
  width: 32px;
3167
  height: 32px;
3168
  place-items: center;
3169
  border: 1px solid var(--border-strong);
3170
  color: var(--text-muted);
3171
  background: transparent;
3172
  cursor: pointer;
3173
}
3174
3175
.iconDecisions button:hover {
3176
  color: var(--danger);
3177
  border-color: var(--danger-line);
3178
  background: var(--danger-dim);
3179
}
3180
3181
.iconDecisions button.approve {
3182
  color: var(--live);
3183
}
3184
3185
.iconDecisions button.approve:hover {
3186
  border-color: color-mix(in srgb, var(--live) 32%, transparent);
3187
  background: var(--live-dim);
3188
}
3189
3190
.iconDecisions svg {
3191
  width: 15px;
3192
}
3193
3194
.agentList {
3195
  display: grid;
3196
  gap: 0;
3197
  border-top: 1px solid var(--border);
3198
}
3199
3200
.agentRow {
3201
  overflow: visible;
3202
  border: 0;
3203
  border-bottom: 1px dashed var(--border);
3204
  background: transparent;
3205
}
3206
3207
.agentRow:hover,
3208
.agentRow.isExpanded {
3209
  border-color: var(--border);
3210
  background: color-mix(in srgb, var(--bg-hover) 55%, transparent);
3211
}
3212
3213
.agentRow.isExpanded {
3214
  border-bottom-style: solid;
3215
}
3216
3217
.agentRowSummary {
3218
  display: grid;
3219
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto auto;
3220
  align-items: center;
3221
  gap: 16px;
3222
  width: 100%;
3223
  min-height: 82px;
3224
  padding: 16px 0;
3225
  color: inherit;
3226
  background: transparent;
3227
  text-align: left;
3228
}
3229
3230
.agentRowCore {
3231
  display: grid;
3232
  grid-template-columns: auto minmax(140px, 1.2fr) minmax(320px, 2fr);
3233
  align-items: center;
3234
  gap: 16px;
3235
  min-width: 0;
3236
  padding: 0;
3237
  border: 0;
3238
  color: inherit;
3239
  background: transparent;
3240
  text-align: left;
3241
  cursor: pointer;
3242
}
3243
3244
.agentRowCore:focus-visible,
3245
.scorecardTeaser:focus-visible,
3246
.agentExpandButton:focus-visible {
3247
  outline: 1px solid var(--accent);
3248
  outline-offset: 4px;
3249
}
3250
3251
.agentAvatar {
3252
  position: relative;
3253
  display: grid;
3254
  width: 42px;
3255
  height: 42px;
3256
  flex: none;
3257
  place-items: center;
3258
  border: 1px solid var(--accent-line);
3259
  color: var(--accent);
3260
  background: transparent;
3261
}
3262
3263
.agentAvatar b {
3264
  font: 500 12px/1 var(--mono);
3265
  letter-spacing: 0.08em;
3266
}
3267
3268
.agentAvatar.isSmall {
3269
  width: 28px;
3270
  height: 28px;
3271
}
3272
3273
.agentAvatar.isSmall b {
3274
  font-size: 9px;
3275
}
3276
3277
.agentAvatar i {
3278
  position: absolute;
3279
  right: -3px;
3280
  bottom: -3px;
3281
  width: 8px;
3282
  height: 8px;
3283
  border: 2px solid var(--bg);
3284
  background: var(--text-faint);
3285
}
3286
3287
.agentAvatar i.online {
3288
  background: var(--live);
3289
}
3290
3291
.agentIdentity {
3292
  display: grid;
3293
  min-width: 0;
3294
  gap: 3px;
3295
}
3296
3297
.agentIdentity strong {
3298
  overflow: hidden;
3299
  font-size: 14px;
3300
  text-overflow: ellipsis;
3301
  white-space: nowrap;
3302
}
3303
3304
.agentIdentity small {
3305
  color: var(--text-muted);
3306
  font-size: 10px;
3307
}
3308
3309
.agentSignals {
3310
  display: flex;
3311
  flex-wrap: wrap;
3312
  gap: 6px;
3313
}
3314
3315
.agentSignals span {
3316
  display: inline-flex;
3317
  align-items: center;
3318
  gap: 5px;
3319
  padding: 0;
3320
  border: 0;
3321
  color: var(--text-muted);
3322
  font: 400 11px/1 var(--mono);
3323
  letter-spacing: 0.04em;
3324
  text-transform: lowercase;
3325
}
3326
3327
.agentSignals svg {
3328
  width: 10px;
3329
  height: 10px;
3330
}
3331
3332
.agentSignals .signalOnline {
3333
  color: var(--live);
3334
  border-color: transparent;
3335
  background: transparent;
3336
}
3337
3338
.agentSignals .signalVerified {
3339
  color: var(--accent);
3340
  border-color: transparent;
3341
  background: transparent;
3342
}
3343
3344
.scorecardTeaser {
3345
  display: grid;
3346
  grid-template-columns: auto 1fr;
3347
  align-items: center;
3348
  gap: 12px;
3349
  min-width: 0;
3350
  padding: 0 0 0 16px;
3351
  border: 0;
3352
  border-left: 1px solid var(--border);
3353
  color: inherit;
3354
  background: transparent;
3355
  text-align: left;
3356
  cursor: pointer;
3357
}
3358
3359
.scorecardTeaser:hover {
3360
  border-color: var(--accent-line);
3361
}
3362
3363
.scorecardTeaser > span:last-child {
3364
  display: grid;
3365
  min-width: 0;
3366
  gap: 3px;
3367
}
3368
3369
.scorecardTeaser > strong {
3370
  color: var(--accent);
3371
  font: 500 22px/1 var(--mono);
3372
  letter-spacing: -0.04em;
3373
}
3374
3375
.scorecardTeaser b {
3376
  font: 500 11px/1 var(--mono);
3377
  letter-spacing: 0.08em;
3378
  text-transform: lowercase;
3379
}
3380
3381
.scorecardTeaser small {
3382
  overflow: hidden;
3383
  color: var(--text-muted);
3384
  font-size: 11px;
3385
  text-overflow: ellipsis;
3386
  text-transform: lowercase;
3387
  white-space: nowrap;
3388
}
3389
3390
.scorecardBars {
3391
  display: grid;
3392
  align-content: center;
3393
  gap: 3px;
3394
  height: 30px;
3395
  padding: 5px;
3396
  border-left: 2px solid var(--accent);
3397
  background: var(--bg-well);
3398
}
3399
3400
.scorecardBars i {
3401
  height: 2px;
3402
  max-width: 100%;
3403
  background: var(--accent);
3404
}
3405
3406
.agentExpandButton {
3407
  display: grid;
3408
  width: 30px;
3409
  height: 30px;
3410
  place-items: center;
3411
  padding: 0;
3412
  border: 0;
3413
  color: inherit;
3414
  background: transparent;
3415
  cursor: pointer;
3416
}
3417
3418
.notificationCount {
3419
  display: grid;
3420
  min-width: 22px;
3421
  height: 18px;
3422
  padding: 0 6px;
3423
  place-items: center;
3424
  border: 1px solid var(--accent-line);
3425
  color: var(--accent);
3426
  background: transparent;
3427
  font: 500 10px/1 var(--mono);
3428
}
3429
3430
.expandIcon {
3431
  width: 17px;
3432
  color: var(--text-faint);
3433
  transition: transform 160ms ease;
3434
}
3435
3436
.agentRow.isExpanded > .agentRowSummary .expandIcon {
3437
  transform: rotate(180deg);
3438
}
3439
3440
.scorecardDialog {
3441
  z-index: 80 !important;
3442
  width: min(1040px, calc(100vw - 32px)) !important;
3443
  max-width: 1040px !important;
3444
  max-height: calc(100vh - 32px);
3445
  gap: 14px !important;
3446
  overflow: auto;
3447
  padding: 18px !important;
3448
  border: 1px solid var(--border-strong) !important;
3449
  border-radius: 0 !important;
3450
  color: var(--text) !important;
3451
  opacity: 1 !important;
3452
  background: #0c0a0a !important;
3453
  box-shadow: 0 28px 100px rgb(0 0 0 / 58%) !important;
3454
}
3455
3456
[data-slot='dialog-overlay'] {
3457
  z-index: 70 !important;
3458
}
3459
3460
.scorecardA11yTitle {
3461
  position: absolute;
3462
  width: 1px;
3463
  height: 1px;
3464
  overflow: hidden;
3465
  clip: rect(0, 0, 0, 0);
3466
  white-space: nowrap;
3467
}
3468
3469
.behaviourScorecard {
3470
  position: relative;
3471
  overflow: hidden;
3472
  border: 1px solid var(--border-strong);
3473
  background: var(--bg);
3474
}
3475
3476
:root[data-theme='light'] .scorecardDialog {
3477
  background: #f7f4f2 !important;
3478
}
3479
3480
:root[data-theme='light'] .behaviourScorecard {
3481
  background: #fff;
3482
}
3483
3484
.behaviourScorecard::after {
3485
  content: none;
3486
}
3487
3488
.scorecardHeader,
3489
.scorecardIdentity,
3490
.scorecardFoot {
3491
  position: relative;
3492
  z-index: 1;
3493
}
3494
3495
.scorecardHeader {
3496
  display: flex;
3497
  align-items: center;
3498
  justify-content: space-between;
3499
  min-height: 58px;
3500
  padding: 0 24px;
3501
  border-bottom: 1px solid var(--border);
3502
}
3503
3504
.scorecardBrand,
3505
.scorecardHeader > span {
3506
  display: flex;
3507
  align-items: center;
3508
  gap: 8px;
3509
  color: var(--text-muted);
3510
  font: 600 9px/1 var(--mono);
3511
  letter-spacing: 0.08em;
3512
  text-transform: uppercase;
3513
}
3514
3515
.scorecardBrand svg,
3516
.scorecardHeader > span svg {
3517
  width: 14px;
3518
  height: 14px;
3519
}
3520
3521
.scorecardHeader > span.scorecardVerified {
3522
  color: var(--live);
3523
}
3524
3525
.scorecardIdentity {
3526
  display: flex;
3527
  align-items: end;
3528
  justify-content: space-between;
3529
  gap: 24px;
3530
  padding: 28px 24px 22px;
3531
}
3532
3533
.scorecardIdentity p {
3534
  margin: 0 0 8px;
3535
  color: var(--accent);
3536
  font: 600 9px/1 var(--mono);
3537
  letter-spacing: 0.16em;
3538
}
3539
3540
.scorecardIdentity h2 {
3541
  margin: 0;
3542
  font-size: clamp(26px, 4vw, 42px);
3543
  letter-spacing: -0.05em;
3544
}
3545
3546
.scorecardContext {
3547
  display: flex;
3548
  justify-content: flex-end;
3549
  flex-wrap: wrap;
3550
  gap: 5px;
3551
}
3552
3553
.scorecardContext span {
3554
  padding: 5px 7px;
3555
  border: 1px solid var(--border);
3556
  color: var(--text-muted);
3557
  background: var(--bg-well);
3558
  font: 500 8px/1 var(--mono);
3559
  text-transform: uppercase;
3560
}
3561
3562
.scorecardMetrics {
3563
  position: relative;
3564
  z-index: 1;
3565
  display: grid;
3566
  grid-template-columns: 1fr 1fr;
3567
  border-top: 1px solid var(--border);
3568
}
3569
3570
.scorecardMetrics > div {
3571
  display: grid;
3572
  grid-template-columns: minmax(150px, 0.9fr) minmax(120px, 1fr) 36px;
3573
  align-items: center;
3574
  gap: 14px;
3575
  min-height: 66px;
3576
  padding: 11px 24px;
3577
  border-bottom: 1px solid var(--border);
3578
}
3579
3580
.scorecardMetrics > div:nth-child(odd) {
3581
  border-right: 1px solid var(--border);
3582
}
3583
3584
.scorecardMetrics > div > span:first-child {
3585
  display: grid;
3586
  gap: 4px;
3587
}
3588
3589
.scorecardMetrics strong {
3590
  font-size: 11px;
3591
}
3592
3593
.scorecardMetrics small {
3594
  color: var(--text-faint);
3595
  font: 500 8px/1 var(--mono);
3596
  text-transform: uppercase;
3597
}
3598
3599
.scorecardMetrics b {
3600
  font: 500 18px/1 var(--mono);
3601
  text-align: right;
3602
}
3603
3604
.scorecardMeter {
3605
  height: 4px;
3606
  overflow: hidden;
3607
  background: var(--border);
3608
}
3609
3610
.scorecardMeter i {
3611
  display: block;
3612
  height: 100%;
3613
  background: var(--accent);
3614
}
3615
3616
.scorecardMetrics .isUnmeasured {
3617
  opacity: 0.55;
3618
}
3619
3620
.scorecardMetrics .isUnmeasured .scorecardMeter i {
3621
  width: 0 !important;
3622
}
3623
3624
.scorecardFoot {
3625
  display: grid;
3626
  grid-template-columns: auto auto 1fr;
3627
  align-items: center;
3628
  gap: 18px;
3629
  min-height: 58px;
3630
  padding: 12px 24px;
3631
  color: var(--text-muted);
3632
  font: 600 8px/1.2 var(--mono);
3633
  text-transform: uppercase;
3634
}
3635
3636
.scorecardFoot small {
3637
  justify-self: end;
3638
  color: var(--text-faint);
3639
  font: inherit;
3640
}
3641
3642
.scorecardActions {
3643
  display: flex;
3644
  justify-content: flex-end;
3645
  gap: 7px;
3646
}
3647
3648
.scorecardActions > span {
3649
  align-self: center;
3650
  margin-right: auto;
3651
  color: var(--live);
3652
  font: 600 9px/1 var(--mono);
3653
  text-transform: uppercase;
3654
}
3655
3656
.scorecardActions button {
3657
  display: inline-flex;
3658
  align-items: center;
3659
  gap: 7px;
3660
  min-height: 38px;
3661
  padding: 0 13px;
3662
  border: 1px solid var(--border-strong);
3663
  color: var(--text);
3664
  background: var(--bg-elevated);
3665
  font: 600 9px/1 var(--mono);
3666
  text-transform: uppercase;
3667
  cursor: pointer;
3668
}
3669
3670
.scorecardActions button.primary {
3671
  border-color: var(--accent);
3672
  color: white;
3673
  background: var(--accent);
3674
}
3675
3676
.scorecardActions svg {
3677
  width: 13px;
3678
}
3679
3680
.agentExpanded {
3681
  display: grid;
3682
  gap: 24px;
3683
  padding: 8px 0 22px 58px;
3684
  border-top: 1px dashed var(--border);
3685
  background: transparent;
3686
}
3687
3688
.agentRequests {
3689
  margin-top: 0;
3690
  border: 0;
3691
  border-top: 1px solid var(--accent-line);
3692
}
3693
3694
.agentRequests .sectionLabel {
3695
  padding: 9px 0;
3696
  border-bottom: 1px dashed var(--border);
3697
  background: transparent;
3698
}
3699
3700
.requestPulse {
3701
  width: 7px;
3702
  height: 7px;
3703
  border-radius: 999px;
3704
  background: var(--accent);
3705
}
3706
3707
.sectionLabel {
3708
  margin: 0;
3709
  color: var(--text-faint);
3710
  font: 600 9px/1 var(--mono);
3711
  letter-spacing: 0.14em;
3712
  text-transform: uppercase;
3713
}
3714
3715
.agentDetailStrip {
3716
  display: flex;
3717
  align-items: stretch;
3718
  border: 1px solid var(--border);
3719
}
3720
3721
.agentIntelligence {
3722
  display: grid;
3723
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(240px, 1fr);
3724
  align-items: center;
3725
  gap: 22px;
3726
  padding: 18px;
3727
  border: 1px solid var(--accent-line);
3728
  background: linear-gradient(110deg, var(--accent-dim), transparent 62%);
3729
}
3730
3731
.intelligenceLead {
3732
  display: flex;
3733
  align-items: center;
3734
  gap: 14px;
3735
}
3736
3737
.intelligenceScore {
3738
  font: 500 42px/1 var(--mono);
3739
  letter-spacing: -0.08em;
3740
}
3741
3742
.intelligenceLead > div {
3743
  display: grid;
3744
  gap: 3px;
3745
}
3746
3747
.intelligenceLead strong {
3748
  font-size: 13px;
3749
}
3750
3751
.intelligenceLead small {
3752
  color: var(--text-muted);
3753
  font-size: 9px;
3754
  text-transform: uppercase;
3755
}
3756
3757
.intelligenceTrend {
3758
  display: grid;
3759
  gap: 5px;
3760
  text-align: right;
3761
}
3762
3763
.intelligenceTrend span {
3764
  font: 600 10px/1 var(--mono);
3765
  text-transform: uppercase;
3766
}
3767
3768
.intelligenceTrend .improving {
3769
  color: var(--live);
3770
}
3771
3772
.intelligenceTrend .declining {
3773
  color: var(--danger);
3774
}
3775
3776
.intelligenceTrend b {
3777
  color: var(--warn);
3778
  font: 500 8px/1.2 var(--mono);
3779
  text-transform: uppercase;
3780
}
3781
3782
.intelligenceSignals {
3783
  display: flex;
3784
  justify-content: flex-end;
3785
  flex-wrap: wrap;
3786
  gap: 5px;
3787
}
3788
3789
.intelligenceSignals span {
3790
  display: inline-flex;
3791
  align-items: center;
3792
  gap: 4px;
3793
  padding: 5px 7px;
3794
  border: 1px solid var(--border);
3795
  font: 500 8px/1 var(--mono);
3796
  text-transform: uppercase;
3797
}
3798
3799
.intelligenceSignals svg {
3800
  width: 9px;
3801
  height: 9px;
3802
}
3803
3804
.intelligenceSignals .strength {
3805
  color: var(--live);
3806
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
3807
}
3808
3809
.intelligenceSignals .risk {
3810
  color: var(--warn);
3811
  border-color: var(--warn-line);
3812
}
3813
3814
.categoryScores {
3815
  display: flex;
3816
  grid-column: 1 / -1;
3817
  flex-wrap: wrap;
3818
  gap: 6px;
3819
  padding-top: 12px;
3820
  border-top: 1px solid var(--border);
3821
}
3822
3823
.categoryScores span {
3824
  padding: 5px 8px;
3825
  color: var(--text-muted);
3826
  background: var(--bg-well);
3827
  font: 500 9px/1 var(--mono);
3828
}
3829
3830
.categoryScores b {
3831
  color: var(--text);
3832
}
3833
3834
.intelligenceEmpty {
3835
  display: flex;
3836
  align-items: center;
3837
  gap: 14px;
3838
  padding: 17px;
3839
  border: 1px dashed var(--border-strong);
3840
}
3841
3842
.intelligenceEmpty > span {
3843
  font: 500 30px/1 var(--mono);
3844
  color: var(--text-faint);
3845
}
3846
3847
.intelligenceEmpty > div {
3848
  display: grid;
3849
  gap: 3px;
3850
}
3851
3852
.intelligenceEmpty strong {
3853
  font-size: 11px;
3854
}
3855
3856
.intelligenceEmpty small {
3857
  color: var(--text-muted);
3858
  font-size: 9px;
3859
}
3860
3861
.agentDetailStrip > span {
3862
  display: grid;
3863
  min-width: 140px;
3864
  gap: 3px;
3865
  padding: 13px 16px;
3866
  border-right: 1px solid var(--border);
3867
  color: var(--text-muted);
3868
  font-size: 10px;
3869
  text-transform: uppercase;
3870
}
3871
3872
.agentDetailStrip b {
3873
  color: var(--text);
3874
  font-size: 12px;
3875
  text-transform: none;
3876
}
3877
3878
.agentDetailStrip a {
3879
  display: inline-flex;
3880
  align-items: center;
3881
  gap: 6px;
3882
  margin-left: auto;
3883
  padding: 0 16px;
3884
  color: var(--accent);
3885
  font-size: 11px;
3886
  font-weight: 600;
3887
  text-decoration: none;
3888
}
3889
3890
.agentDetailStrip a svg {
3891
  width: 12px;
3892
}
3893
3894
.agentHistory {
3895
  display: grid;
3896
  gap: 0;
3897
  margin-top: 4px;
3898
  border-top: 1px solid var(--border);
3899
}
3900
3901
.historyHeading {
3902
  display: grid;
3903
  grid-template-columns: 1fr auto auto;
3904
  align-items: center;
3905
  gap: 12px;
3906
  width: 100%;
3907
  min-height: 44px;
3908
  padding: 0;
3909
  border: 0;
3910
  color: inherit;
3911
  background: transparent;
3912
  font: 500 14px/1.2 inherit;
3913
  letter-spacing: 0;
3914
  text-align: left;
3915
  cursor: pointer;
3916
}
3917
3918
.historyHeading small {
3919
  color: var(--text-muted);
3920
  font: 400 12px/1 var(--mono);
3921
}
3922
3923
.historyHeading .expandIcon,
3924
.historyEntry .expandIcon {
3925
  width: 14px;
3926
  color: var(--text-faint);
3927
  transition: transform 160ms ease;
3928
}
3929
3930
.historyHeading[aria-expanded='true'] > .expandIcon,
3931
.historyEntry.isExpanded > .historyRowSummary .expandIcon,
3932
.agentExpandButton[aria-expanded='true'] .expandIcon {
3933
  transform: rotate(180deg);
3934
}
3935
3936
.agentHistory ol {
3937
  display: grid;
3938
  margin: 0;
3939
  padding: 0;
3940
  list-style: none;
3941
  border-top: 1px dashed var(--border);
3942
}
3943
3944
.historyEntry {
3945
  border-bottom: 1px dashed var(--border);
3946
}
3947
3948
.historyEntry:last-child {
3949
  border-bottom: 0;
3950
}
3951
3952
.historyEntry.isExpanded {
3953
  border-bottom-style: solid;
3954
  background: color-mix(in srgb, var(--bg-hover) 40%, transparent);
3955
}
3956
3957
.historyRowSummary {
3958
  display: grid;
3959
  grid-template-columns: minmax(0, 1fr) auto;
3960
  align-items: center;
3961
  gap: 8px;
3962
}
3963
3964
.historyItem {
3965
  display: grid;
3966
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(180px, 1.6fr) auto;
3967
  align-items: center;
3968
  gap: 13px;
3969
  width: 100%;
3970
  min-height: 52px;
3971
  padding: 0;
3972
  border: 0;
3973
  color: inherit;
3974
  background: transparent;
3975
  text-align: left;
3976
  cursor: pointer;
3977
}
3978
3979
.historyItem:focus-visible,
3980
.historyHeading:focus-visible {
3981
  outline: 1px solid var(--accent);
3982
  outline-offset: 4px;
3983
}
3984
3985
.historyIdentity {
3986
  display: grid;
3987
  min-width: 0;
3988
  gap: 2px;
3989
}
3990
3991
.historyEntry strong,
3992
.historyPurpose {
3993
  overflow: hidden;
3994
  font-size: 13px;
3995
  text-overflow: ellipsis;
3996
  white-space: nowrap;
3997
}
3998
3999
.historyEntry small {
4000
  color: var(--text-muted);
4001
  font-size: 10px;
4002
}
4003
4004
.historyPurpose {
4005
  color: var(--text-muted);
4006
  font-size: 11px;
4007
}
4008
4009
.historyDetail {
4010
  display: grid;
4011
  gap: 4px;
4012
  padding: 0 0 14px 37px;
4013
}
4014
4015
.historyDetail p {
4016
  margin: 0;
4017
  font-size: 13px;
4018
}
4019
4020
.historyDetail small {
4021
  font: 400 11px/1.4 var(--mono);
4022
}
4023
4024
.outcomeSymbol {
4025
  display: grid;
4026
  width: 24px;
4027
  height: 24px;
4028
  place-items: center;
4029
  border: 1px solid var(--border);
4030
  font: 600 10px/1 var(--mono);
4031
}
4032
4033
.outcomeSymbol svg {
4034
  width: 11px;
4035
}
4036
4037
.outcomeSymbol.success,
4038
.outcomeText.success {
4039
  color: var(--live);
4040
}
4041
4042
.outcomeSymbol.failure,
4043
.outcomeText.failure,
4044
.outcomeText.cancelled {
4045
  color: var(--danger);
4046
}
4047
4048
.outcomeSymbol.partial,
4049
.outcomeText.partial,
4050
.outcomeText.provisional {
4051
  color: var(--warn);
4052
}
4053
4054
.outcomeSymbol.pending,
4055
.outcomeText.pending,
4056
.outcomeText.active {
4057
  color: var(--text-faint);
4058
}
4059
4060
.outcomeText {
4061
  font: 600 9px/1 var(--mono);
4062
  text-transform: uppercase;
4063
}
4064
4065
.quietEmpty {
4066
  padding: 28px;
4067
  border: 0;
4068
  border-top: 1px dashed var(--border);
4069
  color: var(--text-muted);
4070
  font: 400 12px/1.5 var(--mono);
4071
  letter-spacing: 0.04em;
4072
  text-transform: lowercase;
4073
  text-align: left;
4074
}
4075
4076
.agentHistory .quietEmpty {
4077
  padding: 16px 0;
4078
  border-top: 0;
4079
}
4080
4081
.emptyAgentState {
4082
  position: relative;
4083
  display: grid;
4084
  min-height: 220px;
4085
  place-items: center;
4086
  align-content: center;
4087
  gap: 10px;
4088
  border: 1px solid var(--border-strong);
4089
  border-right-style: dashed;
4090
  color: var(--text);
4091
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4092
  cursor: pointer;
4093
}
4094
4095
.emptyAgentState > span:not(.sceneCorner) {
4096
  color: var(--accent);
4097
  font: 500 18px/1 var(--mono);
4098
}
4099
4100
.emptyAgentState strong {
4101
  font-size: 15px;
4102
  font-weight: 500;
4103
}
4104
4105
.emptyAgentState span:last-child {
4106
  color: var(--text-muted);
4107
  font-family: var(--font);
4108
  font-size: 13px;
4109
}
4110
4111
.marketplaceHead {
4112
  align-items: center;
4113
}
4114
4115
.marketSearch {
4116
  display: flex;
4117
  align-items: center;
4118
  gap: 9px;
4119
  width: min(360px, 100%);
4120
  min-height: 42px;
4121
  padding: 0 13px;
4122
  border: 1px solid var(--border-strong);
4123
  background: var(--bg-input);
4124
}
4125
4126
.marketFilters {
4127
  display: flex;
4128
  align-items: end;
4129
  gap: 7px;
4130
}
4131
4132
.marketFilters > label:not(.marketSearch) {
4133
  display: grid;
4134
  gap: 5px;
4135
}
4136
4137
.marketFilters > label > span {
4138
  color: var(--text-faint);
4139
  font: 400 11px/1 var(--mono);
4140
  letter-spacing: 0.08em;
4141
  text-transform: lowercase;
4142
}
4143
4144
.marketFilters select,
4145
.marketFilters > label:not(.marketSearch) input {
4146
  min-width: 130px;
4147
  height: 42px;
4148
  padding: 0 10px;
4149
  border: 1px solid var(--border-strong);
4150
  color: var(--text);
4151
  background: var(--bg-input);
4152
  font-size: 11px;
4153
}
4154
4155
.marketContext {
4156
  margin-top: -8px;
4157
  padding: 0 0 4px;
4158
  border: 0;
4159
  color: var(--text-muted);
4160
  background: transparent;
4161
  font: 400 13px/1.55 var(--font);
4162
}
4163
4164
.marketSearch svg {
4165
  width: 16px;
4166
  color: var(--text-faint);
4167
}
4168
4169
.marketSearch input {
4170
  width: 100%;
4171
  border: 0;
4172
  color: var(--text);
4173
  background: transparent;
4174
  font-size: 12px;
4175
}
4176
4177
.marketGrid {
4178
  display: grid;
4179
  grid-template-columns: repeat(3, minmax(0, 1fr));
4180
  gap: 10px;
4181
}
4182
4183
.marketCard {
4184
  position: relative;
4185
  display: grid;
4186
  min-height: 285px;
4187
  padding: 22px 22px 18px;
4188
  border-top: 1px solid var(--border-strong);
4189
  border-right: 1px dashed var(--border);
4190
  border-bottom: 0;
4191
  border-left: 1px solid var(--border-strong);
4192
  background: color-mix(in srgb, var(--bg) 70%, transparent);
4193
}
4194
4195
.marketCard:hover {
4196
  border-color: var(--border-strong);
4197
  border-right-color: var(--accent-line);
4198
}
4199
4200
.marketCardTop {
4201
  display: flex;
4202
  align-items: start;
4203
  justify-content: space-between;
4204
}
4205
4206
.marketPresence {
4207
  padding: 0;
4208
  color: var(--text-faint);
4209
  background: transparent;
4210
  font: 400 11px/1 var(--mono);
4211
  letter-spacing: 0.06em;
4212
  text-transform: lowercase;
4213
}
4214
4215
.marketPresence.online {
4216
  color: var(--live);
4217
  background: transparent;
4218
}
4219
4220
.marketCard h2 {
4221
  margin: 17px 0 5px;
4222
  font-size: 18px;
4223
  font-weight: 500;
4224
  letter-spacing: -0.03em;
4225
}
4226
4227
.matchBadge {
4228
  display: flex;
4229
  align-items: baseline;
4230
  gap: 7px;
4231
  margin-top: 14px;
4232
  color: var(--text-muted);
4233
}
4234
4235
.matchBadge strong {
4236
  color: var(--text);
4237
  font: 500 18px/1 var(--mono);
4238
}
4239
4240
.matchBadge span {
4241
  font: 400 11px/1.3 var(--mono);
4242
  letter-spacing: 0.04em;
4243
  text-transform: lowercase;
4244
}
4245
4246
.matchBadge.strong strong,
4247
.matchBadge.strong span {
4248
  color: var(--live);
4249
}
4250
4251
.matchBadge.unproven strong {
4252
  color: var(--text-faint);
4253
}
4254
4255
.marketCard > p {
4256
  display: -webkit-box;
4257
  overflow: hidden;
4258
  min-height: 36px;
4259
  margin: 0 0 14px;
4260
  color: var(--text-muted);
4261
  font-size: 11px;
4262
  -webkit-box-orient: vertical;
4263
  -webkit-line-clamp: 2;
4264
}
4265
4266
.marketTags {
4267
  display: flex;
4268
  align-content: start;
4269
  flex-wrap: wrap;
4270
  gap: 5px;
4271
}
4272
4273
.marketTags span {
4274
  padding: 5px 7px;
4275
  border: 1px solid var(--border);
4276
  color: var(--text-muted);
4277
  font: 500 9px/1 var(--mono);
4278
}
4279
4280
.marketMeta {
4281
  display: flex;
4282
  align-items: center;
4283
  gap: 12px;
4284
  margin-top: auto;
4285
  padding-top: 14px;
4286
  border-top: 1px solid var(--border);
4287
}
4288
4289
.marketIntelligence {
4290
  display: flex;
4291
  align-items: center;
4292
  gap: 8px;
4293
  min-height: 34px;
4294
  margin-top: 10px;
4295
  padding: 8px 0 0;
4296
  border-top: 1px dashed var(--border);
4297
  color: var(--text-muted);
4298
  background: transparent;
4299
}
4300
4301
.marketIntelligence strong {
4302
  color: var(--accent);
4303
  font: 500 15px/1 var(--mono);
4304
}
4305
4306
.marketIntelligence span {
4307
  font: 400 11px/1.3 var(--mono);
4308
  letter-spacing: 0.04em;
4309
  text-transform: lowercase;
4310
}
4311
4312
.marketMeta span {
4313
  display: inline-flex;
4314
  align-items: center;
4315
  gap: 5px;
4316
  color: var(--text-muted);
4317
  font: 400 11px/1 var(--mono);
4318
  letter-spacing: 0.04em;
4319
  text-transform: lowercase;
4320
}
4321
4322
.marketMeta svg {
4323
  width: 11px;
4324
}
4325
4326
.marketProfileLink {
4327
  display: flex;
4328
  align-items: center;
4329
  justify-content: space-between;
4330
  margin-top: 14px;
4331
  color: var(--accent);
4332
  font: 500 12px/1 var(--mono);
4333
  letter-spacing: 0.04em;
4334
  text-decoration: none;
4335
  text-transform: lowercase;
4336
}
4337
4338
.marketProfileLink svg {
4339
  width: 14px;
4340
}
4341
4342
.marketSkeleton {
4343
  position: relative;
4344
  min-height: 285px;
4345
  border-top: 1px solid var(--border);
4346
  border-right: 1px dashed var(--border);
4347
  border-bottom: 0;
4348
  border-left: 1px solid var(--border);
4349
  background: color-mix(in srgb, var(--bg-well) 70%, transparent);
4350
}
4351
4352
.marketEmpty {
4353
  grid-column: 1 / -1;
4354
}
4355
4356
@media (max-width: 900px) {
4357
  .dashHeader {
4358
    grid-template-columns: auto 1fr auto;
4359
  }
4360
4361
  .dashHeader nav,
4362
  .dashHeader .dashNav {
4363
    display: flex;
4364
    justify-content: center;
4365
    gap: 16px;
4366
  }
4367
}
4368
4369
@media (max-width: 880px) {
4370
  .dashHeader .landingBrand strong {
4371
    display: none;
4372
  }
4373
4374
  .agentRowSummary {
4375
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto auto;
4376
  }
4377
4378
  .agentRowCore {
4379
    grid-template-columns: auto minmax(120px, 1fr);
4380
  }
4381
4382
  .agentSignals {
4383
    display: none;
4384
  }
4385
4386
  .marketGrid {
4387
    grid-template-columns: repeat(2, minmax(0, 1fr));
4388
  }
4389
4390
  .marketFilters {
4391
    flex-wrap: wrap;
4392
    justify-content: flex-end;
4393
  }
4394
4395
  .agentIntelligence {
4396
    grid-template-columns: 1fr auto;
4397
  }
4398
4399
  .intelligenceSignals {
4400
    grid-column: 1 / -1;
4401
    justify-content: flex-start;
4402
  }
4403
}
4404
4405
@media (max-width: 720px) {
4406
  .dashHeader {
4407
    grid-template-columns: 1fr auto;
4408
  }
4409
4410
  .dashHeader .dashNav,
4411
  .dashHeader .dashCta {
4412
    display: none;
4413
  }
4414
}
4415
4416
@media (max-width: 620px) {
4417
  .simpleMain {
4418
    width: min(100% - 24px, 1120px);
4419
    padding: 34px 0 70px;
4420
  }
4421
4422
  .workspaceHead,
4423
  .marketplaceHead {
4424
    display: grid;
4425
    align-items: stretch;
4426
  }
4427
4428
  .workspaceHead .landingPrimary,
4429
  .marketSearch {
4430
    width: 100%;
4431
    justify-content: center;
4432
  }
4433
4434
  .marketFilters {
4435
    display: grid;
4436
    grid-template-columns: 1fr 1fr;
4437
    width: 100%;
4438
  }
4439
4440
  .marketFilters .marketSearch {
4441
    grid-column: 1 / -1;
4442
  }
4443
4444
  .marketFilters select,
4445
  .marketFilters > label:not(.marketSearch) input {
4446
    width: 100%;
4447
    min-width: 0;
4448
  }
4449
4450
  .agentIntelligence {
4451
    grid-template-columns: 1fr;
4452
  }
4453
4454
  .intelligenceTrend {
4455
    text-align: left;
4456
  }
4457
4458
  .intelligenceSignals {
4459
    grid-column: auto;
4460
  }
4461
4462
  .agentRowSummary {
4463
    grid-template-columns: minmax(0, 1fr) auto auto;
4464
    gap: 11px;
4465
    min-height: 74px;
4466
    padding: 12px 0;
4467
  }
4468
4469
  .agentRowCore {
4470
    grid-template-columns: auto minmax(0, 1fr);
4471
    gap: 11px;
4472
  }
4473
4474
  .scorecardTeaser {
4475
    grid-template-columns: auto;
4476
    width: auto;
4477
    padding: 0 0 0 12px;
4478
  }
4479
4480
  .scorecardTeaser > span:last-child {
4481
    display: none;
4482
  }
4483
4484
  .scorecardIdentity {
4485
    display: grid;
4486
    align-items: start;
4487
  }
4488
4489
  .scorecardContext {
4490
    justify-content: flex-start;
4491
  }
4492
4493
  .scorecardMetrics {
4494
    grid-template-columns: 1fr;
4495
  }
4496
4497
  .scorecardMetrics > div:nth-child(odd) {
4498
    border-right: 0;
4499
  }
4500
4501
  .scorecardMetrics > div {
4502
    grid-template-columns: minmax(120px, 1fr) minmax(70px, 0.8fr) 30px;
4503
    padding: 10px 14px;
4504
  }
4505
4506
  .scorecardFoot {
4507
    grid-template-columns: 1fr 1fr;
4508
  }
4509
4510
  .scorecardFoot small {
4511
    display: none;
4512
  }
4513
4514
  .scorecardActions {
4515
    display: grid;
4516
    grid-template-columns: repeat(3, 1fr);
4517
  }
4518
4519
  .scorecardActions > span {
4520
    grid-column: 1 / -1;
4521
  }
4522
4523
  .scorecardActions button {
4524
    justify-content: center;
4525
    padding: 0 8px;
4526
    font-size: 8px;
4527
  }
4528
4529
  .agentExpanded {
4530
    padding: 8px 12px 18px;
4531
  }
4532
4533
  .agentDetailStrip {
4534
    display: grid;
4535
    grid-template-columns: repeat(3, 1fr);
4536
  }
4537
4538
  .agentDetailStrip > span {
4539
    min-width: 0;
4540
    padding: 10px;
4541
  }
4542
4543
  .agentDetailStrip a {
4544
    grid-column: 1 / -1;
4545
    min-height: 38px;
4546
    margin-left: 0;
4547
    border-top: 1px solid var(--border);
4548
  }
4549
4550
  .historyItem {
4551
    grid-template-columns: auto minmax(0, 1fr) auto;
4552
  }
4553
4554
  .historyPurpose {
4555
    display: none;
4556
  }
4557
4558
  .marketGrid {
4559
    grid-template-columns: 1fr;
4560
  }
4561
}
4562
4563
/* Authenticated product — same protocol chrome as the landing */
4564
html:has(.appInset) {
4565
  scrollbar-gutter: stable;
4566
  scrollbar-width: thin;
4567
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
4568
    color-mix(in srgb, var(--bg) 92%, var(--border));
4569
}
4570
4571
html:has(.appInset)::-webkit-scrollbar,
4572
html:has(.appInset) body::-webkit-scrollbar {
4573
  width: 10px;
4574
}
4575
4576
html:has(.appInset)::-webkit-scrollbar-track,
4577
html:has(.appInset) body::-webkit-scrollbar-track {
4578
  background: var(--bg);
4579
  box-shadow: inset 1px 0 0 var(--border);
4580
}
4581
4582
html:has(.appInset)::-webkit-scrollbar-thumb,
4583
html:has(.appInset) body::-webkit-scrollbar-thumb {
4584
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
4585
  border: 3px solid var(--bg);
4586
  background-clip: padding-box;
4587
}
4588
4589
[data-slot='sidebar-wrapper'] {
4590
  background: var(--bg);
4591
}
4592
4593
[data-slot='sidebar'] {
4594
  border-right: 1px solid var(--border);
4595
  background: var(--bg) !important;
4596
}
4597
4598
[data-slot='sidebar-inner'] {
4599
  border: 0 !important;
4600
  border-radius: 0 !important;
4601
  background: var(--bg) !important;
4602
  box-shadow: none !important;
4603
}
4604
4605
[data-slot='sidebar-header'] {
4606
  padding: 16px 12px 14px;
4607
  border-bottom: 1px solid var(--border);
4608
}
4609
4610
[data-slot='sidebar-content'] {
4611
  padding: 10px 8px;
4612
}
4613
4614
[data-slot='sidebar-footer'] {
4615
  padding: 8px;
4616
  border-top: 1px solid var(--border);
4617
}
4618
4619
.sidebarBrandMark {
4620
  display: block;
4621
  width: 18px;
4622
  height: 18px;
4623
  flex: none;
4624
  color: var(--accent);
4625
}
4626
4627
.sidebarBrandText {
4628
  min-width: 0;
4629
  font-family: var(--mono);
4630
  font-size: 13px;
4631
  font-weight: 500;
4632
  letter-spacing: 0.04em;
4633
  text-transform: lowercase;
4634
}
4635
4636
.sidebarBrandText strong {
4637
  font-weight: 500;
4638
}
4639
4640
[data-sidebar='menu-button'] {
4641
  min-height: 34px;
4642
  border: 0 !important;
4643
  border-radius: 0 !important;
4644
  color: var(--text-muted);
4645
  font-family: var(--mono);
4646
  font-size: 12px;
4647
  letter-spacing: 0.04em;
4648
  text-transform: lowercase;
4649
  background: transparent !important;
4650
  box-shadow: none !important;
4651
}
4652
4653
[data-sidebar='menu-button']:hover {
4654
  color: var(--text);
4655
  background: transparent !important;
4656
}
4657
4658
[data-sidebar='menu-button'][data-active='true'] {
4659
  color: var(--text) !important;
4660
  background: transparent !important;
4661
  box-shadow: inset 2px 0 0 var(--accent);
4662
}
4663
4664
[data-sidebar='menu-button'][data-active='true'] svg {
4665
  color: var(--accent);
4666
}
4667
4668
[data-sidebar='menu-badge'] {
4669
  min-width: 16px;
4670
  height: 16px;
4671
  border: 0;
4672
  border-radius: 0;
4673
  color: var(--accent) !important;
4674
  background: transparent !important;
4675
  font: 500 10px/1 var(--mono);
4676
}
4677
4678
.appInset {
4679
  min-width: 0;
4680
  background: var(--bg) !important;
4681
}
4682
4683
.appTopbar {
4684
  position: sticky;
4685
  top: 0;
4686
  z-index: 8;
4687
  min-height: 52px;
4688
  padding: 0 28px;
4689
  border-bottom: 1px solid var(--border);
4690
  background: color-mix(in srgb, var(--bg) 88%, transparent);
4691
  backdrop-filter: blur(12px);
4692
  -webkit-backdrop-filter: blur(12px);
4693
}
4694
4695
.appTopbar [data-sidebar='trigger'] {
4696
  border: 1px solid var(--border);
4697
  border-radius: 0;
4698
  background: transparent;
4699
}
4700
4701
.commandTrigger {
4702
  height: 34px !important;
4703
  border-color: var(--border) !important;
4704
  border-radius: 0 !important;
4705
  background: transparent !important;
4706
  box-shadow: none !important;
4707
}
4708
4709
.appMain {
4710
  width: min(100%, 1120px);
4711
  max-width: none;
4712
  margin: 0 auto;
4713
  padding: 32px 32px 80px;
4714
}
4715
4716
.previewBanner {
4717
  width: fit-content;
4718
  margin-bottom: 18px;
4719
  padding: 0;
4720
  border: 0;
4721
  border-radius: 0;
4722
  color: var(--text-faint);
4723
  background: transparent;
4724
  font: 400 11px/1.4 var(--mono);
4725
  letter-spacing: 0.06em;
4726
  text-transform: lowercase;
4727
}
4728
4729
.previewBanner::before {
4730
  content: none;
4731
}
4732
4733
.pageKicker {
4734
  display: flex;
4735
  align-items: center;
4736
  gap: 10px;
4737
  margin: 0 0 10px;
4738
  color: var(--text-faint);
4739
  font-family: var(--mono);
4740
  font-size: 11px;
4741
  letter-spacing: 0.08em;
4742
  text-transform: lowercase;
4743
}
4744
4745
.pageKicker > span {
4746
  color: var(--accent);
4747
}
4748
4749
.pageHead {
4750
  display: flex;
4751
  align-items: center;
4752
  justify-content: space-between;
4753
  gap: 16px;
4754
  min-height: 42px;
4755
  padding: 0 0 16px;
4756
  border-bottom: 1px solid var(--border);
4757
}
4758
4759
.pageHead h1 {
4760
  margin: 0;
4761
  font-size: 16px;
4762
  font-weight: 500;
4763
  letter-spacing: 0;
4764
  line-height: 1.2;
4765
}
4766
4767
.primary,
4768
.secondary,
4769
.dangerButton {
4770
  min-height: 34px;
4771
  border-radius: 0;
4772
  font-weight: 500;
4773
  letter-spacing: 0.04em;
4774
  text-transform: lowercase;
4775
  box-shadow: none;
4776
}
4777
4778
.primary {
4779
  box-shadow: none;
4780
}
4781
4782
.primary:hover {
4783
  transform: none;
4784
  box-shadow: none;
4785
}
4786
4787
.primary:active,
4788
.secondary:active,
4789
.dangerButton:active {
4790
  transform: translateY(1px);
4791
}
4792
4793
.secondary {
4794
  background: transparent;
4795
}
4796
4797
.attentionBanner,
4798
.readiness {
4799
  min-height: 0;
4800
  margin-top: 16px;
4801
  padding: 14px 0;
4802
  border: 0;
4803
  border-bottom: 1px solid var(--border);
4804
  border-radius: 0;
4805
  background: transparent;
4806
  box-shadow: none;
4807
}
4808
4809
.attentionBanner {
4810
  border-color: transparent;
4811
  border-bottom-color: var(--accent-line);
4812
  background: transparent;
4813
}
4814
4815
.attentionBanner:hover {
4816
  border-color: transparent;
4817
  border-bottom-color: var(--accent);
4818
  transform: none;
4819
}
4820
4821
.statusIndex {
4822
  min-width: 1.6em;
4823
}
4824
4825
.metrics {
4826
  gap: 24px;
4827
  margin: 22px 0 8px;
4828
}
4829
4830
.metric {
4831
  min-height: 0;
4832
  padding: 4px 0;
4833
  border: 0;
4834
  border-radius: 0;
4835
  background: transparent;
4836
  box-shadow: none;
4837
}
4838
4839
.metric:hover {
4840
  border-color: transparent;
4841
  transform: none;
4842
}
4843
4844
.metric::before {
4845
  position: static;
4846
  width: 16px;
4847
  height: 1px;
4848
  margin: 0 0 10px;
4849
  border-radius: 0;
4850
  box-shadow: none;
4851
  background: var(--accent);
4852
}
4853
4854
.metric.warn::before {
4855
  background: var(--warn);
4856
  box-shadow: none;
4857
}
4858
4859
.metric > strong {
4860
  margin: 0 0 6px;
4861
  font-size: 28px;
4862
}
4863
4864
.panel,
4865
.setupRequests,
4866
.agentCard,
4867
.settingsCard,
4868
.insightPrinciple,
4869
.journeyDetail {
4870
  border: 0;
4871
  border-radius: 0;
4872
  background: transparent;
4873
  box-shadow: none;
4874
}
4875
4876
.panel {
4877
  padding: 8px 0 0;
4878
}
4879
4880
.panelHead {
4881
  padding-bottom: 12px;
4882
}
4883
4884
.panelHead h2,
4885
.panelKicker {
4886
  display: flex;
4887
  align-items: center;
4888
  gap: 8px;
4889
  margin: 0;
4890
  color: var(--text);
4891
  font: 500 12px/1.4 var(--mono);
4892
  letter-spacing: 0.06em;
4893
  text-transform: lowercase;
4894
}
4895
4896
.panelKicker > span,
4897
.panelHead h2 > span {
4898
  color: var(--accent);
4899
}
4900
4901
.panelHead p {
4902
  margin: 6px 0 0;
4903
}
4904
4905
.setupRequests > div:first-child h2 {
4906
  margin: 8px 0 4px;
4907
  font-size: 16px;
4908
  font-weight: 500;
4909
  letter-spacing: 0;
4910
}
4911
4912
.setupRequests {
4913
  margin: 18px 0;
4914
  padding: 8px 0;
4915
}
4916
4917
.setupRequest {
4918
  padding: 14px 0;
4919
  border-bottom: 1px solid var(--border);
4920
}
4921
4922
.historyRow {
4923
  margin: 0;
4924
  padding: 12px 0;
4925
  border-radius: 0;
4926
}
4927
4928
.historyRow:hover {
4929
  background: transparent;
4930
  transform: none;
4931
}
4932
4933
.agentGrid,
4934
.insightGrid {
4935
  gap: 16px;
4936
}
4937
4938
.agentCard {
4939
  min-height: 0;
4940
  padding: 18px 0;
4941
  border-top: 1px solid var(--border);
4942
}
4943
4944
.agentCard:hover {
4945
  border-color: var(--border);
4946
  box-shadow: none;
4947
  transform: none;
4948
}
4949
4950
.runtimeBox,
4951
.accessTokenBox,
4952
.notice,
4953
.successBanner,
4954
.conversationInsights,
4955
.outcomeCard,
4956
.insightStats span {
4957
  border-radius: 0;
4958
}
4959
4960
.runtimeBox input,
4961
.automationForm input,
4962
.automationForm select,
4963
.setting input,
4964
.setting select,
4965
.searchField,
4966
.providerForm input,
4967
.providerForm select,
4968
.providerForm textarea,
4969
.replyBox textarea {
4970
  border-radius: 0;
4971
}
4972
4973
.settingsCard {
4974
  padding: 0;
4975
}
4976
4977
.connectionTypePicker button {
4978
  border-radius: 0;
4979
  background: transparent;
4980
}
4981
4982
.threadList,
4983
.conversationDetail,
4984
.journeyDetail {
4985
  padding: 0;
4986
  border: 0;
4987
  border-radius: 0;
4988
  background: transparent;
4989
  box-shadow: none;
4990
}
4991
4992
.threadList > button,
4993
.journeyList > button {
4994
  border-radius: 0;
4995
}
4996
4997
[data-slot='dialog-content'],
4998
[data-slot='dropdown-menu-content'],
4999
[data-slot='command-dialog-content'] {
5000
  border-color: var(--border-strong) !important;
5001
  border-radius: 0 !important;
5002
  background: var(--popover) !important;
5003
  box-shadow: none !important;
5004
}
5005
5006
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
5007
  text-transform: lowercase;
5008
}
5009
5010
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
5011
  font-family: var(--mono);
5012
  font-size: 11px;
5013
  letter-spacing: 0.03em;
5014
}
5015
5016
.appInset [data-slot='tabs-list'],
5017
.appInset [data-slot='tabs-trigger'] {
5018
  border-radius: 0 !important;
5019
}
5020
5021
.appInset [data-slot='tabs-trigger'] {
5022
  font-family: var(--mono);
5023
  font-size: 11px;
5024
  letter-spacing: 0.06em;
5025
  text-transform: lowercase;
5026
  background: transparent !important;
5027
  box-shadow: none !important;
5028
}
5029
5030
.appInset
5031
  [data-slot='tabs-list'][data-variant='line']
5032
  [data-slot='tabs-trigger'][data-state='active']::after {
5033
  height: 1px;
5034
  background: var(--accent);
5035
}
5036
5037
.textButton {
5038
  font-weight: 500;
5039
  letter-spacing: 0.04em;
5040
  text-transform: lowercase;
5041
}
5042
5043
.insightPrinciple .pageKicker {
5044
  margin-bottom: 8px;
5045
}
5046
5047
.setupRequests > div:first-child .pageKicker {
5048
  margin-bottom: 8px;
5049
}
5050
5051
.connectionTypePicker button {
5052
  font-weight: 500;
5053
  letter-spacing: 0.02em;
5054
}
5055
5056
@media (max-width: 840px) {
5057
  .appTopbar {
5058
    min-height: 48px;
5059
    padding: 0 16px;
5060
  }
5061
5062
  .appMain {
5063
    padding: 20px 16px 64px;
5064
  }
5065
5066
  .pageHead {
5067
    min-height: 0;
5068
  }
5069
}
5070
5071
@media (max-width: 980px) {
5072
  .contentGrid,
5073
  .connectLayout,
5074
  .conversationLayout,
5075
  .journeyLayout,
5076
  .insightPrinciple {
5077
    grid-template-columns: 1fr;
5078
  }
5079
5080
  .journeyList {
5081
    grid-template-columns: repeat(2, minmax(0, 1fr));
5082
  }
5083
5084
  .loginPage {
5085
    grid-template-columns: 1fr;
5086
  }
5087
5088
  .loginPitch {
5089
    display: none;
5090
  }
5091
5092
  .loginCard {
5093
    min-height: 100vh;
5094
    border: 0;
5095
  }
5096
5097
  .metrics {
5098
    grid-template-columns: 1fr 1fr;
5099
  }
5100
5101
  .agentGrid {
5102
    grid-template-columns: 1fr;
5103
  }
5104
5105
  .insightGrid {
5106
    grid-template-columns: 1fr;
5107
  }
5108
}
5109
5110
@media (max-width: 840px) {
5111
  .appTopbar {
5112
    min-height: 48px;
5113
    padding: 0 16px;
5114
  }
5115
5116
  .appMain {
5117
    padding: 16px 16px 64px;
5118
  }
5119
5120
  .pageHead {
5121
    align-items: flex-start;
5122
    flex-direction: column;
5123
  }
5124
5125
  .setting {
5126
    grid-template-columns: 1fr;
5127
    gap: 12px;
5128
  }
5129
5130
  .connectionTypePicker,
5131
  .providerForm,
5132
  .firstRunForm,
5133
  .firstRunSteps {
5134
    grid-template-columns: 1fr;
5135
  }
5136
5137
  .firstRunSteps.twoSteps,
5138
  .agentCardPreview dl,
5139
  .firstRunComplete {
5140
    grid-template-columns: 1fr;
5141
  }
5142
5143
  .firstRunGuide {
5144
    padding: 18px;
5145
  }
5146
5147
  .firstRunHeader,
5148
  .firstRunStage,
5149
  .firstRunWaiting,
5150
  .firstRunComplete,
5151
  .firstRunBlocked {
5152
    align-items: flex-start;
5153
    flex-direction: column;
5154
  }
5155
5156
  .firstRunActions {
5157
    flex-wrap: wrap;
5158
  }
5159
5160
  .providerSubmit {
5161
    align-items: flex-start;
5162
    flex-direction: column;
5163
  }
5164
5165
  .tokenList > div {
5166
    align-items: flex-start;
5167
    flex-direction: column;
5168
  }
5169
5170
  .toggle {
5171
    margin-left: 0;
5172
  }
5173
5174
  .endpoint {
5175
    flex-direction: column;
5176
  }
5177
5178
  .readiness,
5179
  .attentionBanner,
5180
  .setupRequest {
5181
    align-items: flex-start;
5182
    flex-direction: column;
5183
  }
5184
5185
  .readiness > button,
5186
  .attentionBanner,
5187
  .decisionButtons {
5188
    width: 100%;
5189
  }
5190
5191
  .decisionButtons button {
5192
    flex: 1;
5193
  }
5194
5195
  .loginCard {
5196
    padding: 28px 20px;
5197
  }
5198
5199
  .historyRow > b {
5200
    display: none;
5201
  }
5202
5203
  .journeyList {
5204
    grid-template-columns: 1fr;
5205
  }
5206
5207
  .journeySummaryGrid,
5208
  .ratingGrid,
5209
  .insightStats {
5210
    grid-template-columns: 1fr;
5211
  }
5212
5213
  .journeySummaryGrid section {
5214
    border-right: 0;
5215
    border-bottom: 1px solid var(--border);
5216
  }
5217
5218
  .journeySummaryGrid section:last-child {
5219
    border-bottom: 0;
5220
  }
5221
5222
  .journeyTimeline li {
5223
    grid-template-columns: 8px minmax(0, 1fr);
5224
  }
5225
5226
  .journeyTimeline li > .statusPill {
5227
    grid-column: 2;
5228
    margin-top: -12px;
5229
    margin-bottom: 16px;
5230
  }
5231
}