fraim 2.0.160 → 2.0.162
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 +34 -12
- package/dist/src/ai-hub/hosts.js +383 -27
- 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/office-sideload.js +21 -3
- package/dist/src/ai-hub/preferences.js +10 -1
- package/dist/src/ai-hub/server.js +1243 -65
- package/dist/src/cli/commands/init-project.js +7 -1
- package/dist/src/cli/utils/agent-adapters.js +1 -1
- package/dist/src/core/fraim-config-schema.generated.js +50 -13
- package/dist/src/core/quality-evidence.js +4 -1
- package/dist/src/local-mcp-server/agent-token-prices.js +23 -0
- package/dist/src/local-mcp-server/learning-context-builder.js +438 -2
- package/dist/src/local-mcp-server/stdio-server.js +73 -15
- package/package.json +5 -4
- package/public/ai-hub/index.html +456 -7
- package/public/ai-hub/powerpoint-taskpane/index.html +2 -1
- package/public/ai-hub/review.css +354 -0
- package/public/ai-hub/script.js +5945 -1279
- package/public/ai-hub/styles.css +1805 -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,114 @@ 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
|
+
.conv-employee-list {
|
|
499
|
+
display: grid;
|
|
500
|
+
gap: 8px;
|
|
501
|
+
min-width: 0;
|
|
502
|
+
padding-left: 23px;
|
|
503
|
+
}
|
|
346
504
|
.conv-item {
|
|
505
|
+
box-sizing: border-box;
|
|
347
506
|
width: 100%;
|
|
507
|
+
max-width: 100%;
|
|
508
|
+
min-width: 0;
|
|
348
509
|
text-align: left;
|
|
349
510
|
background: transparent;
|
|
350
511
|
border: 1px solid var(--line);
|
|
@@ -415,12 +576,31 @@ button { font: inherit; cursor: pointer; }
|
|
|
415
576
|
color: var(--muted);
|
|
416
577
|
font-weight: 500;
|
|
417
578
|
flex-shrink: 0;
|
|
579
|
+
min-width: 0;
|
|
580
|
+
overflow: hidden;
|
|
581
|
+
text-overflow: ellipsis;
|
|
418
582
|
white-space: nowrap;
|
|
419
583
|
padding-top: 4px;
|
|
420
584
|
}
|
|
421
585
|
.conv-status.running { color: var(--accent); }
|
|
422
586
|
.conv-status.attention { color: var(--warn); }
|
|
423
587
|
.conv-status.failed { color: var(--danger); }
|
|
588
|
+
.conv-status.working { color: var(--state-working); }
|
|
589
|
+
.conv-status.waiting { color: var(--state-waiting); }
|
|
590
|
+
.conv-status.complete { color: var(--state-complete); }
|
|
591
|
+
.state-dot {
|
|
592
|
+
display: inline-block;
|
|
593
|
+
width: 8px;
|
|
594
|
+
height: 8px;
|
|
595
|
+
border-radius: 50%;
|
|
596
|
+
flex-shrink: 0;
|
|
597
|
+
background: var(--line);
|
|
598
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
|
|
599
|
+
}
|
|
600
|
+
.conv-state-dot {
|
|
601
|
+
align-self: center;
|
|
602
|
+
margin-left: auto;
|
|
603
|
+
}
|
|
424
604
|
|
|
425
605
|
/* Conversation pane */
|
|
426
606
|
.conversation {
|
|
@@ -462,14 +642,15 @@ button { font: inherit; cursor: pointer; }
|
|
|
462
642
|
.empty-state p { margin: 0; max-width: 320px; }
|
|
463
643
|
|
|
464
644
|
#active-conv {
|
|
465
|
-
display:
|
|
466
|
-
|
|
645
|
+
display: grid;
|
|
646
|
+
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
467
647
|
gap: 14px;
|
|
468
648
|
min-width: 0;
|
|
469
649
|
flex: 1;
|
|
470
650
|
min-height: 0;
|
|
471
651
|
overflow: hidden;
|
|
472
652
|
}
|
|
653
|
+
#active-conv[hidden] { display: none; }
|
|
473
654
|
|
|
474
655
|
.conv-header,
|
|
475
656
|
.support-stack,
|
|
@@ -482,6 +663,21 @@ button { font: inherit; cursor: pointer; }
|
|
|
482
663
|
align-items: center;
|
|
483
664
|
gap: 12px;
|
|
484
665
|
}
|
|
666
|
+
/* #521: Stop button — interrupt a working employee and park it "waiting on you". */
|
|
667
|
+
.run-stop-btn {
|
|
668
|
+
flex-shrink: 0;
|
|
669
|
+
font-size: 12px;
|
|
670
|
+
font-weight: 600;
|
|
671
|
+
color: #b42318;
|
|
672
|
+
background: #fef3f2;
|
|
673
|
+
border: 1px solid #fda29b;
|
|
674
|
+
border-radius: 14px;
|
|
675
|
+
padding: 5px 12px;
|
|
676
|
+
cursor: pointer;
|
|
677
|
+
transition: background .12s;
|
|
678
|
+
}
|
|
679
|
+
.run-stop-btn:hover { background: #fee4e2; }
|
|
680
|
+
.run-stop-btn:disabled { opacity: .55; cursor: default; }
|
|
485
681
|
/* Job title inline with employee avatar — replaces the old separate h2 row */
|
|
486
682
|
.conv-job-title {
|
|
487
683
|
flex: 1;
|
|
@@ -549,6 +745,18 @@ button { font: inherit; cursor: pointer; }
|
|
|
549
745
|
.run-state-pill.running {
|
|
550
746
|
background: rgba(31, 67, 125, 0.14);
|
|
551
747
|
}
|
|
748
|
+
.run-state-pill.working {
|
|
749
|
+
background: var(--state-working-soft);
|
|
750
|
+
color: var(--state-working);
|
|
751
|
+
}
|
|
752
|
+
.run-state-pill.waiting {
|
|
753
|
+
background: var(--state-waiting-soft);
|
|
754
|
+
color: var(--state-waiting);
|
|
755
|
+
}
|
|
756
|
+
.run-state-pill.complete {
|
|
757
|
+
background: var(--state-complete-soft);
|
|
758
|
+
color: var(--state-complete);
|
|
759
|
+
}
|
|
552
760
|
.run-state-pill.failed {
|
|
553
761
|
background: color-mix(in srgb, var(--danger) 12%, transparent);
|
|
554
762
|
color: var(--danger);
|
|
@@ -557,6 +765,11 @@ button { font: inherit; cursor: pointer; }
|
|
|
557
765
|
background: color-mix(in srgb, var(--done) 14%, transparent);
|
|
558
766
|
color: var(--done);
|
|
559
767
|
}
|
|
768
|
+
.run-state-pill.approved {
|
|
769
|
+
background: color-mix(in srgb, #2e7d32 18%, transparent);
|
|
770
|
+
color: #2e7d32;
|
|
771
|
+
font-weight: 800;
|
|
772
|
+
}
|
|
560
773
|
.conv-header {
|
|
561
774
|
display: flex;
|
|
562
775
|
flex-wrap: wrap;
|
|
@@ -581,7 +794,8 @@ button { font: inherit; cursor: pointer; }
|
|
|
581
794
|
align-items: flex-start;
|
|
582
795
|
gap: 12px;
|
|
583
796
|
min-width: 0;
|
|
584
|
-
|
|
797
|
+
width: 100%;
|
|
798
|
+
flex: 0 0 auto;
|
|
585
799
|
}
|
|
586
800
|
.conversation-status > * {
|
|
587
801
|
min-width: 0;
|
|
@@ -596,6 +810,7 @@ button { font: inherit; cursor: pointer; }
|
|
|
596
810
|
display: grid;
|
|
597
811
|
gap: 8px;
|
|
598
812
|
flex-shrink: 0;
|
|
813
|
+
min-height: 0;
|
|
599
814
|
}
|
|
600
815
|
.panel-details {
|
|
601
816
|
background: var(--soft);
|
|
@@ -699,15 +914,35 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
699
914
|
padding: 4px 10px;
|
|
700
915
|
border-radius: 8px;
|
|
701
916
|
}
|
|
917
|
+
.mark-complete-btn {
|
|
918
|
+
border-color: color-mix(in srgb, var(--state-complete) 42%, var(--line));
|
|
919
|
+
color: var(--state-complete);
|
|
920
|
+
font-weight: 700;
|
|
921
|
+
}
|
|
702
922
|
/* Thread panel */
|
|
703
923
|
.panel-details--thread {
|
|
704
924
|
border-radius: 8px;
|
|
705
925
|
border: 1px solid var(--line);
|
|
706
926
|
background: var(--bg);
|
|
707
|
-
overflow
|
|
708
|
-
overflow-x: hidden;
|
|
709
|
-
flex: 1;
|
|
927
|
+
overflow: hidden;
|
|
710
928
|
min-height: 0;
|
|
929
|
+
transition: border-color 120ms ease, box-shadow 120ms ease;
|
|
930
|
+
}
|
|
931
|
+
.panel-details--thread[open] {
|
|
932
|
+
display: flex;
|
|
933
|
+
flex-direction: column;
|
|
934
|
+
}
|
|
935
|
+
.panel-details--thread.thread-working {
|
|
936
|
+
border-color: color-mix(in srgb, var(--state-working) 78%, var(--line));
|
|
937
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-working) 34%, transparent);
|
|
938
|
+
}
|
|
939
|
+
.panel-details--thread.thread-waiting {
|
|
940
|
+
border-color: color-mix(in srgb, var(--state-waiting) 82%, var(--line));
|
|
941
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-waiting) 38%, transparent);
|
|
942
|
+
}
|
|
943
|
+
.panel-details--thread.thread-complete {
|
|
944
|
+
border-color: color-mix(in srgb, var(--state-complete) 76%, var(--line));
|
|
945
|
+
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-complete) 32%, transparent);
|
|
711
946
|
}
|
|
712
947
|
.panel-details--thread > summary {
|
|
713
948
|
padding: 12px 22px;
|
|
@@ -718,6 +953,11 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
718
953
|
.panel-details--thread > summary::-webkit-details-marker { display: none; }
|
|
719
954
|
.panel-details--thread .messages {
|
|
720
955
|
padding: 8px 22px 18px;
|
|
956
|
+
flex: 1 1 0;
|
|
957
|
+
height: auto;
|
|
958
|
+
min-height: 0;
|
|
959
|
+
overflow-y: auto;
|
|
960
|
+
overflow-x: hidden;
|
|
721
961
|
}
|
|
722
962
|
.employee-select.inline {
|
|
723
963
|
font-size: 12px;
|
|
@@ -777,6 +1017,8 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
777
1017
|
border: 1px solid var(--line);
|
|
778
1018
|
border-radius: 8px;
|
|
779
1019
|
padding: 8px 12px;
|
|
1020
|
+
width: 100%;
|
|
1021
|
+
flex: 1 1 100%;
|
|
780
1022
|
}
|
|
781
1023
|
|
|
782
1024
|
.thread-surface {
|
|
@@ -904,6 +1146,34 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
904
1146
|
border: 1px solid var(--line);
|
|
905
1147
|
color: var(--text);
|
|
906
1148
|
}
|
|
1149
|
+
.typing-indicator {
|
|
1150
|
+
animation: none;
|
|
1151
|
+
justify-items: start;
|
|
1152
|
+
}
|
|
1153
|
+
.typing-indicator .bubble {
|
|
1154
|
+
display: inline-flex;
|
|
1155
|
+
align-items: center;
|
|
1156
|
+
gap: 5px;
|
|
1157
|
+
min-width: 48px;
|
|
1158
|
+
padding-block: 10px;
|
|
1159
|
+
background: var(--surface);
|
|
1160
|
+
border: 1px solid var(--line);
|
|
1161
|
+
color: var(--text);
|
|
1162
|
+
}
|
|
1163
|
+
.typing-dot {
|
|
1164
|
+
width: 6px;
|
|
1165
|
+
height: 6px;
|
|
1166
|
+
border-radius: 50%;
|
|
1167
|
+
background: var(--muted);
|
|
1168
|
+
opacity: 0.45;
|
|
1169
|
+
animation: typing-bounce 1.1s infinite ease-in-out;
|
|
1170
|
+
}
|
|
1171
|
+
.typing-dot:nth-child(2) { animation-delay: 120ms; }
|
|
1172
|
+
.typing-dot:nth-child(3) { animation-delay: 240ms; }
|
|
1173
|
+
@keyframes typing-bounce {
|
|
1174
|
+
0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
|
|
1175
|
+
40% { opacity: 0.9; transform: translateY(-3px); }
|
|
1176
|
+
}
|
|
907
1177
|
.message.system .bubble {
|
|
908
1178
|
background: var(--soft);
|
|
909
1179
|
border: 1px solid var(--line);
|
|
@@ -996,6 +1266,10 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
996
1266
|
font-size: 11px;
|
|
997
1267
|
line-height: 1.4;
|
|
998
1268
|
}
|
|
1269
|
+
.coach-note.pending-job {
|
|
1270
|
+
color: var(--text);
|
|
1271
|
+
font-weight: 600;
|
|
1272
|
+
}
|
|
999
1273
|
.send-button {
|
|
1000
1274
|
background: var(--accent);
|
|
1001
1275
|
color: #fff;
|
|
@@ -1160,6 +1434,38 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
|
|
|
1160
1434
|
.job-option strong { font-weight: 600; }
|
|
1161
1435
|
.job-option span { color: var(--muted); font-size: 13px; }
|
|
1162
1436
|
|
|
1437
|
+
/* R2 (#521): ad-hoc row in the smart new-job input — type the work and start
|
|
1438
|
+
directly, without picking a catalog job. Replaces the old "Just describe what
|
|
1439
|
+
you need" button. */
|
|
1440
|
+
.aj-adhoc {
|
|
1441
|
+
width: 100%;
|
|
1442
|
+
display: flex;
|
|
1443
|
+
align-items: center;
|
|
1444
|
+
gap: 10px;
|
|
1445
|
+
text-align: left;
|
|
1446
|
+
background: var(--accent-soft);
|
|
1447
|
+
border: 1px solid var(--accent);
|
|
1448
|
+
border-radius: 8px;
|
|
1449
|
+
padding: 10px 12px;
|
|
1450
|
+
margin-bottom: 12px;
|
|
1451
|
+
color: var(--text);
|
|
1452
|
+
}
|
|
1453
|
+
.aj-adhoc:hover { background: var(--soft); }
|
|
1454
|
+
.aj-adhoc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
1455
|
+
.aj-adhoc .aj-adhoc-ico {
|
|
1456
|
+
width: 30px; height: 30px; border-radius: 50%;
|
|
1457
|
+
background: #fff; color: var(--accent);
|
|
1458
|
+
display: flex; align-items: center; justify-content: center;
|
|
1459
|
+
font-size: 15px; flex-shrink: 0;
|
|
1460
|
+
}
|
|
1461
|
+
.aj-adhoc .aj-adhoc-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
|
|
1462
|
+
.aj-adhoc .aj-adhoc-title { font-weight: 600; font-size: 14px; }
|
|
1463
|
+
.aj-adhoc .aj-adhoc-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
1464
|
+
.aj-adhoc .aj-adhoc-action {
|
|
1465
|
+
flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fff;
|
|
1466
|
+
background: var(--accent); border-radius: 14px; padding: 5px 13px;
|
|
1467
|
+
}
|
|
1468
|
+
|
|
1163
1469
|
.step2 .assigned-job {
|
|
1164
1470
|
background: var(--accent-soft);
|
|
1165
1471
|
border: 1px solid #c5dcd0;
|
|
@@ -1279,7 +1585,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1279
1585
|
.tracker-rows {
|
|
1280
1586
|
display: flex;
|
|
1281
1587
|
flex-direction: column;
|
|
1282
|
-
gap:
|
|
1588
|
+
gap: 10px;
|
|
1283
1589
|
}
|
|
1284
1590
|
.tracker-row {
|
|
1285
1591
|
display: flex;
|
|
@@ -1293,7 +1599,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1293
1599
|
align-items: center;
|
|
1294
1600
|
gap: 6px;
|
|
1295
1601
|
flex: 1 1 0;
|
|
1296
|
-
min-width:
|
|
1602
|
+
min-width: 34px;
|
|
1297
1603
|
position: relative;
|
|
1298
1604
|
z-index: 2;
|
|
1299
1605
|
}
|
|
@@ -1315,7 +1621,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1315
1621
|
.tracker .stage.done::before { background: var(--done); }
|
|
1316
1622
|
.tracker .stage.current::before { background: var(--warn); }
|
|
1317
1623
|
.tracker .stage-circle {
|
|
1318
|
-
width:
|
|
1624
|
+
width: 24px; height: 24px;
|
|
1319
1625
|
border-radius: 50%;
|
|
1320
1626
|
background: var(--surface);
|
|
1321
1627
|
border: 2px solid var(--line);
|
|
@@ -1323,6 +1629,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1323
1629
|
align-items: center;
|
|
1324
1630
|
justify-content: center;
|
|
1325
1631
|
font-size: 11px;
|
|
1632
|
+
line-height: 1;
|
|
1326
1633
|
color: var(--muted);
|
|
1327
1634
|
font-weight: 600;
|
|
1328
1635
|
position: relative;
|
|
@@ -1340,7 +1647,7 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1340
1647
|
box-shadow: 0 0 0 4px rgba(176, 132, 66, 0.15);
|
|
1341
1648
|
}
|
|
1342
1649
|
.tracker .stage-label {
|
|
1343
|
-
font-size:
|
|
1650
|
+
font-size: 10px;
|
|
1344
1651
|
color: var(--muted);
|
|
1345
1652
|
text-align: center;
|
|
1346
1653
|
white-space: nowrap;
|
|
@@ -1381,6 +1688,15 @@ button.small { padding: 4px 10px; font-size: 12px; }
|
|
|
1381
1688
|
.tracker-active-label { display: block; }
|
|
1382
1689
|
}
|
|
1383
1690
|
|
|
1691
|
+
/* Pane-width label collapse: the tracker stays a single horizontal row at
|
|
1692
|
+
any width. When JS detects the pane is too narrow to fit every stage
|
|
1693
|
+
label (.tracker-compact), labels collapse to circles + the standalone
|
|
1694
|
+
active label — the row never wraps onto a second line. This is keyed to
|
|
1695
|
+
the tracker's own width, so it works even when the viewport is wide but
|
|
1696
|
+
the conversation pane is narrowed by the sidebar. */
|
|
1697
|
+
.tracker.tracker-compact .stage .stage-label { display: none; }
|
|
1698
|
+
.tracker.tracker-compact .tracker-active-label { display: block; }
|
|
1699
|
+
|
|
1384
1700
|
/* Template picker popover. Fixed-position so it escapes overflow:hidden/auto
|
|
1385
1701
|
ancestors (#active-conv, .panel-details). JS sets right/bottom on open. */
|
|
1386
1702
|
.template-popover {
|
|
@@ -1986,3 +2302,1476 @@ body:is([data-surface="task-pane"],[data-surface="extension"]) .word-context-bar
|
|
|
1986
2302
|
Inherits all task-pane layout rules (via :is() above) but hides the
|
|
1987
2303
|
project label since extensions work on web pages, not local project paths. */
|
|
1988
2304
|
body[data-surface="extension"] .tp-project-label { display: none; }
|
|
2305
|
+
|
|
2306
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
2307
|
+
Issue #512 — Manager-style team flow shell
|
|
2308
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
2309
|
+
|
|
2310
|
+
/* Hide legacy .page when shell is active */
|
|
2311
|
+
body.hub-shell > .page { display: none !important; }
|
|
2312
|
+
body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
|
|
2313
|
+
|
|
2314
|
+
/* Get-started rail */
|
|
2315
|
+
.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; }
|
|
2316
|
+
.gs-rocket { font-size: 14px; flex-shrink: 0; }
|
|
2317
|
+
.gs-steps { display: flex; align-items: center; gap: 4px; flex: 1; }
|
|
2318
|
+
.gs-step { padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; background: none; border: none; }
|
|
2319
|
+
.gs-step.done { color: var(--done); }
|
|
2320
|
+
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; }
|
|
2321
|
+
.gs-sep { color: var(--line); font-size: 11px; }
|
|
2322
|
+
.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; }
|
|
2323
|
+
.gs-hide { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; flex-shrink: 0; width: 22px; height: 22px; }
|
|
2324
|
+
.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); }
|
|
2325
|
+
.gs-pill[hidden] { display: none; }
|
|
2326
|
+
|
|
2327
|
+
/* Top nav: Company / Manager / Projects + avatar */
|
|
2328
|
+
.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; }
|
|
2329
|
+
.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; }
|
|
2330
|
+
.htab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
2331
|
+
.htab:hover { color: var(--text); }
|
|
2332
|
+
.hub-tabs-spacer { flex: 1; }
|
|
2333
|
+
.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; }
|
|
2334
|
+
|
|
2335
|
+
/* Account menu */
|
|
2336
|
+
.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; }
|
|
2337
|
+
.account-menu.open { display: block; }
|
|
2338
|
+
.am-header { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
|
|
2339
|
+
.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; }
|
|
2340
|
+
.am-name { font-size: 13px; font-weight: 700; }
|
|
2341
|
+
.am-email { font-size: 11px; color: var(--muted); }
|
|
2342
|
+
.am-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; }
|
|
2343
|
+
.am-item:hover { background: var(--bg); }
|
|
2344
|
+
.am-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; margin-top: 1px; }
|
|
2345
|
+
.am-label { font-weight: 600; }
|
|
2346
|
+
.am-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2347
|
+
.am-div { height: 1px; background: var(--line); margin: 4px 0; }
|
|
2348
|
+
.am-foot { padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
|
|
2349
|
+
.am-foot:hover { background: var(--bg); }
|
|
2350
|
+
|
|
2351
|
+
/* Hub areas */
|
|
2352
|
+
.hub-area { display: none; flex: 1; overflow: hidden; }
|
|
2353
|
+
.hub-area.on { display: flex; flex-direction: column; }
|
|
2354
|
+
.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 */ }
|
|
2355
|
+
|
|
2356
|
+
/* #521 R6: Company/Manager use the same rail + main shell as the project workspace. */
|
|
2357
|
+
.area-shell { display: flex; flex: 1; min-height: 0; }
|
|
2358
|
+
.area-rail { width: 244px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 6px 0; }
|
|
2359
|
+
.area-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
|
|
2360
|
+
.area-rail-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; }
|
|
2361
|
+
.area-rail-job { display: flex; align-items: center; gap: 11px; padding: 10px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
|
|
2362
|
+
.area-rail-job:hover { background: var(--bg); }
|
|
2363
|
+
.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; }
|
|
2364
|
+
.area-rail-job .arj-name { font-size: 13px; font-weight: 600; color: var(--text); }
|
|
2365
|
+
.area-rail-job .arj-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2366
|
+
.area-rail-note { padding: 10px 16px 14px; font-size: 11px; color: var(--muted); line-height: 1.5; }
|
|
2367
|
+
.hub-section-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
|
|
2368
|
+
.hub-eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
|
|
2369
|
+
.hub-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; }
|
|
2370
|
+
.hub-sub { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
|
|
2371
|
+
|
|
2372
|
+
/* Profile rows */
|
|
2373
|
+
.syn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
|
|
2374
|
+
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
|
|
2375
|
+
.syn-row:last-child { border-bottom: none; }
|
|
2376
|
+
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 90px; flex-shrink: 0; padding-top: 1px; }
|
|
2377
|
+
.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
|
|
2378
|
+
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2379
|
+
|
|
2380
|
+
/* Learnings */
|
|
2381
|
+
.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; }
|
|
2382
|
+
.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; }
|
|
2383
|
+
.scope-org { background: var(--accent-soft); color: var(--accent); }
|
|
2384
|
+
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
|
|
2385
|
+
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
|
|
2386
|
+
.lc-body { flex: 1; min-width: 0; }
|
|
2387
|
+
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
2388
|
+
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
2389
|
+
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
2390
|
+
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
|
|
2391
|
+
.bless-yes { background: var(--done); color: #fff; }
|
|
2392
|
+
.bless-no { background: var(--bg); color: var(--muted); }
|
|
2393
|
+
.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; }
|
|
2394
|
+
|
|
2395
|
+
/* Projects sub-tabs — HTML uses .proj-tabs (not .proj-tabs-bar) and .ptab-add (not .ptab-add-btn) */
|
|
2396
|
+
.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; }
|
|
2397
|
+
.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; }
|
|
2398
|
+
.ptab.on { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
|
|
2399
|
+
.ptab:hover { color: var(--text); }
|
|
2400
|
+
.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; }
|
|
2401
|
+
.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; }
|
|
2402
|
+
|
|
2403
|
+
/* Overview grid */
|
|
2404
|
+
#proj-overview { flex: 1; overflow-y: auto; }
|
|
2405
|
+
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 20px 18px; }
|
|
2406
|
+
.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: box-shadow .12s; }
|
|
2407
|
+
.proj-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
|
|
2408
|
+
.proj-card-add { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--muted); font-size: 13px; min-height: 120px; }
|
|
2409
|
+
.proj-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
|
|
2410
|
+
.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; }
|
|
2411
|
+
.proj-team { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
|
|
2412
|
+
.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; }
|
|
2413
|
+
.proj-badge.quiet { color: var(--muted); background: var(--bg); }
|
|
2414
|
+
|
|
2415
|
+
/* #521 R5/R6.4: collapsible project context sections at the top of the workspace
|
|
2416
|
+
conversation pane (Brief / Learnings), consistent with Company/Manager. */
|
|
2417
|
+
.proj-context-top { flex-shrink: 0; padding: 12px 16px 0; overflow-y: auto; max-height: 46vh; }
|
|
2418
|
+
/* #521: shared empty/CTA block — used by BOTH the Brief and Learnings sections so
|
|
2419
|
+
they look consistent (a left-aligned message, optional note, primary button). */
|
|
2420
|
+
.ctx-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 16px; }
|
|
2421
|
+
.ctx-cta-msg { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 520px; }
|
|
2422
|
+
.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; }
|
|
2423
|
+
.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; }
|
|
2424
|
+
.ctx-cta-btn:hover { filter: brightness(1.05); }
|
|
2425
|
+
.ctx-loading { font-size: 13px; color: var(--muted); padding: 10px 4px; }
|
|
2426
|
+
/* #521: project-onboarding input modal (manager's direction before a run). */
|
|
2427
|
+
.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); }
|
|
2428
|
+
.obi-input:focus { outline: none; border-color: var(--accent, #1f6feb); }
|
|
2429
|
+
.obi-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
|
|
2430
|
+
.obi-cancel { font-size: 14px; font-weight: 500; color: var(--muted, #666); background: none; border: none; padding: 10px 14px; cursor: pointer; }
|
|
2431
|
+
.obi-start { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
|
|
2432
|
+
.obi-start:hover { filter: brightness(1.05); }
|
|
2433
|
+
.ctx-acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
|
|
2434
|
+
.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); }
|
|
2435
|
+
.ctx-acc > summary::-webkit-details-marker { display: none; }
|
|
2436
|
+
.ctx-acc > summary:hover { background: var(--bg); }
|
|
2437
|
+
.ctx-acc > summary .ca-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
|
|
2438
|
+
.ctx-acc[open] > summary .ca-chev { transform: rotate(90deg); }
|
|
2439
|
+
.ctx-acc > summary .ca-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
|
|
2440
|
+
.ctx-acc-body { padding: 4px 14px 14px; }
|
|
2441
|
+
|
|
2442
|
+
/* #521: project-onboarding loop banner inside the Brief — "team is processing /
|
|
2443
|
+
here's their understanding to review". */
|
|
2444
|
+
.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; }
|
|
2445
|
+
.ob-brief-banner .obb-ico { font-size: 16px; flex-shrink: 0; }
|
|
2446
|
+
.ob-brief-banner.ob-processing { background: var(--accent-soft); border: 1px solid rgba(0,113,227,.22); color: var(--text); }
|
|
2447
|
+
.ob-brief-banner.ob-review { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.3); color: var(--text); }
|
|
2448
|
+
|
|
2449
|
+
/* Project workspace */
|
|
2450
|
+
#proj-workspace {
|
|
2451
|
+
--tree-sidebar-width: 216px;
|
|
2452
|
+
display: flex;
|
|
2453
|
+
flex: 1;
|
|
2454
|
+
min-height: 0;
|
|
2455
|
+
}
|
|
2456
|
+
.tree-sidebar {
|
|
2457
|
+
width: var(--tree-sidebar-width);
|
|
2458
|
+
min-width: 176px;
|
|
2459
|
+
max-width: 380px;
|
|
2460
|
+
flex-shrink: 0;
|
|
2461
|
+
background: var(--surface);
|
|
2462
|
+
border-right: 1px solid var(--line);
|
|
2463
|
+
overflow-y: auto;
|
|
2464
|
+
overflow-x: hidden;
|
|
2465
|
+
display: flex;
|
|
2466
|
+
flex-direction: column;
|
|
2467
|
+
padding: 10px 0;
|
|
2468
|
+
}
|
|
2469
|
+
.tree-collapse-btn {
|
|
2470
|
+
width: 22px;
|
|
2471
|
+
flex-shrink: 0;
|
|
2472
|
+
border: 0;
|
|
2473
|
+
border-right: 1px solid var(--line);
|
|
2474
|
+
background: var(--surface);
|
|
2475
|
+
color: var(--muted);
|
|
2476
|
+
cursor: pointer;
|
|
2477
|
+
display: grid;
|
|
2478
|
+
place-items: center;
|
|
2479
|
+
font-size: 18px;
|
|
2480
|
+
line-height: 1;
|
|
2481
|
+
padding: 0;
|
|
2482
|
+
}
|
|
2483
|
+
.tree-collapse-btn:hover {
|
|
2484
|
+
color: var(--text);
|
|
2485
|
+
background: var(--bg);
|
|
2486
|
+
}
|
|
2487
|
+
.tree-collapse-btn::before { content: "<"; }
|
|
2488
|
+
.tree-resizer {
|
|
2489
|
+
width: 7px;
|
|
2490
|
+
flex-shrink: 0;
|
|
2491
|
+
cursor: col-resize;
|
|
2492
|
+
background: linear-gradient(to right, transparent 0 2px, var(--line) 2px 3px, transparent 3px 100%);
|
|
2493
|
+
}
|
|
2494
|
+
.tree-resizer:hover,
|
|
2495
|
+
#proj-workspace.tree-resizing .tree-resizer {
|
|
2496
|
+
background: linear-gradient(to right, transparent 0 2px, var(--accent) 2px 4px, transparent 4px 100%);
|
|
2497
|
+
}
|
|
2498
|
+
#proj-workspace.tree-collapsed .tree-sidebar {
|
|
2499
|
+
width: 0;
|
|
2500
|
+
min-width: 0;
|
|
2501
|
+
max-width: 0;
|
|
2502
|
+
padding: 0;
|
|
2503
|
+
border-right: 0;
|
|
2504
|
+
overflow: hidden;
|
|
2505
|
+
}
|
|
2506
|
+
#proj-workspace.tree-collapsed .tree-sidebar > * { display: none; }
|
|
2507
|
+
#proj-workspace.tree-collapsed .tree-collapse-btn::before { content: ">"; }
|
|
2508
|
+
#proj-workspace.tree-collapsed .tree-resizer { display: none; }
|
|
2509
|
+
.tree-emp { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; user-select: none; }
|
|
2510
|
+
.tree-emp:hover { background: var(--bg); }
|
|
2511
|
+
.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; }
|
|
2512
|
+
.t-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
|
|
2513
|
+
.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; }
|
|
2514
|
+
.tree-emp:hover .t-emp-add { background: var(--accent-soft); border-color: rgba(0,113,227,.28); }
|
|
2515
|
+
.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
|
|
2516
|
+
.tree-job { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 44px; cursor: pointer; }
|
|
2517
|
+
.tree-job:hover { background: var(--bg); }
|
|
2518
|
+
.tree-job.selected { background: var(--bg); }
|
|
2519
|
+
.tj-label { font-size: 12px; color: var(--muted); flex: 1; }
|
|
2520
|
+
.tree-job.selected .tj-label { color: var(--text); font-weight: 500; }
|
|
2521
|
+
.tj-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
|
|
2522
|
+
|
|
2523
|
+
/* #533 R6 — delete a run. Hover-revealed controls (mirrors the eh-add "+"
|
|
2524
|
+
affordance) plus a small inline confirm. Hub-local delete; never touches disk. */
|
|
2525
|
+
.conv-item { position: relative; }
|
|
2526
|
+
.run-del { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
|
|
2527
|
+
width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
|
|
2528
|
+
background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1;
|
|
2529
|
+
display: none; align-items: center; justify-content: center; cursor: pointer; }
|
|
2530
|
+
.conv-item:hover .run-del, .run-del:focus-visible { display: flex; }
|
|
2531
|
+
.run-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
|
|
2532
|
+
.tree-job { position: relative; }
|
|
2533
|
+
.tree-job .tj-del { margin-left: 4px; width: 18px; height: 18px; border-radius: 5px;
|
|
2534
|
+
border: 1px solid var(--line); background: var(--surface); color: var(--muted);
|
|
2535
|
+
font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center;
|
|
2536
|
+
cursor: pointer; flex-shrink: 0; }
|
|
2537
|
+
.tree-job:hover .tj-del, .tj-del:focus-visible { display: flex; }
|
|
2538
|
+
.tree-job .tj-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
|
|
2539
|
+
.del-confirm { margin: 8px 14px 4px; background: var(--surface); border: 1px solid var(--line);
|
|
2540
|
+
border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--text); line-height: 1.5; }
|
|
2541
|
+
.del-confirm .dc-row { display: flex; gap: 8px; margin-top: 8px; }
|
|
2542
|
+
.del-confirm button { font: inherit; font-size: 12px; border-radius: 7px; padding: 5px 12px; cursor: pointer; }
|
|
2543
|
+
.del-confirm .dc-del { background: var(--danger, #d2261f); color: #fff; border: none; }
|
|
2544
|
+
.del-confirm .dc-cancel { background: var(--surface); border: 1px solid var(--line); color: var(--text); }
|
|
2545
|
+
|
|
2546
|
+
/* R1 (#521): employees are the heroes — large accordion rows replace .tree-emp.
|
|
2547
|
+
The summary is the employee (40px avatar, name, role, status dot); their jobs
|
|
2548
|
+
nest in the body and collapse with the row. */
|
|
2549
|
+
/* .proj-updates-acc shares this chrome but is intentionally NOT .emp-hero (that
|
|
2550
|
+
class is the employee-hero selector). */
|
|
2551
|
+
.emp-hero, .proj-updates-acc { border-bottom: 1px solid var(--line); }
|
|
2552
|
+
.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; }
|
|
2553
|
+
.emp-hero > summary::-webkit-details-marker, .proj-updates-acc > summary::-webkit-details-marker { display: none; }
|
|
2554
|
+
.emp-hero > summary:hover, .proj-updates-acc > summary:hover { background: var(--bg); }
|
|
2555
|
+
.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; }
|
|
2556
|
+
.emp-hero .eh-id, .proj-updates-acc .eh-id { flex: 1; min-width: 0; }
|
|
2557
|
+
.emp-hero .eh-name, .proj-updates-acc .eh-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
|
|
2558
|
+
.emp-hero .eh-role, .proj-updates-acc .eh-role { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2559
|
+
.emp-hero .eh-dot, .proj-updates-acc .eh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
|
|
2560
|
+
.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; }
|
|
2561
|
+
.emp-hero > summary:hover .eh-add, .proj-updates-acc > summary:hover .eh-add { opacity: 1; }
|
|
2562
|
+
/* Issue #538 — per-employee "find a human manager" action in the employee hero. */
|
|
2563
|
+
.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; }
|
|
2564
|
+
.emp-hero > summary:hover .eh-hire-manager { opacity: 1; }
|
|
2565
|
+
.emp-hero .eh-hire-manager:hover { border-color: var(--accent); }
|
|
2566
|
+
/* Project Updates "+" is a primary affordance — always visible, not hover-only. */
|
|
2567
|
+
.proj-updates-acc .eh-add { opacity: 1; }
|
|
2568
|
+
.emp-hero .eh-chev, .proj-updates-acc .eh-chev { font-size: 10px; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
|
|
2569
|
+
.emp-hero[open] > summary .eh-chev, .proj-updates-acc[open] > summary .eh-chev { transform: rotate(90deg); }
|
|
2570
|
+
.emp-hero .eh-jobs, .proj-updates-acc .eh-jobs { padding: 0 0 6px; }
|
|
2571
|
+
.emp-hero .eh-jobs .tree-job, .proj-updates-acc .eh-jobs .tree-job { padding-left: 36px; }
|
|
2572
|
+
.emp-hero .eh-empty, .proj-updates-acc .eh-empty { font-size: 11px; color: var(--muted); padding: 4px 14px 6px 36px; }
|
|
2573
|
+
.tree-sep { height: 1px; background: var(--line); margin: 6px 14px; }
|
|
2574
|
+
.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); }
|
|
2575
|
+
.tree-action:hover { background: var(--bg); border-radius: 8px; }
|
|
2576
|
+
.tree-legend { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
|
|
2577
|
+
.tree-legend-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
|
|
2578
|
+
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
|
|
2579
|
+
|
|
2580
|
+
/* Dot color helpers */
|
|
2581
|
+
.dot-red { background: var(--state-waiting) !important; }
|
|
2582
|
+
.dot-amber { background: var(--state-working) !important; }
|
|
2583
|
+
.dot-green { background: var(--state-complete) !important; }
|
|
2584
|
+
.dot-grey { background: var(--line) !important; }
|
|
2585
|
+
|
|
2586
|
+
/* Workspace conversation pane */
|
|
2587
|
+
.workspace-conv { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
|
|
2588
|
+
.workspace-conv > .page { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 0; max-width: none; }
|
|
2589
|
+
.workspace-conv .layout { flex: 1; min-height: 0; overflow: hidden; }
|
|
2590
|
+
.workspace-conv .conversation { flex: 1; width: 100%; min-width: 0; }
|
|
2591
|
+
.workspace-conv .panel-details--thread { overflow: hidden; }
|
|
2592
|
+
|
|
2593
|
+
/* #521 UI rework: the project workspace has TWO mutually-exclusive views inside
|
|
2594
|
+
.workspace-conv — the Brief & Learnings page (#proj-context-top) and the job
|
|
2595
|
+
conversation (.page). Cramming both into one pane left the conversation short
|
|
2596
|
+
and squeezed the thread/coach/micro-manage. Now a job conversation gets the
|
|
2597
|
+
FULL height (no Brief stealing space), and the Brief is its own page reached
|
|
2598
|
+
from the sidebar. JS toggles .mode-conv / .mode-brief on .workspace-conv. */
|
|
2599
|
+
.workspace-conv.mode-conv #proj-context-top { display: none; }
|
|
2600
|
+
.workspace-conv.mode-brief > .page { display: none !important; }
|
|
2601
|
+
.workspace-conv.mode-brief #proj-context-top {
|
|
2602
|
+
max-height: none;
|
|
2603
|
+
flex: 1 1 auto;
|
|
2604
|
+
min-height: 0;
|
|
2605
|
+
overflow-y: auto;
|
|
2606
|
+
padding: 16px 18px;
|
|
2607
|
+
}
|
|
2608
|
+
|
|
2609
|
+
/* Conversation view (full height): thread gets priority with a usable floor and
|
|
2610
|
+
scrolls its messages internally; the support-stack stacks naturally and scrolls
|
|
2611
|
+
on its own when both coach + micro-manage are open (it must NOT be a height-
|
|
2612
|
+
distributing grid, or it clips the open panels — the original bug). */
|
|
2613
|
+
.workspace-conv #active-conv {
|
|
2614
|
+
overflow: hidden;
|
|
2615
|
+
display: grid;
|
|
2616
|
+
grid-template-rows: auto auto minmax(200px, 1fr) auto;
|
|
2617
|
+
}
|
|
2618
|
+
.workspace-conv #thread-panel[open] { min-height: 0; display: flex; flex-direction: column; }
|
|
2619
|
+
.workspace-conv #thread-panel > summary { flex-shrink: 0; }
|
|
2620
|
+
.workspace-conv #thread-panel #messages { flex: 1; min-height: 0; overflow-y: auto; }
|
|
2621
|
+
.workspace-conv .support-stack {
|
|
2622
|
+
display: block; /* override base display:grid so panels stack, not clip */
|
|
2623
|
+
min-height: 0;
|
|
2624
|
+
max-height: 48vh; /* bounded; scrolls internally if both panels open */
|
|
2625
|
+
overflow-y: auto;
|
|
2626
|
+
}
|
|
2627
|
+
.workspace-conv .support-stack > .panel-details,
|
|
2628
|
+
.workspace-conv .support-stack > .micro { margin-bottom: 8px; }
|
|
2629
|
+
|
|
2630
|
+
@media (max-width: 640px) {
|
|
2631
|
+
body.hub-shell { overflow-x: hidden; }
|
|
2632
|
+
.gs-rail { overflow-x: auto; padding-inline: 10px; }
|
|
2633
|
+
.hub-tabs { min-width: 0; }
|
|
2634
|
+
.htab { padding-inline: 14px; }
|
|
2635
|
+
.proj-tabs,
|
|
2636
|
+
.proj-tabs-bar {
|
|
2637
|
+
min-width: 0;
|
|
2638
|
+
}
|
|
2639
|
+
#proj-workspace {
|
|
2640
|
+
flex-direction: column;
|
|
2641
|
+
overflow: hidden;
|
|
2642
|
+
}
|
|
2643
|
+
.tree-sidebar {
|
|
2644
|
+
width: 100%;
|
|
2645
|
+
min-width: 0;
|
|
2646
|
+
max-width: none;
|
|
2647
|
+
max-height: 210px;
|
|
2648
|
+
border-right: none;
|
|
2649
|
+
border-bottom: 1px solid var(--line);
|
|
2650
|
+
}
|
|
2651
|
+
.tree-collapse-btn,
|
|
2652
|
+
.tree-resizer {
|
|
2653
|
+
display: none;
|
|
2654
|
+
}
|
|
2655
|
+
#proj-workspace.tree-collapsed .tree-sidebar {
|
|
2656
|
+
width: 100%;
|
|
2657
|
+
max-width: none;
|
|
2658
|
+
padding: 10px 0;
|
|
2659
|
+
border-bottom: 1px solid var(--line);
|
|
2660
|
+
overflow-y: auto;
|
|
2661
|
+
}
|
|
2662
|
+
#proj-workspace.tree-collapsed .tree-sidebar > * { display: flex; }
|
|
2663
|
+
.workspace-conv {
|
|
2664
|
+
width: 100%;
|
|
2665
|
+
min-width: 0;
|
|
2666
|
+
}
|
|
2667
|
+
.workspace-conv .layout {
|
|
2668
|
+
min-width: 0;
|
|
2669
|
+
}
|
|
2670
|
+
}
|
|
2671
|
+
|
|
2672
|
+
/* Review surfaces */
|
|
2673
|
+
.completion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
|
|
2674
|
+
.completion-card .cc-title { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
|
|
2675
|
+
.completion-card .cc-row { font-size: 13px; color: var(--text); line-height: 1.65; }
|
|
2676
|
+
.art-strip2 { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); }
|
|
2677
|
+
.art-strip2 .as-name { font-size: 13px; font-weight: 600; }
|
|
2678
|
+
.art-strip2 .as-sub { font-size: 11px; color: var(--muted); }
|
|
2679
|
+
.act-bar { border-top: 1px solid var(--line); padding: 8px 16px 12px; background: var(--surface); }
|
|
2680
|
+
.act-note { font-size: 11px; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }
|
|
2681
|
+
.act-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
|
|
2682
|
+
.act-row .chips-label { font-size: 11px; color: var(--muted); font-weight: 600; }
|
|
2683
|
+
.act-input { display: flex; gap: 10px; align-items: flex-end; }
|
|
2684
|
+
.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; }
|
|
2685
|
+
.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; }
|
|
2686
|
+
.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; }
|
|
2687
|
+
.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; }
|
|
2688
|
+
.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; }
|
|
2689
|
+
|
|
2690
|
+
/* Modals */
|
|
2691
|
+
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 70; overflow-y: auto; }
|
|
2692
|
+
.modal-backdrop.open { display: block; }
|
|
2693
|
+
.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; }
|
|
2694
|
+
.modal-hdr { padding: 18px 22px; border-bottom: 1px solid var(--line); }
|
|
2695
|
+
.modal-hdr h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
|
|
2696
|
+
.modal-hdr p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
|
|
2697
|
+
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
|
|
2698
|
+
.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; }
|
|
2699
|
+
.modal-close:hover { color: var(--text); }
|
|
2700
|
+
.modal-footer { padding: 12px 22px 20px; display: flex; align-items: center; justify-content: space-between; }
|
|
2701
|
+
.modal-next { padding: 9px 22px; background: var(--text); color: #fff; border: none; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
|
|
2702
|
+
.modal-back { font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; }
|
|
2703
|
+
.modal-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
|
|
2704
|
+
.modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
|
|
2705
|
+
.modal-dot.on { background: var(--text); }
|
|
2706
|
+
.np-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
|
|
2707
|
+
.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; }
|
|
2708
|
+
.np-field input:focus, .np-field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
2709
|
+
.job-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
2710
|
+
.job-row:last-child { border-bottom: none; }
|
|
2711
|
+
.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; }
|
|
2712
|
+
.job-row .jr-body { flex: 1; min-width: 0; }
|
|
2713
|
+
.job-row .jr-name { font-size: 13px; font-weight: 600; }
|
|
2714
|
+
.job-row .jr-who { font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
2715
|
+
.job-row.locked { cursor: pointer; opacity: .72; }
|
|
2716
|
+
.jr-lock { font-size: 11px; color: var(--muted); flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
|
|
2717
|
+
.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; }
|
|
2718
|
+
.modal-cat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 2px; }
|
|
2719
|
+
.emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
|
|
2720
|
+
.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); }
|
|
2721
|
+
.emp-tile:hover, .emp-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
|
|
2722
|
+
.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; }
|
|
2723
|
+
.et-name { font-size: 12px; font-weight: 600; color: var(--text); }
|
|
2724
|
+
.et-role { font-size: 10px; color: var(--muted); }
|
|
2725
|
+
.emp-tile.selected .et-name { color: var(--accent); }
|
|
2726
|
+
.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; }
|
|
2727
|
+
.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; }
|
|
2728
|
+
.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; }
|
|
2729
|
+
.sum-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
|
|
2730
|
+
.sum-row:last-child { border-bottom: none; }
|
|
2731
|
+
.sum-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 80px; flex-shrink: 0; padding-top: 1px; }
|
|
2732
|
+
.sum-val { font-size: 13px; color: var(--text); flex: 1; line-height: 1.5; }
|
|
2733
|
+
.sum-team { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
|
|
2734
|
+
.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; }
|
|
2735
|
+
|
|
2736
|
+
|
|
2737
|
+
/* ── #512 CSS class-name corrections (hub-tab vs htab, avatar-btn, legacy suppression) ── */
|
|
2738
|
+
|
|
2739
|
+
/* The nav buttons use hub-tab, not htab */
|
|
2740
|
+
.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; }
|
|
2741
|
+
.hub-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
2742
|
+
.hub-tab:hover { color: var(--text); }
|
|
2743
|
+
|
|
2744
|
+
/* Avatar button */
|
|
2745
|
+
.avatar-btn {
|
|
2746
|
+
width: 32px; height: 32px; border-radius: 50%;
|
|
2747
|
+
background: var(--accent); color: #fff;
|
|
2748
|
+
border: 2px solid rgba(255,255,255,0.3);
|
|
2749
|
+
font-size: 12px; font-weight: 700; letter-spacing: .02em;
|
|
2750
|
+
cursor: pointer; flex-shrink: 0; margin-left: auto;
|
|
2751
|
+
display: flex; align-items: center; justify-content: center;
|
|
2752
|
+
box-shadow: 0 1px 4px rgba(0,0,0,.18);
|
|
2753
|
+
transition: opacity .12s, box-shadow .12s;
|
|
2754
|
+
}
|
|
2755
|
+
.avatar-btn:hover { opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.22); }
|
|
2756
|
+
|
|
2757
|
+
/* Suppress the old Hub's header and rail when inside the workspace-conv */
|
|
2758
|
+
.workspace-conv .header { display: none !important; }
|
|
2759
|
+
.workspace-conv .rail { display: none !important; }
|
|
2760
|
+
|
|
2761
|
+
/* The legacy "+ New job" entry (#new-conv-btn) is relocated by tfRenderTree out
|
|
2762
|
+
of the suppressed rail into the visible tree-sidebar. Style it as the
|
|
2763
|
+
prominent top action so the standalone conversation flow stays reachable. */
|
|
2764
|
+
#tree-sidebar #new-conv-btn.tree-new-conv {
|
|
2765
|
+
display: block;
|
|
2766
|
+
width: 100%;
|
|
2767
|
+
margin: 0 0 4px;
|
|
2768
|
+
padding: 9px 12px;
|
|
2769
|
+
font-size: 13px;
|
|
2770
|
+
font-weight: 600;
|
|
2771
|
+
text-align: left;
|
|
2772
|
+
color: #fff;
|
|
2773
|
+
background: var(--accent, #1f6feb);
|
|
2774
|
+
border: none;
|
|
2775
|
+
border-radius: 8px;
|
|
2776
|
+
cursor: pointer;
|
|
2777
|
+
}
|
|
2778
|
+
#tree-sidebar #new-conv-btn.tree-new-conv:hover { filter: brightness(1.05); }
|
|
2779
|
+
|
|
2780
|
+
/* #521: Brief & Learnings nav entry — the project's own page, above New job. */
|
|
2781
|
+
#tree-sidebar .tree-brief-nav {
|
|
2782
|
+
display: flex;
|
|
2783
|
+
align-items: center;
|
|
2784
|
+
gap: 8px;
|
|
2785
|
+
width: 100%;
|
|
2786
|
+
margin: 0 0 6px;
|
|
2787
|
+
padding: 9px 12px;
|
|
2788
|
+
font-size: 13px;
|
|
2789
|
+
font-weight: 600;
|
|
2790
|
+
text-align: left;
|
|
2791
|
+
color: var(--ink, #1a1a1a);
|
|
2792
|
+
background: var(--surface, #fff);
|
|
2793
|
+
border: 1px solid var(--line, #e2e2e2);
|
|
2794
|
+
border-radius: 8px;
|
|
2795
|
+
cursor: pointer;
|
|
2796
|
+
}
|
|
2797
|
+
#tree-sidebar .tree-brief-nav:hover { background: var(--bg, #f6f6f6); }
|
|
2798
|
+
#tree-sidebar .tree-brief-nav.active {
|
|
2799
|
+
border-color: var(--accent, #1f6feb);
|
|
2800
|
+
background: color-mix(in srgb, var(--accent, #1f6feb) 8%, transparent);
|
|
2801
|
+
color: var(--accent, #1f6feb);
|
|
2802
|
+
}
|
|
2803
|
+
#tree-sidebar .tree-brief-nav .tbn-ico { font-size: 14px; }
|
|
2804
|
+
|
|
2805
|
+
/* #521: Project Updates accordion — groups project-onboarding + sleep-on-learnings
|
|
2806
|
+
with run history. Reuses .emp-hero/.area-rail-acc chrome; adds the "+" run menu. */
|
|
2807
|
+
#tree-sidebar .proj-updates-acc { position: relative; }
|
|
2808
|
+
#tree-sidebar .pu-menu {
|
|
2809
|
+
position: absolute;
|
|
2810
|
+
top: 46px;
|
|
2811
|
+
right: 8px;
|
|
2812
|
+
z-index: 40;
|
|
2813
|
+
min-width: 200px;
|
|
2814
|
+
background: var(--surface, #fff);
|
|
2815
|
+
border: 1px solid var(--line, #e2e2e2);
|
|
2816
|
+
border-radius: 10px;
|
|
2817
|
+
box-shadow: 0 8px 24px rgba(0,0,0,.12);
|
|
2818
|
+
padding: 6px;
|
|
2819
|
+
}
|
|
2820
|
+
#tree-sidebar .pu-menu-item {
|
|
2821
|
+
display: flex;
|
|
2822
|
+
align-items: center;
|
|
2823
|
+
gap: 8px;
|
|
2824
|
+
width: 100%;
|
|
2825
|
+
padding: 8px 10px;
|
|
2826
|
+
font-size: 13px;
|
|
2827
|
+
text-align: left;
|
|
2828
|
+
color: var(--ink, #1a1a1a);
|
|
2829
|
+
background: transparent;
|
|
2830
|
+
border: none;
|
|
2831
|
+
border-radius: 7px;
|
|
2832
|
+
cursor: pointer;
|
|
2833
|
+
}
|
|
2834
|
+
#tree-sidebar .pu-menu-item:hover { background: var(--bg, #f6f6f6); }
|
|
2835
|
+
#tree-sidebar .pu-job { padding: 4px 0 2px; }
|
|
2836
|
+
#tree-sidebar .pu-job + .pu-job { margin-top: 4px; border-top: 1px solid var(--line, #ececec); padding-top: 8px; }
|
|
2837
|
+
#tree-sidebar .pu-job-name {
|
|
2838
|
+
font-size: 12px;
|
|
2839
|
+
font-weight: 700;
|
|
2840
|
+
letter-spacing: .02em;
|
|
2841
|
+
color: var(--muted, #666);
|
|
2842
|
+
padding: 2px 2px 4px;
|
|
2843
|
+
}
|
|
2844
|
+
|
|
2845
|
+
/* Relocated Runs section (legacy conversation switcher) inside the tree. */
|
|
2846
|
+
#tree-sidebar .rail-section--runs.tree-runs { display: block; margin-top: 6px; }
|
|
2847
|
+
#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; }
|
|
2848
|
+
#tree-sidebar .rail-section--runs.tree-runs .conv-list { display: block; }
|
|
2849
|
+
#tree-sidebar .rail-section--runs.tree-runs .conv-item { display: flex; width: 100%; text-align: left; }
|
|
2850
|
+
|
|
2851
|
+
/* Make workspace-conv take the remaining flex space and hide its outer scrollbar */
|
|
2852
|
+
.workspace-conv > .page { overflow: hidden; }
|
|
2853
|
+
.workspace-conv .layout { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
|
|
2854
|
+
|
|
2855
|
+
|
|
2856
|
+
/* ── #512 Round 2: actual class names from rendered HTML ────────────────── */
|
|
2857
|
+
|
|
2858
|
+
/* Area layout — (D35 fix: consolidated at line ~2037; this duplicate removed) */
|
|
2859
|
+
.eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
|
|
2860
|
+
.area-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; }
|
|
2861
|
+
.area-lede { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
|
|
2862
|
+
.sec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
2863
|
+
|
|
2864
|
+
/* Profile card */
|
|
2865
|
+
.card.area-profile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; margin-top: 10px; }
|
|
2866
|
+
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
|
|
2867
|
+
.syn-row:last-child { border-bottom: none; }
|
|
2868
|
+
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 88px; flex-shrink: 0; padding-top: 2px; }
|
|
2869
|
+
.syn-val { flex: 1; font-size: 13px; color: var(--text); line-height: 1.5; }
|
|
2870
|
+
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
|
|
2871
|
+
|
|
2872
|
+
/* Issue #512 R3/R8 — Team Context inline editor. */
|
|
2873
|
+
/* ctx-content is now a div with rendered markdown (formatEmployeeText), not a raw <pre> */
|
|
2874
|
+
.ctx-content { font-size: 13px; line-height: 1.6; color: var(--text); word-break: break-word; }
|
|
2875
|
+
.ctx-content p { margin: 0 0 6px; }
|
|
2876
|
+
.ctx-content p:last-child { margin-bottom: 0; }
|
|
2877
|
+
.ctx-content ul, .ctx-content ol { margin: 4px 0 6px 18px; padding: 0; }
|
|
2878
|
+
.ctx-content li { margin-bottom: 3px; }
|
|
2879
|
+
.ctx-content h1, .ctx-content h2, .ctx-content h3 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
|
|
2880
|
+
.ctx-content code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
|
|
2881
|
+
.ctx-content strong { font-weight: 700; }
|
|
2882
|
+
.ctx-path { margin-top: 6px; font-size: 11px; color: var(--sub); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
|
|
2883
|
+
|
|
2884
|
+
/* #533 R1/R2 — readable context/rules document view: keep section headings and the
|
|
2885
|
+
file's numbering instead of flattening to compacted lines. */
|
|
2886
|
+
.ctx-doc { font-size: 13px; line-height: 1.6; color: var(--text); }
|
|
2887
|
+
.ctx-doc .cd-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
|
|
2888
|
+
.ctx-doc .cd-h:first-child { margin-top: 0; }
|
|
2889
|
+
.ctx-doc ol, .ctx-doc ul { margin: 0 0 6px; padding-left: 22px; }
|
|
2890
|
+
.ctx-doc ol li, .ctx-doc ul li { margin: 0 0 4px; padding-left: 3px; }
|
|
2891
|
+
.ctx-doc ol li::marker { color: var(--muted); font-weight: 600; }
|
|
2892
|
+
.ctx-doc p { margin: 0 0 8px; }
|
|
2893
|
+
.ctx-doc p:last-child, .ctx-doc ol:last-child, .ctx-doc ul:last-child { margin-bottom: 0; }
|
|
2894
|
+
.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; }
|
|
2895
|
+
.ctx-editor:focus { outline: none; border-color: var(--accent); }
|
|
2896
|
+
.ctx-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
|
|
2897
|
+
.ctx-save { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
|
|
2898
|
+
.ctx-save:disabled { opacity: .6; cursor: default; }
|
|
2899
|
+
.ctx-cancel { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; }
|
|
2900
|
+
.ctx-err { font-size: 12px; color: var(--red, #d33); }
|
|
2901
|
+
.ctx-rerun-row { justify-content: flex-end; }
|
|
2902
|
+
|
|
2903
|
+
/* Friendly context/rules view: managers should not have to read Markdown. */
|
|
2904
|
+
.ctx-content ul,
|
|
2905
|
+
.ctx-content ol,
|
|
2906
|
+
.ctx-content h1,
|
|
2907
|
+
.ctx-content h2,
|
|
2908
|
+
.ctx-content h3,
|
|
2909
|
+
.ctx-content code {
|
|
2910
|
+
all: unset;
|
|
2911
|
+
}
|
|
2912
|
+
.ctx-content {
|
|
2913
|
+
display: flex;
|
|
2914
|
+
flex-direction: column;
|
|
2915
|
+
gap: 7px;
|
|
2916
|
+
}
|
|
2917
|
+
.ctx-context-line {
|
|
2918
|
+
padding: 3px 0;
|
|
2919
|
+
font-size: 13px;
|
|
2920
|
+
line-height: 1.5;
|
|
2921
|
+
}
|
|
2922
|
+
.ctx-rule-block {
|
|
2923
|
+
font-size: 13px;
|
|
2924
|
+
line-height: 1.55;
|
|
2925
|
+
white-space: pre-wrap;
|
|
2926
|
+
}
|
|
2927
|
+
.ctx-rule-item {
|
|
2928
|
+
position: relative;
|
|
2929
|
+
padding: 8px 10px 8px 28px;
|
|
2930
|
+
border: 1px solid var(--line);
|
|
2931
|
+
border-radius: 8px;
|
|
2932
|
+
background: var(--bg);
|
|
2933
|
+
font-size: 13px;
|
|
2934
|
+
line-height: 1.45;
|
|
2935
|
+
}
|
|
2936
|
+
.ctx-rule-item::before {
|
|
2937
|
+
content: "";
|
|
2938
|
+
position: absolute;
|
|
2939
|
+
left: 11px;
|
|
2940
|
+
top: 15px;
|
|
2941
|
+
width: 7px;
|
|
2942
|
+
height: 7px;
|
|
2943
|
+
border-radius: 50%;
|
|
2944
|
+
background: var(--accent);
|
|
2945
|
+
opacity: .65;
|
|
2946
|
+
}
|
|
2947
|
+
.ctx-editor {
|
|
2948
|
+
min-height: 132px;
|
|
2949
|
+
font-family: inherit;
|
|
2950
|
+
font-size: 13px;
|
|
2951
|
+
}
|
|
2952
|
+
.ctx-rule-editor { display: flex; flex-direction: column; gap: 8px; }
|
|
2953
|
+
.ctx-rule-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
|
|
2954
|
+
.ctx-rule-input {
|
|
2955
|
+
min-width: 0;
|
|
2956
|
+
width: 100%;
|
|
2957
|
+
box-sizing: border-box;
|
|
2958
|
+
padding: 9px 10px;
|
|
2959
|
+
border: 1px solid var(--line);
|
|
2960
|
+
border-radius: 8px;
|
|
2961
|
+
background: var(--surface);
|
|
2962
|
+
color: var(--text);
|
|
2963
|
+
font: inherit;
|
|
2964
|
+
font-size: 13px;
|
|
2965
|
+
}
|
|
2966
|
+
.ctx-rule-input:focus { outline: none; border-color: var(--accent); }
|
|
2967
|
+
.ctx-rule-remove,
|
|
2968
|
+
.ctx-add-rule {
|
|
2969
|
+
border: 1px solid var(--line);
|
|
2970
|
+
border-radius: 8px;
|
|
2971
|
+
background: var(--bg);
|
|
2972
|
+
color: var(--muted);
|
|
2973
|
+
font-size: 12px;
|
|
2974
|
+
font-weight: 600;
|
|
2975
|
+
padding: 7px 10px;
|
|
2976
|
+
cursor: pointer;
|
|
2977
|
+
}
|
|
2978
|
+
.ctx-add-rule { margin-top: 8px; color: var(--accent); }
|
|
2979
|
+
.ctx-rule-remove:hover,
|
|
2980
|
+
.ctx-add-rule:hover {
|
|
2981
|
+
background: var(--accent-soft);
|
|
2982
|
+
color: var(--accent);
|
|
2983
|
+
border-color: rgba(0,113,227,.25);
|
|
2984
|
+
}
|
|
2985
|
+
|
|
2986
|
+
/* Learnings head row */
|
|
2987
|
+
.learn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 24px; }
|
|
2988
|
+
.learn-head-note { font-size: 12px; color: var(--muted); }
|
|
2989
|
+
.learn-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
|
|
2990
|
+
.lh-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
|
|
2991
|
+
.lh-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
2992
|
+
.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; }
|
|
2993
|
+
.lh-run:hover { background: var(--accent-soft); border-color: var(--accent); }
|
|
2994
|
+
|
|
2995
|
+
/* Empty state */
|
|
2996
|
+
.learn-empty { text-align: center; padding: 40px 24px; }
|
|
2997
|
+
.le-emoji { font-size: 32px; margin-bottom: 10px; }
|
|
2998
|
+
.le-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
|
|
2999
|
+
.le-sub { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 360px; margin: 0 auto; }
|
|
3000
|
+
/* #521: real on-disk preserved-learning tally shown under the empty state. */
|
|
3001
|
+
.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; }
|
|
3002
|
+
|
|
3003
|
+
/* Learn card */
|
|
3004
|
+
.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; }
|
|
3005
|
+
.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; }
|
|
3006
|
+
.scope-org { background: var(--accent-soft); color: var(--accent); }
|
|
3007
|
+
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
|
|
3008
|
+
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
|
|
3009
|
+
.lc-body { flex: 1; min-width: 0; }
|
|
3010
|
+
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
3011
|
+
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
3012
|
+
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
3013
|
+
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
|
|
3014
|
+
.bless-yes { background: var(--done); color: #fff; }
|
|
3015
|
+
.bless-no { background: var(--bg); color: var(--muted); }
|
|
3016
|
+
|
|
3017
|
+
/* Pending banner */
|
|
3018
|
+
.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; }
|
|
3019
|
+
.pending-banner .pb-body { flex: 1; }
|
|
3020
|
+
.pb-title { font-size: 13px; font-weight: 700; }
|
|
3021
|
+
.pb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
3022
|
+
.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; }
|
|
3023
|
+
|
|
3024
|
+
/* Reverse mentoring */
|
|
3025
|
+
.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; }
|
|
3026
|
+
.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; }
|
|
3027
|
+
.rm-body { flex: 1; }
|
|
3028
|
+
.rm-text { font-size: 13px; color: var(--text); line-height: 1.55; }
|
|
3029
|
+
.rm-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
|
|
3030
|
+
.rm-actions { display: flex; gap: 6px; flex-shrink: 0; }
|
|
3031
|
+
.rm-got-it { padding: 5px 12px; background: var(--done); color: #fff; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
|
|
3032
|
+
.rm-dismiss { padding: 5px 10px; background: var(--bg); color: var(--muted); border: none; border-radius: 12px; font-size: 11px; cursor: pointer; }
|
|
3033
|
+
.rm-empty { text-align: center; padding: 28px 16px; color: var(--muted); font-size: 13px; }
|
|
3034
|
+
.rm-footer { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }
|
|
3035
|
+
|
|
3036
|
+
/* Get-started rail: proper pill steps */
|
|
3037
|
+
.gs-step { background: none; border: none; }
|
|
3038
|
+
.gs-step.done { color: var(--done); font-weight: 500; cursor: default; }
|
|
3039
|
+
.gs-step.done::before { content: '✓ '; }
|
|
3040
|
+
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; padding: 3px 12px; border-radius: 12px; }
|
|
3041
|
+
|
|
3042
|
+
/* Hub top nav: proper layout */
|
|
3043
|
+
.hub-tabs { height: 44px; }
|
|
3044
|
+
.hub-tab { height: 44px; }
|
|
3045
|
+
|
|
3046
|
+
/* Tree legend */
|
|
3047
|
+
.tree-legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
|
|
3048
|
+
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
|
|
3049
|
+
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
|
|
3050
|
+
.dot-red { background: var(--state-waiting) !important; }
|
|
3051
|
+
.dot-amber { background: var(--state-working) !important; }
|
|
3052
|
+
.dot-green { background: var(--state-complete) !important; }
|
|
3053
|
+
.dot-grey { background: var(--line) !important; }
|
|
3054
|
+
|
|
3055
|
+
/* Project overview: section header */
|
|
3056
|
+
.overview-head { padding: 20px 20px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
3057
|
+
|
|
3058
|
+
/* Proj card team avatars row */
|
|
3059
|
+
.proj-team .av { width: 24px; height: 24px; font-size: 9px; position: relative; }
|
|
3060
|
+
.proj-team .av .pip { position: absolute; bottom: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--surface); }
|
|
3061
|
+
|
|
3062
|
+
/* Workspace: make the tree legend not look like a wall of text */
|
|
3063
|
+
.tree-legend { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
|
|
3064
|
+
|
|
3065
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
3066
|
+
#512 Comprehensive UI Polish — All missing CSS classes from audit
|
|
3067
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
3068
|
+
|
|
3069
|
+
/* ── D01-D11: New-project modal (np-overlay, np-wrap, np-step, np-card, etc.) ── */
|
|
3070
|
+
.np-overlay {
|
|
3071
|
+
display: none;
|
|
3072
|
+
position: fixed;
|
|
3073
|
+
inset: 0;
|
|
3074
|
+
background: rgba(20,20,30,.45);
|
|
3075
|
+
z-index: 60;
|
|
3076
|
+
overflow-y: auto;
|
|
3077
|
+
}
|
|
3078
|
+
.np-overlay:not([hidden]) { display: block; }
|
|
3079
|
+
/* JS removes hidden attribute to show: also handle that */
|
|
3080
|
+
#np-modal:not([hidden]) { display: block; }
|
|
3081
|
+
|
|
3082
|
+
.np-wrap {
|
|
3083
|
+
max-width: 560px;
|
|
3084
|
+
margin: 40px auto;
|
|
3085
|
+
padding: 0 24px 60px;
|
|
3086
|
+
}
|
|
3087
|
+
|
|
3088
|
+
.np-step { display: none; }
|
|
3089
|
+
.np-step.on { display: block; }
|
|
3090
|
+
|
|
3091
|
+
.np-close {
|
|
3092
|
+
position: fixed;
|
|
3093
|
+
top: 16px;
|
|
3094
|
+
right: 20px;
|
|
3095
|
+
width: 34px;
|
|
3096
|
+
height: 34px;
|
|
3097
|
+
border-radius: 50%;
|
|
3098
|
+
background: var(--surface);
|
|
3099
|
+
box-shadow: var(--shadow-lg);
|
|
3100
|
+
font-size: 18px;
|
|
3101
|
+
color: var(--muted);
|
|
3102
|
+
z-index: 61;
|
|
3103
|
+
border: none;
|
|
3104
|
+
cursor: pointer;
|
|
3105
|
+
line-height: 1;
|
|
3106
|
+
display: flex;
|
|
3107
|
+
align-items: center;
|
|
3108
|
+
justify-content: center;
|
|
3109
|
+
}
|
|
3110
|
+
.np-close:hover { color: var(--text); }
|
|
3111
|
+
|
|
3112
|
+
.np-step-dots {
|
|
3113
|
+
display: flex;
|
|
3114
|
+
gap: 6px;
|
|
3115
|
+
justify-content: center;
|
|
3116
|
+
margin-bottom: 24px;
|
|
3117
|
+
}
|
|
3118
|
+
.np-dot {
|
|
3119
|
+
width: 6px;
|
|
3120
|
+
height: 6px;
|
|
3121
|
+
border-radius: 50%;
|
|
3122
|
+
background: var(--line);
|
|
3123
|
+
}
|
|
3124
|
+
.np-dot.on { background: var(--text); }
|
|
3125
|
+
|
|
3126
|
+
.np-card {
|
|
3127
|
+
background: var(--surface);
|
|
3128
|
+
border-radius: 16px;
|
|
3129
|
+
box-shadow: var(--shadow-lg);
|
|
3130
|
+
overflow: hidden;
|
|
3131
|
+
}
|
|
3132
|
+
|
|
3133
|
+
.np-hdr {
|
|
3134
|
+
padding: 22px 24px 16px;
|
|
3135
|
+
border-bottom: 1px solid var(--line);
|
|
3136
|
+
}
|
|
3137
|
+
.np-hdr .step-label {
|
|
3138
|
+
font-size: 11px;
|
|
3139
|
+
font-weight: 700;
|
|
3140
|
+
text-transform: uppercase;
|
|
3141
|
+
letter-spacing: .06em;
|
|
3142
|
+
color: var(--muted);
|
|
3143
|
+
margin-bottom: 6px;
|
|
3144
|
+
}
|
|
3145
|
+
.np-hdr h2 {
|
|
3146
|
+
font-size: 20px;
|
|
3147
|
+
font-weight: 700;
|
|
3148
|
+
margin: 0 0 4px;
|
|
3149
|
+
}
|
|
3150
|
+
.np-hdr p {
|
|
3151
|
+
font-size: 13px;
|
|
3152
|
+
color: var(--muted);
|
|
3153
|
+
margin: 0;
|
|
3154
|
+
line-height: 1.5;
|
|
3155
|
+
}
|
|
3156
|
+
|
|
3157
|
+
.np-body {
|
|
3158
|
+
padding: 20px 24px;
|
|
3159
|
+
display: flex;
|
|
3160
|
+
flex-direction: column;
|
|
3161
|
+
gap: 16px;
|
|
3162
|
+
}
|
|
3163
|
+
|
|
3164
|
+
.np-footer {
|
|
3165
|
+
padding: 16px 24px;
|
|
3166
|
+
border-top: 1px solid var(--line);
|
|
3167
|
+
display: flex;
|
|
3168
|
+
align-items: center;
|
|
3169
|
+
justify-content: space-between;
|
|
3170
|
+
}
|
|
3171
|
+
|
|
3172
|
+
.np-next {
|
|
3173
|
+
padding: 9px 22px;
|
|
3174
|
+
background: var(--text);
|
|
3175
|
+
color: #fff;
|
|
3176
|
+
border: none;
|
|
3177
|
+
border-radius: 20px;
|
|
3178
|
+
font-size: 14px;
|
|
3179
|
+
font-weight: 600;
|
|
3180
|
+
cursor: pointer;
|
|
3181
|
+
}
|
|
3182
|
+
.np-next:hover { opacity: .88; }
|
|
3183
|
+
|
|
3184
|
+
.np-back {
|
|
3185
|
+
font-size: 13px;
|
|
3186
|
+
color: var(--muted);
|
|
3187
|
+
background: none;
|
|
3188
|
+
border: none;
|
|
3189
|
+
cursor: pointer;
|
|
3190
|
+
}
|
|
3191
|
+
.np-back:hover { color: var(--text); }
|
|
3192
|
+
|
|
3193
|
+
/* ── D11: Source attachment row (step 2) ── */
|
|
3194
|
+
.np-source {
|
|
3195
|
+
display: flex;
|
|
3196
|
+
align-items: center;
|
|
3197
|
+
gap: 8px;
|
|
3198
|
+
padding: 10px 14px;
|
|
3199
|
+
background: var(--bg);
|
|
3200
|
+
border-radius: 10px;
|
|
3201
|
+
border: 1px solid var(--line);
|
|
3202
|
+
}
|
|
3203
|
+
.np-source input {
|
|
3204
|
+
flex: 1;
|
|
3205
|
+
border: none;
|
|
3206
|
+
background: none;
|
|
3207
|
+
font: inherit;
|
|
3208
|
+
font-size: 13px;
|
|
3209
|
+
color: var(--text);
|
|
3210
|
+
outline: none;
|
|
3211
|
+
}
|
|
3212
|
+
.np-source input::placeholder { color: var(--muted); }
|
|
3213
|
+
.np-source-btn {
|
|
3214
|
+
font-size: 13px;
|
|
3215
|
+
color: var(--accent);
|
|
3216
|
+
font-weight: 500;
|
|
3217
|
+
background: none;
|
|
3218
|
+
border: none;
|
|
3219
|
+
cursor: pointer;
|
|
3220
|
+
white-space: nowrap;
|
|
3221
|
+
flex-shrink: 0;
|
|
3222
|
+
}
|
|
3223
|
+
.np-note {
|
|
3224
|
+
font-size: 12px;
|
|
3225
|
+
color: var(--muted);
|
|
3226
|
+
line-height: 1.5;
|
|
3227
|
+
}
|
|
3228
|
+
.np-optional {
|
|
3229
|
+
color: var(--muted);
|
|
3230
|
+
font-weight: 400;
|
|
3231
|
+
}
|
|
3232
|
+
.np-link { color: var(--accent); }
|
|
3233
|
+
|
|
3234
|
+
/* ── D12: Shared .modal-overlay backdrop (assign-job, add-emp, pricing) ── */
|
|
3235
|
+
.modal-overlay {
|
|
3236
|
+
display: none;
|
|
3237
|
+
position: fixed;
|
|
3238
|
+
inset: 0;
|
|
3239
|
+
background: rgba(20,20,30,.45);
|
|
3240
|
+
z-index: 70;
|
|
3241
|
+
overflow-y: auto;
|
|
3242
|
+
}
|
|
3243
|
+
.modal-overlay:not([hidden]) { display: block; }
|
|
3244
|
+
/* Also handle JS hidden attribute removal */
|
|
3245
|
+
#assign-job-modal:not([hidden]),
|
|
3246
|
+
#add-emp-modal:not([hidden]),
|
|
3247
|
+
#pricing-modal:not([hidden]) { display: block; }
|
|
3248
|
+
|
|
3249
|
+
/* ── D36: Pricing modal internal structure ── */
|
|
3250
|
+
.pricing-overlay { z-index: 71; }
|
|
3251
|
+
.pricing-body {
|
|
3252
|
+
padding: 0 28px 24px;
|
|
3253
|
+
display: flex;
|
|
3254
|
+
flex-direction: column;
|
|
3255
|
+
align-items: center;
|
|
3256
|
+
gap: 10px;
|
|
3257
|
+
text-align: center;
|
|
3258
|
+
}
|
|
3259
|
+
.pricing-body h2 { font-size: 20px; font-weight: 700; margin: 0; }
|
|
3260
|
+
.pricing-body p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
|
|
3261
|
+
.pr-av {
|
|
3262
|
+
width: 60px;
|
|
3263
|
+
height: 60px;
|
|
3264
|
+
border-radius: 50%;
|
|
3265
|
+
display: flex;
|
|
3266
|
+
align-items: center;
|
|
3267
|
+
justify-content: center;
|
|
3268
|
+
font-size: 18px;
|
|
3269
|
+
font-weight: 700;
|
|
3270
|
+
color: #fff;
|
|
3271
|
+
margin: 0 auto 4px;
|
|
3272
|
+
flex-shrink: 0;
|
|
3273
|
+
}
|
|
3274
|
+
.pr-price {
|
|
3275
|
+
font-size: 32px;
|
|
3276
|
+
font-weight: 700;
|
|
3277
|
+
color: var(--text);
|
|
3278
|
+
}
|
|
3279
|
+
.pr-price span {
|
|
3280
|
+
font-size: 16px;
|
|
3281
|
+
font-weight: 400;
|
|
3282
|
+
color: var(--muted);
|
|
3283
|
+
}
|
|
3284
|
+
.pr-cta {
|
|
3285
|
+
width: 100%;
|
|
3286
|
+
padding: 12px;
|
|
3287
|
+
background: var(--accent);
|
|
3288
|
+
color: #fff;
|
|
3289
|
+
border: none;
|
|
3290
|
+
border-radius: 11px;
|
|
3291
|
+
font-size: 14px;
|
|
3292
|
+
font-weight: 700;
|
|
3293
|
+
cursor: pointer;
|
|
3294
|
+
text-align: center;
|
|
3295
|
+
text-decoration: none;
|
|
3296
|
+
display: block;
|
|
3297
|
+
margin-top: 16px;
|
|
3298
|
+
}
|
|
3299
|
+
.pr-cta:hover { opacity: .88; }
|
|
3300
|
+
.pr-foot {
|
|
3301
|
+
font-size: 12px;
|
|
3302
|
+
color: var(--muted);
|
|
3303
|
+
text-align: center;
|
|
3304
|
+
margin-top: 2px;
|
|
3305
|
+
}
|
|
3306
|
+
|
|
3307
|
+
/* ── D37: Area foot note, project learnings panel, pl-back, stat-grid ── */
|
|
3308
|
+
.area-foot-note {
|
|
3309
|
+
font-size: 12px;
|
|
3310
|
+
color: var(--muted);
|
|
3311
|
+
margin-top: 16px;
|
|
3312
|
+
line-height: 1.5;
|
|
3313
|
+
font-style: italic;
|
|
3314
|
+
}
|
|
3315
|
+
.proj-learnings-panel {
|
|
3316
|
+
flex: 1;
|
|
3317
|
+
overflow-y: auto;
|
|
3318
|
+
background: var(--bg);
|
|
3319
|
+
}
|
|
3320
|
+
.pl-back {
|
|
3321
|
+
font-size: 13px;
|
|
3322
|
+
color: var(--accent);
|
|
3323
|
+
background: none;
|
|
3324
|
+
border: none;
|
|
3325
|
+
cursor: pointer;
|
|
3326
|
+
padding: 0;
|
|
3327
|
+
margin-bottom: 8px;
|
|
3328
|
+
font-weight: 500;
|
|
3329
|
+
}
|
|
3330
|
+
.pl-back:hover { opacity: .8; }
|
|
3331
|
+
.stat-grid {
|
|
3332
|
+
display: grid;
|
|
3333
|
+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
3334
|
+
gap: 12px;
|
|
3335
|
+
margin-top: 10px;
|
|
3336
|
+
}
|
|
3337
|
+
.stat-card {
|
|
3338
|
+
background: var(--surface);
|
|
3339
|
+
border-radius: 14px;
|
|
3340
|
+
box-shadow: var(--shadow);
|
|
3341
|
+
padding: 16px 18px;
|
|
3342
|
+
}
|
|
3343
|
+
.stat-num { font-size: 26px; font-weight: 700; }
|
|
3344
|
+
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
|
|
3345
|
+
|
|
3346
|
+
/* ── D18: Profile card — better shadow to match mock ── */
|
|
3347
|
+
.card.area-profile {
|
|
3348
|
+
box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
|
|
3349
|
+
border: none;
|
|
3350
|
+
}
|
|
3351
|
+
|
|
3352
|
+
/* ── D19: Hide lh-run button from default learnings head — only show when pending ── */
|
|
3353
|
+
/* The JS always renders it; suppress via CSS for default display */
|
|
3354
|
+
/* NOTE: We keep it functional; just reduce its visual weight (D19 P2) */
|
|
3355
|
+
.lh-run {
|
|
3356
|
+
padding: 5px 12px;
|
|
3357
|
+
background: var(--bg);
|
|
3358
|
+
color: var(--accent);
|
|
3359
|
+
border: 1px solid rgba(0,113,227,.2);
|
|
3360
|
+
border-radius: 14px;
|
|
3361
|
+
font-size: 11px;
|
|
3362
|
+
font-weight: 600;
|
|
3363
|
+
cursor: pointer;
|
|
3364
|
+
white-space: nowrap;
|
|
3365
|
+
flex-shrink: 0;
|
|
3366
|
+
}
|
|
3367
|
+
.lh-run:hover { background: var(--accent-soft); }
|
|
3368
|
+
|
|
3369
|
+
/* ── D22: proj-grid padding-top match mock spec ── */
|
|
3370
|
+
.proj-grid { padding-top: 28px !important; }
|
|
3371
|
+
|
|
3372
|
+
/* ── D24: tree-action font-weight fix ── */
|
|
3373
|
+
.tree-action { font-weight: 500; }
|
|
3374
|
+
|
|
3375
|
+
/* ── D29/D30: Account menu am-item inner div stacking ── */
|
|
3376
|
+
.am-item > div {
|
|
3377
|
+
display: flex;
|
|
3378
|
+
flex-direction: column;
|
|
3379
|
+
}
|
|
3380
|
+
.am-label { display: block; font-size: 13px; font-weight: 600; }
|
|
3381
|
+
.am-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
|
|
3382
|
+
|
|
3383
|
+
/* ── D32: am-div separator — use background-color band not hairline ── */
|
|
3384
|
+
.am-div { height: 6px; background: var(--bg); margin: 2px 0; border: none; }
|
|
3385
|
+
|
|
3386
|
+
/* ── D38: jr-av placeholder for locked rows ── */
|
|
3387
|
+
.job-row.locked .jr-av {
|
|
3388
|
+
background: #cfcfd6;
|
|
3389
|
+
}
|
|
3390
|
+
|
|
3391
|
+
/* ── D39: reduce bottom padding to prevent unnecessary scrollbar ── */
|
|
3392
|
+
.hub-area-page { padding-bottom: 32px; }
|
|
3393
|
+
|
|
3394
|
+
/* ── nav-right alignment ── */
|
|
3395
|
+
.nav-right {
|
|
3396
|
+
margin-left: auto;
|
|
3397
|
+
position: relative;
|
|
3398
|
+
display: flex;
|
|
3399
|
+
align-items: center;
|
|
3400
|
+
padding-right: 8px;
|
|
3401
|
+
}
|
|
3402
|
+
|
|
3403
|
+
/* ── Account menu position fix (was 44px, now relative to .nav-right) ── */
|
|
3404
|
+
.account-menu {
|
|
3405
|
+
top: calc(100% + 6px);
|
|
3406
|
+
right: 0;
|
|
3407
|
+
}
|
|
3408
|
+
|
|
3409
|
+
/* ── Ensure modal-card has correct max-width for pricing card ── */
|
|
3410
|
+
.pricing-card {
|
|
3411
|
+
max-width: 380px;
|
|
3412
|
+
text-align: center;
|
|
3413
|
+
padding: 24px 0 0;
|
|
3414
|
+
}
|
|
3415
|
+
|
|
3416
|
+
/* pr-av fallback background when persona color not set by JS */
|
|
3417
|
+
.pr-av { background: var(--muted); }
|
|
3418
|
+
|
|
3419
|
+
/* ═══════════════════════════════════════════════════════════════════════════
|
|
3420
|
+
#512 FINAL POLISH — all remaining missing classes + CSS variable gaps
|
|
3421
|
+
═══════════════════════════════════════════════════════════════════════════ */
|
|
3422
|
+
|
|
3423
|
+
/* ── CSS variables required by JS inline styles (dot colors) ── */
|
|
3424
|
+
:root {
|
|
3425
|
+
--red: #ff3b30;
|
|
3426
|
+
--amber: #ff9500;
|
|
3427
|
+
--green: #34c759;
|
|
3428
|
+
--grey: #c7c7cc;
|
|
3429
|
+
}
|
|
3430
|
+
@media (prefers-color-scheme: dark) {
|
|
3431
|
+
:root {
|
|
3432
|
+
--red: #ff453a;
|
|
3433
|
+
--amber: #ff9f0a;
|
|
3434
|
+
--green: #30d158;
|
|
3435
|
+
--grey: #636366;
|
|
3436
|
+
}
|
|
3437
|
+
}
|
|
3438
|
+
|
|
3439
|
+
/* ── .av — standalone team avatar chip (proj-team context, set by JS) ── */
|
|
3440
|
+
.av {
|
|
3441
|
+
width: 24px;
|
|
3442
|
+
height: 24px;
|
|
3443
|
+
border-radius: 50%;
|
|
3444
|
+
display: flex;
|
|
3445
|
+
align-items: center;
|
|
3446
|
+
justify-content: center;
|
|
3447
|
+
font-size: 9px;
|
|
3448
|
+
font-weight: 700;
|
|
3449
|
+
color: #fff;
|
|
3450
|
+
position: relative;
|
|
3451
|
+
flex-shrink: 0;
|
|
3452
|
+
}
|
|
3453
|
+
|
|
3454
|
+
/* ── Reverse mentoring card classes ── */
|
|
3455
|
+
.rev-item {
|
|
3456
|
+
background: var(--surface);
|
|
3457
|
+
border: 1px solid var(--line);
|
|
3458
|
+
border-radius: 12px;
|
|
3459
|
+
padding: 14px 16px;
|
|
3460
|
+
display: flex;
|
|
3461
|
+
flex-direction: column;
|
|
3462
|
+
gap: 8px;
|
|
3463
|
+
margin-bottom: 8px;
|
|
3464
|
+
}
|
|
3465
|
+
.rev-from {
|
|
3466
|
+
display: flex;
|
|
3467
|
+
align-items: center;
|
|
3468
|
+
gap: 8px;
|
|
3469
|
+
font-size: 12px;
|
|
3470
|
+
font-weight: 600;
|
|
3471
|
+
color: var(--text);
|
|
3472
|
+
}
|
|
3473
|
+
.rev-av {
|
|
3474
|
+
width: 26px;
|
|
3475
|
+
height: 26px;
|
|
3476
|
+
border-radius: 50%;
|
|
3477
|
+
background: var(--accent);
|
|
3478
|
+
color: #fff;
|
|
3479
|
+
display: flex;
|
|
3480
|
+
align-items: center;
|
|
3481
|
+
justify-content: center;
|
|
3482
|
+
font-size: 9px;
|
|
3483
|
+
font-weight: 700;
|
|
3484
|
+
flex-shrink: 0;
|
|
3485
|
+
}
|
|
3486
|
+
.rev-msg {
|
|
3487
|
+
font-size: 13px;
|
|
3488
|
+
color: var(--text);
|
|
3489
|
+
line-height: 1.55;
|
|
3490
|
+
font-style: italic;
|
|
3491
|
+
}
|
|
3492
|
+
.rev-actions {
|
|
3493
|
+
display: flex;
|
|
3494
|
+
gap: 6px;
|
|
3495
|
+
}
|
|
3496
|
+
.rev-gotit {
|
|
3497
|
+
padding: 5px 13px;
|
|
3498
|
+
background: var(--done);
|
|
3499
|
+
color: #fff;
|
|
3500
|
+
border: none;
|
|
3501
|
+
border-radius: 12px;
|
|
3502
|
+
font-size: 11px;
|
|
3503
|
+
font-weight: 600;
|
|
3504
|
+
cursor: pointer;
|
|
3505
|
+
}
|
|
3506
|
+
.rev-dismiss {
|
|
3507
|
+
padding: 5px 10px;
|
|
3508
|
+
background: var(--bg);
|
|
3509
|
+
color: var(--muted);
|
|
3510
|
+
border: none;
|
|
3511
|
+
border-radius: 12px;
|
|
3512
|
+
font-size: 11px;
|
|
3513
|
+
cursor: pointer;
|
|
3514
|
+
}
|
|
3515
|
+
|
|
3516
|
+
/* ── New-project step-4 summary rows (actual class names from JS) ── */
|
|
3517
|
+
.np-summary-row {
|
|
3518
|
+
display: flex;
|
|
3519
|
+
gap: 12px;
|
|
3520
|
+
padding: 10px 0;
|
|
3521
|
+
border-bottom: 1px solid var(--line);
|
|
3522
|
+
}
|
|
3523
|
+
.np-summary-row:last-of-type { border-bottom: none; }
|
|
3524
|
+
.np-summary-label {
|
|
3525
|
+
font-size: 12px;
|
|
3526
|
+
font-weight: 600;
|
|
3527
|
+
color: var(--muted);
|
|
3528
|
+
width: 80px;
|
|
3529
|
+
flex-shrink: 0;
|
|
3530
|
+
padding-top: 1px;
|
|
3531
|
+
}
|
|
3532
|
+
.np-summary-val {
|
|
3533
|
+
font-size: 13px;
|
|
3534
|
+
color: var(--text);
|
|
3535
|
+
flex: 1;
|
|
3536
|
+
line-height: 1.5;
|
|
3537
|
+
}
|
|
3538
|
+
|
|
3539
|
+
/* ── New-project start button + note (step 4) ── */
|
|
3540
|
+
.np-start-btn {
|
|
3541
|
+
width: 100%;
|
|
3542
|
+
padding: 13px;
|
|
3543
|
+
background: var(--accent);
|
|
3544
|
+
color: #fff;
|
|
3545
|
+
border: none;
|
|
3546
|
+
border-radius: 12px;
|
|
3547
|
+
font-size: 15px;
|
|
3548
|
+
font-weight: 700;
|
|
3549
|
+
cursor: pointer;
|
|
3550
|
+
margin-top: 8px;
|
|
3551
|
+
}
|
|
3552
|
+
.np-start-btn:hover { opacity: .88; }
|
|
3553
|
+
.np-start-note {
|
|
3554
|
+
font-size: 12px;
|
|
3555
|
+
color: var(--muted);
|
|
3556
|
+
text-align: center;
|
|
3557
|
+
margin-top: 8px;
|
|
3558
|
+
line-height: 1.5;
|
|
3559
|
+
}
|
|
3560
|
+
|
|
3561
|
+
/* ── cat-label — section label in assign-job / add-emp modal ── */
|
|
3562
|
+
.cat-label {
|
|
3563
|
+
font-size: 10px;
|
|
3564
|
+
font-weight: 700;
|
|
3565
|
+
text-transform: uppercase;
|
|
3566
|
+
letter-spacing: .04em;
|
|
3567
|
+
color: var(--muted);
|
|
3568
|
+
margin: 12px 0 4px;
|
|
3569
|
+
}
|
|
3570
|
+
|
|
3571
|
+
/* ── locked-tile — greyed-out not-hired emp tile ── */
|
|
3572
|
+
.emp-tile.locked-tile {
|
|
3573
|
+
opacity: .55;
|
|
3574
|
+
cursor: not-allowed;
|
|
3575
|
+
}
|
|
3576
|
+
.emp-tile.locked-tile:hover {
|
|
3577
|
+
border-color: var(--line);
|
|
3578
|
+
background: var(--bg);
|
|
3579
|
+
}
|
|
3580
|
+
|
|
3581
|
+
/* ── et-lock — 🔒 icon inside locked emp tile ── */
|
|
3582
|
+
.et-lock {
|
|
3583
|
+
font-size: 11px;
|
|
3584
|
+
color: var(--muted);
|
|
3585
|
+
}
|
|
3586
|
+
|
|
3587
|
+
/* #521 R9: hire-missing prompt in the new-project team step */
|
|
3588
|
+
.np-hire-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
|
|
3589
|
+
.emp-tile.locked-tile.hireable { opacity: 1; cursor: pointer; border-style: dashed; }
|
|
3590
|
+
.emp-tile.locked-tile.hireable:hover { border-color: var(--accent); background: var(--accent-soft); }
|
|
3591
|
+
.emp-tile.locked-tile.hireable .et-av { opacity: .7; }
|
|
3592
|
+
.et-hire { font-size: 11px; font-weight: 700; color: var(--accent); }
|
|
3593
|
+
|
|
3594
|
+
/* ── gs-step pill shape refinements ── */
|
|
3595
|
+
.gs-step { font-size: 12px; }
|
|
3596
|
+
.gs-step.current { padding: 4px 12px; border-radius: 12px; }
|
|
3597
|
+
|
|
3598
|
+
/* ── hub-tabs height consistency + avatar-btn right-alignment ── */
|
|
3599
|
+
.hub-tabs { height: 44px; }
|
|
3600
|
+
.hub-tab { height: 44px; }
|
|
3601
|
+
.nav-right { height: 44px; display: flex; align-items: center; }
|
|
3602
|
+
.avatar-btn { margin-left: 8px; }
|
|
3603
|
+
|
|
3604
|
+
/* ── New-project: folder picker row ── */
|
|
3605
|
+
.np-folder-row { display:flex; gap:8px; }
|
|
3606
|
+
.np-folder-row input { flex:1; }
|
|
3607
|
+
.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; }
|
|
3608
|
+
.np-browse-btn:hover { opacity:.85; }
|
|
3609
|
+
.np-field-hint { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }
|
|
3610
|
+
|
|
3611
|
+
/* ── #512 R7: docx re-upload panel ── */
|
|
3612
|
+
.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; }
|
|
3613
|
+
.rdu-label { font-size:12px; color:var(--muted); line-height:1.5; }
|
|
3614
|
+
.rdu-file-label { display:flex; align-items:center; gap:10px; cursor:pointer; }
|
|
3615
|
+
.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; }
|
|
3616
|
+
.rdu-filename { font-size:12px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
|
3617
|
+
.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; }
|
|
3618
|
+
.rdu-extract-btn:disabled { opacity:.5; cursor:default; }
|
|
3619
|
+
|
|
3620
|
+
/* ── #512 R7: 'Done reviewing' button (replaces upload panel) ── */
|
|
3621
|
+
.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; }
|
|
3622
|
+
.rdr-label { font-size:12px; color:var(--muted); line-height:1.5; }
|
|
3623
|
+
.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; }
|
|
3624
|
+
.rdr-done-btn:disabled { opacity:.55; cursor:default; }
|
|
3625
|
+
|
|
3626
|
+
/* ── Issue #538: Hire a human manager ─────────────────────────────────── */
|
|
3627
|
+
.hm-roster-action {
|
|
3628
|
+
display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
|
|
3629
|
+
font-size: 12px; font-weight: 600; color: var(--accent);
|
|
3630
|
+
background: none; border: none; cursor: pointer; padding: 0; text-align: left;
|
|
3631
|
+
}
|
|
3632
|
+
.hm-roster-action:hover { text-decoration: underline; }
|
|
3633
|
+
.hm-section-cta {
|
|
3634
|
+
display: flex; align-items: center; gap: 14px;
|
|
3635
|
+
padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
|
|
3636
|
+
}
|
|
3637
|
+
.hm-section-cta .hm-ic { font-size: 24px; }
|
|
3638
|
+
.hm-section-cta .hm-copy { flex: 1; }
|
|
3639
|
+
.hm-section-cta .hm-copy strong { display: block; font-size: 14px; color: var(--text); }
|
|
3640
|
+
.hm-section-cta .hm-copy small { font-size: 12px; color: var(--muted); }
|
|
3641
|
+
.hm-fieldrow { display: flex; gap: 10px; }
|
|
3642
|
+
.hm-fieldrow .hm-field { flex: 1; }
|
|
3643
|
+
.hm-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
|
|
3644
|
+
.hm-field select, .hm-field input {
|
|
3645
|
+
width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
|
|
3646
|
+
font: inherit; font-size: 13px; background: var(--bg); color: var(--text);
|
|
3647
|
+
}
|
|
3648
|
+
.hm-field select:focus, .hm-field input:focus { outline: 2px solid var(--accent); border-color: transparent; }
|
|
3649
|
+
.hm-query { display: flex; align-items: flex-start; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
|
|
3650
|
+
.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; }
|
|
3651
|
+
.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; }
|
|
3652
|
+
.hm-copy-btn:hover { border-color: var(--accent); }
|
|
3653
|
+
.hm-qualities { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
|
|
3654
|
+
.hm-quality { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); }
|
|
3655
|
+
.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; }
|
|
3656
|
+
.hm-quality small { display: block; color: var(--muted); font-size: 12px; }
|
|
3657
|
+
.hm-jd > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 7px; }
|
|
3658
|
+
.hm-jd > summary::-webkit-details-marker { display: none; }
|
|
3659
|
+
.hm-jd[open] > summary .hm-chev { transform: rotate(90deg); }
|
|
3660
|
+
.hm-jd .hm-chev { font-size: 10px; transition: transform .15s; }
|
|
3661
|
+
.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; }
|
|
3662
|
+
.hm-providers-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
|
|
3663
|
+
.hm-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
|
|
3664
|
+
.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; }
|
|
3665
|
+
.hm-provider:hover { border-color: var(--accent); background: var(--accent-soft); }
|
|
3666
|
+
.hm-provider .hm-logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; }
|
|
3667
|
+
.hm-provider strong { font-size: 13px; }
|
|
3668
|
+
.hm-provider small { font-size: 11px; color: var(--muted); }
|
|
3669
|
+
.hm-logo.linkedin { background: #0a66c2; }
|
|
3670
|
+
.hm-logo.indeed { background: #2557a7; }
|
|
3671
|
+
.hm-logo.seekout { background: #6b3df0; }
|
|
3672
|
+
.hm-foot { font-size: 11px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }
|
|
3673
|
+
@media (max-width: 520px) {
|
|
3674
|
+
.hm-fieldrow { flex-direction: column; }
|
|
3675
|
+
.hm-fieldrow .hm-field { max-width: none !important; }
|
|
3676
|
+
}
|
|
3677
|
+
/* ── #539: Command Palette Overlay ── */
|
|
3678
|
+
.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; }
|
|
3679
|
+
.cp-backdrop[hidden] { display:none; }
|
|
3680
|
+
.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); }
|
|
3681
|
+
.cp-search-row { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
|
|
3682
|
+
.cp-search-icon { font-size:18px; color:var(--muted); flex-shrink:0; }
|
|
3683
|
+
#cp-search { flex:1; border:none; background:transparent; font-size:15px; color:var(--text); outline:none; }
|
|
3684
|
+
#cp-search::placeholder { color:var(--muted); }
|
|
3685
|
+
.cp-results-scroll { flex:1; overflow-y:auto; min-height:0; }
|
|
3686
|
+
.cp-section { padding:6px 0; }
|
|
3687
|
+
.cp-section-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); padding:4px 16px 2px; text-transform:uppercase; }
|
|
3688
|
+
.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; }
|
|
3689
|
+
.cp-row:hover, .cp-row--highlighted { background:var(--accent-soft,rgba(0,113,227,.08)); }
|
|
3690
|
+
.cp-row-icon { font-size:15px; flex-shrink:0; }
|
|
3691
|
+
.cp-row-body { flex:1; min-width:0; }
|
|
3692
|
+
.cp-row-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3693
|
+
.cp-row-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
|
|
3694
|
+
.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; }
|
|
3695
|
+
.cp-instructions-row { border-top:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
|
|
3696
|
+
.cp-instructions-row[hidden] { display:none; }
|
|
3697
|
+
.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; }
|
|
3698
|
+
#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; }
|
|
3699
|
+
#cp-instructions:focus { border-color:var(--accent,#0071e3); }
|
|
3700
|
+
#cp-start-btn { align-self:flex-end; }
|
|
3701
|
+
.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; }
|
|
3702
|
+
.cp-hint { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:3px; }
|
|
3703
|
+
.cp-hint--right { margin-left:auto; }
|
|
3704
|
+
.cp-hint kbd { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:10px; font-family:inherit; }
|
|
3705
|
+
.cp-employee-footer { font-size:11px; color:var(--muted); padding:5px 14px 8px; }
|
|
3706
|
+
.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; }
|
|
3707
|
+
|
|
3708
|
+
/* ── Issue #540: Company roster + Manager team ─────────────────────────── */
|
|
3709
|
+
.company-hire-bar { display:flex; align-items:center; gap:8px; padding:9px 0 11px; flex-wrap:wrap; }
|
|
3710
|
+
.chb-count { font-size:14px; font-weight:700; color:var(--text); }
|
|
3711
|
+
.chb-label { font-size:13px; color:var(--sub); }
|
|
3712
|
+
.chb-progress { flex:1; min-width:80px; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
|
|
3713
|
+
.chb-progress-fill { height:100%; background:var(--accent,#0071e3); border-radius:3px; transition:width .3s; }
|
|
3714
|
+
.persona-roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:4px 0 16px; }
|
|
3715
|
+
.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; }
|
|
3716
|
+
.persona-roster-tile.prt-hired { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.06)); }
|
|
3717
|
+
.persona-roster-tile:not(.prt-hired):hover { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.04)); }
|
|
3718
|
+
.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; }
|
|
3719
|
+
.prt-name { font-size:13px; font-weight:700; color:var(--text); text-align:center; }
|
|
3720
|
+
.prt-role { font-size:11px; color:var(--sub); text-align:center; line-height:1.3; }
|
|
3721
|
+
.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; }
|
|
3722
|
+
.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; }
|
|
3723
|
+
.prt-hire-btn:hover { background:var(--accent-hover,#005bbf); }
|
|
3724
|
+
.prt-price { font-size:10px; color:var(--sub); margin-top:1px; }
|
|
3725
|
+
.manager-team-section { padding:4px 0 16px; }
|
|
3726
|
+
.manager-no-team-msg { font-size:13px; color:var(--sub); margin:0 0 10px; }
|
|
3727
|
+
.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; }
|
|
3728
|
+
.manager-go-company-btn:hover { background:var(--accent-soft,rgba(0,113,227,.15)); }
|
|
3729
|
+
|
|
3730
|
+
/* ── Issue #540: AI Hub hiring surfaces ── */
|
|
3731
|
+
|
|
3732
|
+
/* Status dots (green=available, amber=out-of-stock, grey=none) */
|
|
3733
|
+
.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
|
|
3734
|
+
.sdot--green { background:#34c759; }
|
|
3735
|
+
.sdot--amber { background:#ff9f0a; }
|
|
3736
|
+
.sdot--grey { background:var(--line); border:1px solid var(--muted); }
|
|
3737
|
+
|
|
3738
|
+
/* Persona grid — Company tab */
|
|
3739
|
+
.persona-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:8px; }
|
|
3740
|
+
/* #538 UI-polish (538-UIPV-P1): allow the hire button to wrap to its own full-width
|
|
3741
|
+
row so the avatar + name/role take the full first row; otherwise the nowrap button
|
|
3742
|
+
squeezed .persona-card-info to ~31px and clipped every name/role to "M…". */
|
|
3743
|
+
.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; }
|
|
3744
|
+
.persona-card-info { flex:1; min-width:0; }
|
|
3745
|
+
.persona-card .btn-hire-primary { flex-basis:100%; margin-top:8px; }
|
|
3746
|
+
.persona-card-info strong { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3747
|
+
.persona-card-role { display:block; font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
|
|
3748
|
+
.seat-badge { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
|
|
3749
|
+
.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; }
|
|
3750
|
+
.btn-hire-primary:hover { opacity:.85; }
|
|
3751
|
+
|
|
3752
|
+
/* Manager team pool — Manager tab */
|
|
3753
|
+
.manager-team-pool { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
|
|
3754
|
+
.team-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
|
|
3755
|
+
.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; }
|
|
3756
|
+
.btn-add-seat:hover { opacity:.85; }
|
|
3757
|
+
.btn-add-seat:disabled { opacity:.5; cursor:default; }
|
|
3758
|
+
.btn-hired-check { font-size:12px; color:var(--done); font-weight:600; }
|
|
3759
|
+
|
|
3760
|
+
/* Delegate button on roster chips */
|
|
3761
|
+
.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; }
|
|
3762
|
+
.delegate-btn:hover { background:var(--accent); color:#fff; }
|
|
3763
|
+
|
|
3764
|
+
/* Non-blocking hire strip (between #messages and send bar) */
|
|
3765
|
+
.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; }
|
|
3766
|
+
.hire-strip[hidden] { display:none; }
|
|
3767
|
+
.hs-avatar { flex-shrink:0; width:36px; height:36px; }
|
|
3768
|
+
.hs-body { flex:1; min-width:0; }
|
|
3769
|
+
.hs-title { margin:0; font-size:13px; font-weight:600; color:var(--text); }
|
|
3770
|
+
.hs-sub { margin:2px 0 0; font-size:11px; color:var(--muted); line-height:1.4; }
|
|
3771
|
+
.hs-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
|
|
3772
|
+
.hs-btn { padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; border:none; }
|
|
3773
|
+
.hs-btn[hidden] { display:none; }
|
|
3774
|
+
.hs-btn--primary { background:var(--accent); color:#fff; }
|
|
3775
|
+
.hs-btn--primary:hover { opacity:.85; }
|
|
3776
|
+
.hs-btn--ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
|
|
3777
|
+
.hs-btn--ghost:hover { color:var(--text); border-color:var(--text); }
|