DocsLog in

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

Viewing files at commit 28cda791c50eCommit detailsView latest

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