DocsLog in

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

Viewing files at commit 8a15fe87b720Commit detailsView latest

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