DocsLog in

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

Viewing files at commit 6df07fcdd05cCommit detailsView latest

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