fraim 2.0.161 → 2.0.163
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.
- package/dist/src/ai-hub/conversation-store.js +164 -0
- package/dist/src/ai-hub/desktop-main.js +24 -1
- package/dist/src/ai-hub/hosts.js +474 -26
- package/dist/src/ai-hub/managed-browser.js +269 -0
- package/dist/src/ai-hub/manager-turns.js +13 -0
- package/dist/src/ai-hub/preferences.js +11 -2
- package/dist/src/ai-hub/server.js +1228 -65
- package/dist/src/cli/commands/init-project.js +7 -1
- package/dist/src/cli/doctor/check-runner.js +3 -1
- package/dist/src/cli/doctor/checks/mcp-connectivity-checks.js +261 -2
- package/dist/src/cli/utils/agent-adapters.js +1 -1
- package/dist/src/core/fraim-config-schema.generated.js +50 -13
- package/dist/src/first-run/types.js +8 -0
- package/dist/src/local-mcp-server/agent-token-prices.js +53 -0
- package/dist/src/local-mcp-server/learning-context-builder.js +438 -2
- package/dist/src/local-mcp-server/stdio-server.js +45 -6
- package/package.json +5 -4
- package/public/ai-hub/index.html +459 -10
- package/public/ai-hub/review.css +354 -0
- package/public/ai-hub/script.js +6007 -1274
- package/public/ai-hub/styles.css +1838 -16
package/public/ai-hub/styles.css
CHANGED
|
@@ -1,19 +1,25 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
color-scheme: light dark;
|
|
3
|
-
/* Light theme —
|
|
4
|
-
--bg: #
|
|
5
|
-
--surface: #
|
|
3
|
+
/* Light theme — Apple-style near-white */
|
|
4
|
+
--bg: #f5f5f7;
|
|
5
|
+
--surface: #ffffff;
|
|
6
6
|
--soft: #E8E8E8;
|
|
7
7
|
--line: rgba(0, 0, 0, 0.10);
|
|
8
8
|
--text: #1A1A1A;
|
|
9
9
|
--muted: #6B6B6B;
|
|
10
|
-
--accent: #
|
|
11
|
-
--accent-strong: #
|
|
12
|
-
--accent-soft: #
|
|
10
|
+
--accent: #0071e3;
|
|
11
|
+
--accent-strong: #0058b0;
|
|
12
|
+
--accent-soft: #eef4ff;
|
|
13
13
|
--warn: #b08442;
|
|
14
14
|
--warn-soft: #fdf6e8;
|
|
15
15
|
--done: #2e7d32;
|
|
16
16
|
--danger: #a24747;
|
|
17
|
+
--state-working: #006adc;
|
|
18
|
+
--state-working-soft: rgba(0, 106, 220, 0.13);
|
|
19
|
+
--state-waiting: #d2261f;
|
|
20
|
+
--state-waiting-soft: rgba(210, 38, 31, 0.13);
|
|
21
|
+
--state-complete: #20833a;
|
|
22
|
+
--state-complete-soft: rgba(32, 131, 58, 0.13);
|
|
17
23
|
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
|
|
18
24
|
--shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
19
25
|
--picker-delegation: #5b7eb0;
|
|
@@ -38,6 +44,12 @@
|
|
|
38
44
|
--warn-soft: rgba(212, 160, 78, 0.12);
|
|
39
45
|
--done: #5cb85c;
|
|
40
46
|
--danger: #e07070;
|
|
47
|
+
--state-working: #4da3ff;
|
|
48
|
+
--state-working-soft: rgba(77, 163, 255, 0.18);
|
|
49
|
+
--state-waiting: #ff5a4f;
|
|
50
|
+
--state-waiting-soft: rgba(255, 90, 79, 0.18);
|
|
51
|
+
--state-complete: #46c76a;
|
|
52
|
+
--state-complete-soft: rgba(70, 199, 106, 0.18);
|
|
41
53
|
--shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
|
42
54
|
--shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.40);
|
|
43
55
|
}
|
|
@@ -104,6 +116,49 @@ html.electron .modal-backdrop {
|
|
|
104
116
|
}
|
|
105
117
|
}
|
|
106
118
|
|
|
119
|
+
/* ── Native platform feel ───────────────────────────────────────────────────
|
|
120
|
+
html.mac / html.win / html.linux are set pre-paint (see index.html). macOS
|
|
121
|
+
renders SF Pro with grayscale smoothing — Chromium's default subpixel makes
|
|
122
|
+
SF look heavy/fringed — while Windows keeps its native ClearType rendering
|
|
123
|
+
for Segoe UI Variable. The in-content design system (Apple-blue accent,
|
|
124
|
+
near-white surfaces, pill controls) stays consistent on both: an Apple-grade
|
|
125
|
+
product that wears each OS's native window chrome. */
|
|
126
|
+
html.mac body {
|
|
127
|
+
-webkit-font-smoothing: antialiased;
|
|
128
|
+
-moz-osx-font-smoothing: grayscale;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Electron window-chrome integration. The topmost bar (gs-rail on first run,
|
|
132
|
+
otherwise hub-tabs) IS the OS titlebar: draggable, with a safe gutter for the
|
|
133
|
+
native window controls — traffic lights top-left on macOS, min/max/close
|
|
134
|
+
top-right on Windows. Interactive children opt back out of the drag region. */
|
|
135
|
+
html.electron .gs-rail,
|
|
136
|
+
html.electron .hub-tabs {
|
|
137
|
+
-webkit-app-region: drag;
|
|
138
|
+
}
|
|
139
|
+
html.electron .gs-rail button,
|
|
140
|
+
html.electron .gs-rail a,
|
|
141
|
+
html.electron .hub-tabs button,
|
|
142
|
+
html.electron .hub-tabs a,
|
|
143
|
+
html.electron .hub-tabs select {
|
|
144
|
+
-webkit-app-region: no-drag;
|
|
145
|
+
}
|
|
146
|
+
/* Titlebar owns the top inset now, so the work area starts snug below the bar. */
|
|
147
|
+
html.electron .page { padding-top: 14px; }
|
|
148
|
+
|
|
149
|
+
/* macOS hiddenInset: reserve top-left space for the traffic lights on the
|
|
150
|
+
topmost visible bar. (titlebar-area env() vars are a Windows WCO feature and
|
|
151
|
+
read 0 on macOS, so the inset is explicit here.) */
|
|
152
|
+
html.mac.electron .hub-tabs { padding-left: 78px; }
|
|
153
|
+
html.mac.electron .gs-rail { padding-left: 78px; min-height: 30px; }
|
|
154
|
+
html.mac.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-left: 0; }
|
|
155
|
+
|
|
156
|
+
/* Windows 11 titleBarOverlay: reserve top-right space for min/max/close on the
|
|
157
|
+
topmost visible bar so the avatar and actions never sit under the controls. */
|
|
158
|
+
html.win.electron .hub-tabs { padding-right: 146px; }
|
|
159
|
+
html.win.electron .gs-rail { padding-right: 146px; }
|
|
160
|
+
html.win.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-right: 8px; }
|
|
161
|
+
|
|
107
162
|
* { box-sizing: border-box; }
|
|
108
163
|
html, body { margin: 0; padding: 0; }
|
|
109
164
|
[hidden] { display: none !important; }
|
|
@@ -343,8 +398,127 @@ button { font: inherit; cursor: pointer; }
|
|
|
343
398
|
margin-top: 0;
|
|
344
399
|
min-width: 0;
|
|
345
400
|
}
|
|
401
|
+
.conv-employee-group {
|
|
402
|
+
display: grid;
|
|
403
|
+
gap: 6px;
|
|
404
|
+
}
|
|
405
|
+
.conv-employee-group > summary {
|
|
406
|
+
list-style: none;
|
|
407
|
+
}
|
|
408
|
+
.conv-employee-group > summary::-webkit-details-marker { display: none; }
|
|
409
|
+
.conv-employee-tab {
|
|
410
|
+
display: flex;
|
|
411
|
+
align-items: center;
|
|
412
|
+
gap: 8px;
|
|
413
|
+
min-width: 0;
|
|
414
|
+
padding: 4px 2px;
|
|
415
|
+
color: var(--muted);
|
|
416
|
+
cursor: pointer;
|
|
417
|
+
}
|
|
418
|
+
.conv-employee-avatar {
|
|
419
|
+
width: 24px;
|
|
420
|
+
height: 24px;
|
|
421
|
+
border-radius: 7px;
|
|
422
|
+
flex-shrink: 0;
|
|
423
|
+
display: inline-flex;
|
|
424
|
+
align-items: center;
|
|
425
|
+
justify-content: center;
|
|
426
|
+
overflow: hidden;
|
|
427
|
+
background: var(--surface);
|
|
428
|
+
border: 1px solid var(--line);
|
|
429
|
+
color: var(--accent-strong);
|
|
430
|
+
font-size: 10px;
|
|
431
|
+
font-weight: 800;
|
|
432
|
+
line-height: 1;
|
|
433
|
+
text-transform: uppercase;
|
|
434
|
+
}
|
|
435
|
+
img.conv-employee-avatar {
|
|
436
|
+
object-fit: cover;
|
|
437
|
+
}
|
|
438
|
+
.conv-employee-tab::before {
|
|
439
|
+
content: "";
|
|
440
|
+
width: 0;
|
|
441
|
+
height: 0;
|
|
442
|
+
border-top: 4px solid transparent;
|
|
443
|
+
border-bottom: 4px solid transparent;
|
|
444
|
+
border-left: 5px solid currentColor;
|
|
445
|
+
transition: transform 120ms ease;
|
|
446
|
+
}
|
|
447
|
+
.conv-employee-group[open] .conv-employee-tab::before { transform: rotate(90deg); }
|
|
448
|
+
.conv-employee-tab-copy {
|
|
449
|
+
flex: 1;
|
|
450
|
+
min-width: 0;
|
|
451
|
+
display: flex;
|
|
452
|
+
flex-direction: column;
|
|
453
|
+
gap: 1px;
|
|
454
|
+
}
|
|
455
|
+
.conv-employee-tab-label {
|
|
456
|
+
font-size: 11px;
|
|
457
|
+
font-weight: 700;
|
|
458
|
+
letter-spacing: 0.08em;
|
|
459
|
+
text-transform: uppercase;
|
|
460
|
+
white-space: nowrap;
|
|
461
|
+
overflow: hidden;
|
|
462
|
+
text-overflow: ellipsis;
|
|
463
|
+
}
|
|
464
|
+
.conv-employee-tab-detail {
|
|
465
|
+
font-size: 10px;
|
|
466
|
+
font-weight: 500;
|
|
467
|
+
letter-spacing: 0;
|
|
468
|
+
text-transform: none;
|
|
469
|
+
color: var(--muted);
|
|
470
|
+
white-space: nowrap;
|
|
471
|
+
overflow: hidden;
|
|
472
|
+
text-overflow: ellipsis;
|
|
473
|
+
}
|
|
474
|
+
.conv-employee-tab-count {
|
|
475
|
+
flex-shrink: 0;
|
|
476
|
+
font-size: 11px;
|
|
477
|
+
font-weight: 700;
|
|
478
|
+
color: var(--muted);
|
|
479
|
+
}
|
|
480
|
+
.conv-employee-add {
|
|
481
|
+
width: 20px;
|
|
482
|
+
height: 20px;
|
|
483
|
+
border-radius: 50%;
|
|
484
|
+
border: 1px solid var(--line);
|
|
485
|
+
background: var(--surface);
|
|
486
|
+
color: var(--accent);
|
|
487
|
+
font-size: 14px;
|
|
488
|
+
line-height: 18px;
|
|
489
|
+
font-weight: 700;
|
|
490
|
+
text-align: center;
|
|
491
|
+
cursor: pointer;
|
|
492
|
+
flex-shrink: 0;
|
|
493
|
+
}
|
|
494
|
+
.conv-employee-add:hover {
|
|
495
|
+
background: var(--accent-soft);
|
|
496
|
+
border-color: rgba(0,113,227,.28);
|
|
497
|
+
}
|
|
498
|
+
/* Issue #550: Watercooler Conversations group modifier */
|
|
499
|
+
/* R4: dashed avatar placeholder — no image or persona initials */
|
|
500
|
+
.conv-employee-avatar--adhoc {
|
|
501
|
+
border-style: dashed;
|
|
502
|
+
border-color: var(--muted);
|
|
503
|
+
background: transparent;
|
|
504
|
+
color: transparent;
|
|
505
|
+
}
|
|
506
|
+
/* R5: muted label color for the Watercooler group header */
|
|
507
|
+
.conv-employee-group--adhoc .conv-employee-tab-label {
|
|
508
|
+
color: var(--muted);
|
|
509
|
+
font-weight: 600;
|
|
510
|
+
}
|
|
511
|
+
.conv-employee-list {
|
|
512
|
+
display: grid;
|
|
513
|
+
gap: 8px;
|
|
514
|
+
min-width: 0;
|
|
515
|
+
padding-left: 23px;
|
|
516
|
+
}
|
|
346
517
|
.conv-item {
|
|
518
|
+
box-sizing: border-box;
|
|
347
519
|
width: 100%;
|
|
520
|
+
max-width: 100%;
|
|
521
|
+
min-width: 0;
|
|
348
522
|
text-align: left;
|
|
349
523
|
background: transparent;
|
|
350
524
|
border: 1px solid var(--line);
|
|
@@ -415,12 +589,33 @@ button { font: inherit; cursor: pointer; }
|
|
|
415
589
|
color: var(--muted);
|
|
416
590
|
font-weight: 500;
|
|
417
591
|
flex-shrink: 0;
|
|
592
|
+
min-width: 0;
|
|
593
|
+
overflow: hidden;
|
|
594
|
+
text-overflow: ellipsis;
|
|
418
595
|
white-space: nowrap;
|
|
419
596
|
padding-top: 4px;
|
|
420
597
|
}
|
|
421
598
|
.conv-status.running { color: var(--accent); }
|
|
422
599
|
.conv-status.attention { color: var(--warn); }
|
|
423
600
|
.conv-status.failed { color: var(--danger); }
|
|
601
|
+
.conv-status.working { color: var(--state-working); }
|
|
602
|
+
.conv-status.waiting { color: var(--state-waiting); }
|
|
603
|
+
.conv-status.complete { color: var(--state-complete); }
|
|
604
|
+
/* #549 R4: Amber label for manager-stopped runs in the conversation rail. */
|
|
605
|
+
.conv-status.stopped { color: var(--warn); }
|
|
606
|
+
.state-dot {
|
|
607
|
+
display: inline-block;
|
|
608
|
+
width: 8px;
|
|
609
|
+
height: 8px;
|
|
610
|
+
border-radius: 50%;
|
|
611
|
+
flex-shrink: 0;
|
|
612
|
+
background: var(--line);
|
|
613
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
|
|
614
|
+
}
|
|
615
|
+
.conv-state-dot {
|
|
616
|
+
align-self: center;
|
|
617
|
+
margin-left: auto;
|
|
618
|
+
}
|
|
424
619
|
|
|
425
620
|
/* Conversation pane */
|
|
426
621
|
.conversation {
|
|
@@ -462,14 +657,15 @@ button { font: inherit; cursor: pointer; }
|
|
|
462
657
|
.empty-state p { margin: 0; max-width: 320px; }
|
|
463
658
|
|
|
464
659
|
#active-conv {
|
|
465
|
-
display:
|
|
466
|
-
|
|
660
|
+
display: grid;
|
|
661
|
+
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
467
662
|
gap: 14px;
|
|
468
663
|
min-width: 0;
|
|
469
664
|
flex: 1;
|
|
470
665
|
min-height: 0;
|
|
471
666
|
overflow: hidden;
|
|
472
667
|
}
|
|
668
|
+
#active-conv[hidden] { display: none; }
|
|
473
669
|
|
|
474
670
|
.conv-header,
|
|
475
671
|
.support-stack,
|
|
@@ -482,6 +678,21 @@ button { font: inherit; cursor: pointer; }
|
|
|
482
678
|
align-items: center;
|
|
483
679
|
gap: 12px;
|
|
484
680
|
}
|
|
681
|
+
/* #521: Stop button — interrupt a working employee and park it "waiting on you". */
|
|
682
|
+
.run-stop-btn {
|
|
683
|
+
flex-shrink: 0;
|
|
684
|
+
font-size: 12px;
|
|
685
|
+
font-weight: 600;
|
|
686
|
+
color: #b42318;
|
|
687
|
+
background: #fef3f2;
|
|
688
|
+
border: 1px solid #fda29b;
|
|
689
|
+
border-radius: 14px;
|
|
690
|
+
padding: 5px 12px;
|
|
691
|
+
cursor: pointer;
|
|
692
|
+
transition: background .12s;
|
|
693
|
+
}
|
|
694
|
+
.run-stop-btn:hover { background: #fee4e2; }
|
|
695
|
+
.run-stop-btn:disabled { opacity: .55; cursor: default; }
|
|
485
696
|
/* Job title inline with employee avatar — replaces the old separate h2 row */
|
|
486
697
|
.conv-job-title {
|
|
487
698
|
flex: 1;
|
|
@@ -549,6 +760,18 @@ button { font: inherit; cursor: pointer; }
|
|
|
549
760
|
.run-state-pill.running {
|
|
550
761
|
background: rgba(31, 67, 125, 0.14);
|
|
551
762
|
}
|
|
763
|
+
.run-state-pill.working {
|
|
764
|
+
background: var(--state-working-soft);
|
|
765
|
+
color: var(--state-working);
|
|
766
|
+
}
|
|
767
|
+
.run-state-pill.waiting {
|
|
768
|
+
background: var(--state-waiting-soft);
|
|
769
|
+
color: var(--state-waiting);
|
|
770
|
+
}
|
|
771
|
+
.run-state-pill.complete {
|
|
772
|
+
background: var(--state-complete-soft);
|
|
773
|
+
color: var(--state-complete);
|
|
774
|
+
}
|
|
552
775
|
.run-state-pill.failed {
|
|
553
776
|
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
|
554
777
|
color: var(--danger);
|
|
@@ -557,6 +780,16 @@ button { font: inherit; cursor: pointer; }
|
|
|
557
780
|
background: color-mix(in srgb, var(--done) 14%, transparent);
|
|
558
781
|
color: var(--done);
|
|
559
782
|
}
|
|
783
|
+
/* #549 R3: Amber STOPPED pill — intentional pause, distinct from red WAITING ON YOU. */
|
|
784
|
+
.run-state-pill.stopped {
|
|
785
|
+
background: color-mix(in srgb, var(--warn) 15%, transparent);
|
|
786
|
+
color: var(--warn);
|
|
787
|
+
}
|
|
788
|
+
.run-state-pill.approved {
|
|
789
|
+
background: color-mix(in srgb, #2e7d32 18%, transparent);
|
|
790
|
+
color: #2e7d32;
|
|
791
|
+
font-weight: 800;
|
|
792
|
+
}
|
|
560
793
|
.conv-header {
|
|
561
794
|
display: flex;
|
|
562
795
|
flex-wrap: wrap;
|
|
@@ -581,7 +814,8 @@ button { font: inherit; cursor: pointer; }
|
|
|
581
814
|
align-items: flex-start;
|
|
582
815
|
gap: 12px;
|
|
583
816
|
min-width: 0;
|
|
584
|
-
|
|
817
|
+
width: 100%;
|
|
818
|
+
flex: 0 0 auto;
|
|
585
819
|
}
|
|
586
820
|
.conversation-status > * {
|
|
587
821
|
min-width: 0;
|
|
@@ -596,6 +830,7 @@ button { font: inherit; cursor: pointer; }
|
|
|
596
830
|
display: grid;
|
|
597
831
|
gap: 8px;
|
|
598
832
|
flex-shrink: 0;
|
|
833
|
+
min-height: 0;
|
|
599
834
|
}
|
|
600
835
|
.panel-details {
|
|
601
836
|
background: var(--soft);
|
|
@@ -699,15 +934,35 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
699
934
|
padding: 4px 10px;
|
|
700
935
|
border-radius: 8px;
|
|
701
936
|
}
|
|
937
|
+
.mark-complete-btn {
|
|
938
|
+
border-color: color-mix(in srgb, var(--state-complete) 42%, var(--line));
|
|
939
|
+
color: var(--state-complete);
|
|
940
|
+
font-weight: 700;
|
|
941
|
+
}
|
|
702
942
|
/* Thread panel */
|
|
703
943
|
.panel-details--thread {
|
|
704
944
|
border-radius: 8px;
|
|
705
945
|
border: 1px solid var(--line);
|
|
706
946
|
background: var(--bg);
|
|
707
|
-
overflow
|
|
708
|
-
overflow-x: hidden;
|
|
709
|
-
flex: 1;
|
|
947
|
+
overflow: hidden;
|
|
710
948
|
min-height: 0;
|
|
949
|
+
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
950
|
+
}
|
|
951
|
+
.panel-details--thread[open] {
|
|
952
|
+
display: flex;
|
|
953
|
+
flex-direction: column;
|
|
954
|
+
}
|
|
955
|
+
.panel-details--thread.thread-working {
|
|
956
|
+
border-color: color-mix(in srgb, var(--state-working) 78%, var(--line));
|
|
957
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-working) 34%, transparent);
|
|
958
|
+
}
|
|
959
|
+
.panel-details--thread.thread-waiting {
|
|
960
|
+
border-color: color-mix(in srgb, var(--state-waiting) 82%, var(--line));
|
|
961
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-waiting) 38%, transparent);
|
|
962
|
+
}
|
|
963
|
+
.panel-details--thread.thread-complete {
|
|
964
|
+
border-color: color-mix(in srgb, var(--state-complete) 76%, var(--line));
|
|
965
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-complete) 32%, transparent);
|
|
711
966
|
}
|
|
712
967
|
.panel-details--thread > summary {
|
|
713
968
|
padding: 12px 22px;
|
|
@@ -718,6 +973,11 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
718
973
|
.panel-details--thread > summary::-webkit-details-marker { display: none; }
|
|
719
974
|
.panel-details--thread .messages {
|
|
720
975
|
padding: 8px 22px 18px;
|
|
976
|
+
flex: 1 1 0;
|
|
977
|
+
height: auto;
|
|
978
|
+
min-height: 0;
|
|
979
|
+
overflow-y: auto;
|
|
980
|
+
overflow-x: hidden;
|
|
721
981
|
}
|
|
722
982
|
.employee-select.inline {
|
|
723
983
|
font-size: 12px;
|
|
@@ -777,6 +1037,8 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
777
1037
|
border: 1px solid var(--line);
|
|
778
1038
|
border-radius: 8px;
|
|
779
1039
|
padding: 8px 12px;
|
|
1040
|
+
width: 100%;
|
|
1041
|
+
flex: 1 1 100%;
|
|
780
1042
|
}
|
|
781
1043
|
|
|
782
1044
|
.thread-surface {
|
|
@@ -904,6 +1166,44 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
904
1166
|
border: 1px solid var(--line);
|
|
905
1167
|
color: var(--text);
|
|
906
1168
|
}
|
|
1169
|
+
.typing-indicator {
|
|
1170
|
+
animation: none;
|
|
1171
|
+
justify-items: start;
|
|
1172
|
+
}
|
|
1173
|
+
.typing-indicator .bubble {
|
|
1174
|
+
display: inline-flex;
|
|
1175
|
+
align-items: center;
|
|
1176
|
+
gap: 5px;
|
|
1177
|
+
min-width: 48px;
|
|
1178
|
+
padding-block: 10px;
|
|
1179
|
+
background: var(--surface);
|
|
1180
|
+
border: 1px solid var(--line);
|
|
1181
|
+
color: var(--text);
|
|
1182
|
+
}
|
|
1183
|
+
.typing-dot {
|
|
1184
|
+
width: 6px;
|
|
1185
|
+
height: 6px;
|
|
1186
|
+
border-radius: 50%;
|
|
1187
|
+
background: var(--muted);
|
|
1188
|
+
opacity: 0.45;
|
|
1189
|
+
animation: typing-bounce 1.1s infinite ease-in-out;
|
|
1190
|
+
}
|
|
1191
|
+
.typing-dot:nth-child(2) { animation-delay: 120ms; }
|
|
1192
|
+
.typing-dot:nth-child(3) { animation-delay: 240ms; }
|
|
1193
|
+
/* #549 R1: Static dash shown in the working-indicator bubble while stop is in-flight.
|
|
1194
|
+
Replaces the animated typing-dots to signal "stopping in progress, please wait". */
|
|
1195
|
+
.stopping-dash {
|
|
1196
|
+
display: inline-flex;
|
|
1197
|
+
align-items: center;
|
|
1198
|
+
justify-content: center;
|
|
1199
|
+
font-size: 14px;
|
|
1200
|
+
color: var(--muted);
|
|
1201
|
+
line-height: 1;
|
|
1202
|
+
}
|
|
1203
|
+
@keyframes typing-bounce {
|
|
1204
|
+
0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
|
|
1205
|
+
40% { opacity: 0.9; transform: translateY(-3px); }
|
|
1206
|
+
}
|
|
907
1207
|
.message.system .bubble {
|
|
908
1208
|
background: var(--soft);
|
|
909
1209
|
border: 1px solid var(--line);
|
|
@@ -996,6 +1296,10 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
996
1296
|
font-size: 11px;
|
|
997
1297
|
line-height: 1.4;
|
|
998
1298
|
}
|
|
1299
|
+
.coach-note.pending-job {
|
|
1300
|
+
color: var(--text);
|
|
1301
|
+
font-weight: 600;
|
|
1302
|
+
}
|
|
999
1303
|
.send-button {
|
|
1000
1304
|
background: var(--accent);
|
|
1001
1305
|
color: #fff;
|
|
@@ -1160,6 +1464,38 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
1160
1464
|
.job-option strong { font-weight: 600; }
|
|
1161
1465
|
.job-option span { color: var(--muted); font-size: 13px; }
|
|
1162
1466
|
|
|
1467
|
+
/* R2 (#521): ad-hoc row in the smart new-job input — type the work and start
|
|
1468
|
+
directly, without picking a catalog job. Replaces the old "Just describe what
|
|
1469
|
+
you need" button. */
|
|
1470
|
+
.aj-adhoc {
|
|
1471
|
+
width: 100%;
|
|
1472
|
+
display: flex;
|
|
1473
|
+
align-items: center;
|
|
1474
|
+
gap: 10px;
|
|
1475
|
+
text-align: left;
|
|
1476
|
+
background: var(--accent-soft);
|
|
1477
|
+
border: 1px solid var(--accent);
|
|
1478
|
+
border-radius: 8px;
|
|
1479
|
+
padding: 10px 12px;
|
|
1480
|
+
margin-bottom: 12px;
|
|
1481
|
+
color: var(--text);
|
|
1482
|
+
}
|
|
1483
|
+
.aj-adhoc:hover { background: var(--soft); }
|
|
1484
|
+
.aj-adhoc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
1485
|
+
.aj-adhoc .aj-adhoc-ico {
|
|
1486
|
+
width: 30px; height: 30px; border-radius: 50%;
|
|
1487
|
+
background: #fff; color: var(--accent);
|
|
1488
|
+
display: flex; align-items: center; justify-content: center;
|
|
1489
|
+
font-size: 15px; flex-shrink: 0;
|
|
1490
|
+
}
|
|
1491
|
+
.aj-adhoc .aj-adhoc-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
|
|
1492
|
+
.aj-adhoc .aj-adhoc-title { font-weight: 600; font-size: 14px; }
|
|
1493
|
+
.aj-adhoc .aj-adhoc-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1494
|
+
.aj-adhoc .aj-adhoc-action {
|
|
1495
|
+
flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fff;
|
|
1496
|
+
background: var(--accent); border-radius: 14px; padding: 5px 13px;
|
|
1497
|
+
}
|
|
1498
|
+
|
|
1163
1499
|
.step2 .assigned-job {
|
|
1164
1500
|
background: var(--accent-soft);
|
|
1165
1501
|
border: 1px solid #c5dcd0;
|
|
@@ -1279,7 +1615,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1279
1615
|
.tracker-rows {
|
|
1280
1616
|
display: flex;
|
|
1281
1617
|
flex-direction: column;
|
|
1282
|
-
gap:
|
|
1618
|
+
gap: 10px;
|
|
1283
1619
|
}
|
|
1284
1620
|
.tracker-row {
|
|
1285
1621
|
display: flex;
|
|
@@ -1293,7 +1629,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1293
1629
|
align-items: center;
|
|
1294
1630
|
gap: 6px;
|
|
1295
1631
|
flex: 1 1 0;
|
|
1296
|
-
min-width:
|
|
1632
|
+
min-width: 34px;
|
|
1297
1633
|
position: relative;
|
|
1298
1634
|
z-index: 2;
|
|
1299
1635
|
}
|
|
@@ -1315,7 +1651,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1315
1651
|
.tracker .stage.done::before { background: var(--done); }
|
|
1316
1652
|
.tracker .stage.current::before { background: var(--warn); }
|
|
1317
1653
|
.tracker .stage-circle {
|
|
1318
|
-
width:
|
|
1654
|
+
width: 24px; height: 24px;
|
|
1319
1655
|
border-radius: 50%;
|
|
1320
1656
|
background: var(--surface);
|
|
1321
1657
|
border: 2px solid var(--line);
|
|
@@ -1323,6 +1659,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1323
1659
|
align-items: center;
|
|
1324
1660
|
justify-content: center;
|
|
1325
1661
|
font-size: 11px;
|
|
1662
|
+
line-height: 1;
|
|
1326
1663
|
color: var(--muted);
|
|
1327
1664
|
font-weight: 600;
|
|
1328
1665
|
position: relative;
|
|
@@ -1340,7 +1677,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1340
1677
|
box-shadow: 0 0 0 4px rgba(176, 132, 66, 0.15);
|
|
1341
1678
|
}
|
|
1342
1679
|
.tracker .stage-label {
|
|
1343
|
-
font-size:
|
|
1680
|
+
font-size: 10px;
|
|
1344
1681
|
color: var(--muted);
|
|
1345
1682
|
text-align: center;
|
|
1346
1683
|
white-space: nowrap;
|
|
@@ -1381,6 +1718,15 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1381
1718
|
.tracker-active-label { display: block; }
|
|
1382
1719
|
}
|
|
1383
1720
|
|
|
1721
|
+
/* Pane-width label collapse: the tracker stays a single horizontal row at
|
|
1722
|
+
any width. When JS detects the pane is too narrow to fit every stage
|
|
1723
|
+
label (.tracker-compact), labels collapse to circles + the standalone
|
|
1724
|
+
active label — the row never wraps onto a second line. This is keyed to
|
|
1725
|
+
the tracker's own width, so it works even when the viewport is wide but
|
|
1726
|
+
the conversation pane is narrowed by the sidebar. */
|
|
1727
|
+
.tracker.tracker-compact .stage .stage-label { display: none; }
|
|
1728
|
+
.tracker.tracker-compact .tracker-active-label { display: block; }
|
|
1729
|
+
|
|
1384
1730
|
/* Template picker popover. Fixed-position so it escapes overflow:hidden/auto
|
|
1385
1731
|
ancestors (#active-conv, .panel-details). JS sets right/bottom on open. */
|
|
1386
1732
|
.template-popover {
|
|
@@ -1986,3 +2332,1479 @@ body:is([data-surface="task-pane"],[data-surface="extension"]) .word-context-bar
|
|
|
1986
2332
|
Inherits all task-pane layout rules (via :is() above) but hides the
|
|
1987
2333
|
project label since extensions work on web pages, not local project paths. */
|
|
1988
2334
|
body[data-surface="extension"] .tp-project-label { display: none; }
|
|
2335
|
+
|
|
2336
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
2337
|
+
Issue #512 — Manager-style team flow shell
|
|
2338
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
2339
|
+
|
|
2340
|
+
/* Hide legacy .page when shell is active */
|
|
2341
|
+
body.hub-shell > .page { display: none !important; }
|
|
2342
|
+
body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
|
2343
|
+
|
|
2344
|
+
/* Get-started rail */
|
|
2345
|
+
.gs-rail { display: flex; align-items: center; gap: 10px; padding: 6px 18px; background: #eef4ff; border-bottom: 1px solid rgba(0,113,227,.18); font-size: 12px; flex-shrink: 0; }
|
|
2346
|
+
.gs-rocket { font-size: 14px; flex-shrink: 0; }
|
|
2347
|
+
.gs-steps { display: flex; align-items: center; gap: 4px; flex: 1; }
|
|
2348
|
+
.gs-step { padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; background: none; border: none; }
|
|
2349
|
+
.gs-step.done { color: var(--done); }
|
|
2350
|
+
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; }
|
|
2351
|
+
.gs-sep { color: var(--line); font-size: 11px; }
|
|
2352
|
+
.gs-cta { padding: 5px 14px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
|
|
2353
|
+
.gs-hide { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; flex-shrink: 0; width: 22px; height: 22px; }
|
|
2354
|
+
.gs-pill { position: fixed; bottom: 16px; right: 16px; z-index: 60; background: var(--accent); color: #fff; border: none; border-radius: 20px; font-size: 12px; font-weight: 600; padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
|
|
2355
|
+
.gs-pill[hidden] { display: none; }
|
|
2356
|
+
|
|
2357
|
+
/* Top nav: Company / Manager / Projects + avatar */
|
|
2358
|
+
.hub-tabs { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 8px 0 0; flex-shrink: 0; position: relative; }
|
|
2359
|
+
.htab { padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
|
|
2360
|
+
.htab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
2361
|
+
.htab:hover { color: var(--text); }
|
|
2362
|
+
.hub-tabs-spacer { flex: 1; }
|
|
2363
|
+
.hub-avatar-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 10px; font-weight: 700; cursor: pointer; flex-shrink: 0; margin: 0 6px; }
|
|
2364
|
+
|
|
2365
|
+
/* Account menu */
|
|
2366
|
+
.account-menu { display: none; position: absolute; top: 44px; right: 8px; width: 260px; z-index: 90; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
|
|
2367
|
+
.account-menu.open { display: block; }
|
|
2368
|
+
.am-header { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
|
|
2369
|
+
.am-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
|
|
2370
|
+
.am-name { font-size: 13px; font-weight: 700; }
|
|
2371
|
+
.am-email { font-size: 11px; color: var(--muted); }
|
|
2372
|
+
.am-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; }
|
|
2373
|
+
.am-item:hover { background: var(--bg); }
|
|
2374
|
+
.am-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; margin-top: 1px; }
|
|
2375
|
+
.am-label { font-weight: 600; }
|
|
2376
|
+
.am-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2377
|
+
.am-div { height: 1px; background: var(--line); margin: 4px 0; }
|
|
2378
|
+
.am-foot { padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
|
|
2379
|
+
.am-foot:hover { background: var(--bg); }
|
|
2380
|
+
|
|
2381
|
+
/* Hub areas */
|
|
2382
|
+
.hub-area { display: none; flex: 1; overflow: hidden; }
|
|
2383
|
+
.hub-area.on { display: flex; flex-direction: column; }
|
|
2384
|
+
.hub-area-page { max-width: 860px; margin: 0 auto; padding: 28px 24px 48px; overflow-y: auto; flex: 1; /* authoritative rule — see also Round-2 override below which is now removed */ }
|
|
2385
|
+
|
|
2386
|
+
/* #521 R6: Company/Manager use the same rail + main shell as the project workspace. */
|
|
2387
|
+
.area-shell { display: flex; flex: 1; min-height: 0; }
|
|
2388
|
+
.area-rail { width: 244px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 6px 0; }
|
|
2389
|
+
.area-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
2390
|
+
.area-rail-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; }
|
|
2391
|
+
.area-rail-job { display: flex; align-items: center; gap: 11px; padding: 10px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
|
|
2392
|
+
.area-rail-job:hover { background: var(--bg); }
|
|
2393
|
+
.area-rail-job .arj-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
|
2394
|
+
.area-rail-job .arj-name { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
2395
|
+
.area-rail-job .arj-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2396
|
+
.area-rail-note { padding: 10px 16px 14px; font-size: 11px; color: var(--muted); line-height: 1.5; }
|
|
2397
|
+
.hub-section-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
|
|
2398
|
+
.hub-eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
|
|
2399
|
+
.hub-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; }
|
|
2400
|
+
.hub-sub { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
|
|
2401
|
+
|
|
2402
|
+
/* Profile rows */
|
|
2403
|
+
.syn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
|
|
2404
|
+
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
|
|
2405
|
+
.syn-row:last-child { border-bottom: none; }
|
|
2406
|
+
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 90px; flex-shrink: 0; padding-top: 1px; }
|
|
2407
|
+
.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
|
|
2408
|
+
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2409
|
+
|
|
2410
|
+
/* Learnings */
|
|
2411
|
+
.learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
|
|
2412
|
+
.lc-scope { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
|
|
2413
|
+
.scope-org { background: var(--accent-soft); color: var(--accent); }
|
|
2414
|
+
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
|
|
2415
|
+
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
|
|
2416
|
+
.lc-body { flex: 1; min-width: 0; }
|
|
2417
|
+
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
2418
|
+
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
2419
|
+
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
2420
|
+
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
|
|
2421
|
+
.bless-yes { background: var(--done); color: #fff; }
|
|
2422
|
+
.bless-no { background: var(--bg); color: var(--muted); }
|
|
2423
|
+
.pending-banner { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.25); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
|
|
2424
|
+
|
|
2425
|
+
/* Projects sub-tabs — HTML uses .proj-tabs (not .proj-tabs-bar) and .ptab-add (not .ptab-add-btn) */
|
|
2426
|
+
.proj-tabs, .proj-tabs-bar { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 8px 0 0; flex-shrink: 0; overflow-x: auto; }
|
|
2427
|
+
.ptab { padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; margin-bottom: -1px; }
|
|
2428
|
+
.ptab.on { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
|
|
2429
|
+
.ptab:hover { color: var(--text); }
|
|
2430
|
+
.ptab-badge { font-size: 10px; font-weight: 700; color: var(--danger); background: rgba(162,71,71,.1); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
|
|
2431
|
+
.ptab-add, .ptab-add-btn { margin-left: auto; padding: 8px 14px; font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2432
|
+
|
|
2433
|
+
/* Overview grid */
|
|
2434
|
+
#proj-overview { flex: 1; overflow-y: auto; }
|
|
2435
|
+
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 20px 18px; }
|
|
2436
|
+
.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: box-shadow .12s; }
|
|
2437
|
+
.proj-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
|
|
2438
|
+
.proj-card-add { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--muted); font-size: 13px; min-height: 120px; }
|
|
2439
|
+
.proj-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
|
|
2440
|
+
.proj-brief { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
|
2441
|
+
.proj-team { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
2442
|
+
.proj-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--danger); background: rgba(162,71,71,.09); padding: 2px 8px; border-radius: 10px; }
|
|
2443
|
+
.proj-badge.quiet { color: var(--muted); background: var(--bg); }
|
|
2444
|
+
|
|
2445
|
+
/* #521 R5/R6.4: collapsible project context sections at the top of the workspace
|
|
2446
|
+
conversation pane (Brief / Learnings), consistent with Company/Manager. */
|
|
2447
|
+
.proj-context-top { flex-shrink: 0; padding: 12px 16px 0; overflow-y: auto; max-height: 46vh; }
|
|
2448
|
+
/* #521: shared empty/CTA block — used by BOTH the Brief and Learnings sections so
|
|
2449
|
+
they look consistent (a left-aligned message, optional note, primary button). */
|
|
2450
|
+
.ctx-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; }
|
|
2451
|
+
.ctx-cta-msg { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 520px; }
|
|
2452
|
+
.ctx-cta-note { font-size: 12px; color: var(--text); line-height: 1.5; max-width: 520px; padding: 8px 12px; background: var(--soft, #f6f6f6); border: 1px solid var(--line, #e6e6e6); border-radius: 8px; }
|
|
2453
|
+
.ctx-cta-btn { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
|
|
2454
|
+
.ctx-cta-btn:hover { filter: brightness(1.05); }
|
|
2455
|
+
.ctx-loading { font-size: 13px; color: var(--muted); padding: 10px 4px; }
|
|
2456
|
+
/* #521: project-onboarding input modal (manager's direction before a run). */
|
|
2457
|
+
.obi-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; font: inherit; font-size: 14px; line-height: 1.5; padding: 11px 13px; border: 1px solid var(--line, #e2e2e2); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #1a1a1a); }
|
|
2458
|
+
.obi-input:focus { outline: none; border-color: var(--accent, #1f6feb); }
|
|
2459
|
+
.obi-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
|
|
2460
|
+
.obi-cancel { font-size: 14px; font-weight: 500; color: var(--muted, #666); background: none; border: none; padding: 10px 14px; cursor: pointer; }
|
|
2461
|
+
.obi-start { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
|
|
2462
|
+
.obi-start:hover { filter: brightness(1.05); }
|
|
2463
|
+
.ctx-acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
|
|
2464
|
+
.ctx-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
|
|
2465
|
+
.ctx-acc > summary::-webkit-details-marker { display: none; }
|
|
2466
|
+
.ctx-acc > summary:hover { background: var(--bg); }
|
|
2467
|
+
.ctx-acc > summary .ca-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
|
|
2468
|
+
.ctx-acc[open] > summary .ca-chev { transform: rotate(90deg); }
|
|
2469
|
+
.ctx-acc > summary .ca-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
|
|
2470
|
+
.ctx-acc-body { padding: 4px 14px 14px; }
|
|
2471
|
+
|
|
2472
|
+
/* #521: project-onboarding loop banner inside the Brief — "team is processing /
|
|
2473
|
+
here's their understanding to review". */
|
|
2474
|
+
.ob-brief-banner { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 12px 14px; margin: 6px 0 12px; font-size: 13px; line-height: 1.5; }
|
|
2475
|
+
.ob-brief-banner .obb-ico { font-size: 16px; flex-shrink: 0; }
|
|
2476
|
+
.ob-brief-banner.ob-processing { background: var(--accent-soft); border: 1px solid rgba(0,113,227,.22); color: var(--text); }
|
|
2477
|
+
.ob-brief-banner.ob-review { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.3); color: var(--text); }
|
|
2478
|
+
|
|
2479
|
+
/* Project workspace */
|
|
2480
|
+
#proj-workspace {
|
|
2481
|
+
--tree-sidebar-width: 216px;
|
|
2482
|
+
display: flex;
|
|
2483
|
+
flex: 1;
|
|
2484
|
+
min-height: 0;
|
|
2485
|
+
}
|
|
2486
|
+
.tree-sidebar {
|
|
2487
|
+
width: var(--tree-sidebar-width);
|
|
2488
|
+
min-width: 176px;
|
|
2489
|
+
max-width: 380px;
|
|
2490
|
+
flex-shrink: 0;
|
|
2491
|
+
background: var(--surface);
|
|
2492
|
+
border-right: 1px solid var(--line);
|
|
2493
|
+
overflow-y: auto;
|
|
2494
|
+
overflow-x: hidden;
|
|
2495
|
+
display: flex;
|
|
2496
|
+
flex-direction: column;
|
|
2497
|
+
padding: 10px 0;
|
|
2498
|
+
}
|
|
2499
|
+
.tree-collapse-btn {
|
|
2500
|
+
width: 22px;
|
|
2501
|
+
flex-shrink: 0;
|
|
2502
|
+
border: 0;
|
|
2503
|
+
border-right: 1px solid var(--line);
|
|
2504
|
+
background: var(--surface);
|
|
2505
|
+
color: var(--muted);
|
|
2506
|
+
cursor: pointer;
|
|
2507
|
+
display: grid;
|
|
2508
|
+
place-items: center;
|
|
2509
|
+
font-size: 18px;
|
|
2510
|
+
line-height: 1;
|
|
2511
|
+
padding: 0;
|
|
2512
|
+
}
|
|
2513
|
+
.tree-collapse-btn:hover {
|
|
2514
|
+
color: var(--text);
|
|
2515
|
+
background: var(--bg);
|
|
2516
|
+
}
|
|
2517
|
+
.tree-collapse-btn::before { content: "<"; }
|
|
2518
|
+
.tree-resizer {
|
|
2519
|
+
width: 7px;
|
|
2520
|
+
flex-shrink: 0;
|
|
2521
|
+
cursor: col-resize;
|
|
2522
|
+
background: linear-gradient(to right, transparent 0 2px, var(--line) 2px 3px, transparent 3px 100%);
|
|
2523
|
+
}
|
|
2524
|
+
.tree-resizer:hover,
|
|
2525
|
+
#proj-workspace.tree-resizing .tree-resizer {
|
|
2526
|
+
background: linear-gradient(to right, transparent 0 2px, var(--accent) 2px 4px, transparent 4px 100%);
|
|
2527
|
+
}
|
|
2528
|
+
#proj-workspace.tree-collapsed .tree-sidebar {
|
|
2529
|
+
width: 0;
|
|
2530
|
+
min-width: 0;
|
|
2531
|
+
max-width: 0;
|
|
2532
|
+
padding: 0;
|
|
2533
|
+
border-right: 0;
|
|
2534
|
+
overflow: hidden;
|
|
2535
|
+
}
|
|
2536
|
+
#proj-workspace.tree-collapsed .tree-sidebar > * { display: none; }
|
|
2537
|
+
#proj-workspace.tree-collapsed .tree-collapse-btn::before { content: ">"; }
|
|
2538
|
+
#proj-workspace.tree-collapsed .tree-resizer { display: none; }
|
|
2539
|
+
.tree-emp { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; user-select: none; }
|
|
2540
|
+
.tree-emp:hover { background: var(--bg); }
|
|
2541
|
+
.t-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
2542
|
+
.t-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
|
|
2543
|
+
.t-emp-add { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 14px; line-height: 20px; text-align: center; opacity: 1; border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; transition: background .1s, border-color .1s; }
|
|
2544
|
+
.tree-emp:hover .t-emp-add { background: var(--accent-soft); border-color: rgba(0,113,227,.28); }
|
|
2545
|
+
.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
|
2546
|
+
.tree-job { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 44px; cursor: pointer; }
|
|
2547
|
+
.tree-job:hover { background: var(--bg); }
|
|
2548
|
+
.tree-job.selected { background: var(--bg); }
|
|
2549
|
+
.tj-label { font-size: 12px; color: var(--muted); flex: 1; }
|
|
2550
|
+
.tree-job.selected .tj-label { color: var(--text); font-weight: 500; }
|
|
2551
|
+
.tj-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
2552
|
+
|
|
2553
|
+
/* #533 R6 — delete a run. Hover-revealed controls (mirrors the eh-add "+"
|
|
2554
|
+
affordance) plus a small inline confirm. Hub-local delete; never touches disk. */
|
|
2555
|
+
.conv-item { position: relative; }
|
|
2556
|
+
.run-del { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
|
|
2557
|
+
width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
|
|
2558
|
+
background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1;
|
|
2559
|
+
display: none; align-items: center; justify-content: center; cursor: pointer; }
|
|
2560
|
+
.conv-item:hover .run-del, .run-del:focus-visible { display: flex; }
|
|
2561
|
+
.run-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
|
|
2562
|
+
.tree-job { position: relative; }
|
|
2563
|
+
.tree-job .tj-del { margin-left: 4px; width: 18px; height: 18px; border-radius: 5px;
|
|
2564
|
+
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
|
|
2565
|
+
font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center;
|
|
2566
|
+
cursor: pointer; flex-shrink: 0; }
|
|
2567
|
+
.tree-job:hover .tj-del, .tj-del:focus-visible { display: flex; }
|
|
2568
|
+
.tree-job .tj-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
|
|
2569
|
+
.del-confirm { margin: 8px 14px 4px; background: var(--surface); border: 1px solid var(--line);
|
|
2570
|
+
border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--text); line-height: 1.5; }
|
|
2571
|
+
.del-confirm .dc-row { display: flex; gap: 8px; margin-top: 8px; }
|
|
2572
|
+
.del-confirm button { font: inherit; font-size: 12px; border-radius: 7px; padding: 5px 12px; cursor: pointer; }
|
|
2573
|
+
.del-confirm .dc-del { background: var(--danger, #d2261f); color: #fff; border: none; }
|
|
2574
|
+
.del-confirm .dc-cancel { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
|
|
2575
|
+
|
|
2576
|
+
/* R1 (#521): employees are the heroes — large accordion rows replace .tree-emp.
|
|
2577
|
+
The summary is the employee (40px avatar, name, role, status dot); their jobs
|
|
2578
|
+
nest in the body and collapse with the row. */
|
|
2579
|
+
/* .proj-updates-acc shares this chrome but is intentionally NOT .emp-hero (that
|
|
2580
|
+
class is the employee-hero selector). */
|
|
2581
|
+
.emp-hero, .proj-updates-acc { border-bottom: 1px solid var(--line); }
|
|
2582
|
+
.emp-hero > summary, .proj-updates-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 11px 14px; user-select: none; }
|
|
2583
|
+
.emp-hero > summary::-webkit-details-marker, .proj-updates-acc > summary::-webkit-details-marker { display: none; }
|
|
2584
|
+
.emp-hero > summary:hover, .proj-updates-acc > summary:hover { background: var(--bg); }
|
|
2585
|
+
.emp-hero .eh-av, .proj-updates-acc .eh-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
|
|
2586
|
+
.emp-hero .eh-id, .proj-updates-acc .eh-id { flex: 1; min-width: 0; }
|
|
2587
|
+
.emp-hero .eh-name, .proj-updates-acc .eh-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
|
|
2588
|
+
.emp-hero .eh-role, .proj-updates-acc .eh-role { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2589
|
+
.emp-hero .eh-dot, .proj-updates-acc .eh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
|
2590
|
+
.emp-hero .eh-add, .proj-updates-acc .eh-add { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 13px; line-height: 18px; text-align: center; flex-shrink: 0; border: 1px solid var(--line); opacity: 0; transition: opacity .12s; cursor: pointer; }
|
|
2591
|
+
.emp-hero > summary:hover .eh-add, .proj-updates-acc > summary:hover .eh-add { opacity: 1; }
|
|
2592
|
+
/* Issue #538 — per-employee "find a human manager" action in the employee hero. */
|
|
2593
|
+
.emp-hero .eh-hire-manager { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); font-size: 12px; line-height: 20px; text-align: center; flex-shrink: 0; border: 1px solid var(--line); opacity: 0; transition: opacity .12s; cursor: pointer; padding: 0; }
|
|
2594
|
+
.emp-hero > summary:hover .eh-hire-manager { opacity: 1; }
|
|
2595
|
+
.emp-hero .eh-hire-manager:hover { border-color: var(--accent); }
|
|
2596
|
+
/* Project Updates "+" is a primary affordance — always visible, not hover-only. */
|
|
2597
|
+
.proj-updates-acc .eh-add { opacity: 1; }
|
|
2598
|
+
.emp-hero .eh-chev, .proj-updates-acc .eh-chev { font-size: 10px; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
|
|
2599
|
+
.emp-hero[open] > summary .eh-chev, .proj-updates-acc[open] > summary .eh-chev { transform: rotate(90deg); }
|
|
2600
|
+
.emp-hero .eh-jobs, .proj-updates-acc .eh-jobs { padding: 0 0 6px; }
|
|
2601
|
+
.emp-hero .eh-jobs .tree-job, .proj-updates-acc .eh-jobs .tree-job { padding-left: 36px; }
|
|
2602
|
+
.emp-hero .eh-empty, .proj-updates-acc .eh-empty { font-size: 11px; color: var(--muted); padding: 4px 14px 6px 36px; }
|
|
2603
|
+
.tree-sep { height: 1px; background: var(--line); margin: 6px 14px; }
|
|
2604
|
+
.tree-action { margin: 2px 14px; padding: 7px 10px; font-size: 12px; color: var(--accent); font-weight: 600; background: none; border: none; cursor: pointer; text-align: left; width: calc(100% - 28px); }
|
|
2605
|
+
.tree-action:hover { background: var(--bg); border-radius: 8px; }
|
|
2606
|
+
.tree-legend { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
|
|
2607
|
+
.tree-legend-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
|
|
2608
|
+
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
|
|
2609
|
+
|
|
2610
|
+
/* Dot color helpers */
|
|
2611
|
+
.dot-red { background: var(--state-waiting) !important; }
|
|
2612
|
+
.dot-amber { background: var(--state-working) !important; }
|
|
2613
|
+
.dot-green { background: var(--state-complete) !important; }
|
|
2614
|
+
.dot-grey { background: var(--line) !important; }
|
|
2615
|
+
/* #549 R4: amber-static — same amber colour as dot-amber but no pulse animation.
|
|
2616
|
+
Used for manager-stopped runs to distinguish intentional pause from active work. */
|
|
2617
|
+
.dot-amber-static { background: var(--warn) !important; }
|
|
2618
|
+
|
|
2619
|
+
/* Workspace conversation pane */
|
|
2620
|
+
.workspace-conv { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
|
|
2621
|
+
.workspace-conv > .page { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 0; max-width: none; }
|
|
2622
|
+
.workspace-conv .layout { flex: 1; min-height: 0; overflow: hidden; }
|
|
2623
|
+
.workspace-conv .conversation { flex: 1; width: 100%; min-width: 0; }
|
|
2624
|
+
.workspace-conv .panel-details--thread { overflow: hidden; }
|
|
2625
|
+
|
|
2626
|
+
/* #521 UI rework: the project workspace has TWO mutually-exclusive views inside
|
|
2627
|
+
.workspace-conv — the Brief & Learnings page (#proj-context-top) and the job
|
|
2628
|
+
conversation (.page). Cramming both into one pane left the conversation short
|
|
2629
|
+
and squeezed the thread/coach/micro-manage. Now a job conversation gets the
|
|
2630
|
+
FULL height (no Brief stealing space), and the Brief is its own page reached
|
|
2631
|
+
from the sidebar. JS toggles .mode-conv / .mode-brief on .workspace-conv. */
|
|
2632
|
+
.workspace-conv.mode-conv #proj-context-top { display: none; }
|
|
2633
|
+
.workspace-conv.mode-brief > .page { display: none !important; }
|
|
2634
|
+
.workspace-conv.mode-brief #proj-context-top {
|
|
2635
|
+
max-height: none;
|
|
2636
|
+
flex: 1 1 auto;
|
|
2637
|
+
min-height: 0;
|
|
2638
|
+
overflow-y: auto;
|
|
2639
|
+
padding: 16px 18px;
|
|
2640
|
+
}
|
|
2641
|
+
|
|
2642
|
+
/* Conversation view (full height): thread gets priority with a usable floor and
|
|
2643
|
+
scrolls its messages internally; the support-stack stacks naturally and scrolls
|
|
2644
|
+
on its own when both coach + micro-manage are open (it must NOT be a height-
|
|
2645
|
+
distributing grid, or it clips the open panels — the original bug). */
|
|
2646
|
+
.workspace-conv #active-conv {
|
|
2647
|
+
overflow: hidden;
|
|
2648
|
+
display: grid;
|
|
2649
|
+
grid-template-rows: auto auto minmax(200px, 1fr) auto;
|
|
2650
|
+
}
|
|
2651
|
+
.workspace-conv #thread-panel[open] { min-height: 0; display: flex; flex-direction: column; }
|
|
2652
|
+
.workspace-conv #thread-panel > summary { flex-shrink: 0; }
|
|
2653
|
+
.workspace-conv #thread-panel #messages { flex: 1; min-height: 0; overflow-y: auto; }
|
|
2654
|
+
.workspace-conv .support-stack {
|
|
2655
|
+
display: block; /* override base display:grid so panels stack, not clip */
|
|
2656
|
+
min-height: 0;
|
|
2657
|
+
max-height: 48vh; /* bounded; scrolls internally if both panels open */
|
|
2658
|
+
overflow-y: auto;
|
|
2659
|
+
}
|
|
2660
|
+
.workspace-conv .support-stack > .panel-details,
|
|
2661
|
+
.workspace-conv .support-stack > .micro { margin-bottom: 8px; }
|
|
2662
|
+
|
|
2663
|
+
@media (max-width: 640px) {
|
|
2664
|
+
body.hub-shell { overflow-x: hidden; }
|
|
2665
|
+
.gs-rail { overflow-x: auto; padding-inline: 10px; }
|
|
2666
|
+
.hub-tabs { min-width: 0; }
|
|
2667
|
+
.htab { padding-inline: 14px; }
|
|
2668
|
+
.proj-tabs,
|
|
2669
|
+
.proj-tabs-bar {
|
|
2670
|
+
min-width: 0;
|
|
2671
|
+
}
|
|
2672
|
+
#proj-workspace {
|
|
2673
|
+
flex-direction: column;
|
|
2674
|
+
overflow: hidden;
|
|
2675
|
+
}
|
|
2676
|
+
.tree-sidebar {
|
|
2677
|
+
width: 100%;
|
|
2678
|
+
min-width: 0;
|
|
2679
|
+
max-width: none;
|
|
2680
|
+
max-height: 210px;
|
|
2681
|
+
border-right: none;
|
|
2682
|
+
border-bottom: 1px solid var(--line);
|
|
2683
|
+
}
|
|
2684
|
+
.tree-collapse-btn,
|
|
2685
|
+
.tree-resizer {
|
|
2686
|
+
display: none;
|
|
2687
|
+
}
|
|
2688
|
+
#proj-workspace.tree-collapsed .tree-sidebar {
|
|
2689
|
+
width: 100%;
|
|
2690
|
+
max-width: none;
|
|
2691
|
+
padding: 10px 0;
|
|
2692
|
+
border-bottom: 1px solid var(--line);
|
|
2693
|
+
overflow-y: auto;
|
|
2694
|
+
}
|
|
2695
|
+
#proj-workspace.tree-collapsed .tree-sidebar > * { display: flex; }
|
|
2696
|
+
.workspace-conv {
|
|
2697
|
+
width: 100%;
|
|
2698
|
+
min-width: 0;
|
|
2699
|
+
}
|
|
2700
|
+
.workspace-conv .layout {
|
|
2701
|
+
min-width: 0;
|
|
2702
|
+
}
|
|
2703
|
+
}
|
|
2704
|
+
|
|
2705
|
+
/* Review surfaces */
|
|
2706
|
+
.completion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
|
|
2707
|
+
.completion-card .cc-title { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
|
|
2708
|
+
.completion-card .cc-row { font-size: 13px; color: var(--text); line-height: 1.65; }
|
|
2709
|
+
.art-strip2 { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); }
|
|
2710
|
+
.art-strip2 .as-name { font-size: 13px; font-weight: 600; }
|
|
2711
|
+
.art-strip2 .as-sub { font-size: 11px; color: var(--muted); }
|
|
2712
|
+
.act-bar { border-top: 1px solid var(--line); padding: 8px 16px 12px; background: var(--surface); }
|
|
2713
|
+
.act-note { font-size: 11px; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }
|
|
2714
|
+
.act-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
|
|
2715
|
+
.act-row .chips-label { font-size: 11px; color: var(--muted); font-weight: 600; }
|
|
2716
|
+
.act-input { display: flex; gap: 10px; align-items: flex-end; }
|
|
2717
|
+
.act-input textarea { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); resize: none; height: 42px; }
|
|
2718
|
+
.rv-open { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--text); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2719
|
+
.rv-ghost { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; }
|
|
2720
|
+
.rv-changes { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--bg); color: var(--warn); border: 1px solid rgba(176,132,66,.35); cursor: pointer; flex-shrink: 0; }
|
|
2721
|
+
.rv-approve { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 14px; background: var(--done); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2722
|
+
|
|
2723
|
+
/* Modals */
|
|
2724
|
+
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 70; overflow-y: auto; }
|
|
2725
|
+
.modal-backdrop.open { display: block; }
|
|
2726
|
+
.modal-card { max-width: 560px; margin: 48px auto; background: var(--surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.22); overflow: hidden; }
|
|
2727
|
+
.modal-hdr { padding: 18px 22px; border-bottom: 1px solid var(--line); }
|
|
2728
|
+
.modal-hdr h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
|
|
2729
|
+
.modal-hdr p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
|
|
2730
|
+
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
|
|
2731
|
+
.modal-close { float: right; background: var(--bg); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--muted); line-height: 1; }
|
|
2732
|
+
.modal-close:hover { color: var(--text); }
|
|
2733
|
+
.modal-footer { padding: 12px 22px 20px; display: flex; align-items: center; justify-content: space-between; }
|
|
2734
|
+
.modal-next { padding: 9px 22px; background: var(--text); color: #fff; border: none; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
|
|
2735
|
+
.modal-back { font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; }
|
|
2736
|
+
.modal-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
|
|
2737
|
+
.modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
|
|
2738
|
+
.modal-dot.on { background: var(--text); }
|
|
2739
|
+
.np-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
|
|
2740
|
+
.np-field input, .np-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); resize: none; }
|
|
2741
|
+
.np-field input:focus, .np-field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
2742
|
+
.job-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
2743
|
+
.job-row:last-child { border-bottom: none; }
|
|
2744
|
+
.job-row .jr-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
2745
|
+
.job-row .jr-body { flex: 1; min-width: 0; }
|
|
2746
|
+
.job-row .jr-name { font-size: 13px; font-weight: 600; }
|
|
2747
|
+
.job-row .jr-who { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2748
|
+
.job-row.locked { cursor: pointer; opacity: .72; }
|
|
2749
|
+
.jr-lock { font-size: 11px; color: var(--muted); flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
|
|
2750
|
+
.jr-action { font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 13px; background: var(--accent); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2751
|
+
.modal-cat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 2px; }
|
|
2752
|
+
.emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
|
2753
|
+
.emp-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; background: var(--bg); }
|
|
2754
|
+
.emp-tile:hover, .emp-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
|
|
2755
|
+
.et-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
|
|
2756
|
+
.et-name { font-size: 12px; font-weight: 600; color: var(--text); }
|
|
2757
|
+
.et-role { font-size: 10px; color: var(--muted); }
|
|
2758
|
+
.emp-tile.selected .et-name { color: var(--accent); }
|
|
2759
|
+
.pricing-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-width: 380px; margin: 48px auto; text-align: center; padding: 28px 28px 24px; }
|
|
2760
|
+
.pricing-av { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; margin: 0 auto 14px; }
|
|
2761
|
+
.pricing-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 16px; }
|
|
2762
|
+
.sum-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
2763
|
+
.sum-row:last-child { border-bottom: none; }
|
|
2764
|
+
.sum-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 80px; flex-shrink: 0; padding-top: 1px; }
|
|
2765
|
+
.sum-val { font-size: 13px; color: var(--text); flex: 1; line-height: 1.5; }
|
|
2766
|
+
.sum-team { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
|
|
2767
|
+
.brief-start-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 4px; }
|
|
2768
|
+
|
|
2769
|
+
|
|
2770
|
+
/* ── #512 CSS class-name corrections (hub-tab vs htab, avatar-btn, legacy suppression) ── */
|
|
2771
|
+
|
|
2772
|
+
/* The nav buttons use hub-tab, not htab */
|
|
2773
|
+
.hub-tab { padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
|
|
2774
|
+
.hub-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
2775
|
+
.hub-tab:hover { color: var(--text); }
|
|
2776
|
+
|
|
2777
|
+
/* Avatar button */
|
|
2778
|
+
.avatar-btn {
|
|
2779
|
+
width: 32px; height: 32px; border-radius: 50%;
|
|
2780
|
+
background: var(--accent); color: #fff;
|
|
2781
|
+
border: 2px solid rgba(255,255,255,0.3);
|
|
2782
|
+
font-size: 12px; font-weight: 700; letter-spacing: .02em;
|
|
2783
|
+
cursor: pointer; flex-shrink: 0; margin-left: auto;
|
|
2784
|
+
display: flex; align-items: center; justify-content: center;
|
|
2785
|
+
box-shadow: 0 1px 4px rgba(0,0,0,.18);
|
|
2786
|
+
transition: opacity .12s, box-shadow .12s;
|
|
2787
|
+
}
|
|
2788
|
+
.avatar-btn:hover { opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
|
|
2789
|
+
|
|
2790
|
+
/* Suppress the old Hub's header and rail when inside the workspace-conv */
|
|
2791
|
+
.workspace-conv .header { display: none !important; }
|
|
2792
|
+
.workspace-conv .rail { display: none !important; }
|
|
2793
|
+
|
|
2794
|
+
/* The legacy "+ New job" entry (#new-conv-btn) is relocated by tfRenderTree out
|
|
2795
|
+
of the suppressed rail into the visible tree-sidebar. Style it as the
|
|
2796
|
+
prominent top action so the standalone conversation flow stays reachable. */
|
|
2797
|
+
#tree-sidebar #new-conv-btn.tree-new-conv {
|
|
2798
|
+
display: block;
|
|
2799
|
+
width: 100%;
|
|
2800
|
+
margin: 0 0 4px;
|
|
2801
|
+
padding: 9px 12px;
|
|
2802
|
+
font-size: 13px;
|
|
2803
|
+
font-weight: 600;
|
|
2804
|
+
text-align: left;
|
|
2805
|
+
color: #fff;
|
|
2806
|
+
background: var(--accent, #1f6feb);
|
|
2807
|
+
border: none;
|
|
2808
|
+
border-radius: 8px;
|
|
2809
|
+
cursor: pointer;
|
|
2810
|
+
}
|
|
2811
|
+
#tree-sidebar #new-conv-btn.tree-new-conv:hover { filter: brightness(1.05); }
|
|
2812
|
+
|
|
2813
|
+
/* #521: Brief & Learnings nav entry — the project's own page, above New job. */
|
|
2814
|
+
#tree-sidebar .tree-brief-nav {
|
|
2815
|
+
display: flex;
|
|
2816
|
+
align-items: center;
|
|
2817
|
+
gap: 8px;
|
|
2818
|
+
width: 100%;
|
|
2819
|
+
margin: 0 0 6px;
|
|
2820
|
+
padding: 9px 12px;
|
|
2821
|
+
font-size: 13px;
|
|
2822
|
+
font-weight: 600;
|
|
2823
|
+
text-align: left;
|
|
2824
|
+
color: var(--ink, #1a1a1a);
|
|
2825
|
+
background: var(--surface, #fff);
|
|
2826
|
+
border: 1px solid var(--line, #e2e2e2);
|
|
2827
|
+
border-radius: 8px;
|
|
2828
|
+
cursor: pointer;
|
|
2829
|
+
}
|
|
2830
|
+
#tree-sidebar .tree-brief-nav:hover { background: var(--bg, #f6f6f6); }
|
|
2831
|
+
#tree-sidebar .tree-brief-nav.active {
|
|
2832
|
+
border-color: var(--accent, #1f6feb);
|
|
2833
|
+
background: color-mix(in srgb, var(--accent, #1f6feb) 8%, transparent);
|
|
2834
|
+
color: var(--accent, #1f6feb);
|
|
2835
|
+
}
|
|
2836
|
+
#tree-sidebar .tree-brief-nav .tbn-ico { font-size: 14px; }
|
|
2837
|
+
|
|
2838
|
+
/* #521: Project Updates accordion — groups project-onboarding + sleep-on-learnings
|
|
2839
|
+
with run history. Reuses .emp-hero/.area-rail-acc chrome; adds the "+" run menu. */
|
|
2840
|
+
#tree-sidebar .proj-updates-acc { position: relative; }
|
|
2841
|
+
#tree-sidebar .pu-menu {
|
|
2842
|
+
position: absolute;
|
|
2843
|
+
top: 46px;
|
|
2844
|
+
right: 8px;
|
|
2845
|
+
z-index: 40;
|
|
2846
|
+
min-width: 200px;
|
|
2847
|
+
background: var(--surface, #fff);
|
|
2848
|
+
border: 1px solid var(--line, #e2e2e2);
|
|
2849
|
+
border-radius: 10px;
|
|
2850
|
+
box-shadow: 0 8px 24px rgba(0,0,0,.12);
|
|
2851
|
+
padding: 6px;
|
|
2852
|
+
}
|
|
2853
|
+
#tree-sidebar .pu-menu-item {
|
|
2854
|
+
display: flex;
|
|
2855
|
+
align-items: center;
|
|
2856
|
+
gap: 8px;
|
|
2857
|
+
width: 100%;
|
|
2858
|
+
padding: 8px 10px;
|
|
2859
|
+
font-size: 13px;
|
|
2860
|
+
text-align: left;
|
|
2861
|
+
color: var(--ink, #1a1a1a);
|
|
2862
|
+
background: transparent;
|
|
2863
|
+
border: none;
|
|
2864
|
+
border-radius: 7px;
|
|
2865
|
+
cursor: pointer;
|
|
2866
|
+
}
|
|
2867
|
+
#tree-sidebar .pu-menu-item:hover { background: var(--bg, #f6f6f6); }
|
|
2868
|
+
#tree-sidebar .pu-job { padding: 4px 0 2px; }
|
|
2869
|
+
#tree-sidebar .pu-job + .pu-job { margin-top: 4px; border-top: 1px solid var(--line, #ececec); padding-top: 8px; }
|
|
2870
|
+
#tree-sidebar .pu-job-name {
|
|
2871
|
+
font-size: 12px;
|
|
2872
|
+
font-weight: 700;
|
|
2873
|
+
letter-spacing: .02em;
|
|
2874
|
+
color: var(--muted, #666);
|
|
2875
|
+
padding: 2px 2px 4px;
|
|
2876
|
+
}
|
|
2877
|
+
|
|
2878
|
+
/* Relocated Runs section (legacy conversation switcher) inside the tree. */
|
|
2879
|
+
#tree-sidebar .rail-section--runs.tree-runs { display: block; margin-top: 6px; }
|
|
2880
|
+
#tree-sidebar .rail-section--runs.tree-runs .rail-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sub); margin: 4px 0; }
|
|
2881
|
+
#tree-sidebar .rail-section--runs.tree-runs .conv-list { display: block; }
|
|
2882
|
+
#tree-sidebar .rail-section--runs.tree-runs .conv-item { display: flex; width: 100%; text-align: left; }
|
|
2883
|
+
|
|
2884
|
+
/* Make workspace-conv take the remaining flex space and hide its outer scrollbar */
|
|
2885
|
+
.workspace-conv > .page { overflow: hidden; }
|
|
2886
|
+
.workspace-conv .layout { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
|
|
2887
|
+
|
|
2888
|
+
|
|
2889
|
+
/* ── #512 Round 2: actual class names from rendered HTML ────────────────── */
|
|
2890
|
+
|
|
2891
|
+
/* Area layout — (D35 fix: consolidated at line ~2037; this duplicate removed) */
|
|
2892
|
+
.eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
|
|
2893
|
+
.area-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; }
|
|
2894
|
+
.area-lede { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
|
|
2895
|
+
.sec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
2896
|
+
|
|
2897
|
+
/* Profile card */
|
|
2898
|
+
.card.area-profile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; margin-top: 10px; }
|
|
2899
|
+
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
|
|
2900
|
+
.syn-row:last-child { border-bottom: none; }
|
|
2901
|
+
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 88px; flex-shrink: 0; padding-top: 2px; }
|
|
2902
|
+
.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
|
|
2903
|
+
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2904
|
+
|
|
2905
|
+
/* Issue #512 R3/R8 — Team Context inline editor. */
|
|
2906
|
+
/* ctx-content is now a div with rendered markdown (formatEmployeeText), not a raw <pre> */
|
|
2907
|
+
.ctx-content { font-size: 13px; line-height: 1.6; color: var(--text); word-break: break-word; }
|
|
2908
|
+
.ctx-content p { margin: 0 0 6px; }
|
|
2909
|
+
.ctx-content p:last-child { margin-bottom: 0; }
|
|
2910
|
+
.ctx-content ul, .ctx-content ol { margin: 4px 0 6px 18px; padding: 0; }
|
|
2911
|
+
.ctx-content li { margin-bottom: 3px; }
|
|
2912
|
+
.ctx-content h1, .ctx-content h2, .ctx-content h3 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
|
|
2913
|
+
.ctx-content code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
|
|
2914
|
+
.ctx-content strong { font-weight: 700; }
|
|
2915
|
+
.ctx-path { margin-top: 6px; font-size: 11px; color: var(--sub); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
2916
|
+
|
|
2917
|
+
/* #533 R1/R2 — readable context/rules document view: keep section headings and the
|
|
2918
|
+
file's numbering instead of flattening to compacted lines. */
|
|
2919
|
+
.ctx-doc { font-size: 13px; line-height: 1.6; color: var(--text); }
|
|
2920
|
+
.ctx-doc .cd-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
|
|
2921
|
+
.ctx-doc .cd-h:first-child { margin-top: 0; }
|
|
2922
|
+
.ctx-doc ol, .ctx-doc ul { margin: 0 0 6px; padding-left: 22px; }
|
|
2923
|
+
.ctx-doc ol li, .ctx-doc ul li { margin: 0 0 4px; padding-left: 3px; }
|
|
2924
|
+
.ctx-doc ol li::marker { color: var(--muted); font-weight: 600; }
|
|
2925
|
+
.ctx-doc p { margin: 0 0 8px; }
|
|
2926
|
+
.ctx-doc p:last-child, .ctx-doc ol:last-child, .ctx-doc ul:last-child { margin-bottom: 0; }
|
|
2927
|
+
.ctx-editor { width: 100%; min-height: 160px; resize: vertical; box-sizing: border-box; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
|
|
2928
|
+
.ctx-editor:focus { outline: none; border-color: var(--accent); }
|
|
2929
|
+
.ctx-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
|
|
2930
|
+
.ctx-save { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
|
|
2931
|
+
.ctx-save:disabled { opacity: .6; cursor: default; }
|
|
2932
|
+
.ctx-cancel { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; }
|
|
2933
|
+
.ctx-err { font-size: 12px; color: var(--red, #d33); }
|
|
2934
|
+
.ctx-rerun-row { justify-content: flex-end; }
|
|
2935
|
+
|
|
2936
|
+
/* Friendly context/rules view: managers should not have to read Markdown. */
|
|
2937
|
+
.ctx-content ul,
|
|
2938
|
+
.ctx-content ol,
|
|
2939
|
+
.ctx-content h1,
|
|
2940
|
+
.ctx-content h2,
|
|
2941
|
+
.ctx-content h3,
|
|
2942
|
+
.ctx-content code {
|
|
2943
|
+
all: unset;
|
|
2944
|
+
}
|
|
2945
|
+
.ctx-content {
|
|
2946
|
+
display: flex;
|
|
2947
|
+
flex-direction: column;
|
|
2948
|
+
gap: 7px;
|
|
2949
|
+
}
|
|
2950
|
+
.ctx-context-line {
|
|
2951
|
+
padding: 3px 0;
|
|
2952
|
+
font-size: 13px;
|
|
2953
|
+
line-height: 1.5;
|
|
2954
|
+
}
|
|
2955
|
+
.ctx-rule-block {
|
|
2956
|
+
font-size: 13px;
|
|
2957
|
+
line-height: 1.55;
|
|
2958
|
+
white-space: pre-wrap;
|
|
2959
|
+
}
|
|
2960
|
+
.ctx-rule-item {
|
|
2961
|
+
position: relative;
|
|
2962
|
+
padding: 8px 10px 8px 28px;
|
|
2963
|
+
border: 1px solid var(--line);
|
|
2964
|
+
border-radius: 8px;
|
|
2965
|
+
background: var(--bg);
|
|
2966
|
+
font-size: 13px;
|
|
2967
|
+
line-height: 1.45;
|
|
2968
|
+
}
|
|
2969
|
+
.ctx-rule-item::before {
|
|
2970
|
+
content: "";
|
|
2971
|
+
position: absolute;
|
|
2972
|
+
left: 11px;
|
|
2973
|
+
top: 15px;
|
|
2974
|
+
width: 7px;
|
|
2975
|
+
height: 7px;
|
|
2976
|
+
border-radius: 50%;
|
|
2977
|
+
background: var(--accent);
|
|
2978
|
+
opacity: .65;
|
|
2979
|
+
}
|
|
2980
|
+
.ctx-editor {
|
|
2981
|
+
min-height: 132px;
|
|
2982
|
+
font-family: inherit;
|
|
2983
|
+
font-size: 13px;
|
|
2984
|
+
}
|
|
2985
|
+
.ctx-rule-editor { display: flex; flex-direction: column; gap: 8px; }
|
|
2986
|
+
.ctx-rule-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
|
|
2987
|
+
.ctx-rule-input {
|
|
2988
|
+
min-width: 0;
|
|
2989
|
+
width: 100%;
|
|
2990
|
+
box-sizing: border-box;
|
|
2991
|
+
padding: 9px 10px;
|
|
2992
|
+
border: 1px solid var(--line);
|
|
2993
|
+
border-radius: 8px;
|
|
2994
|
+
background: var(--surface);
|
|
2995
|
+
color: var(--text);
|
|
2996
|
+
font: inherit;
|
|
2997
|
+
font-size: 13px;
|
|
2998
|
+
}
|
|
2999
|
+
.ctx-rule-input:focus { outline: none; border-color: var(--accent); }
|
|
3000
|
+
.ctx-rule-remove,
|
|
3001
|
+
.ctx-add-rule {
|
|
3002
|
+
border: 1px solid var(--line);
|
|
3003
|
+
border-radius: 8px;
|
|
3004
|
+
background: var(--bg);
|
|
3005
|
+
color: var(--muted);
|
|
3006
|
+
font-size: 12px;
|
|
3007
|
+
font-weight: 600;
|
|
3008
|
+
padding: 7px 10px;
|
|
3009
|
+
cursor: pointer;
|
|
3010
|
+
}
|
|
3011
|
+
.ctx-add-rule { margin-top: 8px; color: var(--accent); }
|
|
3012
|
+
.ctx-rule-remove:hover,
|
|
3013
|
+
.ctx-add-rule:hover {
|
|
3014
|
+
background: var(--accent-soft);
|
|
3015
|
+
color: var(--accent);
|
|
3016
|
+
border-color: rgba(0,113,227,.25);
|
|
3017
|
+
}
|
|
3018
|
+
|
|
3019
|
+
/* Learnings head row */
|
|
3020
|
+
.learn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 24px; }
|
|
3021
|
+
.learn-head-note { font-size: 12px; color: var(--muted); }
|
|
3022
|
+
.learn-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
|
3023
|
+
.lh-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
|
|
3024
|
+
.lh-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
3025
|
+
.lh-run { padding: 5px 13px; background: var(--bg); color: var(--accent); border: 1px solid rgba(0,113,227,.22); border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
|
|
3026
|
+
.lh-run:hover { background: var(--accent-soft); border-color: var(--accent); }
|
|
3027
|
+
|
|
3028
|
+
/* Empty state */
|
|
3029
|
+
.learn-empty { text-align: center; padding: 40px 24px; }
|
|
3030
|
+
.le-emoji { font-size: 32px; margin-bottom: 10px; }
|
|
3031
|
+
.le-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
|
|
3032
|
+
.le-sub { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 360px; margin: 0 auto; }
|
|
3033
|
+
/* #521: real on-disk preserved-learning tally shown under the empty state. */
|
|
3034
|
+
.le-count { font-size: 12px; color: var(--text); margin: 12px auto 0; max-width: 360px; padding: 8px 12px; background: var(--soft, #f6f6f6); border: 1px solid var(--line, #e6e6e6); border-radius: 8px; }
|
|
3035
|
+
|
|
3036
|
+
/* Learn card */
|
|
3037
|
+
.learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
|
|
3038
|
+
.lc-scope { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
|
|
3039
|
+
.scope-org { background: var(--accent-soft); color: var(--accent); }
|
|
3040
|
+
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
|
|
3041
|
+
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
|
|
3042
|
+
.lc-body { flex: 1; min-width: 0; }
|
|
3043
|
+
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
3044
|
+
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
3045
|
+
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
3046
|
+
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
|
|
3047
|
+
.bless-yes { background: var(--done); color: #fff; }
|
|
3048
|
+
.bless-no { background: var(--bg); color: var(--muted); }
|
|
3049
|
+
|
|
3050
|
+
/* Pending banner */
|
|
3051
|
+
.pending-banner { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.25); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
|
|
3052
|
+
.pending-banner .pb-body { flex: 1; }
|
|
3053
|
+
.pb-title { font-size: 13px; font-weight: 700; }
|
|
3054
|
+
.pb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
3055
|
+
.pb-bless-all { padding: 6px 14px; background: var(--done); color: #fff; border: none; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
|
|
3056
|
+
|
|
3057
|
+
/* Reverse mentoring */
|
|
3058
|
+
.rm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
|
|
3059
|
+
.rm-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
|
|
3060
|
+
.rm-body { flex: 1; }
|
|
3061
|
+
.rm-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
3062
|
+
.rm-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
3063
|
+
.rm-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
3064
|
+
.rm-got-it { padding: 5px 12px; background: var(--done); color: #fff; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
|
|
3065
|
+
.rm-dismiss { padding: 5px 10px; background: var(--bg); color: var(--muted); border: none; border-radius: 12px; font-size: 11px; cursor: pointer; }
|
|
3066
|
+
.rm-empty { text-align: center; padding: 28px 16px; color: var(--muted); font-size: 13px; }
|
|
3067
|
+
.rm-footer { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
|
|
3068
|
+
|
|
3069
|
+
/* Get-started rail: proper pill steps */
|
|
3070
|
+
.gs-step { background: none; border: none; }
|
|
3071
|
+
.gs-step.done { color: var(--done); font-weight: 500; cursor: default; }
|
|
3072
|
+
.gs-step.done::before { content: '✓ '; }
|
|
3073
|
+
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; padding: 3px 12px; border-radius: 12px; }
|
|
3074
|
+
|
|
3075
|
+
/* Hub top nav: proper layout */
|
|
3076
|
+
.hub-tabs { height: 44px; }
|
|
3077
|
+
.hub-tab { height: 44px; }
|
|
3078
|
+
|
|
3079
|
+
/* Tree legend */
|
|
3080
|
+
.tree-legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
|
|
3081
|
+
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
|
|
3082
|
+
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
|
|
3083
|
+
.dot-red { background: var(--state-waiting) !important; }
|
|
3084
|
+
.dot-amber { background: var(--state-working) !important; }
|
|
3085
|
+
.dot-green { background: var(--state-complete) !important; }
|
|
3086
|
+
.dot-grey { background: var(--line) !important; }
|
|
3087
|
+
|
|
3088
|
+
/* Project overview: section header */
|
|
3089
|
+
.overview-head { padding: 20px 20px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
3090
|
+
|
|
3091
|
+
/* Proj card team avatars row */
|
|
3092
|
+
.proj-team .av { width: 24px; height: 24px; font-size: 9px; position: relative; }
|
|
3093
|
+
.proj-team .av .pip { position: absolute; bottom: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--surface); }
|
|
3094
|
+
|
|
3095
|
+
/* Workspace: make the tree legend not look like a wall of text */
|
|
3096
|
+
.tree-legend { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
|
|
3097
|
+
|
|
3098
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
3099
|
+
#512 Comprehensive UI Polish — All missing CSS classes from audit
|
|
3100
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
3101
|
+
|
|
3102
|
+
/* ── D01-D11: New-project modal (np-overlay, np-wrap, np-step, np-card, etc.) ── */
|
|
3103
|
+
.np-overlay {
|
|
3104
|
+
display: none;
|
|
3105
|
+
position: fixed;
|
|
3106
|
+
inset: 0;
|
|
3107
|
+
background: rgba(20,20,30,.45);
|
|
3108
|
+
z-index: 60;
|
|
3109
|
+
overflow-y: auto;
|
|
3110
|
+
}
|
|
3111
|
+
.np-overlay:not([hidden]) { display: block; }
|
|
3112
|
+
/* JS removes hidden attribute to show: also handle that */
|
|
3113
|
+
#np-modal:not([hidden]) { display: block; }
|
|
3114
|
+
|
|
3115
|
+
.np-wrap {
|
|
3116
|
+
max-width: 560px;
|
|
3117
|
+
margin: 40px auto;
|
|
3118
|
+
padding: 0 24px 60px;
|
|
3119
|
+
}
|
|
3120
|
+
|
|
3121
|
+
.np-step { display: none; }
|
|
3122
|
+
.np-step.on { display: block; }
|
|
3123
|
+
|
|
3124
|
+
.np-close {
|
|
3125
|
+
position: fixed;
|
|
3126
|
+
top: 16px;
|
|
3127
|
+
right: 20px;
|
|
3128
|
+
width: 34px;
|
|
3129
|
+
height: 34px;
|
|
3130
|
+
border-radius: 50%;
|
|
3131
|
+
background: var(--surface);
|
|
3132
|
+
box-shadow: var(--shadow-lg);
|
|
3133
|
+
font-size: 18px;
|
|
3134
|
+
color: var(--muted);
|
|
3135
|
+
z-index: 61;
|
|
3136
|
+
border: none;
|
|
3137
|
+
cursor: pointer;
|
|
3138
|
+
line-height: 1;
|
|
3139
|
+
display: flex;
|
|
3140
|
+
align-items: center;
|
|
3141
|
+
justify-content: center;
|
|
3142
|
+
}
|
|
3143
|
+
.np-close:hover { color: var(--text); }
|
|
3144
|
+
|
|
3145
|
+
.np-step-dots {
|
|
3146
|
+
display: flex;
|
|
3147
|
+
gap: 6px;
|
|
3148
|
+
justify-content: center;
|
|
3149
|
+
margin-bottom: 24px;
|
|
3150
|
+
}
|
|
3151
|
+
.np-dot {
|
|
3152
|
+
width: 6px;
|
|
3153
|
+
height: 6px;
|
|
3154
|
+
border-radius: 50%;
|
|
3155
|
+
background: var(--line);
|
|
3156
|
+
}
|
|
3157
|
+
.np-dot.on { background: var(--text); }
|
|
3158
|
+
|
|
3159
|
+
.np-card {
|
|
3160
|
+
background: var(--surface);
|
|
3161
|
+
border-radius: 16px;
|
|
3162
|
+
box-shadow: var(--shadow-lg);
|
|
3163
|
+
overflow: hidden;
|
|
3164
|
+
}
|
|
3165
|
+
|
|
3166
|
+
.np-hdr {
|
|
3167
|
+
padding: 22px 24px 16px;
|
|
3168
|
+
border-bottom: 1px solid var(--line);
|
|
3169
|
+
}
|
|
3170
|
+
.np-hdr .step-label {
|
|
3171
|
+
font-size: 11px;
|
|
3172
|
+
font-weight: 700;
|
|
3173
|
+
text-transform: uppercase;
|
|
3174
|
+
letter-spacing: .06em;
|
|
3175
|
+
color: var(--muted);
|
|
3176
|
+
margin-bottom: 6px;
|
|
3177
|
+
}
|
|
3178
|
+
.np-hdr h2 {
|
|
3179
|
+
font-size: 20px;
|
|
3180
|
+
font-weight: 700;
|
|
3181
|
+
margin: 0 0 4px;
|
|
3182
|
+
}
|
|
3183
|
+
.np-hdr p {
|
|
3184
|
+
font-size: 13px;
|
|
3185
|
+
color: var(--muted);
|
|
3186
|
+
margin: 0;
|
|
3187
|
+
line-height: 1.5;
|
|
3188
|
+
}
|
|
3189
|
+
|
|
3190
|
+
.np-body {
|
|
3191
|
+
padding: 20px 24px;
|
|
3192
|
+
display: flex;
|
|
3193
|
+
flex-direction: column;
|
|
3194
|
+
gap: 16px;
|
|
3195
|
+
}
|
|
3196
|
+
|
|
3197
|
+
.np-footer {
|
|
3198
|
+
padding: 16px 24px;
|
|
3199
|
+
border-top: 1px solid var(--line);
|
|
3200
|
+
display: flex;
|
|
3201
|
+
align-items: center;
|
|
3202
|
+
justify-content: space-between;
|
|
3203
|
+
}
|
|
3204
|
+
|
|
3205
|
+
.np-next {
|
|
3206
|
+
padding: 9px 22px;
|
|
3207
|
+
background: var(--text);
|
|
3208
|
+
color: #fff;
|
|
3209
|
+
border: none;
|
|
3210
|
+
border-radius: 20px;
|
|
3211
|
+
font-size: 14px;
|
|
3212
|
+
font-weight: 600;
|
|
3213
|
+
cursor: pointer;
|
|
3214
|
+
}
|
|
3215
|
+
.np-next:hover { opacity: .88; }
|
|
3216
|
+
|
|
3217
|
+
.np-back {
|
|
3218
|
+
font-size: 13px;
|
|
3219
|
+
color: var(--muted);
|
|
3220
|
+
background: none;
|
|
3221
|
+
border: none;
|
|
3222
|
+
cursor: pointer;
|
|
3223
|
+
}
|
|
3224
|
+
.np-back:hover { color: var(--text); }
|
|
3225
|
+
|
|
3226
|
+
/* ── D11: Source attachment row (step 2) ── */
|
|
3227
|
+
.np-source {
|
|
3228
|
+
display: flex;
|
|
3229
|
+
align-items: center;
|
|
3230
|
+
gap: 8px;
|
|
3231
|
+
padding: 10px 14px;
|
|
3232
|
+
background: var(--bg);
|
|
3233
|
+
border-radius: 10px;
|
|
3234
|
+
border: 1px solid var(--line);
|
|
3235
|
+
}
|
|
3236
|
+
.np-source input {
|
|
3237
|
+
flex: 1;
|
|
3238
|
+
border: none;
|
|
3239
|
+
background: none;
|
|
3240
|
+
font: inherit;
|
|
3241
|
+
font-size: 13px;
|
|
3242
|
+
color: var(--text);
|
|
3243
|
+
outline: none;
|
|
3244
|
+
}
|
|
3245
|
+
.np-source input::placeholder { color: var(--muted); }
|
|
3246
|
+
.np-source-btn {
|
|
3247
|
+
font-size: 13px;
|
|
3248
|
+
color: var(--accent);
|
|
3249
|
+
font-weight: 500;
|
|
3250
|
+
background: none;
|
|
3251
|
+
border: none;
|
|
3252
|
+
cursor: pointer;
|
|
3253
|
+
white-space: nowrap;
|
|
3254
|
+
flex-shrink: 0;
|
|
3255
|
+
}
|
|
3256
|
+
.np-note {
|
|
3257
|
+
font-size: 12px;
|
|
3258
|
+
color: var(--muted);
|
|
3259
|
+
line-height: 1.5;
|
|
3260
|
+
}
|
|
3261
|
+
.np-optional {
|
|
3262
|
+
color: var(--muted);
|
|
3263
|
+
font-weight: 400;
|
|
3264
|
+
}
|
|
3265
|
+
.np-link { color: var(--accent); }
|
|
3266
|
+
|
|
3267
|
+
/* ── D12: Shared .modal-overlay backdrop (assign-job, add-emp, pricing) ── */
|
|
3268
|
+
.modal-overlay {
|
|
3269
|
+
display: none;
|
|
3270
|
+
position: fixed;
|
|
3271
|
+
inset: 0;
|
|
3272
|
+
background: rgba(20,20,30,.45);
|
|
3273
|
+
z-index: 70;
|
|
3274
|
+
overflow-y: auto;
|
|
3275
|
+
}
|
|
3276
|
+
.modal-overlay:not([hidden]) { display: block; }
|
|
3277
|
+
/* Also handle JS hidden attribute removal */
|
|
3278
|
+
#assign-job-modal:not([hidden]),
|
|
3279
|
+
#add-emp-modal:not([hidden]),
|
|
3280
|
+
#pricing-modal:not([hidden]) { display: block; }
|
|
3281
|
+
|
|
3282
|
+
/* ── D36: Pricing modal internal structure ── */
|
|
3283
|
+
.pricing-overlay { z-index: 71; }
|
|
3284
|
+
.pricing-body {
|
|
3285
|
+
padding: 0 28px 24px;
|
|
3286
|
+
display: flex;
|
|
3287
|
+
flex-direction: column;
|
|
3288
|
+
align-items: center;
|
|
3289
|
+
gap: 10px;
|
|
3290
|
+
text-align: center;
|
|
3291
|
+
}
|
|
3292
|
+
.pricing-body h2 { font-size: 20px; font-weight: 700; margin: 0; }
|
|
3293
|
+
.pricing-body p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
|
|
3294
|
+
.pr-av {
|
|
3295
|
+
width: 60px;
|
|
3296
|
+
height: 60px;
|
|
3297
|
+
border-radius: 50%;
|
|
3298
|
+
display: flex;
|
|
3299
|
+
align-items: center;
|
|
3300
|
+
justify-content: center;
|
|
3301
|
+
font-size: 18px;
|
|
3302
|
+
font-weight: 700;
|
|
3303
|
+
color: #fff;
|
|
3304
|
+
margin: 0 auto 4px;
|
|
3305
|
+
flex-shrink: 0;
|
|
3306
|
+
}
|
|
3307
|
+
.pr-price {
|
|
3308
|
+
font-size: 32px;
|
|
3309
|
+
font-weight: 700;
|
|
3310
|
+
color: var(--text);
|
|
3311
|
+
}
|
|
3312
|
+
.pr-price span {
|
|
3313
|
+
font-size: 16px;
|
|
3314
|
+
font-weight: 400;
|
|
3315
|
+
color: var(--muted);
|
|
3316
|
+
}
|
|
3317
|
+
.pr-cta {
|
|
3318
|
+
width: 100%;
|
|
3319
|
+
padding: 12px;
|
|
3320
|
+
background: var(--accent);
|
|
3321
|
+
color: #fff;
|
|
3322
|
+
border: none;
|
|
3323
|
+
border-radius: 11px;
|
|
3324
|
+
font-size: 14px;
|
|
3325
|
+
font-weight: 700;
|
|
3326
|
+
cursor: pointer;
|
|
3327
|
+
text-align: center;
|
|
3328
|
+
text-decoration: none;
|
|
3329
|
+
display: block;
|
|
3330
|
+
margin-top: 16px;
|
|
3331
|
+
}
|
|
3332
|
+
.pr-cta:hover { opacity: .88; }
|
|
3333
|
+
.pr-foot {
|
|
3334
|
+
font-size: 12px;
|
|
3335
|
+
color: var(--muted);
|
|
3336
|
+
text-align: center;
|
|
3337
|
+
margin-top: 2px;
|
|
3338
|
+
}
|
|
3339
|
+
|
|
3340
|
+
/* ── D37: Area foot note, project learnings panel, pl-back, stat-grid ── */
|
|
3341
|
+
.area-foot-note {
|
|
3342
|
+
font-size: 12px;
|
|
3343
|
+
color: var(--muted);
|
|
3344
|
+
margin-top: 16px;
|
|
3345
|
+
line-height: 1.5;
|
|
3346
|
+
font-style: italic;
|
|
3347
|
+
}
|
|
3348
|
+
.proj-learnings-panel {
|
|
3349
|
+
flex: 1;
|
|
3350
|
+
overflow-y: auto;
|
|
3351
|
+
background: var(--bg);
|
|
3352
|
+
}
|
|
3353
|
+
.pl-back {
|
|
3354
|
+
font-size: 13px;
|
|
3355
|
+
color: var(--accent);
|
|
3356
|
+
background: none;
|
|
3357
|
+
border: none;
|
|
3358
|
+
cursor: pointer;
|
|
3359
|
+
padding: 0;
|
|
3360
|
+
margin-bottom: 8px;
|
|
3361
|
+
font-weight: 500;
|
|
3362
|
+
}
|
|
3363
|
+
.pl-back:hover { opacity: .8; }
|
|
3364
|
+
.stat-grid {
|
|
3365
|
+
display: grid;
|
|
3366
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
3367
|
+
gap: 12px;
|
|
3368
|
+
margin-top: 10px;
|
|
3369
|
+
}
|
|
3370
|
+
.stat-card {
|
|
3371
|
+
background: var(--surface);
|
|
3372
|
+
border-radius: 14px;
|
|
3373
|
+
box-shadow: var(--shadow);
|
|
3374
|
+
padding: 16px 18px;
|
|
3375
|
+
}
|
|
3376
|
+
.stat-num { font-size: 26px; font-weight: 700; }
|
|
3377
|
+
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
3378
|
+
|
|
3379
|
+
/* ── D18: Profile card — better shadow to match mock ── */
|
|
3380
|
+
.card.area-profile {
|
|
3381
|
+
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
|
|
3382
|
+
border: none;
|
|
3383
|
+
}
|
|
3384
|
+
|
|
3385
|
+
/* ── D19: Hide lh-run button from default learnings head — only show when pending ── */
|
|
3386
|
+
/* The JS always renders it; suppress via CSS for default display */
|
|
3387
|
+
/* NOTE: We keep it functional; just reduce its visual weight (D19 P2) */
|
|
3388
|
+
.lh-run {
|
|
3389
|
+
padding: 5px 12px;
|
|
3390
|
+
background: var(--bg);
|
|
3391
|
+
color: var(--accent);
|
|
3392
|
+
border: 1px solid rgba(0,113,227,.2);
|
|
3393
|
+
border-radius: 14px;
|
|
3394
|
+
font-size: 11px;
|
|
3395
|
+
font-weight: 600;
|
|
3396
|
+
cursor: pointer;
|
|
3397
|
+
white-space: nowrap;
|
|
3398
|
+
flex-shrink: 0;
|
|
3399
|
+
}
|
|
3400
|
+
.lh-run:hover { background: var(--accent-soft); }
|
|
3401
|
+
|
|
3402
|
+
/* ── D22: proj-grid padding-top match mock spec ── */
|
|
3403
|
+
.proj-grid { padding-top: 28px !important; }
|
|
3404
|
+
|
|
3405
|
+
/* ── D24: tree-action font-weight fix ── */
|
|
3406
|
+
.tree-action { font-weight: 500; }
|
|
3407
|
+
|
|
3408
|
+
/* ── D29/D30: Account menu am-item inner div stacking ── */
|
|
3409
|
+
.am-item > div {
|
|
3410
|
+
display: flex;
|
|
3411
|
+
flex-direction: column;
|
|
3412
|
+
}
|
|
3413
|
+
.am-label { display: block; font-size: 13px; font-weight: 600; }
|
|
3414
|
+
.am-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
3415
|
+
|
|
3416
|
+
/* ── D32: am-div separator — use background-color band not hairline ── */
|
|
3417
|
+
.am-div { height: 6px; background: var(--bg); margin: 2px 0; border: none; }
|
|
3418
|
+
|
|
3419
|
+
/* ── D38: jr-av placeholder for locked rows ── */
|
|
3420
|
+
.job-row.locked .jr-av {
|
|
3421
|
+
background: #cfcfd6;
|
|
3422
|
+
}
|
|
3423
|
+
|
|
3424
|
+
/* ── D39: reduce bottom padding to prevent unnecessary scrollbar ── */
|
|
3425
|
+
.hub-area-page { padding-bottom: 32px; }
|
|
3426
|
+
|
|
3427
|
+
/* ── nav-right alignment ── */
|
|
3428
|
+
.nav-right {
|
|
3429
|
+
margin-left: auto;
|
|
3430
|
+
position: relative;
|
|
3431
|
+
display: flex;
|
|
3432
|
+
align-items: center;
|
|
3433
|
+
padding-right: 8px;
|
|
3434
|
+
}
|
|
3435
|
+
|
|
3436
|
+
/* ── Account menu position fix (was 44px, now relative to .nav-right) ── */
|
|
3437
|
+
.account-menu {
|
|
3438
|
+
top: calc(100% + 6px);
|
|
3439
|
+
right: 0;
|
|
3440
|
+
}
|
|
3441
|
+
|
|
3442
|
+
/* ── Ensure modal-card has correct max-width for pricing card ── */
|
|
3443
|
+
.pricing-card {
|
|
3444
|
+
max-width: 380px;
|
|
3445
|
+
text-align: center;
|
|
3446
|
+
padding: 24px 0 0;
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
/* pr-av fallback background when persona color not set by JS */
|
|
3450
|
+
.pr-av { background: var(--muted); }
|
|
3451
|
+
|
|
3452
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
3453
|
+
#512 FINAL POLISH — all remaining missing classes + CSS variable gaps
|
|
3454
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
3455
|
+
|
|
3456
|
+
/* ── CSS variables required by JS inline styles (dot colors) ── */
|
|
3457
|
+
:root {
|
|
3458
|
+
--red: #ff3b30;
|
|
3459
|
+
--amber: #ff9500;
|
|
3460
|
+
--green: #34c759;
|
|
3461
|
+
--grey: #c7c7cc;
|
|
3462
|
+
}
|
|
3463
|
+
@media (prefers-color-scheme: dark) {
|
|
3464
|
+
:root {
|
|
3465
|
+
--red: #ff453a;
|
|
3466
|
+
--amber: #ff9f0a;
|
|
3467
|
+
--green: #30d158;
|
|
3468
|
+
--grey: #636366;
|
|
3469
|
+
}
|
|
3470
|
+
}
|
|
3471
|
+
|
|
3472
|
+
/* ── .av — standalone team avatar chip (proj-team context, set by JS) ── */
|
|
3473
|
+
.av {
|
|
3474
|
+
width: 24px;
|
|
3475
|
+
height: 24px;
|
|
3476
|
+
border-radius: 50%;
|
|
3477
|
+
display: flex;
|
|
3478
|
+
align-items: center;
|
|
3479
|
+
justify-content: center;
|
|
3480
|
+
font-size: 9px;
|
|
3481
|
+
font-weight: 700;
|
|
3482
|
+
color: #fff;
|
|
3483
|
+
position: relative;
|
|
3484
|
+
flex-shrink: 0;
|
|
3485
|
+
}
|
|
3486
|
+
|
|
3487
|
+
/* ── Reverse mentoring card classes ── */
|
|
3488
|
+
.rev-item {
|
|
3489
|
+
background: var(--surface);
|
|
3490
|
+
border: 1px solid var(--line);
|
|
3491
|
+
border-radius: 12px;
|
|
3492
|
+
padding: 14px 16px;
|
|
3493
|
+
display: flex;
|
|
3494
|
+
flex-direction: column;
|
|
3495
|
+
gap: 8px;
|
|
3496
|
+
margin-bottom: 8px;
|
|
3497
|
+
}
|
|
3498
|
+
.rev-from {
|
|
3499
|
+
display: flex;
|
|
3500
|
+
align-items: center;
|
|
3501
|
+
gap: 8px;
|
|
3502
|
+
font-size: 12px;
|
|
3503
|
+
font-weight: 600;
|
|
3504
|
+
color: var(--text);
|
|
3505
|
+
}
|
|
3506
|
+
.rev-av {
|
|
3507
|
+
width: 26px;
|
|
3508
|
+
height: 26px;
|
|
3509
|
+
border-radius: 50%;
|
|
3510
|
+
background: var(--accent);
|
|
3511
|
+
color: #fff;
|
|
3512
|
+
display: flex;
|
|
3513
|
+
align-items: center;
|
|
3514
|
+
justify-content: center;
|
|
3515
|
+
font-size: 9px;
|
|
3516
|
+
font-weight: 700;
|
|
3517
|
+
flex-shrink: 0;
|
|
3518
|
+
}
|
|
3519
|
+
.rev-msg {
|
|
3520
|
+
font-size: 13px;
|
|
3521
|
+
color: var(--text);
|
|
3522
|
+
line-height: 1.55;
|
|
3523
|
+
font-style: italic;
|
|
3524
|
+
}
|
|
3525
|
+
.rev-actions {
|
|
3526
|
+
display: flex;
|
|
3527
|
+
gap: 6px;
|
|
3528
|
+
}
|
|
3529
|
+
.rev-gotit {
|
|
3530
|
+
padding: 5px 13px;
|
|
3531
|
+
background: var(--done);
|
|
3532
|
+
color: #fff;
|
|
3533
|
+
border: none;
|
|
3534
|
+
border-radius: 12px;
|
|
3535
|
+
font-size: 11px;
|
|
3536
|
+
font-weight: 600;
|
|
3537
|
+
cursor: pointer;
|
|
3538
|
+
}
|
|
3539
|
+
.rev-dismiss {
|
|
3540
|
+
padding: 5px 10px;
|
|
3541
|
+
background: var(--bg);
|
|
3542
|
+
color: var(--muted);
|
|
3543
|
+
border: none;
|
|
3544
|
+
border-radius: 12px;
|
|
3545
|
+
font-size: 11px;
|
|
3546
|
+
cursor: pointer;
|
|
3547
|
+
}
|
|
3548
|
+
|
|
3549
|
+
/* ── New-project step-4 summary rows (actual class names from JS) ── */
|
|
3550
|
+
.np-summary-row {
|
|
3551
|
+
display: flex;
|
|
3552
|
+
gap: 12px;
|
|
3553
|
+
padding: 10px 0;
|
|
3554
|
+
border-bottom: 1px solid var(--line);
|
|
3555
|
+
}
|
|
3556
|
+
.np-summary-row:last-of-type { border-bottom: none; }
|
|
3557
|
+
.np-summary-label {
|
|
3558
|
+
font-size: 12px;
|
|
3559
|
+
font-weight: 600;
|
|
3560
|
+
color: var(--muted);
|
|
3561
|
+
width: 80px;
|
|
3562
|
+
flex-shrink: 0;
|
|
3563
|
+
padding-top: 1px;
|
|
3564
|
+
}
|
|
3565
|
+
.np-summary-val {
|
|
3566
|
+
font-size: 13px;
|
|
3567
|
+
color: var(--text);
|
|
3568
|
+
flex: 1;
|
|
3569
|
+
line-height: 1.5;
|
|
3570
|
+
}
|
|
3571
|
+
|
|
3572
|
+
/* ── New-project start button + note (step 4) ── */
|
|
3573
|
+
.np-start-btn {
|
|
3574
|
+
width: 100%;
|
|
3575
|
+
padding: 13px;
|
|
3576
|
+
background: var(--accent);
|
|
3577
|
+
color: #fff;
|
|
3578
|
+
border: none;
|
|
3579
|
+
border-radius: 12px;
|
|
3580
|
+
font-size: 15px;
|
|
3581
|
+
font-weight: 700;
|
|
3582
|
+
cursor: pointer;
|
|
3583
|
+
margin-top: 8px;
|
|
3584
|
+
}
|
|
3585
|
+
.np-start-btn:hover { opacity: .88; }
|
|
3586
|
+
.np-start-note {
|
|
3587
|
+
font-size: 12px;
|
|
3588
|
+
color: var(--muted);
|
|
3589
|
+
text-align: center;
|
|
3590
|
+
margin-top: 8px;
|
|
3591
|
+
line-height: 1.5;
|
|
3592
|
+
}
|
|
3593
|
+
|
|
3594
|
+
/* ── cat-label — section label in assign-job / add-emp modal ── */
|
|
3595
|
+
.cat-label {
|
|
3596
|
+
font-size: 10px;
|
|
3597
|
+
font-weight: 700;
|
|
3598
|
+
text-transform: uppercase;
|
|
3599
|
+
letter-spacing: .04em;
|
|
3600
|
+
color: var(--muted);
|
|
3601
|
+
margin: 12px 0 4px;
|
|
3602
|
+
}
|
|
3603
|
+
|
|
3604
|
+
/* ── locked-tile — greyed-out not-hired emp tile ── */
|
|
3605
|
+
.emp-tile.locked-tile {
|
|
3606
|
+
opacity: .55;
|
|
3607
|
+
cursor: not-allowed;
|
|
3608
|
+
}
|
|
3609
|
+
.emp-tile.locked-tile:hover {
|
|
3610
|
+
border-color: var(--line);
|
|
3611
|
+
background: var(--bg);
|
|
3612
|
+
}
|
|
3613
|
+
|
|
3614
|
+
/* ── et-lock — 🔒 icon inside locked emp tile ── */
|
|
3615
|
+
.et-lock {
|
|
3616
|
+
font-size: 11px;
|
|
3617
|
+
color: var(--muted);
|
|
3618
|
+
}
|
|
3619
|
+
|
|
3620
|
+
/* #521 R9: hire-missing prompt in the new-project team step */
|
|
3621
|
+
.np-hire-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
|
|
3622
|
+
.emp-tile.locked-tile.hireable { opacity: 1; cursor: pointer; border-style: dashed; }
|
|
3623
|
+
.emp-tile.locked-tile.hireable:hover { border-color: var(--accent); background: var(--accent-soft); }
|
|
3624
|
+
.emp-tile.locked-tile.hireable .et-av { opacity: .7; }
|
|
3625
|
+
.et-hire { font-size: 11px; font-weight: 700; color: var(--accent); }
|
|
3626
|
+
|
|
3627
|
+
/* ── gs-step pill shape refinements ── */
|
|
3628
|
+
.gs-step { font-size: 12px; }
|
|
3629
|
+
.gs-step.current { padding: 4px 12px; border-radius: 12px; }
|
|
3630
|
+
|
|
3631
|
+
/* ── hub-tabs height consistency + avatar-btn right-alignment ── */
|
|
3632
|
+
.hub-tabs { height: 44px; }
|
|
3633
|
+
.hub-tab { height: 44px; }
|
|
3634
|
+
.nav-right { height: 44px; display: flex; align-items: center; }
|
|
3635
|
+
.avatar-btn { margin-left: 8px; }
|
|
3636
|
+
|
|
3637
|
+
/* ── New-project: folder picker row ── */
|
|
3638
|
+
.np-folder-row { display:flex; gap:8px; }
|
|
3639
|
+
.np-folder-row input { flex:1; }
|
|
3640
|
+
.np-browse-btn { padding:9px 16px; background:var(--text); color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
|
|
3641
|
+
.np-browse-btn:hover { opacity:.85; }
|
|
3642
|
+
.np-field-hint { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }
|
|
3643
|
+
|
|
3644
|
+
/* ── #512 R7: docx re-upload panel ── */
|
|
3645
|
+
.rc-docx-upload { margin-top:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid rgba(0,113,227,.2); border-radius:10px; display:flex; flex-direction:column; gap:10px; }
|
|
3646
|
+
.rdu-label { font-size:12px; color:var(--muted); line-height:1.5; }
|
|
3647
|
+
.rdu-file-label { display:flex; align-items:center; gap:10px; cursor:pointer; }
|
|
3648
|
+
.rdu-choose-btn { padding:6px 14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }
|
|
3649
|
+
.rdu-filename { font-size:12px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
3650
|
+
.rdu-extract-btn { align-self:flex-end; padding:7px 16px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
|
|
3651
|
+
.rdu-extract-btn:disabled { opacity:.5; cursor:default; }
|
|
3652
|
+
|
|
3653
|
+
/* ── #512 R7: 'Done reviewing' button (replaces upload panel) ── */
|
|
3654
|
+
.rc-done-reviewing { margin-top:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid rgba(0,113,227,.2); border-radius:10px; display:flex; flex-direction:column; gap:8px; }
|
|
3655
|
+
.rdr-label { font-size:12px; color:var(--muted); line-height:1.5; }
|
|
3656
|
+
.rdr-done-btn { padding:9px 18px; background:var(--done); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; align-self:flex-start; }
|
|
3657
|
+
.rdr-done-btn:disabled { opacity:.55; cursor:default; }
|
|
3658
|
+
|
|
3659
|
+
/* ── Issue #538: Hire a human manager ─────────────────────────────────── */
|
|
3660
|
+
.hm-roster-action {
|
|
3661
|
+
display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
|
|
3662
|
+
font-size: 12px; font-weight: 600; color: var(--accent);
|
|
3663
|
+
background: none; border: none; cursor: pointer; padding: 0; text-align: left;
|
|
3664
|
+
}
|
|
3665
|
+
.hm-roster-action:hover { text-decoration: underline; }
|
|
3666
|
+
.hm-section-cta {
|
|
3667
|
+
display: flex; align-items: center; gap: 14px;
|
|
3668
|
+
padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
|
|
3669
|
+
}
|
|
3670
|
+
.hm-section-cta .hm-ic { font-size: 24px; }
|
|
3671
|
+
.hm-section-cta .hm-copy { flex: 1; }
|
|
3672
|
+
.hm-section-cta .hm-copy strong { display: block; font-size: 14px; color: var(--text); }
|
|
3673
|
+
.hm-section-cta .hm-copy small { font-size: 12px; color: var(--muted); }
|
|
3674
|
+
.hm-fieldrow { display: flex; gap: 10px; }
|
|
3675
|
+
.hm-fieldrow .hm-field { flex: 1; }
|
|
3676
|
+
.hm-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
|
|
3677
|
+
.hm-field select, .hm-field input {
|
|
3678
|
+
width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
|
|
3679
|
+
font: inherit; font-size: 13px; background: var(--bg); color: var(--text);
|
|
3680
|
+
}
|
|
3681
|
+
.hm-field select:focus, .hm-field input:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
3682
|
+
.hm-query { display: flex; align-items: flex-start; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
|
|
3683
|
+
.hm-query code { flex: 1; font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace; font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; }
|
|
3684
|
+
.hm-copy-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
|
|
3685
|
+
.hm-copy-btn:hover { border-color: var(--accent); }
|
|
3686
|
+
.hm-qualities { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
|
|
3687
|
+
.hm-quality { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); }
|
|
3688
|
+
.hm-quality .hm-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
|
|
3689
|
+
.hm-quality small { display: block; color: var(--muted); font-size: 12px; }
|
|
3690
|
+
.hm-jd > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 7px; }
|
|
3691
|
+
.hm-jd > summary::-webkit-details-marker { display: none; }
|
|
3692
|
+
.hm-jd[open] > summary .hm-chev { transform: rotate(90deg); }
|
|
3693
|
+
.hm-jd .hm-chev { font-size: 10px; transition: transform .15s; }
|
|
3694
|
+
.hm-jd-body { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
|
|
3695
|
+
.hm-providers-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
|
|
3696
|
+
.hm-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
3697
|
+
.hm-provider { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
|
|
3698
|
+
.hm-provider:hover { border-color: var(--accent); background: var(--accent-soft); }
|
|
3699
|
+
.hm-provider .hm-logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; }
|
|
3700
|
+
.hm-provider strong { font-size: 13px; }
|
|
3701
|
+
.hm-provider small { font-size: 11px; color: var(--muted); }
|
|
3702
|
+
.hm-logo.linkedin { background: #0a66c2; }
|
|
3703
|
+
.hm-logo.indeed { background: #2557a7; }
|
|
3704
|
+
.hm-logo.seekout { background: #6b3df0; }
|
|
3705
|
+
.hm-foot { font-size: 11px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }
|
|
3706
|
+
@media (max-width: 520px) {
|
|
3707
|
+
.hm-fieldrow { flex-direction: column; }
|
|
3708
|
+
.hm-fieldrow .hm-field { max-width: none !important; }
|
|
3709
|
+
}
|
|
3710
|
+
/* ── #539: Command Palette Overlay ── */
|
|
3711
|
+
.cp-backdrop { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding-top:80px; }
|
|
3712
|
+
.cp-backdrop[hidden] { display:none; }
|
|
3713
|
+
.cp-palette { background:var(--surface); border:1px solid var(--line); border-radius:14px; width:min(640px,calc(100vw - 32px)); max-height:calc(100vh - 140px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.22); }
|
|
3714
|
+
.cp-search-row { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
|
|
3715
|
+
.cp-search-icon { font-size:18px; color:var(--muted); flex-shrink:0; }
|
|
3716
|
+
#cp-search { flex:1; border:none; background:transparent; font-size:15px; color:var(--text); outline:none; }
|
|
3717
|
+
#cp-search::placeholder { color:var(--muted); }
|
|
3718
|
+
.cp-results-scroll { flex:1; overflow-y:auto; min-height:0; }
|
|
3719
|
+
.cp-section { padding:6px 0; }
|
|
3720
|
+
.cp-section-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); padding:4px 16px 2px; text-transform:uppercase; }
|
|
3721
|
+
.cp-row { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; color:var(--text); font-size:13px; }
|
|
3722
|
+
.cp-row:hover, .cp-row--highlighted { background:var(--accent-soft,rgba(0,113,227,.08)); }
|
|
3723
|
+
.cp-row-icon { font-size:15px; flex-shrink:0; }
|
|
3724
|
+
.cp-row-body { flex:1; min-width:0; }
|
|
3725
|
+
.cp-row-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3726
|
+
.cp-row-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
|
|
3727
|
+
.cp-row-tag { font-size:10px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; flex-shrink:0; }
|
|
3728
|
+
.cp-instructions-row { border-top:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
|
|
3729
|
+
.cp-instructions-row[hidden] { display:none; }
|
|
3730
|
+
.cp-job-chip { font-size:11px; font-weight:700; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border-radius:5px; padding:2px 8px; align-self:flex-start; }
|
|
3731
|
+
#cp-instructions { border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; padding:9px 11px; resize:vertical; outline:none; font-family:inherit; }
|
|
3732
|
+
#cp-instructions:focus { border-color:var(--accent,#0071e3); }
|
|
3733
|
+
#cp-start-btn { align-self:flex-end; }
|
|
3734
|
+
.cp-hints-bar { display:flex; align-items:center; gap:10px; padding:7px 14px; border-top:1px solid var(--line); background:var(--bg); flex-wrap:wrap; }
|
|
3735
|
+
.cp-hint { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:3px; }
|
|
3736
|
+
.cp-hint--right { margin-left:auto; }
|
|
3737
|
+
.cp-hint kbd { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:10px; font-family:inherit; }
|
|
3738
|
+
.cp-employee-footer { font-size:11px; color:var(--muted); padding:5px 14px 8px; }
|
|
3739
|
+
.cp-rerun-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 18px; font-size:13px; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.16); z-index:9100; pointer-events:none; white-space:nowrap; }
|
|
3740
|
+
|
|
3741
|
+
/* ── Issue #540: Company roster + Manager team ─────────────────────────── */
|
|
3742
|
+
.company-hire-bar { display:flex; align-items:center; gap:8px; padding:9px 0 11px; flex-wrap:wrap; }
|
|
3743
|
+
.chb-count { font-size:14px; font-weight:700; color:var(--text); }
|
|
3744
|
+
.chb-label { font-size:13px; color:var(--sub); }
|
|
3745
|
+
.chb-progress { flex:1; min-width:80px; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
|
|
3746
|
+
.chb-progress-fill { height:100%; background:var(--accent,#0071e3); border-radius:3px; transition:width .3s; }
|
|
3747
|
+
.persona-roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:4px 0 16px; }
|
|
3748
|
+
.persona-roster-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:default; transition:border-color .15s,background .15s; }
|
|
3749
|
+
.persona-roster-tile.prt-hired { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.06)); }
|
|
3750
|
+
.persona-roster-tile:not(.prt-hired):hover { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.04)); }
|
|
3751
|
+
.prt-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; }
|
|
3752
|
+
.prt-name { font-size:13px; font-weight:700; color:var(--text); text-align:center; }
|
|
3753
|
+
.prt-role { font-size:11px; color:var(--sub); text-align:center; line-height:1.3; }
|
|
3754
|
+
.prt-hired-badge { font-size:10px; font-weight:700; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.1)); border-radius:5px; padding:2px 8px; margin-top:2px; }
|
|
3755
|
+
.prt-hire-btn { font-size:11px; font-weight:700; color:#fff; background:var(--accent,#0071e3); border:none; border-radius:6px; padding:4px 12px; cursor:pointer; margin-top:2px; }
|
|
3756
|
+
.prt-hire-btn:hover { background:var(--accent-hover,#005bbf); }
|
|
3757
|
+
.prt-price { font-size:10px; color:var(--sub); margin-top:1px; }
|
|
3758
|
+
.manager-team-section { padding:4px 0 16px; }
|
|
3759
|
+
.manager-no-team-msg { font-size:13px; color:var(--sub); margin:0 0 10px; }
|
|
3760
|
+
.manager-go-company-btn { font-size:12px; font-weight:600; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border:1px solid var(--accent,#0071e3); border-radius:6px; padding:5px 13px; cursor:pointer; }
|
|
3761
|
+
.manager-go-company-btn:hover { background:var(--accent-soft,rgba(0,113,227,.15)); }
|
|
3762
|
+
|
|
3763
|
+
/* ── Issue #540: AI Hub hiring surfaces ── */
|
|
3764
|
+
|
|
3765
|
+
/* Status dots (green=available, amber=out-of-stock, grey=none) */
|
|
3766
|
+
.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
|
3767
|
+
.sdot--green { background:#34c759; }
|
|
3768
|
+
.sdot--amber { background:#ff9f0a; }
|
|
3769
|
+
.sdot--grey { background:var(--line); border:1px solid var(--muted); }
|
|
3770
|
+
|
|
3771
|
+
/* Persona grid — Company tab */
|
|
3772
|
+
.persona-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:8px; }
|
|
3773
|
+
/* #538 UI-polish (538-UIPV-P1): allow the hire button to wrap to its own full-width
|
|
3774
|
+
row so the avatar + name/role take the full first row; otherwise the nowrap button
|
|
3775
|
+
squeezed .persona-card-info to ~31px and clipped every name/role to "M…". */
|
|
3776
|
+
.persona-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; position:relative; }
|
|
3777
|
+
.persona-card-info { flex:1; min-width:0; }
|
|
3778
|
+
.persona-card .btn-hire-primary { flex-basis:100%; margin-top:8px; }
|
|
3779
|
+
.persona-card-info strong { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3780
|
+
.persona-card-role { display:block; font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3781
|
+
.seat-badge { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
|
|
3782
|
+
.btn-hire-primary { padding:5px 12px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none; }
|
|
3783
|
+
.btn-hire-primary:hover { opacity:.85; }
|
|
3784
|
+
|
|
3785
|
+
/* Manager team pool — Manager tab */
|
|
3786
|
+
.manager-team-pool { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
|
|
3787
|
+
.team-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
|
|
3788
|
+
.btn-add-seat { padding:5px 12px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
|
|
3789
|
+
.btn-add-seat:hover { opacity:.85; }
|
|
3790
|
+
.btn-add-seat:disabled { opacity:.5; cursor:default; }
|
|
3791
|
+
.btn-hired-check { font-size:12px; color:var(--done); font-weight:600; }
|
|
3792
|
+
|
|
3793
|
+
/* Delegate button on roster chips */
|
|
3794
|
+
.delegate-btn { padding:3px 9px; background:var(--accent-soft); color:var(--accent); border:1px solid rgba(0,113,227,.2); border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; margin-left:auto; }
|
|
3795
|
+
.delegate-btn:hover { background:var(--accent); color:#fff; }
|
|
3796
|
+
|
|
3797
|
+
/* Non-blocking hire strip (between #messages and send bar) */
|
|
3798
|
+
.hire-strip { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-shrink:0; }
|
|
3799
|
+
.hire-strip[hidden] { display:none; }
|
|
3800
|
+
.hs-avatar { flex-shrink:0; width:36px; height:36px; }
|
|
3801
|
+
.hs-body { flex:1; min-width:0; }
|
|
3802
|
+
.hs-title { margin:0; font-size:13px; font-weight:600; color:var(--text); }
|
|
3803
|
+
.hs-sub { margin:2px 0 0; font-size:11px; color:var(--muted); line-height:1.4; }
|
|
3804
|
+
.hs-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
|
|
3805
|
+
.hs-btn { padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; border:none; }
|
|
3806
|
+
.hs-btn[hidden] { display:none; }
|
|
3807
|
+
.hs-btn--primary { background:var(--accent); color:#fff; }
|
|
3808
|
+
.hs-btn--primary:hover { opacity:.85; }
|
|
3809
|
+
.hs-btn--ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
|
|
3810
|
+
.hs-btn--ghost:hover { color:var(--text); border-color:var(--text); }
|