@harborgroup/my-team 0.1.0 → 0.3.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.
@@ -2,22 +2,39 @@
2
2
  color-scheme: light dark;
3
3
  --fg: #1a1a1a;
4
4
  --bg: #ffffff;
5
- --muted: #666;
6
- --border: #ddd;
7
- --accent: #2563eb;
8
- --banner-bg: #fff7e6;
9
- --banner-fg: #7a4a00;
5
+ --bg-subtle: #f7f7f9;
6
+ --muted: #6b6b76;
7
+ --border: #e6e6ea;
8
+ --accent: #5b52f0;
9
+ --accent-hover: #4a41e0;
10
+ --accent-fg: #ffffff;
11
+ --banner-bg: #fff6e0;
12
+ --banner-fg: #7a5200;
13
+ --rail-bg: #100f1c;
14
+ --sidebar-bg: #17162a;
15
+ --sidebar-fg: #cfcfe6;
16
+ --sidebar-muted: #8c8ba8;
17
+ --sidebar-hover: rgba(255, 255, 255, 0.06);
18
+ --sidebar-active: rgba(255, 255, 255, 0.12);
19
+ --rail-muted: #8987a3;
20
+ --online: #29b874;
21
+ --typing: #e8ab2e;
22
+ --offline: #6b6c80;
23
+ --shadow: 0 1px 2px rgba(16, 15, 28, 0.04), 0 8px 24px rgba(16, 15, 28, 0.06);
10
24
  }
11
25
 
12
26
  @media (prefers-color-scheme: dark) {
13
27
  :root {
14
- --fg: #eee;
15
- --bg: #1a1a1a;
16
- --muted: #999;
17
- --border: #333;
18
- --accent: #60a5fa;
19
- --banner-bg: #3a2e0f;
20
- --banner-fg: #f0c979;
28
+ --fg: #eceef3;
29
+ --bg: #14141d;
30
+ --bg-subtle: #191a24;
31
+ --muted: #93939f;
32
+ --border: #2a2b38;
33
+ --accent: #7c74ff;
34
+ --accent-hover: #948dff;
35
+ --banner-bg: #352a0c;
36
+ --banner-fg: #f0c063;
37
+ --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35);
21
38
  }
22
39
  }
23
40
 
@@ -25,106 +42,789 @@
25
42
  box-sizing: border-box;
26
43
  }
27
44
 
45
+ html, body {
46
+ height: 100%;
47
+ }
48
+
28
49
  body {
29
50
  margin: 0;
30
- font-family: system-ui, -apple-system, sans-serif;
51
+ font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
31
52
  color: var(--fg);
32
53
  background: var(--bg);
54
+ font-size: 14.5px;
55
+ -webkit-font-smoothing: antialiased;
33
56
  }
34
57
 
35
- #app {
36
- max-width: 720px;
37
- margin: 0 auto;
38
- padding: 2rem 1rem;
39
- height: 100vh;
40
- display: flex;
41
- flex-direction: column;
58
+ /*
59
+ * Several elements below set an explicit `display` (flex, etc.) that would
60
+ * otherwise beat the UA stylesheet's `[hidden] { display: none }` rule on
61
+ * specificity, silently un-hiding them. This one global override keeps
62
+ * `hidden` authoritative regardless of what any other rule sets.
63
+ */
64
+ [hidden] {
65
+ display: none !important;
42
66
  }
43
67
 
44
- pre {
45
- background: color-mix(in srgb, var(--fg) 6%, transparent);
68
+ #loading,
69
+ #onboarding {
70
+ max-width: 480px;
71
+ margin: 4rem auto;
72
+ padding: 0 1rem;
73
+ text-align: center;
74
+ }
75
+
76
+ #onboarding pre {
77
+ background: var(--bg-subtle);
46
78
  padding: 0.75rem 1rem;
47
- border-radius: 6px;
79
+ border-radius: 8px;
48
80
  overflow-x: auto;
81
+ text-align: left;
49
82
  }
50
83
 
51
- .banner {
52
- background: var(--banner-bg);
53
- color: var(--banner-fg);
54
- padding: 0.6rem 0.9rem;
55
- border-radius: 6px;
84
+ /* ---------- App shell ---------- */
85
+
86
+ #app-shell {
87
+ display: flex;
88
+ flex-direction: column;
89
+ height: 100vh;
90
+ width: 100%;
91
+ }
92
+
93
+ #update-banner {
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
+ gap: 1rem;
98
+ padding: 0.55rem 1.25rem;
99
+ background: var(--accent);
100
+ color: #fff;
56
101
  font-size: 0.85rem;
57
- margin-bottom: 1rem;
102
+ flex-shrink: 0;
58
103
  }
59
104
 
60
- #dashboard {
105
+ .update-banner-actions {
61
106
  display: flex;
62
- flex-direction: column;
107
+ align-items: center;
108
+ gap: 0.5rem;
109
+ }
110
+
111
+ #update-banner-button {
112
+ background: #fff;
113
+ color: var(--accent);
114
+ padding: 0.3rem 0.85rem;
115
+ font-size: 0.82rem;
116
+ }
117
+
118
+ #update-banner-button:hover {
119
+ background: #f0f0ff;
120
+ }
121
+
122
+ #update-banner-dismiss {
123
+ background: transparent;
124
+ color: #fff;
125
+ padding: 0.2rem 0.5rem;
126
+ font-size: 1rem;
127
+ line-height: 1;
128
+ }
129
+
130
+ #update-banner-dismiss:hover {
131
+ background: rgba(255, 255, 255, 0.15);
132
+ }
133
+
134
+ #app-shell-body {
63
135
  flex: 1;
64
136
  min-height: 0;
137
+ display: flex;
65
138
  }
66
139
 
67
- header {
68
- margin-bottom: 0.5rem;
140
+ #icon-rail {
141
+ width: 76px;
142
+ flex-shrink: 0;
143
+ background: var(--rail-bg);
144
+ display: flex;
145
+ flex-direction: column;
146
+ align-items: center;
147
+ padding: 0.9rem 0 0.6rem;
148
+ gap: 0.3rem;
149
+ }
150
+
151
+ #rail-logo {
152
+ width: 34px;
153
+ height: 34px;
154
+ border-radius: 10px;
155
+ background: linear-gradient(135deg, var(--accent), #b45cff);
156
+ margin-bottom: 0.85rem;
157
+ flex-shrink: 0;
158
+ }
159
+
160
+ .rail-item {
161
+ width: 58px;
162
+ display: flex;
163
+ flex-direction: column;
164
+ align-items: center;
165
+ justify-content: center;
166
+ gap: 0.22rem;
167
+ padding: 0.5rem 0.2rem 0.4rem;
168
+ border-radius: 12px;
169
+ background: transparent;
170
+ border: none;
171
+ color: var(--rail-muted);
172
+ font-size: 0.66rem;
173
+ font-weight: 500;
174
+ cursor: pointer;
175
+ transition: background 0.12s ease, color 0.12s ease;
176
+ }
177
+
178
+ .rail-item svg {
179
+ width: 21px;
180
+ height: 21px;
181
+ }
182
+
183
+ .rail-item:hover {
184
+ background: rgba(255, 255, 255, 0.07);
185
+ color: #fff;
186
+ }
187
+
188
+ .rail-item.active {
189
+ background: rgba(255, 255, 255, 0.13);
190
+ color: #fff;
191
+ }
192
+
193
+ /* ---------- Generic page layout ---------- */
194
+
195
+ .page {
196
+ flex: 1;
197
+ min-width: 0;
198
+ display: flex;
199
+ flex-direction: column;
200
+ background: var(--bg);
201
+ }
202
+
203
+ .page-header {
204
+ padding: 1.15rem 1.75rem 1rem;
205
+ border-bottom: 1px solid var(--border);
206
+ flex-shrink: 0;
207
+ }
208
+
209
+ .page-header h1 {
210
+ margin: 0;
211
+ font-size: 1.15rem;
212
+ font-weight: 700;
213
+ letter-spacing: -0.01em;
214
+ }
215
+
216
+ .page-body {
217
+ flex: 1;
218
+ overflow-y: auto;
219
+ padding: 1.75rem;
220
+ }
221
+
222
+ .muted {
69
223
  color: var(--muted);
224
+ }
225
+
226
+ /* ---------- Home page ---------- */
227
+
228
+ .home-hero {
229
+ display: flex;
230
+ flex-direction: column;
231
+ align-items: center;
232
+ justify-content: center;
233
+ text-align: center;
234
+ gap: 0.4rem;
235
+ height: 100%;
236
+ max-width: 420px;
237
+ margin: 0 auto;
238
+ }
239
+
240
+ .avatar-lg {
241
+ width: 60px;
242
+ height: 60px;
243
+ font-size: 1.5rem;
244
+ margin-bottom: 0.4rem;
245
+ }
246
+
247
+ .home-hero h2 {
248
+ margin: 0;
249
+ font-size: 1.4rem;
250
+ font-weight: 700;
251
+ }
252
+
253
+ .home-hero p {
254
+ margin: 0 0 0.75rem;
255
+ line-height: 1.5;
256
+ }
257
+
258
+ /* ---------- Messages page ---------- */
259
+
260
+ #page-messages {
261
+ flex-direction: row;
262
+ }
263
+
264
+ #sidebar {
265
+ width: 260px;
266
+ flex-shrink: 0;
267
+ background: var(--sidebar-bg);
268
+ color: var(--sidebar-fg);
269
+ display: flex;
270
+ flex-direction: column;
271
+ padding: 0.5rem 0;
272
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
273
+ }
274
+
275
+ #workspace-header {
276
+ padding: 0.85rem 1.1rem 0.75rem;
277
+ font-weight: 700;
278
+ font-size: 1rem;
279
+ color: #fff;
280
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
281
+ margin-bottom: 0.5rem;
282
+ letter-spacing: -0.01em;
283
+ }
284
+
285
+ #nav {
286
+ display: flex;
287
+ flex-direction: column;
288
+ padding: 0 0.6rem;
289
+ gap: 0.1rem;
290
+ }
291
+
292
+ .nav-section-label {
293
+ font-size: 0.7rem;
294
+ text-transform: uppercase;
295
+ letter-spacing: 0.05em;
296
+ font-weight: 600;
297
+ color: var(--sidebar-muted);
298
+ padding: 0.9rem 0.6rem 0.35rem;
299
+ }
300
+
301
+ .nav-item {
302
+ display: flex;
303
+ align-items: center;
304
+ gap: 0.6rem;
305
+ width: 100%;
306
+ padding: 0.4rem 0.6rem;
307
+ border: none;
308
+ border-radius: 7px;
309
+ background: transparent;
310
+ color: var(--sidebar-fg);
70
311
  font-size: 0.9rem;
312
+ text-align: left;
313
+ cursor: pointer;
314
+ transition: background 0.12s ease;
315
+ }
316
+
317
+ .nav-item:hover {
318
+ background: var(--sidebar-hover);
319
+ }
320
+
321
+ .nav-item.active {
322
+ background: var(--sidebar-active);
323
+ color: #fff;
324
+ font-weight: 600;
325
+ }
326
+
327
+ .nav-hash {
328
+ color: var(--sidebar-muted);
329
+ font-weight: 600;
330
+ width: 1rem;
331
+ text-align: center;
332
+ }
333
+
334
+ .avatar-wrap {
335
+ position: relative;
336
+ flex-shrink: 0;
337
+ display: inline-flex;
338
+ }
339
+
340
+ .avatar {
341
+ width: 26px;
342
+ height: 26px;
343
+ border-radius: 50%;
344
+ background: linear-gradient(135deg, var(--accent), #b45cff);
345
+ color: #fff;
346
+ font-weight: 700;
347
+ font-size: 0.72rem;
348
+ display: flex;
349
+ align-items: center;
350
+ justify-content: center;
351
+ flex-shrink: 0;
352
+ }
353
+
354
+ #channel-ceo .avatar,
355
+ #typing-indicator .avatar {
356
+ width: 34px;
357
+ height: 34px;
358
+ font-size: 0.92rem;
359
+ }
360
+
361
+ .status-dot {
362
+ position: absolute;
363
+ bottom: -1px;
364
+ right: -1px;
365
+ width: 11px;
366
+ height: 11px;
367
+ border-radius: 50%;
368
+ background: var(--offline);
369
+ border: 2.5px solid var(--sidebar-bg);
370
+ }
371
+
372
+ .status-dot.online {
373
+ background: var(--online);
374
+ }
375
+
376
+ .status-dot.typing {
377
+ background: var(--typing);
378
+ animation: pulse 1.1s ease-in-out infinite;
379
+ }
380
+
381
+ @keyframes pulse {
382
+ 0%, 100% { opacity: 1; }
383
+ 50% { opacity: 0.45; }
384
+ }
385
+
386
+ #main-pane {
387
+ flex: 1;
388
+ min-width: 0;
389
+ display: flex;
390
+ flex-direction: column;
391
+ background: var(--bg);
392
+ }
393
+
394
+ #main-header {
395
+ display: flex;
396
+ align-items: center;
397
+ justify-content: space-between;
398
+ padding: 0.9rem 1.5rem;
399
+ border-bottom: 1px solid var(--border);
400
+ flex-shrink: 0;
401
+ }
402
+
403
+ #header-title-group {
404
+ display: flex;
405
+ flex-direction: column;
406
+ line-height: 1.3;
407
+ }
408
+
409
+ #channel-title {
410
+ font-weight: 700;
411
+ font-size: 1rem;
412
+ letter-spacing: -0.01em;
413
+ }
414
+
415
+ #channel-subtitle {
416
+ font-size: 0.78rem;
417
+ color: var(--muted);
418
+ }
419
+
420
+ #channel-general,
421
+ #channel-ceo {
422
+ flex: 1;
423
+ min-height: 0;
424
+ display: flex;
425
+ flex-direction: column;
426
+ }
427
+
428
+ .empty-state {
429
+ margin: auto;
430
+ color: var(--muted);
431
+ text-align: center;
71
432
  }
72
433
 
73
434
  #messages {
74
435
  flex: 1;
75
436
  overflow-y: auto;
76
- border: 1px solid var(--border);
437
+ padding: 0.5rem 1.5rem 1rem;
438
+ }
439
+
440
+ .msg-row {
441
+ display: flex;
442
+ gap: 0.85rem;
443
+ padding: 0.5rem 0.5rem;
444
+ margin: 0 -0.5rem;
77
445
  border-radius: 8px;
78
- padding: 1rem;
79
- margin-bottom: 1rem;
446
+ transition: background 0.1s ease;
80
447
  }
81
448
 
82
- .msg {
83
- margin-bottom: 0.75rem;
449
+ .msg-row:hover {
450
+ background: var(--bg-subtle);
451
+ }
452
+
453
+ .msg-content {
454
+ flex: 1;
455
+ min-width: 0;
456
+ }
457
+
458
+ .msg-meta {
459
+ font-weight: 700;
460
+ font-size: 0.88rem;
461
+ }
462
+
463
+ .msg-meta .msg-time {
464
+ font-weight: 400;
465
+ color: var(--muted);
466
+ font-size: 0.72rem;
467
+ margin-left: 0.4rem;
468
+ }
469
+
470
+ .msg-text {
84
471
  white-space: pre-wrap;
85
- line-height: 1.4;
472
+ line-height: 1.5;
86
473
  }
87
474
 
88
- .msg.user {
89
- font-weight: 600;
475
+ .msg-text code {
476
+ background: var(--bg-subtle);
477
+ padding: 0.1rem 0.35rem;
478
+ border-radius: 4px;
479
+ font-size: 0.9em;
90
480
  }
91
481
 
92
- .msg.tool {
482
+ .msg-text pre {
483
+ background: var(--bg-subtle);
484
+ padding: 0.75rem 1rem;
485
+ border-radius: 8px;
486
+ overflow-x: auto;
487
+ margin: 0.4rem 0;
488
+ }
489
+
490
+ .msg-text pre code {
491
+ background: none;
492
+ padding: 0;
493
+ }
494
+
495
+ .msg-row.tool .msg-text {
93
496
  color: var(--muted);
94
497
  font-style: italic;
95
498
  font-size: 0.85rem;
96
499
  }
97
500
 
98
- .msg.error {
99
- color: #d33;
501
+ .msg-row.error .msg-text {
502
+ color: #e5484d;
100
503
  }
101
504
 
102
- #chat-form {
505
+ .msg-text-segment:empty {
506
+ display: none;
507
+ }
508
+
509
+ .question-widget-placeholder {
510
+ display: inline-flex;
511
+ align-items: center;
512
+ gap: 0.4rem;
513
+ color: var(--muted);
514
+ font-style: italic;
515
+ font-size: 0.88rem;
516
+ padding: 0.3rem 0;
517
+ }
518
+
519
+ .question-widget {
520
+ border: 1px solid var(--border);
521
+ border-radius: 10px;
522
+ padding: 0.9rem 1rem;
523
+ margin: 0.5rem 0;
524
+ max-width: 420px;
525
+ background: var(--bg-subtle);
526
+ }
527
+
528
+ .question-widget-question {
529
+ font-weight: 600;
530
+ margin-bottom: 0.7rem;
531
+ line-height: 1.4;
532
+ }
533
+
534
+ .question-widget-body {
535
+ display: flex;
536
+ flex-direction: column;
537
+ gap: 0.45rem;
538
+ }
539
+
540
+ .question-widget-option {
541
+ background: var(--bg);
542
+ color: var(--fg);
543
+ border: 1px solid var(--border);
544
+ text-align: left;
545
+ font-weight: 500;
546
+ padding: 0.55rem 0.8rem;
547
+ }
548
+
549
+ .question-widget-option:hover {
550
+ border-color: var(--accent);
551
+ background: color-mix(in srgb, var(--accent) 8%, var(--bg));
552
+ }
553
+
554
+ .question-widget-checkbox-label {
555
+ display: flex;
556
+ align-items: center;
557
+ gap: 0.5rem;
558
+ font-size: 0.92rem;
559
+ cursor: pointer;
560
+ }
561
+
562
+ .question-widget-checkbox-label input {
563
+ width: 16px;
564
+ height: 16px;
565
+ accent-color: var(--accent);
566
+ }
567
+
568
+ .question-widget-submit {
569
+ align-self: flex-start;
570
+ }
571
+
572
+ .question-widget-row {
573
+ display: flex;
574
+ gap: 0.5rem;
575
+ }
576
+
577
+ .question-widget-row input {
578
+ flex: 1;
579
+ padding: 0.5rem 0.7rem;
580
+ border-radius: 7px;
581
+ border: 1px solid var(--border);
582
+ background: var(--bg);
583
+ color: var(--fg);
584
+ font-size: 0.9rem;
585
+ }
586
+
587
+ .question-widget-row input:focus {
588
+ outline: none;
589
+ border-color: var(--accent);
590
+ }
591
+
592
+ .question-widget-row button {
593
+ flex-shrink: 0;
594
+ padding: 0.5rem 0.9rem;
595
+ font-size: 0.85rem;
596
+ }
597
+
598
+ .question-widget-other {
599
+ margin-top: 0.15rem;
600
+ }
601
+
602
+ .question-widget-other-inline {
603
+ padding: 0.5rem 0.7rem;
604
+ border-radius: 7px;
605
+ border: 1px solid var(--border);
606
+ background: var(--bg);
607
+ color: var(--fg);
608
+ font-size: 0.9rem;
609
+ }
610
+
611
+ .question-widget-other-inline:focus {
612
+ outline: none;
613
+ border-color: var(--accent);
614
+ }
615
+
616
+ .question-widget.answered {
617
+ background: transparent;
618
+ }
619
+
620
+ .question-widget-answer {
621
+ color: var(--accent);
622
+ font-weight: 600;
623
+ font-size: 0.92rem;
624
+ }
625
+
626
+ .question-widget-answer::before {
627
+ content: '✓ ';
628
+ }
629
+
630
+ #typing-indicator {
631
+ display: flex;
632
+ align-items: center;
633
+ gap: 0.75rem;
634
+ padding: 0.3rem 1.5rem 0.75rem;
635
+ }
636
+
637
+ .typing-dots {
638
+ display: inline-flex;
639
+ gap: 0.25rem;
640
+ padding: 0.5rem 0.75rem;
641
+ border-radius: 14px;
642
+ background: var(--bg-subtle);
643
+ }
644
+
645
+ .typing-dots i {
646
+ width: 6px;
647
+ height: 6px;
648
+ border-radius: 50%;
649
+ background: var(--muted);
650
+ display: inline-block;
651
+ animation: typing-bounce 1.2s ease-in-out infinite;
652
+ }
653
+
654
+ .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
655
+ .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
656
+
657
+ @keyframes typing-bounce {
658
+ 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
659
+ 30% { transform: translateY(-4px); opacity: 1; }
660
+ }
661
+
662
+ .banner {
663
+ background: var(--banner-bg);
664
+ color: var(--banner-fg);
665
+ padding: 0.6rem 1rem;
666
+ border-radius: 8px;
667
+ font-size: 0.82rem;
668
+ margin: 1rem 1.5rem 0.25rem;
669
+ }
670
+
671
+ #chat-options {
103
672
  display: flex;
104
673
  gap: 0.5rem;
674
+ padding: 0 1.5rem 0.6rem;
675
+ flex-shrink: 0;
676
+ }
677
+
678
+ select {
679
+ padding: 0.35rem 0.6rem;
680
+ border-radius: 7px;
681
+ border: 1px solid var(--border);
682
+ background: var(--bg-subtle);
683
+ color: var(--muted);
684
+ font-size: 0.78rem;
685
+ font-family: inherit;
686
+ cursor: pointer;
687
+ }
688
+
689
+ select:focus {
690
+ outline: none;
691
+ border-color: var(--accent);
692
+ }
693
+
694
+ .msg-model-badge {
695
+ color: var(--muted);
696
+ font-weight: 400;
697
+ font-size: 0.72rem;
698
+ margin-left: 0.4rem;
699
+ }
700
+
701
+ #chat-form {
702
+ display: flex;
703
+ gap: 0.6rem;
704
+ padding: 0.9rem 1.5rem;
705
+ border-top: 1px solid var(--border);
706
+ flex-shrink: 0;
105
707
  }
106
708
 
107
709
  #chat-input {
108
710
  flex: 1;
109
- padding: 0.6rem 0.8rem;
110
- border-radius: 6px;
711
+ padding: 0.65rem 0.9rem;
712
+ border-radius: 8px;
111
713
  border: 1px solid var(--border);
112
714
  background: var(--bg);
113
715
  color: var(--fg);
114
- font-size: 1rem;
716
+ font-size: 0.95rem;
717
+ }
718
+
719
+ #chat-input:focus {
720
+ outline: none;
721
+ border-color: var(--accent);
115
722
  }
116
723
 
117
724
  button {
118
- padding: 0.6rem 1.2rem;
119
- border-radius: 6px;
725
+ padding: 0.6rem 1.1rem;
726
+ border-radius: 8px;
120
727
  border: none;
121
728
  background: var(--accent);
122
- color: white;
123
- font-size: 1rem;
729
+ color: var(--accent-fg);
730
+ font-size: 0.92rem;
731
+ font-weight: 600;
124
732
  cursor: pointer;
733
+ transition: background 0.12s ease;
734
+ }
735
+
736
+ button:hover {
737
+ background: var(--accent-hover);
125
738
  }
126
739
 
127
740
  button:disabled {
128
741
  opacity: 0.5;
129
742
  cursor: default;
130
743
  }
744
+
745
+ /* ---------- Profile page ---------- */
746
+
747
+ #page-profile .page-body {
748
+ max-width: 460px;
749
+ }
750
+
751
+ #profile-form {
752
+ display: flex;
753
+ flex-direction: column;
754
+ gap: 0.4rem;
755
+ }
756
+
757
+ #profile-form label {
758
+ font-size: 0.83rem;
759
+ font-weight: 600;
760
+ color: var(--muted);
761
+ margin-top: 0.65rem;
762
+ }
763
+
764
+ #profile-form input,
765
+ #profile-form select,
766
+ #profile-form textarea {
767
+ padding: 0.65rem 0.85rem;
768
+ border-radius: 8px;
769
+ border: 1px solid var(--border);
770
+ background: var(--bg);
771
+ color: var(--fg);
772
+ font-size: 0.95rem;
773
+ font-family: inherit;
774
+ }
775
+
776
+ #profile-form input:focus,
777
+ #profile-form select:focus,
778
+ #profile-form textarea:focus {
779
+ outline: none;
780
+ border-color: var(--accent);
781
+ }
782
+
783
+ #profile-form textarea {
784
+ min-height: 5.5rem;
785
+ resize: vertical;
786
+ }
787
+
788
+ .profile-form-buttons {
789
+ display: flex;
790
+ align-items: center;
791
+ gap: 0.75rem;
792
+ margin-top: 1.1rem;
793
+ }
794
+
795
+ #profile-saved-hint {
796
+ color: var(--online);
797
+ font-size: 0.85rem;
798
+ font-weight: 600;
799
+ }
800
+
801
+ /* ---------- Settings page ---------- */
802
+
803
+ .settings-row {
804
+ display: flex;
805
+ justify-content: space-between;
806
+ align-items: baseline;
807
+ gap: 1.5rem;
808
+ padding: 0.95rem 0;
809
+ border-bottom: 1px solid var(--border);
810
+ }
811
+
812
+ .settings-label {
813
+ color: var(--muted);
814
+ font-size: 0.88rem;
815
+ flex-shrink: 0;
816
+ }
817
+
818
+ .settings-value {
819
+ font-size: 0.88rem;
820
+ text-align: right;
821
+ word-break: break-all;
822
+ }
823
+
824
+ code.settings-value {
825
+ font-family: ui-monospace, "SF Mono", Consolas, monospace;
826
+ font-size: 0.78rem;
827
+ background: var(--bg-subtle);
828
+ padding: 0.3rem 0.5rem;
829
+ border-radius: 6px;
830
+ }