neohive 6.0.2 → 6.1.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.
@@ -0,0 +1,708 @@
1
+ /**
2
+ * Neohive design system — color tokens and UI components aligned with
3
+ * the Stitch reference (amber accent, dark surfaces, kanban cards).
4
+ *
5
+ * Usage: link this stylesheet and use --nh-* variables or nh-* classes.
6
+ * The dashboard loads this file and maps its legacy variables (--bg, --surface, …)
7
+ * to --nh-* on :root. Light mode: set data-theme="light" on <html> (see [data-theme="light"]).
8
+ * Scope demos with .nh-ds on a container to avoid clashing with unrelated markup.
9
+ *
10
+ * “Molecules” here = small components whose styles reference only --nh-* tokens
11
+ * (e.g. .nh-presence-dot, .nh-pill) so the dashboard and this page stay in sync.
12
+ */
13
+
14
+ :root {
15
+ /* —— Brand palette —— */
16
+ --nh-accent: #f59e0b;
17
+ --nh-charcoal: #121212;
18
+ --nh-graphite: #172b37;
19
+ --nh-gray: #d1d5db;
20
+ --nh-green: #10b981;
21
+ --nh-amber: #f59e0b;
22
+ --nh-blue: #3b82f6;
23
+ --nh-red: #ef4444;
24
+ --nh-orange: #f97316;
25
+ --nh-purple: #a78bfa;
26
+ --nh-yellow: #eab308;
27
+
28
+ /* —— Application surfaces —— */
29
+ --nh-bg: #0f0f10;
30
+ --nh-sidebar: #161618;
31
+ --nh-card: #1c1c1f;
32
+ --nh-card-hover: #232326;
33
+ --nh-card-muted: rgba(28, 28, 31, 0.3);
34
+
35
+ /* —— Typography —— */
36
+ --nh-text-primary: #f3f4f6;
37
+ --nh-text-secondary: #9ca3af;
38
+ /* Tertiary / disabled / offline chrome (dashboard lists, dots) */
39
+ --nh-text-muted: #6b7280;
40
+
41
+ /* —— Borders —— */
42
+ --nh-border: #27272a;
43
+ /* Softer dividers for dense app chrome (header rows, lists) */
44
+ --nh-divider: rgba(255, 255, 255, 0.08);
45
+ --nh-divider-strong: rgba(255, 255, 255, 0.14);
46
+
47
+ /* —— Success / “done” lane (kanban) —— */
48
+ --nh-success-surface: #1a2622;
49
+ --nh-success-card: #1f2e29;
50
+
51
+ /* —— On-accent (primary button label) —— */
52
+ --nh-on-accent: #3a2201;
53
+
54
+ /* —— Alpha helpers —— */
55
+ --nh-accent-5: rgba(245, 158, 11, 0.05);
56
+ --nh-accent-10: rgba(245, 158, 11, 0.1);
57
+ --nh-accent-20: rgba(245, 158, 11, 0.2);
58
+ --nh-accent-50: rgba(245, 158, 11, 0.5);
59
+ --nh-accent-90: rgba(245, 158, 11, 0.9);
60
+ --nh-accent-glow: 0 0 12px rgba(245, 158, 11, 0.35);
61
+ --nh-green-10: rgba(16, 185, 129, 0.1);
62
+ --nh-green-20: rgba(16, 185, 129, 0.2);
63
+ --nh-green-30: rgba(16, 185, 129, 0.3);
64
+ --nh-green-glow: 0 0 12px rgba(16, 185, 129, 0.5);
65
+ --nh-blue-glow: 0 0 12px rgba(59, 130, 246, 0.45);
66
+ --nh-red-10: rgba(239, 68, 68, 0.12);
67
+ --nh-red-20: rgba(239, 68, 68, 0.22);
68
+ --nh-purple-10: rgba(167, 139, 250, 0.12);
69
+ --nh-purple-20: rgba(167, 139, 250, 0.22);
70
+ --nh-orange-10: rgba(249, 115, 22, 0.12);
71
+ --nh-orange-20: rgba(249, 115, 22, 0.22);
72
+ --nh-yellow-10: rgba(234, 179, 8, 0.12);
73
+ --nh-yellow-20: rgba(234, 179, 8, 0.22);
74
+
75
+ /* —— Surfaces on top of accents (badges, gradient buttons) —— */
76
+ --nh-on-dark: #ffffff;
77
+
78
+ /* —— Layout / type scale —— */
79
+ --nh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
80
+ --nh-radius-sm: 6px;
81
+ --nh-radius-md: 8px;
82
+ --nh-radius-lg: 10px;
83
+ --nh-radius-xl: 12px;
84
+
85
+ --nh-space-1: 4px;
86
+ --nh-space-2: 8px;
87
+ --nh-space-3: 12px;
88
+ --nh-space-4: 16px;
89
+ --nh-space-5: 20px;
90
+ --nh-space-6: 24px;
91
+ --nh-space-8: 32px;
92
+
93
+ /* —— Elevation (dashboard / modals) —— */
94
+ --nh-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
95
+ --nh-shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
96
+ --nh-shadow-inset: inset 0 1px 1px rgba(255, 255, 255, 0.04);
97
+
98
+ /* —— Glassmorphism —— */
99
+ --nh-glass-bg: rgba(20, 20, 22, 0.82);
100
+ --nh-glass-border: rgba(255, 255, 255, 0.05);
101
+ --nh-blur: blur(14px);
102
+
103
+ /* —— Markdown inside message cards —— */
104
+ --nh-code-block-bg: var(--nh-bg);
105
+ --nh-code-inline-fg: var(--nh-orange);
106
+ }
107
+
108
+ /* Message feed: one card per message (dashboard Messages view) */
109
+ .nh-msg-card {
110
+ display: flex;
111
+ flex-direction: row;
112
+ align-items: flex-start;
113
+ gap: var(--nh-space-3);
114
+ background: var(--nh-card);
115
+ backdrop-filter: var(--nh-blur);
116
+ -webkit-backdrop-filter: var(--nh-blur);
117
+ border: 1px solid var(--nh-glass-border);
118
+ box-shadow: var(--nh-shadow-inset);
119
+ border-radius: var(--nh-radius-xl);
120
+ padding: var(--nh-space-4) var(--nh-space-5);
121
+ transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
122
+ }
123
+
124
+ .nh-msg-card:hover {
125
+ transform: translateY(-2px);
126
+ border-color: var(--nh-accent-50);
127
+ box-shadow: var(--nh-shadow-card), 0 0 15px var(--nh-accent-10);
128
+ }
129
+
130
+ /* Light theme: same tokens, flipped for dashboard + design-system demos */
131
+ [data-theme="light"] {
132
+ --nh-accent: #d97706;
133
+ --nh-on-accent: #fff;
134
+ --nh-charcoal: #fafaf9;
135
+ --nh-graphite: #e7e5e4;
136
+ --nh-gray: #78716c;
137
+ --nh-green: #16a34a;
138
+ --nh-amber: #d97706;
139
+ --nh-blue: #2563eb;
140
+ --nh-red: #dc2626;
141
+ --nh-orange: #ea580c;
142
+ --nh-purple: #7c3aed;
143
+ --nh-yellow: #ca8a04;
144
+ --nh-bg: #fafaf9;
145
+ --nh-sidebar: #ffffff;
146
+ --nh-card: #f4f4f5;
147
+ --nh-card-hover: #e4e4e7;
148
+ --nh-card-muted: rgba(244, 244, 245, 0.65);
149
+ --nh-text-primary: #18181b;
150
+ --nh-text-secondary: #71717a;
151
+ --nh-text-muted: #71717a;
152
+ --nh-border: #e4e4e7;
153
+ --nh-code-block-bg: #e4e4e7;
154
+ --nh-success-surface: #ecfdf5;
155
+ --nh-success-card: #d1fae5;
156
+ --nh-divider: rgba(0, 0, 0, 0.08);
157
+ --nh-divider-strong: rgba(0, 0, 0, 0.12);
158
+ --nh-accent-5: rgba(217, 119, 6, 0.06);
159
+ --nh-accent-10: rgba(217, 119, 6, 0.1);
160
+ --nh-accent-20: rgba(217, 119, 6, 0.2);
161
+ --nh-accent-90: #b45309;
162
+ --nh-green-10: rgba(22, 163, 74, 0.1);
163
+ --nh-green-20: rgba(22, 163, 74, 0.2);
164
+ --nh-green-30: rgba(22, 163, 74, 0.35);
165
+ --nh-green-glow: 0 0 8px rgba(22, 163, 74, 0.35);
166
+ --nh-blue-glow: 0 0 8px rgba(37, 99, 235, 0.35);
167
+ --nh-red-10: rgba(220, 38, 38, 0.1);
168
+ --nh-red-20: rgba(220, 38, 38, 0.2);
169
+ --nh-purple-10: rgba(124, 58, 237, 0.1);
170
+ --nh-purple-20: rgba(124, 58, 237, 0.2);
171
+ --nh-orange-10: rgba(234, 88, 12, 0.1);
172
+ --nh-orange-20: rgba(234, 88, 12, 0.2);
173
+ --nh-yellow-10: rgba(202, 138, 4, 0.1);
174
+ --nh-yellow-20: rgba(202, 138, 4, 0.2);
175
+ --nh-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
176
+ --nh-shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
177
+ --nh-glass-bg: rgba(255, 255, 255, 0.72);
178
+ --nh-glass-border: rgba(0, 0, 0, 0.06);
179
+ }
180
+
181
+ /* —— Base (optional scoped shell) —— */
182
+ .nh-ds {
183
+ font-family: var(--nh-font-sans);
184
+ background: var(--nh-bg);
185
+ color: var(--nh-text-primary);
186
+ -webkit-font-smoothing: antialiased;
187
+ -moz-osx-font-smoothing: grayscale;
188
+ }
189
+
190
+ .nh-ds ::-webkit-scrollbar {
191
+ width: 6px;
192
+ height: 6px;
193
+ }
194
+
195
+ .nh-ds ::-webkit-scrollbar-track {
196
+ background: transparent;
197
+ }
198
+
199
+ .nh-ds ::-webkit-scrollbar-thumb {
200
+ background: var(--nh-border);
201
+ border-radius: 3px;
202
+ }
203
+
204
+ .nh-ds ::-webkit-scrollbar-thumb:hover {
205
+ background: var(--nh-text-secondary);
206
+ }
207
+
208
+ /* —— Status pills —— */
209
+ .nh-pill {
210
+ display: inline-flex;
211
+ align-items: center;
212
+ padding: 2px 8px;
213
+ border-radius: 9999px;
214
+ font-size: 10px;
215
+ font-weight: 500;
216
+ line-height: 1.25;
217
+ }
218
+
219
+ .nh-pill--review {
220
+ background-color: var(--nh-accent-10);
221
+ color: var(--nh-amber);
222
+ border: 1px solid var(--nh-accent-20);
223
+ }
224
+
225
+ .nh-pill--done {
226
+ background-color: var(--nh-green-10);
227
+ color: var(--nh-green);
228
+ border: 1px solid var(--nh-green-20);
229
+ }
230
+
231
+ .nh-pill--lg {
232
+ padding: 4px 10px;
233
+ font-size: 12px;
234
+ }
235
+
236
+ .nh-pill--sm {
237
+ padding: 1px 6px;
238
+ font-size: 9px;
239
+ font-weight: 600;
240
+ }
241
+
242
+ /* —— Buttons —— */
243
+ .nh-btn {
244
+ display: inline-flex;
245
+ align-items: center;
246
+ justify-content: center;
247
+ gap: var(--nh-space-2);
248
+ font-family: inherit;
249
+ font-size: 14px;
250
+ line-height: 1.25;
251
+ border-radius: var(--nh-radius-sm);
252
+ border: none;
253
+ cursor: pointer;
254
+ transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
255
+ }
256
+
257
+ .nh-btn--primary {
258
+ background: var(--nh-accent);
259
+ color: var(--nh-on-accent);
260
+ font-weight: 600;
261
+ padding: 8px 16px;
262
+ }
263
+
264
+ .nh-btn--primary:hover {
265
+ background: var(--nh-accent-90);
266
+ }
267
+
268
+ .nh-btn--secondary {
269
+ background: var(--nh-graphite);
270
+ color: var(--nh-text-primary);
271
+ font-weight: 500;
272
+ padding: 8px 16px;
273
+ border: 1px solid var(--nh-border);
274
+ }
275
+
276
+ .nh-btn--secondary:hover {
277
+ background: rgba(23, 43, 55, 0.8);
278
+ }
279
+
280
+ .nh-btn--ghost {
281
+ background: transparent;
282
+ color: var(--nh-text-secondary);
283
+ padding: 8px 10px;
284
+ }
285
+
286
+ .nh-btn--ghost:hover {
287
+ color: var(--nh-text-primary);
288
+ }
289
+
290
+ /* —— Cards —— */
291
+ .nh-card-border {
292
+ border: 1px solid var(--nh-border);
293
+ }
294
+
295
+ .nh-card {
296
+ background: var(--nh-card);
297
+ border: 1px solid var(--nh-border);
298
+ border-radius: var(--nh-radius-lg);
299
+ padding: var(--nh-space-4);
300
+ transition: border-color 0.15s ease;
301
+ }
302
+
303
+ .nh-card--interactive {
304
+ cursor: pointer;
305
+ }
306
+
307
+ .nh-card--interactive:hover {
308
+ border-color: rgba(156, 163, 175, 0.5);
309
+ }
310
+
311
+ .nh-card--muted {
312
+ opacity: 0.5;
313
+ }
314
+
315
+ .nh-card--success {
316
+ background: var(--nh-success-card);
317
+ border-color: var(--nh-green-20);
318
+ }
319
+
320
+ .nh-card--success.nh-card--interactive:hover {
321
+ border-color: rgba(16, 185, 129, 0.4);
322
+ }
323
+
324
+ .nh-card__title {
325
+ font-size: 14px;
326
+ font-weight: 500;
327
+ color: var(--nh-text-primary);
328
+ line-height: 1.25;
329
+ margin: 0 0 var(--nh-space-2);
330
+ }
331
+
332
+ .nh-card__body {
333
+ font-size: 12px;
334
+ color: var(--nh-text-secondary);
335
+ line-height: 1.5;
336
+ margin: 0 0 var(--nh-space-4);
337
+ display: -webkit-box;
338
+ -webkit-line-clamp: 2;
339
+ line-clamp: 2;
340
+ -webkit-box-orient: vertical;
341
+ overflow: hidden;
342
+ }
343
+
344
+ .nh-card__footer {
345
+ display: flex;
346
+ align-items: center;
347
+ justify-content: space-between;
348
+ gap: var(--nh-space-2);
349
+ margin-top: auto;
350
+ }
351
+
352
+ .nh-card__meta {
353
+ font-size: 10px;
354
+ color: var(--nh-text-secondary);
355
+ }
356
+
357
+ /* —— Avatars (task assignee) —— */
358
+ .nh-avatar {
359
+ width: 24px;
360
+ height: 24px;
361
+ border-radius: 9999px;
362
+ border: 1px solid var(--nh-border);
363
+ object-fit: cover;
364
+ flex-shrink: 0;
365
+ }
366
+
367
+ .nh-avatar--success {
368
+ border-color: var(--nh-green-30);
369
+ }
370
+
371
+ .nh-avatar-fallback {
372
+ width: 24px;
373
+ height: 24px;
374
+ border-radius: 9999px;
375
+ border: 1px solid var(--nh-border);
376
+ background: rgba(88, 28, 135, 0.35);
377
+ border-color: rgba(168, 85, 247, 0.3);
378
+ color: #c4b5fd;
379
+ font-size: 11px;
380
+ font-weight: 600;
381
+ display: inline-flex;
382
+ align-items: center;
383
+ justify-content: center;
384
+ flex-shrink: 0;
385
+ }
386
+
387
+ .nh-avatar-fallback--success {
388
+ border-color: var(--nh-green-30);
389
+ }
390
+
391
+ /* —— Kanban column shell —— */
392
+ .nh-kanban-col {
393
+ display: flex;
394
+ flex-direction: column;
395
+ background: var(--nh-card-muted);
396
+ border: 1px solid var(--nh-border);
397
+ border-radius: var(--nh-radius-xl);
398
+ min-width: 0;
399
+ flex: 1;
400
+ overflow: hidden;
401
+ }
402
+
403
+ .nh-kanban-col--success {
404
+ background: var(--nh-success-surface);
405
+ border-color: var(--nh-green-20);
406
+ }
407
+
408
+ .nh-kanban-col__head {
409
+ padding: var(--nh-space-4);
410
+ border-bottom: 1px solid var(--nh-border);
411
+ display: flex;
412
+ align-items: center;
413
+ justify-content: space-between;
414
+ flex-shrink: 0;
415
+ }
416
+
417
+ .nh-kanban-col--success .nh-kanban-col__head {
418
+ border-bottom-color: rgba(16, 185, 129, 0.1);
419
+ }
420
+
421
+ .nh-kanban-col__head--sticky {
422
+ position: sticky;
423
+ top: 0;
424
+ z-index: 2;
425
+ -webkit-backdrop-filter: blur(8px);
426
+ backdrop-filter: blur(8px);
427
+ background: rgba(15, 15, 16, 0.8);
428
+ border-radius: var(--nh-radius-xl) var(--nh-radius-xl) 0 0;
429
+ }
430
+
431
+ .nh-kanban-col--success .nh-kanban-col__head--sticky {
432
+ background: rgba(26, 38, 34, 0.9);
433
+ }
434
+
435
+ .nh-kanban-col__title {
436
+ font-size: 14px;
437
+ font-weight: 500;
438
+ color: var(--nh-text-primary);
439
+ margin: 0;
440
+ }
441
+
442
+ .nh-kanban-col__count {
443
+ font-size: 12px;
444
+ font-weight: 400;
445
+ color: var(--nh-text-secondary);
446
+ }
447
+
448
+ .nh-kanban-col__body {
449
+ flex: 1;
450
+ padding: var(--nh-space-3);
451
+ display: flex;
452
+ flex-direction: column;
453
+ gap: var(--nh-space-3);
454
+ overflow-y: auto;
455
+ min-height: 0;
456
+ }
457
+
458
+ .nh-kanban-col__empty {
459
+ flex: 1;
460
+ display: flex;
461
+ flex-direction: column;
462
+ align-items: center;
463
+ justify-content: center;
464
+ text-align: center;
465
+ padding: var(--nh-space-4);
466
+ }
467
+
468
+ .nh-kanban-col__empty-icon {
469
+ width: 48px;
470
+ height: 48px;
471
+ border-radius: var(--nh-radius-lg);
472
+ border: 2px dashed var(--nh-border);
473
+ margin-bottom: var(--nh-space-3);
474
+ color: var(--nh-text-secondary);
475
+ display: flex;
476
+ align-items: center;
477
+ justify-content: center;
478
+ font-size: 20px;
479
+ font-weight: 600;
480
+ }
481
+
482
+ .nh-kanban-col__empty-text {
483
+ font-size: 14px;
484
+ color: var(--nh-text-secondary);
485
+ margin: 0;
486
+ }
487
+
488
+ /* —— Done card row (icon + title) —— */
489
+ .nh-done-row {
490
+ display: flex;
491
+ gap: var(--nh-space-2);
492
+ margin-bottom: var(--nh-space-3);
493
+ }
494
+
495
+ .nh-done-row__icon {
496
+ color: var(--nh-green);
497
+ font-size: 14px;
498
+ margin-top: 2px;
499
+ flex-shrink: 0;
500
+ line-height: 1;
501
+ }
502
+
503
+ .nh-done-row__title {
504
+ font-size: 14px;
505
+ font-weight: 500;
506
+ color: var(--nh-text-primary);
507
+ line-height: 1.25;
508
+ margin: 0;
509
+ }
510
+
511
+ .nh-card--success .nh-card__footer {
512
+ padding-left: 22px;
513
+ }
514
+
515
+ /* —— Sidebar patterns —— */
516
+ .nh-sidebar {
517
+ background: var(--nh-sidebar);
518
+ border-right: 1px solid var(--nh-border);
519
+ }
520
+
521
+ .nh-sidebar__section-label {
522
+ display: flex;
523
+ align-items: center;
524
+ justify-content: space-between;
525
+ padding: 6px var(--nh-space-2);
526
+ font-size: 12px;
527
+ font-weight: 600;
528
+ text-transform: uppercase;
529
+ letter-spacing: 0.05em;
530
+ color: var(--nh-text-secondary);
531
+ margin-bottom: var(--nh-space-1);
532
+ }
533
+
534
+ .nh-nav-link {
535
+ display: flex;
536
+ align-items: center;
537
+ gap: var(--nh-space-3);
538
+ padding: var(--nh-space-2) var(--nh-space-2);
539
+ font-size: 14px;
540
+ color: var(--nh-text-secondary);
541
+ text-decoration: none;
542
+ border-radius: var(--nh-radius-sm);
543
+ transition: background-color 0.15s ease, color 0.15s ease;
544
+ }
545
+
546
+ .nh-nav-link:hover {
547
+ background: var(--nh-card);
548
+ color: var(--nh-text-primary);
549
+ }
550
+
551
+ .nh-nav-link--active {
552
+ background: var(--nh-accent-10);
553
+ color: var(--nh-accent);
554
+ font-weight: 500;
555
+ border: 1px solid var(--nh-accent-20);
556
+ }
557
+
558
+ .nh-nav-link--accent {
559
+ color: var(--nh-accent);
560
+ }
561
+
562
+ .nh-nav-link--accent:hover {
563
+ background: var(--nh-accent-5);
564
+ }
565
+
566
+ .nh-agent-chip {
567
+ display: flex;
568
+ align-items: center;
569
+ gap: var(--nh-space-3);
570
+ padding: var(--nh-space-2);
571
+ background: var(--nh-card);
572
+ border: 1px solid var(--nh-border);
573
+ border-radius: var(--nh-radius-sm);
574
+ cursor: pointer;
575
+ transition: background-color 0.15s ease;
576
+ }
577
+
578
+ .nh-agent-chip:hover {
579
+ background: var(--nh-card-hover);
580
+ }
581
+
582
+ .nh-agent-chip__name {
583
+ font-size: 14px;
584
+ font-weight: 500;
585
+ color: var(--nh-text-primary);
586
+ }
587
+
588
+ .nh-agent-chip__status {
589
+ font-size: 12px;
590
+ color: var(--nh-text-secondary);
591
+ }
592
+
593
+ .nh-select-trigger {
594
+ width: 100%;
595
+ display: flex;
596
+ align-items: center;
597
+ justify-content: space-between;
598
+ gap: var(--nh-space-2);
599
+ padding: var(--nh-space-2) var(--nh-space-3);
600
+ background: var(--nh-card);
601
+ border: 1px solid var(--nh-border);
602
+ border-radius: var(--nh-radius-sm);
603
+ font-size: 14px;
604
+ color: var(--nh-text-primary);
605
+ cursor: pointer;
606
+ transition: background-color 0.15s ease;
607
+ }
608
+
609
+ .nh-select-trigger:hover {
610
+ background: var(--nh-card-hover);
611
+ }
612
+
613
+ /* —— Top bar —— */
614
+ .nh-topbar {
615
+ height: 56px;
616
+ display: flex;
617
+ align-items: center;
618
+ justify-content: space-between;
619
+ padding: 0 var(--nh-space-6);
620
+ border-bottom: 1px solid var(--nh-border);
621
+ flex-shrink: 0;
622
+ }
623
+
624
+ /* —— Spec / docs panel —— */
625
+ .nh-spec-panel {
626
+ background: var(--nh-sidebar);
627
+ border: 1px solid var(--nh-border);
628
+ border-radius: var(--nh-radius-xl);
629
+ box-shadow: var(--nh-shadow-panel);
630
+ padding: var(--nh-space-6);
631
+ }
632
+
633
+ .nh-swatch {
634
+ width: 64px;
635
+ height: 48px;
636
+ border-radius: var(--nh-radius-sm);
637
+ flex-shrink: 0;
638
+ }
639
+
640
+ .nh-swatch--border {
641
+ border: 1px solid var(--nh-border);
642
+ }
643
+
644
+ /* —— Presence dot —— */
645
+ .nh-dot {
646
+ width: 8px;
647
+ height: 8px;
648
+ border-radius: 9999px;
649
+ background: var(--nh-border);
650
+ flex-shrink: 0;
651
+ }
652
+
653
+ .nh-dot--live {
654
+ background: var(--nh-green);
655
+ box-shadow: var(--nh-green-glow);
656
+ }
657
+
658
+ @keyframes nh-pulse-dot {
659
+ 0%, 100% { opacity: 1; transform: scale(1); }
660
+ 50% { opacity: 0.4; transform: scale(0.92); }
661
+ }
662
+
663
+ @keyframes nh-glow-pulse {
664
+ 0%, 100% { box-shadow: 0 0 8px rgba(16, 185, 129, 0.35); }
665
+ 50% { box-shadow: 0 0 16px rgba(16, 185, 129, 0.65); }
666
+ }
667
+
668
+ @keyframes nh-float {
669
+ 0%, 100% { transform: translateY(0); }
670
+ 50% { transform: translateY(-3px); }
671
+ }
672
+
673
+ /* Activity / presence (dashboard lists, agent rows) — tokens only, no hex */
674
+ .nh-presence-dot {
675
+ width: 8px;
676
+ height: 8px;
677
+ border-radius: 9999px;
678
+ flex-shrink: 0;
679
+ background: var(--nh-text-muted);
680
+ opacity: 0.7;
681
+ transition: all 0.3s ease;
682
+ }
683
+
684
+ .nh-presence-dot--working {
685
+ background: var(--nh-green);
686
+ opacity: 1;
687
+ box-shadow: var(--nh-green-glow);
688
+ animation: nh-glow-pulse 2s infinite ease-in-out;
689
+ }
690
+
691
+ .nh-presence-dot--listening {
692
+ background: var(--nh-blue);
693
+ opacity: 1;
694
+ box-shadow: var(--nh-blue-glow);
695
+ animation: nh-pulse-dot 2s infinite ease-in-out;
696
+ }
697
+
698
+ .nh-presence-dot--idle {
699
+ background: var(--nh-accent);
700
+ opacity: 1;
701
+ animation: nh-pulse-dot 3s infinite ease-in-out;
702
+ }
703
+
704
+ .nh-presence-dot--offline {
705
+ background: var(--nh-text-muted);
706
+ opacity: 0.45;
707
+ filter: grayscale(1);
708
+ }