DocsLog in

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

Viewing files at commit c345cf789a03Commit detailsView latest

apps/dashboard/src/styles.css 4923 lines · 82.0 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.twoSteps {
2681
  grid-template-columns: repeat(2, minmax(0, 1fr));
2682
}
2683
2684
.firstRunSteps li {
2685
  display: flex;
2686
  align-items: center;
2687
  gap: 9px;
2688
  min-height: 46px;
2689
  padding: 0 12px;
2690
  color: var(--text-muted);
2691
  background: var(--bg-elevated);
2692
  font-size: 12px;
2693
}
2694
2695
.firstRunSteps li > span {
2696
  display: grid;
2697
  width: 22px;
2698
  height: 22px;
2699
  place-items: center;
2700
  border: 1px solid var(--border-strong);
2701
  font: 500 10px/1 var(--mono);
2702
}
2703
2704
.firstRunSteps li.done {
2705
  color: var(--text);
2706
}
2707
2708
.firstRunSteps li.done > span {
2709
  border-color: var(--accent-line);
2710
  color: var(--accent);
2711
  background: var(--accent-dim);
2712
}
2713
2714
.firstRunSteps svg,
2715
.firstRunIcon svg,
2716
.firstRunComplete button svg {
2717
  width: 14px;
2718
  height: 14px;
2719
}
2720
2721
.firstRunForm {
2722
  display: grid;
2723
  grid-template-columns: repeat(2, minmax(0, 1fr));
2724
  gap: 14px;
2725
  padding-top: 18px;
2726
  border-top: 1px solid var(--border);
2727
}
2728
2729
.firstRunStage,
2730
.firstRunBlocked,
2731
.firstRunWaiting {
2732
  grid-column: 1 / -1;
2733
}
2734
2735
.firstRunStage {
2736
  align-items: start;
2737
}
2738
2739
.firstRunStage > div,
2740
.firstRunWaiting > div,
2741
.firstRunComplete > div {
2742
  display: grid;
2743
  flex: 1;
2744
  gap: 3px;
2745
}
2746
2747
.firstRunIcon {
2748
  display: grid;
2749
  width: 36px;
2750
  height: 36px;
2751
  flex: 0 0 auto;
2752
  place-items: center;
2753
  color: var(--accent);
2754
  background: var(--accent-dim);
2755
}
2756
2757
.firstRunIcon.complete {
2758
  color: var(--live);
2759
}
2760
2761
.firstRunForm label {
2762
  display: grid;
2763
  gap: 6px;
2764
  color: var(--text-muted);
2765
  font-size: 12px;
2766
}
2767
2768
.firstRunForm label.fullWidth {
2769
  grid-column: 1 / -1;
2770
}
2771
2772
.firstRunForm input,
2773
.firstRunForm select,
2774
.firstRunForm textarea {
2775
  width: 100%;
2776
  min-height: 42px;
2777
  padding: 9px 10px;
2778
  border: 1px solid var(--border-strong);
2779
  border-radius: 0;
2780
  color: var(--text);
2781
  background: var(--bg-elevated);
2782
  font: inherit;
2783
}
2784
2785
.firstRunForm textarea {
2786
  min-height: 86px;
2787
  resize: vertical;
2788
}
2789
2790
.firstRunForm > button[type='submit'] {
2791
  align-self: end;
2792
  justify-self: start;
2793
  min-height: 42px;
2794
}
2795
2796
.firstRunBlocked {
2797
  display: flex;
2798
  align-items: center;
2799
  justify-content: space-between;
2800
  gap: 14px;
2801
  padding: 14px;
2802
  border: 1px solid var(--border);
2803
  color: var(--text-muted);
2804
  background: var(--bg-elevated);
2805
  font-size: 13px;
2806
}
2807
2808
.firstRunBlocked button {
2809
  flex: 0 0 auto;
2810
}
2811
2812
.firstRunReview {
2813
  display: grid;
2814
  gap: 16px;
2815
  padding-top: 18px;
2816
  border-top: 1px solid var(--border);
2817
}
2818
2819
.agentCardPreview {
2820
  display: grid;
2821
  gap: 10px;
2822
  padding: 18px;
2823
  border: 1px solid var(--border-strong);
2824
  background: var(--bg-elevated);
2825
}
2826
2827
.agentCardPreview h3,
2828
.agentCardPreview p,
2829
.agentCardPreview dl,
2830
.agentCardPreview dd {
2831
  margin: 0;
2832
}
2833
2834
.agentCardPreview p,
2835
.agentCardPreview small,
2836
.firstRunComplete small {
2837
  color: var(--text-muted);
2838
}
2839
2840
.agentCardPreview dl {
2841
  display: grid;
2842
  grid-template-columns: repeat(2, minmax(0, 1fr));
2843
  gap: 12px;
2844
}
2845
2846
.agentCardPreview dl > div {
2847
  display: grid;
2848
  gap: 3px;
2849
}
2850
2851
.agentCardPreview dt {
2852
  color: var(--text-muted);
2853
  font: 500 10px/1.4 var(--mono);
2854
  letter-spacing: 0.08em;
2855
  text-transform: uppercase;
2856
}
2857
2858
.verifiedPublisher {
2859
  justify-self: start;
2860
  padding: 4px 7px;
2861
  border: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
2862
  color: var(--live);
2863
  font: 500 11px/1 var(--mono);
2864
}
2865
2866
.firstRunWaiting {
2867
  align-items: start;
2868
  padding-top: 18px;
2869
  border-top: 1px solid var(--border);
2870
}
2871
2872
.firstRunWaiting small {
2873
  color: var(--text-muted);
2874
  font-size: 11px;
2875
  line-height: 1.5;
2876
}
2877
2878
.firstRunComplete {
2879
  display: grid;
2880
  grid-template-columns: auto 1fr auto;
2881
  padding-top: 18px;
2882
  border-top: 1px solid var(--border);
2883
}
2884
2885
.firstRunComplete button,
2886
.firstRunWaiting > button,
2887
.firstRunStage > button {
2888
  display: inline-flex;
2889
  align-items: center;
2890
  gap: 7px;
2891
  white-space: nowrap;
2892
}
2893
2894
.firstRunComplete a:not(.secondary) {
2895
  overflow-wrap: anywhere;
2896
  color: var(--accent);
2897
  font: 500 12px/1.5 var(--mono);
2898
}
2899
2900
.firstRunActions {
2901
  display: flex;
2902
  align-items: center;
2903
  gap: 8px;
2904
}
2905
2906
.firstRunActions svg {
2907
  width: 14px;
2908
  height: 14px;
2909
}
2910
2911
.compactRequests {
2912
  display: grid;
2913
  gap: 1px;
2914
  border: 1px solid var(--accent-line);
2915
  background: var(--accent-line);
2916
}
2917
2918
.compactRequests article,
2919
.agentRequests article {
2920
  display: flex;
2921
  align-items: center;
2922
  gap: 13px;
2923
  padding: 12px 14px;
2924
  background: var(--bg-elevated);
2925
}
2926
2927
.compactRequests article > div:nth-child(2),
2928
.agentRequests article > div:nth-child(2) {
2929
  display: grid;
2930
  min-width: 0;
2931
  gap: 2px;
2932
}
2933
2934
.compactRequests strong,
2935
.agentRequests strong {
2936
  overflow: hidden;
2937
  font-size: 13px;
2938
  text-overflow: ellipsis;
2939
  white-space: nowrap;
2940
}
2941
2942
.compactRequests small,
2943
.agentRequests small {
2944
  color: var(--text-muted);
2945
  font-size: 11px;
2946
}
2947
2948
.requestIcon {
2949
  display: grid;
2950
  width: 30px;
2951
  height: 30px;
2952
  place-items: center;
2953
  color: var(--accent);
2954
  background: var(--accent-dim);
2955
}
2956
2957
.requestIcon svg {
2958
  width: 15px;
2959
}
2960
2961
.iconDecisions {
2962
  display: flex;
2963
  gap: 6px;
2964
  margin-left: auto;
2965
}
2966
2967
.iconDecisions button {
2968
  display: grid;
2969
  width: 32px;
2970
  height: 32px;
2971
  place-items: center;
2972
  border: 1px solid var(--border-strong);
2973
  color: var(--text-muted);
2974
  background: transparent;
2975
  cursor: pointer;
2976
}
2977
2978
.iconDecisions button:hover {
2979
  color: var(--danger);
2980
  border-color: var(--danger-line);
2981
  background: var(--danger-dim);
2982
}
2983
2984
.iconDecisions button.approve {
2985
  color: var(--live);
2986
}
2987
2988
.iconDecisions button.approve:hover {
2989
  border-color: color-mix(in srgb, var(--live) 32%, transparent);
2990
  background: var(--live-dim);
2991
}
2992
2993
.iconDecisions svg {
2994
  width: 15px;
2995
}
2996
2997
.agentList {
2998
  display: grid;
2999
  gap: 9px;
3000
}
3001
3002
.agentRow {
3003
  overflow: clip;
3004
  border: 1px solid var(--border);
3005
  background: var(--bg-elevated);
3006
  transition:
3007
    border-color 160ms ease,
3008
    background 160ms ease;
3009
}
3010
3011
.agentRow:hover,
3012
.agentRow.isExpanded {
3013
  border-color: var(--border-strong);
3014
}
3015
3016
.agentRowSummary {
3017
  display: grid;
3018
  grid-template-columns: minmax(0, 1fr) minmax(190px, 230px) auto auto;
3019
  align-items: center;
3020
  gap: 16px;
3021
  width: 100%;
3022
  min-height: 82px;
3023
  padding: 13px 17px;
3024
  color: inherit;
3025
  background: transparent;
3026
  text-align: left;
3027
}
3028
3029
.agentRowCore {
3030
  display: grid;
3031
  grid-template-columns: auto minmax(140px, 1.2fr) minmax(320px, 2fr);
3032
  align-items: center;
3033
  gap: 16px;
3034
  min-width: 0;
3035
  padding: 0;
3036
  border: 0;
3037
  color: inherit;
3038
  background: transparent;
3039
  text-align: left;
3040
  cursor: pointer;
3041
}
3042
3043
.agentRowCore:focus-visible,
3044
.scorecardTeaser:focus-visible,
3045
.agentExpandButton:focus-visible {
3046
  outline: 1px solid var(--accent);
3047
  outline-offset: 4px;
3048
}
3049
3050
.agentAvatar {
3051
  position: relative;
3052
  display: grid;
3053
  width: 42px;
3054
  height: 42px;
3055
  flex: none;
3056
  place-items: center;
3057
  border: 1px solid var(--border-strong);
3058
  color: var(--text-muted);
3059
  background: var(--bg-well);
3060
}
3061
3062
.agentAvatar > svg {
3063
  width: 19px;
3064
}
3065
3066
.agentAvatar i {
3067
  position: absolute;
3068
  right: -3px;
3069
  bottom: -3px;
3070
  width: 9px;
3071
  height: 9px;
3072
  border: 2px solid var(--bg);
3073
  border-radius: 999px;
3074
  background: var(--text-faint);
3075
}
3076
3077
.agentAvatar i.online {
3078
  background: var(--live);
3079
  box-shadow: 0 0 0 3px var(--live-dim);
3080
}
3081
3082
.agentIdentity {
3083
  display: grid;
3084
  min-width: 0;
3085
  gap: 3px;
3086
}
3087
3088
.agentIdentity strong {
3089
  overflow: hidden;
3090
  font-size: 14px;
3091
  text-overflow: ellipsis;
3092
  white-space: nowrap;
3093
}
3094
3095
.agentIdentity small {
3096
  color: var(--text-muted);
3097
  font-size: 10px;
3098
}
3099
3100
.agentSignals {
3101
  display: flex;
3102
  flex-wrap: wrap;
3103
  gap: 6px;
3104
}
3105
3106
.agentSignals span {
3107
  display: inline-flex;
3108
  align-items: center;
3109
  gap: 5px;
3110
  padding: 5px 7px;
3111
  border: 1px solid var(--border);
3112
  color: var(--text-muted);
3113
  font: 500 9px/1 var(--mono);
3114
  text-transform: uppercase;
3115
}
3116
3117
.agentSignals svg {
3118
  width: 10px;
3119
  height: 10px;
3120
}
3121
3122
.agentSignals .signalOnline {
3123
  color: var(--live);
3124
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
3125
  background: var(--live-dim);
3126
}
3127
3128
.agentSignals .signalVerified {
3129
  color: var(--accent);
3130
  border-color: var(--accent-line);
3131
  background: var(--accent-dim);
3132
}
3133
3134
.scorecardTeaser {
3135
  display: grid;
3136
  grid-template-columns: 44px 1fr;
3137
  align-items: center;
3138
  gap: 10px;
3139
  min-width: 0;
3140
  padding: 9px 10px;
3141
  border: 1px solid var(--accent-line);
3142
  color: inherit;
3143
  background: linear-gradient(120deg, var(--accent-dim), transparent);
3144
  text-align: left;
3145
  cursor: pointer;
3146
  transition:
3147
    border-color 160ms ease,
3148
    transform 160ms ease;
3149
}
3150
3151
.scorecardTeaser:hover {
3152
  border-color: var(--accent);
3153
  transform: translateY(-1px);
3154
}
3155
3156
.scorecardTeaser > span:last-child {
3157
  display: grid;
3158
  min-width: 0;
3159
  gap: 3px;
3160
}
3161
3162
.scorecardTeaser strong {
3163
  font: 600 9px/1 var(--mono);
3164
  letter-spacing: 0.08em;
3165
  text-transform: uppercase;
3166
}
3167
3168
.scorecardTeaser small {
3169
  overflow: hidden;
3170
  color: var(--text-muted);
3171
  font-size: 8px;
3172
  text-overflow: ellipsis;
3173
  text-transform: uppercase;
3174
  white-space: nowrap;
3175
}
3176
3177
.scorecardBars {
3178
  display: grid;
3179
  align-content: center;
3180
  gap: 3px;
3181
  height: 30px;
3182
  padding: 5px;
3183
  border-left: 2px solid var(--accent);
3184
  background: var(--bg-well);
3185
}
3186
3187
.scorecardBars i {
3188
  height: 2px;
3189
  max-width: 100%;
3190
  background: var(--accent);
3191
}
3192
3193
.agentExpandButton {
3194
  display: grid;
3195
  width: 30px;
3196
  height: 30px;
3197
  place-items: center;
3198
  padding: 0;
3199
  border: 0;
3200
  color: inherit;
3201
  background: transparent;
3202
  cursor: pointer;
3203
}
3204
3205
.notificationCount {
3206
  display: grid;
3207
  width: 22px;
3208
  height: 22px;
3209
  place-items: center;
3210
  border-radius: 999px;
3211
  color: #fff;
3212
  background: var(--accent);
3213
  font: 700 10px/1 var(--mono);
3214
}
3215
3216
.expandIcon {
3217
  width: 17px;
3218
  color: var(--text-faint);
3219
  transition: transform 160ms ease;
3220
}
3221
3222
.agentRow.isExpanded .expandIcon {
3223
  transform: rotate(180deg);
3224
}
3225
3226
.scorecardDialog {
3227
  z-index: 80 !important;
3228
  width: min(1040px, calc(100vw - 32px)) !important;
3229
  max-width: 1040px !important;
3230
  max-height: calc(100vh - 32px);
3231
  gap: 14px !important;
3232
  overflow: auto;
3233
  padding: 18px !important;
3234
  border: 1px solid var(--border-strong) !important;
3235
  border-radius: 0 !important;
3236
  color: var(--text) !important;
3237
  opacity: 1 !important;
3238
  background: #0c0a0a !important;
3239
  box-shadow: 0 28px 100px rgb(0 0 0 / 58%) !important;
3240
}
3241
3242
[data-slot='dialog-overlay'] {
3243
  z-index: 70 !important;
3244
}
3245
3246
.scorecardA11yTitle {
3247
  position: absolute;
3248
  width: 1px;
3249
  height: 1px;
3250
  overflow: hidden;
3251
  clip: rect(0, 0, 0, 0);
3252
  white-space: nowrap;
3253
}
3254
3255
.behaviourScorecard {
3256
  position: relative;
3257
  overflow: hidden;
3258
  border: 1px solid var(--border-strong);
3259
  background: linear-gradient(120deg, #28110d, #100d0c 38%);
3260
}
3261
3262
:root[data-theme='light'] .scorecardDialog {
3263
  background: #f7f4f2 !important;
3264
}
3265
3266
:root[data-theme='light'] .behaviourScorecard {
3267
  background: linear-gradient(120deg, #fff0ec, #fff 38%);
3268
}
3269
3270
.behaviourScorecard::after {
3271
  position: absolute;
3272
  top: -70px;
3273
  right: -50px;
3274
  width: 220px;
3275
  height: 220px;
3276
  border: 1px solid var(--accent-line);
3277
  border-radius: 50%;
3278
  content: '';
3279
  pointer-events: none;
3280
}
3281
3282
.scorecardHeader,
3283
.scorecardIdentity,
3284
.scorecardFoot {
3285
  position: relative;
3286
  z-index: 1;
3287
}
3288
3289
.scorecardHeader {
3290
  display: flex;
3291
  align-items: center;
3292
  justify-content: space-between;
3293
  min-height: 58px;
3294
  padding: 0 24px;
3295
  border-bottom: 1px solid var(--border);
3296
}
3297
3298
.scorecardBrand,
3299
.scorecardHeader > span {
3300
  display: flex;
3301
  align-items: center;
3302
  gap: 8px;
3303
  color: var(--text-muted);
3304
  font: 600 9px/1 var(--mono);
3305
  letter-spacing: 0.08em;
3306
  text-transform: uppercase;
3307
}
3308
3309
.scorecardBrand svg,
3310
.scorecardHeader > span svg {
3311
  width: 14px;
3312
  height: 14px;
3313
}
3314
3315
.scorecardHeader > span.scorecardVerified {
3316
  color: var(--live);
3317
}
3318
3319
.scorecardIdentity {
3320
  display: flex;
3321
  align-items: end;
3322
  justify-content: space-between;
3323
  gap: 24px;
3324
  padding: 28px 24px 22px;
3325
}
3326
3327
.scorecardIdentity p {
3328
  margin: 0 0 8px;
3329
  color: var(--accent);
3330
  font: 600 9px/1 var(--mono);
3331
  letter-spacing: 0.16em;
3332
}
3333
3334
.scorecardIdentity h2 {
3335
  margin: 0;
3336
  font-size: clamp(26px, 4vw, 42px);
3337
  letter-spacing: -0.05em;
3338
}
3339
3340
.scorecardContext {
3341
  display: flex;
3342
  justify-content: flex-end;
3343
  flex-wrap: wrap;
3344
  gap: 5px;
3345
}
3346
3347
.scorecardContext span {
3348
  padding: 5px 7px;
3349
  border: 1px solid var(--border);
3350
  color: var(--text-muted);
3351
  background: var(--bg-well);
3352
  font: 500 8px/1 var(--mono);
3353
  text-transform: uppercase;
3354
}
3355
3356
.scorecardMetrics {
3357
  position: relative;
3358
  z-index: 1;
3359
  display: grid;
3360
  grid-template-columns: 1fr 1fr;
3361
  border-top: 1px solid var(--border);
3362
}
3363
3364
.scorecardMetrics > div {
3365
  display: grid;
3366
  grid-template-columns: minmax(150px, 0.9fr) minmax(120px, 1fr) 36px;
3367
  align-items: center;
3368
  gap: 14px;
3369
  min-height: 66px;
3370
  padding: 11px 24px;
3371
  border-bottom: 1px solid var(--border);
3372
}
3373
3374
.scorecardMetrics > div:nth-child(odd) {
3375
  border-right: 1px solid var(--border);
3376
}
3377
3378
.scorecardMetrics > div > span:first-child {
3379
  display: grid;
3380
  gap: 4px;
3381
}
3382
3383
.scorecardMetrics strong {
3384
  font-size: 11px;
3385
}
3386
3387
.scorecardMetrics small {
3388
  color: var(--text-faint);
3389
  font: 500 8px/1 var(--mono);
3390
  text-transform: uppercase;
3391
}
3392
3393
.scorecardMetrics b {
3394
  font: 500 18px/1 var(--mono);
3395
  text-align: right;
3396
}
3397
3398
.scorecardMeter {
3399
  height: 4px;
3400
  overflow: hidden;
3401
  background: var(--border);
3402
}
3403
3404
.scorecardMeter i {
3405
  display: block;
3406
  height: 100%;
3407
  background: var(--accent);
3408
}
3409
3410
.scorecardMetrics .isUnmeasured {
3411
  opacity: 0.55;
3412
}
3413
3414
.scorecardMetrics .isUnmeasured .scorecardMeter i {
3415
  width: 0 !important;
3416
}
3417
3418
.scorecardFoot {
3419
  display: grid;
3420
  grid-template-columns: auto auto 1fr;
3421
  align-items: center;
3422
  gap: 18px;
3423
  min-height: 58px;
3424
  padding: 12px 24px;
3425
  color: var(--text-muted);
3426
  font: 600 8px/1.2 var(--mono);
3427
  text-transform: uppercase;
3428
}
3429
3430
.scorecardFoot small {
3431
  justify-self: end;
3432
  color: var(--text-faint);
3433
  font: inherit;
3434
}
3435
3436
.scorecardActions {
3437
  display: flex;
3438
  justify-content: flex-end;
3439
  gap: 7px;
3440
}
3441
3442
.scorecardActions > span {
3443
  align-self: center;
3444
  margin-right: auto;
3445
  color: var(--live);
3446
  font: 600 9px/1 var(--mono);
3447
  text-transform: uppercase;
3448
}
3449
3450
.scorecardActions button {
3451
  display: inline-flex;
3452
  align-items: center;
3453
  gap: 7px;
3454
  min-height: 38px;
3455
  padding: 0 13px;
3456
  border: 1px solid var(--border-strong);
3457
  color: var(--text);
3458
  background: var(--bg-elevated);
3459
  font: 600 9px/1 var(--mono);
3460
  text-transform: uppercase;
3461
  cursor: pointer;
3462
}
3463
3464
.scorecardActions button.primary {
3465
  border-color: var(--accent);
3466
  color: white;
3467
  background: var(--accent);
3468
}
3469
3470
.scorecardActions svg {
3471
  width: 13px;
3472
}
3473
3474
.agentExpanded {
3475
  display: grid;
3476
  gap: 24px;
3477
  padding: 8px 18px 22px 77px;
3478
  border-top: 1px solid var(--border);
3479
  background: color-mix(in srgb, var(--bg-well) 70%, transparent);
3480
}
3481
3482
.agentRequests {
3483
  margin-top: 16px;
3484
  border: 1px solid var(--accent-line);
3485
}
3486
3487
.agentRequests .sectionLabel {
3488
  padding: 9px 12px;
3489
  border-bottom: 1px solid var(--accent-line);
3490
  background: var(--accent-dim);
3491
}
3492
3493
.requestPulse {
3494
  width: 7px;
3495
  height: 7px;
3496
  border-radius: 999px;
3497
  background: var(--accent);
3498
}
3499
3500
.sectionLabel {
3501
  margin: 0;
3502
  color: var(--text-faint);
3503
  font: 600 9px/1 var(--mono);
3504
  letter-spacing: 0.14em;
3505
  text-transform: uppercase;
3506
}
3507
3508
.agentDetailStrip {
3509
  display: flex;
3510
  align-items: stretch;
3511
  border: 1px solid var(--border);
3512
}
3513
3514
.agentIntelligence {
3515
  display: grid;
3516
  grid-template-columns: minmax(220px, 1.2fr) auto minmax(240px, 1fr);
3517
  align-items: center;
3518
  gap: 22px;
3519
  padding: 18px;
3520
  border: 1px solid var(--accent-line);
3521
  background: linear-gradient(110deg, var(--accent-dim), transparent 62%);
3522
}
3523
3524
.intelligenceLead {
3525
  display: flex;
3526
  align-items: center;
3527
  gap: 14px;
3528
}
3529
3530
.intelligenceScore {
3531
  font: 500 42px/1 var(--mono);
3532
  letter-spacing: -0.08em;
3533
}
3534
3535
.intelligenceLead > div {
3536
  display: grid;
3537
  gap: 3px;
3538
}
3539
3540
.intelligenceLead strong {
3541
  font-size: 13px;
3542
}
3543
3544
.intelligenceLead small {
3545
  color: var(--text-muted);
3546
  font-size: 9px;
3547
  text-transform: uppercase;
3548
}
3549
3550
.intelligenceTrend {
3551
  display: grid;
3552
  gap: 5px;
3553
  text-align: right;
3554
}
3555
3556
.intelligenceTrend span {
3557
  font: 600 10px/1 var(--mono);
3558
  text-transform: uppercase;
3559
}
3560
3561
.intelligenceTrend .improving {
3562
  color: var(--live);
3563
}
3564
3565
.intelligenceTrend .declining {
3566
  color: var(--danger);
3567
}
3568
3569
.intelligenceTrend b {
3570
  color: var(--warn);
3571
  font: 500 8px/1.2 var(--mono);
3572
  text-transform: uppercase;
3573
}
3574
3575
.intelligenceSignals {
3576
  display: flex;
3577
  justify-content: flex-end;
3578
  flex-wrap: wrap;
3579
  gap: 5px;
3580
}
3581
3582
.intelligenceSignals span {
3583
  display: inline-flex;
3584
  align-items: center;
3585
  gap: 4px;
3586
  padding: 5px 7px;
3587
  border: 1px solid var(--border);
3588
  font: 500 8px/1 var(--mono);
3589
  text-transform: uppercase;
3590
}
3591
3592
.intelligenceSignals svg {
3593
  width: 9px;
3594
  height: 9px;
3595
}
3596
3597
.intelligenceSignals .strength {
3598
  color: var(--live);
3599
  border-color: color-mix(in srgb, var(--live) 24%, transparent);
3600
}
3601
3602
.intelligenceSignals .risk {
3603
  color: var(--warn);
3604
  border-color: var(--warn-line);
3605
}
3606
3607
.categoryScores {
3608
  display: flex;
3609
  grid-column: 1 / -1;
3610
  flex-wrap: wrap;
3611
  gap: 6px;
3612
  padding-top: 12px;
3613
  border-top: 1px solid var(--border);
3614
}
3615
3616
.categoryScores span {
3617
  padding: 5px 8px;
3618
  color: var(--text-muted);
3619
  background: var(--bg-well);
3620
  font: 500 9px/1 var(--mono);
3621
}
3622
3623
.categoryScores b {
3624
  color: var(--text);
3625
}
3626
3627
.intelligenceEmpty {
3628
  display: flex;
3629
  align-items: center;
3630
  gap: 14px;
3631
  padding: 17px;
3632
  border: 1px dashed var(--border-strong);
3633
}
3634
3635
.intelligenceEmpty > span {
3636
  font: 500 30px/1 var(--mono);
3637
  color: var(--text-faint);
3638
}
3639
3640
.intelligenceEmpty > div {
3641
  display: grid;
3642
  gap: 3px;
3643
}
3644
3645
.intelligenceEmpty strong {
3646
  font-size: 11px;
3647
}
3648
3649
.intelligenceEmpty small {
3650
  color: var(--text-muted);
3651
  font-size: 9px;
3652
}
3653
3654
.agentDetailStrip > span {
3655
  display: grid;
3656
  min-width: 140px;
3657
  gap: 3px;
3658
  padding: 13px 16px;
3659
  border-right: 1px solid var(--border);
3660
  color: var(--text-muted);
3661
  font-size: 10px;
3662
  text-transform: uppercase;
3663
}
3664
3665
.agentDetailStrip b {
3666
  color: var(--text);
3667
  font-size: 12px;
3668
  text-transform: none;
3669
}
3670
3671
.agentDetailStrip a {
3672
  display: inline-flex;
3673
  align-items: center;
3674
  gap: 6px;
3675
  margin-left: auto;
3676
  padding: 0 16px;
3677
  color: var(--accent);
3678
  font-size: 11px;
3679
  font-weight: 600;
3680
  text-decoration: none;
3681
}
3682
3683
.agentDetailStrip a svg {
3684
  width: 12px;
3685
}
3686
3687
.agentHistory {
3688
  display: grid;
3689
  gap: 10px;
3690
}
3691
3692
.historyHeading {
3693
  display: flex;
3694
  align-items: center;
3695
  justify-content: space-between;
3696
}
3697
3698
.historyHeading small {
3699
  color: var(--text-muted);
3700
  font-size: 10px;
3701
}
3702
3703
.agentHistory ol {
3704
  display: grid;
3705
  margin: 0;
3706
  padding: 0;
3707
  list-style: none;
3708
}
3709
3710
.agentHistory li {
3711
  display: grid;
3712
  grid-template-columns: auto minmax(130px, 0.8fr) minmax(180px, 1.6fr) auto;
3713
  align-items: center;
3714
  gap: 13px;
3715
  min-height: 58px;
3716
  border-top: 1px solid var(--border);
3717
}
3718
3719
.agentHistory li > div {
3720
  display: grid;
3721
  min-width: 0;
3722
  gap: 2px;
3723
}
3724
3725
.agentHistory li strong,
3726
.historyPurpose {
3727
  overflow: hidden;
3728
  font-size: 11px;
3729
  text-overflow: ellipsis;
3730
  white-space: nowrap;
3731
}
3732
3733
.agentHistory li small {
3734
  color: var(--text-muted);
3735
  font-size: 9px;
3736
}
3737
3738
.historyPurpose {
3739
  color: var(--text-muted);
3740
}
3741
3742
.outcomeSymbol {
3743
  display: grid;
3744
  width: 24px;
3745
  height: 24px;
3746
  place-items: center;
3747
  border: 1px solid var(--border);
3748
  font: 600 10px/1 var(--mono);
3749
}
3750
3751
.outcomeSymbol svg {
3752
  width: 11px;
3753
}
3754
3755
.outcomeSymbol.success,
3756
.outcomeText.success {
3757
  color: var(--live);
3758
}
3759
3760
.outcomeSymbol.failure,
3761
.outcomeText.failure,
3762
.outcomeText.cancelled {
3763
  color: var(--danger);
3764
}
3765
3766
.outcomeSymbol.partial,
3767
.outcomeText.partial,
3768
.outcomeText.provisional {
3769
  color: var(--warn);
3770
}
3771
3772
.outcomeSymbol.pending,
3773
.outcomeText.pending,
3774
.outcomeText.active {
3775
  color: var(--text-faint);
3776
}
3777
3778
.outcomeText {
3779
  font: 600 9px/1 var(--mono);
3780
  text-transform: uppercase;
3781
}
3782
3783
.quietEmpty {
3784
  padding: 28px;
3785
  border: 1px dashed var(--border-strong);
3786
  color: var(--text-muted);
3787
  font-size: 12px;
3788
  text-align: center;
3789
}
3790
3791
.emptyAgentState {
3792
  display: grid;
3793
  min-height: 250px;
3794
  place-items: center;
3795
  align-content: center;
3796
  gap: 7px;
3797
  border: 1px dashed var(--border-strong);
3798
  color: var(--text);
3799
  background: transparent;
3800
  cursor: pointer;
3801
}
3802
3803
.emptyAgentState svg {
3804
  width: 22px;
3805
  color: var(--accent);
3806
}
3807
3808
.emptyAgentState span {
3809
  color: var(--text-muted);
3810
  font-size: 11px;
3811
}
3812
3813
.marketplaceHead {
3814
  align-items: center;
3815
}
3816
3817
.marketSearch {
3818
  display: flex;
3819
  align-items: center;
3820
  gap: 9px;
3821
  width: min(360px, 100%);
3822
  min-height: 42px;
3823
  padding: 0 13px;
3824
  border: 1px solid var(--border-strong);
3825
  background: var(--bg-input);
3826
}
3827
3828
.marketFilters {
3829
  display: flex;
3830
  align-items: end;
3831
  gap: 7px;
3832
}
3833
3834
.marketFilters > label:not(.marketSearch) {
3835
  display: grid;
3836
  gap: 5px;
3837
}
3838
3839
.marketFilters > label > span {
3840
  color: var(--text-faint);
3841
  font: 600 8px/1 var(--mono);
3842
  letter-spacing: 0.1em;
3843
  text-transform: uppercase;
3844
}
3845
3846
.marketFilters select,
3847
.marketFilters > label:not(.marketSearch) input {
3848
  min-width: 130px;
3849
  height: 42px;
3850
  padding: 0 10px;
3851
  border: 1px solid var(--border-strong);
3852
  color: var(--text);
3853
  background: var(--bg-input);
3854
  font-size: 11px;
3855
}
3856
3857
.marketContext {
3858
  margin-top: -13px;
3859
  padding: 10px 12px;
3860
  border-left: 2px solid var(--accent);
3861
  color: var(--text-muted);
3862
  background: var(--accent-dim);
3863
  font-size: 10px;
3864
}
3865
3866
.marketSearch svg {
3867
  width: 16px;
3868
  color: var(--text-faint);
3869
}
3870
3871
.marketSearch input {
3872
  width: 100%;
3873
  border: 0;
3874
  color: var(--text);
3875
  background: transparent;
3876
  font-size: 12px;
3877
}
3878
3879
.marketGrid {
3880
  display: grid;
3881
  grid-template-columns: repeat(3, minmax(0, 1fr));
3882
  gap: 10px;
3883
}
3884
3885
.marketCard {
3886
  display: grid;
3887
  min-height: 285px;
3888
  padding: 18px;
3889
  border: 1px solid var(--border);
3890
  background: var(--bg-elevated);
3891
}
3892
3893
.marketCard:hover {
3894
  border-color: var(--accent-line);
3895
}
3896
3897
.marketCardTop {
3898
  display: flex;
3899
  align-items: start;
3900
  justify-content: space-between;
3901
}
3902
3903
.marketPresence {
3904
  padding: 5px 7px;
3905
  color: var(--text-faint);
3906
  background: var(--bg-well);
3907
  font: 600 9px/1 var(--mono);
3908
  text-transform: uppercase;
3909
}
3910
3911
.marketPresence.online {
3912
  color: var(--live);
3913
  background: var(--live-dim);
3914
}
3915
3916
.marketCard h2 {
3917
  margin: 17px 0 5px;
3918
  font-size: 17px;
3919
  font-weight: 600;
3920
  letter-spacing: -0.03em;
3921
}
3922
3923
.matchBadge {
3924
  display: flex;
3925
  align-items: baseline;
3926
  gap: 7px;
3927
  margin-top: 14px;
3928
  color: var(--text-muted);
3929
}
3930
3931
.matchBadge strong {
3932
  color: var(--text);
3933
  font: 500 18px/1 var(--mono);
3934
}
3935
3936
.matchBadge span {
3937
  font: 500 8px/1 var(--mono);
3938
  text-transform: uppercase;
3939
}
3940
3941
.matchBadge.strong strong,
3942
.matchBadge.strong span {
3943
  color: var(--live);
3944
}
3945
3946
.matchBadge.unproven strong {
3947
  color: var(--text-faint);
3948
}
3949
3950
.marketCard > p {
3951
  display: -webkit-box;
3952
  overflow: hidden;
3953
  min-height: 36px;
3954
  margin: 0 0 14px;
3955
  color: var(--text-muted);
3956
  font-size: 11px;
3957
  -webkit-box-orient: vertical;
3958
  -webkit-line-clamp: 2;
3959
}
3960
3961
.marketTags {
3962
  display: flex;
3963
  align-content: start;
3964
  flex-wrap: wrap;
3965
  gap: 5px;
3966
}
3967
3968
.marketTags span {
3969
  padding: 5px 7px;
3970
  border: 1px solid var(--border);
3971
  color: var(--text-muted);
3972
  font: 500 9px/1 var(--mono);
3973
}
3974
3975
.marketMeta {
3976
  display: flex;
3977
  align-items: center;
3978
  gap: 12px;
3979
  margin-top: auto;
3980
  padding-top: 14px;
3981
  border-top: 1px solid var(--border);
3982
}
3983
3984
.marketIntelligence {
3985
  display: flex;
3986
  align-items: center;
3987
  gap: 8px;
3988
  min-height: 34px;
3989
  margin-top: 10px;
3990
  padding: 8px;
3991
  color: var(--text-muted);
3992
  background: var(--bg-well);
3993
}
3994
3995
.marketIntelligence strong {
3996
  color: var(--accent);
3997
  font: 600 15px/1 var(--mono);
3998
}
3999
4000
.marketIntelligence span {
4001
  font: 500 8px/1.3 var(--mono);
4002
  text-transform: uppercase;
4003
}
4004
4005
.marketMeta span {
4006
  display: inline-flex;
4007
  align-items: center;
4008
  gap: 5px;
4009
  color: var(--text-muted);
4010
  font-size: 9px;
4011
  text-transform: uppercase;
4012
}
4013
4014
.marketMeta svg {
4015
  width: 11px;
4016
}
4017
4018
.marketProfileLink {
4019
  display: flex;
4020
  align-items: center;
4021
  justify-content: space-between;
4022
  margin-top: 14px;
4023
  color: var(--accent);
4024
  font-size: 11px;
4025
  font-weight: 600;
4026
  text-decoration: none;
4027
}
4028
4029
.marketProfileLink svg {
4030
  width: 14px;
4031
}
4032
4033
.marketSkeleton {
4034
  min-height: 285px;
4035
  border: 1px solid var(--border);
4036
  background: linear-gradient(90deg, var(--bg-well), var(--bg-hover), var(--bg-well));
4037
  background-size: 200% 100%;
4038
  animation: marketLoading 1.4s ease infinite;
4039
}
4040
4041
.marketEmpty {
4042
  grid-column: 1 / -1;
4043
}
4044
4045
@keyframes marketLoading {
4046
  to {
4047
    background-position: -200% 0;
4048
  }
4049
}
4050
4051
@media (max-width: 880px) {
4052
  .simpleHeader {
4053
    grid-template-columns: auto 1fr auto;
4054
    padding: 0 16px;
4055
  }
4056
4057
  .simpleBrand strong {
4058
    display: none;
4059
  }
4060
4061
  .viewSwitch {
4062
    justify-self: center;
4063
  }
4064
4065
  .agentRowSummary {
4066
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px) auto auto;
4067
  }
4068
4069
  .agentRowCore {
4070
    grid-template-columns: auto minmax(120px, 1fr);
4071
  }
4072
4073
  .agentSignals {
4074
    display: none;
4075
  }
4076
4077
  .marketGrid {
4078
    grid-template-columns: repeat(2, minmax(0, 1fr));
4079
  }
4080
4081
  .marketFilters {
4082
    flex-wrap: wrap;
4083
    justify-content: flex-end;
4084
  }
4085
4086
  .agentIntelligence {
4087
    grid-template-columns: 1fr auto;
4088
  }
4089
4090
  .intelligenceSignals {
4091
    grid-column: 1 / -1;
4092
    justify-content: flex-start;
4093
  }
4094
}
4095
4096
@media (max-width: 620px) {
4097
  .simpleHeader {
4098
    min-height: 60px;
4099
  }
4100
4101
  .viewSwitch button {
4102
    padding: 0 10px;
4103
  }
4104
4105
  .viewSwitch button span {
4106
    display: none;
4107
  }
4108
4109
  .simpleMain {
4110
    width: min(100% - 24px, 1120px);
4111
    padding: 34px 0 70px;
4112
  }
4113
4114
  .workspaceHead,
4115
  .marketplaceHead {
4116
    display: grid;
4117
    align-items: stretch;
4118
  }
4119
4120
  .connectAgentButton,
4121
  .marketSearch {
4122
    width: 100%;
4123
    justify-content: center;
4124
  }
4125
4126
  .marketFilters {
4127
    display: grid;
4128
    grid-template-columns: 1fr 1fr;
4129
    width: 100%;
4130
  }
4131
4132
  .marketFilters .marketSearch {
4133
    grid-column: 1 / -1;
4134
  }
4135
4136
  .marketFilters select,
4137
  .marketFilters > label:not(.marketSearch) input {
4138
    width: 100%;
4139
    min-width: 0;
4140
  }
4141
4142
  .agentIntelligence {
4143
    grid-template-columns: 1fr;
4144
  }
4145
4146
  .intelligenceTrend {
4147
    text-align: left;
4148
  }
4149
4150
  .intelligenceSignals {
4151
    grid-column: auto;
4152
  }
4153
4154
  .agentRowSummary {
4155
    grid-template-columns: minmax(0, 1fr) auto auto;
4156
    gap: 11px;
4157
    min-height: 74px;
4158
    padding: 12px;
4159
  }
4160
4161
  .agentRowCore {
4162
    grid-template-columns: auto minmax(0, 1fr);
4163
    gap: 11px;
4164
  }
4165
4166
  .scorecardTeaser {
4167
    grid-template-columns: 32px;
4168
    gap: 0;
4169
    width: 48px;
4170
    padding: 7px;
4171
  }
4172
4173
  .scorecardTeaser > span:last-child {
4174
    display: none;
4175
  }
4176
4177
  .scorecardIdentity {
4178
    display: grid;
4179
    align-items: start;
4180
  }
4181
4182
  .scorecardContext {
4183
    justify-content: flex-start;
4184
  }
4185
4186
  .scorecardMetrics {
4187
    grid-template-columns: 1fr;
4188
  }
4189
4190
  .scorecardMetrics > div:nth-child(odd) {
4191
    border-right: 0;
4192
  }
4193
4194
  .scorecardMetrics > div {
4195
    grid-template-columns: minmax(120px, 1fr) minmax(70px, 0.8fr) 30px;
4196
    padding: 10px 14px;
4197
  }
4198
4199
  .scorecardFoot {
4200
    grid-template-columns: 1fr 1fr;
4201
  }
4202
4203
  .scorecardFoot small {
4204
    display: none;
4205
  }
4206
4207
  .scorecardActions {
4208
    display: grid;
4209
    grid-template-columns: repeat(3, 1fr);
4210
  }
4211
4212
  .scorecardActions > span {
4213
    grid-column: 1 / -1;
4214
  }
4215
4216
  .scorecardActions button {
4217
    justify-content: center;
4218
    padding: 0 8px;
4219
    font-size: 8px;
4220
  }
4221
4222
  .agentExpanded {
4223
    padding: 8px 12px 18px;
4224
  }
4225
4226
  .agentDetailStrip {
4227
    display: grid;
4228
    grid-template-columns: repeat(3, 1fr);
4229
  }
4230
4231
  .agentDetailStrip > span {
4232
    min-width: 0;
4233
    padding: 10px;
4234
  }
4235
4236
  .agentDetailStrip a {
4237
    grid-column: 1 / -1;
4238
    min-height: 38px;
4239
    margin-left: 0;
4240
    border-top: 1px solid var(--border);
4241
  }
4242
4243
  .agentHistory li {
4244
    grid-template-columns: auto minmax(0, 1fr) auto;
4245
  }
4246
4247
  .historyPurpose {
4248
    display: none;
4249
  }
4250
4251
  .marketGrid {
4252
    grid-template-columns: 1fr;
4253
  }
4254
}
4255
4256
/* Authenticated product — same protocol chrome as the landing */
4257
html:has(.appInset) {
4258
  scrollbar-gutter: stable;
4259
  scrollbar-width: thin;
4260
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
4261
    color-mix(in srgb, var(--bg) 92%, var(--border));
4262
}
4263
4264
html:has(.appInset)::-webkit-scrollbar,
4265
html:has(.appInset) body::-webkit-scrollbar {
4266
  width: 10px;
4267
}
4268
4269
html:has(.appInset)::-webkit-scrollbar-track,
4270
html:has(.appInset) body::-webkit-scrollbar-track {
4271
  background: var(--bg);
4272
  box-shadow: inset 1px 0 0 var(--border);
4273
}
4274
4275
html:has(.appInset)::-webkit-scrollbar-thumb,
4276
html:has(.appInset) body::-webkit-scrollbar-thumb {
4277
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
4278
  border: 3px solid var(--bg);
4279
  background-clip: padding-box;
4280
}
4281
4282
[data-slot='sidebar-wrapper'] {
4283
  background: var(--bg);
4284
}
4285
4286
[data-slot='sidebar'] {
4287
  border-right: 1px solid var(--border);
4288
  background: var(--bg) !important;
4289
}
4290
4291
[data-slot='sidebar-inner'] {
4292
  border: 0 !important;
4293
  border-radius: 0 !important;
4294
  background: var(--bg) !important;
4295
  box-shadow: none !important;
4296
}
4297
4298
[data-slot='sidebar-header'] {
4299
  padding: 16px 12px 14px;
4300
  border-bottom: 1px solid var(--border);
4301
}
4302
4303
[data-slot='sidebar-content'] {
4304
  padding: 10px 8px;
4305
}
4306
4307
[data-slot='sidebar-footer'] {
4308
  padding: 8px;
4309
  border-top: 1px solid var(--border);
4310
}
4311
4312
.sidebarBrandMark {
4313
  display: block;
4314
  width: 18px;
4315
  height: 18px;
4316
  flex: none;
4317
  color: var(--accent);
4318
}
4319
4320
.sidebarBrandText {
4321
  min-width: 0;
4322
  font-family: var(--mono);
4323
  font-size: 13px;
4324
  font-weight: 500;
4325
  letter-spacing: 0.04em;
4326
  text-transform: lowercase;
4327
}
4328
4329
.sidebarBrandText strong {
4330
  font-weight: 500;
4331
}
4332
4333
[data-sidebar='menu-button'] {
4334
  min-height: 34px;
4335
  border: 0 !important;
4336
  border-radius: 0 !important;
4337
  color: var(--text-muted);
4338
  font-family: var(--mono);
4339
  font-size: 12px;
4340
  letter-spacing: 0.04em;
4341
  text-transform: lowercase;
4342
  background: transparent !important;
4343
  box-shadow: none !important;
4344
}
4345
4346
[data-sidebar='menu-button']:hover {
4347
  color: var(--text);
4348
  background: transparent !important;
4349
}
4350
4351
[data-sidebar='menu-button'][data-active='true'] {
4352
  color: var(--text) !important;
4353
  background: transparent !important;
4354
  box-shadow: inset 2px 0 0 var(--accent);
4355
}
4356
4357
[data-sidebar='menu-button'][data-active='true'] svg {
4358
  color: var(--accent);
4359
}
4360
4361
[data-sidebar='menu-badge'] {
4362
  min-width: 16px;
4363
  height: 16px;
4364
  border: 0;
4365
  border-radius: 0;
4366
  color: var(--accent) !important;
4367
  background: transparent !important;
4368
  font: 500 10px/1 var(--mono);
4369
}
4370
4371
.appInset {
4372
  min-width: 0;
4373
  background: var(--bg) !important;
4374
}
4375
4376
.appTopbar {
4377
  position: sticky;
4378
  top: 0;
4379
  z-index: 8;
4380
  min-height: 52px;
4381
  padding: 0 28px;
4382
  border-bottom: 1px solid var(--border);
4383
  background: color-mix(in srgb, var(--bg) 88%, transparent);
4384
  backdrop-filter: blur(12px);
4385
  -webkit-backdrop-filter: blur(12px);
4386
}
4387
4388
.appTopbar [data-sidebar='trigger'] {
4389
  border: 1px solid var(--border);
4390
  border-radius: 0;
4391
  background: transparent;
4392
}
4393
4394
.commandTrigger {
4395
  height: 34px !important;
4396
  border-color: var(--border) !important;
4397
  border-radius: 0 !important;
4398
  background: transparent !important;
4399
  box-shadow: none !important;
4400
}
4401
4402
.appMain {
4403
  width: min(100%, 1120px);
4404
  max-width: none;
4405
  margin: 0 auto;
4406
  padding: 32px 32px 80px;
4407
}
4408
4409
.previewBanner {
4410
  width: fit-content;
4411
  margin-bottom: 18px;
4412
  padding: 0;
4413
  border: 0;
4414
  border-radius: 0;
4415
  color: var(--text-faint);
4416
  background: transparent;
4417
  font: 400 11px/1.4 var(--mono);
4418
  letter-spacing: 0.06em;
4419
  text-transform: lowercase;
4420
}
4421
4422
.previewBanner::before {
4423
  content: none;
4424
}
4425
4426
.pageKicker {
4427
  display: flex;
4428
  align-items: center;
4429
  gap: 10px;
4430
  margin: 0 0 10px;
4431
  color: var(--text-faint);
4432
  font-family: var(--mono);
4433
  font-size: 11px;
4434
  letter-spacing: 0.08em;
4435
  text-transform: lowercase;
4436
}
4437
4438
.pageKicker > span {
4439
  color: var(--accent);
4440
}
4441
4442
.pageHead {
4443
  min-height: 0;
4444
  padding: 0 0 24px;
4445
  border-bottom: 1px solid var(--border);
4446
}
4447
4448
.pageHead h1 {
4449
  font-size: clamp(28px, 3.4vw, 36px);
4450
  font-weight: 500;
4451
  letter-spacing: -0.04em;
4452
}
4453
4454
.pageHead p.lede {
4455
  margin-top: 8px;
4456
  font-size: 14px;
4457
}
4458
4459
.primary,
4460
.secondary,
4461
.dangerButton {
4462
  min-height: 34px;
4463
  border-radius: 0;
4464
  font-weight: 500;
4465
  letter-spacing: 0.04em;
4466
  text-transform: lowercase;
4467
  box-shadow: none;
4468
}
4469
4470
.primary {
4471
  box-shadow: none;
4472
}
4473
4474
.primary:hover {
4475
  transform: none;
4476
  box-shadow: none;
4477
}
4478
4479
.primary:active,
4480
.secondary:active,
4481
.dangerButton:active {
4482
  transform: translateY(1px);
4483
}
4484
4485
.secondary {
4486
  background: transparent;
4487
}
4488
4489
.attentionBanner,
4490
.readiness {
4491
  min-height: 0;
4492
  margin-top: 16px;
4493
  padding: 14px 0;
4494
  border: 0;
4495
  border-bottom: 1px solid var(--border);
4496
  border-radius: 0;
4497
  background: transparent;
4498
  box-shadow: none;
4499
}
4500
4501
.attentionBanner {
4502
  border-color: transparent;
4503
  border-bottom-color: var(--accent-line);
4504
  background: transparent;
4505
}
4506
4507
.attentionBanner:hover {
4508
  border-color: transparent;
4509
  border-bottom-color: var(--accent);
4510
  transform: none;
4511
}
4512
4513
.statusIndex {
4514
  min-width: 1.6em;
4515
}
4516
4517
.metrics {
4518
  gap: 24px;
4519
  margin: 22px 0 8px;
4520
}
4521
4522
.metric {
4523
  min-height: 0;
4524
  padding: 4px 0;
4525
  border: 0;
4526
  border-radius: 0;
4527
  background: transparent;
4528
  box-shadow: none;
4529
}
4530
4531
.metric:hover {
4532
  border-color: transparent;
4533
  transform: none;
4534
}
4535
4536
.metric::before {
4537
  position: static;
4538
  width: 16px;
4539
  height: 1px;
4540
  margin: 0 0 10px;
4541
  border-radius: 0;
4542
  box-shadow: none;
4543
  background: var(--accent);
4544
}
4545
4546
.metric.warn::before {
4547
  background: var(--warn);
4548
  box-shadow: none;
4549
}
4550
4551
.metric > strong {
4552
  margin: 0 0 6px;
4553
  font-size: 28px;
4554
}
4555
4556
.panel,
4557
.setupRequests,
4558
.agentCard,
4559
.settingsCard,
4560
.insightPrinciple,
4561
.journeyDetail {
4562
  border: 0;
4563
  border-radius: 0;
4564
  background: transparent;
4565
  box-shadow: none;
4566
}
4567
4568
.panel {
4569
  padding: 8px 0 0;
4570
}
4571
4572
.panelHead {
4573
  padding-bottom: 12px;
4574
}
4575
4576
.panelHead h2,
4577
.panelKicker {
4578
  display: flex;
4579
  align-items: center;
4580
  gap: 8px;
4581
  margin: 0;
4582
  color: var(--text);
4583
  font: 500 12px/1.4 var(--mono);
4584
  letter-spacing: 0.06em;
4585
  text-transform: lowercase;
4586
}
4587
4588
.panelKicker > span,
4589
.panelHead h2 > span {
4590
  color: var(--accent);
4591
}
4592
4593
.panelHead p {
4594
  margin: 6px 0 0;
4595
}
4596
4597
.setupRequests > div:first-child h2 {
4598
  margin: 8px 0 4px;
4599
  font-size: 22px;
4600
  font-weight: 500;
4601
  letter-spacing: -0.03em;
4602
}
4603
4604
.setupRequests {
4605
  margin: 18px 0;
4606
  padding: 8px 0;
4607
}
4608
4609
.setupRequest {
4610
  padding: 14px 0;
4611
  border-bottom: 1px solid var(--border);
4612
}
4613
4614
.historyRow {
4615
  margin: 0;
4616
  padding: 12px 0;
4617
  border-radius: 0;
4618
}
4619
4620
.historyRow:hover {
4621
  background: transparent;
4622
  transform: none;
4623
}
4624
4625
.agentGrid,
4626
.insightGrid {
4627
  gap: 16px;
4628
}
4629
4630
.agentCard {
4631
  min-height: 0;
4632
  padding: 18px 0;
4633
  border-top: 1px solid var(--border);
4634
}
4635
4636
.agentCard:hover {
4637
  border-color: var(--border);
4638
  box-shadow: none;
4639
  transform: none;
4640
}
4641
4642
.runtimeBox,
4643
.accessTokenBox,
4644
.notice,
4645
.successBanner,
4646
.conversationInsights,
4647
.outcomeCard,
4648
.insightStats span {
4649
  border-radius: 0;
4650
}
4651
4652
.runtimeBox input,
4653
.automationForm input,
4654
.automationForm select,
4655
.setting input,
4656
.setting select,
4657
.searchField,
4658
.providerForm input,
4659
.providerForm select,
4660
.providerForm textarea,
4661
.replyBox textarea {
4662
  border-radius: 0;
4663
}
4664
4665
.settingsCard {
4666
  padding: 0;
4667
}
4668
4669
.connectionTypePicker button {
4670
  border-radius: 0;
4671
  background: transparent;
4672
}
4673
4674
.threadList,
4675
.conversationDetail,
4676
.journeyDetail {
4677
  padding: 0;
4678
  border: 0;
4679
  border-radius: 0;
4680
  background: transparent;
4681
  box-shadow: none;
4682
}
4683
4684
.threadList > button,
4685
.journeyList > button {
4686
  border-radius: 0;
4687
}
4688
4689
[data-slot='dialog-content'],
4690
[data-slot='dropdown-menu-content'],
4691
[data-slot='command-dialog-content'] {
4692
  border-color: var(--border-strong) !important;
4693
  border-radius: 0 !important;
4694
  background: var(--popover) !important;
4695
  box-shadow: none !important;
4696
}
4697
4698
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
4699
  text-transform: lowercase;
4700
}
4701
4702
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
4703
  font-family: var(--mono);
4704
  font-size: 11px;
4705
  letter-spacing: 0.03em;
4706
}
4707
4708
.appInset [data-slot='tabs-list'],
4709
.appInset [data-slot='tabs-trigger'] {
4710
  border-radius: 0 !important;
4711
}
4712
4713
.appInset [data-slot='tabs-trigger'] {
4714
  font-family: var(--mono);
4715
  font-size: 11px;
4716
  letter-spacing: 0.06em;
4717
  text-transform: lowercase;
4718
  background: transparent !important;
4719
  box-shadow: none !important;
4720
}
4721
4722
.appInset
4723
  [data-slot='tabs-list'][data-variant='line']
4724
  [data-slot='tabs-trigger'][data-state='active']::after {
4725
  height: 1px;
4726
  background: var(--accent);
4727
}
4728
4729
.textButton {
4730
  font-weight: 500;
4731
  letter-spacing: 0.04em;
4732
  text-transform: lowercase;
4733
}
4734
4735
.insightPrinciple .pageKicker {
4736
  margin-bottom: 8px;
4737
}
4738
4739
.setupRequests > div:first-child .pageKicker {
4740
  margin-bottom: 8px;
4741
}
4742
4743
.connectionTypePicker button {
4744
  font-weight: 500;
4745
  letter-spacing: 0.02em;
4746
}
4747
4748
@media (max-width: 840px) {
4749
  .appTopbar {
4750
    min-height: 48px;
4751
    padding: 0 16px;
4752
  }
4753
4754
  .appMain {
4755
    padding: 20px 16px 64px;
4756
  }
4757
4758
  .pageHead {
4759
    min-height: 0;
4760
  }
4761
}
4762
4763
@media (max-width: 980px) {
4764
  .contentGrid,
4765
  .connectLayout,
4766
  .conversationLayout,
4767
  .journeyLayout,
4768
  .insightPrinciple {
4769
    grid-template-columns: 1fr;
4770
  }
4771
4772
  .journeyList {
4773
    grid-template-columns: repeat(2, minmax(0, 1fr));
4774
  }
4775
4776
  .loginPage {
4777
    grid-template-columns: 1fr;
4778
  }
4779
4780
  .loginPitch {
4781
    display: none;
4782
  }
4783
4784
  .loginCard {
4785
    min-height: 100vh;
4786
    border: 0;
4787
  }
4788
4789
  .metrics {
4790
    grid-template-columns: 1fr 1fr;
4791
  }
4792
4793
  .agentGrid {
4794
    grid-template-columns: 1fr;
4795
  }
4796
4797
  .insightGrid {
4798
    grid-template-columns: 1fr;
4799
  }
4800
}
4801
4802
@media (max-width: 840px) {
4803
  .appTopbar {
4804
    min-height: 48px;
4805
    padding: 0 16px;
4806
  }
4807
4808
  .appMain {
4809
    padding: 16px 16px 64px;
4810
  }
4811
4812
  .pageHead {
4813
    align-items: flex-start;
4814
    flex-direction: column;
4815
  }
4816
4817
  .setting {
4818
    grid-template-columns: 1fr;
4819
    gap: 12px;
4820
  }
4821
4822
  .connectionTypePicker,
4823
  .providerForm,
4824
  .firstRunForm,
4825
  .firstRunSteps {
4826
    grid-template-columns: 1fr;
4827
  }
4828
4829
  .firstRunSteps.twoSteps,
4830
  .agentCardPreview dl,
4831
  .firstRunComplete {
4832
    grid-template-columns: 1fr;
4833
  }
4834
4835
  .firstRunGuide {
4836
    padding: 18px;
4837
  }
4838
4839
  .firstRunHeader,
4840
  .firstRunStage,
4841
  .firstRunWaiting,
4842
  .firstRunComplete,
4843
  .firstRunBlocked {
4844
    align-items: flex-start;
4845
    flex-direction: column;
4846
  }
4847
4848
  .firstRunActions {
4849
    flex-wrap: wrap;
4850
  }
4851
4852
  .providerSubmit {
4853
    align-items: flex-start;
4854
    flex-direction: column;
4855
  }
4856
4857
  .tokenList > div {
4858
    align-items: flex-start;
4859
    flex-direction: column;
4860
  }
4861
4862
  .toggle {
4863
    margin-left: 0;
4864
  }
4865
4866
  .endpoint {
4867
    flex-direction: column;
4868
  }
4869
4870
  .readiness,
4871
  .attentionBanner,
4872
  .setupRequest {
4873
    align-items: flex-start;
4874
    flex-direction: column;
4875
  }
4876
4877
  .readiness > button,
4878
  .attentionBanner,
4879
  .decisionButtons {
4880
    width: 100%;
4881
  }
4882
4883
  .decisionButtons button {
4884
    flex: 1;
4885
  }
4886
4887
  .loginCard {
4888
    padding: 28px 20px;
4889
  }
4890
4891
  .historyRow > b {
4892
    display: none;
4893
  }
4894
4895
  .journeyList {
4896
    grid-template-columns: 1fr;
4897
  }
4898
4899
  .journeySummaryGrid,
4900
  .ratingGrid,
4901
  .insightStats {
4902
    grid-template-columns: 1fr;
4903
  }
4904
4905
  .journeySummaryGrid section {
4906
    border-right: 0;
4907
    border-bottom: 1px solid var(--border);
4908
  }
4909
4910
  .journeySummaryGrid section:last-child {
4911
    border-bottom: 0;
4912
  }
4913
4914
  .journeyTimeline li {
4915
    grid-template-columns: 8px minmax(0, 1fr);
4916
  }
4917
4918
  .journeyTimeline li > .statusPill {
4919
    grid-column: 2;
4920
    margin-top: -12px;
4921
    margin-bottom: 16px;
4922
  }
4923
}