codex-overleaf-link 1.8.5 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/README.md +45 -21
  2. package/bin/codex-overleaf-link.mjs +58 -0
  3. package/extension/assets/icons/codex-overleaf-dialog-icon.png +0 -0
  4. package/extension/assets/icons/codex-overleaf-icon.png +0 -0
  5. package/extension/assets/icons/icon128.png +0 -0
  6. package/extension/assets/icons/icon16.png +0 -0
  7. package/extension/assets/icons/icon32.png +0 -0
  8. package/extension/assets/icons/icon48.png +0 -0
  9. package/extension/bootstrap/background.js +404 -0
  10. package/extension/bootstrap/manifest.template.json +51 -0
  11. package/extension/bootstrap/popup.css +26 -0
  12. package/extension/bootstrap/popup.html +38 -0
  13. package/extension/bootstrap/popup.js +44 -0
  14. package/extension/bootstrap/runtimeContext.js +2 -0
  15. package/extension/runtime-manifest.json +60 -0
  16. package/extension/src/background.js +532 -0
  17. package/extension/src/content/applyResultFormatters.js +387 -0
  18. package/extension/src/content/composerAttachments.js +522 -0
  19. package/extension/src/content/composerPanel.js +254 -0
  20. package/extension/src/content/contentRuntime.js +8895 -0
  21. package/extension/src/content/contextTray.js +686 -0
  22. package/extension/src/content/diagnosticsController.js +659 -0
  23. package/extension/src/content/diagnosticsPanel.js +342 -0
  24. package/extension/src/content/diffReviewPanel.js +797 -0
  25. package/extension/src/content/localSkillsPanel.js +280 -0
  26. package/extension/src/content/markdownText.js +606 -0
  27. package/extension/src/content/mirrorHealth.js +92 -0
  28. package/extension/src/content/modelPicker.js +489 -0
  29. package/extension/src/content/nativeChannel.js +62 -0
  30. package/extension/src/content/otWarmMirror.js +964 -0
  31. package/extension/src/content/otWarmMirrorController.js +174 -0
  32. package/extension/src/content/panelMaintenance.js +367 -0
  33. package/extension/src/content/panelRenderer.js +253 -0
  34. package/extension/src/content/recentProjects.js +1063 -0
  35. package/extension/src/content/reviewHunks.js +247 -0
  36. package/extension/src/content/runController.js +242 -0
  37. package/extension/src/content/runTimelineView.js +1126 -0
  38. package/extension/src/content/sessionManager.js +487 -0
  39. package/extension/src/content/sessionPanel.js +263 -0
  40. package/extension/src/content/settingsPanel.js +527 -0
  41. package/extension/src/content/themeController.js +91 -0
  42. package/extension/src/content/updateIdle.js +67 -0
  43. package/extension/src/content/writebackController.js +300 -0
  44. package/extension/src/content/writebackOrchestrator.js +850 -0
  45. package/extension/src/contentScript.js +8 -0
  46. package/extension/src/page/compileBridge.js +460 -0
  47. package/extension/src/page/overleafCapabilities.js +100 -0
  48. package/extension/src/page/overleafEditor.js +282 -0
  49. package/extension/src/page/overleafProjectSnapshot.js +234 -0
  50. package/extension/src/page/overleafRealtimeObserver.js +491 -0
  51. package/extension/src/page/pageBridgeCapability.js +71 -0
  52. package/extension/src/page/snapshotRouter.js +948 -0
  53. package/extension/src/page/trackedChangesLifecycle.js +1506 -0
  54. package/extension/src/page/treeOperations.js +1584 -0
  55. package/extension/src/page/writeGuard.js +142 -0
  56. package/extension/src/page/writebackRouter.js +1934 -0
  57. package/extension/src/pageBridge.js +2224 -0
  58. package/extension/src/popup.js +247 -0
  59. package/extension/src/shared/compatibility.js +1 -1
  60. package/extension/styles/panel.css +4048 -0
  61. package/native-host/src/index.js +9 -2
  62. package/native-host/src/launcher.js +2 -0
  63. package/native-host/src/managedInstall.js +393 -0
  64. package/native-host/src/managedLauncherRuntime.js +71 -0
  65. package/native-host/src/nativeEnvironment.js +4 -0
  66. package/native-host/src/nativeHostPlatform.js +16 -0
  67. package/native-host/src/runtimeInstaller.js +6 -1
  68. package/native-host/src/taskRunnerRuntime.js +8 -0
  69. package/native-host/src/updateArchive.js +253 -0
  70. package/native-host/src/updateManager.js +548 -0
  71. package/native-host/src/updateTrust.js +156 -0
  72. package/package.json +11 -2
  73. package/scripts/install-managed.mjs +64 -0
  74. package/scripts/uninstall-managed.mjs +48 -0
@@ -0,0 +1,4048 @@
1
+ :root.codex-overleaf-panel-mounted {
2
+ --codex-overleaf-panel-width: 380px;
3
+ }
4
+
5
+ :root.codex-overleaf-panel-mounted:not(.codex-overleaf-panel-compact) body {
6
+ box-sizing: border-box;
7
+ width: calc(100vw - var(--codex-overleaf-panel-width)) !important;
8
+ max-width: calc(100vw - var(--codex-overleaf-panel-width)) !important;
9
+ overflow-x: hidden !important;
10
+ }
11
+
12
+ #codex-overleaf-panel {
13
+ position: fixed;
14
+ inset: 0 0 0 auto;
15
+ z-index: 2147483647;
16
+ display: none;
17
+ box-sizing: border-box;
18
+ width: var(--codex-overleaf-panel-width);
19
+ height: 100vh;
20
+ border-left: 1px solid var(--tl-border);
21
+ background: var(--tl-surface-0);
22
+ color: var(--tl-fg-2);
23
+ font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
24
+ overflow: hidden;
25
+ }
26
+
27
+ :root.codex-overleaf-panel-compact body {
28
+ width: auto !important;
29
+ max-width: none !important;
30
+ }
31
+
32
+ :root.codex-overleaf-panel-compact #codex-overleaf-panel {
33
+ inset: 12px 12px 12px auto;
34
+ width: min(var(--codex-overleaf-panel-width), calc(100vw - 24px));
35
+ max-width: calc(100vw - 24px);
36
+ height: auto;
37
+ max-height: calc(100vh - 24px);
38
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
39
+ }
40
+
41
+ :root.codex-overleaf-panel-resizing,
42
+ :root.codex-overleaf-panel-resizing * {
43
+ cursor: col-resize !important;
44
+ user-select: none !important;
45
+ }
46
+
47
+ #codex-overleaf-panel .codex-panel-resize-handle {
48
+ position: absolute;
49
+ z-index: 2;
50
+ top: 0;
51
+ bottom: 0;
52
+ left: -4px;
53
+ width: 8px;
54
+ cursor: col-resize;
55
+ }
56
+
57
+ :root.codex-overleaf-panel-compact #codex-overleaf-panel .codex-panel-resize-handle {
58
+ display: none;
59
+ }
60
+
61
+ #codex-overleaf-panel .codex-panel-resize-handle::after {
62
+ content: "";
63
+ position: absolute;
64
+ top: 0;
65
+ bottom: 0;
66
+ left: 3px;
67
+ width: 1px;
68
+ background: transparent;
69
+ }
70
+
71
+ #codex-overleaf-panel .codex-panel-resize-handle:hover::after,
72
+ :root.codex-overleaf-panel-resizing #codex-overleaf-panel .codex-panel-resize-handle::after {
73
+ background: var(--tl-accent);
74
+ }
75
+
76
+ #codex-overleaf-panel.is-open {
77
+ display: flex;
78
+ flex-direction: column;
79
+ }
80
+
81
+ #codex-overleaf-panel button,
82
+ #codex-overleaf-panel select,
83
+ #codex-overleaf-panel textarea {
84
+ font: inherit;
85
+ }
86
+
87
+ #codex-overleaf-panel button {
88
+ border: 0;
89
+ background: transparent;
90
+ color: var(--tl-fg-2);
91
+ cursor: pointer;
92
+ transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
93
+ }
94
+
95
+ #codex-overleaf-panel button:hover {
96
+ background: var(--tl-hover);
97
+ }
98
+
99
+ /* Keyboard-focus ring for every panel button (most had none). Additive outline,
100
+ so it composes with any button's own focus styling. */
101
+ #codex-overleaf-panel button:focus-visible {
102
+ outline: 2px solid var(--tl-accent);
103
+ outline-offset: 1px;
104
+ }
105
+
106
+ #codex-overleaf-panel button:disabled {
107
+ cursor: default;
108
+ opacity: 0.55;
109
+ }
110
+
111
+ #codex-overleaf-panel .codex-vscode-head {
112
+ display: flex;
113
+ align-items: center;
114
+ justify-content: space-between;
115
+ min-height: 36px;
116
+ border-bottom: 1px solid var(--tl-border);
117
+ padding: 0 8px 0 12px;
118
+ }
119
+
120
+ #codex-overleaf-panel .codex-vscode-title {
121
+ align-self: stretch;
122
+ display: flex;
123
+ align-items: center;
124
+ border-bottom: 1px solid var(--tl-accent);
125
+ color: var(--tl-fg-2);
126
+ font-size: 11px;
127
+ letter-spacing: 0;
128
+ text-transform: uppercase;
129
+ }
130
+
131
+ #codex-overleaf-panel .codex-vscode-head-actions {
132
+ display: flex;
133
+ align-items: center;
134
+ gap: 2px;
135
+ }
136
+
137
+ #codex-overleaf-panel .codex-diagnostics-wrap {
138
+ position: relative;
139
+ }
140
+
141
+ #codex-overleaf-panel .codex-vscode-head-actions button {
142
+ display: inline-flex;
143
+ align-items: center;
144
+ justify-content: center;
145
+ width: 26px;
146
+ height: 26px;
147
+ border-radius: 4px;
148
+ color: var(--tl-fg-3);
149
+ font-size: 0;
150
+ }
151
+
152
+ #codex-overleaf-panel .codex-icon {
153
+ display: inline-flex;
154
+ align-items: center;
155
+ justify-content: center;
156
+ width: 14px;
157
+ height: 14px;
158
+ flex: 0 0 auto;
159
+ color: currentColor;
160
+ }
161
+
162
+ #codex-overleaf-panel .codex-icon svg {
163
+ display: block;
164
+ width: 100%;
165
+ height: 100%;
166
+ fill: none;
167
+ stroke: currentColor;
168
+ stroke-width: 1.65;
169
+ stroke-linecap: round;
170
+ stroke-linejoin: round;
171
+ }
172
+
173
+ #codex-overleaf-panel .codex-vscode-head-actions .codex-icon {
174
+ width: 15px;
175
+ height: 15px;
176
+ }
177
+
178
+ #codex-overleaf-panel .codex-vscode-head-actions [data-diagnostics-menu][data-active="true"],
179
+ #codex-overleaf-panel .codex-vscode-head-actions [data-custom-instructions-settings][data-active="true"] {
180
+ background: var(--tl-hover);
181
+ color: var(--tl-fg-1);
182
+ }
183
+
184
+ #codex-overleaf-panel .codex-vscode-head-actions [data-refresh][data-loading="true"] {
185
+ animation: codex-refresh-spin 800ms linear infinite;
186
+ color: var(--tl-fg-1);
187
+ }
188
+
189
+ /* Diagnostics trigger: a health dot whose color reflects the overall state, so
190
+ the button reads as "diagnostics" and surfaces problems without being opened. */
191
+ #codex-overleaf-panel .codex-diagnostics-trigger {
192
+ display: inline-flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ }
196
+
197
+ #codex-overleaf-panel .codex-diagnostics-dot {
198
+ width: 9px;
199
+ height: 9px;
200
+ border-radius: 50%;
201
+ background: var(--tl-fg-4);
202
+ box-shadow: 0 0 0 2px var(--tl-surface-1);
203
+ }
204
+
205
+ #codex-overleaf-panel .codex-diagnostics-dot[data-health="ok"] { background: var(--tl-ok); }
206
+ #codex-overleaf-panel .codex-diagnostics-dot[data-health="warn"] { background: var(--tl-review); }
207
+ #codex-overleaf-panel .codex-diagnostics-dot[data-health="fail"] { background: var(--tl-fail); }
208
+
209
+ /* Run-all item + separator in the diagnostics menu. */
210
+ #codex-overleaf-panel .codex-diagnostics-runall span {
211
+ color: var(--tl-fg-1);
212
+ font-weight: 600;
213
+ }
214
+
215
+ #codex-overleaf-panel .codex-diagnostics-menu-sep {
216
+ height: 1px;
217
+ background: var(--tl-border);
218
+ margin: 4px 0;
219
+ }
220
+
221
+ /* Aggregated health report: one scannable status row per check (Run all). */
222
+ #codex-overleaf-panel .codex-diagnostics-checks {
223
+ display: grid;
224
+ gap: 8px;
225
+ margin-top: 4px;
226
+ }
227
+
228
+ #codex-overleaf-panel .codex-diagnostics-check {
229
+ display: grid;
230
+ grid-template-columns: 16px 1fr;
231
+ gap: 8px;
232
+ align-items: start;
233
+ }
234
+
235
+ #codex-overleaf-panel .codex-diagnostics-check-glyph::before {
236
+ content: "·";
237
+ color: var(--tl-fg-4);
238
+ font-weight: 700;
239
+ }
240
+
241
+ #codex-overleaf-panel .codex-diagnostics-check[data-status="ok"] .codex-diagnostics-check-glyph::before { content: "✓"; color: var(--tl-ok); }
242
+ #codex-overleaf-panel .codex-diagnostics-check[data-status="warn"] .codex-diagnostics-check-glyph::before { content: "!"; color: var(--tl-review); }
243
+ #codex-overleaf-panel .codex-diagnostics-check[data-status="fail"] .codex-diagnostics-check-glyph::before { content: "✕"; color: var(--tl-fail); }
244
+
245
+ #codex-overleaf-panel .codex-diagnostics-check-title {
246
+ color: var(--tl-fg-1);
247
+ font-size: 12px;
248
+ font-weight: 600;
249
+ }
250
+
251
+ #codex-overleaf-panel .codex-diagnostics-check-summary {
252
+ color: var(--tl-fg-3);
253
+ font-size: 11px;
254
+ line-height: 1.4;
255
+ }
256
+
257
+ #codex-overleaf-panel .codex-diagnostics-check-next {
258
+ color: var(--tl-accent);
259
+ font-size: 11px;
260
+ line-height: 1.4;
261
+ margin-top: 2px;
262
+ }
263
+
264
+ #codex-overleaf-panel .codex-toast-region {
265
+ display: grid;
266
+ flex: 0 0 auto;
267
+ width: 100%;
268
+ gap: 6px;
269
+ margin-top: 8px;
270
+ pointer-events: none;
271
+ }
272
+
273
+ #codex-overleaf-panel .codex-toast-region:empty {
274
+ display: none;
275
+ }
276
+
277
+ #codex-overleaf-panel .codex-toast {
278
+ animation: tl-fade-in 120ms ease;
279
+ display: grid;
280
+ grid-template-columns: minmax(0, 1fr) 22px;
281
+ align-items: start;
282
+ gap: 8px;
283
+ border: 1px solid var(--tl-border-strong);
284
+ border-radius: 5px;
285
+ background: var(--tl-surface-2);
286
+ box-shadow: none;
287
+ color: var(--tl-fg-1);
288
+ padding: 7px 7px 7px 9px;
289
+ pointer-events: auto;
290
+ }
291
+
292
+ #codex-overleaf-panel .codex-toast[data-status="completed"] {
293
+ border-color: var(--tl-ok);
294
+ }
295
+
296
+ #codex-overleaf-panel .codex-toast[data-status="warning"] {
297
+ border-color: var(--tl-review);
298
+ }
299
+
300
+ #codex-overleaf-panel .codex-toast[data-status="failed"] {
301
+ border-color: var(--tl-fail);
302
+ }
303
+
304
+ #codex-overleaf-panel .codex-toast-body {
305
+ color: var(--tl-fg-2);
306
+ font-size: 12px;
307
+ line-height: 1.45;
308
+ word-break: break-word;
309
+ }
310
+
311
+ #codex-overleaf-panel .codex-toast-close {
312
+ width: 22px;
313
+ height: 22px;
314
+ border-radius: 4px;
315
+ color: var(--tl-fg-3);
316
+ }
317
+
318
+ @keyframes codex-refresh-spin {
319
+ to {
320
+ transform: rotate(360deg);
321
+ }
322
+ }
323
+
324
+ #codex-overleaf-panel .codex-diagnostics-menu {
325
+ position: absolute;
326
+ z-index: 2147483647;
327
+ top: 30px;
328
+ right: 0;
329
+ width: 260px;
330
+ border: 1px solid var(--tl-border-strong);
331
+ border-radius: 6px;
332
+ background: var(--tl-surface-2);
333
+ box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
334
+ padding: 6px;
335
+ }
336
+
337
+ #codex-overleaf-panel .codex-diagnostics-menu[hidden] {
338
+ display: none;
339
+ }
340
+
341
+ #codex-overleaf-panel .codex-diagnostics-hint {
342
+ padding: 6px 8px 8px;
343
+ border-bottom: 1px solid var(--tl-border-strong);
344
+ color: var(--tl-fg-3);
345
+ font-size: 11px;
346
+ line-height: 1.35;
347
+ }
348
+
349
+ #codex-overleaf-panel .codex-diagnostics-menu button {
350
+ display: flex;
351
+ flex-direction: column;
352
+ align-items: flex-start;
353
+ justify-content: flex-start;
354
+ width: 100%;
355
+ height: auto;
356
+ color: var(--tl-fg-2);
357
+ padding: 8px;
358
+ text-align: left;
359
+ white-space: normal;
360
+ }
361
+
362
+ #codex-overleaf-panel .codex-diagnostics-menu button span {
363
+ color: var(--tl-fg-1);
364
+ font-size: 12px;
365
+ line-height: 1.3;
366
+ }
367
+
368
+ #codex-overleaf-panel .codex-diagnostics-menu button small {
369
+ margin-top: 2px;
370
+ color: var(--tl-fg-3);
371
+ font-size: 11px;
372
+ line-height: 1.3;
373
+ }
374
+
375
+ #codex-overleaf-panel .codex-diagnostics-result {
376
+ position: fixed;
377
+ z-index: 2147483647;
378
+ top: 44px;
379
+ right: 12px;
380
+ width: min(316px, calc(var(--codex-overleaf-panel-width) - 24px));
381
+ max-height: min(520px, calc(100vh - 64px));
382
+ overflow: auto;
383
+ border: 1px solid var(--tl-border-strong);
384
+ border-radius: 8px;
385
+ background: var(--tl-surface-1);
386
+ box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
387
+ }
388
+
389
+ #codex-overleaf-panel .codex-diagnostics-result[hidden] {
390
+ display: none;
391
+ }
392
+
393
+ #codex-overleaf-panel .codex-diagnostics-result[data-status="completed"] {
394
+ border-color: var(--tl-ok);
395
+ }
396
+
397
+ #codex-overleaf-panel .codex-diagnostics-result[data-status="warning"] {
398
+ border-color: var(--tl-review);
399
+ }
400
+
401
+ #codex-overleaf-panel .codex-diagnostics-result[data-status="failed"] {
402
+ border-color: var(--tl-fail);
403
+ }
404
+
405
+ /* View-state rules: hide session elements when in settings/skills view, and vice versa */
406
+ #codex-overleaf-panel[data-view="settings"] .codex-vscode-head,
407
+ #codex-overleaf-panel[data-view="settings"] [data-main],
408
+ #codex-overleaf-panel[data-view="settings"] [data-probe-status],
409
+ #codex-overleaf-panel[data-view="settings"] [data-composer-slot],
410
+ #codex-overleaf-panel[data-view="skills"] .codex-vscode-head,
411
+ #codex-overleaf-panel[data-view="skills"] [data-main],
412
+ #codex-overleaf-panel[data-view="skills"] [data-probe-status],
413
+ #codex-overleaf-panel[data-view="skills"] [data-composer-slot] {
414
+ display: none;
415
+ }
416
+
417
+ #codex-overleaf-panel[data-view="session"] [data-settings-slot] {
418
+ display: none;
419
+ }
420
+
421
+ #codex-overleaf-panel[data-view="settings"] [data-settings-slot],
422
+ #codex-overleaf-panel[data-view="skills"] [data-settings-slot] {
423
+ display: flex;
424
+ flex: 1 1 auto;
425
+ min-height: 0;
426
+ }
427
+
428
+ /* The settings slot holds both screens (the settings screen and the skills
429
+ sub-page); both carry the shared .codex-custom-instructions-panel layout.
430
+ data-view selects which one shows by hiding the other. These attribute-
431
+ scoped selectors outrank the shared layout rule, so the toggle is reliable. */
432
+ #codex-overleaf-panel[data-view="skills"] .codex-project-settings-panel,
433
+ #codex-overleaf-panel[data-view="settings"] .codex-skills-panel {
434
+ display: none;
435
+ }
436
+
437
+ #codex-overleaf-panel .codex-custom-instructions-panel {
438
+ display: flex;
439
+ flex-direction: column;
440
+ flex: 1 1 auto;
441
+ min-height: 0;
442
+ overflow-y: auto;
443
+ background: var(--tl-surface-1);
444
+ padding: 12px;
445
+ gap: 10px;
446
+ }
447
+
448
+ #codex-overleaf-panel .codex-custom-instructions-head {
449
+ display: flex;
450
+ align-items: flex-start;
451
+ justify-content: space-between;
452
+ gap: 10px;
453
+ }
454
+
455
+ #codex-overleaf-panel .codex-custom-instructions-title {
456
+ color: var(--tl-fg-1);
457
+ font-size: 14px;
458
+ font-weight: 650;
459
+ line-height: 1.35;
460
+ }
461
+
462
+ #codex-overleaf-panel .codex-custom-instructions-subtitle {
463
+ margin-top: 3px;
464
+ color: var(--tl-fg-3);
465
+ font-size: 12px;
466
+ line-height: 1.4;
467
+ }
468
+
469
+ #codex-overleaf-panel .codex-custom-instructions-head [data-settings-back],
470
+ #codex-overleaf-panel .codex-custom-instructions-head [data-skills-back] {
471
+ flex: 0 0 auto;
472
+ width: 24px;
473
+ height: 24px;
474
+ border-radius: 4px;
475
+ }
476
+
477
+ #codex-overleaf-panel .codex-custom-instructions-input {
478
+ box-sizing: border-box;
479
+ width: 100%;
480
+ height: 132px;
481
+ min-height: 132px;
482
+ max-height: 132px;
483
+ resize: none;
484
+ border: 1px solid var(--tl-border-strong);
485
+ border-radius: 6px;
486
+ background: var(--tl-surface-0);
487
+ color: var(--tl-fg-1);
488
+ padding: 9px;
489
+ outline: none;
490
+ font-size: 12px;
491
+ line-height: 1.45;
492
+ }
493
+
494
+ #codex-overleaf-panel .codex-custom-instructions-input:focus {
495
+ border-color: var(--tl-accent);
496
+ }
497
+
498
+ #codex-overleaf-panel .codex-custom-instructions-input::placeholder {
499
+ color: var(--tl-fg-3);
500
+ }
501
+
502
+ #codex-overleaf-panel .codex-project-settings-scope {
503
+ display: grid;
504
+ gap: 10px;
505
+ border-top: 1px solid var(--tl-border);
506
+ padding-top: 12px;
507
+ }
508
+
509
+ #codex-overleaf-panel .codex-project-settings-scope--global {
510
+ border-top-color: var(--tl-border-strong);
511
+ }
512
+
513
+ #codex-overleaf-panel .codex-project-settings-scope-title {
514
+ color: var(--tl-fg-1);
515
+ font-size: 13px;
516
+ font-weight: 650;
517
+ line-height: 1.35;
518
+ }
519
+
520
+ #codex-overleaf-panel .codex-project-settings-textarea {
521
+ box-sizing: border-box;
522
+ width: 100%;
523
+ min-height: 72px;
524
+ resize: vertical;
525
+ border: 1px solid var(--tl-border-strong);
526
+ border-radius: 6px;
527
+ background: var(--tl-surface-0);
528
+ color: var(--tl-fg-1);
529
+ padding: 8px;
530
+ font-size: 12px;
531
+ line-height: 1.4;
532
+ }
533
+
534
+ #codex-overleaf-panel .codex-local-skill-list {
535
+ display: grid;
536
+ gap: 6px;
537
+ max-height: 180px;
538
+ overflow: auto;
539
+ margin-left: 8px;
540
+ padding-left: 14px;
541
+ border-left: 2px solid var(--tl-border-strong);
542
+ margin-top: 2px;
543
+ }
544
+
545
+ #codex-overleaf-panel .codex-local-skill-row {
546
+ display: flex;
547
+ gap: 8px;
548
+ align-items: center;
549
+ color: var(--tl-fg-1);
550
+ font-size: 12px;
551
+ }
552
+
553
+ /* Skill name fills the row; actions and the enable switch stay on the right. */
554
+ #codex-overleaf-panel .codex-local-skill-row > span {
555
+ flex: 1 1 auto;
556
+ min-width: 0;
557
+ overflow: hidden;
558
+ text-overflow: ellipsis;
559
+ white-space: nowrap;
560
+ }
561
+
562
+ #codex-overleaf-panel .codex-local-skill-actions {
563
+ display: flex;
564
+ flex: 0 0 auto;
565
+ gap: 6px;
566
+ align-items: center;
567
+ }
568
+
569
+ #codex-overleaf-panel .codex-local-skill-row[data-disabled="true"] {
570
+ opacity: 0.6;
571
+ }
572
+
573
+ #codex-overleaf-panel .codex-project-settings-panel button,
574
+ #codex-overleaf-panel .codex-skills-panel button {
575
+ white-space: nowrap;
576
+ }
577
+
578
+ #codex-overleaf-panel .codex-project-settings-empty,
579
+ #codex-overleaf-panel .codex-project-settings-status {
580
+ color: var(--tl-fg-3);
581
+ font-size: 12px;
582
+ line-height: 1.35;
583
+ }
584
+
585
+ #codex-overleaf-panel .codex-project-settings-status[data-status="failed"] {
586
+ color: var(--tl-fail);
587
+ }
588
+
589
+ #codex-overleaf-panel .codex-project-settings-status[data-status="completed"] {
590
+ color: var(--tl-ok);
591
+ }
592
+
593
+ /* Save indicator — hidden at rest, flashes "✓ Saved" briefly when a field is
594
+ persisted (settingsPanel toggles data-state="saved" then clears it). */
595
+ /* Sliding switch — the unified control for every boolean setting (skills +
596
+ governance). A styled checkbox: track + knob, with :checked sliding the knob
597
+ right. */
598
+ #codex-overleaf-panel .codex-switch {
599
+ -webkit-appearance: none;
600
+ appearance: none;
601
+ flex: 0 0 auto;
602
+ box-sizing: border-box;
603
+ position: relative;
604
+ width: 32px;
605
+ height: 18px;
606
+ margin: 0;
607
+ border-radius: 9px;
608
+ background: var(--tl-border-strong);
609
+ cursor: pointer;
610
+ transition: background 120ms ease;
611
+ }
612
+
613
+ #codex-overleaf-panel .codex-switch::before {
614
+ content: "";
615
+ position: absolute;
616
+ top: 2px;
617
+ left: 2px;
618
+ width: 14px;
619
+ height: 14px;
620
+ border-radius: 50%;
621
+ background: #ffffff;
622
+ transition: transform 120ms ease;
623
+ }
624
+
625
+ #codex-overleaf-panel .codex-switch:checked {
626
+ background: var(--tl-ok);
627
+ }
628
+
629
+ #codex-overleaf-panel .codex-switch:checked::before {
630
+ transform: translateX(14px);
631
+ background: #ffffff;
632
+ }
633
+
634
+ #codex-overleaf-panel .codex-switch:focus-visible {
635
+ outline: 2px solid var(--tl-accent);
636
+ outline-offset: 1px;
637
+ }
638
+
639
+ #codex-overleaf-panel .codex-switch:disabled {
640
+ cursor: default;
641
+ opacity: 0.5;
642
+ }
643
+
644
+ /* A settings row with a label on the left and a sliding switch on the right. */
645
+ #codex-overleaf-panel .codex-project-settings-row--switch {
646
+ display: flex;
647
+ align-items: center;
648
+ justify-content: space-between;
649
+ gap: 10px;
650
+ color: var(--tl-fg-1);
651
+ font-size: 12px;
652
+ line-height: 1.35;
653
+ cursor: pointer;
654
+ }
655
+
656
+ #codex-overleaf-panel .codex-project-settings-row-label {
657
+ flex: 1 1 auto;
658
+ min-width: 0;
659
+ }
660
+
661
+ /* Settings entry row — navigates to the Codex Overleaf skills sub-page. */
662
+ #codex-overleaf-panel .codex-skills-entry {
663
+ display: flex;
664
+ align-items: center;
665
+ gap: 8px;
666
+ width: 100%;
667
+ border: 1px solid var(--tl-border-strong);
668
+ border-radius: 6px;
669
+ background: var(--tl-surface-0);
670
+ color: var(--tl-fg-1);
671
+ padding: 9px 10px;
672
+ text-align: left;
673
+ font-size: 12px;
674
+ line-height: 1.35;
675
+ }
676
+
677
+ #codex-overleaf-panel .codex-skills-entry:hover {
678
+ background: var(--tl-surface-2);
679
+ }
680
+
681
+ #codex-overleaf-panel .codex-skills-entry-label {
682
+ flex: 1 1 auto;
683
+ min-width: 0;
684
+ }
685
+
686
+ #codex-overleaf-panel .codex-skills-entry-summary {
687
+ flex: 0 0 auto;
688
+ color: var(--tl-fg-3);
689
+ font-size: 11px;
690
+ }
691
+
692
+ #codex-overleaf-panel .codex-skills-entry-chevron {
693
+ flex: 0 0 auto;
694
+ color: var(--tl-fg-3);
695
+ font-size: 14px;
696
+ }
697
+
698
+ /* ---------------------------------------------------------------------------
699
+ Settings cards (A+ redesign). Each section is a collapsible <details> group
700
+ holding a bordered card of label / help / control rows. Reuses the
701
+ run-timeline --tl-* tokens (surfaces, border, 4-step text ladder, radii) so
702
+ Settings reads as the same surface as the thread view. */
703
+ #codex-overleaf-panel .codex-set-group-head {
704
+ display: flex;
705
+ align-items: center;
706
+ justify-content: space-between;
707
+ gap: 8px;
708
+ }
709
+
710
+ #codex-overleaf-panel .codex-set-group-title {
711
+ display: inline-flex;
712
+ align-items: center;
713
+ gap: 6px;
714
+ color: var(--tl-fg-1);
715
+ font-weight: 600;
716
+ }
717
+
718
+ #codex-overleaf-panel .codex-set-group-icon {
719
+ display: inline-flex;
720
+ align-items: center;
721
+ justify-content: center;
722
+ width: 16px;
723
+ height: 16px;
724
+ color: var(--tl-fg-3);
725
+ }
726
+
727
+ #codex-overleaf-panel .codex-set-group-icon .codex-icon {
728
+ width: 15px;
729
+ height: 15px;
730
+ }
731
+
732
+ #codex-overleaf-panel .codex-set-group[open] .codex-set-group-icon {
733
+ color: var(--tl-fg-2);
734
+ }
735
+
736
+ #codex-overleaf-panel .codex-set-saved {
737
+ color: var(--tl-ok);
738
+ font-size: 10.5px;
739
+ white-space: nowrap;
740
+ animation: tl-fade-in 120ms ease;
741
+ }
742
+
743
+ #codex-overleaf-panel .codex-set-note {
744
+ margin-top: 6px;
745
+ border: 1px solid var(--tl-border-strong);
746
+ border-radius: var(--tl-r-sm);
747
+ padding: 6px 9px;
748
+ font-size: 11px;
749
+ line-height: 1.45;
750
+ }
751
+
752
+ #codex-overleaf-panel .codex-set-note[data-tone="warn"] {
753
+ border-color: rgba(215, 186, 125, 0.4);
754
+ background: var(--tl-review-wash);
755
+ color: var(--tl-review);
756
+ }
757
+
758
+ #codex-overleaf-panel .codex-set-note[data-tone="info"] {
759
+ background: var(--tl-surface-2);
760
+ color: var(--tl-fg-3);
761
+ }
762
+
763
+ #codex-overleaf-panel .codex-set-row-sub {
764
+ display: block;
765
+ margin-top: 2px;
766
+ color: var(--tl-fg-3);
767
+ font-size: 10.5px;
768
+ font-weight: 400;
769
+ line-height: 1.4;
770
+ }
771
+
772
+ #codex-overleaf-panel .codex-project-settings-row--select {
773
+ display: flex;
774
+ align-items: center;
775
+ justify-content: space-between;
776
+ gap: 10px;
777
+ }
778
+
779
+ #codex-overleaf-panel .run-history-truncated {
780
+ padding: 4px 10px;
781
+ color: var(--tl-fg-4);
782
+ font-size: 10.5px;
783
+ text-align: center;
784
+ }
785
+
786
+ #codex-overleaf-panel .codex-diff-hunk-status + [data-diff-hunk-revert] {
787
+ margin-left: 6px;
788
+ color: var(--tl-fg-3);
789
+ font-size: 10.5px;
790
+ text-decoration: underline;
791
+ }
792
+
793
+ #codex-overleaf-panel .codex-set-eyebrow {
794
+ text-transform: uppercase;
795
+ letter-spacing: 0.06em;
796
+ font-size: 11px;
797
+ font-weight: 600;
798
+ color: var(--tl-fg-4);
799
+ }
800
+
801
+ #codex-overleaf-panel .codex-set-group {
802
+ border: 1px solid var(--tl-border);
803
+ border-radius: var(--tl-r-md);
804
+ background: var(--tl-surface-1);
805
+ overflow: hidden;
806
+ }
807
+
808
+ #codex-overleaf-panel .codex-set-group + .codex-set-group {
809
+ margin-top: 8px;
810
+ }
811
+
812
+ #codex-overleaf-panel .codex-set-group-head {
813
+ display: flex;
814
+ align-items: center;
815
+ gap: 8px;
816
+ padding: 10px 12px;
817
+ color: var(--tl-fg-1);
818
+ font-size: 12px;
819
+ font-weight: 600;
820
+ line-height: 1.35;
821
+ cursor: pointer;
822
+ list-style: none;
823
+ user-select: none;
824
+ }
825
+
826
+ #codex-overleaf-panel .codex-set-group-head::-webkit-details-marker {
827
+ display: none;
828
+ }
829
+
830
+ /* Disclosure chevron — points right when collapsed, rotates down when open. */
831
+ #codex-overleaf-panel .codex-set-group-head::after {
832
+ content: "›";
833
+ margin-left: auto;
834
+ color: var(--tl-fg-4);
835
+ font-size: 15px;
836
+ line-height: 1;
837
+ transition: transform 120ms ease;
838
+ }
839
+
840
+ #codex-overleaf-panel .codex-set-group[open] > .codex-set-group-head::after {
841
+ transform: rotate(90deg);
842
+ }
843
+
844
+ #codex-overleaf-panel .codex-set-group-head:hover {
845
+ background: var(--tl-surface-2);
846
+ }
847
+
848
+ #codex-overleaf-panel .codex-set-card {
849
+ display: grid;
850
+ gap: 10px;
851
+ padding: 0 12px 12px;
852
+ }
853
+
854
+ /* On the dedicated skills sub-page the card stands alone (no group header above
855
+ it), so it becomes a self-contained bordered surface with full padding. */
856
+ #codex-overleaf-panel .codex-skills-panel .codex-set-card {
857
+ padding-top: 12px;
858
+ border: 1px solid var(--tl-border);
859
+ border-radius: var(--tl-r-md);
860
+ background: var(--tl-surface-1);
861
+ }
862
+
863
+ #codex-overleaf-panel .codex-set-row {
864
+ display: grid;
865
+ gap: 5px;
866
+ }
867
+
868
+ #codex-overleaf-panel .codex-set-row-label {
869
+ color: var(--tl-fg-2);
870
+ font-size: 11px;
871
+ font-weight: 600;
872
+ letter-spacing: 0.01em;
873
+ }
874
+
875
+ #codex-overleaf-panel .codex-set-row-help {
876
+ margin: 0;
877
+ color: var(--tl-fg-4);
878
+ font-size: 11px;
879
+ line-height: 1.45;
880
+ }
881
+
882
+ /* Help text that explains a switch sits tight beneath its row. */
883
+ #codex-overleaf-panel .codex-project-settings-row--switch + .codex-set-row-help {
884
+ margin-top: -5px;
885
+ }
886
+
887
+ /* Compact select control (theme picker) — tokenized so it themes too. */
888
+ #codex-overleaf-panel .codex-set-select {
889
+ flex: 0 0 auto;
890
+ border: 1px solid var(--tl-border);
891
+ border-radius: var(--tl-r-sm);
892
+ background: var(--tl-surface-2);
893
+ color: var(--tl-fg-1);
894
+ padding: 3px 6px;
895
+ font-size: 12px;
896
+ cursor: pointer;
897
+ }
898
+
899
+ #codex-overleaf-panel .codex-set-select:focus-visible {
900
+ outline: 2px solid var(--tl-accent);
901
+ outline-offset: 1px;
902
+ }
903
+
904
+ #codex-overleaf-panel .codex-set-hairline {
905
+ height: 1px;
906
+ background: var(--tl-border);
907
+ margin: 2px 0;
908
+ }
909
+
910
+ /* The personalization field already declares its own height; keep it edge-to-
911
+ edge inside the card. */
912
+ #codex-overleaf-panel .codex-set-card .codex-custom-instructions-input {
913
+ margin: 0;
914
+ }
915
+
916
+ /* Settings buttons — bordered, compact, with subtle and danger variants. Used
917
+ by the local-skill Remove / Confirm / Cancel actions. */
918
+ #codex-overleaf-panel .codex-set-btn {
919
+ flex: 0 0 auto;
920
+ border: 1px solid var(--tl-border);
921
+ border-radius: var(--tl-r-sm);
922
+ background: var(--tl-surface-2);
923
+ color: var(--tl-fg-2);
924
+ padding: 3px 10px;
925
+ font-size: 11px;
926
+ font-weight: 500;
927
+ line-height: 1.4;
928
+ cursor: pointer;
929
+ transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
930
+ }
931
+
932
+ #codex-overleaf-panel .codex-set-btn:hover {
933
+ background: var(--tl-hover);
934
+ border-color: var(--tl-border-strong);
935
+ color: var(--tl-fg-1);
936
+ }
937
+
938
+ #codex-overleaf-panel .codex-set-btn--subtle {
939
+ background: transparent;
940
+ border-color: transparent;
941
+ color: var(--tl-fg-3);
942
+ }
943
+
944
+ #codex-overleaf-panel .codex-set-btn--subtle:hover {
945
+ background: var(--tl-surface-2);
946
+ border-color: var(--tl-border);
947
+ color: var(--tl-fg-1);
948
+ }
949
+
950
+ #codex-overleaf-panel .codex-set-btn--danger {
951
+ border-color: rgba(224, 121, 95, 0.4);
952
+ color: var(--tl-fail);
953
+ }
954
+
955
+ #codex-overleaf-panel .codex-set-btn--danger:hover {
956
+ background: rgba(224, 121, 95, 0.14);
957
+ border-color: var(--tl-fail);
958
+ color: var(--tl-fail);
959
+ }
960
+
961
+ /* Skills sub-page list: full width (the settings-screen list is indented under
962
+ its master toggle; on the dedicated sub-page it spans the panel). The shared
963
+ .codex-custom-instructions-panel layout already supplies flex/scroll. */
964
+ #codex-overleaf-panel .codex-skills-panel .codex-local-skill-list {
965
+ margin-left: 0;
966
+ padding-left: 0;
967
+ border-left: 0;
968
+ max-height: none;
969
+ }
970
+
971
+ #codex-overleaf-panel .codex-skills-divider {
972
+ height: 1px;
973
+ background: var(--tl-surface-2);
974
+ }
975
+
976
+ #codex-overleaf-panel .codex-diagnostics-result-head {
977
+ display: flex;
978
+ align-items: flex-start;
979
+ justify-content: space-between;
980
+ gap: 8px;
981
+ padding: 12px 12px 8px;
982
+ border-bottom: 1px solid var(--tl-border);
983
+ }
984
+
985
+ #codex-overleaf-panel .codex-diagnostics-result-title {
986
+ color: var(--tl-fg-1);
987
+ font-size: 14px;
988
+ font-weight: 650;
989
+ line-height: 1.35;
990
+ }
991
+
992
+ #codex-overleaf-panel .codex-diagnostics-result-subtitle {
993
+ margin-top: 2px;
994
+ color: var(--tl-fg-3);
995
+ font-size: 11px;
996
+ line-height: 1.35;
997
+ }
998
+
999
+ #codex-overleaf-panel .codex-diagnostics-result-head button {
1000
+ flex: 0 0 auto;
1001
+ width: 24px;
1002
+ height: 24px;
1003
+ }
1004
+
1005
+ #codex-overleaf-panel .codex-diagnostics-result-body {
1006
+ padding: 10px 12px 12px;
1007
+ color: var(--tl-fg-2);
1008
+ font-size: 12px;
1009
+ line-height: 1.45;
1010
+ }
1011
+
1012
+ #codex-overleaf-panel .codex-diagnostics-result-body p {
1013
+ margin: 0 0 8px;
1014
+ }
1015
+
1016
+ #codex-overleaf-panel .codex-diagnostics-result-body ul {
1017
+ margin: 8px 0;
1018
+ padding-left: 18px;
1019
+ }
1020
+
1021
+ #codex-overleaf-panel .codex-diagnostics-result-body li {
1022
+ margin: 4px 0;
1023
+ }
1024
+
1025
+ #codex-overleaf-panel .codex-diagnostics-next-step {
1026
+ color: var(--tl-accent);
1027
+ }
1028
+
1029
+ #codex-overleaf-panel .codex-install-command {
1030
+ margin-top: 10px;
1031
+ padding: 9px;
1032
+ border: 1px solid var(--tl-border-strong);
1033
+ border-radius: 7px;
1034
+ background: var(--tl-surface-0);
1035
+ }
1036
+
1037
+ #codex-overleaf-panel .codex-diagnostics-result[data-status="failed"] .codex-install-command {
1038
+ border-color: var(--tl-review);
1039
+ }
1040
+
1041
+ #codex-overleaf-panel .codex-install-command-label {
1042
+ margin-bottom: 6px;
1043
+ color: var(--tl-fg-3);
1044
+ font-size: 11px;
1045
+ }
1046
+
1047
+ #codex-overleaf-panel .codex-install-command code {
1048
+ display: block;
1049
+ overflow: auto;
1050
+ max-height: 90px;
1051
+ padding: 7px;
1052
+ border-radius: 6px;
1053
+ background: var(--tl-surface-2);
1054
+ color: var(--tl-accent);
1055
+ white-space: pre-wrap;
1056
+ word-break: break-word;
1057
+ font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1058
+ }
1059
+
1060
+ #codex-overleaf-panel .codex-install-command button {
1061
+ width: 100%;
1062
+ margin-top: 8px;
1063
+ border: 1px solid var(--tl-ok);
1064
+ border-radius: 6px;
1065
+ background: var(--tl-ok-wash);
1066
+ color: var(--tl-ok);
1067
+ padding: 6px 8px;
1068
+ font-size: 12px;
1069
+ }
1070
+
1071
+ #codex-overleaf-panel .codex-diagnostics-technical {
1072
+ border-top: 1px solid var(--tl-border);
1073
+ padding: 8px 12px 10px;
1074
+ }
1075
+
1076
+ #codex-overleaf-panel .codex-diagnostics-technical[hidden] {
1077
+ display: none;
1078
+ }
1079
+
1080
+ #codex-overleaf-panel .codex-diagnostics-technical summary {
1081
+ cursor: pointer;
1082
+ color: var(--tl-fg-3);
1083
+ font-size: 11px;
1084
+ }
1085
+
1086
+ #codex-overleaf-panel .codex-diagnostics-technical pre {
1087
+ overflow: auto;
1088
+ max-height: 220px;
1089
+ margin: 8px 0 0;
1090
+ color: var(--tl-fg-2);
1091
+ white-space: pre-wrap;
1092
+ word-break: break-word;
1093
+ font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
1094
+ }
1095
+
1096
+ #codex-overleaf-panel .codex-plugin-confirm {
1097
+ position: fixed;
1098
+ z-index: 2147483647;
1099
+ inset: 0 0 0 auto;
1100
+ display: flex;
1101
+ align-items: center;
1102
+ justify-content: center;
1103
+ box-sizing: border-box;
1104
+ width: var(--codex-overleaf-panel-width);
1105
+ height: 100vh;
1106
+ padding: 14px;
1107
+ background: rgba(12, 12, 12, 0.68);
1108
+ }
1109
+
1110
+ #codex-overleaf-panel .codex-plugin-confirm-card {
1111
+ width: 100%;
1112
+ max-height: min(520px, calc(100vh - 28px));
1113
+ overflow: hidden;
1114
+ border: 1px solid var(--tl-border-strong);
1115
+ border-radius: 8px;
1116
+ background: var(--tl-surface-1);
1117
+ box-shadow: 0 18px 40px rgba(0, 0, 0, 0.52);
1118
+ }
1119
+
1120
+ #codex-overleaf-panel .codex-plugin-confirm-head {
1121
+ display: flex;
1122
+ align-items: center;
1123
+ gap: 10px;
1124
+ padding: 14px 14px 12px;
1125
+ border-bottom: 1px solid var(--tl-border);
1126
+ }
1127
+
1128
+ #codex-overleaf-panel .codex-plugin-confirm-icon {
1129
+ width: 28px;
1130
+ height: 28px;
1131
+ object-fit: contain;
1132
+ }
1133
+
1134
+ #codex-overleaf-panel .codex-plugin-confirm-brand {
1135
+ color: var(--tl-accent);
1136
+ font-size: 11px;
1137
+ font-weight: 650;
1138
+ line-height: 1.2;
1139
+ }
1140
+
1141
+ #codex-overleaf-panel .codex-plugin-confirm-title {
1142
+ margin-top: 2px;
1143
+ color: var(--tl-fg-1);
1144
+ font-size: 14px;
1145
+ font-weight: 650;
1146
+ line-height: 1.35;
1147
+ }
1148
+
1149
+ #codex-overleaf-panel .codex-plugin-confirm-body {
1150
+ max-height: 300px;
1151
+ overflow: auto;
1152
+ padding: 12px 14px;
1153
+ color: var(--tl-fg-1);
1154
+ font-size: 12px;
1155
+ line-height: 1.5;
1156
+ white-space: pre-wrap;
1157
+ word-break: break-word;
1158
+ }
1159
+
1160
+ #codex-overleaf-panel .codex-plugin-confirm-actions {
1161
+ display: flex;
1162
+ justify-content: flex-end;
1163
+ gap: 8px;
1164
+ padding: 12px 14px 14px;
1165
+ border-top: 1px solid var(--tl-border);
1166
+ }
1167
+
1168
+ #codex-overleaf-panel .codex-plugin-confirm-actions button {
1169
+ min-width: 72px;
1170
+ height: 30px;
1171
+ border: 1px solid var(--tl-border-strong);
1172
+ border-radius: 6px;
1173
+ padding: 0 12px;
1174
+ font-weight: 650;
1175
+ }
1176
+
1177
+ #codex-overleaf-panel .codex-plugin-confirm-cancel {
1178
+ background: var(--tl-surface-2);
1179
+ color: var(--tl-fg-2);
1180
+ }
1181
+
1182
+ #codex-overleaf-panel .codex-plugin-confirm-confirm {
1183
+ border-color: var(--tl-ok);
1184
+ background: var(--tl-ok);
1185
+ color: var(--tl-on-solid);
1186
+ }
1187
+
1188
+ #codex-overleaf-panel .codex-plugin-confirm-confirm[data-destructive="true"] {
1189
+ border-color: var(--tl-fail);
1190
+ background: var(--tl-fail);
1191
+ }
1192
+
1193
+ #codex-overleaf-panel .codex-vscode-main {
1194
+ display: flex;
1195
+ flex: 1 1 auto;
1196
+ flex-direction: column;
1197
+ min-height: 0;
1198
+ overflow: hidden;
1199
+ padding: 8px 10px 0;
1200
+ }
1201
+
1202
+ #codex-overleaf-panel .codex-task-section {
1203
+ flex: 0 0 auto;
1204
+ max-height: min(34vh, 220px);
1205
+ overflow-y: auto;
1206
+ border-bottom: 1px solid var(--tl-border);
1207
+ padding-bottom: 8px;
1208
+ }
1209
+
1210
+ #codex-overleaf-panel .codex-section-head {
1211
+ display: flex;
1212
+ align-items: center;
1213
+ justify-content: space-between;
1214
+ min-height: 24px;
1215
+ color: var(--tl-fg-3);
1216
+ font-size: 12px;
1217
+ font-weight: 600;
1218
+ }
1219
+
1220
+ #codex-overleaf-panel .codex-session-list {
1221
+ display: grid;
1222
+ gap: 1px;
1223
+ }
1224
+
1225
+ #codex-overleaf-panel .codex-session-row {
1226
+ display: grid;
1227
+ grid-template-columns: minmax(0, 1fr) 24px 24px;
1228
+ align-items: center;
1229
+ min-height: 26px;
1230
+ border-radius: 4px;
1231
+ padding: 0 2px;
1232
+ }
1233
+
1234
+ #codex-overleaf-panel .codex-session-row[data-active="true"] {
1235
+ background: var(--tl-accent-wash);
1236
+ box-shadow: inset 2px 0 0 var(--tl-accent);
1237
+ }
1238
+
1239
+ #codex-overleaf-panel .codex-session-row[data-running="true"] .codex-session-row-title::before {
1240
+ content: "";
1241
+ display: inline-block;
1242
+ width: 8px;
1243
+ height: 8px;
1244
+ margin-right: 6px;
1245
+ border: 2px solid rgba(77, 208, 190, 0.25);
1246
+ border-top-color: var(--tl-accent);
1247
+ border-radius: 50%;
1248
+ vertical-align: -1px;
1249
+ animation: codex-session-spin 800ms linear infinite;
1250
+ }
1251
+
1252
+ @keyframes codex-session-spin {
1253
+ to {
1254
+ transform: rotate(360deg);
1255
+ }
1256
+ }
1257
+
1258
+ #codex-overleaf-panel .codex-session-switch {
1259
+ display: grid;
1260
+ grid-template-columns: minmax(0, 1fr) auto;
1261
+ align-items: center;
1262
+ min-width: 0;
1263
+ min-height: 26px;
1264
+ gap: 8px;
1265
+ border-radius: 4px;
1266
+ padding: 3px 4px;
1267
+ text-align: left;
1268
+ }
1269
+
1270
+ #codex-overleaf-panel .codex-session-row-title {
1271
+ overflow: hidden;
1272
+ color: var(--tl-fg-2);
1273
+ text-overflow: ellipsis;
1274
+ white-space: nowrap;
1275
+ }
1276
+
1277
+ #codex-overleaf-panel .codex-session-row time {
1278
+ color: var(--tl-fg-3);
1279
+ font-size: 12px;
1280
+ white-space: nowrap;
1281
+ }
1282
+
1283
+ #codex-overleaf-panel .codex-session-title-input {
1284
+ grid-column: 1 / 2;
1285
+ min-width: 0;
1286
+ min-height: 26px;
1287
+ border: 1px solid var(--tl-ok);
1288
+ border-radius: 4px;
1289
+ background: var(--tl-surface-1);
1290
+ color: var(--tl-fg-1);
1291
+ font: inherit;
1292
+ padding: 3px 6px;
1293
+ }
1294
+
1295
+ #codex-overleaf-panel .codex-session-title-input[hidden] {
1296
+ display: none;
1297
+ }
1298
+
1299
+ /* Row controls are visible at rest (was hover-only / rename fully hidden), so
1300
+ delete + rename are discoverable on touch / keyboard / no-hover. */
1301
+ #codex-overleaf-panel .codex-session-rename,
1302
+ #codex-overleaf-panel .codex-session-delete {
1303
+ width: 24px;
1304
+ height: 24px;
1305
+ border-radius: 4px;
1306
+ color: var(--tl-fg-3);
1307
+ opacity: 0.7;
1308
+ }
1309
+
1310
+ #codex-overleaf-panel .codex-session-rename {
1311
+ font-size: 12px;
1312
+ }
1313
+
1314
+ #codex-overleaf-panel .codex-session-row:hover .codex-session-rename,
1315
+ #codex-overleaf-panel .codex-session-rename:focus-visible,
1316
+ #codex-overleaf-panel .codex-session-row:hover .codex-session-delete,
1317
+ #codex-overleaf-panel .codex-session-delete:focus-visible,
1318
+ #codex-overleaf-panel .codex-session-row[data-active="true"] .codex-session-rename,
1319
+ #codex-overleaf-panel .codex-session-row[data-active="true"] .codex-session-delete {
1320
+ opacity: 1;
1321
+ }
1322
+
1323
+ #codex-overleaf-panel .codex-session-rename:hover {
1324
+ color: var(--tl-fg-1);
1325
+ }
1326
+
1327
+ /* Destructive control gets a distinct red hover so it can't be mistaken for the
1328
+ rename pencil beside it. */
1329
+ #codex-overleaf-panel .codex-session-delete:hover {
1330
+ color: var(--tl-fail);
1331
+ }
1332
+
1333
+ #codex-overleaf-panel .codex-session-delete:disabled {
1334
+ cursor: not-allowed;
1335
+ opacity: 0.25;
1336
+ }
1337
+
1338
+ #codex-overleaf-panel .codex-session-empty-hint {
1339
+ padding: 6px 6px 8px;
1340
+ color: var(--tl-fg-4);
1341
+ font-size: 12px;
1342
+ line-height: 1.4;
1343
+ }
1344
+
1345
+ #codex-overleaf-panel .codex-view-all {
1346
+ margin-top: 4px;
1347
+ min-height: 24px;
1348
+ border-radius: 4px;
1349
+ color: var(--tl-accent);
1350
+ padding: 2px 4px;
1351
+ text-align: left;
1352
+ }
1353
+
1354
+ /* ---------------------------------------------------------------------------
1355
+ Panel design tokens (the theme system). A 4-step text ladder (was 8 near-
1356
+ identical grays) + a 3-step surface stack + borders + a single accent and
1357
+ semantic state colors. The dark values below are the baseline; the
1358
+ [data-theme="light"] block remaps them for light mode. Theme selection is
1359
+ driven by data-theme on the panel root (themeController.js resolves
1360
+ dark/light/auto). The whole panel reads these tokens so a theme is just a
1361
+ value swap — no selector depends on the literals. */
1362
+ #codex-overleaf-panel {
1363
+ --tl-fg-1: #e4e4e4; /* primary prose / answer / strong labels */
1364
+ --tl-fg-2: #b7b7b7; /* body text / activity titles / controls */
1365
+ --tl-fg-3: #8a8a8a; /* meta / summaries / captions */
1366
+ --tl-fg-4: #6b6b6b; /* deep-muted / idle / placeholders */
1367
+ --tl-surface-0: #181818; /* outermost panel background */
1368
+ --tl-surface-1: #1e1e1e; /* primary content surface */
1369
+ --tl-surface-2: #232323; /* elevated surfaces / popovers / hover fills */
1370
+ --tl-hover: #2a2d2e; /* generic interactive hover fill */
1371
+ --tl-border: #2a2a2a; /* dividers / resting control borders */
1372
+ --tl-border-strong: #3a3a3a; /* elevated popover / tray borders */
1373
+ --tl-accent: #6f9fd8;
1374
+ --tl-accent-wash: rgba(111, 159, 216, 0.14); /* selected/active accent fill */
1375
+ --tl-ok-wash: rgba(137, 209, 133, 0.14);
1376
+ --tl-fail-wash: rgba(224, 121, 95, 0.16);
1377
+ --tl-review-wash: rgba(215, 186, 125, 0.16);
1378
+ --tl-run: #4ec9b0;
1379
+ --tl-ok: #89d185;
1380
+ --tl-fail: #e0795f;
1381
+ --tl-review: #d7ba7d;
1382
+ --tl-run-wash: rgba(78, 201, 176, 0.14);
1383
+ --tl-on-solid: #16181a; /* ink on solid semantic fills (pastel in dark) */
1384
+ --tl-diff-add-fg: #89d185; /* added-line code text; darkened in light */
1385
+ --tl-r-sm: 4px;
1386
+ --tl-r-md: 8px;
1387
+ }
1388
+
1389
+ /* Light theme — remaps the token values for a light surface. Reached when
1390
+ themeController sets data-theme="light" (explicit Light, or Auto resolving to
1391
+ light via prefers-color-scheme). Dark needs no override (it is the baseline
1392
+ above). State colors are darkened for AA contrast on light surfaces. */
1393
+ #codex-overleaf-panel[data-theme="light"] {
1394
+ --tl-fg-1: #1f2328;
1395
+ --tl-fg-2: #3d4651;
1396
+ --tl-fg-3: #6a7280;
1397
+ --tl-fg-4: #9aa3ad;
1398
+ --tl-surface-0: #f3f4f6;
1399
+ --tl-surface-1: #ffffff;
1400
+ --tl-surface-2: #eef0f3;
1401
+ --tl-hover: #e7eaee;
1402
+ --tl-border: #d7dbe0;
1403
+ --tl-border-strong: #c4c9d0;
1404
+ --tl-accent: #2f6fb0;
1405
+ --tl-accent-wash: rgba(47, 111, 176, 0.12);
1406
+ --tl-ok-wash: rgba(46, 158, 84, 0.12);
1407
+ --tl-fail-wash: rgba(192, 57, 43, 0.10);
1408
+ --tl-review-wash: rgba(184, 134, 11, 0.12);
1409
+ --tl-run: #1f9c86;
1410
+ --tl-ok: #2e9e54;
1411
+ --tl-fail: #c0392b;
1412
+ --tl-review: #b8860b;
1413
+ --tl-run-wash: rgba(31, 156, 134, 0.12);
1414
+ --tl-on-solid: #ffffff; /* semantic fills are dark/saturated in light */
1415
+ --tl-diff-add-fg: #1a7f37; /* AA-safe green for 11px mono on light wash */
1416
+ }
1417
+
1418
+ @keyframes tl-fade-in { from { opacity: 0; } to { opacity: 1; } }
1419
+ @keyframes tl-slide-in {
1420
+ from { opacity: 0; transform: translateY(3px); }
1421
+ to { opacity: 1; transform: none; }
1422
+ }
1423
+ @media (prefers-reduced-motion: reduce) {
1424
+ /* The universal selector does not match pseudo-elements, and every spinner
1425
+ ring lives on a ::before — include them or the rings keep spinning. */
1426
+ #codex-overleaf-panel *,
1427
+ #codex-overleaf-panel *::before,
1428
+ #codex-overleaf-panel *::after {
1429
+ animation: none !important;
1430
+ transition-duration: 0.01ms !important;
1431
+ scroll-behavior: auto !important;
1432
+ }
1433
+ }
1434
+
1435
+ #codex-overleaf-panel .codex-thread-section {
1436
+ position: relative; /* positioning context for the floating jump button */
1437
+ display: flex;
1438
+ flex: 1 1 auto;
1439
+ flex-direction: column;
1440
+ min-height: 0;
1441
+ margin-top: 14px;
1442
+ }
1443
+
1444
+ /* Floating "jump to latest" affordance — shown only while detached. */
1445
+ #codex-overleaf-panel .tl-jump-latest {
1446
+ position: absolute;
1447
+ right: 12px;
1448
+ bottom: 12px;
1449
+ z-index: 5;
1450
+ display: inline-flex;
1451
+ align-items: center;
1452
+ gap: 6px;
1453
+ border: 1px solid var(--tl-border);
1454
+ border-radius: 14px;
1455
+ background: var(--tl-surface-2);
1456
+ color: var(--tl-fg-2);
1457
+ padding: 4px 10px;
1458
+ font-size: 11px;
1459
+ cursor: pointer;
1460
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
1461
+ animation: tl-fade-in 120ms ease-out;
1462
+ }
1463
+
1464
+ /* button.hidden must win over the display above (an id+class display rule
1465
+ out-specifies the UA [hidden] rule), or the affordance never hides. */
1466
+ #codex-overleaf-panel .tl-jump-latest[hidden] {
1467
+ display: none;
1468
+ }
1469
+
1470
+ #codex-overleaf-panel .tl-jump-latest:hover {
1471
+ color: var(--tl-fg-1);
1472
+ border-color: var(--tl-border-strong);
1473
+ }
1474
+
1475
+ /* Active-session bar: the title on the left, rename + delete on the right, so
1476
+ the session you are working in can be renamed/deleted in place. */
1477
+ #codex-overleaf-panel .codex-thread-title {
1478
+ display: flex;
1479
+ align-items: center;
1480
+ gap: 6px;
1481
+ min-height: 24px;
1482
+ font-size: 12px;
1483
+ }
1484
+
1485
+ #codex-overleaf-panel .codex-thread-title-text {
1486
+ flex: 1 1 auto;
1487
+ min-width: 0;
1488
+ overflow: hidden;
1489
+ color: var(--tl-fg-3);
1490
+ text-overflow: ellipsis;
1491
+ white-space: nowrap;
1492
+ }
1493
+
1494
+ #codex-overleaf-panel .codex-thread-title-input {
1495
+ flex: 1 1 auto;
1496
+ min-width: 0;
1497
+ box-sizing: border-box;
1498
+ height: 22px;
1499
+ border: 1px solid var(--tl-accent);
1500
+ border-radius: var(--tl-r-sm);
1501
+ background: var(--tl-surface-1);
1502
+ color: var(--tl-fg-1);
1503
+ padding: 0 6px;
1504
+ font-size: 12px;
1505
+ outline: none;
1506
+ }
1507
+
1508
+ #codex-overleaf-panel .codex-thread-title-input[hidden] {
1509
+ display: none;
1510
+ }
1511
+
1512
+ #codex-overleaf-panel .codex-thread-title-actions {
1513
+ display: flex;
1514
+ flex: 0 0 auto;
1515
+ gap: 2px;
1516
+ }
1517
+
1518
+ #codex-overleaf-panel .codex-thread-title[data-editing="true"] .codex-thread-title-actions {
1519
+ display: none;
1520
+ }
1521
+
1522
+ #codex-overleaf-panel .codex-thread-title-action {
1523
+ width: 22px;
1524
+ height: 22px;
1525
+ border-radius: var(--tl-r-sm);
1526
+ color: var(--tl-fg-4);
1527
+ font-size: 12px;
1528
+ opacity: 0.8;
1529
+ }
1530
+
1531
+ #codex-overleaf-panel .codex-thread-title-action:hover {
1532
+ color: var(--tl-fg-1);
1533
+ opacity: 1;
1534
+ }
1535
+
1536
+ #codex-overleaf-panel .codex-thread-title-action--delete:hover {
1537
+ color: var(--tl-fail);
1538
+ }
1539
+
1540
+ #codex-overleaf-panel .codex-thread-title-action:disabled {
1541
+ cursor: not-allowed;
1542
+ opacity: 0.3;
1543
+ }
1544
+
1545
+ /* Session dropdown: the active-session title doubles as the switcher trigger;
1546
+ the menu lists every saved session plus New session. */
1547
+ #codex-overleaf-panel .codex-thread-title {
1548
+ position: relative;
1549
+ }
1550
+
1551
+ #codex-overleaf-panel .codex-thread-title-trigger {
1552
+ display: inline-flex;
1553
+ flex: 1 1 auto;
1554
+ align-items: center;
1555
+ gap: 5px;
1556
+ min-width: 0;
1557
+ border-radius: var(--tl-r-sm);
1558
+ padding: 1px 4px;
1559
+ text-align: left;
1560
+ }
1561
+
1562
+ #codex-overleaf-panel .codex-thread-title-trigger:hover {
1563
+ background: var(--tl-hover);
1564
+ }
1565
+
1566
+ #codex-overleaf-panel .codex-thread-title-chevron {
1567
+ flex: 0 0 auto;
1568
+ color: var(--tl-fg-4);
1569
+ font-size: 9px;
1570
+ }
1571
+
1572
+ #codex-overleaf-panel .codex-session-menu {
1573
+ position: absolute;
1574
+ top: calc(100% + 4px);
1575
+ left: 0;
1576
+ right: 0;
1577
+ z-index: 30;
1578
+ display: grid;
1579
+ gap: 2px;
1580
+ max-height: 260px;
1581
+ overflow-y: auto;
1582
+ border: 1px solid var(--tl-border-strong);
1583
+ border-radius: var(--tl-r-md);
1584
+ background: var(--tl-surface-2);
1585
+ padding: 4px;
1586
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
1587
+ animation: tl-fade-in 120ms ease-out;
1588
+ }
1589
+
1590
+ #codex-overleaf-panel .codex-session-menu[hidden] {
1591
+ display: none;
1592
+ }
1593
+
1594
+ #codex-overleaf-panel .codex-session-menu-item {
1595
+ display: flex;
1596
+ align-items: center;
1597
+ gap: 8px;
1598
+ min-width: 0;
1599
+ border-radius: var(--tl-r-sm);
1600
+ padding: 5px 8px;
1601
+ text-align: left;
1602
+ }
1603
+
1604
+ #codex-overleaf-panel .codex-session-menu-item[data-active="true"] {
1605
+ background: var(--tl-accent-wash);
1606
+ }
1607
+
1608
+ #codex-overleaf-panel .codex-session-menu-item[data-running="true"] .codex-session-menu-item-title::before {
1609
+ content: "";
1610
+ display: inline-block;
1611
+ width: 7px;
1612
+ height: 7px;
1613
+ margin-right: 6px;
1614
+ border: 2px solid rgba(78, 201, 176, 0.25);
1615
+ border-top-color: var(--tl-run);
1616
+ border-radius: 50%;
1617
+ vertical-align: -1px;
1618
+ animation: codex-session-spin 800ms linear infinite;
1619
+ }
1620
+
1621
+ #codex-overleaf-panel .codex-session-menu-item-title {
1622
+ flex: 1 1 auto;
1623
+ min-width: 0;
1624
+ overflow: hidden;
1625
+ color: var(--tl-fg-1);
1626
+ font-size: 12px;
1627
+ text-overflow: ellipsis;
1628
+ white-space: nowrap;
1629
+ }
1630
+
1631
+ #codex-overleaf-panel .codex-session-menu-item-time {
1632
+ flex: 0 0 auto;
1633
+ color: var(--tl-fg-3);
1634
+ font-size: 11px;
1635
+ white-space: nowrap;
1636
+ }
1637
+
1638
+ #codex-overleaf-panel .codex-session-menu-new {
1639
+ border-top: 1px solid var(--tl-border);
1640
+ border-radius: 0 0 var(--tl-r-sm) var(--tl-r-sm);
1641
+ margin-top: 2px;
1642
+ padding: 6px 8px;
1643
+ color: var(--tl-accent);
1644
+ font-size: 12px;
1645
+ text-align: left;
1646
+ }
1647
+
1648
+ #codex-overleaf-panel .col-log {
1649
+ flex: 1 1 auto;
1650
+ min-height: 0;
1651
+ overflow-y: auto;
1652
+ padding-right: 2px;
1653
+ color: var(--tl-fg-2);
1654
+ scroll-behavior: smooth;
1655
+ scrollbar-width: thin;
1656
+ scrollbar-color: var(--tl-border-strong) transparent;
1657
+ overflow-anchor: none; /* the JS scroll engine owns follow behavior */
1658
+ }
1659
+
1660
+ #codex-overleaf-panel ::-webkit-scrollbar {
1661
+ width: 8px;
1662
+ height: 8px;
1663
+ }
1664
+
1665
+ #codex-overleaf-panel ::-webkit-scrollbar-thumb {
1666
+ background: var(--tl-border-strong);
1667
+ border-radius: 4px;
1668
+ }
1669
+
1670
+ #codex-overleaf-panel ::-webkit-scrollbar-thumb:hover {
1671
+ background: var(--tl-border-strong);
1672
+ }
1673
+
1674
+ #codex-overleaf-panel ::-webkit-scrollbar-track {
1675
+ background: transparent;
1676
+ }
1677
+
1678
+ #codex-overleaf-panel .empty-runs {
1679
+ display: grid;
1680
+ min-height: 140px;
1681
+ place-content: center;
1682
+ gap: 8px;
1683
+ color: var(--tl-fg-3);
1684
+ text-align: center;
1685
+ animation: tl-fade-in 160ms ease-out;
1686
+ }
1687
+
1688
+ #codex-overleaf-panel .empty-runs-hint {
1689
+ color: var(--tl-fg-4);
1690
+ font-size: 11px;
1691
+ }
1692
+
1693
+ #codex-overleaf-panel .codex-empty-icon {
1694
+ display: block;
1695
+ width: 64px;
1696
+ height: 64px;
1697
+ margin: 0 auto;
1698
+ object-fit: contain;
1699
+ filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.24));
1700
+ }
1701
+
1702
+ #codex-overleaf-panel .log-line + .log-line,
1703
+ #codex-overleaf-panel .transcript-turn + .transcript-turn,
1704
+ #codex-overleaf-panel .log-line + .transcript-turn,
1705
+ #codex-overleaf-panel .transcript-turn + .log-line {
1706
+ margin-top: 8px;
1707
+ }
1708
+
1709
+ #codex-overleaf-panel .log-line {
1710
+ border-left: 2px solid var(--tl-border-strong);
1711
+ color: var(--tl-fg-3);
1712
+ padding: 4px 0 4px 8px;
1713
+ }
1714
+
1715
+ #codex-overleaf-panel .run-card {
1716
+ border: 0;
1717
+ border-radius: 0;
1718
+ background: transparent;
1719
+ overflow: visible;
1720
+ }
1721
+
1722
+ #codex-overleaf-panel .transcript-turn {
1723
+ border-bottom: 1px solid var(--tl-border);
1724
+ padding: 8px 0 10px;
1725
+ }
1726
+
1727
+ #codex-overleaf-panel .transcript-turn:last-child {
1728
+ border-bottom: 0;
1729
+ }
1730
+
1731
+ #codex-overleaf-panel .transcript-turn-main {
1732
+ min-width: 0;
1733
+ }
1734
+
1735
+ #codex-overleaf-panel .run-prompt {
1736
+ box-sizing: border-box;
1737
+ border: 1px solid var(--tl-border-strong);
1738
+ border-radius: 8px;
1739
+ background: var(--tl-surface-1);
1740
+ color: var(--tl-fg-1);
1741
+ padding: 7px 9px;
1742
+ white-space: pre-wrap;
1743
+ word-break: break-word;
1744
+ }
1745
+
1746
+ #codex-overleaf-panel .run-turn-meta {
1747
+ display: flex;
1748
+ align-items: center;
1749
+ gap: 8px;
1750
+ min-height: 22px;
1751
+ margin: 6px 0 2px;
1752
+ color: var(--tl-fg-3);
1753
+ font-size: 11px;
1754
+ }
1755
+
1756
+ #codex-overleaf-panel .run-turn-meta [data-run-accept] {
1757
+ margin-left: auto;
1758
+ }
1759
+
1760
+ /* When Accept All is hidden, the Undo button takes the right-aligned slot. */
1761
+ #codex-overleaf-panel .run-turn-meta [data-run-accept][hidden] + [data-run-undo] {
1762
+ margin-left: auto;
1763
+ }
1764
+
1765
+ #codex-overleaf-panel .run-turn-meta [data-run-accept],
1766
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-confirm],
1767
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-cancel] {
1768
+ min-height: 30px;
1769
+ border-radius: 4px;
1770
+ padding: 3px 11px;
1771
+ font-size: 12px;
1772
+ font-weight: 700;
1773
+ }
1774
+
1775
+ #codex-overleaf-panel .run-turn-meta [data-run-accept],
1776
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-confirm] {
1777
+ border: 1px solid var(--tl-accent);
1778
+ background: var(--tl-accent);
1779
+ color: var(--tl-on-solid);
1780
+ box-shadow: 0 0 0 1px rgba(76, 143, 222, 0.34), 0 4px 12px rgba(0, 0, 0, 0.24);
1781
+ }
1782
+
1783
+ #codex-overleaf-panel .run-turn-meta [data-run-accept]:hover,
1784
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-confirm]:hover {
1785
+ background: var(--tl-accent);
1786
+ }
1787
+
1788
+ #codex-overleaf-panel .run-turn-meta [data-run-accept]:disabled,
1789
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-confirm]:disabled {
1790
+ opacity: 0.65;
1791
+ }
1792
+
1793
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-cancel] {
1794
+ border: 1px solid var(--tl-border-strong);
1795
+ background: var(--tl-hover);
1796
+ color: var(--tl-fg-1);
1797
+ }
1798
+
1799
+ #codex-overleaf-panel .run-turn-meta [data-run-accept-cancel]:hover {
1800
+ background: var(--tl-border-strong);
1801
+ }
1802
+
1803
+ #codex-overleaf-panel [data-run-undo] {
1804
+ min-height: 30px;
1805
+ border: 1px solid var(--tl-review);
1806
+ border-radius: 4px;
1807
+ background: var(--tl-review);
1808
+ color: var(--tl-on-solid);
1809
+ padding: 3px 11px;
1810
+ box-shadow: 0 0 0 1px rgba(240, 136, 62, 0.34), 0 4px 12px rgba(0, 0, 0, 0.24);
1811
+ font-size: 12px;
1812
+ font-weight: 700;
1813
+ }
1814
+
1815
+ #codex-overleaf-panel [data-run-undo]:hover {
1816
+ background: var(--tl-review);
1817
+ }
1818
+
1819
+ #codex-overleaf-panel [data-run-undo]:disabled {
1820
+ opacity: 0.65;
1821
+ }
1822
+
1823
+ #codex-overleaf-panel .run-status {
1824
+ flex: 0 0 auto;
1825
+ color: var(--tl-accent) !important;
1826
+ font-size: 11px !important;
1827
+ white-space: nowrap;
1828
+ }
1829
+
1830
+ #codex-overleaf-panel .transcript-turn[data-status="running"] .run-status {
1831
+ color: var(--tl-run) !important;
1832
+ }
1833
+
1834
+ #codex-overleaf-panel .transcript-turn[data-status="failed"] .run-status {
1835
+ color: var(--tl-fail) !important;
1836
+ }
1837
+
1838
+ #codex-overleaf-panel .transcript-turn[data-status="abandoned_after_navigation"] .run-status {
1839
+ color: var(--tl-fail) !important;
1840
+ }
1841
+
1842
+ #codex-overleaf-panel .transcript-turn[data-status="needs_review_after_navigation"] .run-status {
1843
+ color: var(--tl-review) !important;
1844
+ }
1845
+
1846
+ #codex-overleaf-panel .run-activity-list {
1847
+ display: grid;
1848
+ gap: 0;
1849
+ margin-top: 2px;
1850
+ }
1851
+
1852
+ #codex-overleaf-panel .run-activity {
1853
+ display: grid;
1854
+ grid-template-columns: 14px minmax(0, 1fr);
1855
+ /* Titles wrap (v1.7.7) — align the glyph and timestamp to the first line
1856
+ instead of floating mid-paragraph on multi-line rows. */
1857
+ align-items: start;
1858
+ gap: 6px;
1859
+ min-height: 20px;
1860
+ color: var(--tl-fg-2);
1861
+ padding: 1px 0;
1862
+ /* transform+opacity only — composited, never reflows neighbors */
1863
+ animation: tl-slide-in 140ms ease-out;
1864
+ }
1865
+
1866
+ /* Typographic status glyph (Option B). The .run-activity-dot element is kept
1867
+ (selector/snapshot tests still match it) but is now a glyph slot whose
1868
+ ::before content is driven by data-status: idle ·, completed ✓, failed ✕.
1869
+ Running uses a CSS-drawn arc ring (v1.7.6): the old ◐ character spun
1870
+ around its font bounding box, not its visual center, so it wobbled. */
1871
+ #codex-overleaf-panel .run-activity-dot {
1872
+ justify-self: center;
1873
+ margin-top: 2px;
1874
+ display: inline-flex;
1875
+ align-items: center;
1876
+ justify-content: center;
1877
+ width: 14px;
1878
+ height: 14px;
1879
+ font-size: 11px;
1880
+ line-height: 1;
1881
+ background: transparent;
1882
+ }
1883
+
1884
+ #codex-overleaf-panel .run-activity-dot::before {
1885
+ content: "·";
1886
+ color: var(--tl-fg-4);
1887
+ }
1888
+
1889
+ #codex-overleaf-panel .run-activity[data-status="running"] .run-activity-dot::before {
1890
+ content: "";
1891
+ display: block;
1892
+ box-sizing: border-box;
1893
+ width: 10px;
1894
+ height: 10px;
1895
+ border: 1.5px solid rgba(78, 201, 176, 0.28);
1896
+ border-top-color: var(--tl-run);
1897
+ border-radius: 50%;
1898
+ animation: tl-spin 800ms linear infinite;
1899
+ }
1900
+
1901
+ /* A running-status line only spins while it is the run's live tail. Once the
1902
+ run itself settled (background mirror wrap-up, restored history) or a newer
1903
+ activity line landed below it, the historical "started X" line must stop
1904
+ spinning forever and settle to the neutral dot. */
1905
+ #codex-overleaf-panel .transcript-turn:not([data-status="running"]) .run-activity[data-status="running"] .run-activity-dot::before,
1906
+ #codex-overleaf-panel .run-activity[data-status="running"]:has(~ .run-activity) .run-activity-dot::before {
1907
+ content: "·";
1908
+ display: inline;
1909
+ width: auto;
1910
+ height: auto;
1911
+ border: none;
1912
+ animation: none;
1913
+ color: var(--tl-fg-4);
1914
+ }
1915
+
1916
+ #codex-overleaf-panel .run-activity[data-status="completed"] .run-activity-dot::before {
1917
+ content: "✓";
1918
+ color: var(--tl-ok);
1919
+ }
1920
+
1921
+ #codex-overleaf-panel .run-activity[data-status="failed"] .run-activity-dot::before {
1922
+ content: "✕";
1923
+ color: var(--tl-fail);
1924
+ }
1925
+
1926
+ @keyframes tl-spin { to { transform: rotate(360deg); } }
1927
+
1928
+ #codex-overleaf-panel .run-activity[data-kind="checkpoint"] {
1929
+ grid-template-columns: minmax(0, 1fr);
1930
+ min-height: 18px;
1931
+ margin: 5px 0;
1932
+ color: var(--tl-fg-3);
1933
+ }
1934
+
1935
+ #codex-overleaf-panel .run-activity[data-kind="checkpoint"] .run-activity-dot {
1936
+ display: none;
1937
+ }
1938
+
1939
+ #codex-overleaf-panel .run-activity[data-kind="checkpoint"] .run-activity-title {
1940
+ display: flex;
1941
+ align-items: center;
1942
+ gap: 8px;
1943
+ color: var(--tl-fg-3);
1944
+ font-size: 11px;
1945
+ }
1946
+
1947
+ #codex-overleaf-panel .run-activity[data-kind="checkpoint"] .run-activity-title::before,
1948
+ #codex-overleaf-panel .run-activity[data-kind="checkpoint"] .run-activity-title::after {
1949
+ content: "";
1950
+ flex: 1;
1951
+ height: 1px;
1952
+ background: var(--tl-border);
1953
+ }
1954
+
1955
+ #codex-overleaf-panel .run-activity-title {
1956
+ min-width: 0;
1957
+ color: var(--tl-fg-2);
1958
+ font-size: 12px;
1959
+ line-height: 1.45;
1960
+ /* v1.7.7: activity narration must be readable in full — wrap instead of
1961
+ the old single-line ellipsis (which hid text at every panel width).
1962
+ `anywhere` keeps long paths/commands from forcing horizontal overflow. */
1963
+ white-space: normal;
1964
+ overflow-wrap: anywhere;
1965
+ }
1966
+
1967
+ #codex-overleaf-panel .run-activity[data-subagent="true"] {
1968
+ margin-left: 8px;
1969
+ padding-left: 8px;
1970
+ border-left: 2px solid var(--tl-border-strong);
1971
+ }
1972
+
1973
+ #codex-overleaf-panel .run-activity[data-status="warning"] .run-activity-title,
1974
+ #codex-overleaf-panel .run-activity[data-status="failed"] .run-activity-title {
1975
+ display: -webkit-box;
1976
+ -webkit-line-clamp: 2;
1977
+ /* line-clamp only truncates with overflow:hidden — the base title rule no
1978
+ longer provides it since narration wraps (v1.7.7). */
1979
+ overflow: hidden;
1980
+ -webkit-box-orient: vertical;
1981
+ white-space: normal;
1982
+ }
1983
+
1984
+ #codex-overleaf-panel .run-activity-time {
1985
+ display: none;
1986
+ }
1987
+
1988
+ #codex-overleaf-panel .run-stream {
1989
+ margin: 6px 0 2px;
1990
+ color: var(--tl-fg-1);
1991
+ border-left: 2px solid var(--tl-border);
1992
+ padding-left: 9px;
1993
+ animation: tl-fade-in 140ms ease-out;
1994
+ }
1995
+
1996
+ /* Role-colored left rule distinguishes the assistant answer from reasoning. */
1997
+ #codex-overleaf-panel .run-stream[data-stream-role="assistant"] {
1998
+ border-left-color: var(--tl-accent);
1999
+ }
2000
+
2001
+ #codex-overleaf-panel .run-stream[data-stream-role="reasoning"] {
2002
+ border-left-color: var(--tl-fg-4);
2003
+ }
2004
+
2005
+ #codex-overleaf-panel .run-stream-text {
2006
+ white-space: pre-wrap;
2007
+ word-break: break-word;
2008
+ font-size: 12px;
2009
+ line-height: 1.48;
2010
+ }
2011
+
2012
+ #codex-overleaf-panel .run-stream[data-stream-role="reasoning"] .run-stream-text {
2013
+ color: var(--tl-fg-3);
2014
+ }
2015
+
2016
+ #codex-overleaf-panel .codex-line-reference {
2017
+ border: 0;
2018
+ background: transparent;
2019
+ color: var(--tl-accent);
2020
+ padding: 0;
2021
+ font: inherit;
2022
+ line-height: inherit;
2023
+ text-decoration: underline;
2024
+ text-underline-offset: 2px;
2025
+ cursor: pointer;
2026
+ }
2027
+
2028
+ #codex-overleaf-panel .codex-line-reference:hover,
2029
+ #codex-overleaf-panel .codex-line-reference:focus-visible {
2030
+ background: transparent;
2031
+ color: var(--tl-accent);
2032
+ }
2033
+
2034
+ #codex-overleaf-panel .codex-line-reference:focus-visible {
2035
+ outline: 1px solid var(--tl-accent);
2036
+ outline-offset: 2px;
2037
+ border-radius: 2px;
2038
+ }
2039
+
2040
+ #codex-overleaf-panel .codex-line-reference:disabled {
2041
+ cursor: progress;
2042
+ opacity: 0.72;
2043
+ }
2044
+
2045
+ #codex-overleaf-panel .codex-line-reference[data-status="failed"] {
2046
+ color: var(--tl-fail);
2047
+ }
2048
+
2049
+ #codex-overleaf-panel .run-process {
2050
+ margin-top: 4px;
2051
+ }
2052
+
2053
+ /* Sticky current-step header (Option B). Pins to the top of the scroll
2054
+ container while a run's steps stream past, so the user can always see the
2055
+ run's live state + elapsed without scrolling to it. The status glyph
2056
+ (::before) mirrors the card's data-status; the chevron (::after) is the
2057
+ expand/collapse affordance. */
2058
+ #codex-overleaf-panel .run-process summary {
2059
+ position: sticky;
2060
+ top: 0;
2061
+ z-index: 2;
2062
+ display: flex;
2063
+ align-items: center;
2064
+ gap: 6px;
2065
+ cursor: pointer;
2066
+ color: var(--tl-fg-3);
2067
+ font-size: 12px;
2068
+ list-style: none;
2069
+ user-select: none;
2070
+ background: var(--tl-surface-1);
2071
+ padding: 3px 2px;
2072
+ border-radius: var(--tl-r-sm);
2073
+ }
2074
+
2075
+ #codex-overleaf-panel .run-process summary::-webkit-details-marker {
2076
+ display: none;
2077
+ }
2078
+
2079
+ /* Status glyph before the summary, driven by the run card's data-status. */
2080
+ #codex-overleaf-panel .run-process summary::before {
2081
+ content: "·";
2082
+ color: var(--tl-fg-4);
2083
+ font-size: 11px;
2084
+ line-height: 1;
2085
+ }
2086
+
2087
+ #codex-overleaf-panel .transcript-turn[data-status="running"] .run-process summary::before {
2088
+ content: "";
2089
+ display: inline-block;
2090
+ box-sizing: border-box;
2091
+ width: 10px;
2092
+ height: 10px;
2093
+ border: 1.5px solid rgba(78, 201, 176, 0.28);
2094
+ border-top-color: var(--tl-run);
2095
+ border-radius: 50%;
2096
+ animation: tl-spin 800ms linear infinite;
2097
+ }
2098
+
2099
+ /* Indeterminate scan line (v1.7.7): while the run is working, a thin sweep
2100
+ under the sticky current-step header keeps the "in progress" signal alive
2101
+ even when no new lines are streaming. A dedicated .run-scan element hosts
2102
+ the sweep (summary::after is the expand/collapse chevron) and clips it —
2103
+ overflow:hidden on the summary itself would clip the sticky header's
2104
+ focus ring. Composited transform only. */
2105
+ #codex-overleaf-panel .run-scan {
2106
+ display: none;
2107
+ position: absolute;
2108
+ left: 0;
2109
+ right: 0;
2110
+ bottom: 0;
2111
+ height: 2px;
2112
+ overflow: hidden;
2113
+ pointer-events: none;
2114
+ }
2115
+ #codex-overleaf-panel .transcript-turn[data-status="running"] .run-process summary .run-scan {
2116
+ display: block;
2117
+ }
2118
+ #codex-overleaf-panel .transcript-turn[data-status="running"] .run-process summary .run-scan::before {
2119
+ content: "";
2120
+ display: block;
2121
+ width: 30%;
2122
+ height: 100%;
2123
+ background: linear-gradient(90deg, transparent, var(--tl-run), transparent);
2124
+ animation: tl-scan 1.4s ease-in-out infinite;
2125
+ }
2126
+ @keyframes tl-scan {
2127
+ from { transform: translateX(-100%); }
2128
+ to { transform: translateX(433%); }
2129
+ }
2130
+
2131
+ /* Breathing ellipsis (v1.7.7) on the live tail line — the same "run is
2132
+ running AND nothing newer landed below" condition that keeps its ring
2133
+ spinning (inverse of the stale-spinner guards above). */
2134
+ #codex-overleaf-panel .transcript-turn[data-status="running"] .run-activity[data-status="running"]:not([data-kind="checkpoint"]):not(:has(~ .run-activity)) .run-activity-title::after {
2135
+ content: "\2026";
2136
+ margin-left: 2px;
2137
+ color: var(--tl-run);
2138
+ animation: tl-ellipsis 1.2s ease-in-out infinite;
2139
+ }
2140
+ @keyframes tl-ellipsis {
2141
+ 0%, 100% { opacity: 0.2; }
2142
+ 50% { opacity: 1; }
2143
+ }
2144
+
2145
+ #codex-overleaf-panel .transcript-turn[data-status="completed"] .run-process summary::before {
2146
+ content: "✓";
2147
+ color: var(--tl-ok);
2148
+ }
2149
+
2150
+ #codex-overleaf-panel .transcript-turn[data-status="failed"] .run-process summary::before,
2151
+ #codex-overleaf-panel .transcript-turn[data-status="abandoned_after_navigation"] .run-process summary::before {
2152
+ content: "✕";
2153
+ color: var(--tl-fail);
2154
+ }
2155
+
2156
+ #codex-overleaf-panel .transcript-turn[data-status="needs_review_after_navigation"] .run-process summary::before {
2157
+ content: "◆";
2158
+ color: var(--tl-review);
2159
+ }
2160
+
2161
+ #codex-overleaf-panel .run-process summary::after {
2162
+ content: "›";
2163
+ margin-left: auto;
2164
+ color: var(--tl-fg-4);
2165
+ transition: transform 120ms ease;
2166
+ }
2167
+
2168
+ #codex-overleaf-panel .run-process[open] summary::after {
2169
+ transform: rotate(90deg);
2170
+ }
2171
+
2172
+ #codex-overleaf-panel .run-completion-report {
2173
+ margin-top: 10px;
2174
+ }
2175
+
2176
+ #codex-overleaf-panel .run-final-answer {
2177
+ margin: 0;
2178
+ color: var(--tl-fg-1);
2179
+ word-break: break-word;
2180
+ font-size: 13px;
2181
+ line-height: 1.52;
2182
+ }
2183
+
2184
+ #codex-overleaf-panel .run-final-answer p {
2185
+ margin: 0;
2186
+ }
2187
+
2188
+ #codex-overleaf-panel .run-final-answer .run-final-heading {
2189
+ color: var(--tl-fg-1);
2190
+ font-weight: 600;
2191
+ }
2192
+
2193
+ #codex-overleaf-panel .run-final-answer p + p,
2194
+ #codex-overleaf-panel .run-final-answer p + ul,
2195
+ #codex-overleaf-panel .run-final-answer p + ol,
2196
+ #codex-overleaf-panel .run-final-answer ul + p,
2197
+ #codex-overleaf-panel .run-final-answer ol + p,
2198
+ #codex-overleaf-panel .run-final-answer ul + ul,
2199
+ #codex-overleaf-panel .run-final-answer ul + ol,
2200
+ #codex-overleaf-panel .run-final-answer ol + ul,
2201
+ #codex-overleaf-panel .run-final-answer ol + ol {
2202
+ margin-top: 8px;
2203
+ }
2204
+
2205
+ #codex-overleaf-panel .run-final-answer ul,
2206
+ #codex-overleaf-panel .run-final-answer ol {
2207
+ margin: 6px 0 0;
2208
+ padding-left: 18px;
2209
+ }
2210
+
2211
+ #codex-overleaf-panel .run-final-answer li + li {
2212
+ margin-top: 4px;
2213
+ }
2214
+
2215
+ #codex-overleaf-panel .run-final-answer a {
2216
+ color: var(--tl-accent);
2217
+ text-decoration: none;
2218
+ }
2219
+
2220
+ #codex-overleaf-panel .run-final-answer a:hover {
2221
+ text-decoration: underline;
2222
+ }
2223
+
2224
+ #codex-overleaf-panel .run-final-answer code {
2225
+ border-radius: 4px;
2226
+ background: var(--tl-surface-2);
2227
+ color: var(--tl-review);
2228
+ padding: 1px 4px;
2229
+ font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
2230
+ }
2231
+
2232
+ #codex-overleaf-panel .run-final-answer__meta {
2233
+ margin: 10px 0 0;
2234
+ padding: 8px 0 0;
2235
+ border-top: 1px solid var(--tl-border);
2236
+ display: grid;
2237
+ grid-template-columns: max-content 1fr;
2238
+ column-gap: 12px;
2239
+ row-gap: 4px;
2240
+ font-size: 12px; /* 11.5 -> 12: clears WCAG-AA at the muted color */
2241
+ line-height: 1.5;
2242
+ color: var(--tl-fg-3);
2243
+ }
2244
+
2245
+ #codex-overleaf-panel .run-final-answer__meta-label {
2246
+ margin: 0;
2247
+ color: var(--tl-fg-2);
2248
+ font-weight: 600;
2249
+ letter-spacing: 0.02em;
2250
+ }
2251
+
2252
+ #codex-overleaf-panel .run-final-answer__meta-value {
2253
+ margin: 0;
2254
+ color: var(--tl-fg-3);
2255
+ word-break: break-word;
2256
+ }
2257
+
2258
+ #codex-overleaf-panel .run-completion-report[data-status="failed"] {
2259
+ color: var(--tl-fail);
2260
+ }
2261
+
2262
+ /* .run-final-answer resets color to fg-1 for normal reports; a failed report's
2263
+ conclusion must keep the alert color or failure reads like success. */
2264
+ #codex-overleaf-panel .run-completion-report[data-status="failed"] .run-final-answer {
2265
+ color: var(--tl-fail);
2266
+ }
2267
+
2268
+ /* Failed-status reports keep their alert color for the conclusion, but the
2269
+ meta block stays muted so it still reads as system info rather than amplifying
2270
+ the alert. */
2271
+ #codex-overleaf-panel .run-completion-report[data-status="failed"] .run-final-answer__meta,
2272
+ #codex-overleaf-panel .run-completion-report[data-status="failed"] .run-final-answer__meta-value {
2273
+ color: var(--tl-fg-3);
2274
+ }
2275
+
2276
+ #codex-overleaf-panel .run-completion-report[data-status="failed"] .run-final-answer__meta-label {
2277
+ color: var(--tl-fg-2);
2278
+ }
2279
+
2280
+ /* Recovery action button. Only renders for failure codes that have a
2281
+ one-click recovery path (today: codex_project_locked). Positioned below
2282
+ the meta block so it reads as the user's next move. */
2283
+ #codex-overleaf-panel .run-final-answer__recovery-action {
2284
+ margin: 12px 0 0;
2285
+ padding: 5px 10px;
2286
+ background: var(--tl-hover);
2287
+ border: 1px solid var(--tl-border-strong);
2288
+ border-radius: 3px;
2289
+ color: var(--tl-fg-1);
2290
+ font: inherit;
2291
+ font-size: 12px;
2292
+ cursor: pointer;
2293
+ transition: background 0.12s ease, border-color 0.12s ease;
2294
+ }
2295
+
2296
+ #codex-overleaf-panel .run-final-answer__recovery-action:hover {
2297
+ background: var(--tl-border-strong);
2298
+ border-color: var(--tl-border-strong);
2299
+ }
2300
+
2301
+ #codex-overleaf-panel .run-final-answer__recovery-action:disabled {
2302
+ cursor: default;
2303
+ opacity: 0.6;
2304
+ }
2305
+
2306
+ #codex-overleaf-panel .codex-probe-line {
2307
+ flex: 0 0 auto;
2308
+ min-height: 18px;
2309
+ border-top: 1px solid var(--tl-border);
2310
+ color: var(--tl-fg-3);
2311
+ padding: 4px 12px 0;
2312
+ font-size: 11px;
2313
+ /* Narrative status text (v1.7.7) — wrap instead of hiding the tail. */
2314
+ white-space: normal;
2315
+ overflow-wrap: anywhere;
2316
+ }
2317
+
2318
+ #codex-overleaf-panel .codex-probe-line[data-ok="true"] {
2319
+ color: var(--tl-ok);
2320
+ }
2321
+
2322
+ #codex-overleaf-panel .codex-composer {
2323
+ position: relative;
2324
+ flex: 0 0 auto;
2325
+ margin: 8px 8px 6px;
2326
+ border: 1px solid var(--tl-border);
2327
+ border-radius: 8px;
2328
+ background: var(--tl-surface-1);
2329
+ transition: border-color 120ms ease, box-shadow 120ms ease;
2330
+ }
2331
+
2332
+ #codex-overleaf-panel .codex-composer:focus-within {
2333
+ border-color: var(--tl-accent);
2334
+ box-shadow: 0 0 0 1px var(--tl-accent);
2335
+ }
2336
+
2337
+ #codex-overleaf-panel .codex-composer[data-dragging-attachment="true"] {
2338
+ border-color: var(--tl-run);
2339
+ box-shadow: 0 0 0 1px rgba(78, 201, 176, 0.35);
2340
+ }
2341
+
2342
+ /* First-run coach-mark pointing at the mode switch. JS sets its position
2343
+ inline; this gives it a real callout surface (it previously rendered as
2344
+ bare unstyled text floating over the composer). */
2345
+ #codex-overleaf-panel .codex-onboarding-tip {
2346
+ background: var(--tl-surface-2);
2347
+ border: 1px solid var(--tl-border-strong);
2348
+ border-radius: var(--tl-r-md);
2349
+ padding: 8px 10px;
2350
+ color: var(--tl-fg-2);
2351
+ font-size: 12px;
2352
+ line-height: 1.4;
2353
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
2354
+ animation: tl-fade-in 160ms ease-out;
2355
+ }
2356
+
2357
+ #codex-overleaf-panel .codex-slash-menu {
2358
+ position: absolute;
2359
+ left: 8px;
2360
+ right: 8px;
2361
+ bottom: calc(100% + 6px);
2362
+ z-index: 2147483647;
2363
+ display: grid;
2364
+ gap: 2px;
2365
+ border: 1px solid var(--tl-border-strong);
2366
+ border-radius: 8px;
2367
+ background: var(--tl-surface-2);
2368
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
2369
+ padding: 5px;
2370
+ }
2371
+
2372
+ #codex-overleaf-panel .codex-slash-menu[hidden] {
2373
+ display: none;
2374
+ }
2375
+
2376
+ #codex-overleaf-panel .codex-slash-menu button {
2377
+ display: grid;
2378
+ gap: 2px;
2379
+ width: 100%;
2380
+ border: 0;
2381
+ border-radius: 6px;
2382
+ background: transparent;
2383
+ color: var(--tl-fg-1);
2384
+ padding: 7px 8px;
2385
+ text-align: left;
2386
+ }
2387
+
2388
+ #codex-overleaf-panel .codex-slash-menu button[data-active="true"],
2389
+ #codex-overleaf-panel .codex-slash-menu button:hover {
2390
+ background: var(--tl-accent-wash);
2391
+ color: var(--tl-fg-1);
2392
+ }
2393
+
2394
+ #codex-overleaf-panel .codex-slash-menu-note {
2395
+ padding: 8px 10px;
2396
+ color: var(--tl-fg-3);
2397
+ font-size: 12px;
2398
+ }
2399
+
2400
+ #codex-overleaf-panel .codex-slash-menu small {
2401
+ color: var(--tl-fg-3);
2402
+ font-size: 11px;
2403
+ line-height: 1.3;
2404
+ }
2405
+
2406
+ #codex-overleaf-panel .codex-composer-skill-context {
2407
+ display: inline-grid;
2408
+ grid-template-columns: auto minmax(0, auto) auto;
2409
+ align-items: center;
2410
+ gap: 7px;
2411
+ width: fit-content;
2412
+ max-width: 100%;
2413
+ border: 1px solid var(--tl-border-strong);
2414
+ border-radius: 999px;
2415
+ background: var(--tl-surface-1);
2416
+ color: var(--tl-fg-1);
2417
+ padding: 5px 7px;
2418
+ font-size: 12px;
2419
+ line-height: 1.2;
2420
+ }
2421
+
2422
+ #codex-overleaf-panel .codex-composer-skill-context[hidden] {
2423
+ display: none;
2424
+ }
2425
+
2426
+ #codex-overleaf-panel .codex-composer-skill-icon {
2427
+ color: var(--tl-accent);
2428
+ font-size: 13px;
2429
+ }
2430
+
2431
+ #codex-overleaf-panel .codex-composer-skill-context [data-composer-skill-label] {
2432
+ overflow: hidden;
2433
+ text-overflow: ellipsis;
2434
+ white-space: nowrap;
2435
+ }
2436
+
2437
+ #codex-overleaf-panel .codex-composer-skill-context button {
2438
+ display: grid;
2439
+ place-items: center;
2440
+ width: 18px;
2441
+ height: 18px;
2442
+ border: 0;
2443
+ border-radius: 50%;
2444
+ background: transparent;
2445
+ color: var(--tl-fg-3);
2446
+ padding: 0;
2447
+ font-size: 14px;
2448
+ line-height: 1;
2449
+ }
2450
+
2451
+ #codex-overleaf-panel .codex-composer-skill-context button:hover {
2452
+ background: var(--tl-hover);
2453
+ color: var(--tl-fg-1);
2454
+ }
2455
+
2456
+ #codex-overleaf-panel .codex-composer textarea {
2457
+ box-sizing: border-box;
2458
+ width: 100%;
2459
+ min-height: 58px;
2460
+ max-height: 160px;
2461
+ border: 0;
2462
+ outline: none;
2463
+ resize: none; /* autogrow owns the height (input-driven, 58-160px) */
2464
+ background: transparent;
2465
+ color: var(--tl-fg-1);
2466
+ padding: 10px 10px 6px;
2467
+ }
2468
+
2469
+ #codex-overleaf-panel .codex-composer textarea::placeholder {
2470
+ color: var(--tl-fg-4);
2471
+ }
2472
+
2473
+ #codex-overleaf-panel .codex-mode-row {
2474
+ display: grid;
2475
+ grid-template-columns: auto minmax(0, 1fr);
2476
+ align-items: center;
2477
+ gap: 7px;
2478
+ border-top: 1px solid var(--tl-border);
2479
+ padding: 5px 8px 0;
2480
+ }
2481
+
2482
+ #codex-overleaf-panel .codex-mode-label {
2483
+ color: var(--tl-fg-3);
2484
+ font-size: 11px;
2485
+ white-space: nowrap;
2486
+ }
2487
+
2488
+ /* Mode switch (Ask/Suggest/Auto) — a real segmented control: a bordered track
2489
+ holding three choices. Inactive choices are muted; hover is a light fill
2490
+ (distinct from the active accent-wash fill) so hover never reads as active. */
2491
+ #codex-overleaf-panel .codex-mode-switch {
2492
+ display: grid;
2493
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2494
+ gap: 2px;
2495
+ min-width: 0;
2496
+ padding: 2px;
2497
+ border: 1px solid var(--tl-border);
2498
+ border-radius: var(--tl-r-sm);
2499
+ background: var(--tl-surface-2);
2500
+ }
2501
+
2502
+ #codex-overleaf-panel [data-mode-choice] {
2503
+ min-width: 0;
2504
+ min-height: 24px;
2505
+ overflow: hidden;
2506
+ border-radius: 4px;
2507
+ color: var(--tl-fg-3);
2508
+ padding: 0 4px;
2509
+ font-size: 11px;
2510
+ text-overflow: ellipsis;
2511
+ white-space: nowrap;
2512
+ transition: background-color 120ms ease, color 120ms ease;
2513
+ }
2514
+
2515
+ #codex-overleaf-panel [data-mode-choice]:not([data-active="true"]):hover {
2516
+ background: var(--tl-hover);
2517
+ color: var(--tl-fg-2);
2518
+ }
2519
+
2520
+ #codex-overleaf-panel [data-mode-choice][data-active="true"] {
2521
+ background: var(--tl-accent-wash);
2522
+ color: var(--tl-fg-1);
2523
+ box-shadow: inset 0 0 0 1px var(--tl-accent);
2524
+ }
2525
+
2526
+ #codex-overleaf-panel .codex-context-summary {
2527
+ display: flex;
2528
+ min-height: 26px;
2529
+ align-items: center;
2530
+ gap: 5px;
2531
+ border-top: 1px solid var(--tl-border);
2532
+ padding: 4px 8px 0;
2533
+ overflow-x: auto;
2534
+ }
2535
+
2536
+ #codex-overleaf-panel .codex-context-summary[hidden] {
2537
+ display: none;
2538
+ }
2539
+
2540
+ #codex-overleaf-panel .codex-context-summary-label {
2541
+ flex: 0 0 auto;
2542
+ color: var(--tl-fg-3);
2543
+ font-size: 11px;
2544
+ }
2545
+
2546
+ #codex-overleaf-panel .codex-context-summary-chip {
2547
+ display: inline-flex;
2548
+ flex: 0 1 auto;
2549
+ min-width: 0;
2550
+ max-width: 142px;
2551
+ align-items: center;
2552
+ gap: 4px;
2553
+ border: 1px solid var(--tl-border);
2554
+ border-radius: 999px;
2555
+ background: var(--tl-surface-2);
2556
+ color: var(--tl-fg-2);
2557
+ padding: 2px 3px 2px 7px;
2558
+ font-size: 11px;
2559
+ }
2560
+
2561
+ #codex-overleaf-panel .codex-context-summary-chip-label {
2562
+ min-width: 0;
2563
+ overflow: hidden;
2564
+ text-overflow: ellipsis;
2565
+ white-space: nowrap;
2566
+ }
2567
+
2568
+ #codex-overleaf-panel .codex-context-summary-remove {
2569
+ flex: 0 0 auto;
2570
+ width: 16px;
2571
+ height: 16px;
2572
+ border-radius: 50%;
2573
+ color: var(--tl-fg-3);
2574
+ transition: opacity 120ms ease, background-color 120ms ease;
2575
+ }
2576
+
2577
+ #codex-overleaf-panel .codex-context-summary-remove:hover,
2578
+ #codex-overleaf-panel .codex-context-summary-remove:focus-visible {
2579
+ background: var(--tl-hover);
2580
+ color: var(--tl-fg-1);
2581
+ }
2582
+
2583
+ #codex-overleaf-panel .codex-context-summary-tooltip {
2584
+ position: absolute;
2585
+ z-index: 6;
2586
+ box-sizing: border-box;
2587
+ padding: 6px 8px;
2588
+ border: 1px solid var(--tl-border-strong);
2589
+ border-radius: 6px;
2590
+ background: var(--tl-surface-1);
2591
+ color: var(--tl-fg-1);
2592
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38);
2593
+ font-size: 11px;
2594
+ line-height: 1.35;
2595
+ overflow-wrap: anywhere;
2596
+ pointer-events: none;
2597
+ }
2598
+
2599
+ #codex-overleaf-panel .codex-context-summary-tooltip[hidden] {
2600
+ display: none;
2601
+ }
2602
+
2603
+ #codex-overleaf-panel .codex-attachment-strip {
2604
+ display: flex;
2605
+ min-height: 46px;
2606
+ gap: 7px;
2607
+ padding: 8px 8px 0;
2608
+ overflow-x: auto;
2609
+ }
2610
+
2611
+ #codex-overleaf-panel .codex-attachment-strip[hidden] {
2612
+ display: none;
2613
+ }
2614
+
2615
+ #codex-overleaf-panel .run-attachments {
2616
+ margin: 0 0 8px;
2617
+ }
2618
+
2619
+ #codex-overleaf-panel .codex-attachment-preview-list {
2620
+ display: flex;
2621
+ align-items: flex-start;
2622
+ gap: 7px;
2623
+ overflow-x: auto;
2624
+ }
2625
+
2626
+ #codex-overleaf-panel .codex-attachment-preview-list[hidden] {
2627
+ display: none;
2628
+ }
2629
+
2630
+ #codex-overleaf-panel .codex-attachment-preview-card {
2631
+ position: relative;
2632
+ display: inline-flex;
2633
+ width: 104px;
2634
+ min-width: 104px;
2635
+ height: 74px;
2636
+ flex-direction: column;
2637
+ align-items: center;
2638
+ justify-content: center;
2639
+ gap: 4px;
2640
+ overflow: hidden;
2641
+ border: 1px solid var(--tl-border-strong);
2642
+ border-radius: 8px;
2643
+ background: var(--tl-surface-1);
2644
+ color: var(--tl-fg-2);
2645
+ padding: 6px;
2646
+ font-size: 11px;
2647
+ }
2648
+
2649
+ #codex-overleaf-panel button.codex-attachment-preview-card {
2650
+ cursor: zoom-in;
2651
+ }
2652
+
2653
+ #codex-overleaf-panel .codex-attachment-preview-card img {
2654
+ width: 100%;
2655
+ min-height: 0;
2656
+ flex: 1 1 auto;
2657
+ object-fit: cover;
2658
+ border-radius: 5px;
2659
+ background: var(--tl-surface-0);
2660
+ }
2661
+
2662
+ #codex-overleaf-panel .codex-attachment-file-icon {
2663
+ display: inline-flex;
2664
+ width: 34px;
2665
+ height: 40px;
2666
+ align-items: center;
2667
+ justify-content: center;
2668
+ border: 1px solid var(--tl-border-strong);
2669
+ border-radius: 5px;
2670
+ background: var(--tl-surface-2);
2671
+ color: var(--tl-fg-1);
2672
+ font-size: 10px;
2673
+ font-weight: 700;
2674
+ }
2675
+
2676
+ #codex-overleaf-panel .codex-attachment-preview-meta {
2677
+ display: grid;
2678
+ width: 100%;
2679
+ min-width: 0;
2680
+ gap: 1px;
2681
+ }
2682
+
2683
+ #codex-overleaf-panel .codex-attachment-preview-name,
2684
+ #codex-overleaf-panel .codex-attachment-preview-size {
2685
+ min-width: 0;
2686
+ overflow: hidden;
2687
+ text-overflow: ellipsis;
2688
+ white-space: nowrap;
2689
+ }
2690
+
2691
+ #codex-overleaf-panel .codex-attachment-preview-size {
2692
+ color: var(--tl-fg-3);
2693
+ font-size: 10px;
2694
+ }
2695
+
2696
+ #codex-overleaf-panel .codex-attachment-preview-remove {
2697
+ position: absolute;
2698
+ top: 3px;
2699
+ right: 3px;
2700
+ width: 18px;
2701
+ height: 18px;
2702
+ border-radius: 50%;
2703
+ background: rgba(0, 0, 0, 0.62);
2704
+ color: var(--tl-fg-3);
2705
+ }
2706
+
2707
+ #codex-overleaf-panel .codex-attachment-preview-remove:hover {
2708
+ background: var(--tl-hover);
2709
+ color: var(--tl-fg-1);
2710
+ }
2711
+
2712
+ #codex-overleaf-panel .codex-attachment-preview-dialog {
2713
+ position: fixed;
2714
+ inset: 0;
2715
+ z-index: 2147483647;
2716
+ display: grid;
2717
+ place-items: center;
2718
+ background: rgba(0, 0, 0, 0.72);
2719
+ padding: 24px;
2720
+ }
2721
+
2722
+ #codex-overleaf-panel .codex-attachment-preview-dialog-card {
2723
+ position: relative;
2724
+ display: grid;
2725
+ max-width: min(980px, 92vw);
2726
+ max-height: 92vh;
2727
+ gap: 8px;
2728
+ }
2729
+
2730
+ #codex-overleaf-panel .codex-attachment-preview-dialog-card img {
2731
+ max-width: 100%;
2732
+ max-height: calc(92vh - 48px);
2733
+ object-fit: contain;
2734
+ border-radius: 8px;
2735
+ background: var(--tl-surface-0);
2736
+ }
2737
+
2738
+ #codex-overleaf-panel .codex-attachment-preview-dialog-close {
2739
+ position: absolute;
2740
+ top: 8px;
2741
+ right: 8px;
2742
+ width: 28px;
2743
+ height: 28px;
2744
+ border-radius: 50%;
2745
+ background: rgba(0, 0, 0, 0.62);
2746
+ color: #ffffff;
2747
+ }
2748
+
2749
+ #codex-overleaf-panel .codex-attachment-preview-dialog-caption {
2750
+ color: var(--tl-fg-1);
2751
+ font-size: 12px;
2752
+ text-align: center;
2753
+ }
2754
+
2755
+ #codex-overleaf-panel .codex-composer-toolbar {
2756
+ display: grid;
2757
+ grid-template-columns: 26px 54px 70px minmax(0, 1fr) minmax(96px, 156px) 28px;
2758
+ align-items: center;
2759
+ gap: 4px;
2760
+ padding: 4px 6px 6px;
2761
+ }
2762
+
2763
+ #codex-overleaf-panel .codex-composer-toolbar button,
2764
+ #codex-overleaf-panel .codex-review-toggle,
2765
+ #codex-overleaf-panel .codex-recompile-toggle,
2766
+ #codex-overleaf-panel .codex-model-config-button {
2767
+ display: inline-flex;
2768
+ align-items: center;
2769
+ justify-content: center;
2770
+ min-height: 26px;
2771
+ border-radius: 5px;
2772
+ color: var(--tl-fg-2);
2773
+ }
2774
+
2775
+ #codex-overleaf-panel .codex-composer-toolbar button {
2776
+ min-width: 26px;
2777
+ }
2778
+
2779
+ #codex-overleaf-panel .codex-review-toggle,
2780
+ #codex-overleaf-panel .codex-recompile-toggle {
2781
+ position: relative;
2782
+ overflow: hidden;
2783
+ padding: 0 8px;
2784
+ cursor: pointer;
2785
+ white-space: nowrap;
2786
+ }
2787
+
2788
+ #codex-overleaf-panel .codex-review-toggle {
2789
+ min-width: 54px;
2790
+ }
2791
+
2792
+ #codex-overleaf-panel .codex-recompile-toggle {
2793
+ min-width: 70px;
2794
+ }
2795
+
2796
+ #codex-overleaf-panel .codex-review-toggle:hover,
2797
+ #codex-overleaf-panel .codex-recompile-toggle:hover {
2798
+ background: var(--tl-hover);
2799
+ }
2800
+
2801
+ #codex-overleaf-panel .codex-review-toggle input,
2802
+ #codex-overleaf-panel .codex-recompile-toggle input {
2803
+ position: absolute;
2804
+ opacity: 0;
2805
+ pointer-events: none;
2806
+ }
2807
+
2808
+ #codex-overleaf-panel .codex-review-label,
2809
+ #codex-overleaf-panel .codex-recompile-label {
2810
+ overflow: hidden;
2811
+ font-size: 11px;
2812
+ line-height: 1;
2813
+ text-overflow: ellipsis;
2814
+ white-space: nowrap;
2815
+ }
2816
+
2817
+ #codex-overleaf-panel .codex-review-toggle:has(input:checked),
2818
+ #codex-overleaf-panel .codex-recompile-toggle:has(input:checked) {
2819
+ color: var(--tl-ok);
2820
+ background: var(--tl-ok-wash);
2821
+ }
2822
+
2823
+ #codex-overleaf-panel .codex-review-toggle:has(input:focus-visible),
2824
+ #codex-overleaf-panel .codex-recompile-toggle:has(input:focus-visible) {
2825
+ outline: 1px solid var(--tl-accent);
2826
+ outline-offset: 2px;
2827
+ }
2828
+
2829
+ #codex-overleaf-panel .codex-model-config {
2830
+ position: relative;
2831
+ grid-column: 5;
2832
+ justify-self: end;
2833
+ width: 100%;
2834
+ max-width: 156px;
2835
+ min-width: 0;
2836
+ }
2837
+
2838
+ #codex-overleaf-panel .codex-model-config-button {
2839
+ width: 100%;
2840
+ min-width: 0;
2841
+ border: 1px solid transparent;
2842
+ outline: none;
2843
+ justify-content: flex-start;
2844
+ background-color: var(--tl-surface-2);
2845
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%23bdbdbd' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
2846
+ background-repeat: no-repeat;
2847
+ background-position: right 4px center;
2848
+ background-size: 10px 10px;
2849
+ color: var(--tl-fg-2);
2850
+ gap: 5px;
2851
+ overflow: hidden;
2852
+ padding: 0 18px 0 6px;
2853
+ text-align: left;
2854
+ text-overflow: ellipsis;
2855
+ white-space: nowrap;
2856
+ }
2857
+
2858
+ #codex-overleaf-panel .codex-model-config-button[data-active="true"],
2859
+ #codex-overleaf-panel .codex-model-config-button:hover {
2860
+ background-color: var(--tl-hover);
2861
+ border-color: var(--tl-border);
2862
+ }
2863
+
2864
+ #codex-overleaf-panel .codex-model-config-button [data-model-display] {
2865
+ flex: 0 1 auto;
2866
+ min-width: 0;
2867
+ max-width: 96px;
2868
+ overflow: hidden;
2869
+ color: var(--tl-fg-1);
2870
+ font-size: 13px;
2871
+ text-overflow: ellipsis;
2872
+ white-space: nowrap;
2873
+ }
2874
+
2875
+ #codex-overleaf-panel .codex-model-config-button [data-reasoning-display] {
2876
+ flex: 0 0 auto;
2877
+ border-left: 1px solid var(--tl-border);
2878
+ padding-left: 5px;
2879
+ max-width: 56px;
2880
+ overflow: hidden;
2881
+ color: var(--tl-fg-3);
2882
+ font-size: 12px;
2883
+ text-overflow: ellipsis;
2884
+ white-space: nowrap;
2885
+ }
2886
+
2887
+ #codex-overleaf-panel .codex-model-speed-indicator {
2888
+ flex: 0 0 auto;
2889
+ color: var(--tl-fg-3);
2890
+ font-size: 13px;
2891
+ line-height: 1;
2892
+ }
2893
+
2894
+ #codex-overleaf-panel .codex-model-config-popover {
2895
+ position: absolute;
2896
+ right: 0;
2897
+ bottom: calc(100% + 6px);
2898
+ z-index: 2147483647;
2899
+ width: min(244px, calc(var(--codex-overleaf-panel-width) - 16px));
2900
+ max-height: min(420px, calc(100vh - 180px));
2901
+ overflow: auto;
2902
+ border: 1px solid var(--tl-border-strong);
2903
+ border-radius: 8px;
2904
+ background: var(--tl-surface-2);
2905
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.46);
2906
+ padding: 6px;
2907
+ }
2908
+
2909
+ #codex-overleaf-panel .codex-model-config-popover[hidden] {
2910
+ display: none;
2911
+ }
2912
+
2913
+ #codex-overleaf-panel .codex-model-config-section {
2914
+ display: grid;
2915
+ gap: 1px;
2916
+ }
2917
+
2918
+ #codex-overleaf-panel .codex-model-config-divider {
2919
+ height: 1px;
2920
+ margin: 6px 0;
2921
+ background: var(--tl-surface-2);
2922
+ }
2923
+
2924
+ #codex-overleaf-panel .codex-model-config-choice {
2925
+ display: flex;
2926
+ align-items: center;
2927
+ justify-content: space-between;
2928
+ width: 100%;
2929
+ min-height: 30px;
2930
+ gap: 10px;
2931
+ border-radius: 6px;
2932
+ color: var(--tl-fg-1);
2933
+ padding: 0 8px 0 10px;
2934
+ text-align: left;
2935
+ }
2936
+
2937
+ #codex-overleaf-panel .codex-model-config-choice:hover,
2938
+ #codex-overleaf-panel .codex-model-config-choice[data-active="true"] {
2939
+ background: var(--tl-hover);
2940
+ }
2941
+
2942
+ #codex-overleaf-panel .codex-model-config-choice:disabled {
2943
+ opacity: 0.55;
2944
+ }
2945
+
2946
+ #codex-overleaf-panel .codex-model-config-choice-label {
2947
+ min-width: 0;
2948
+ overflow: hidden;
2949
+ text-overflow: ellipsis;
2950
+ white-space: nowrap;
2951
+ }
2952
+
2953
+ #codex-overleaf-panel .codex-model-config-check {
2954
+ flex: 0 0 auto;
2955
+ color: var(--tl-fg-1);
2956
+ opacity: 0;
2957
+ }
2958
+
2959
+ #codex-overleaf-panel .codex-model-config-choice[data-active="true"] .codex-model-config-check {
2960
+ opacity: 1;
2961
+ }
2962
+
2963
+ #codex-overleaf-panel .codex-composer-toolbar [data-run] {
2964
+ position: relative;
2965
+ grid-column: 6;
2966
+ width: 28px;
2967
+ min-width: 28px;
2968
+ padding: 0;
2969
+ border-radius: 999px;
2970
+ background: var(--tl-accent);
2971
+ color: #ffffff;
2972
+ font-weight: 600;
2973
+ transition: background 120ms ease, filter 120ms ease;
2974
+ }
2975
+
2976
+ #codex-overleaf-panel .codex-composer-toolbar [data-run]:hover {
2977
+ filter: brightness(1.1);
2978
+ }
2979
+
2980
+ #codex-overleaf-panel[data-running="true"] .codex-composer-toolbar [data-run] {
2981
+ color: transparent;
2982
+ }
2983
+
2984
+ /* While running, the button is the cancel control — hovering signals "stop". */
2985
+ #codex-overleaf-panel[data-running="true"] .codex-composer-toolbar [data-run]:hover {
2986
+ background: var(--tl-fail);
2987
+ filter: none;
2988
+ }
2989
+
2990
+ #codex-overleaf-panel[data-running="true"] .codex-composer-toolbar [data-run]::after {
2991
+ content: "";
2992
+ position: absolute;
2993
+ top: 50%;
2994
+ left: 50%;
2995
+ box-sizing: border-box;
2996
+ width: 13px;
2997
+ height: 13px;
2998
+ border: 2px solid rgba(255, 255, 255, 0.35);
2999
+ border-top-color: #ffffff;
3000
+ border-radius: 50%;
3001
+ animation: codex-run-spin 800ms linear infinite;
3002
+ transform: translate(-50%, -50%);
3003
+ }
3004
+
3005
+ @keyframes codex-run-spin {
3006
+ to {
3007
+ transform: translate(-50%, -50%) rotate(360deg);
3008
+ }
3009
+ }
3010
+
3011
+ #codex-overleaf-panel .codex-composer-toolbar [data-add-context][data-active="true"],
3012
+ #codex-overleaf-panel .codex-composer-toolbar [data-add-context][data-has-focus="true"] {
3013
+ background: var(--tl-hover);
3014
+ color: var(--tl-fg-1);
3015
+ }
3016
+
3017
+ #codex-overleaf-panel .codex-composer-toolbar [data-add-context][data-has-focus="true"] {
3018
+ color: var(--tl-ok);
3019
+ }
3020
+
3021
+ #codex-overleaf-panel .codex-context-tray {
3022
+ position: absolute;
3023
+ right: 0;
3024
+ bottom: calc(100% + 6px);
3025
+ left: 0;
3026
+ z-index: 2147483647;
3027
+ border: 1px solid var(--tl-border-strong);
3028
+ border-radius: 7px;
3029
+ background: var(--tl-surface-2);
3030
+ box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
3031
+ padding: 7px 8px 8px;
3032
+ }
3033
+
3034
+ #codex-overleaf-panel .codex-context-tray[hidden] {
3035
+ display: none;
3036
+ }
3037
+
3038
+ #codex-overleaf-panel .codex-context-head {
3039
+ display: flex;
3040
+ align-items: center;
3041
+ justify-content: space-between;
3042
+ gap: 8px;
3043
+ color: var(--tl-fg-2);
3044
+ font-size: 12px;
3045
+ }
3046
+
3047
+ #codex-overleaf-panel .codex-context-head button {
3048
+ display: inline-flex;
3049
+ align-items: center;
3050
+ justify-content: center;
3051
+ width: 22px;
3052
+ height: 22px;
3053
+ border-radius: 4px;
3054
+ color: var(--tl-fg-3);
3055
+ }
3056
+
3057
+ #codex-overleaf-panel .codex-context-selection {
3058
+ margin-top: 6px;
3059
+ }
3060
+
3061
+ #codex-overleaf-panel .codex-context-chip {
3062
+ display: inline-flex;
3063
+ max-width: 100%;
3064
+ align-items: center;
3065
+ gap: 6px;
3066
+ border: 1px solid var(--tl-border);
3067
+ border-radius: 999px;
3068
+ background: var(--tl-surface-2);
3069
+ color: var(--tl-fg-2);
3070
+ padding: 3px 7px;
3071
+ font-size: 11px;
3072
+ }
3073
+
3074
+ #codex-overleaf-panel .codex-context-chip span:last-of-type {
3075
+ overflow: hidden;
3076
+ text-overflow: ellipsis;
3077
+ white-space: nowrap;
3078
+ }
3079
+
3080
+ #codex-overleaf-panel .codex-context-dot {
3081
+ flex: 0 0 auto;
3082
+ width: 7px;
3083
+ height: 7px;
3084
+ border-radius: 50%;
3085
+ background: var(--tl-accent);
3086
+ }
3087
+
3088
+ #codex-overleaf-panel .codex-context-chip [data-context-clear] {
3089
+ display: inline-flex;
3090
+ align-items: center;
3091
+ justify-content: center;
3092
+ width: 16px;
3093
+ height: 16px;
3094
+ border-radius: 50%;
3095
+ color: var(--tl-fg-3);
3096
+ }
3097
+
3098
+ #codex-overleaf-panel .codex-context-status {
3099
+ margin-top: 6px;
3100
+ color: var(--tl-fg-3);
3101
+ font-size: 11px;
3102
+ }
3103
+
3104
+ #codex-overleaf-panel .codex-context-files {
3105
+ display: grid;
3106
+ max-height: 150px;
3107
+ margin-top: 6px;
3108
+ gap: 2px;
3109
+ overflow-y: auto;
3110
+ }
3111
+
3112
+ #codex-overleaf-panel .codex-context-folder {
3113
+ display: grid;
3114
+ gap: 2px;
3115
+ }
3116
+
3117
+ #codex-overleaf-panel .codex-context-folder-children {
3118
+ display: grid;
3119
+ gap: 2px;
3120
+ }
3121
+
3122
+ #codex-overleaf-panel .codex-context-folder-name {
3123
+ display: block;
3124
+ min-height: 20px;
3125
+ color: var(--tl-fg-3);
3126
+ cursor: pointer;
3127
+ font-size: 11px;
3128
+ line-height: 20px;
3129
+ list-style: none;
3130
+ }
3131
+
3132
+ #codex-overleaf-panel .codex-context-folder-name::-webkit-details-marker {
3133
+ display: none;
3134
+ }
3135
+
3136
+ #codex-overleaf-panel .codex-context-folder-name::before {
3137
+ content: "▸ ";
3138
+ color: var(--tl-fg-4);
3139
+ }
3140
+
3141
+ #codex-overleaf-panel .codex-context-folder[open] > .codex-context-folder-name::before {
3142
+ content: "▾ ";
3143
+ }
3144
+
3145
+ #codex-overleaf-panel .codex-context-file {
3146
+ display: flex;
3147
+ width: 100%;
3148
+ min-height: 28px;
3149
+ align-items: center;
3150
+ justify-content: space-between;
3151
+ gap: 8px;
3152
+ border: 1px solid transparent;
3153
+ border-radius: 5px;
3154
+ background: var(--tl-surface-1);
3155
+ color: var(--tl-fg-2);
3156
+ padding: 4px 7px;
3157
+ text-align: left;
3158
+ }
3159
+
3160
+ #codex-overleaf-panel .codex-context-file:hover {
3161
+ background: var(--tl-hover);
3162
+ }
3163
+
3164
+ #codex-overleaf-panel .codex-context-file[data-selected="true"] {
3165
+ border-color: var(--tl-accent);
3166
+ background: var(--tl-ok-wash);
3167
+ }
3168
+
3169
+ #codex-overleaf-panel .codex-context-file[data-selectable="false"] {
3170
+ cursor: default;
3171
+ opacity: 0.62;
3172
+ }
3173
+
3174
+ #codex-overleaf-panel .codex-context-file[data-selectable="false"]:hover {
3175
+ background: var(--tl-surface-1);
3176
+ }
3177
+
3178
+ #codex-overleaf-panel .codex-context-file-name {
3179
+ min-width: 0;
3180
+ overflow: hidden;
3181
+ font-size: 12px;
3182
+ text-overflow: ellipsis;
3183
+ white-space: nowrap;
3184
+ }
3185
+
3186
+ #codex-overleaf-panel .codex-context-file-meta {
3187
+ flex: 0 0 auto;
3188
+ color: var(--tl-fg-3);
3189
+ font-size: 10px;
3190
+ }
3191
+
3192
+ #codex-overleaf-panel .codex-diff-review {
3193
+ margin-top: 8px;
3194
+ }
3195
+
3196
+ #codex-overleaf-panel .codex-diff-review[data-readonly="true"] {
3197
+ margin-top: 6px;
3198
+ }
3199
+
3200
+ #codex-overleaf-panel .codex-diff-file {
3201
+ border: 1px solid var(--tl-border-strong);
3202
+ border-radius: 6px;
3203
+ background: var(--tl-surface-1);
3204
+ overflow: hidden;
3205
+ }
3206
+
3207
+ #codex-overleaf-panel .codex-diff-file + .codex-diff-file {
3208
+ margin-top: 6px;
3209
+ }
3210
+
3211
+ #codex-overleaf-panel .codex-diff-file-header {
3212
+ display: flex;
3213
+ align-items: center;
3214
+ justify-content: space-between;
3215
+ gap: 6px;
3216
+ min-height: 28px;
3217
+ border-bottom: 1px solid var(--tl-border);
3218
+ background: var(--tl-surface-2);
3219
+ padding: 4px 8px;
3220
+ }
3221
+
3222
+ #codex-overleaf-panel .codex-diff-file-path {
3223
+ min-width: 0;
3224
+ overflow: hidden;
3225
+ color: var(--tl-fg-1);
3226
+ font-size: 12px;
3227
+ text-overflow: ellipsis;
3228
+ white-space: nowrap;
3229
+ }
3230
+
3231
+ #codex-overleaf-panel .codex-diff-file-actions {
3232
+ display: flex;
3233
+ gap: 4px;
3234
+ flex: 0 0 auto;
3235
+ }
3236
+
3237
+ #codex-overleaf-panel .codex-diff-file-actions button {
3238
+ min-height: 22px;
3239
+ border: 1px solid var(--tl-border-strong);
3240
+ border-radius: 4px;
3241
+ background: var(--tl-surface-2);
3242
+ color: var(--tl-fg-2);
3243
+ padding: 1px 7px;
3244
+ font-size: 11px;
3245
+ }
3246
+
3247
+ #codex-overleaf-panel .codex-diff-readonly-label {
3248
+ color: var(--tl-ok);
3249
+ font-size: 11px;
3250
+ }
3251
+
3252
+ #codex-overleaf-panel .codex-diff-decision-label {
3253
+ color: var(--tl-ok);
3254
+ font-size: 11px;
3255
+ }
3256
+
3257
+ #codex-overleaf-panel .codex-diff-file-actions [data-diff-accept] {
3258
+ border-color: var(--tl-ok);
3259
+ color: var(--tl-ok);
3260
+ }
3261
+
3262
+ #codex-overleaf-panel .codex-diff-file-actions [data-diff-reject] {
3263
+ border-color: var(--tl-fail);
3264
+ color: var(--tl-fail);
3265
+ }
3266
+
3267
+ #codex-overleaf-panel .codex-diff-file[data-decision="accepted"] .codex-diff-file-header,
3268
+ #codex-overleaf-panel .codex-diff-file[data-accepted="true"] .codex-diff-file-header {
3269
+ background: var(--tl-ok-wash);
3270
+ }
3271
+
3272
+ #codex-overleaf-panel .codex-diff-file[data-decision="rejected"] .codex-diff-file-header,
3273
+ #codex-overleaf-panel .codex-diff-file[data-accepted="false"] .codex-diff-file-header {
3274
+ background: var(--tl-fail-wash);
3275
+ opacity: 0.6;
3276
+ }
3277
+
3278
+ #codex-overleaf-panel .codex-diff-file[data-decision="rejected"] .codex-diff-decision-label {
3279
+ color: var(--tl-fail);
3280
+ }
3281
+
3282
+ #codex-overleaf-panel .codex-diff-body {
3283
+ max-height: 200px;
3284
+ overflow-y: auto;
3285
+ font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
3286
+ }
3287
+
3288
+ #codex-overleaf-panel .codex-diff-hunk {
3289
+ border-top: 1px solid var(--tl-border);
3290
+ padding: 2px 0;
3291
+ }
3292
+
3293
+ #codex-overleaf-panel .codex-diff-hunk-location {
3294
+ padding: 2px 8px 0;
3295
+ color: var(--tl-fg-4);
3296
+ font-size: 10px;
3297
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
3298
+ }
3299
+
3300
+ #codex-overleaf-panel .codex-diff-hunk[data-decision="accepted"] {
3301
+ background: var(--tl-ok-wash);
3302
+ }
3303
+
3304
+ #codex-overleaf-panel .codex-diff-hunk[data-decision="rejected"] {
3305
+ background: var(--tl-fail-wash);
3306
+ opacity: 0.68;
3307
+ }
3308
+
3309
+ #codex-overleaf-panel .codex-diff-hunk[data-focused="true"] {
3310
+ outline: 1px solid var(--tl-accent);
3311
+ outline-offset: -1px;
3312
+ background: var(--tl-accent-wash);
3313
+ }
3314
+
3315
+ #codex-overleaf-panel .codex-diff-hunk[data-collapsed="true"] .codex-diff-hunk-lines {
3316
+ display: none;
3317
+ }
3318
+
3319
+ #codex-overleaf-panel .codex-diff-hunk:first-child {
3320
+ border-top: 0;
3321
+ }
3322
+
3323
+ #codex-overleaf-panel .codex-diff-hunk-actions {
3324
+ display: flex;
3325
+ justify-content: flex-end;
3326
+ gap: 4px;
3327
+ padding: 2px 6px;
3328
+ }
3329
+
3330
+ #codex-overleaf-panel .codex-diff-hunk-actions button {
3331
+ min-height: 20px;
3332
+ border: 1px solid var(--tl-border-strong);
3333
+ border-radius: 4px;
3334
+ background: var(--tl-surface-2);
3335
+ color: var(--tl-fg-2);
3336
+ padding: 0 6px;
3337
+ font-size: 11px;
3338
+ }
3339
+
3340
+ #codex-overleaf-panel .codex-diff-hunk-actions [data-diff-hunk-accept] {
3341
+ border-color: var(--tl-ok);
3342
+ color: var(--tl-ok);
3343
+ }
3344
+
3345
+ #codex-overleaf-panel .codex-diff-hunk-actions [data-diff-hunk-reject] {
3346
+ border-color: var(--tl-fail);
3347
+ color: var(--tl-fail);
3348
+ }
3349
+
3350
+ #codex-overleaf-panel .codex-diff-hunk-status,
3351
+ #codex-overleaf-panel .codex-diff-hunk-jump-status,
3352
+ #codex-overleaf-panel .codex-diff-fallback-label {
3353
+ color: var(--tl-fg-3);
3354
+ font-size: 11px;
3355
+ }
3356
+
3357
+ #codex-overleaf-panel .codex-diff-hunk[data-jump-status="failed"] .codex-diff-hunk-jump-status {
3358
+ color: var(--tl-fail);
3359
+ }
3360
+
3361
+ #codex-overleaf-panel .codex-diff-hunk[data-decision="accepted"] .codex-diff-hunk-status {
3362
+ color: var(--tl-ok);
3363
+ }
3364
+
3365
+ #codex-overleaf-panel .codex-diff-hunk[data-decision="rejected"] .codex-diff-hunk-status {
3366
+ color: var(--tl-fail);
3367
+ }
3368
+
3369
+ #codex-overleaf-panel .codex-diff-fallback-label {
3370
+ padding: 2px 8px;
3371
+ }
3372
+
3373
+ #codex-overleaf-panel .codex-diff-show-more-hunks,
3374
+ #codex-overleaf-panel .codex-diff-hunk-expand {
3375
+ width: calc(100% - 12px);
3376
+ margin: 4px 6px;
3377
+ min-height: 22px;
3378
+ border: 1px dashed var(--tl-border-strong);
3379
+ border-radius: 4px;
3380
+ background: var(--tl-surface-1);
3381
+ color: var(--tl-accent);
3382
+ font-size: 11px;
3383
+ }
3384
+
3385
+ #codex-overleaf-panel .codex-diff-line {
3386
+ padding: 0 8px;
3387
+ white-space: pre-wrap;
3388
+ word-break: break-all;
3389
+ }
3390
+
3391
+ #codex-overleaf-panel .codex-diff-line[data-type="add"] {
3392
+ background: var(--tl-ok-wash);
3393
+ color: var(--tl-diff-add-fg);
3394
+ }
3395
+
3396
+ #codex-overleaf-panel .codex-diff-line[data-type="remove"] {
3397
+ background: var(--tl-fail-wash);
3398
+ color: var(--tl-fail);
3399
+ }
3400
+
3401
+ #codex-overleaf-panel .codex-diff-line[data-type="context"] {
3402
+ color: var(--tl-fg-3);
3403
+ }
3404
+
3405
+ #codex-overleaf-panel .codex-diff-line::before {
3406
+ display: inline-block;
3407
+ width: 12px;
3408
+ margin-right: 6px;
3409
+ color: var(--tl-fg-4);
3410
+ text-align: center;
3411
+ }
3412
+
3413
+ #codex-overleaf-panel .codex-diff-line[data-type="add"]::before {
3414
+ content: "+";
3415
+ color: var(--tl-ok);
3416
+ }
3417
+
3418
+ #codex-overleaf-panel .codex-diff-line[data-type="remove"]::before {
3419
+ content: "\2212";
3420
+ color: var(--tl-fail);
3421
+ }
3422
+
3423
+ #codex-overleaf-panel .codex-diff-line[data-type="context"]::before {
3424
+ content: " ";
3425
+ }
3426
+
3427
+ #codex-overleaf-panel .codex-diff-toolbar {
3428
+ display: flex;
3429
+ gap: 6px;
3430
+ align-items: center;
3431
+ justify-content: flex-end;
3432
+ margin-top: 8px;
3433
+ padding: 0 2px;
3434
+ }
3435
+
3436
+ #codex-overleaf-panel .codex-diff-toolbar-summary {
3437
+ min-width: 0;
3438
+ margin-right: auto;
3439
+ overflow: hidden;
3440
+ color: var(--tl-fg-3);
3441
+ font-size: 11px;
3442
+ text-overflow: ellipsis;
3443
+ white-space: nowrap;
3444
+ }
3445
+
3446
+ #codex-overleaf-panel .codex-diff-toolbar button {
3447
+ min-height: 26px;
3448
+ border: 1px solid var(--tl-border-strong);
3449
+ border-radius: 5px;
3450
+ background: var(--tl-surface-2);
3451
+ color: var(--tl-fg-2);
3452
+ padding: 2px 10px;
3453
+ font-size: 12px;
3454
+ }
3455
+
3456
+ #codex-overleaf-panel .codex-diff-toolbar [data-diff-accept-all],
3457
+ #codex-overleaf-panel .codex-diff-toolbar [data-diff-apply-all] {
3458
+ border-color: var(--tl-ok);
3459
+ background: var(--tl-ok-wash);
3460
+ color: var(--tl-ok);
3461
+ }
3462
+
3463
+ /* -----------------------------------------------------------------------
3464
+ Recent-projects variant (Welcome panel) — spec §5.3-§5.5, §5.8, §5.10.
3465
+ Palette reuses the per-project run-card tokens already defined above:
3466
+ var(--tl-run) (running / accent), #89d185 (completed / accepted), #f48771
3467
+ (failed), var(--tl-review) (warning / needs-review), #6a6a6a (pending dot), and
3468
+ the panel-wide neutrals (#1f1f1f / var(--tl-surface-2) / #cccccc).
3469
+ -------------------------------------------------------------------- */
3470
+
3471
+ /* When the panel root carries data-view="recent-projects", hide every
3472
+ per-project region so only the variant root is visible. The variant root
3473
+ is the only element inside the panel that should paint in this mode. */
3474
+ #codex-overleaf-panel[data-view="recent-projects"] .codex-vscode-head,
3475
+ #codex-overleaf-panel[data-view="recent-projects"] [data-main],
3476
+ #codex-overleaf-panel[data-view="recent-projects"] [data-probe-status],
3477
+ #codex-overleaf-panel[data-view="recent-projects"] [data-settings-slot],
3478
+ #codex-overleaf-panel[data-view="recent-projects"] [data-composer-slot] {
3479
+ display: none;
3480
+ }
3481
+
3482
+ #codex-overleaf-panel:not([data-view="recent-projects"]) [data-recent-projects-root] {
3483
+ display: none;
3484
+ }
3485
+
3486
+ #codex-overleaf-panel [data-recent-projects-root] {
3487
+ display: flex;
3488
+ flex: 1 1 auto;
3489
+ flex-direction: column;
3490
+ min-height: 0;
3491
+ overflow-y: auto;
3492
+ padding: 14px 12px 12px;
3493
+ gap: 12px;
3494
+ }
3495
+
3496
+ #codex-overleaf-panel .recent-projects-welcome {
3497
+ display: flex;
3498
+ flex-direction: column;
3499
+ gap: 4px;
3500
+ padding-bottom: 4px;
3501
+ border-bottom: 1px solid var(--tl-border);
3502
+ }
3503
+
3504
+ #codex-overleaf-panel .recent-projects-welcome-title {
3505
+ color: var(--tl-fg-1);
3506
+ font-size: 14px;
3507
+ font-weight: 650;
3508
+ letter-spacing: 0;
3509
+ }
3510
+
3511
+ #codex-overleaf-panel .recent-projects-welcome-subtitle {
3512
+ color: var(--tl-fg-3);
3513
+ font-size: 12px;
3514
+ line-height: 1.4;
3515
+ }
3516
+
3517
+ #codex-overleaf-panel [data-recent-projects-list] {
3518
+ display: flex;
3519
+ flex-direction: column;
3520
+ gap: 0;
3521
+ }
3522
+
3523
+ #codex-overleaf-panel .recent-projects-empty,
3524
+ #codex-overleaf-panel .recent-projects-degraded {
3525
+ border: 1px dashed var(--tl-border-strong);
3526
+ border-radius: 6px;
3527
+ background: var(--tl-surface-1);
3528
+ color: var(--tl-fg-3);
3529
+ font-size: 12px;
3530
+ line-height: 1.45;
3531
+ padding: 14px 12px;
3532
+ }
3533
+
3534
+ /* Dashboard per-project session management: expand a row to list, rename, or
3535
+ delete that project's sessions without entering it. */
3536
+ #codex-overleaf-panel .recent-projects-row-wrap {
3537
+ position: relative;
3538
+ display: grid;
3539
+ gap: 0;
3540
+ border-bottom: 1px solid rgba(128, 128, 128, 0.12);
3541
+ }
3542
+
3543
+ #codex-overleaf-panel .recent-projects-row-wrap::before {
3544
+ content: "";
3545
+ position: absolute;
3546
+ top: 14px;
3547
+ bottom: 14px;
3548
+ left: 0;
3549
+ width: 2px;
3550
+ border-radius: 999px;
3551
+ background: var(--tl-border-strong);
3552
+ opacity: 0.65;
3553
+ }
3554
+
3555
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-completed)::before,
3556
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-accepted)::before,
3557
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-background-completed)::before {
3558
+ background: var(--tl-ok);
3559
+ }
3560
+
3561
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-stale)::before,
3562
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-interrupted)::before,
3563
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-needs-review)::before,
3564
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-needs-review-after-navigation)::before {
3565
+ background: var(--tl-review);
3566
+ }
3567
+
3568
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-failed)::before,
3569
+ #codex-overleaf-panel .recent-projects-row-wrap:has(.badge-abandoned-after-navigation)::before {
3570
+ background: var(--tl-fail);
3571
+ }
3572
+
3573
+ #codex-overleaf-panel .recent-projects-row-head {
3574
+ position: relative;
3575
+ display: block;
3576
+ }
3577
+
3578
+ #codex-overleaf-panel .recent-projects-row-head [data-recent-projects-row] {
3579
+ width: 100%;
3580
+ min-width: 0;
3581
+ }
3582
+
3583
+ #codex-overleaf-panel .recent-projects-row-cleanup {
3584
+ flex: 0 0 auto;
3585
+ width: 26px;
3586
+ border-radius: var(--tl-r-sm);
3587
+ color: var(--tl-fg-4);
3588
+ font-size: 13px;
3589
+ }
3590
+
3591
+ #codex-overleaf-panel .recent-projects-row-cleanup:hover {
3592
+ background: var(--tl-hover);
3593
+ color: var(--tl-fail);
3594
+ }
3595
+
3596
+ #codex-overleaf-panel .recent-projects-loading {
3597
+ padding: 10px 12px;
3598
+ color: var(--tl-fg-3);
3599
+ font-size: 12px;
3600
+ }
3601
+
3602
+ #codex-overleaf-panel .recent-projects-row-expand {
3603
+ position: absolute;
3604
+ right: 8px;
3605
+ bottom: 10px;
3606
+ z-index: 1;
3607
+ display: inline-flex;
3608
+ align-items: center;
3609
+ justify-content: center;
3610
+ width: auto;
3611
+ min-width: 0;
3612
+ height: 18px;
3613
+ padding: 0 2px;
3614
+ border: 0;
3615
+ border-radius: 0;
3616
+ color: var(--tl-accent);
3617
+ font-size: 11px;
3618
+ font-weight: 550;
3619
+ background: transparent;
3620
+ opacity: 0;
3621
+ transform: translateX(4px);
3622
+ transition: opacity 120ms ease, transform 120ms ease, color 120ms ease;
3623
+ }
3624
+
3625
+ #codex-overleaf-panel .recent-projects-row-wrap:hover .recent-projects-row-expand,
3626
+ #codex-overleaf-panel .recent-projects-row-expand:focus-visible,
3627
+ #codex-overleaf-panel .recent-projects-row-wrap[data-expanded="true"] .recent-projects-row-expand {
3628
+ opacity: 1;
3629
+ transform: translateX(0);
3630
+ }
3631
+
3632
+ #codex-overleaf-panel .recent-projects-row-expand:hover {
3633
+ background: transparent;
3634
+ color: var(--tl-accent);
3635
+ text-decoration: underline;
3636
+ }
3637
+
3638
+ #codex-overleaf-panel .recent-projects-row-wrap[data-expanded="true"] .recent-projects-row-expand {
3639
+ color: var(--tl-accent);
3640
+ background: transparent;
3641
+ }
3642
+
3643
+ #codex-overleaf-panel .recent-projects-sessions {
3644
+ display: grid;
3645
+ gap: 2px;
3646
+ border-left: 2px solid var(--tl-border);
3647
+ margin: 2px 0 6px 10px;
3648
+ padding-left: 8px;
3649
+ }
3650
+
3651
+ #codex-overleaf-panel .recent-projects-sessions-empty {
3652
+ color: var(--tl-fg-4);
3653
+ font-size: 11px;
3654
+ padding: 4px 2px;
3655
+ }
3656
+
3657
+ #codex-overleaf-panel .recent-projects-session-row {
3658
+ display: flex;
3659
+ align-items: center;
3660
+ gap: 6px;
3661
+ min-width: 0;
3662
+ border-radius: var(--tl-r-sm);
3663
+ padding: 3px 4px;
3664
+ }
3665
+
3666
+ #codex-overleaf-panel .recent-projects-session-row:hover {
3667
+ background: var(--tl-hover);
3668
+ }
3669
+
3670
+ #codex-overleaf-panel .recent-projects-session-row[data-running="true"] .recent-projects-session-title::before {
3671
+ content: "";
3672
+ display: inline-block;
3673
+ width: 7px;
3674
+ height: 7px;
3675
+ margin-right: 6px;
3676
+ border: 2px solid rgba(78, 201, 176, 0.25);
3677
+ border-top-color: var(--tl-run);
3678
+ border-radius: 50%;
3679
+ vertical-align: -1px;
3680
+ animation: codex-session-spin 800ms linear infinite;
3681
+ }
3682
+
3683
+ #codex-overleaf-panel .recent-projects-session-title {
3684
+ flex: 1 1 auto;
3685
+ min-width: 0;
3686
+ overflow: hidden;
3687
+ color: var(--tl-fg-2);
3688
+ font-size: 12px;
3689
+ text-overflow: ellipsis;
3690
+ white-space: nowrap;
3691
+ }
3692
+
3693
+ #codex-overleaf-panel .recent-projects-session-time {
3694
+ flex: 0 0 auto;
3695
+ color: var(--tl-fg-4);
3696
+ font-size: 11px;
3697
+ white-space: nowrap;
3698
+ }
3699
+
3700
+ #codex-overleaf-panel .recent-projects-session-action {
3701
+ flex: 0 0 auto;
3702
+ width: 22px;
3703
+ height: 22px;
3704
+ border-radius: var(--tl-r-sm);
3705
+ color: var(--tl-fg-3);
3706
+ opacity: 0.75;
3707
+ }
3708
+
3709
+ #codex-overleaf-panel .recent-projects-session-action:hover {
3710
+ background: var(--tl-hover);
3711
+ opacity: 1;
3712
+ }
3713
+
3714
+ #codex-overleaf-panel .recent-projects-session-action--delete:hover {
3715
+ color: var(--tl-fail);
3716
+ }
3717
+
3718
+ #codex-overleaf-panel .recent-projects-session-action:disabled {
3719
+ cursor: not-allowed;
3720
+ opacity: 0.3;
3721
+ }
3722
+
3723
+ #codex-overleaf-panel .recent-projects-session-rename-input {
3724
+ flex: 1 1 auto;
3725
+ min-width: 0;
3726
+ border: 1px solid var(--tl-accent);
3727
+ border-radius: var(--tl-r-sm);
3728
+ background: var(--tl-surface-0);
3729
+ color: var(--tl-fg-1);
3730
+ font-size: 12px;
3731
+ padding: 2px 6px;
3732
+ }
3733
+
3734
+ #codex-overleaf-panel [data-recent-projects-row] {
3735
+ display: grid;
3736
+ grid-template-columns: minmax(0, 1fr) auto;
3737
+ grid-template-areas:
3738
+ "name time"
3739
+ "badge sessions";
3740
+ align-items: baseline;
3741
+ gap: 6px 12px;
3742
+ width: 100%;
3743
+ border: 0;
3744
+ border-radius: 6px;
3745
+ background: transparent;
3746
+ color: var(--tl-fg-2);
3747
+ padding: 14px 86px 14px 14px;
3748
+ cursor: pointer;
3749
+ text-align: left;
3750
+ }
3751
+
3752
+ #codex-overleaf-panel [data-recent-projects-row]:hover:not(:disabled) {
3753
+ background: linear-gradient(90deg, rgba(128, 128, 128, 0.08), transparent 72%);
3754
+ }
3755
+
3756
+ #codex-overleaf-panel [data-recent-projects-row]:disabled,
3757
+ #codex-overleaf-panel [data-recent-projects-row][aria-disabled="true"] {
3758
+ cursor: default;
3759
+ opacity: 0.55;
3760
+ }
3761
+
3762
+ #codex-overleaf-panel .recent-projects-row-name {
3763
+ grid-area: name;
3764
+ color: var(--tl-fg-1);
3765
+ font-weight: 650;
3766
+ font-size: 13.5px;
3767
+ overflow: hidden;
3768
+ text-overflow: ellipsis;
3769
+ white-space: nowrap;
3770
+ }
3771
+
3772
+ #codex-overleaf-panel .recent-projects-row-time {
3773
+ grid-area: time;
3774
+ color: var(--tl-fg-3);
3775
+ font-size: 11px;
3776
+ letter-spacing: 0.01em;
3777
+ white-space: nowrap;
3778
+ }
3779
+
3780
+ #codex-overleaf-panel .recent-projects-row-summary {
3781
+ grid-area: summary;
3782
+ color: var(--tl-fg-2);
3783
+ font-size: 12px;
3784
+ line-height: 1.4;
3785
+ word-break: break-word;
3786
+ }
3787
+
3788
+ #codex-overleaf-panel .recent-projects-row-summary:empty {
3789
+ display: none;
3790
+ }
3791
+
3792
+ #codex-overleaf-panel .recent-projects-row-warning {
3793
+ grid-area: badge;
3794
+ color: var(--tl-review);
3795
+ font-size: 11px;
3796
+ margin-top: 2px;
3797
+ }
3798
+
3799
+ #codex-overleaf-panel .recent-projects-row-badge {
3800
+ grid-area: badge;
3801
+ justify-self: start;
3802
+ display: inline-flex;
3803
+ align-items: center;
3804
+ gap: 5px;
3805
+ padding: 0;
3806
+ margin-top: 0;
3807
+ border: 0;
3808
+ border-radius: 0;
3809
+ font-size: 10.5px;
3810
+ letter-spacing: 0.03em;
3811
+ line-height: 1.4;
3812
+ font-weight: 500;
3813
+ text-transform: uppercase;
3814
+ opacity: 0.92;
3815
+ }
3816
+
3817
+ #codex-overleaf-panel .recent-projects-row-badge::before {
3818
+ content: "";
3819
+ display: inline-block;
3820
+ width: 6px;
3821
+ height: 6px;
3822
+ border-radius: 999px;
3823
+ background: currentColor;
3824
+ opacity: 0.85;
3825
+ }
3826
+
3827
+ /* Status badge palette. All ten values from spec §5.10 — reuses the
3828
+ existing per-project run-card hues so the dashboard reads identically to
3829
+ the in-project surface. */
3830
+ #codex-overleaf-panel .recent-projects-row-badge.badge-running {
3831
+ color: var(--tl-run);
3832
+ }
3833
+
3834
+ #codex-overleaf-panel .recent-projects-row-badge.badge-pending {
3835
+ color: var(--tl-fg-3);
3836
+ }
3837
+
3838
+ #codex-overleaf-panel .recent-projects-row-badge.badge-accepted,
3839
+ #codex-overleaf-panel .recent-projects-row-badge.badge-completed,
3840
+ #codex-overleaf-panel .recent-projects-row-badge.badge-background-completed {
3841
+ color: var(--tl-ok);
3842
+ }
3843
+
3844
+ #codex-overleaf-panel .recent-projects-row-badge.badge-rejected {
3845
+ color: var(--tl-fg-2);
3846
+ }
3847
+
3848
+ #codex-overleaf-panel .recent-projects-row-badge.badge-needs-review,
3849
+ #codex-overleaf-panel .recent-projects-row-badge.badge-interrupted,
3850
+ #codex-overleaf-panel .recent-projects-row-badge.badge-needs-review-after-navigation,
3851
+ #codex-overleaf-panel .recent-projects-row-badge.badge-stale {
3852
+ color: var(--tl-review);
3853
+ }
3854
+
3855
+ #codex-overleaf-panel .recent-projects-row-badge.badge-failed,
3856
+ #codex-overleaf-panel .recent-projects-row-badge.badge-abandoned-after-navigation {
3857
+ color: var(--tl-fail);
3858
+ }
3859
+
3860
+ #codex-overleaf-panel .recent-projects-settings-entry {
3861
+ display: flex;
3862
+ align-items: center;
3863
+ justify-content: space-between;
3864
+ margin-top: auto;
3865
+ padding: 10px 12px;
3866
+ border: 1px solid var(--tl-border);
3867
+ border-radius: 6px;
3868
+ background: var(--tl-surface-1);
3869
+ color: var(--tl-fg-2);
3870
+ font-size: 12px;
3871
+ cursor: pointer;
3872
+ }
3873
+
3874
+ #codex-overleaf-panel .recent-projects-settings-entry:hover {
3875
+ border-color: var(--tl-border-strong);
3876
+ background: var(--tl-surface-2);
3877
+ }
3878
+
3879
+ #codex-overleaf-panel .recent-projects-settings-entry-label::after {
3880
+ content: "›";
3881
+ margin-left: 8px;
3882
+ color: var(--tl-fg-3);
3883
+ }
3884
+
3885
+ /* Spec §5.9 — when the panel opens settings in account scope, hide the
3886
+ project-only sections so only locale / display / global skills + the
3887
+ extension diagnostics surface remain visible. */
3888
+ #codex-overleaf-panel[data-settings-scope="account"]
3889
+ .codex-project-settings-panel
3890
+ .codex-project-settings-scope:not(.codex-project-settings-scope--global) {
3891
+ display: none;
3892
+ }
3893
+
3894
+ /* v1.7.5: dashboard "Show all projects" expander below the 10-row fold. */
3895
+ #codex-overleaf-panel .recent-projects-show-all {
3896
+ display: block;
3897
+ width: 100%;
3898
+ margin-top: 6px;
3899
+ padding: 6px 10px;
3900
+ background: transparent;
3901
+ border: 1px dashed var(--tl-border, #2a2a2a);
3902
+ border-radius: 6px;
3903
+ color: var(--tl-fg-3, #8a8a8a);
3904
+ font-size: 11.5px;
3905
+ cursor: pointer;
3906
+ }
3907
+ #codex-overleaf-panel .recent-projects-show-all:hover {
3908
+ color: var(--tl-fg-1, #e4e4e4);
3909
+ border-color: var(--tl-fg-3, #8a8a8a);
3910
+ }
3911
+
3912
+ /* v1.7.5: jump-to-turn dropdown pinned above the run history. */
3913
+ #codex-overleaf-panel .run-turn-nav {
3914
+ display: block;
3915
+ width: 100%;
3916
+ margin: 0 0 8px;
3917
+ padding: 4px 8px;
3918
+ background: var(--tl-surface-1, #181818);
3919
+ border: 1px solid var(--tl-border, #2a2a2a);
3920
+ border-radius: 6px;
3921
+ color: var(--tl-fg-3, #8a8a8a);
3922
+ font-size: 11.5px;
3923
+ }
3924
+
3925
+ /* v1.7.5: change-history card (Settings) — the audit log's read path. */
3926
+ #codex-overleaf-panel .codex-history-filter {
3927
+ width: 100%;
3928
+ box-sizing: border-box;
3929
+ margin-bottom: 8px;
3930
+ }
3931
+ #codex-overleaf-panel .codex-history-list {
3932
+ max-height: 260px;
3933
+ overflow-y: auto;
3934
+ }
3935
+ #codex-overleaf-panel .codex-history-row {
3936
+ padding: 6px 0;
3937
+ border-top: 1px solid var(--tl-border, #232323);
3938
+ font-size: 11.5px;
3939
+ }
3940
+ #codex-overleaf-panel .codex-history-row:first-child {
3941
+ border-top: none;
3942
+ }
3943
+ #codex-overleaf-panel .codex-history-when {
3944
+ color: var(--tl-fg-3, #8a8a8a);
3945
+ font-size: 10.5px;
3946
+ }
3947
+ #codex-overleaf-panel .codex-history-task {
3948
+ color: var(--tl-fg-1, #e4e4e4);
3949
+ margin: 2px 0;
3950
+ overflow: hidden;
3951
+ text-overflow: ellipsis;
3952
+ white-space: nowrap;
3953
+ }
3954
+ #codex-overleaf-panel .codex-history-files {
3955
+ color: var(--tl-fg-3, #8a8a8a);
3956
+ word-break: break-all;
3957
+ }
3958
+ #codex-overleaf-panel .codex-history-empty {
3959
+ color: var(--tl-fg-3, #8a8a8a);
3960
+ font-size: 11.5px;
3961
+ }
3962
+
3963
+ /* v1.7.5: reload-orphaned runs show as interrupted (amber), not failed. */
3964
+ #codex-overleaf-panel .transcript-turn[data-status="interrupted"] .run-status {
3965
+ color: #d7ba7d;
3966
+ }
3967
+
3968
+ /* v1.8.0: in-session run search + history-row links + jump flash. */
3969
+ #codex-overleaf-panel .run-search {
3970
+ display: block;
3971
+ width: 100%;
3972
+ box-sizing: border-box;
3973
+ margin: 0 0 6px;
3974
+ padding: 4px 8px;
3975
+ background: var(--tl-surface-1, #181818);
3976
+ border: 1px solid var(--tl-border, #2a2a2a);
3977
+ border-radius: 6px;
3978
+ color: var(--tl-fg-1, #e4e4e4);
3979
+ font-size: 11.5px;
3980
+ }
3981
+ #codex-overleaf-panel .codex-history-row--linked {
3982
+ cursor: pointer;
3983
+ }
3984
+ #codex-overleaf-panel .codex-history-row--linked:hover {
3985
+ background: var(--tl-hover, rgba(255, 255, 255, 0.04));
3986
+ }
3987
+ #codex-overleaf-panel .run-card--flash {
3988
+ animation: codex-jump-flash 1.6s ease-out;
3989
+ }
3990
+ @keyframes codex-jump-flash {
3991
+ 0%, 40% { box-shadow: inset 0 0 0 1px var(--tl-accent, #4dd0be); }
3992
+ 100% { box-shadow: none; }
3993
+ }
3994
+
3995
+ /* v1.8.0: per-file undo selection list inside the confirm overlay. */
3996
+ #codex-overleaf-panel .codex-undo-file-list {
3997
+ max-height: 180px;
3998
+ overflow-y: auto;
3999
+ margin: 8px 0;
4000
+ text-align: left;
4001
+ }
4002
+ #codex-overleaf-panel .codex-undo-file-item {
4003
+ display: block;
4004
+ padding: 3px 0;
4005
+ font-size: 11.5px;
4006
+ color: var(--tl-fg-1, #e4e4e4);
4007
+ word-break: break-all;
4008
+ cursor: pointer;
4009
+ }
4010
+ #codex-overleaf-panel .codex-undo-file-item--all {
4011
+ border-bottom: 1px solid var(--tl-border, #2a2a2a);
4012
+ padding-bottom: 6px;
4013
+ margin-bottom: 4px;
4014
+ color: var(--tl-fg-3, #8a8a8a);
4015
+ }
4016
+
4017
+ /* v1.8.1: dashboard trust & polish. */
4018
+ #codex-overleaf-panel .recent-projects-loading::before {
4019
+ content: '';
4020
+ display: inline-block;
4021
+ box-sizing: border-box;
4022
+ width: 10px;
4023
+ height: 10px;
4024
+ margin-right: 6px;
4025
+ vertical-align: -1px;
4026
+ border: 1.5px solid rgba(78, 201, 176, 0.28);
4027
+ border-top-color: var(--tl-run, #4ec9b0);
4028
+ border-radius: 50%;
4029
+ animation: tl-spin 800ms linear infinite;
4030
+ }
4031
+ /* v1.8.2: the expand toggle stays a slim icon strip — modestly wider than
4032
+ the original 26px for the miss-click fix, but proportionate to the row. */
4033
+ #codex-overleaf-panel .recent-projects-row-expand {
4034
+ width: 32px;
4035
+ }
4036
+ #codex-overleaf-panel .recent-projects-row-sessions {
4037
+ color: var(--tl-fg-3);
4038
+ font-size: 10.5px;
4039
+ }
4040
+ #codex-overleaf-panel .recent-projects-session-row--linked {
4041
+ cursor: pointer;
4042
+ }
4043
+ #codex-overleaf-panel .recent-projects-session-row--linked:hover {
4044
+ background: var(--tl-hover, rgba(255, 255, 255, 0.04));
4045
+ }
4046
+ #codex-overleaf-panel .recent-projects-degraded [data-recent-projects-retry] {
4047
+ margin-top: 8px;
4048
+ }