DocsLog in

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

Viewing files at commit b95ad82c1c50Commit detailsView latest

apps/dashboard/src/styles.css 3130 lines · 51.9 KB · css
1
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter+Tight:wght@400;500;600;700&display=swap');
2
@import 'tailwindcss';
3
@import 'tw-animate-css';
4
@import './landing.css';
5
6
@custom-variant dark (&:is(.dark *));
7
8
@theme inline {
9
  --font-sans: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
10
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
11
  --color-background: var(--background);
12
  --color-foreground: var(--foreground);
13
  --color-card: var(--card);
14
  --color-card-foreground: var(--card-foreground);
15
  --color-popover: var(--popover);
16
  --color-popover-foreground: var(--popover-foreground);
17
  --color-primary: var(--primary);
18
  --color-primary-foreground: var(--primary-foreground);
19
  --color-secondary: var(--secondary);
20
  --color-secondary-foreground: var(--secondary-foreground);
21
  --color-muted: var(--muted);
22
  --color-muted-foreground: var(--muted-foreground);
23
  --color-accent: var(--ui-hover);
24
  --color-accent-foreground: var(--ui-hover-foreground);
25
  --color-destructive: var(--destructive);
26
  --color-border: var(--border);
27
  --color-input: var(--input);
28
  --color-ring: var(--ring);
29
  --color-sidebar: var(--sidebar);
30
  --color-sidebar-foreground: var(--sidebar-foreground);
31
  --color-sidebar-primary: var(--sidebar-primary);
32
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
33
  --color-sidebar-accent: var(--sidebar-accent);
34
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
35
  --color-sidebar-border: var(--sidebar-border);
36
  --color-sidebar-ring: var(--sidebar-ring);
37
  --radius-sm: calc(var(--radius) * 0.75);
38
  --radius-md: calc(var(--radius) * 0.875);
39
  --radius-lg: var(--radius);
40
  --radius-xl: calc(var(--radius) * 1.5);
41
}
42
43
:root {
44
  color-scheme: dark;
45
  --font: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
46
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
47
  --bg: #0c0a0a;
48
  --bg-sidebar: transparent;
49
  --bg-elevated: rgb(18 12 11 / 58%);
50
  --bg-card: transparent;
51
  --bg-hover: rgb(240 75 45 / 10%);
52
  --bg-input: rgb(12 10 10 / 78%);
53
  --bg-well: rgb(255 255 255 / 3.5%);
54
  --border: rgb(255 255 255 / 8%);
55
  --border-strong: rgb(255 255 255 / 14%);
56
  --text: #f6f1ee;
57
  --text-muted: #a39a94;
58
  --text-faint: #7a726c;
59
  --accent: #f04b2d;
60
  --accent-hover: #ff5d3d;
61
  --accent-ink: #ffffff;
62
  --accent-dim: rgb(240 75 45 / 16%);
63
  --accent-line: rgb(240 75 45 / 36%);
64
  --live: #2fbf71;
65
  --live-dim: rgb(47 191 113 / 14%);
66
  --warn: #e59a1a;
67
  --warn-dim: rgb(229 154 26 / 12%);
68
  --warn-line: rgb(229 154 26 / 32%);
69
  --danger: #c41f28;
70
  --danger-dim: rgb(196 31 40 / 12%);
71
  --danger-line: rgb(196 31 40 / 32%);
72
  --info: #e07a62;
73
  --shadow: none;
74
  --radius: 0px;
75
  --radius-sm: 0px;
76
  --glow-a: rgb(240 75 45 / 18%);
77
  --glow-b: rgb(240 75 45 / 8%);
78
  --dot: rgb(240 75 45 / 4%);
79
  --background: transparent;
80
  --foreground: var(--text);
81
  --card: transparent;
82
  --card-foreground: var(--text);
83
  --popover: #161211;
84
  --popover-foreground: var(--text);
85
  --primary: var(--accent);
86
  --primary-foreground: var(--accent-ink);
87
  --secondary: var(--bg-well);
88
  --secondary-foreground: var(--text);
89
  --muted: var(--bg-well);
90
  --muted-foreground: var(--text-muted);
91
  --ui-hover: var(--bg-hover);
92
  --ui-hover-foreground: var(--text);
93
  --destructive: var(--danger);
94
  --input: var(--border-strong);
95
  --ring: var(--accent);
96
  --sidebar: transparent;
97
  --sidebar-foreground: var(--text);
98
  --sidebar-primary: var(--accent);
99
  --sidebar-primary-foreground: var(--accent-ink);
100
  --sidebar-accent: var(--bg-hover);
101
  --sidebar-accent-foreground: var(--text);
102
  --sidebar-border: var(--border);
103
  --sidebar-ring: var(--accent);
104
  font-family: var(--font);
105
  color: var(--text);
106
  background: var(--bg);
107
  font-synthesis: none;
108
  line-height: 1.45;
109
}
110
111
:root[data-theme='light'] {
112
  color-scheme: light;
113
  --bg: #f7f4f2;
114
  --bg-sidebar: transparent;
115
  --bg-elevated: rgb(255 255 255 / 78%);
116
  --bg-card: transparent;
117
  --bg-hover: rgb(240 75 45 / 8%);
118
  --bg-input: #ffffff;
119
  --bg-well: rgb(22 14 12 / 3%);
120
  --border: rgb(22 14 12 / 8%);
121
  --border-strong: rgb(22 14 12 / 14%);
122
  --text: #16110f;
123
  --text-muted: #6b625d;
124
  --text-faint: #8a807a;
125
  --accent-dim: rgb(240 75 45 / 10%);
126
  --accent-line: rgb(240 75 45 / 28%);
127
  --live: #168a4d;
128
  --live-dim: rgb(22 138 77 / 10%);
129
  --warn-dim: rgb(229 154 26 / 12%);
130
  --warn-line: rgb(229 154 26 / 26%);
131
  --danger-dim: rgb(196 31 40 / 10%);
132
  --danger-line: rgb(196 31 40 / 22%);
133
  --glow-a: rgb(240 75 45 / 14%);
134
  --glow-b: rgb(240 75 45 / 6%);
135
  --dot: rgb(240 75 45 / 5%);
136
  --shadow: none;
137
  --popover: #ffffff;
138
}
139
140
* {
141
  box-sizing: border-box;
142
}
143
144
html,
145
body {
146
  min-height: 100%;
147
}
148
149
body {
150
  margin: 0;
151
  min-width: 320px;
152
  background: var(--bg);
153
}
154
155
::selection {
156
  color: var(--accent-ink);
157
  background: var(--accent);
158
}
159
160
button,
161
input,
162
select,
163
textarea {
164
  font: inherit;
165
}
166
167
button,
168
a,
169
input,
170
select,
171
textarea {
172
  outline: none;
173
}
174
175
:focus-visible {
176
  outline: 2px solid var(--accent);
177
  outline-offset: 2px;
178
}
179
180
[data-slot]:focus-visible {
181
  outline: none;
182
}
183
184
.skipLink {
185
  position: absolute;
186
  top: 8px;
187
  left: 8px;
188
  z-index: 20;
189
  padding: 8px 12px;
190
  border-radius: var(--radius-sm);
191
  color: var(--accent-ink);
192
  background: var(--accent);
193
  font-size: 13px;
194
  font-weight: 600;
195
  text-decoration: none;
196
  transform: translateY(-140%);
197
}
198
199
.skipLink:focus {
200
  transform: none;
201
}
202
203
.eyebrow {
204
  margin: 0;
205
  color: var(--text-faint);
206
  font: 500 11px/1.2 var(--mono);
207
  letter-spacing: 0.14em;
208
  text-transform: uppercase;
209
}
210
211
.eyebrow::before {
212
  color: var(--accent);
213
  content: '// ';
214
}
215
216
.mark {
217
  display: grid;
218
  width: 30px;
219
  height: 30px;
220
  place-items: center;
221
  border-radius: 8px;
222
  color: #fff;
223
  background: var(--accent);
224
  font: 600 10px/1 var(--mono);
225
}
226
227
.appInset {
228
  background: transparent;
229
}
230
231
.appTopbar {
232
  display: flex;
233
  align-items: center;
234
  gap: 8px;
235
  padding: 14px 24px 0;
236
}
237
238
.commandKbd {
239
  margin-left: auto;
240
  padding: 1px 5px;
241
  border: 1px solid var(--border);
242
  border-radius: 0;
243
  color: var(--text-faint);
244
  font: 500 10px/1.4 var(--mono);
245
}
246
247
@media (max-width: 640px) {
248
  .commandKbd {
249
    display: none;
250
  }
251
}
252
253
.brand {
254
  display: flex;
255
  align-items: center;
256
  gap: 10px;
257
}
258
259
.brand strong {
260
  font-size: 14px;
261
  font-weight: 600;
262
  letter-spacing: -0.03em;
263
}
264
265
.navRule {
266
  display: block;
267
  height: 1px;
268
  margin: 8px 10px;
269
  background: var(--border);
270
}
271
272
.ghostButton {
273
  display: flex;
274
  align-items: center;
275
  gap: 10px;
276
  width: 100%;
277
  margin-top: 16px;
278
  padding: 9px 2px;
279
  border: 0;
280
  border-radius: 0;
281
  color: var(--text-muted);
282
  background: transparent;
283
  font-size: 12px;
284
  cursor: pointer;
285
}
286
287
.ghostButton:hover,
288
.secondary:hover {
289
  background: var(--bg-hover);
290
}
291
292
.ghostButton svg {
293
  width: 16px;
294
  height: 16px;
295
  flex: none;
296
}
297
298
.sidebarFoot {
299
  display: grid;
300
  gap: 10px;
301
  margin-top: auto;
302
  padding-top: 12px;
303
}
304
305
.privacyStamp {
306
  display: flex;
307
  align-items: center;
308
  gap: 8px;
309
  padding: 0 4px;
310
  border: 0;
311
  background: transparent;
312
}
313
314
.privacyStamp small {
315
  color: var(--text-faint);
316
  font-size: 11px;
317
  line-height: 1.3;
318
}
319
320
.liveDot {
321
  width: 6px;
322
  height: 6px;
323
  flex: none;
324
  border-radius: 0;
325
  background: var(--live);
326
}
327
328
.sidebarTools {
329
  display: flex;
330
  align-items: center;
331
  gap: 6px;
332
}
333
334
.sidebarTools .iconButton {
335
  width: 32px;
336
  height: 32px;
337
  flex: none;
338
}
339
340
.account {
341
  display: flex;
342
  min-width: 0;
343
  flex: 1;
344
  align-items: center;
345
  gap: 8px;
346
  padding: 4px;
347
  border: 0;
348
  border-radius: 0;
349
  color: var(--text);
350
  background: transparent;
351
  text-align: left;
352
  cursor: pointer;
353
}
354
355
.account:hover {
356
  background: var(--bg-hover);
357
}
358
359
.account > span {
360
  display: grid;
361
  width: 28px;
362
  height: 28px;
363
  place-items: center;
364
  border: 0;
365
  border-radius: 50%;
366
  color: var(--accent-ink);
367
  background: var(--accent);
368
  font: 600 10px/1 var(--mono);
369
}
370
371
.account > div {
372
  display: flex;
373
  min-width: 0;
374
  flex: 1;
375
  flex-direction: column;
376
  gap: 2px;
377
}
378
379
.account strong,
380
.account small {
381
  overflow: hidden;
382
  text-overflow: ellipsis;
383
  white-space: nowrap;
384
}
385
386
.account strong {
387
  font-size: 12px;
388
}
389
390
.account small {
391
  color: var(--text-faint);
392
  font-size: 11px;
393
}
394
395
.account > b {
396
  color: var(--text-faint);
397
  font-size: 11px;
398
  font-weight: 500;
399
}
400
401
.mobileActions {
402
  display: flex;
403
  align-items: center;
404
  gap: 8px;
405
}
406
407
.iconButton {
408
  display: grid;
409
  width: 36px;
410
  height: 36px;
411
  place-items: center;
412
  border: 1px solid var(--border);
413
  border-radius: 0;
414
  color: var(--text);
415
  background: transparent;
416
  cursor: pointer;
417
}
418
419
.iconButton svg {
420
  width: 16px;
421
  height: 16px;
422
}
423
424
.appMain {
425
  width: 100%;
426
  max-width: 1040px;
427
  padding: 24px 40px 80px;
428
}
429
430
.appMain > * {
431
  animation: none;
432
}
433
434
.previewBanner {
435
  margin-bottom: 22px;
436
  padding: 0 0 14px;
437
  border: 0;
438
  border-bottom: 1px solid var(--accent-line);
439
  border-radius: 0;
440
  color: var(--accent-soft, var(--text));
441
  background: transparent;
442
  font: 500 12px/1.4 var(--mono);
443
}
444
445
.pageHead {
446
  display: flex;
447
  align-items: flex-end;
448
  justify-content: space-between;
449
  gap: 16px;
450
  padding-bottom: 18px;
451
  border-bottom: 1px solid var(--border);
452
}
453
454
.pageHead h1 {
455
  max-width: 720px;
456
  margin: 0;
457
  font-size: clamp(26px, 3vw, 34px);
458
  font-weight: 600;
459
  letter-spacing: -0.045em;
460
  line-height: 1.05;
461
}
462
463
.pageHead p.lede {
464
  max-width: 520px;
465
  margin: 6px 0 0;
466
  color: var(--text-muted);
467
  font-size: 13px;
468
  line-height: 1.45;
469
}
470
471
.primary,
472
.secondary {
473
  display: inline-flex;
474
  align-items: center;
475
  gap: 8px;
476
  padding: 10px 16px;
477
  border-radius: var(--radius-sm);
478
  cursor: pointer;
479
  font-size: 13px;
480
  font-weight: 600;
481
}
482
483
.primary {
484
  border: 0;
485
  color: #fff;
486
  background: var(--accent);
487
  box-shadow: none;
488
  transition:
489
    background 0.16s ease,
490
    transform 0.16s ease;
491
}
492
493
.primary:hover {
494
  background: var(--accent-hover);
495
}
496
497
.primary:disabled,
498
.secondary:disabled {
499
  opacity: 0.5;
500
  cursor: not-allowed;
501
}
502
503
.secondary {
504
  border: 1px solid var(--border-strong);
505
  color: var(--text);
506
  background: transparent;
507
}
508
509
.metrics {
510
  display: grid;
511
  grid-template-columns: repeat(4, minmax(0, 1fr));
512
  gap: 12px;
513
  margin: 14px 0 8px;
514
}
515
516
.readiness,
517
.attentionBanner {
518
  display: flex;
519
  align-items: center;
520
  justify-content: space-between;
521
  gap: 16px;
522
  margin: 22px 0 0;
523
  padding: 16px 4px 18px;
524
  border: 0;
525
  border-bottom: 1px solid var(--border);
526
  border-radius: 0;
527
  background: transparent;
528
}
529
530
.readiness.ready {
531
  border-color: var(--border);
532
  background: transparent;
533
}
534
535
.attentionBanner {
536
  width: 100%;
537
  color: inherit;
538
  text-align: left;
539
  cursor: pointer;
540
}
541
542
.readiness > div,
543
.attentionBanner > div {
544
  display: flex;
545
  align-items: center;
546
  gap: 12px;
547
}
548
549
.readiness > div > div,
550
.attentionBanner > div > div {
551
  display: flex;
552
  flex-direction: column;
553
  gap: 3px;
554
}
555
556
.readiness strong,
557
.attentionBanner strong {
558
  font-size: 14px;
559
}
560
561
.readiness small,
562
.attentionBanner small {
563
  color: var(--text-muted);
564
  font-size: 12px;
565
}
566
567
.statusIndex {
568
  flex: none;
569
  color: var(--accent);
570
  font: 500 11px/1 var(--mono);
571
  letter-spacing: 0.08em;
572
}
573
574
.readiness .statusIndex {
575
  color: var(--warn);
576
}
577
578
.metric {
579
  display: flex;
580
  min-height: 0;
581
  flex-direction: column;
582
  padding: 4px 8px 4px 0;
583
  border: 0;
584
  border-radius: 0;
585
  background: transparent;
586
}
587
588
.metric::before {
589
  width: 20px;
590
  height: 2px;
591
  margin-bottom: 10px;
592
  border-radius: 99px;
593
  background: var(--accent);
594
  content: '';
595
}
596
597
.metric.warn::before {
598
  background: var(--warn);
599
}
600
601
.metric > span {
602
  color: var(--text-faint);
603
  font: 11px/1.3 var(--mono);
604
  letter-spacing: 0.04em;
605
  text-transform: uppercase;
606
}
607
608
.metric > strong {
609
  margin: 0 0 5px;
610
  font: 500 28px/1 var(--mono);
611
  letter-spacing: -0.05em;
612
}
613
614
.metric > small {
615
  color: var(--text-muted);
616
  font-size: 12px;
617
}
618
619
.metric.warn > strong {
620
  color: var(--warn);
621
}
622
623
.contentGrid,
624
.connectLayout {
625
  display: grid;
626
  grid-template-columns: 1.25fr 1fr;
627
  gap: 36px;
628
}
629
630
.setupRequests {
631
  margin: 22px 0;
632
  padding: 8px 0 4px;
633
  border: 0;
634
  border-radius: 0;
635
  background: transparent;
636
}
637
638
.setupRequests > div:first-child h2 {
639
  margin: 8px 0 4px;
640
  font-size: 20px;
641
  letter-spacing: -0.03em;
642
}
643
644
.setupRequests > div:first-child > p:last-child {
645
  margin: 0 0 16px;
646
  color: var(--text-muted);
647
  font-size: 13px;
648
}
649
650
.setupRequest {
651
  display: flex;
652
  align-items: center;
653
  justify-content: space-between;
654
  gap: 16px;
655
  padding: 16px 0;
656
  border: 0;
657
  border-bottom: 1px solid var(--border);
658
  border-radius: 0;
659
  background: transparent;
660
}
661
662
.setupRequest + .setupRequest {
663
  margin-top: 10px;
664
}
665
666
.setupRequest > div:first-child {
667
  display: flex;
668
  min-width: 0;
669
  flex-direction: column;
670
  gap: 4px;
671
}
672
673
.setupRequest strong {
674
  font-size: 14px;
675
}
676
677
.setupRequest small {
678
  color: var(--text-muted);
679
  font: 12px/1.4 var(--mono);
680
}
681
682
.decisionButtons {
683
  display: flex;
684
  flex: none;
685
  gap: 8px;
686
}
687
688
.setupRequests > .loginError {
689
  margin-top: 10px;
690
}
691
692
.panel {
693
  min-width: 0;
694
  padding: 6px 0 0;
695
  border: 0;
696
  border-radius: 0;
697
  background: transparent;
698
}
699
700
.panelHead {
701
  padding-bottom: 14px;
702
  border-bottom: 1px solid var(--border);
703
}
704
705
.panelHead h2 {
706
  margin: 0;
707
  font-size: 20px;
708
  font-weight: 600;
709
  letter-spacing: -0.03em;
710
}
711
712
.panelHead p {
713
  margin: 4px 0 0;
714
  color: var(--text-muted);
715
  font-size: 13px;
716
}
717
718
.toolbar {
719
  display: flex;
720
  flex-wrap: wrap;
721
  align-items: center;
722
  gap: 10px;
723
  margin: 16px 0 8px;
724
}
725
726
.searchField {
727
  min-width: 220px;
728
  flex: 1;
729
  padding: 10px 0;
730
  border: 0;
731
  border-bottom: 1px solid var(--border-strong);
732
  border-radius: 0;
733
  color: var(--text);
734
  background: transparent;
735
  font-size: 13px;
736
}
737
738
.filterRow {
739
  display: flex;
740
  flex-wrap: wrap;
741
  gap: 6px;
742
}
743
744
.filterChip {
745
  padding: 6px 0;
746
  border: 0;
747
  border-bottom: 1px solid transparent;
748
  border-radius: 0;
749
  color: var(--text-muted);
750
  background: transparent;
751
  font: 500 11px/1.3 var(--mono);
752
  letter-spacing: 0.06em;
753
  text-transform: lowercase;
754
  cursor: pointer;
755
}
756
757
.filterChip.active,
758
.filterChip:hover {
759
  color: var(--text);
760
  background: transparent;
761
}
762
763
.filterChip.active {
764
  border-color: var(--accent);
765
  color: var(--text);
766
  background: transparent;
767
}
768
769
.historyRow {
770
  display: flex;
771
  align-items: center;
772
  gap: 12px;
773
  padding: 13px 4px;
774
  border-bottom: 1px solid var(--border);
775
}
776
777
.historyRow:last-child {
778
  border-bottom: 0;
779
}
780
781
.historyRow:hover {
782
  background: transparent;
783
}
784
785
.historyRow > div {
786
  display: flex;
787
  min-width: 0;
788
  flex: 1;
789
  flex-direction: column;
790
  gap: 3px;
791
}
792
793
.historyRow strong {
794
  font-size: 13px;
795
  font-weight: 600;
796
  text-transform: capitalize;
797
}
798
799
.historyRow small {
800
  overflow: hidden;
801
  color: var(--text-muted);
802
  font: 12px/1.4 var(--mono);
803
  text-overflow: ellipsis;
804
  white-space: nowrap;
805
}
806
807
.historyRow > b {
808
  color: var(--text-faint);
809
  font: 11px/1.3 var(--mono);
810
  text-transform: uppercase;
811
}
812
813
.eventDot {
814
  width: 6px;
815
  height: 6px;
816
  flex: none;
817
  border-radius: 0;
818
  background: var(--live);
819
}
820
821
.eventDot.policy_warning,
822
.eventDot.objection {
823
  background: var(--warn);
824
}
825
826
.eventDot.policy_violation,
827
.eventDot.dispute {
828
  background: var(--danger);
829
}
830
831
.eventDot.receipt {
832
  background: var(--info);
833
}
834
835
.textButton {
836
  margin-top: 14px;
837
  padding: 0;
838
  border: 0;
839
  color: var(--accent);
840
  background: transparent;
841
  font-size: 13px;
842
  font-weight: 600;
843
  cursor: pointer;
844
}
845
846
.empty {
847
  display: grid;
848
  min-height: 220px;
849
  place-items: center;
850
  align-content: center;
851
  padding: 28px;
852
  text-align: center;
853
}
854
855
.empty > span,
856
.empty > svg {
857
  display: block;
858
  width: 18px;
859
  height: 18px;
860
  margin-bottom: 12px;
861
  color: var(--accent);
862
}
863
864
.empty strong {
865
  font-size: 15px;
866
}
867
868
.empty p {
869
  max-width: 420px;
870
  margin: 8px 0 16px;
871
  color: var(--text-muted);
872
  font-size: 13px;
873
  line-height: 1.55;
874
}
875
876
.profile {
877
  padding: 16px 0;
878
  border-bottom: 1px solid var(--border);
879
}
880
881
.profile:last-child {
882
  border-bottom: 0;
883
}
884
885
.profile > div:first-child {
886
  display: flex;
887
  justify-content: space-between;
888
  gap: 12px;
889
  margin-bottom: 12px;
890
}
891
892
.profile > div:first-child strong {
893
  font-size: 13px;
894
}
895
896
.profile > div:first-child small {
897
  color: var(--text-muted);
898
  font: 12px/1.3 var(--mono);
899
}
900
901
.meter {
902
  display: grid;
903
  grid-template-columns: 96px 1fr 40px;
904
  align-items: center;
905
  gap: 10px;
906
  margin: 8px 0;
907
  color: var(--text-muted);
908
  font: 11px/1.3 var(--mono);
909
}
910
911
.meter i {
912
  height: 1px;
913
  overflow: hidden;
914
  border-radius: 0;
915
  background: var(--border);
916
}
917
918
.meter i b {
919
  display: block;
920
  height: 100%;
921
  background: var(--accent);
922
}
923
924
.meter strong {
925
  text-align: right;
926
}
927
928
.agentGrid {
929
  display: grid;
930
  grid-template-columns: repeat(2, minmax(0, 1fr));
931
  gap: 16px;
932
  margin-top: 18px;
933
}
934
935
.agentGrid > .empty {
936
  grid-column: 1 / -1;
937
  border: 0;
938
  border-radius: 0;
939
  background: transparent;
940
}
941
942
.agentCard {
943
  display: flex;
944
  min-height: 230px;
945
  flex-direction: column;
946
  padding: 8px 4px 12px;
947
  border: 0;
948
  border-top: 1px solid var(--border);
949
  border-radius: 0;
950
  background: transparent;
951
}
952
953
.agentTop {
954
  display: flex;
955
  align-items: flex-start;
956
  justify-content: space-between;
957
  gap: 12px;
958
}
959
960
.agentGlyph {
961
  display: grid;
962
  width: 28px;
963
  height: 28px;
964
  place-items: center;
965
  border: 0;
966
  border-radius: 0;
967
  color: var(--accent);
968
  background: transparent;
969
}
970
971
.agentGlyph svg {
972
  width: 18px;
973
  height: 18px;
974
}
975
976
.agentBadges {
977
  display: flex;
978
  flex-wrap: wrap;
979
  justify-content: flex-end;
980
  gap: 6px;
981
}
982
983
.agentTop b {
984
  padding: 0;
985
  border: 0;
986
  border-radius: 0;
987
  color: var(--text-muted);
988
  background: transparent;
989
  font: 11px/1.3 var(--mono);
990
  letter-spacing: 0.04em;
991
  text-transform: lowercase;
992
}
993
994
.agentTop b.bad {
995
  color: var(--danger);
996
  background: transparent;
997
}
998
999
.agentTop .readyBadge,
1000
.agentTop .onlineBadge {
1001
  color: var(--live);
1002
  background: transparent;
1003
}
1004
1005
:root[data-theme='dark'] .agentTop .readyBadge,
1006
:root[data-theme='dark'] .agentTop .onlineBadge {
1007
  color: var(--live);
1008
}
1009
1010
.agentTop .needsBadge {
1011
  color: var(--warn);
1012
  background: transparent;
1013
}
1014
1015
.agentTop .offlineBadge {
1016
  color: var(--text-faint);
1017
}
1018
1019
.agentCard h2 {
1020
  margin: 18px 0 4px;
1021
  font-size: 18px;
1022
  letter-spacing: -0.03em;
1023
}
1024
1025
.agentCard p,
1026
.agentCard > small {
1027
  color: var(--text-muted);
1028
  font-size: 13px;
1029
}
1030
1031
.agentCard > small {
1032
  display: block;
1033
  margin-top: 10px;
1034
}
1035
1036
.agentPublicLinks {
1037
  display: flex;
1038
  flex-wrap: wrap;
1039
  gap: 12px;
1040
  margin-top: 10px;
1041
}
1042
1043
.agentPublicLinks a {
1044
  color: var(--accent);
1045
  font-size: 13px;
1046
  font-weight: 600;
1047
  text-decoration: none;
1048
}
1049
1050
.agentPublicLinks a:hover {
1051
  text-decoration: underline;
1052
}
1053
1054
.agentCard > button,
1055
.agentCard > .agentActions {
1056
  width: 100%;
1057
  margin-top: 16px;
1058
}
1059
1060
.automationSummary {
1061
  display: flex;
1062
  flex-wrap: wrap;
1063
  gap: 6px;
1064
  margin-top: 14px;
1065
}
1066
1067
.automationSummary span,
1068
.automationPreview span {
1069
  padding: 5px 0;
1070
  border: 0;
1071
  border-radius: 0;
1072
  color: var(--text-muted);
1073
  background: transparent;
1074
  font: 11px/1.3 var(--mono);
1075
}
1076
1077
.automationForm {
1078
  display: grid;
1079
  gap: 12px;
1080
  margin-top: 16px;
1081
  padding-top: 16px;
1082
  border-top: 1px solid var(--border);
1083
}
1084
1085
.runtimeBox {
1086
  display: grid;
1087
  gap: 10px;
1088
  margin-top: 16px;
1089
  padding: 14px 0 0;
1090
  border: 0;
1091
  border-top: 1px solid var(--border);
1092
  border-radius: 0;
1093
  background: transparent;
1094
}
1095
1096
.runtimeBox > div:first-child {
1097
  display: flex;
1098
  align-items: center;
1099
  justify-content: space-between;
1100
  gap: 12px;
1101
}
1102
1103
.runtimeBox p,
1104
.runtimeBox small {
1105
  margin: 0;
1106
  color: var(--text-muted);
1107
  font-size: 12px;
1108
  line-height: 1.5;
1109
}
1110
1111
.runtimeBox input,
1112
.automationForm input,
1113
.automationForm select,
1114
.setting input,
1115
.setting select {
1116
  width: 100%;
1117
  padding: 10px 0;
1118
  border: 0;
1119
  border-bottom: 1px solid var(--border-strong);
1120
  border-radius: 0;
1121
  color: var(--text);
1122
  background: transparent;
1123
  font-size: 13px;
1124
}
1125
1126
.runtimeBox input:focus,
1127
.automationForm input:focus,
1128
.automationForm select:focus,
1129
.setting input:focus,
1130
.setting select:focus,
1131
.searchField:focus {
1132
  border-color: var(--accent);
1133
  box-shadow: 0 0 0 3px rgb(240 75 45 / 22%);
1134
}
1135
1136
.runtimeLive,
1137
.runtimeMissing {
1138
  font: 11px/1.3 var(--mono);
1139
}
1140
1141
.runtimeLive {
1142
  color: var(--live);
1143
}
1144
1145
.runtimeMissing {
1146
  color: var(--warn);
1147
}
1148
1149
.accessTokenBox {
1150
  display: grid;
1151
  gap: 12px;
1152
  margin-top: 12px;
1153
  padding: 14px 0 0;
1154
  border: 0;
1155
  border-top: 1px solid var(--border);
1156
  border-radius: 0;
1157
  background: transparent;
1158
}
1159
1160
.accessTokenHead > div {
1161
  display: flex;
1162
  align-items: center;
1163
  justify-content: space-between;
1164
  gap: 12px;
1165
}
1166
1167
.accessTokenHead span {
1168
  color: var(--accent);
1169
  font: 11px/1.3 var(--mono);
1170
}
1171
1172
.accessTokenHead p {
1173
  margin: 8px 0 0;
1174
  color: var(--text-muted);
1175
  font-size: 12px;
1176
  line-height: 1.5;
1177
}
1178
1179
.tokenList {
1180
  display: grid;
1181
  border-top: 1px solid var(--border);
1182
}
1183
1184
.tokenList > div {
1185
  display: flex;
1186
  align-items: center;
1187
  justify-content: space-between;
1188
  gap: 12px;
1189
  padding-top: 10px;
1190
}
1191
1192
.tokenList span {
1193
  display: grid;
1194
  min-width: 0;
1195
  gap: 3px;
1196
}
1197
1198
.tokenList small {
1199
  color: var(--text-muted);
1200
  font: 10px/1.4 var(--mono);
1201
}
1202
1203
.automationForm label {
1204
  display: grid;
1205
  gap: 6px;
1206
  color: var(--text-muted);
1207
  font-size: 12px;
1208
}
1209
1210
.automationForm .checkControl {
1211
  display: flex;
1212
  grid-template-columns: none;
1213
  align-items: center;
1214
  gap: 8px;
1215
}
1216
1217
.automationForm .checkControl input {
1218
  width: 15px;
1219
  height: 15px;
1220
  accent-color: var(--accent);
1221
}
1222
1223
.agentActions {
1224
  display: flex;
1225
  justify-content: flex-end;
1226
  gap: 8px;
1227
}
1228
1229
.agentManagementActions {
1230
  justify-content: space-between;
1231
}
1232
1233
.dangerButton {
1234
  border-color: var(--danger-line);
1235
  color: var(--danger);
1236
  background: var(--danger-dim);
1237
}
1238
1239
.dangerButton:hover:not(:disabled) {
1240
  border-color: var(--danger);
1241
}
1242
1243
.automationPreview {
1244
  display: flex;
1245
  flex-wrap: wrap;
1246
  gap: 6px;
1247
  margin-top: 8px;
1248
}
1249
1250
.autoAccepted {
1251
  color: var(--live) !important;
1252
}
1253
1254
.tags {
1255
  display: flex;
1256
  flex-wrap: wrap;
1257
  gap: 6px;
1258
  margin-top: 12px;
1259
}
1260
1261
.tags span {
1262
  padding: 4px 0;
1263
  border: 0;
1264
  border-radius: 0;
1265
  color: var(--text-muted);
1266
  font: 11px/1.3 var(--mono);
1267
}
1268
1269
.tags span + span::before,
1270
.automationSummary span + span::before,
1271
.automationPreview span + span::before {
1272
  margin-right: 8px;
1273
  color: var(--accent);
1274
  content: '/';
1275
}
1276
1277
.notice {
1278
  margin: 18px 0;
1279
  padding: 4px 0 16px;
1280
  border: 0;
1281
  border-bottom: 1px solid var(--border);
1282
  color: var(--text-muted);
1283
  background: transparent;
1284
  font-size: 13px;
1285
}
1286
1287
.notice strong {
1288
  margin-right: 6px;
1289
  color: var(--text);
1290
}
1291
1292
.connectionTypePicker {
1293
  display: grid;
1294
  grid-template-columns: repeat(2, minmax(0, 1fr));
1295
  gap: 10px;
1296
  margin-top: 18px;
1297
}
1298
1299
.connectionTypePicker button {
1300
  display: grid;
1301
  gap: 5px;
1302
  padding: 14px 4px 16px;
1303
  border: 0;
1304
  border-top: 2px solid var(--border);
1305
  border-radius: 0;
1306
  color: var(--text);
1307
  background: transparent;
1308
  font-size: 14px;
1309
  font-weight: 600;
1310
  text-align: left;
1311
  cursor: pointer;
1312
}
1313
1314
.connectionTypePicker button.active {
1315
  border-color: var(--accent);
1316
  background: transparent;
1317
}
1318
1319
.connectionTypePicker small {
1320
  color: var(--text-muted);
1321
  font-size: 12px;
1322
  font-weight: 400;
1323
}
1324
1325
.connectLayout {
1326
  margin-top: 18px;
1327
}
1328
1329
.providerForm {
1330
  display: grid;
1331
  grid-template-columns: repeat(2, minmax(0, 1fr));
1332
  gap: 12px;
1333
  margin-top: 18px;
1334
}
1335
1336
.providerForm label,
1337
.providerResult label {
1338
  display: grid;
1339
  gap: 6px;
1340
  color: var(--text-muted);
1341
  font-size: 12px;
1342
}
1343
1344
.providerForm input,
1345
.providerForm select,
1346
.providerForm textarea {
1347
  width: 100%;
1348
  padding: 10px 0;
1349
  border: 0;
1350
  border-bottom: 1px solid var(--border-strong);
1351
  border-radius: 0;
1352
  color: var(--text);
1353
  background: transparent;
1354
  font: inherit;
1355
}
1356
1357
.providerForm textarea {
1358
  min-height: 82px;
1359
  resize: vertical;
1360
}
1361
1362
.providerForm .fullWidth {
1363
  grid-column: 1 / -1;
1364
}
1365
1366
.providerSubmit {
1367
  display: flex;
1368
  align-items: center;
1369
  justify-content: space-between;
1370
  gap: 12px;
1371
}
1372
1373
.providerSubmit p {
1374
  margin: 0;
1375
  color: var(--text-muted);
1376
  font-size: 12px;
1377
}
1378
1379
.providerResult {
1380
  display: grid;
1381
  gap: 14px;
1382
  margin-top: 18px;
1383
}
1384
1385
.providerResult code {
1386
  padding: 11px 0;
1387
  border: 0;
1388
  border-bottom: 1px solid var(--border);
1389
  border-radius: 0;
1390
  color: var(--accent);
1391
  background: transparent;
1392
  overflow-wrap: anywhere;
1393
  user-select: all;
1394
}
1395
1396
.successBanner {
1397
  display: grid;
1398
  gap: 3px;
1399
  padding: 12px 0;
1400
  border: 0;
1401
  border-radius: 0;
1402
  background: transparent;
1403
}
1404
1405
.successBanner span {
1406
  color: var(--text-muted);
1407
  font: 11px/1.4 var(--mono);
1408
  overflow-wrap: anywhere;
1409
}
1410
1411
.providerNotice {
1412
  margin-bottom: 0;
1413
}
1414
1415
.endpoint {
1416
  display: flex;
1417
  gap: 8px;
1418
  margin: 20px 0;
1419
}
1420
1421
.endpoint code {
1422
  overflow: auto;
1423
  flex: 1;
1424
  padding: 12px 0;
1425
  border: 0;
1426
  border-bottom: 1px solid var(--border);
1427
  border-radius: 0;
1428
  color: var(--accent);
1429
  background: transparent;
1430
  font: 13px/1.4 var(--mono);
1431
  white-space: nowrap;
1432
}
1433
1434
.endpoint button {
1435
  padding: 0 4px;
1436
  border: 0;
1437
  border-radius: 0;
1438
  color: var(--accent);
1439
  background: transparent;
1440
  font-weight: 600;
1441
  cursor: pointer;
1442
}
1443
1444
.connectLayout ol {
1445
  margin: 8px 0 0;
1446
  padding-left: 22px;
1447
  color: var(--text-muted);
1448
  font-size: 14px;
1449
  line-height: 1.7;
1450
}
1451
1452
.connectSteps {
1453
  display: grid;
1454
  gap: 12px;
1455
  margin-top: 18px;
1456
}
1457
1458
.connectStep {
1459
  display: grid;
1460
  grid-template-columns: 28px 1fr;
1461
  gap: 12px;
1462
  color: var(--text-muted);
1463
  font-size: 14px;
1464
}
1465
1466
.connectStep b {
1467
  display: grid;
1468
  width: 28px;
1469
  height: 28px;
1470
  place-items: center;
1471
  border-radius: 0;
1472
  color: var(--accent);
1473
  background: transparent;
1474
  font: 500 11px/1 var(--mono);
1475
}
1476
1477
.checkList {
1478
  margin: 16px 0 0;
1479
  padding: 0;
1480
  list-style: none;
1481
}
1482
1483
.checkList li {
1484
  padding: 11px 0;
1485
  border-bottom: 1px solid var(--border);
1486
  color: var(--text-muted);
1487
  font-size: 14px;
1488
}
1489
1490
.checkList li:last-child {
1491
  border-bottom: 0;
1492
}
1493
1494
.checkList li::before {
1495
  content: '✓';
1496
  margin-right: 10px;
1497
  color: var(--accent);
1498
}
1499
1500
.settingsCard {
1501
  margin-top: 10px;
1502
  border: 0;
1503
  border-radius: 0;
1504
  background: transparent;
1505
}
1506
1507
.setting {
1508
  display: grid;
1509
  grid-template-columns: 1fr minmax(230px, 0.55fr);
1510
  align-items: center;
1511
  gap: 24px;
1512
  padding: 22px 0;
1513
  border-bottom: 1px solid var(--border);
1514
}
1515
1516
.setting strong {
1517
  font-size: 14px;
1518
}
1519
1520
.setting p {
1521
  max-width: 580px;
1522
  margin: 5px 0 0;
1523
  color: var(--text-muted);
1524
  font-size: 13px;
1525
  line-height: 1.5;
1526
}
1527
1528
.locked {
1529
  float: right;
1530
  color: var(--text-faint);
1531
  font: 12px/1.3 var(--mono);
1532
}
1533
1534
.toggle {
1535
  position: relative;
1536
  display: block;
1537
  width: 44px;
1538
  height: 26px;
1539
  margin-left: auto;
1540
  padding: 0;
1541
  border: 1px solid var(--border-strong);
1542
  border-radius: 99px;
1543
  background: var(--bg-well);
1544
  cursor: pointer;
1545
}
1546
1547
.toggle span {
1548
  position: absolute;
1549
  top: 4px;
1550
  left: 4px;
1551
  width: 16px;
1552
  height: 16px;
1553
  border-radius: 50%;
1554
  background: var(--text-faint);
1555
  transition: transform 0.18s ease;
1556
}
1557
1558
.toggle.on {
1559
  border-color: var(--accent);
1560
  background: var(--accent);
1561
}
1562
1563
.toggle.on span {
1564
  left: 4px;
1565
  background: #fff;
1566
  transform: translateX(18px);
1567
}
1568
1569
.saveRow {
1570
  display: flex;
1571
  align-items: center;
1572
  gap: 12px;
1573
  padding: 22px 0;
1574
}
1575
1576
.saveRow span {
1577
  color: var(--accent);
1578
  font-size: 13px;
1579
}
1580
1581
.loginPage {
1582
  display: grid;
1583
  grid-template-columns: 1.05fr 0.95fr;
1584
  min-height: 100vh;
1585
}
1586
1587
.loginPitch {
1588
  display: flex;
1589
  flex-direction: column;
1590
  justify-content: space-between;
1591
  padding: 48px 7vw;
1592
  background: transparent;
1593
}
1594
1595
.loginPitch h1 {
1596
  max-width: 680px;
1597
  margin: 10px 0 14px;
1598
  font-size: clamp(40px, 5.4vw, 72px);
1599
  font-weight: 600;
1600
  letter-spacing: -0.06em;
1601
  line-height: 0.94;
1602
}
1603
1604
.loginPitch > div > p:last-child {
1605
  max-width: 540px;
1606
  color: var(--text-muted);
1607
  font-size: 16px;
1608
  line-height: 1.65;
1609
}
1610
1611
.launchBadge {
1612
  display: inline-flex;
1613
  width: fit-content;
1614
  margin: 0 0 18px;
1615
  padding: 5px 10px;
1616
  border: 1px solid var(--accent-line);
1617
  border-radius: 999px;
1618
  color: var(--accent);
1619
  background: var(--accent-dim);
1620
  font: 500 11px/1.3 var(--mono);
1621
}
1622
1623
.loginProof {
1624
  display: grid;
1625
  grid-template-columns: auto 1fr;
1626
  gap: 10px 12px;
1627
  color: var(--text-muted);
1628
  font: 12px/1.3 var(--mono);
1629
  text-transform: uppercase;
1630
}
1631
1632
.loginProof span {
1633
  color: var(--accent);
1634
}
1635
1636
.loginCard {
1637
  display: flex;
1638
  flex-direction: column;
1639
  justify-content: center;
1640
  padding: 8vw;
1641
  gap: 28px;
1642
  border-left: 1px solid var(--border);
1643
  background: transparent;
1644
}
1645
1646
.loginCard h2 {
1647
  margin: 6px 0;
1648
  font-size: 28px;
1649
  font-weight: 600;
1650
  letter-spacing: -0.04em;
1651
}
1652
1653
.socialButtons {
1654
  display: grid;
1655
  gap: 10px;
1656
}
1657
1658
.socialButtons button {
1659
  display: flex;
1660
  align-items: center;
1661
  justify-content: center;
1662
  gap: 10px;
1663
  width: 100%;
1664
  padding: 13px;
1665
  border: 1px solid var(--border-strong);
1666
  border-radius: var(--radius-sm);
1667
  color: var(--text);
1668
  background: transparent;
1669
  font-size: 14px;
1670
  font-weight: 600;
1671
  cursor: pointer;
1672
}
1673
1674
.socialButtons button:first-child {
1675
  border-color: transparent;
1676
  color: var(--accent-ink);
1677
  background: var(--accent);
1678
  box-shadow: none;
1679
}
1680
1681
.socialButtons button:hover {
1682
  border-color: var(--accent);
1683
  background: var(--accent-dim);
1684
}
1685
1686
.socialButtons button:first-child:hover {
1687
  color: var(--accent-ink);
1688
  background: var(--accent-hover);
1689
}
1690
1691
.socialButtons svg {
1692
  width: 18px;
1693
  height: 18px;
1694
}
1695
1696
.loginError,
1697
.errorBar {
1698
  padding: 11px 0;
1699
  border: 0;
1700
  border-radius: 0;
1701
  color: var(--danger);
1702
  background: transparent;
1703
  font-size: 13px;
1704
}
1705
1706
.loginCard > div > p:last-child,
1707
.loginCard > small {
1708
  color: var(--text-muted);
1709
  font-size: 13px;
1710
  line-height: 1.55;
1711
}
1712
1713
.loading {
1714
  display: grid;
1715
  min-height: 100vh;
1716
  place-items: center;
1717
  align-content: center;
1718
  gap: 14px;
1719
  color: var(--text-muted);
1720
  font: 12px/1.3 var(--mono);
1721
  text-transform: uppercase;
1722
}
1723
1724
.loading.compact {
1725
  min-height: 50vh;
1726
}
1727
1728
.spinner {
1729
  width: 22px;
1730
  height: 22px;
1731
  border: 2px solid var(--border);
1732
  border-top-color: var(--accent);
1733
  border-radius: 50%;
1734
  animation: spin 0.8s linear infinite;
1735
}
1736
1737
.errorBar {
1738
  margin-bottom: 14px;
1739
}
1740
1741
@keyframes spin {
1742
  to {
1743
    transform: rotate(360deg);
1744
  }
1745
}
1746
1747
@keyframes fadeUp {
1748
  from {
1749
    opacity: 0;
1750
    transform: translateY(8px);
1751
  }
1752
  to {
1753
    opacity: 1;
1754
    transform: none;
1755
  }
1756
}
1757
1758
@keyframes pulse {
1759
  0%,
1760
  100% {
1761
    opacity: 1;
1762
    box-shadow: 0 0 0 0 rgb(240 75 45 / 35%);
1763
  }
1764
  50% {
1765
    opacity: 0.55;
1766
    box-shadow: 0 0 0 6px transparent;
1767
  }
1768
}
1769
1770
.conversationLayout {
1771
  display: grid;
1772
  grid-template-columns: minmax(260px, 0.7fr) minmax(360px, 1.3fr);
1773
  gap: 16px;
1774
}
1775
1776
.threadList,
1777
.conversationDetail,
1778
.messageList {
1779
  display: grid;
1780
  gap: 10px;
1781
}
1782
1783
.threadList > button {
1784
  display: flex;
1785
  align-items: center;
1786
  justify-content: space-between;
1787
  width: 100%;
1788
  padding: 12px 2px;
1789
  border: 0;
1790
  border-bottom: 1px solid var(--border);
1791
  border-radius: 0;
1792
  color: var(--text);
1793
  background: transparent;
1794
  text-align: left;
1795
  cursor: pointer;
1796
}
1797
1798
.threadList > button.active,
1799
.threadList > button:hover {
1800
  border-color: var(--accent);
1801
  background: transparent;
1802
}
1803
1804
.threadList span,
1805
.threadList small {
1806
  display: block;
1807
}
1808
1809
.threadList small,
1810
.messageList span {
1811
  margin-top: 4px;
1812
  color: var(--text-muted);
1813
  font-size: 11px;
1814
}
1815
1816
.threadList b,
1817
.conversationInsights b {
1818
  color: var(--accent);
1819
  font: 10px/1.2 var(--mono);
1820
}
1821
1822
.conversationInsights {
1823
  padding: 4px 0 12px;
1824
  border: 0;
1825
  border-bottom: 1px solid var(--warn-line);
1826
  border-radius: 0;
1827
  background: transparent;
1828
}
1829
1830
.conversationInsights p {
1831
  margin: 0 0 6px;
1832
  font-size: 12px;
1833
  line-height: 1.5;
1834
}
1835
1836
.conversationInsights p:last-child {
1837
  margin-bottom: 0;
1838
}
1839
1840
.messageList article {
1841
  max-width: 82%;
1842
  padding: 4px 0 12px;
1843
  border: 0;
1844
  border-radius: 0;
1845
  background: transparent;
1846
}
1847
1848
.messageList article.sent {
1849
  justify-self: end;
1850
  border-color: transparent;
1851
  background: transparent;
1852
}
1853
1854
.messageList article p {
1855
  margin: 4px 0;
1856
  white-space: pre-wrap;
1857
}
1858
1859
.replyBox {
1860
  display: grid;
1861
  gap: 8px;
1862
}
1863
1864
.replyBox textarea {
1865
  min-height: 100px;
1866
  padding: 10px 0;
1867
  border: 0;
1868
  border-bottom: 1px solid var(--border-strong);
1869
  border-radius: 0;
1870
  color: var(--text);
1871
  background: transparent;
1872
  resize: vertical;
1873
}
1874
1875
.historyToolbar {
1876
  display: flex;
1877
  flex-wrap: wrap;
1878
  align-items: center;
1879
  gap: 10px;
1880
  margin-bottom: 16px;
1881
}
1882
1883
.journeyLayout {
1884
  display: grid;
1885
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
1886
  gap: 16px;
1887
  align-items: start;
1888
}
1889
1890
.journeyList {
1891
  display: grid;
1892
  gap: 8px;
1893
}
1894
1895
.journeyList > button {
1896
  display: flex;
1897
  width: 100%;
1898
  flex-direction: column;
1899
  gap: 7px;
1900
  padding: 15px 4px;
1901
  border: 0;
1902
  border-bottom: 1px solid var(--border);
1903
  border-radius: 0;
1904
  color: var(--text);
1905
  background: transparent;
1906
  text-align: left;
1907
  cursor: pointer;
1908
}
1909
1910
.journeyList > button:hover {
1911
  border-color: var(--border-strong);
1912
  background: transparent;
1913
}
1914
1915
.journeyList > button.active {
1916
  border-color: var(--accent);
1917
  box-shadow: none;
1918
}
1919
1920
.journeyListTop,
1921
.journeyListMeta {
1922
  display: flex;
1923
  align-items: center;
1924
  justify-content: space-between;
1925
  gap: 10px;
1926
}
1927
1928
.journeyListTop > b {
1929
  color: var(--text-faint);
1930
  font: 500 10px/1.2 var(--mono);
1931
  letter-spacing: 0.08em;
1932
  text-transform: uppercase;
1933
}
1934
1935
.journeyList > button > strong {
1936
  font-size: 13px;
1937
  line-height: 1.4;
1938
}
1939
1940
.journeyList > button > small {
1941
  overflow: hidden;
1942
  color: var(--text-muted);
1943
  font: 11px/1.4 var(--mono);
1944
  text-overflow: ellipsis;
1945
  white-space: nowrap;
1946
}
1947
1948
.journeyListMeta {
1949
  color: var(--text-faint);
1950
  font: 10px/1.3 var(--mono);
1951
}
1952
1953
.journeyListMeta i {
1954
  font-style: normal;
1955
}
1956
1957
.statusPill {
1958
  display: inline-grid;
1959
  grid-template-columns: 6px minmax(7.4em, max-content);
1960
  align-items: center;
1961
  gap: 7px;
1962
  flex: none;
1963
  min-width: 8.4em;
1964
  padding: 0;
1965
  border: 0;
1966
  border-radius: 0;
1967
  color: var(--text-muted);
1968
  background: transparent;
1969
  font: 500 10px/1 var(--mono);
1970
  letter-spacing: 0.06em;
1971
  text-transform: uppercase;
1972
  white-space: nowrap;
1973
}
1974
1975
.statusPill i {
1976
  width: 6px;
1977
  height: 6px;
1978
  border-radius: 1px;
1979
  background: currentColor;
1980
}
1981
1982
.statusPill.good {
1983
  color: var(--live);
1984
}
1985
1986
.statusPill.warn {
1987
  color: var(--warn);
1988
}
1989
1990
:root[data-theme='light'] .statusPill.warn {
1991
  color: #8a5a16;
1992
}
1993
1994
.statusPill.danger {
1995
  color: var(--danger);
1996
}
1997
1998
.journeyDetail {
1999
  min-width: 0;
2000
  overflow: hidden;
2001
  border: 0;
2002
  border-radius: 0;
2003
  background: transparent;
2004
}
2005
2006
.journeyHero {
2007
  display: flex;
2008
  align-items: flex-start;
2009
  justify-content: space-between;
2010
  gap: 20px;
2011
  padding: 8px 0 22px;
2012
  border-bottom: 1px solid var(--border);
2013
}
2014
2015
.journeyHero h2 {
2016
  max-width: 780px;
2017
  margin: 8px 0 5px;
2018
  font-size: clamp(18px, 2vw, 24px);
2019
  line-height: 1.25;
2020
  letter-spacing: -0.03em;
2021
}
2022
2023
.journeyHero p {
2024
  margin: 0;
2025
  color: var(--text-muted);
2026
  font: 11px/1.4 var(--mono);
2027
}
2028
2029
.journeySummaryGrid {
2030
  display: grid;
2031
  grid-template-columns: repeat(4, minmax(0, 1fr));
2032
  border-bottom: 1px solid var(--border);
2033
}
2034
2035
.journeySummaryGrid section {
2036
  display: flex;
2037
  min-width: 0;
2038
  flex-direction: column;
2039
  gap: 5px;
2040
  padding: 16px 20px 16px 0;
2041
  border-right: 1px solid var(--border);
2042
}
2043
2044
.journeySummaryGrid section:last-child {
2045
  border-right: 0;
2046
}
2047
2048
.journeySummaryGrid span,
2049
.outcomeCard > div > span,
2050
.profileDelta > span {
2051
  color: var(--text-faint);
2052
  font: 10px/1.3 var(--mono);
2053
  letter-spacing: 0.05em;
2054
  text-transform: uppercase;
2055
}
2056
2057
.journeySummaryGrid strong {
2058
  overflow: hidden;
2059
  font-size: 15px;
2060
  text-overflow: ellipsis;
2061
  white-space: nowrap;
2062
}
2063
2064
.journeySummaryGrid small {
2065
  overflow: hidden;
2066
  color: var(--text-muted);
2067
  font-size: 11px;
2068
  text-overflow: ellipsis;
2069
  white-space: nowrap;
2070
}
2071
2072
.outcomeCard {
2073
  margin: 18px 0;
2074
  padding: 18px 0;
2075
  border: 0;
2076
  border-top: 1px solid var(--border);
2077
  border-radius: 0;
2078
  background: transparent;
2079
}
2080
2081
.outcomeCard h3 {
2082
  max-width: 800px;
2083
  margin: 7px 0 14px;
2084
  font-size: 14px;
2085
  font-weight: 500;
2086
  line-height: 1.55;
2087
}
2088
2089
.outcomeCard ul {
2090
  display: grid;
2091
  gap: 7px;
2092
  margin: 0;
2093
  padding: 0;
2094
  list-style: none;
2095
}
2096
2097
.outcomeCard li {
2098
  display: flex;
2099
  align-items: center;
2100
  gap: 9px;
2101
  color: var(--text-muted);
2102
  font-size: 12px;
2103
}
2104
2105
.ratingGrid {
2106
  display: grid;
2107
  grid-template-columns: repeat(2, minmax(0, 1fr));
2108
  gap: 0 24px;
2109
  margin-top: 16px;
2110
  padding-top: 10px;
2111
  border-top: 1px solid var(--accent-line);
2112
}
2113
2114
.progressCard {
2115
  margin: 18px 0;
2116
  padding: 18px 0;
2117
  border: 0;
2118
  border-top: 1px solid var(--border);
2119
  border-radius: 0;
2120
  background: transparent;
2121
}
2122
2123
.progressCardTop {
2124
  display: flex;
2125
  align-items: flex-start;
2126
  justify-content: space-between;
2127
  gap: 16px;
2128
}
2129
2130
.progressCardTop h3 {
2131
  margin: 6px 0 0;
2132
  font-size: 15px;
2133
}
2134
2135
.progressCardTop > strong {
2136
  color: var(--accent);
2137
  font: 600 22px/1 var(--mono);
2138
}
2139
2140
.progressTrack {
2141
  height: 1px;
2142
  margin: 16px 0 13px;
2143
  overflow: hidden;
2144
  border-radius: 0;
2145
  background: var(--border);
2146
}
2147
2148
.progressTrack i {
2149
  display: block;
2150
  height: 100%;
2151
  border-radius: inherit;
2152
  background: var(--accent);
2153
  transition: width 180ms ease;
2154
}
2155
2156
.progressFacts {
2157
  display: flex;
2158
  flex-wrap: wrap;
2159
  gap: 7px;
2160
}
2161
2162
.progressFacts span {
2163
  padding: 5px 0;
2164
  border: 0;
2165
  border-radius: 0;
2166
  color: var(--text-muted);
2167
  background: transparent;
2168
  font-size: 10px;
2169
}
2170
2171
.progressWarning {
2172
  margin: 13px 0 0;
2173
  padding-top: 12px;
2174
  border-top: 1px solid var(--warn-line);
2175
  color: var(--warn);
2176
  font-size: 11px;
2177
}
2178
2179
.journeyNotice {
2180
  margin: 18px 0;
2181
  padding: 13px 0;
2182
  border: 0;
2183
  border-top: 1px solid var(--warn-line);
2184
  border-radius: 0;
2185
  color: var(--text-muted);
2186
  background: transparent;
2187
  font-size: 12px;
2188
}
2189
2190
.journeyTimelineSection {
2191
  padding: 4px 0 24px;
2192
}
2193
2194
.journeyTimelineSection > div:first-child h3 {
2195
  margin: 0;
2196
  font-size: 14px;
2197
}
2198
2199
.journeyTimelineSection > div:first-child small {
2200
  color: var(--text-muted);
2201
  font-size: 11px;
2202
}
2203
2204
.journeyTimeline {
2205
  margin: 18px 0 0;
2206
  padding: 0;
2207
  list-style: none;
2208
}
2209
2210
.journeyTimeline li {
2211
  position: relative;
2212
  display: grid;
2213
  grid-template-columns: 8px minmax(0, 1fr) minmax(8.4em, max-content);
2214
  gap: 12px;
2215
  min-height: 76px;
2216
}
2217
2218
.journeyTimeline li:not(:last-child)::before {
2219
  position: absolute;
2220
  top: 12px;
2221
  bottom: -4px;
2222
  left: 3px;
2223
  width: 1px;
2224
  background: var(--border-strong);
2225
  content: '';
2226
}
2227
2228
.journeyNode {
2229
  z-index: 1;
2230
  width: 7px;
2231
  height: 7px;
2232
  margin-top: 5px;
2233
  border: 0;
2234
  border-radius: 1px;
2235
  background: var(--text-faint);
2236
  box-shadow: none;
2237
}
2238
2239
.journeyNode.good {
2240
  background: var(--live);
2241
}
2242
2243
.journeyNode.warn {
2244
  background: var(--warn);
2245
}
2246
2247
.journeyNode.danger {
2248
  background: var(--danger);
2249
}
2250
2251
.journeyTimeline li > .statusPill {
2252
  justify-self: start;
2253
  width: 100%;
2254
}
2255
2256
.journeyTimeline li > div {
2257
  display: flex;
2258
  min-width: 0;
2259
  flex-direction: column;
2260
  gap: 3px;
2261
  padding-bottom: 18px;
2262
}
2263
2264
.journeyTimeline li > div > span {
2265
  color: var(--text-faint);
2266
  font: 9px/1.3 var(--mono);
2267
  text-transform: uppercase;
2268
}
2269
2270
.journeyTimeline li strong {
2271
  font-size: 12px;
2272
}
2273
2274
.journeyTimeline li p {
2275
  margin: 0;
2276
  color: var(--text-muted);
2277
  font-size: 11px;
2278
  line-height: 1.5;
2279
}
2280
2281
.insightPrinciple {
2282
  display: grid;
2283
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
2284
  gap: 30px;
2285
  align-items: center;
2286
  margin-bottom: 16px;
2287
  padding: 8px 0 22px;
2288
  border: 0;
2289
  border-bottom: 1px solid var(--border);
2290
  border-radius: 0;
2291
  background: transparent;
2292
}
2293
2294
.insightPrinciple h2 {
2295
  margin: 7px 0 5px;
2296
  font-size: 20px;
2297
  letter-spacing: -0.03em;
2298
}
2299
2300
.insightPrinciple p {
2301
  max-width: 680px;
2302
  margin: 0;
2303
  color: var(--text-muted);
2304
  font-size: 13px;
2305
  line-height: 1.55;
2306
}
2307
2308
.insightStats {
2309
  display: grid;
2310
  grid-template-columns: repeat(3, 1fr);
2311
  gap: 8px;
2312
}
2313
2314
.insightStats span {
2315
  display: flex;
2316
  min-width: 0;
2317
  flex-direction: column;
2318
  padding: 12px 0;
2319
  border: 0;
2320
  border-radius: 0;
2321
  color: var(--text-muted);
2322
  background: transparent;
2323
  font-size: 10px;
2324
  text-align: left;
2325
}
2326
2327
.insightStats strong {
2328
  margin-bottom: 3px;
2329
  color: var(--text);
2330
  font: 500 22px/1 var(--mono);
2331
}
2332
2333
.insightGrid {
2334
  display: grid;
2335
  grid-template-columns: repeat(2, minmax(0, 1fr));
2336
  gap: 16px;
2337
  margin-bottom: 16px;
2338
}
2339
2340
.insightGrid > .empty {
2341
  grid-column: 1 / -1;
2342
  border: 0;
2343
  border-radius: 0;
2344
  background: transparent;
2345
}
2346
2347
.profileHead {
2348
  display: flex;
2349
  align-items: flex-start;
2350
  justify-content: space-between;
2351
  gap: 12px;
2352
  margin-bottom: 2px;
2353
}
2354
2355
.profileHead > div {
2356
  display: flex;
2357
  min-width: 0;
2358
  flex-direction: column;
2359
  gap: 3px;
2360
}
2361
2362
.profileHeadCompact {
2363
  align-items: center;
2364
  margin-bottom: 11px;
2365
}
2366
2367
.profileHeadCompact > small {
2368
  color: var(--text-faint);
2369
  font: 10px/1.4 var(--mono);
2370
}
2371
2372
.sampleBadge {
2373
  padding: 4px 7px;
2374
  border-radius: 999px;
2375
  color: var(--accent);
2376
  background: var(--accent-dim);
2377
  font: 9px/1.2 var(--mono);
2378
  white-space: nowrap;
2379
}
2380
2381
:root[data-theme='light'] .sampleBadge {
2382
  color: #c43a22;
2383
}
2384
2385
:root[data-theme='light'] .account > span {
2386
  color: var(--accent-ink);
2387
}
2388
2389
:root[data-theme='light'] .profileDelta b.positive {
2390
  color: #c43a22;
2391
}
2392
2393
:root[data-theme='light'] .profileDelta b.negative {
2394
  color: #a33d2e;
2395
}
2396
2397
.profileEvidenceLine {
2398
  margin-bottom: 11px;
2399
  color: var(--text-faint);
2400
  font: 10px/1.4 var(--mono);
2401
}
2402
2403
.profileDelta {
2404
  margin-top: 14px;
2405
  padding-top: 12px;
2406
  border-top: 1px solid var(--border);
2407
}
2408
2409
.profileDelta > div {
2410
  display: flex;
2411
  flex-wrap: wrap;
2412
  gap: 5px;
2413
  margin-top: 7px;
2414
}
2415
2416
.profileDelta b {
2417
  padding: 4px 6px;
2418
  border-radius: 4px;
2419
  color: var(--text-muted);
2420
  background: var(--bg-well);
2421
  font: 9px/1.2 var(--mono);
2422
}
2423
2424
.profileDelta b.positive {
2425
  color: var(--accent);
2426
}
2427
2428
.profileDelta b.negative {
2429
  color: var(--danger);
2430
}
2431
2432
.learningDecisionList {
2433
  display: grid;
2434
}
2435
2436
.learningDecisionList article {
2437
  display: grid;
2438
  grid-template-columns: auto minmax(0, 1fr);
2439
  gap: 12px;
2440
  padding: 14px 0;
2441
  border-bottom: 1px solid var(--border);
2442
}
2443
2444
.learningDecisionList article:last-child {
2445
  border-bottom: 0;
2446
}
2447
2448
.learningDecisionList article > div {
2449
  display: flex;
2450
  min-width: 0;
2451
  flex-direction: column;
2452
  gap: 3px;
2453
}
2454
2455
.learningDecisionList strong {
2456
  overflow: hidden;
2457
  font: 11px/1.4 var(--mono);
2458
  text-overflow: ellipsis;
2459
}
2460
2461
.learningDecisionList small {
2462
  color: var(--text-muted);
2463
  font-size: 10px;
2464
}
2465
2466
.learningDecisionList p {
2467
  margin: 2px 0 0;
2468
  color: var(--text-muted);
2469
  font-size: 11px;
2470
}
2471
2472
@media (prefers-reduced-motion: reduce) {
2473
  .spinner,
2474
  .toggle span,
2475
  .liveDot,
2476
  .appMain > * {
2477
    animation: none;
2478
    transition: none;
2479
  }
2480
2481
  .primary {
2482
    transition: none;
2483
  }
2484
2485
  .primary:hover {
2486
    transform: none;
2487
  }
2488
}
2489
2490
/* Authenticated product — same protocol chrome as the landing */
2491
html:has(.appInset) {
2492
  scrollbar-gutter: stable;
2493
  scrollbar-width: thin;
2494
  scrollbar-color: color-mix(in srgb, var(--accent) 70%, #8a6a62)
2495
    color-mix(in srgb, var(--bg) 92%, var(--border));
2496
}
2497
2498
html:has(.appInset)::-webkit-scrollbar,
2499
html:has(.appInset) body::-webkit-scrollbar {
2500
  width: 10px;
2501
}
2502
2503
html:has(.appInset)::-webkit-scrollbar-track,
2504
html:has(.appInset) body::-webkit-scrollbar-track {
2505
  background: var(--bg);
2506
  box-shadow: inset 1px 0 0 var(--border);
2507
}
2508
2509
html:has(.appInset)::-webkit-scrollbar-thumb,
2510
html:has(.appInset) body::-webkit-scrollbar-thumb {
2511
  background: color-mix(in srgb, var(--accent) 58%, #6e534c);
2512
  border: 3px solid var(--bg);
2513
  background-clip: padding-box;
2514
}
2515
2516
[data-slot='sidebar-wrapper'] {
2517
  background: var(--bg);
2518
}
2519
2520
[data-slot='sidebar'] {
2521
  border-right: 1px solid var(--border);
2522
  background: var(--bg) !important;
2523
}
2524
2525
[data-slot='sidebar-inner'] {
2526
  border: 0 !important;
2527
  border-radius: 0 !important;
2528
  background: var(--bg) !important;
2529
  box-shadow: none !important;
2530
}
2531
2532
[data-slot='sidebar-header'] {
2533
  padding: 16px 12px 14px;
2534
  border-bottom: 1px solid var(--border);
2535
}
2536
2537
[data-slot='sidebar-content'] {
2538
  padding: 10px 8px;
2539
}
2540
2541
[data-slot='sidebar-footer'] {
2542
  padding: 8px;
2543
  border-top: 1px solid var(--border);
2544
}
2545
2546
.sidebarBrandMark {
2547
  display: block;
2548
  width: 18px;
2549
  height: 18px;
2550
  flex: none;
2551
  color: var(--accent);
2552
}
2553
2554
.sidebarBrandText {
2555
  min-width: 0;
2556
  font-family: var(--mono);
2557
  font-size: 13px;
2558
  font-weight: 500;
2559
  letter-spacing: 0.04em;
2560
  text-transform: lowercase;
2561
}
2562
2563
.sidebarBrandText strong {
2564
  font-weight: 500;
2565
}
2566
2567
[data-sidebar='menu-button'] {
2568
  min-height: 34px;
2569
  border: 0 !important;
2570
  border-radius: 0 !important;
2571
  color: var(--text-muted);
2572
  font-family: var(--mono);
2573
  font-size: 12px;
2574
  letter-spacing: 0.04em;
2575
  text-transform: lowercase;
2576
  background: transparent !important;
2577
  box-shadow: none !important;
2578
}
2579
2580
[data-sidebar='menu-button']:hover {
2581
  color: var(--text);
2582
  background: transparent !important;
2583
}
2584
2585
[data-sidebar='menu-button'][data-active='true'] {
2586
  color: var(--text) !important;
2587
  background: transparent !important;
2588
  box-shadow: inset 2px 0 0 var(--accent);
2589
}
2590
2591
[data-sidebar='menu-button'][data-active='true'] svg {
2592
  color: var(--accent);
2593
}
2594
2595
[data-sidebar='menu-badge'] {
2596
  min-width: 16px;
2597
  height: 16px;
2598
  border: 0;
2599
  border-radius: 0;
2600
  color: var(--accent) !important;
2601
  background: transparent !important;
2602
  font: 500 10px/1 var(--mono);
2603
}
2604
2605
.appInset {
2606
  min-width: 0;
2607
  background: var(--bg) !important;
2608
}
2609
2610
.appTopbar {
2611
  position: sticky;
2612
  top: 0;
2613
  z-index: 8;
2614
  min-height: 52px;
2615
  padding: 0 28px;
2616
  border-bottom: 1px solid var(--border);
2617
  background: color-mix(in srgb, var(--bg) 88%, transparent);
2618
  backdrop-filter: blur(12px);
2619
  -webkit-backdrop-filter: blur(12px);
2620
}
2621
2622
.appTopbar [data-sidebar='trigger'] {
2623
  border: 1px solid var(--border);
2624
  border-radius: 0;
2625
  background: transparent;
2626
}
2627
2628
.commandTrigger {
2629
  height: 34px !important;
2630
  border-color: var(--border) !important;
2631
  border-radius: 0 !important;
2632
  background: transparent !important;
2633
  box-shadow: none !important;
2634
}
2635
2636
.appMain {
2637
  width: min(100%, 1120px);
2638
  max-width: none;
2639
  margin: 0 auto;
2640
  padding: 32px 32px 80px;
2641
}
2642
2643
.previewBanner {
2644
  width: fit-content;
2645
  margin-bottom: 18px;
2646
  padding: 0;
2647
  border: 0;
2648
  border-radius: 0;
2649
  color: var(--text-faint);
2650
  background: transparent;
2651
  font: 400 11px/1.4 var(--mono);
2652
  letter-spacing: 0.06em;
2653
  text-transform: lowercase;
2654
}
2655
2656
.previewBanner::before {
2657
  content: none;
2658
}
2659
2660
.pageKicker {
2661
  display: flex;
2662
  align-items: center;
2663
  gap: 10px;
2664
  margin: 0 0 10px;
2665
  color: var(--text-faint);
2666
  font-family: var(--mono);
2667
  font-size: 11px;
2668
  letter-spacing: 0.08em;
2669
  text-transform: lowercase;
2670
}
2671
2672
.pageKicker > span {
2673
  color: var(--accent);
2674
}
2675
2676
.pageHead {
2677
  min-height: 0;
2678
  padding: 0 0 24px;
2679
  border-bottom: 1px solid var(--border);
2680
}
2681
2682
.pageHead h1 {
2683
  font-size: clamp(28px, 3.4vw, 36px);
2684
  font-weight: 500;
2685
  letter-spacing: -0.04em;
2686
}
2687
2688
.pageHead p.lede {
2689
  margin-top: 8px;
2690
  font-size: 14px;
2691
}
2692
2693
.primary,
2694
.secondary,
2695
.dangerButton {
2696
  min-height: 34px;
2697
  border-radius: 0;
2698
  font-weight: 500;
2699
  letter-spacing: 0.04em;
2700
  text-transform: lowercase;
2701
  box-shadow: none;
2702
}
2703
2704
.primary {
2705
  box-shadow: none;
2706
}
2707
2708
.primary:hover {
2709
  transform: none;
2710
  box-shadow: none;
2711
}
2712
2713
.primary:active,
2714
.secondary:active,
2715
.dangerButton:active {
2716
  transform: translateY(1px);
2717
}
2718
2719
.secondary {
2720
  background: transparent;
2721
}
2722
2723
.attentionBanner,
2724
.readiness {
2725
  min-height: 0;
2726
  margin-top: 16px;
2727
  padding: 14px 0;
2728
  border: 0;
2729
  border-bottom: 1px solid var(--border);
2730
  border-radius: 0;
2731
  background: transparent;
2732
  box-shadow: none;
2733
}
2734
2735
.attentionBanner {
2736
  border-color: transparent;
2737
  border-bottom-color: var(--accent-line);
2738
  background: transparent;
2739
}
2740
2741
.attentionBanner:hover {
2742
  border-color: transparent;
2743
  border-bottom-color: var(--accent);
2744
  transform: none;
2745
}
2746
2747
.statusIndex {
2748
  min-width: 1.6em;
2749
}
2750
2751
.metrics {
2752
  gap: 24px;
2753
  margin: 22px 0 8px;
2754
}
2755
2756
.metric {
2757
  min-height: 0;
2758
  padding: 4px 0;
2759
  border: 0;
2760
  border-radius: 0;
2761
  background: transparent;
2762
  box-shadow: none;
2763
}
2764
2765
.metric:hover {
2766
  border-color: transparent;
2767
  transform: none;
2768
}
2769
2770
.metric::before {
2771
  position: static;
2772
  width: 16px;
2773
  height: 1px;
2774
  margin: 0 0 10px;
2775
  border-radius: 0;
2776
  box-shadow: none;
2777
  background: var(--accent);
2778
}
2779
2780
.metric.warn::before {
2781
  background: var(--warn);
2782
  box-shadow: none;
2783
}
2784
2785
.metric > strong {
2786
  margin: 0 0 6px;
2787
  font-size: 28px;
2788
}
2789
2790
.panel,
2791
.setupRequests,
2792
.agentCard,
2793
.settingsCard,
2794
.insightPrinciple,
2795
.journeyDetail {
2796
  border: 0;
2797
  border-radius: 0;
2798
  background: transparent;
2799
  box-shadow: none;
2800
}
2801
2802
.panel {
2803
  padding: 8px 0 0;
2804
}
2805
2806
.panelHead {
2807
  padding-bottom: 12px;
2808
}
2809
2810
.panelHead h2,
2811
.panelKicker {
2812
  display: flex;
2813
  align-items: center;
2814
  gap: 8px;
2815
  margin: 0;
2816
  color: var(--text);
2817
  font: 500 12px/1.4 var(--mono);
2818
  letter-spacing: 0.06em;
2819
  text-transform: lowercase;
2820
}
2821
2822
.panelKicker > span,
2823
.panelHead h2 > span {
2824
  color: var(--accent);
2825
}
2826
2827
.panelHead p {
2828
  margin: 6px 0 0;
2829
}
2830
2831
.setupRequests > div:first-child h2 {
2832
  margin: 8px 0 4px;
2833
  font-size: 22px;
2834
  font-weight: 500;
2835
  letter-spacing: -0.03em;
2836
}
2837
2838
.setupRequests {
2839
  margin: 18px 0;
2840
  padding: 8px 0;
2841
}
2842
2843
.setupRequest {
2844
  padding: 14px 0;
2845
  border-bottom: 1px solid var(--border);
2846
}
2847
2848
.historyRow {
2849
  margin: 0;
2850
  padding: 12px 0;
2851
  border-radius: 0;
2852
}
2853
2854
.historyRow:hover {
2855
  background: transparent;
2856
  transform: none;
2857
}
2858
2859
.agentGrid,
2860
.insightGrid {
2861
  gap: 16px;
2862
}
2863
2864
.agentCard {
2865
  min-height: 0;
2866
  padding: 18px 0;
2867
  border-top: 1px solid var(--border);
2868
}
2869
2870
.agentCard:hover {
2871
  border-color: var(--border);
2872
  box-shadow: none;
2873
  transform: none;
2874
}
2875
2876
.runtimeBox,
2877
.accessTokenBox,
2878
.notice,
2879
.successBanner,
2880
.conversationInsights,
2881
.outcomeCard,
2882
.insightStats span {
2883
  border-radius: 0;
2884
}
2885
2886
.runtimeBox input,
2887
.automationForm input,
2888
.automationForm select,
2889
.setting input,
2890
.setting select,
2891
.searchField,
2892
.providerForm input,
2893
.providerForm select,
2894
.providerForm textarea,
2895
.replyBox textarea {
2896
  border-radius: 0;
2897
}
2898
2899
.settingsCard {
2900
  padding: 0;
2901
}
2902
2903
.connectionTypePicker button {
2904
  border-radius: 0;
2905
  background: transparent;
2906
}
2907
2908
.threadList,
2909
.conversationDetail,
2910
.journeyDetail {
2911
  padding: 0;
2912
  border: 0;
2913
  border-radius: 0;
2914
  background: transparent;
2915
  box-shadow: none;
2916
}
2917
2918
.threadList > button,
2919
.journeyList > button {
2920
  border-radius: 0;
2921
}
2922
2923
[data-slot='dialog-content'],
2924
[data-slot='dropdown-menu-content'],
2925
[data-slot='command-dialog-content'] {
2926
  border-color: var(--border-strong) !important;
2927
  border-radius: 0 !important;
2928
  background: var(--popover) !important;
2929
  box-shadow: none !important;
2930
}
2931
2932
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] {
2933
  text-transform: lowercase;
2934
}
2935
2936
[data-slot='sidebar-footer'] [data-sidebar='menu-button'] span {
2937
  font-family: var(--mono);
2938
  font-size: 11px;
2939
  letter-spacing: 0.03em;
2940
}
2941
2942
.appInset [data-slot='tabs-list'],
2943
.appInset [data-slot='tabs-trigger'] {
2944
  border-radius: 0 !important;
2945
}
2946
2947
.appInset [data-slot='tabs-trigger'] {
2948
  font-family: var(--mono);
2949
  font-size: 11px;
2950
  letter-spacing: 0.06em;
2951
  text-transform: lowercase;
2952
  background: transparent !important;
2953
  box-shadow: none !important;
2954
}
2955
2956
.appInset [data-slot='tabs-list'][data-variant='line'] [data-slot='tabs-trigger'][data-state='active']::after {
2957
  height: 1px;
2958
  background: var(--accent);
2959
}
2960
2961
.textButton {
2962
  font-weight: 500;
2963
  letter-spacing: 0.04em;
2964
  text-transform: lowercase;
2965
}
2966
2967
.insightPrinciple .pageKicker {
2968
  margin-bottom: 8px;
2969
}
2970
2971
.setupRequests > div:first-child .pageKicker {
2972
  margin-bottom: 8px;
2973
}
2974
2975
.connectionTypePicker button {
2976
  font-weight: 500;
2977
  letter-spacing: 0.02em;
2978
}
2979
2980
@media (max-width: 840px) {
2981
  .appTopbar {
2982
    min-height: 48px;
2983
    padding: 0 16px;
2984
  }
2985
2986
  .appMain {
2987
    padding: 20px 16px 64px;
2988
  }
2989
2990
  .pageHead {
2991
    min-height: 0;
2992
  }
2993
}
2994
2995
@media (max-width: 980px) {
2996
  .contentGrid,
2997
  .connectLayout,
2998
  .conversationLayout,
2999
  .journeyLayout,
3000
  .insightPrinciple {
3001
    grid-template-columns: 1fr;
3002
  }
3003
3004
  .journeyList {
3005
    grid-template-columns: repeat(2, minmax(0, 1fr));
3006
  }
3007
3008
  .loginPage {
3009
    grid-template-columns: 1fr;
3010
  }
3011
3012
  .loginPitch {
3013
    display: none;
3014
  }
3015
3016
  .loginCard {
3017
    min-height: 100vh;
3018
    border: 0;
3019
  }
3020
3021
  .metrics {
3022
    grid-template-columns: 1fr 1fr;
3023
  }
3024
3025
  .agentGrid {
3026
    grid-template-columns: 1fr;
3027
  }
3028
3029
  .insightGrid {
3030
    grid-template-columns: 1fr;
3031
  }
3032
}
3033
3034
@media (max-width: 840px) {
3035
  .appTopbar {
3036
    min-height: 48px;
3037
    padding: 0 16px;
3038
  }
3039
3040
  .appMain {
3041
    padding: 16px 16px 64px;
3042
  }
3043
3044
  .pageHead {
3045
    align-items: flex-start;
3046
    flex-direction: column;
3047
  }
3048
3049
  .setting {
3050
    grid-template-columns: 1fr;
3051
    gap: 12px;
3052
  }
3053
3054
  .connectionTypePicker,
3055
  .providerForm {
3056
    grid-template-columns: 1fr;
3057
  }
3058
3059
  .providerSubmit {
3060
    align-items: flex-start;
3061
    flex-direction: column;
3062
  }
3063
3064
  .tokenList > div {
3065
    align-items: flex-start;
3066
    flex-direction: column;
3067
  }
3068
3069
  .toggle {
3070
    margin-left: 0;
3071
  }
3072
3073
  .endpoint {
3074
    flex-direction: column;
3075
  }
3076
3077
  .readiness,
3078
  .attentionBanner,
3079
  .setupRequest {
3080
    align-items: flex-start;
3081
    flex-direction: column;
3082
  }
3083
3084
  .readiness > button,
3085
  .attentionBanner,
3086
  .decisionButtons {
3087
    width: 100%;
3088
  }
3089
3090
  .decisionButtons button {
3091
    flex: 1;
3092
  }
3093
3094
  .loginCard {
3095
    padding: 28px 20px;
3096
  }
3097
3098
  .historyRow > b {
3099
    display: none;
3100
  }
3101
3102
  .journeyList {
3103
    grid-template-columns: 1fr;
3104
  }
3105
3106
  .journeySummaryGrid,
3107
  .ratingGrid,
3108
  .insightStats {
3109
    grid-template-columns: 1fr;
3110
  }
3111
3112
  .journeySummaryGrid section {
3113
    border-right: 0;
3114
    border-bottom: 1px solid var(--border);
3115
  }
3116
3117
  .journeySummaryGrid section:last-child {
3118
    border-bottom: 0;
3119
  }
3120
3121
  .journeyTimeline li {
3122
    grid-template-columns: 8px minmax(0, 1fr);
3123
  }
3124
3125
  .journeyTimeline li > .statusPill {
3126
    grid-column: 2;
3127
    margin-top: -12px;
3128
    margin-bottom: 16px;
3129
  }
3130
}