viveworker 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/README.md +33 -4
  2. package/package.json +7 -3
  3. package/scripts/lib/remote-pairing/README.md +164 -0
  4. package/scripts/lib/remote-pairing/_browser-bundle-entry.mjs +86 -0
  5. package/scripts/lib/remote-pairing/audit.mjs +122 -0
  6. package/scripts/lib/remote-pairing/bridge-relay-client.mjs +737 -0
  7. package/scripts/lib/remote-pairing/control.mjs +156 -0
  8. package/scripts/lib/remote-pairing/envelope.mjs +224 -0
  9. package/scripts/lib/remote-pairing/http-dispatch.mjs +530 -0
  10. package/scripts/lib/remote-pairing/keys-core.mjs +110 -0
  11. package/scripts/lib/remote-pairing/keys.mjs +181 -0
  12. package/scripts/lib/remote-pairing/noise.mjs +436 -0
  13. package/scripts/lib/remote-pairing/orchestrator.mjs +356 -0
  14. package/scripts/lib/remote-pairing/pairings.mjs +446 -0
  15. package/scripts/lib/remote-pairing/rpc.mjs +381 -0
  16. package/scripts/moltbook-scout-auto.sh +16 -8
  17. package/scripts/share-cli.mjs +14 -130
  18. package/scripts/viveworker-bridge.mjs +1324 -103
  19. package/scripts/viveworker.mjs +27 -6
  20. package/web/app.css +634 -9
  21. package/web/app.js +1731 -187
  22. package/web/i18n.js +187 -9
  23. package/web/index.html +32 -2
  24. package/web/remote-pairing/api-router.js +873 -0
  25. package/web/remote-pairing/keys.js +237 -0
  26. package/web/remote-pairing/pairing-state.js +313 -0
  27. package/web/remote-pairing/rpc-client.js +765 -0
  28. package/web/remote-pairing/transport.js +804 -0
  29. package/web/remote-pairing/wake.js +149 -0
  30. package/web/remote-pairing-test.html +400 -0
  31. package/web/remote-pairing.bundle.js +3 -0
  32. package/web/remote-pairing.bundle.js.LEGAL.txt +15 -0
  33. package/web/remote-pairing.bundle.js.map +7 -0
  34. package/web/sw.js +190 -20
package/web/app.css CHANGED
@@ -1,5 +1,7 @@
1
1
  :root {
2
2
  color-scheme: dark;
3
+ --visual-viewport-left: 0px;
4
+ --visual-viewport-width: 100vw;
3
5
  --font-ui: "Avenir Next", "SF Pro Rounded", "SF Pro Text", "Helvetica Neue", sans-serif;
4
6
  --bg: #091015;
5
7
  --bg-soft: #0f1921;
@@ -36,7 +38,10 @@ html {
36
38
  width: 100%;
37
39
  max-width: 100%;
38
40
  overflow-x: hidden;
41
+ overscroll-behavior-x: none;
39
42
  background: var(--bg);
43
+ -webkit-text-size-adjust: 100%;
44
+ text-size-adjust: 100%;
40
45
  }
41
46
 
42
47
  body {
@@ -46,6 +51,7 @@ body {
46
51
  margin: 0;
47
52
  min-height: 100vh;
48
53
  overflow-x: hidden;
54
+ overscroll-behavior-x: none;
49
55
  font-family: var(--font-ui);
50
56
  color: var(--text);
51
57
  background:
@@ -59,7 +65,9 @@ a {
59
65
  }
60
66
 
61
67
  button,
62
- input {
68
+ input,
69
+ textarea,
70
+ select {
63
71
  font: inherit;
64
72
  }
65
73
 
@@ -70,14 +78,16 @@ code {
70
78
  }
71
79
 
72
80
  #app {
73
- width: 100%;
74
- max-width: 100%;
81
+ width: 100vw;
82
+ max-width: 100vw;
75
83
  min-width: 0;
84
+ overflow-x: clip;
76
85
  }
77
86
 
78
87
  .app-shell {
79
- width: 100%;
80
- max-width: 100%;
88
+ width: 100vw;
89
+ max-width: 100vw;
90
+ min-width: 0;
81
91
  min-height: 100vh;
82
92
  overflow-x: clip;
83
93
  padding:
@@ -87,6 +97,14 @@ code {
87
97
  1rem;
88
98
  }
89
99
 
100
+ @supports (width: 100dvw) {
101
+ #app,
102
+ .app-shell {
103
+ width: 100dvw;
104
+ max-width: 100dvw;
105
+ }
106
+ }
107
+
90
108
  .app-shell--mobile:not(.app-shell--detail)::after {
91
109
  content: "";
92
110
  position: fixed;
@@ -111,6 +129,9 @@ code {
111
129
  }
112
130
 
113
131
  .app-shell--detail {
132
+ width: 100%;
133
+ max-width: 100%;
134
+ min-width: 0;
114
135
  padding-bottom: max(1rem, env(safe-area-inset-bottom));
115
136
  }
116
137
 
@@ -418,6 +439,7 @@ code {
418
439
  .settings-stack,
419
440
  .stack,
420
441
  .choice-stack {
442
+ width: 100%;
421
443
  display: grid;
422
444
  gap: 1rem;
423
445
  min-width: 0;
@@ -442,6 +464,7 @@ code {
442
464
  }
443
465
 
444
466
  .screen-block--detail {
467
+ width: 100%;
445
468
  min-height: calc(100dvh - 8rem);
446
469
  }
447
470
 
@@ -968,6 +991,58 @@ code {
968
991
  overflow-wrap: anywhere;
969
992
  }
970
993
 
994
+ .settings-row__value--enabled,
995
+ .settings-info-row__value--enabled {
996
+ display: inline-flex;
997
+ align-items: center;
998
+ justify-content: center;
999
+ min-height: 1.62rem;
1000
+ padding: 0.16rem 0.52rem;
1001
+ border-radius: 999px;
1002
+ font-size: 0.74rem;
1003
+ font-weight: 800;
1004
+ letter-spacing: 0.04em;
1005
+ line-height: 1;
1006
+ text-transform: uppercase;
1007
+ white-space: nowrap;
1008
+ }
1009
+
1010
+ .settings-row__value--enabled,
1011
+ .settings-info-row__value--enabled {
1012
+ border: 1px solid rgba(112, 202, 157, 0.24);
1013
+ background: rgba(112, 202, 157, 0.12);
1014
+ color: rgba(185, 239, 208, 0.96);
1015
+ }
1016
+
1017
+ .settings-row__value--disabled,
1018
+ .settings-info-row__value--disabled {
1019
+ color: rgba(231, 243, 250, 0.68);
1020
+ }
1021
+
1022
+ .settings-row__value--attention,
1023
+ .settings-info-row__value--attention {
1024
+ display: inline-flex;
1025
+ align-items: center;
1026
+ justify-content: center;
1027
+ min-height: 1.62rem;
1028
+ padding: 0.16rem 0.52rem;
1029
+ border-radius: 999px;
1030
+ border: 1px solid rgba(240, 180, 40, 0.26);
1031
+ background: rgba(240, 180, 40, 0.11);
1032
+ color: rgba(255, 220, 140, 0.96);
1033
+ font-size: 0.74rem;
1034
+ font-weight: 800;
1035
+ letter-spacing: 0.04em;
1036
+ line-height: 1;
1037
+ text-transform: uppercase;
1038
+ white-space: nowrap;
1039
+ }
1040
+
1041
+ .settings-row__value--disconnected,
1042
+ .settings-info-row__value--disconnected {
1043
+ color: rgba(205, 220, 231, 0.54);
1044
+ }
1045
+
971
1046
  .settings-info-row--stacked .settings-info-row__value {
972
1047
  text-align: left;
973
1048
  }
@@ -1129,6 +1204,25 @@ code {
1129
1204
  white-space: nowrap;
1130
1205
  }
1131
1206
 
1207
+ .device-card__badges {
1208
+ display: inline-flex;
1209
+ flex-wrap: wrap;
1210
+ justify-content: flex-end;
1211
+ gap: 0.35rem;
1212
+ }
1213
+
1214
+ .device-card__badge--live {
1215
+ border-color: rgba(112, 202, 157, 0.28);
1216
+ background: rgba(112, 202, 157, 0.14);
1217
+ color: #c8f3d9;
1218
+ }
1219
+
1220
+ .device-card__badge--offline {
1221
+ border-color: rgba(156, 181, 197, 0.14);
1222
+ background: rgba(156, 181, 197, 0.1);
1223
+ color: var(--muted);
1224
+ }
1225
+
1132
1226
  .device-card__meta {
1133
1227
  margin-top: 0.85rem;
1134
1228
  display: grid;
@@ -1741,6 +1835,12 @@ code {
1741
1835
  }
1742
1836
 
1743
1837
  @media (max-width: 640px) {
1838
+ input,
1839
+ textarea,
1840
+ select {
1841
+ font-size: 16px;
1842
+ }
1843
+
1744
1844
  .wallet-step-card__header {
1745
1845
  flex-direction: column;
1746
1846
  }
@@ -2609,6 +2709,8 @@ code {
2609
2709
  }
2610
2710
 
2611
2711
  .detail-shell--mobile {
2712
+ width: 100%;
2713
+ max-width: 100%;
2612
2714
  display: grid;
2613
2715
  grid-template-rows: minmax(0, 1fr) auto;
2614
2716
  min-height: calc(100dvh - 5.6rem);
@@ -2622,6 +2724,8 @@ code {
2622
2724
  }
2623
2725
 
2624
2726
  .mobile-detail-screen {
2727
+ width: 100%;
2728
+ max-width: 100%;
2625
2729
  display: flex;
2626
2730
  flex-direction: column;
2627
2731
  gap: 0;
@@ -2629,8 +2733,11 @@ code {
2629
2733
  }
2630
2734
 
2631
2735
  .mobile-detail-scroll {
2736
+ width: 100%;
2737
+ max-width: 100%;
2632
2738
  min-height: 0;
2633
- overflow: auto;
2739
+ overflow-y: auto;
2740
+ overflow-x: hidden;
2634
2741
  -webkit-overflow-scrolling: touch;
2635
2742
  padding: 0 0.42rem 0.78rem;
2636
2743
  display: flex;
@@ -2644,6 +2751,10 @@ code {
2644
2751
  gap: 0.14rem;
2645
2752
  }
2646
2753
 
2754
+ .mobile-detail-screen--has-reply-dock .mobile-detail-scroll--detail {
2755
+ padding-bottom: calc(6rem + env(safe-area-inset-bottom));
2756
+ }
2757
+
2647
2758
  .detail-action-bar {
2648
2759
  display: grid;
2649
2760
  gap: 0.75rem;
@@ -2723,6 +2834,8 @@ code {
2723
2834
  .detail-body {
2724
2835
  overflow-wrap: anywhere;
2725
2836
  width: 100%;
2837
+ min-width: 0;
2838
+ max-width: 100%;
2726
2839
  }
2727
2840
 
2728
2841
  .detail-card--body .detail-body {
@@ -2738,6 +2851,8 @@ code {
2738
2851
  }
2739
2852
 
2740
2853
  .detail-body.markdown {
2854
+ min-width: 0;
2855
+ max-width: 100%;
2741
2856
  line-height: 1.62;
2742
2857
  color: #f3fbff;
2743
2858
  }
@@ -2777,6 +2892,7 @@ code {
2777
2892
  }
2778
2893
 
2779
2894
  .detail-body.markdown pre {
2895
+ max-width: 100%;
2780
2896
  overflow: auto;
2781
2897
  padding: 0.82rem 0.88rem;
2782
2898
  border: 1px solid var(--line);
@@ -2785,6 +2901,7 @@ code {
2785
2901
  }
2786
2902
 
2787
2903
  .detail-body.markdown table {
2904
+ max-width: 100%;
2788
2905
  display: block;
2789
2906
  overflow-x: auto;
2790
2907
  }
@@ -2803,10 +2920,17 @@ code {
2803
2920
  align-items: stretch;
2804
2921
  gap: 0.52rem;
2805
2922
  width: 100%;
2923
+ min-width: 0;
2924
+ max-width: 100%;
2806
2925
  align-self: start;
2807
2926
  padding: 0.68rem 0.78rem;
2808
2927
  }
2809
2928
 
2929
+ .detail-card > * {
2930
+ min-width: 0;
2931
+ max-width: 100%;
2932
+ }
2933
+
2810
2934
  .detail-card--mobile {
2811
2935
  padding: 0.42rem 0.5rem;
2812
2936
  gap: 0.4rem;
@@ -3417,6 +3541,8 @@ code {
3417
3541
  .reply-composer {
3418
3542
  display: grid;
3419
3543
  gap: 0.78rem;
3544
+ min-width: 0;
3545
+ max-width: 100%;
3420
3546
  }
3421
3547
 
3422
3548
  .reply-composer--readonly {
@@ -3425,6 +3551,8 @@ code {
3425
3551
  .reply-composer__copy {
3426
3552
  display: grid;
3427
3553
  gap: 0.34rem;
3554
+ min-width: 0;
3555
+ max-width: 100%;
3428
3556
  }
3429
3557
 
3430
3558
  .reply-composer__title {
@@ -3441,6 +3569,8 @@ code {
3441
3569
  .reply-composer__form {
3442
3570
  display: grid;
3443
3571
  gap: 0.8rem;
3572
+ min-width: 0;
3573
+ max-width: 100%;
3444
3574
  }
3445
3575
 
3446
3576
  .reply-composer__context {
@@ -3498,6 +3628,7 @@ code {
3498
3628
  }
3499
3629
  .reply-composer__textarea {
3500
3630
  width: 100%;
3631
+ min-width: 0;
3501
3632
  min-height: 14rem;
3502
3633
  padding: 0.85rem 0.95rem;
3503
3634
  border-radius: 14px;
@@ -3505,7 +3636,7 @@ code {
3505
3636
  background: rgba(7, 12, 16, 0.96);
3506
3637
  color: var(--text);
3507
3638
  font: inherit;
3508
- font-size: 1rem;
3639
+ font-size: max(1rem, 16px);
3509
3640
  line-height: 1.55;
3510
3641
  resize: vertical;
3511
3642
  }
@@ -3515,6 +3646,166 @@ code {
3515
3646
  border-color: var(--accent, #6ea8ff);
3516
3647
  }
3517
3648
 
3649
+ .reply-dock {
3650
+ position: fixed;
3651
+ left: calc(var(--visual-viewport-left, 0px) + max(1rem, env(safe-area-inset-left)));
3652
+ bottom: calc(0.88rem + env(safe-area-inset-bottom));
3653
+ z-index: 36;
3654
+ width: calc(var(--visual-viewport-width, 100vw) - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
3655
+ max-width: calc(var(--visual-viewport-width, 100vw) - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)));
3656
+ pointer-events: none;
3657
+ }
3658
+
3659
+ .reply-dock__button {
3660
+ width: 100%;
3661
+ min-height: 3.45rem;
3662
+ display: grid;
3663
+ align-content: center;
3664
+ justify-items: center;
3665
+ padding: 0.82rem 1rem;
3666
+ border: 1px solid rgba(156, 181, 197, 0.18);
3667
+ border-radius: 20px;
3668
+ background:
3669
+ linear-gradient(180deg, rgba(28, 42, 52, 0.96), rgba(17, 28, 36, 0.96)),
3670
+ rgba(20, 31, 40, 0.94);
3671
+ color: rgba(236, 248, 255, 0.94);
3672
+ box-shadow:
3673
+ 0 18px 44px rgba(0, 0, 0, 0.3),
3674
+ inset 0 1px 0 rgba(255, 255, 255, 0.08);
3675
+ pointer-events: auto;
3676
+ text-align: center;
3677
+ }
3678
+
3679
+ .reply-dock__label {
3680
+ font-size: 1rem;
3681
+ font-weight: 800;
3682
+ line-height: 1.2;
3683
+ }
3684
+
3685
+ .reply-dock__hint {
3686
+ color: rgba(244, 255, 248, 0.74);
3687
+ font-size: 0.78rem;
3688
+ font-weight: 650;
3689
+ line-height: 1.25;
3690
+ }
3691
+
3692
+ .reply-sheet-backdrop {
3693
+ position: fixed;
3694
+ top: 0;
3695
+ right: auto;
3696
+ bottom: 0;
3697
+ left: var(--visual-viewport-left, 0px);
3698
+ width: var(--visual-viewport-width, 100vw);
3699
+ max-width: var(--visual-viewport-width, 100vw);
3700
+ z-index: 44;
3701
+ background: rgba(2, 7, 10, 0.56);
3702
+ -webkit-backdrop-filter: blur(10px);
3703
+ backdrop-filter: blur(10px);
3704
+ animation: reply-sheet-backdrop-in 160ms ease-out both;
3705
+ }
3706
+
3707
+ .reply-sheet {
3708
+ position: fixed;
3709
+ left: var(--visual-viewport-left, 0px);
3710
+ right: auto;
3711
+ bottom: 0;
3712
+ z-index: 45;
3713
+ width: var(--visual-viewport-width, 100vw);
3714
+ min-width: 0;
3715
+ max-width: var(--visual-viewport-width, 100vw);
3716
+ max-height: min(82dvh, 42rem);
3717
+ display: grid;
3718
+ gap: 0.72rem;
3719
+ padding:
3720
+ 0.78rem
3721
+ max(0.9rem, env(safe-area-inset-right))
3722
+ calc(0.9rem + env(safe-area-inset-bottom))
3723
+ max(0.9rem, env(safe-area-inset-left));
3724
+ overflow-x: hidden;
3725
+ overflow-y: auto;
3726
+ -webkit-overflow-scrolling: touch;
3727
+ border: 1px solid rgba(156, 181, 197, 0.18);
3728
+ border-bottom: 0;
3729
+ border-radius: 28px 28px 0 0;
3730
+ background:
3731
+ linear-gradient(180deg, rgba(28, 42, 52, 0.98), rgba(13, 22, 29, 0.98)),
3732
+ var(--panel-strong);
3733
+ box-shadow: 0 -22px 58px rgba(0, 0, 0, 0.42);
3734
+ animation: reply-sheet-in 190ms cubic-bezier(0.2, 0.9, 0.24, 1) both;
3735
+ }
3736
+
3737
+ .reply-sheet > * {
3738
+ min-width: 0;
3739
+ max-width: 100%;
3740
+ }
3741
+
3742
+ .reply-sheet__handle {
3743
+ justify-self: center;
3744
+ width: 2.75rem;
3745
+ height: 0.28rem;
3746
+ border-radius: 999px;
3747
+ background: rgba(205, 220, 231, 0.28);
3748
+ }
3749
+
3750
+ .reply-sheet__close {
3751
+ position: absolute;
3752
+ top: 0.82rem;
3753
+ right: max(0.9rem, env(safe-area-inset-right));
3754
+ width: 2.45rem;
3755
+ height: 2.45rem;
3756
+ display: inline-flex;
3757
+ align-items: center;
3758
+ justify-content: center;
3759
+ border: 1px solid rgba(156, 181, 197, 0.16);
3760
+ border-radius: 999px;
3761
+ background: rgba(255, 255, 255, 0.06);
3762
+ color: rgba(236, 248, 255, 0.9);
3763
+ }
3764
+
3765
+ .reply-sheet__close span {
3766
+ display: block;
3767
+ transform: translateY(-0.03em);
3768
+ font-size: 1.45rem;
3769
+ line-height: 1;
3770
+ }
3771
+
3772
+ .reply-sheet .detail-card--reply {
3773
+ width: 100%;
3774
+ max-width: 100%;
3775
+ margin-top: 0;
3776
+ padding: 0.58rem 0 0;
3777
+ border: 0;
3778
+ border-radius: 0;
3779
+ background: transparent;
3780
+ box-shadow: none;
3781
+ }
3782
+
3783
+ .reply-sheet .reply-composer__description {
3784
+ padding: 0.5rem 0.12rem;
3785
+ }
3786
+
3787
+ .reply-sheet .reply-field__input {
3788
+ min-height: 9rem;
3789
+ }
3790
+
3791
+ @keyframes reply-sheet-in {
3792
+ from {
3793
+ transform: translateY(100%);
3794
+ }
3795
+ to {
3796
+ transform: translateY(0);
3797
+ }
3798
+ }
3799
+
3800
+ @keyframes reply-sheet-backdrop-in {
3801
+ from {
3802
+ opacity: 0;
3803
+ }
3804
+ to {
3805
+ opacity: 1;
3806
+ }
3807
+ }
3808
+
3518
3809
  .a2a-task-response {
3519
3810
  width: 100%;
3520
3811
  padding: 0.85rem 0.95rem;
@@ -3572,11 +3863,15 @@ code {
3572
3863
 
3573
3864
  .reply-field {
3574
3865
  gap: 0.5rem;
3866
+ min-width: 0;
3867
+ max-width: 100%;
3575
3868
  }
3576
3869
 
3577
3870
  .reply-field__shell {
3578
3871
  display: grid;
3579
3872
  gap: 0.52rem;
3873
+ min-width: 0;
3874
+ max-width: 100%;
3580
3875
  padding: 0.82rem 0.9rem 0.76rem;
3581
3876
  border-radius: 18px;
3582
3877
  border: 1px solid var(--line);
@@ -3586,6 +3881,7 @@ code {
3586
3881
  .reply-field__input {
3587
3882
  width: 100%;
3588
3883
  min-height: 7.4rem;
3884
+ min-width: 0;
3589
3885
  padding: 0;
3590
3886
  border-radius: 0;
3591
3887
  border: 0;
@@ -3593,6 +3889,7 @@ code {
3593
3889
  color: var(--text);
3594
3890
  resize: vertical;
3595
3891
  font: inherit;
3892
+ font-size: max(1rem, 16px);
3596
3893
  line-height: 1.58;
3597
3894
  }
3598
3895
 
@@ -3606,9 +3903,11 @@ code {
3606
3903
 
3607
3904
  .reply-field__toolbar {
3608
3905
  display: grid;
3609
- grid-template-columns: auto 1fr;
3906
+ grid-template-columns: auto minmax(0, 1fr);
3610
3907
  align-items: end;
3611
3908
  gap: 0.72rem;
3909
+ min-width: 0;
3910
+ max-width: 100%;
3612
3911
  }
3613
3912
 
3614
3913
  .reply-attachment-trigger {
@@ -3709,6 +4008,7 @@ code {
3709
4008
  align-items: center;
3710
4009
  gap: 0.62rem;
3711
4010
  min-width: 0;
4011
+ max-width: 100%;
3712
4012
  cursor: pointer;
3713
4013
  }
3714
4014
 
@@ -3852,7 +4152,12 @@ code {
3852
4152
  gap: 0.32rem;
3853
4153
  }
3854
4154
 
3855
- .reply-mode-switch--settings .reply-mode-switch__hint {
4155
+ .reply-mode-switch--settings > .reply-mode-switch__copy {
4156
+ grid-column: 1;
4157
+ grid-row: 1;
4158
+ }
4159
+
4160
+ .reply-mode-switch--settings > .reply-mode-switch__hint {
3856
4161
  grid-column: 1;
3857
4162
  grid-row: 1;
3858
4163
  }
@@ -4926,3 +5231,323 @@ button[aria-busy="true"]:not(.is-loading) {
4926
5231
  font-size: 0.85rem;
4927
5232
  color: #ff8a8a;
4928
5233
  }
5234
+
5235
+ /* ─── Remote connection settings ────────────────────────────────────── */
5236
+ .settings-remote-connection {
5237
+ display: grid;
5238
+ gap: 0.8rem;
5239
+ padding: 0.92rem 1rem 1rem;
5240
+ border: 1px solid rgba(112, 202, 157, 0.16);
5241
+ border-radius: 20px;
5242
+ background:
5243
+ linear-gradient(180deg, rgba(47, 143, 103, 0.12), rgba(22, 28, 35, 0.96)),
5244
+ rgba(22, 28, 35, 0.96);
5245
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
5246
+ }
5247
+
5248
+ .settings-remote-connection__header {
5249
+ display: flex;
5250
+ align-items: flex-start;
5251
+ justify-content: space-between;
5252
+ gap: 0.8rem;
5253
+ }
5254
+
5255
+ .settings-remote-connection__copy {
5256
+ display: grid;
5257
+ gap: 0.32rem;
5258
+ min-width: 0;
5259
+ }
5260
+
5261
+ .settings-remote-connection__title {
5262
+ margin: 0;
5263
+ color: var(--text);
5264
+ font-size: 1rem;
5265
+ font-weight: 800;
5266
+ line-height: 1.25;
5267
+ }
5268
+
5269
+ .settings-remote-connection__trust {
5270
+ margin: 0;
5271
+ padding: 0 0.2rem;
5272
+ color: var(--muted);
5273
+ font-size: 0.83rem;
5274
+ line-height: 1.48;
5275
+ }
5276
+
5277
+ .settings-remote-status {
5278
+ display: inline-flex;
5279
+ align-items: center;
5280
+ justify-content: center;
5281
+ flex: 0 0 auto;
5282
+ min-height: 1.85rem;
5283
+ padding: 0.24rem 0.66rem;
5284
+ border-radius: 999px;
5285
+ font-size: 0.72rem;
5286
+ font-weight: 800;
5287
+ letter-spacing: 0.04em;
5288
+ text-transform: uppercase;
5289
+ white-space: nowrap;
5290
+ }
5291
+
5292
+ .settings-remote-status--success {
5293
+ background: rgba(112, 202, 157, 0.16);
5294
+ color: #b9efd0;
5295
+ }
5296
+
5297
+ .settings-remote-status--warning {
5298
+ background: rgba(210, 170, 99, 0.16);
5299
+ color: #f5ddb1;
5300
+ }
5301
+
5302
+ .settings-remote-status--muted {
5303
+ background: rgba(156, 181, 197, 0.12);
5304
+ color: var(--muted);
5305
+ }
5306
+
5307
+ .settings-remote-device-card {
5308
+ gap: 0.55rem;
5309
+ }
5310
+
5311
+ .settings-remote-device-hint {
5312
+ margin-top: 0.78rem;
5313
+ padding: 0;
5314
+ }
5315
+
5316
+ .settings-remote-audit-list {
5317
+ display: grid;
5318
+ gap: 0.55rem;
5319
+ }
5320
+
5321
+ .settings-remote-audit-item {
5322
+ display: grid;
5323
+ grid-template-columns: auto minmax(0, 1fr) auto;
5324
+ align-items: start;
5325
+ gap: 0.65rem;
5326
+ padding: 0.72rem 0.78rem;
5327
+ border: 1px solid rgba(156, 181, 197, 0.08);
5328
+ border-radius: 15px;
5329
+ background: rgba(14, 21, 27, 0.62);
5330
+ }
5331
+
5332
+ .settings-remote-audit-dot {
5333
+ width: 0.58rem;
5334
+ height: 0.58rem;
5335
+ margin-top: 0.32rem;
5336
+ border-radius: 999px;
5337
+ background: rgba(156, 181, 197, 0.44);
5338
+ box-shadow: 0 0 0 4px rgba(156, 181, 197, 0.08);
5339
+ }
5340
+
5341
+ .settings-remote-audit-dot--success {
5342
+ background: #70ca9d;
5343
+ box-shadow: 0 0 0 4px rgba(112, 202, 157, 0.12);
5344
+ }
5345
+
5346
+ .settings-remote-audit-dot--danger {
5347
+ background: #e98686;
5348
+ box-shadow: 0 0 0 4px rgba(233, 134, 134, 0.12);
5349
+ }
5350
+
5351
+ .settings-remote-audit-body {
5352
+ min-width: 0;
5353
+ }
5354
+
5355
+ .settings-remote-audit-title {
5356
+ margin: 0;
5357
+ color: rgba(231, 243, 250, 0.9);
5358
+ font-size: 0.86rem;
5359
+ font-weight: 760;
5360
+ line-height: 1.35;
5361
+ }
5362
+
5363
+ .settings-remote-audit-meta {
5364
+ margin: 0.18rem 0 0;
5365
+ color: var(--muted);
5366
+ font-size: 0.76rem;
5367
+ line-height: 1.42;
5368
+ overflow-wrap: anywhere;
5369
+ }
5370
+
5371
+ .settings-remote-audit-time {
5372
+ color: rgba(173, 194, 207, 0.72);
5373
+ font-size: 0.72rem;
5374
+ line-height: 1.35;
5375
+ white-space: nowrap;
5376
+ }
5377
+
5378
+ .settings-remote-details {
5379
+ padding: 0.92rem 1rem;
5380
+ border: 1px solid rgba(156, 181, 197, 0.08);
5381
+ border-radius: 18px;
5382
+ background: rgba(22, 28, 35, 0.78);
5383
+ }
5384
+
5385
+ .settings-remote-details summary {
5386
+ color: rgba(205, 220, 231, 0.72);
5387
+ font-size: 0.86rem;
5388
+ }
5389
+
5390
+ .settings-remote-details[open] summary {
5391
+ margin-bottom: 0.85rem;
5392
+ color: var(--text);
5393
+ }
5394
+
5395
+ .settings-input-row {
5396
+ display: flex;
5397
+ flex-wrap: wrap;
5398
+ gap: 0.5rem;
5399
+ align-items: center;
5400
+ }
5401
+
5402
+ .settings-input {
5403
+ flex: 1 1 0;
5404
+ min-width: 0;
5405
+ width: 100%;
5406
+ padding: 0.58rem 0.75rem;
5407
+ border-radius: 0.55rem;
5408
+ border: 1px solid var(--line-strong);
5409
+ background: rgba(7, 12, 16, 0.72);
5410
+ color: var(--text);
5411
+ font: inherit;
5412
+ line-height: 1.4;
5413
+ transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
5414
+ }
5415
+
5416
+ .settings-input::placeholder {
5417
+ color: rgba(205, 220, 231, 0.38);
5418
+ }
5419
+
5420
+ .settings-input:focus {
5421
+ outline: none;
5422
+ border-color: rgba(112, 202, 157, 0.55);
5423
+ background: rgba(7, 12, 16, 0.92);
5424
+ box-shadow: 0 0 0 3px rgba(47, 143, 103, 0.22);
5425
+ }
5426
+
5427
+ .settings-input:disabled {
5428
+ opacity: 0.6;
5429
+ cursor: not-allowed;
5430
+ }
5431
+
5432
+ .settings-card {
5433
+ display: grid;
5434
+ gap: 0.6rem;
5435
+ padding: 0.85rem 1rem;
5436
+ border-radius: 14px;
5437
+ background: rgba(255, 255, 255, 0.03);
5438
+ border: 1px solid rgba(156, 181, 197, 0.16);
5439
+ }
5440
+
5441
+ .settings-card + .settings-card {
5442
+ margin-top: 0.55rem;
5443
+ }
5444
+
5445
+ .settings-card__header {
5446
+ display: flex;
5447
+ align-items: flex-start;
5448
+ justify-content: space-between;
5449
+ gap: 0.6rem;
5450
+ }
5451
+
5452
+ .settings-card__title {
5453
+ margin: 0;
5454
+ font-size: 0.95rem;
5455
+ font-weight: 600;
5456
+ color: var(--text);
5457
+ word-break: break-all;
5458
+ }
5459
+
5460
+ .settings-card__subtitle {
5461
+ margin: 0.15rem 0 0 0;
5462
+ font-size: 0.72rem;
5463
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
5464
+ color: var(--muted);
5465
+ word-break: break-all;
5466
+ }
5467
+
5468
+ .settings-card__badge {
5469
+ display: inline-flex;
5470
+ align-items: center;
5471
+ flex-shrink: 0;
5472
+ padding: 0.18rem 0.55rem;
5473
+ border-radius: 999px;
5474
+ font-size: 0.68rem;
5475
+ font-weight: 600;
5476
+ letter-spacing: 0.04em;
5477
+ text-transform: uppercase;
5478
+ }
5479
+
5480
+ .settings-card__badge--live {
5481
+ background: rgba(112, 202, 157, 0.18);
5482
+ color: #b5e6cc;
5483
+ }
5484
+
5485
+ .settings-card__badge--offline {
5486
+ background: rgba(156, 181, 197, 0.14);
5487
+ color: var(--muted);
5488
+ }
5489
+
5490
+ /* "This device" badge — accent border + indigo tint to draw the eye to the
5491
+ row representing the phone the user is currently looking at. Placed
5492
+ alongside the live/offline badge inside .settings-card__badges. */
5493
+ .settings-card__badge--self {
5494
+ background: rgba(120, 144, 240, 0.18);
5495
+ color: #c2cdfa;
5496
+ border: 1px solid rgba(120, 144, 240, 0.45);
5497
+ }
5498
+
5499
+ /* Container for stacked badges — vertical stack on mobile keeps each badge
5500
+ on its own line so labels stay legible regardless of width. */
5501
+ .settings-card__badges {
5502
+ display: inline-flex;
5503
+ flex-wrap: wrap;
5504
+ align-items: flex-end;
5505
+ justify-content: flex-end;
5506
+ gap: 0.35rem;
5507
+ }
5508
+
5509
+ /* Subtle frame upgrade for the "this device" pairing card so the user can
5510
+ spot themselves in the list at a glance. */
5511
+ .settings-card--self {
5512
+ border-color: rgba(120, 144, 240, 0.45);
5513
+ background: rgba(120, 144, 240, 0.07);
5514
+ }
5515
+
5516
+ .settings-card__rows {
5517
+ display: grid;
5518
+ grid-template-columns: max-content 1fr;
5519
+ column-gap: 0.85rem;
5520
+ row-gap: 0.25rem;
5521
+ margin: 0;
5522
+ }
5523
+
5524
+ .settings-card__rows > div {
5525
+ display: contents;
5526
+ }
5527
+
5528
+ .settings-card__rows dt {
5529
+ font-size: 0.7rem;
5530
+ font-weight: 600;
5531
+ letter-spacing: 0.04em;
5532
+ color: var(--muted);
5533
+ text-transform: uppercase;
5534
+ align-self: center;
5535
+ }
5536
+
5537
+ .settings-card__rows dd {
5538
+ margin: 0;
5539
+ font-size: 0.82rem;
5540
+ color: var(--text);
5541
+ align-self: center;
5542
+ }
5543
+
5544
+ .settings-card__actions {
5545
+ display: flex;
5546
+ justify-content: flex-end;
5547
+ gap: 0.5rem;
5548
+ margin-top: 0.15rem;
5549
+ }
5550
+
5551
+ .settings-page-copy.danger {
5552
+ color: #ff8a8a;
5553
+ }