dsh-synapse 0.4.0 → 0.4.1

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 (13) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +81 -81
  3. package/app.js +1694 -1140
  4. package/client.js +241 -217
  5. package/cordis.patch.yml +13 -13
  6. package/deepseek-mark.svg +3 -3
  7. package/docs/architecture.md +104 -104
  8. package/docs/development.md +137 -137
  9. package/docs/en/README.md +161 -161
  10. package/docs/zh-CN/README.md +154 -154
  11. package/index.js +799 -772
  12. package/package.json +45 -44
  13. package/styles.css +420 -310
package/styles.css CHANGED
@@ -1,337 +1,447 @@
1
- :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1f2937; background: #f5f7fa; }
2
- * { box-sizing: border-box; }
3
- body { margin: 0; min-width: 320px; background: #f5f7fa; }
4
- button, select, textarea { font: inherit; }
5
- button { border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; cursor: pointer; min-height: 32px; padding: 0 11px; }
6
- button:hover { border-color: #9ca3af; background: #f3f4f6; color: #111827; }
7
- button:disabled { cursor: not-allowed; opacity: .5; }
8
- button.primary { border-color: #111827; background: #111827; color: #fff; }
9
- button.primary:hover { border-color: #000; background: #000; color: #fff; }
10
- .synapse-shell { --sidebar-width: 280px; --sidebar-half: 140px; height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: 42px minmax(0, 1fr); overflow: hidden; }
11
- .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; }
12
- .topbar { position: relative; grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border: 0; background: #fff; }
13
- .brand, .top-actions, .view-switch, .thread-card-head, .thread-meta, .detail-actions, .compare-title { display: flex; align-items: center; }
14
- .sidebar-brand-row { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 60px; flex: none; margin-bottom: 8px; padding: 8px 0 8px 4px; overflow: hidden; }
15
- .brand { gap: 8px; min-width: 0; flex: 1; }
16
- .brand::before { width: 31px; height: 26px; flex: none; content: ''; background: center / contain no-repeat url('/synapse/deepseek-mark.svg'); }
17
- .brand::after { content: '非线性工作台'; flex: none; border-radius: 3px; background: #111827; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap; }
18
- .brand-mark { display: none; }
19
- .brand strong { font-size: 20px; font-weight: 600; letter-spacing: 0; }
20
- .sidebar-toggle { display: inline-grid; width: 28px; height: 28px; min-height: 28px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #6b7280; }
21
- .sidebar-toggle:hover { border: 0; background: #eef0f2; color: #374151; }
22
- .sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
23
- .top-actions { gap: 10px; }
24
- .view-switch { position: fixed; z-index: 80; top: 12px; left: 50%; gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid #d1d5db; border-radius: 999px; background: rgba(255,255,255,.96); }
25
- .view-switch button { min-height: 28px; border: 0; border-radius: 999px; background: transparent; padding: 0 11px; color: #64748b; font-size: 12px; font-weight: 650; }
26
- .view-switch button:hover { background: #e5e7eb; color: #111827; }
27
- .view-switch button.active { background: #111827; color: #fff; }
28
- .view-switch button:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
29
- .canvas-controls { position: fixed; z-index: 80; top: 14px; right: 16px; display: flex; align-items: center; gap: 5px; }
30
- .canvas-controls button { min-width: 32px; padding: 0 8px; font-size: 12px; }
31
- .canvas-controls span { min-width: 42px; color: #64748b; font-size: 12px; text-align: center; }
32
- .sidebar { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 6px 12px; border-right: 1px solid #e5e7eb; background: #f8f9fa; }
33
- .new-workspace { display: flex; width: calc(100% - 4px); min-height: auto; height: 38px; align-items: center; justify-content: center; gap: 6px; margin: 0 2px 8px; border-color: rgba(0,0,0,.1); border-radius: 12px; background: #fff; padding: 8px 16px; color: #111827; font-size: 14px; font-weight: 500; }
34
- .new-session-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
35
- .new-workspace:hover { border-color: rgba(0,0,0,.16); background: #f7f7f8; color: #111827; }
36
- .workspace-label, .sidebar-heading { color: #7c8798; font-size: 14px; font-weight: 400; letter-spacing: 0; }
37
- .workspace-label { display: grid; gap: 9px; margin: 16px 4px 0; }
38
- .workspace-select { position: relative; display: block; }
39
- .workspace-select svg { position: absolute; top: 50%; left: 9px; width: 15px; height: 15px; transform: translateY(-50%); fill: none; pointer-events: none; stroke: #64748b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
40
- .workspace-label select { width: 100%; min-height: 33px; border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; padding: 0 28px 0 30px; }
41
- .sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 23px 4px 0; padding: 0; }
42
- .sidebar-heading button { display: grid; width: 24px; min-height: 24px; place-items: center; padding: 0; color: #111827; font-size: 17px; }
43
- .thread-tree { display: grid; gap: 3px; overflow: auto; padding-bottom: 12px; }
44
- .tree-row { display: flex; min-width: 0; align-items: center; gap: 8px; border: 0; background: transparent; color: #4b5563; text-align: left; }
45
- .tree-row:hover { background: #f3f4f6; }
46
- .tree-row.active { background: #e5e7eb; color: #111827; font-weight: 650; }
47
- .tree-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
48
- .tree-row i { margin-left: auto; color: #94a3b8; font-size: 10px; font-style: normal; }
49
- .tree-dot, .topic-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--thread-color, #374151); }
50
- .tree-row { --thread-color: #3478f6 !important; }
51
- .tree-empty { padding: 12px 5px; color: #94a3b8; font-size: 12px; }
52
- .main-stage { position: relative; grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; background: #f5f7fa; }
53
- .sidebar-collapsed .sidebar { align-items: center; padding: 18px 10px 6px; }
54
- .sidebar-collapsed .sidebar-brand-row { width: 36px; height: 36px; margin-bottom: 12px; padding: 0; }
55
- .sidebar-collapsed .brand { display: none; }
56
- .sidebar-collapsed .sidebar-toggle { width: 36px; height: 36px; min-height: 36px; color: #111827; }
57
- .sidebar-collapsed .new-workspace { width: 36px; height: 36px; min-height: 36px; margin: 0 0 12px; border-color: transparent; background: transparent; padding: 0; }
58
- .sidebar-collapsed .new-workspace span, .sidebar-collapsed .workspace-label, .sidebar-collapsed .sidebar-heading, .sidebar-collapsed .thread-tree { display: none; }
59
- .status-message { position: absolute; z-index: 6; top: 12px; right: 16px; display: flex; align-items: center; gap: 10px; max-width: 400px; padding: 9px 10px 9px 13px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; box-shadow: 0 3px 10px rgba(127,29,29,.12); }
60
- .status-message span { flex: 1; line-height: 1.5; }
61
- .status-message button { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #b91c1c; font-size: 15px; line-height: 1; }
62
- .status-message button:hover { background: #fee2e2; }
63
- .main-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #fff; }
64
- .canvas-tabs { display: flex; height: 32px; flex: none; align-items: end; gap: 26px; padding: 0 24px; border-bottom: 1px solid #e5e7eb; background: #fff; }
65
- .canvas-tabs button { min-height: 32px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 0 2px; color: #8a919b; font-size: 13px; font-weight: 500; }
66
- .canvas-tabs button:hover { background: transparent; color: #3478f6; }
67
- .canvas-tabs button.active { border-bottom-color: #3478f6; color: #3478f6; }
68
- .canvas-tabs button:disabled { cursor: default; opacity: .4; }
69
- .canvas-view { display: flex; min-height: 0; flex: 1; }
70
- .canvas-viewport { position: relative; width: 100%; height: 100%; min-height: 0; flex: 1; overflow: hidden; background: #fff; cursor: grab; }
71
- .canvas-viewport.is-panning { cursor: grabbing; user-select: none; }
72
- .canvas-content { position: absolute; inset: 0; transform-origin: 0 0; }
1
+ :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1f2937; background: #f5f7fa; }
2
+ * { box-sizing: border-box; }
3
+ body { margin: 0; min-width: 320px; background: #f5f7fa; }
4
+ button, select, textarea { font: inherit; }
5
+ button { border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; cursor: pointer; min-height: 32px; padding: 0 11px; }
6
+ button:hover { border-color: #9ca3af; background: #f3f4f6; color: #111827; }
7
+ button:disabled { cursor: not-allowed; opacity: .5; }
8
+ button.primary { border-color: #111827; background: #111827; color: #fff; }
9
+ button.primary:hover { border-color: #000; background: #000; color: #fff; }
10
+ .synapse-shell { --sidebar-width: 280px; --sidebar-half: 140px; height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: 42px minmax(0, 1fr); overflow: hidden; }
11
+ .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; }
12
+ .topbar { position: relative; grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; border: 0; background: #fff; }
13
+ .brand, .top-actions, .view-switch, .thread-card-head, .thread-meta, .detail-actions, .compare-title { display: flex; align-items: center; }
14
+ .sidebar-brand-row { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 60px; flex: none; margin-bottom: 8px; padding: 8px 0 8px 4px; overflow: hidden; }
15
+ .brand { gap: 8px; min-width: 0; flex: 1; }
16
+ .brand::before { width: 31px; height: 26px; flex: none; content: ''; background: center / contain no-repeat url('/synapse/deepseek-mark.svg'); }
17
+ .brand::after { content: '非线性工作台'; flex: none; border-radius: 3px; background: #111827; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 400; line-height: 1; white-space: nowrap; }
18
+ .brand-mark { display: none; }
19
+ .brand strong { font-size: 20px; font-weight: 600; letter-spacing: 0; }
20
+ .sidebar-toggle { display: inline-grid; width: 28px; height: 28px; min-height: 28px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #6b7280; }
21
+ .sidebar-toggle:hover { border: 0; background: #eef0f2; color: #374151; }
22
+ .sidebar-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
23
+ .top-actions { gap: 10px; }
24
+ .view-switch { position: fixed; z-index: 80; top: 12px; left: 50%; gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid #d1d5db; border-radius: 999px; background: rgba(255,255,255,.96); }
25
+ .view-switch button { min-height: 28px; border: 0; border-radius: 999px; background: transparent; padding: 0 11px; color: #64748b; font-size: 12px; font-weight: 650; }
26
+ .view-switch button:hover { background: #e5e7eb; color: #111827; }
27
+ .view-switch button.active { background: #111827; color: #fff; }
28
+ .view-switch button:focus-visible { outline: 2px solid #111827; outline-offset: 2px; }
29
+ .canvas-controls { position: fixed; z-index: 80; top: 14px; right: 16px; display: flex; align-items: center; gap: 5px; }
30
+ .canvas-controls button { min-width: 32px; padding: 0 8px; font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
31
+ .canvas-controls button svg { width: 14px; height: 14px; flex: none; }
32
+ .canvas-controls span { min-width: 42px; color: #64748b; font-size: 12px; text-align: center; }
33
+ .sidebar { grid-row: 1 / -1; display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 6px 12px; border-right: 1px solid #e5e7eb; background: #f8f9fa; }
34
+ .new-workspace { display: flex; width: calc(100% - 4px); min-height: auto; height: 38px; align-items: center; justify-content: center; gap: 6px; margin: 0 2px 8px; border-color: rgba(0,0,0,.1); border-radius: 12px; background: #fff; padding: 8px 16px; color: #111827; font-size: 14px; font-weight: 500; }
35
+ .new-session-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
36
+ .new-workspace:hover { border-color: rgba(0,0,0,.16); background: #f7f7f8; color: #111827; }
37
+ .workspace-label, .sidebar-heading { color: #7c8798; font-size: 14px; font-weight: 400; letter-spacing: 0; }
38
+ .workspace-label { display: grid; gap: 9px; margin: 16px 4px 0; }
39
+ .workspace-select { position: relative; display: block; }
40
+ .workspace-select svg { position: absolute; top: 50%; left: 9px; width: 15px; height: 15px; transform: translateY(-50%); fill: none; pointer-events: none; stroke: #64748b; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
41
+ .workspace-label select { width: 100%; min-height: 33px; border: 1px solid #d8dee8; border-radius: 6px; background: #fff; color: #374151; padding: 0 28px 0 30px; }
42
+ .sidebar-heading { display: flex; align-items: center; justify-content: space-between; margin: 23px 4px 0; padding: 0; }
43
+ .sidebar-heading button { display: grid; width: 24px; min-height: 24px; place-items: center; padding: 0; color: #111827; font-size: 17px; }
44
+ .thread-tree { display: grid; gap: 3px; overflow: auto; padding-bottom: 12px; }
45
+ .tree-row { display: flex; min-width: 0; align-items: center; gap: 8px; border: 0; background: transparent; color: #4b5563; text-align: left; }
46
+ .tree-row:hover { background: #f3f4f6; }
47
+ .tree-row.active { background: #e5e7eb; color: #111827; font-weight: 650; }
48
+ .tree-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
49
+ .tree-row i { margin-left: auto; color: #94a3b8; font-size: 10px; font-style: normal; }
50
+ .tree-dot, .topic-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--thread-color, #374151); }
51
+ .tree-row { --thread-color: #3478f6 !important; }
52
+ .tree-empty { padding: 12px 5px; color: #94a3b8; font-size: 12px; }
53
+ .main-stage { position: relative; grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; background: #f5f7fa; }
54
+ .sidebar-collapsed .sidebar { align-items: center; padding: 18px 10px 6px; }
55
+ .sidebar-collapsed .sidebar-brand-row { width: 36px; height: 36px; margin-bottom: 12px; padding: 0; }
56
+ .sidebar-collapsed .brand { display: none; }
57
+ .sidebar-collapsed .sidebar-toggle { width: 36px; height: 36px; min-height: 36px; color: #111827; }
58
+ .sidebar-collapsed .new-workspace { width: 36px; height: 36px; min-height: 36px; margin: 0 0 12px; border-color: transparent; background: transparent; padding: 0; }
59
+ .sidebar-collapsed .new-workspace span, .sidebar-collapsed .workspace-label, .sidebar-collapsed .sidebar-heading, .sidebar-collapsed .thread-tree { display: none; }
60
+ .status-message { position: absolute; z-index: 6; top: 12px; right: 16px; display: flex; align-items: center; gap: 10px; max-width: 400px; padding: 9px 10px 9px 13px; border: 1px solid #fecaca; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 12px; box-shadow: 0 3px 10px rgba(127,29,29,.12); }
61
+ .status-message span { flex: 1; line-height: 1.5; }
62
+ .status-message button { display: grid; width: 22px; height: 22px; flex: none; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #b91c1c; font-size: 15px; line-height: 1; }
63
+ .status-message button:hover { background: #fee2e2; }
64
+ .main-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; background: #fff; }
65
+ .canvas-tabs { display: flex; height: 32px; flex: none; align-items: end; gap: 26px; padding: 0 24px; border-bottom: 1px solid #e5e7eb; background: #fff; }
66
+ .canvas-tabs button { min-height: 32px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 0 2px; color: #8a919b; font-size: 13px; font-weight: 500; }
67
+ .canvas-tabs button:hover { background: transparent; color: #3478f6; }
68
+ .canvas-tabs button.active { border-bottom-color: #3478f6; color: #3478f6; }
69
+ .canvas-tabs button:disabled { cursor: default; opacity: .4; }
70
+ .canvas-view { position: relative; display: flex; min-height: 0; flex: 1; }
71
+ /* The canvas void is light gray (matching the DSH main stage) instead of pure
72
+ white, and the pan cursor is a custom dark hand with a light outline so it
73
+ stays visible on both light and dark canvases (system light-theme pointers
74
+ vanish on a white void). */
75
+ .canvas-viewport { position: relative; width: 100%; height: 100%; min-height: 0; flex: 1; overflow: hidden; background: #f5f7fa; cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><g fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g><g fill='none' stroke='%23374151' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g></svg>") 11 12, grab; }
76
+ .canvas-viewport.is-panning { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'><g fill='none' stroke='%23ffffff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g><g fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 11V6a2 2 0 0 0-4 0v5M14 10V4a2 2 0 0 0-4 0v2M10 10.5V6a2 2 0 0 0-4 0v8M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'/></g></svg>") 11 12, grabbing; user-select: none; }
77
+ /* While panning, promote the canvas to its own composited layer so the
78
+ browser GPU-transforms the whole subtree instead of repainting every card
79
+ and connector per frame. Zoom drops the layer to avoid upscaling a stale
80
+ raster (see zoomCanvas in app.js). */
81
+ .canvas-viewport.is-panning .canvas-content { will-change: transform; }
82
+ .canvas-content { position: absolute; inset: 0; transform-origin: 0 0; }
73
83
  .connectors { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
74
84
  .connectors path { fill: none; stroke: #aebbc9; stroke-width: 1.5; }
85
+ .connectors path.active-connector { stroke: #3478f6; }
75
86
  .connectors .draft-connector { stroke: #3478f6; stroke-dasharray: 5 4; }
76
- .cards-layer { position: absolute; inset: 0; }
77
- .thread-card { position: absolute; display: grid; width: 310px; height: 276px; grid-template-rows: auto auto minmax(0, 1fr) auto; border: 1px solid #d8e0e8; border-radius: 7px; background: #fff; box-shadow: 0 3px 11px rgba(33,48,67,.08); overflow: visible; }
78
- .thread-card:hover { border-color: #9ca3af; box-shadow: 0 8px 20px rgba(33,48,67,.13); }
79
- .thread-card.active { outline: 2px solid rgba(17,24,39,.2); border-color: #6b7280; }
87
+ .cards-layer { position: absolute; inset: 0; }
88
+ .thread-card { position: absolute; display: grid; width: 310px; height: 276px; grid-template-rows: auto auto minmax(0, 1fr) auto; border: 1px solid #d8e0e8; border-radius: 7px; background: #fff; box-shadow: 0 3px 11px rgba(33,48,67,.08); overflow: visible; }
89
+ .thread-card:hover { border-color: #9ca3af; box-shadow: 0 8px 20px rgba(33,48,67,.13); }
80
90
  .thread-card.selected { box-shadow: 0 0 0 2px rgba(17,24,39,.16), 0 8px 20px rgba(33,48,67,.13); }
81
- .node-handle { position: absolute; top: -8px; left: 50%; display: grid; width: 28px; height: 15px; min-height: 15px; place-items: center; transform: translateX(-50%); border: 1px solid #d8e0e8; border-radius: 4px; background: #fff; cursor: grab; padding: 0; }
82
- .node-handle::after { content: '...'; display: block; margin: -5px 0 0 2px; color: #94a3b8; font-size: 11px; letter-spacing: 1.5px; line-height: 1; }
83
- .thread-card-head { gap: 8px; min-width: 0; padding: 15px 12px 8px; }
84
- .thread-card-head .topic-dot { background: var(--thread-color); }
85
- .thread-title { min-width: 0; flex: 1; min-height: 22px; overflow: hidden; border: 0; background: transparent; padding: 0; color: #1f2937; font-size: 13px; font-weight: 720; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
86
- .thread-title:hover { background: transparent; color: #111827; }
87
- .graph-continue-button, .graph-fold-button, .graph-branch-button { position: absolute; right: -12px; z-index: 4; display: grid; width: 24px; height: 24px; min-height: 24px; place-items: center; border-color: #9ca3af; border-radius: 50%; background: #fff; padding: 0; color: #111827; }
88
- .graph-continue-button, .graph-fold-button { top: 50%; transform: translateY(-50%); }
89
- .graph-branch-button { top: calc(50% + 30px); transform: translateY(-50%); }
90
- .graph-continue-button svg, .graph-fold-button svg, .graph-branch-button svg { width: 13px; height: 13px; }
91
- .graph-continue-button svg, .graph-fold-button svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
92
- .graph-branch-button svg { fill: currentColor; }
91
+ .node-handle { position: absolute; top: -8px; left: 50%; display: grid; width: 28px; height: 15px; min-height: 15px; place-items: center; transform: translateX(-50%); border: 1px solid #d8e0e8; border-radius: 4px; background: #fff; cursor: grab; padding: 0; }
92
+ .node-handle::after { content: '...'; display: block; margin: -5px 0 0 2px; color: #94a3b8; font-size: 11px; letter-spacing: 1.5px; line-height: 1; }
93
+ .thread-card-head { gap: 8px; min-width: 0; padding: 15px 12px 8px; }
94
+ .thread-card-head .topic-dot { background: var(--thread-color); }
95
+ .thread-title { min-width: 0; flex: 1; min-height: 22px; overflow: hidden; border: 0; background: transparent; padding: 0; color: #1f2937; font-size: 13px; font-weight: 720; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
96
+ .thread-title:hover { background: transparent; color: #111827; }
97
+ .graph-continue-button, .graph-fold-button, .graph-branch-button { position: absolute; right: -12px; z-index: 4; display: grid; width: 24px; height: 24px; min-height: 24px; place-items: center; border-color: #9ca3af; border-radius: 50%; background: #fff; padding: 0; color: #111827; }
98
+ .graph-continue-button, .graph-fold-button { top: 50%; transform: translateY(-50%); }
99
+ .graph-branch-button { top: calc(50% + 30px); transform: translateY(-50%); }
100
+ .graph-continue-button svg, .graph-fold-button svg, .graph-branch-button svg { width: 13px; height: 13px; }
101
+ .graph-continue-button svg, .graph-fold-button svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
102
+ .graph-branch-button svg { fill: currentColor; }
93
103
  .graph-continue-button:hover, .graph-fold-button:hover, .graph-branch-button:hover { border-color: #111827; background: #f3f4f6; }
94
104
  .graph-continue-button:focus-visible, .graph-fold-button:focus-visible, .graph-branch-button:focus-visible { outline: 2px solid #3478f6; outline-offset: 2px; }
105
+ .selection-followup { position: fixed; z-index: 90; display: inline-flex; min-height: 30px; align-items: center; gap: 4px; transform: translateX(-100%); border-color: #3478f6; border-radius: 6px; background: #3478f6; padding: 0 8px; color: #fff; font-size: 12px; font-weight: 650; line-height: 1; box-shadow: 0 4px 12px rgba(37,99,235,.24); user-select: none; }
106
+ .selection-followup:hover { border-color: #2563eb; background: #2563eb; color: #fff; }
107
+ .selection-followup svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
108
+ .selection-followup[hidden] { display: none; }
95
109
  .thread-meta { gap: 7px; padding: 0 12px; color: #94a3b8; font-size: 10px; }
96
110
  .thread-meta span + span::before { content: '·'; margin-right: 7px; }
97
- .thread-answer { min-width: 0; min-height: 0; margin: 10px 14px; overflow-x: hidden; overflow-y: auto; color: #526174; font-size: 12px; line-height: 1.58; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-color: #9ca3af transparent; scrollbar-width: thin; }
98
- .thread-answer::-webkit-scrollbar { width: 6px; height: 0; }
99
- .thread-answer::-webkit-scrollbar-track { background: transparent; }
100
- .thread-answer::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #9ca3af; background-clip: padding-box; }
101
- .thread-answer::-webkit-scrollbar-thumb:hover { background: #6b7280; }
102
- .thread-answer p { margin: 0 0 8px; overflow-wrap: anywhere; }
103
- .thread-answer h1, .thread-answer h2, .thread-answer h3 { margin: 0 0 8px; color: #334155; font-size: 13px; line-height: 1.4; }
104
- .thread-answer ul, .thread-answer ol { margin: 0 0 8px; padding-left: 19px; }
105
- .thread-answer li + li { margin-top: 3px; }
106
- .thread-answer code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
107
- .thread-answer pre { margin: 0 0 8px; max-width: 100%; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 4px; background: #fff; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
108
- .thread-answer pre code { background: transparent; padding: 0; }
109
- .thread-answer table { display: block; max-width: 100%; margin: 0 0 8px; overflow-x: auto; border-collapse: collapse; font-size: 11px; }
110
- .thread-answer th, .thread-answer td { border: 1px solid #d8e0e8; padding: 4px 6px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
111
- .thread-answer th { background: #f5f7fa; font-weight: 720; }
112
- .thread-answer-empty { color: #94a3b8; }
111
+ .thread-meta .card-process-count { display: inline-flex; align-items: center; min-height: 18px; margin-left: auto; border-radius: 9px; background: #eef4ff; padding: 0 6px; color: #3478f6; font-size: 10px; font-weight: 650; white-space: nowrap; }
112
+ .thread-meta .card-process-count::before { content: none; }
113
+ .thread-meta .card-error-status { color: #b42318; font-weight: 650; }
114
+ .thread-answer { min-width: 0; min-height: 0; margin: 10px 14px; overflow-x: hidden; overflow-y: auto; color: #526174; font-size: 12px; line-height: 1.58; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-color: #9ca3af transparent; scrollbar-width: thin; }
115
+ .thread-answer::-webkit-scrollbar { width: 6px; height: 0; }
116
+ .thread-answer::-webkit-scrollbar-track { background: transparent; }
117
+ .thread-answer::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #9ca3af; background-clip: padding-box; }
118
+ .thread-answer::-webkit-scrollbar-thumb:hover { background: #6b7280; }
119
+ .thread-answer p { margin: 0 0 8px; overflow-wrap: anywhere; }
120
+ .thread-answer h1, .thread-answer h2, .thread-answer h3 { margin: 0 0 8px; color: #334155; font-size: 13px; line-height: 1.4; }
121
+ .thread-answer ul, .thread-answer ol { margin: 0 0 8px; padding-left: 19px; }
122
+ .thread-answer li + li { margin-top: 3px; }
123
+ .thread-answer code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 11px; }
124
+ .thread-answer pre { margin: 0 0 8px; max-width: 100%; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 4px; background: #fff; padding: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
125
+ .thread-answer pre code { background: transparent; padding: 0; }
126
+ .thread-answer table { display: block; max-width: 100%; margin: 0 0 8px; overflow-x: auto; border-collapse: collapse; font-size: 11px; }
127
+ .thread-answer th, .thread-answer td { border: 1px solid #d8e0e8; padding: 4px 6px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
128
+ .thread-answer th { background: #f5f7fa; font-weight: 720; }
129
+ .thread-answer-empty { color: #94a3b8; }
113
130
  .thread-answer-pending, .message-pending p { color: #374151; font-style: italic; }
114
- .thread-card footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 7px; border-top: 1px solid #edf0f3; }
115
- .thread-card footer button { min-height: 26px; padding: 0 6px; border: 0; color: #526174; font-size: 11px; }
116
- .thread-card footer button:hover { background: #f3f4f6; color: #111827; }
117
- .thread-card footer .compare-button { margin-right: auto; color: #374151; }
131
+ .thread-answer-error { display: -webkit-box; margin: 8px 0 0; overflow: hidden; color: #b42318; font-weight: 620; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
132
+ .thread-card footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; padding: 7px; border-top: 1px solid #edf0f3; }
133
+ .thread-card footer button { min-height: 26px; padding: 0 7px; border: 0; display: inline-flex; align-items: center; gap: 4px; color: #526174; font-size: 11px; }
134
+ .thread-card footer button svg { width: 13px; height: 13px; flex: none; }
135
+ .thread-card footer button:hover { background: #f3f4f6; color: #111827; border-radius: 6px; }
136
+ .thread-card footer .compare-button { margin-right: auto; color: #374151; }
118
137
  .thread-card footer .compare-button.selected { background: #e5e7eb; color: #111827; }
119
- .draft-card { z-index: 2; height: auto; min-height: 228px; border-style: dashed; border-color: #9ca3af; box-shadow: 0 7px 19px rgba(17,24,39,.1); }
138
+ .card-inspector { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; display: flex; width: min(460px, calc(100% - 48px)); min-width: 360px; flex-direction: column; border-left: 1px solid #dbe3ec; background: #fff; opacity: 1; transform: translateX(0); transition: transform 180ms cubic-bezier(.23,1,.32,1), opacity 150ms ease-out; }
139
+ .card-inspector.is-opening, .card-inspector.is-closing { opacity: 0; transform: translateX(28px); }
140
+ .card-inspector-head { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 12px; align-items: start; padding: 18px 20px 12px; background: #fff; }
141
+ .card-inspector-meta { display: flex; align-items: center; gap: 7px; color: #8390a0; font-size: 11px; }
142
+ .card-inspector-meta span + span::before { content: '·'; margin-right: 7px; color: #bdc7d2; }
143
+ .card-inspector-meta span:last-child { color: inherit; font-weight: inherit; }
144
+ .card-inspector-meta .card-inspector-error-status { color: #b42318; font-weight: 650; }
145
+ .card-inspector-head h2 { margin: 8px 0 0; overflow-wrap: anywhere; color: #172033; font-size: 15px; font-weight: 680; line-height: 1.5; }
146
+ .card-inspector-close { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #718096; }
147
+ .card-inspector-close:hover { background: #eef2f6; color: #1f2937; }
148
+ .card-inspector-close:active, .card-inspector-actions button:active { transform: scale(.97); }
149
+ .card-inspector-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
150
+ .card-inspector-scroll { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow-y: auto; padding: 24px 20px 20px; overscroll-behavior: contain; }
151
+ .card-inspector-answer { color: #314057; font-size: 13px; line-height: 1.75; }
152
+ .card-inspector-answer > * + * { margin-top: 12px; }
153
+ .card-inspector-answer p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
154
+ .card-inspector-answer ul, .card-inspector-answer ol { margin: 0; padding-left: 20px; }
155
+ .card-inspector-answer li + li { margin-top: 5px; }
156
+ .card-inspector-answer h1, .card-inspector-answer h2, .card-inspector-answer h3 { margin: 0; color: #1e293b; font-size: 15px; line-height: 1.45; }
157
+ .card-inspector-answer blockquote { margin: 0; border-left: 3px solid #dbe3ec; padding-left: 10px; color: #64748b; }
158
+ .card-inspector-answer code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
159
+ .card-inspector-answer pre { max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 6px; background: #f8fafc; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
160
+ .card-inspector-answer pre code { background: transparent; padding: 0; }
161
+ .card-inspector-answer table { display: block; max-width: 100%; margin: 0; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
162
+ .card-inspector-answer th, .card-inspector-answer td { border: 1px solid #d8e0e8; padding: 5px 8px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
163
+ .card-inspector-answer th { background: #f5f7fa; font-weight: 720; }
164
+ .card-inspector-pending { margin: 0; color: #7b8794; font-size: 13px; font-style: italic; }
165
+ .card-inspector-error { margin: 0; border-left: 3px solid #d92d20; padding: 3px 0 3px 10px; color: #7a271a; font-size: 13px; line-height: 1.65; }
166
+ .card-inspector-error strong { display: block; color: #b42318; font-size: 12px; }
167
+ .card-inspector-error p { margin: 5px 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
168
+ .card-inspector .process-records { margin-top: 22px; border-top-style: solid; padding-top: 12px; }
169
+ .card-inspector .process-records-fold { border-radius: 0; background: transparent; padding: 4px 0; }
170
+ .card-inspector .process-records-fold:hover { background: transparent; }
171
+ .card-inspector-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; padding: 11px 14px; border-top: 1px solid #e7edf3; background: #fff; }
172
+ .card-inspector-actions button { display: inline-flex; min-height: 30px; align-items: center; gap: 4px; padding: 0 9px; font-size: 11px; font-weight: 600; transition: transform 140ms ease-out, border-color 150ms ease, background 150ms ease, color 150ms ease; }
173
+ .card-inspector-actions button svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; }
174
+ .card-inspector-actions .primary { border-color: #3478f6; background: #3478f6; color: #fff; }
175
+ .card-inspector-actions .primary:hover { border-color: #2563eb; background: #2563eb; }
176
+ .draft-card { z-index: 2; height: auto; min-height: 228px; border-style: dashed; border-color: #9ca3af; box-shadow: 0 7px 19px rgba(17,24,39,.1); }
120
177
  .draft-card strong { color: #1f2937; font-size: 13px; }
121
178
  .draft-branch-form { display: grid; justify-items: center; gap: 10px; padding: 10px 12px 12px; }
179
+ .draft-quick-phrases { display: flex; width: 100%; flex-wrap: wrap; gap: 6px; }
180
+ .draft-quick-phrase, .draft-quick-phrase-add-button { min-height: 26px; border-color: #d8e0e8; border-radius: 999px; background: #f8fafc; padding: 0 9px; color: #526174; font-size: 11px; font-weight: 600; }
181
+ .draft-quick-phrase:hover, .draft-quick-phrase-add-button:hover { border-color: #9bbcf7; background: #eef4ff; color: #2563eb; }
182
+ .draft-quick-phrase-add-button { display: grid; width: 26px; place-items: center; padding: 0; }
183
+ .draft-quick-phrase-add-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; }
184
+ .draft-quick-editor { display: grid; width: 100%; gap: 7px; padding-bottom: 2px; }
185
+ .draft-quick-editor-list { display: grid; gap: 5px; }
186
+ .draft-quick-phrase-editor-row, .draft-quick-phrase-add { display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; }
187
+ .draft-quick-phrase-editor-row input, .draft-quick-phrase-add input { min-width: 0; height: 28px; border: 1px solid #cbd8e3; border-radius: 5px; background: #fff; padding: 0 8px; color: #334155; font-size: 11px; outline-color: #3478f6; }
188
+ .draft-quick-phrase-editor-row button, .draft-quick-phrase-add button { display: grid; width: 28px; min-height: 28px; place-items: center; border-radius: 5px; padding: 0; }
189
+ .draft-quick-phrase-editor-row button { border-color: #d8e0e8; color: #64748b; }
190
+ .draft-quick-phrase-editor-row button:hover { border-color: #f0b4b4; background: #fef2f2; color: #b91c1c; }
191
+ .draft-quick-phrase-editor-row svg, .draft-quick-phrase-add svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
192
+ .draft-quick-editor-close { justify-self: end; min-height: 26px; border: 0; background: transparent; padding: 0 6px; color: #64748b; font-size: 11px; }
193
+ .draft-quick-editor-close:hover { background: #f3f4f6; color: #111827; }
122
194
  .draft-branch-form textarea { width: 100%; min-height: 104px; resize: vertical; border: 1px solid #cbd8e3; border-radius: 5px; padding: 8px 12px; color: #334155; outline-color: #3478f6; }
123
- .draft-actions { display: flex; width: 100%; justify-content: flex-end; gap: 8px; }
124
- .draft-actions button { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; border-radius: 50%; background: #fff; padding: 0; color: #64748b; line-height: 0; }
125
- .draft-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
126
- .draft-actions svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
127
- .empty-canvas, .compare-empty { display: grid; align-content: center; justify-items: center; height: 100%; padding: 32px; text-align: center; }
128
- .empty-canvas strong, .compare-empty strong { color: #334155; font-size: 16px; }
129
- .empty-canvas p, .compare-empty p { max-width: 460px; color: #64748b; font-size: 13px; line-height: 1.65; }
130
- .empty-canvas div { display: flex; gap: 8px; }
131
- .detail-view { box-sizing: border-box; width: min(880px, 100%); height: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; margin: 0 auto; background: #fbfcfe; }
132
- .detail-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 34px 38px 18px; border-bottom: 1px solid #e7edf3; }
133
- .detail-head-title { min-width: 0; }
134
- .detail-head-meta { display: flex; align-items: center; gap: 9px; }
135
- .detail-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #eaf0fa; padding: 3px 9px; color: #3b6fd4; font-size: 11px; font-weight: 750; letter-spacing: .05em; }
136
- .detail-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
137
- .detail-subtitle { overflow: hidden; color: #8a97a8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
138
- .detail-head h1 { margin: 10px 0 0; overflow-wrap: anywhere; color: #152033; font-size: 21px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
139
- .detail-head-actions { flex: none; display: flex; gap: 8px; }
140
- .detail-head-actions button { min-height: 32px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; padding: 0 12px; color: #3d4a5c; font-size: 12px; font-weight: 600; }
141
- .detail-head-actions button:hover { border-color: #b9c7d8; background: #f4f7fb; }
142
- .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
143
- .detail-head-actions button.primary:hover { background: #2563eb; }
144
- .detail-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 22px 38px 24px; }
145
- .note-empty { padding: 34px 25px; border: 1px dashed #cbd5df; border-radius: 10px; color: #8a97a8; font-size: 13px; text-align: center; }
146
- .message { padding: 13px 16px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
147
- .message header { display: flex; align-items: center; gap: 7px; color: #475569; font-size: 11px; font-weight: 650; }
148
- .message time { color: #94a3b8; font-weight: 400; }
149
- .message-role { color: #334155; }
150
- .message-avatar { flex: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #3478f6, #7c3aed); }
151
- .message-user { align-self: flex-end; max-width: 84%; border-color: transparent; background: #eaf1ff; box-shadow: none; }
152
- .message-user header { justify-content: flex-end; color: #5a78b0; }
153
- .message-user .message-body p { color: #27375f; }
154
- .message-assistant { border-left: 3px solid #3478f6; }
155
- .message-error { border-left: 3px solid #dc2626; background: #fef7f7; }
156
- .message-todo { border-left: 3px solid #b45309; }
157
- .message-tool, .message-tool-result { border-left: 3px solid #6b7280; }
158
- .message-pending { border-style: dashed; }
159
- .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(15,23,42,.06); }
160
- .message-body { margin-top: 8px; }
161
- .message-body > * + * { margin-top: 8px; }
162
- .message-body p { margin: 0; overflow-wrap: anywhere; color: #334155; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
163
- .message-body ul, .message-body ol { margin: 0; padding-left: 20px; }
164
- .message-body li + li { margin-top: 4px; }
165
- .message-body h1, .message-body h2, .message-body h3 { margin: 0; color: #1e293b; font-size: 15px; }
166
- .message-body blockquote { margin: 0; border-left: 3px solid #dbe3ec; padding-left: 10px; color: #64748b; }
167
- .message-body code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
168
- .message-body pre { max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 6px; background: #fff; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
169
- .message-body pre code { background: transparent; padding: 0; font-size: 12px; }
170
- .message-body table { display: block; max-width: 100%; margin: 0; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
171
- .message-body th, .message-body td { border: 1px solid #d8e0e8; padding: 5px 8px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
172
- .message-body th { background: #f5f7fa; font-weight: 720; }
173
- .message-branch { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; margin-left: auto; border: 0; border-radius: 5px; background: transparent; padding: 0 6px; color: #8a97a8; font-size: 11px; }
174
- .message-branch:hover { background: #eef4ff; color: #3478f6; }
175
- .message-branch svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
176
- .message-fold { display: grid; width: 24px; min-height: 24px; place-items: center; margin-left: 0; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #94a3b8; }
177
- .message-fold:hover { background: #edf3ff !important; color: #3478f6 !important; }
178
- .message-fold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .15s ease; }
179
- .message-collapsible.expanded .message-fold svg { transform: rotate(90deg); }
180
- .message-summary { overflow: hidden; color: #64748b !important; text-overflow: ellipsis; white-space: nowrap; }
181
- .message-streaming { display: inline-flex; align-items: center; gap: 6px; color: #6b7280 !important; font-style: italic; }
182
- .streaming-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: streaming-pulse 1.1s ease-in-out infinite; }
183
- @keyframes streaming-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
184
- .process-records { margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
185
- .process-records-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; background: #f8fafc; padding: 7px 10px; color: #475569; font-size: 12px; font-weight: 620; text-align: left; }
186
- .process-records-fold:hover { background: #edf3ff; color: #3478f6; }
187
- .process-count { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 720; }
188
- .process-entry { margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
189
- .process-entry-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 8px 10px; color: #334155; font-size: 12px; text-align: left; }
190
- .process-entry-fold:hover { background: #f8fafc; }
191
- .process-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
192
- .process-status { flex: none; font-size: 11px; }
193
- .process-status-done { color: #0f766e; }
194
- .process-status-pending { color: #b45309; }
195
- .process-status-error { color: #b91c1c; }
196
- .process-entry-body { display: grid; gap: 8px; padding: 0 10px 10px; }
197
- .process-args, .process-result, .process-error { margin: 0; padding: 8px 10px; border-radius: 5px; background: #f1f5f9; overflow: auto; color: #334155; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
198
- .process-error { background: #fef2f2; color: #991b1b; }
199
- .message-composer { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px 38px 20px; border-top: 1px solid #e7edf3; background: #fbfcfe; }
200
- .message-composer textarea { min-height: 44px; max-height: 160px; resize: vertical; border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; padding: 11px 13px; color: #334155; font-size: 13px; line-height: 1.6; outline-color: #3478f6; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
201
- .message-composer button { min-height: 40px; border: 0; border-radius: 10px; background: #3478f6; padding: 0 18px; color: #fff; font-size: 13px; font-weight: 650; }
202
- .message-composer button:hover { background: #2563eb; }
203
- .message-composer button:disabled { background: #b9c7d8; cursor: not-allowed; }
204
- .compare-view { height: 100%; overflow: auto; padding: 43px 38px; }
205
- .compare-view header { width: min(1050px, 100%); margin: 0 auto 24px; }
206
- .compare-columns { display: grid; width: min(1050px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
207
- .compare-columns article { overflow: hidden; border: 1px solid #dbe3eb; border-radius: 7px; background: #fff; }
208
- .compare-title { gap: 8px; padding: 16px; border-bottom: 1px solid #e8edf2; }
209
- .compare-title .topic-dot { background: var(--thread-color, #374151); }
210
- .compare-title h2 { min-width: 0; flex: 1; margin: 0; overflow: hidden; color: #1e293b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
211
- .compare-title button { min-height: 27px; padding: 0 7px; font-size: 11px; }
212
- .compare-meta { margin: 12px 16px; color: #94a3b8; font-size: 11px; }
213
- .compare-notes { display: grid; gap: 1px; padding: 0 16px 16px; }
214
- .compare-notes p { margin: 0; padding: 11px 0; border-top: 1px solid #eef2f5; color: #475569; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
215
- @media (max-width: 760px) { .synapse-shell { --sidebar-width: 200px; --sidebar-half: 100px; } .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; } .sidebar { padding: 6px 10px; } .detail-head { display: grid; gap: 12px; padding: 22px 18px 14px; } .detail-scroll { padding: 16px 18px 20px; } .message-composer { padding: 12px 18px 16px; } .message-user { max-width: 92%; } .compare-view { padding: 26px 18px; } .compare-columns { grid-template-columns: 1fr; } .topbar { padding: 0 10px; } .brand strong { display: none; } }
195
+ .draft-actions { display: flex; width: 100%; justify-content: flex-end; gap: 8px; }
196
+ .draft-actions button { display: grid; width: 32px; height: 32px; min-height: 32px; place-items: center; border-radius: 50%; background: #fff; padding: 0; color: #64748b; line-height: 0; }
197
+ .draft-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
198
+ .draft-actions svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
199
+ .empty-canvas, .compare-empty { display: grid; align-content: center; justify-items: center; height: 100%; padding: 32px; text-align: center; }
200
+ .empty-canvas strong, .compare-empty strong { color: #334155; font-size: 16px; }
201
+ .empty-canvas p, .compare-empty p { max-width: 460px; color: #64748b; font-size: 13px; line-height: 1.65; }
202
+ .empty-canvas div { display: flex; gap: 8px; }
203
+ .detail-view { box-sizing: border-box; width: min(880px, 100%); height: 100%; min-height: 0; flex: 1; display: flex; flex-direction: column; margin: 0 auto; background: #fbfcfe; }
204
+ .detail-head { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 34px 38px 18px; border-bottom: 1px solid #e7edf3; }
205
+ .detail-head-title { min-width: 0; }
206
+ .detail-head-meta { display: flex; align-items: center; gap: 9px; }
207
+ .detail-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: #eaf0fa; padding: 3px 9px; color: #3b6fd4; font-size: 11px; font-weight: 750; letter-spacing: .05em; }
208
+ .detail-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
209
+ .detail-subtitle { overflow: hidden; color: #8a97a8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
210
+ .detail-head h1 { margin: 10px 0 0; overflow-wrap: anywhere; color: #152033; font-size: 21px; font-weight: 650; line-height: 1.35; letter-spacing: 0; }
211
+ .detail-head-actions { flex: none; display: flex; gap: 8px; }
212
+ .detail-head-actions button { min-height: 32px; border: 1px solid #d9e1ea; border-radius: 7px; background: #fff; padding: 0 12px; color: #3d4a5c; font-size: 12px; font-weight: 600; }
213
+ .detail-head-actions button:hover { border-color: #b9c7d8; background: #f4f7fb; }
214
+ .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
215
+ .detail-head-actions button.primary:hover { background: #2563eb; }
216
+ .detail-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 22px 38px 24px; }
217
+ .note-empty { padding: 34px 25px; border: 1px dashed #cbd5df; border-radius: 10px; color: #8a97a8; font-size: 13px; text-align: center; }
218
+ .message { padding: 13px 16px; border: 1px solid #e2e8f0; border-radius: 11px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
219
+ .message header { display: flex; align-items: center; gap: 7px; color: #475569; font-size: 11px; font-weight: 650; }
220
+ .message time { color: #94a3b8; font-weight: 400; }
221
+ .message-role { color: #334155; }
222
+ .message-avatar { flex: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #3478f6, #7c3aed); }
223
+ .message-user { align-self: flex-end; max-width: 84%; border-color: transparent; background: #eaf1ff; box-shadow: none; }
224
+ .message-user header { justify-content: flex-end; color: #5a78b0; }
225
+ .message-user .message-body p { color: #27375f; }
226
+ .message-assistant { border-left: 3px solid #3478f6; }
227
+ .message-error { border-left: 3px solid #dc2626; background: #fef7f7; }
228
+ .message-todo { border-left: 3px solid #b45309; }
229
+ .message-tool, .message-tool-result { border-left: 3px solid #6b7280; }
230
+ .message-pending { border-style: dashed; }
231
+ .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(15,23,42,.06); }
232
+ .message-body { margin-top: 8px; }
233
+ .message-body > * + * { margin-top: 8px; }
234
+ .message-body p { margin: 0; overflow-wrap: anywhere; color: #334155; font-size: 14px; line-height: 1.75; white-space: pre-wrap; }
235
+ .message-body ul, .message-body ol { margin: 0; padding-left: 20px; }
236
+ .message-body li + li { margin-top: 4px; }
237
+ .message-body h1, .message-body h2, .message-body h3 { margin: 0; color: #1e293b; font-size: 15px; }
238
+ .message-body blockquote { margin: 0; border-left: 3px solid #dbe3ec; padding-left: 10px; color: #64748b; }
239
+ .message-body code { overflow-wrap: anywhere; border-radius: 3px; background: #eef2f5; padding: 1px 3px; color: #334155; font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }
240
+ .message-body pre { max-width: 100%; margin: 0; overflow-x: auto; border: 1px solid #e0e7ee; border-radius: 6px; background: #fff; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
241
+ .message-body pre code { background: transparent; padding: 0; font-size: 12px; }
242
+ .message-body table { display: block; max-width: 100%; margin: 0; overflow-x: auto; border-collapse: collapse; font-size: 12px; }
243
+ .message-body th, .message-body td { border: 1px solid #d8e0e8; padding: 5px 8px; text-align: left; overflow-wrap: anywhere; white-space: normal; }
244
+ .message-body th { background: #f5f7fa; font-weight: 720; }
245
+ .message-branch { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; margin-left: auto; border: 0; border-radius: 5px; background: transparent; padding: 0 6px; color: #8a97a8; font-size: 11px; }
246
+ .message-branch:hover { background: #eef4ff; color: #3478f6; }
247
+ .message-branch svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
248
+ .message-fold { display: grid; width: 24px; min-height: 24px; place-items: center; margin-left: 0; border: 0; border-radius: 50%; background: transparent; padding: 0; color: #94a3b8; }
249
+ .message-fold:hover { background: #edf3ff !important; color: #3478f6 !important; }
250
+ .message-fold svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform .15s ease; }
251
+ .message-collapsible.expanded .message-fold svg { transform: rotate(90deg); }
252
+ .message-summary { overflow: hidden; color: #64748b !important; text-overflow: ellipsis; white-space: nowrap; }
253
+ .message-streaming { display: inline-flex; align-items: center; gap: 6px; color: #6b7280 !important; font-style: italic; }
254
+ .streaming-dot { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: streaming-pulse 1.1s ease-in-out infinite; }
255
+ @keyframes streaming-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
256
+ .process-records { margin-top: 10px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
257
+ .process-records-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 6px; background: #f8fafc; padding: 7px 10px; color: #475569; font-size: 12px; font-weight: 620; text-align: left; }
258
+ .process-records-fold:hover { background: #edf3ff; color: #3478f6; }
259
+ .process-count { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; background: #e2e8f0; color: #64748b; font-size: 11px; font-weight: 720; }
260
+ .process-entry { margin-top: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; }
261
+ .process-entry-fold { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; background: transparent; padding: 8px 10px; color: #334155; font-size: 12px; text-align: left; }
262
+ .process-entry-fold:hover { background: #f8fafc; }
263
+ .process-entry-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
264
+ .process-status { flex: none; font-size: 11px; }
265
+ .process-status-done { color: #0f766e; }
266
+ .process-status-pending { color: #b45309; }
267
+ .process-status-error { color: #b91c1c; }
268
+ .process-entry-body { display: grid; gap: 8px; padding: 0 10px 10px; }
269
+ .process-args, .process-result, .process-error { margin: 0; padding: 8px 10px; border-radius: 5px; background: #f1f5f9; overflow: auto; color: #334155; font-size: 12px; line-height: 1.55; white-space: pre-wrap; }
270
+ .process-error { background: #fef2f2; color: #991b1b; }
271
+ .message-composer { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px 38px 20px; border-top: 1px solid #e7edf3; background: #fbfcfe; }
272
+ .message-composer textarea { min-height: 44px; max-height: 160px; resize: vertical; border: 1px solid #dbe3ec; border-radius: 10px; background: #fff; padding: 11px 13px; color: #334155; font-size: 13px; line-height: 1.6; outline-color: #3478f6; box-shadow: 0 1px 3px rgba(15,23,42,.05); }
273
+ .message-composer button { min-height: 40px; border: 0; border-radius: 10px; background: #3478f6; padding: 0 18px; color: #fff; font-size: 13px; font-weight: 650; }
274
+ .message-composer button:hover { background: #2563eb; }
275
+ .message-composer button:disabled { background: #b9c7d8; cursor: not-allowed; }
276
+ .compare-view { height: 100%; overflow: auto; padding: 43px 38px; }
277
+ .compare-view header { width: min(1050px, 100%); margin: 0 auto 24px; }
278
+ .compare-columns { display: grid; width: min(1050px, 100%); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 auto; }
279
+ .compare-columns article { overflow: hidden; border: 1px solid #dbe3eb; border-radius: 7px; background: #fff; }
280
+ .compare-title { gap: 8px; padding: 16px; border-bottom: 1px solid #e8edf2; }
281
+ .compare-title .topic-dot { background: var(--thread-color, #374151); }
282
+ .compare-title h2 { min-width: 0; flex: 1; margin: 0; overflow: hidden; color: #1e293b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
283
+ .compare-title button { min-height: 27px; padding: 0 7px; font-size: 11px; }
284
+ .compare-meta { margin: 12px 16px; color: #94a3b8; font-size: 11px; }
285
+ .compare-notes { display: grid; gap: 1px; padding: 0 16px 16px; }
286
+ .compare-notes p { margin: 0; padding: 11px 0; border-top: 1px solid #eef2f5; color: #475569; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
287
+ @media (max-width: 760px) { .synapse-shell { --sidebar-width: 200px; --sidebar-half: 100px; } .synapse-shell.sidebar-collapsed { --sidebar-width: 56px; --sidebar-half: 28px; } .sidebar { padding: 6px 10px; } .detail-head { display: grid; gap: 12px; padding: 22px 18px 14px; } .detail-scroll { padding: 16px 18px 20px; } .message-composer { padding: 12px 18px 16px; } .message-user { max-width: 92%; } .compare-view { padding: 26px 18px; } .compare-columns { grid-template-columns: 1fr; } .topbar { padding: 0 10px; } .brand strong { display: none; } .card-inspector { top: auto; width: 100%; min-width: 0; max-height: 78%; border-top: 1px solid #dbe3ec; border-left: 0; } .card-inspector.is-opening, .card-inspector.is-closing { transform: translateY(24px); } }
216
288
  @media (max-width: 560px) { .synapse-shell { min-width: 0; grid-template-columns: 1fr; } .sidebar { display: none; } .topbar, .main-stage { grid-column: 1; } .view-switch { left: 50%; } .view-switch button { padding: 0 7px; } .top-actions > button { font-size: 11px; padding: 0 7px; } .thread-card { width: 280px; } }
217
-
218
- /* ── Dark theme: follows DSH's body[data-ds-dark-theme] via synapse:theme ── */
219
- [data-theme="dark"] { color-scheme: dark; }
220
- [data-theme="dark"] body { background: #0f1115; color: #e6e8eb; }
221
- [data-theme="dark"] .synapse-shell { background: #0f1115; }
222
- [data-theme="dark"] .sidebar { border-right-color: #26282d; background: #15171b; }
223
- [data-theme="dark"] .topbar { background: #15171b; }
224
- [data-theme="dark"] .main-stage { background: #0f1115; }
225
- [data-theme="dark"] .canvas-tabs { border-bottom-color: #26282d; background: #15171b; }
226
- [data-theme="dark"] .canvas-tabs button { color: #8f959e; }
227
- [data-theme="dark"] .canvas-tabs button.active, [data-theme="dark"] .canvas-tabs button:hover { color: #5b8def; border-bottom-color: #5b8def; }
228
- [data-theme="dark"] .canvas-viewport { background: #0f1115; }
289
+ @media (prefers-reduced-motion: reduce) { .card-inspector { transition: opacity 120ms ease; } .card-inspector.is-opening, .card-inspector.is-closing { transform: none; } }
290
+
291
+ /* ── Dark theme: follows DSH's body[data-ds-dark-theme] via synapse:theme ── */
292
+ [data-theme="dark"] { color-scheme: dark; }
293
+ [data-theme="dark"] body { background: #0f1115; color: #e6e8eb; }
294
+ [data-theme="dark"] .synapse-shell { background: #0f1115; }
295
+ [data-theme="dark"] .sidebar { border-right-color: #26282d; background: #15171b; }
296
+ [data-theme="dark"] .topbar { background: #15171b; }
297
+ [data-theme="dark"] .main-stage { background: #0f1115; }
298
+ [data-theme="dark"] .canvas-tabs { border-bottom-color: #26282d; background: #15171b; }
299
+ [data-theme="dark"] .canvas-tabs button { color: #8f959e; }
300
+ [data-theme="dark"] .canvas-tabs button.active, [data-theme="dark"] .canvas-tabs button:hover { color: #5b8def; border-bottom-color: #5b8def; }
301
+ [data-theme="dark"] .canvas-viewport { background: #0f1115; }
229
302
  [data-theme="dark"] .canvas-content { background: #0f1115; }
230
303
  [data-theme="dark"] .connectors path { stroke: #3a3f47; }
304
+ [data-theme="dark"] .connectors path.active-connector { stroke: #5b8def; }
231
305
  [data-theme="dark"] .connectors .draft-connector { stroke: #5b8def; }
232
- [data-theme="dark"] .thread-card { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 3px 11px rgba(0,0,0,.35); }
233
- [data-theme="dark"] .thread-card:hover { border-color: #4a4f57; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
234
- [data-theme="dark"] .thread-card.active { outline-color: rgba(255,255,255,.25); border-color: #6b7280; }
306
+ [data-theme="dark"] .thread-card { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 3px 11px rgba(0,0,0,.35); }
307
+ [data-theme="dark"] .thread-card:hover { border-color: #4a4f57; box-shadow: 0 8px 20px rgba(0,0,0,.45); }
235
308
  [data-theme="dark"] .thread-card.selected { box-shadow: 0 0 0 2px rgba(91,141,239,.4), 0 8px 20px rgba(0,0,0,.45); }
236
- [data-theme="dark"] .node-handle { border-color: #2a2d33; background: #1b1c1f; }
237
- [data-theme="dark"] .node-handle::after { color: #737a83; }
238
- [data-theme="dark"] .thread-title { color: #e6e8eb; }
239
- [data-theme="dark"] .thread-title:hover { color: #fff; }
240
- [data-theme="dark"] .graph-continue-button, [data-theme="dark"] .graph-fold-button, [data-theme="dark"] .graph-branch-button { border-color: #4a4f57; background: #1b1c1f; color: #e6e8eb; }
309
+ [data-theme="dark"] .node-handle { border-color: #2a2d33; background: #1b1c1f; }
310
+ [data-theme="dark"] .node-handle::after { color: #737a83; }
311
+ [data-theme="dark"] .thread-title { color: #e6e8eb; }
312
+ [data-theme="dark"] .thread-title:hover { color: #fff; }
313
+ [data-theme="dark"] .graph-continue-button, [data-theme="dark"] .graph-fold-button, [data-theme="dark"] .graph-branch-button { border-color: #4a4f57; background: #1b1c1f; color: #e6e8eb; }
241
314
  [data-theme="dark"] .graph-continue-button:hover, [data-theme="dark"] .graph-fold-button:hover, [data-theme="dark"] .graph-branch-button:hover { border-color: #9ca3af; background: #26282d; }
242
315
  [data-theme="dark"] .graph-continue-button:focus-visible, [data-theme="dark"] .graph-fold-button:focus-visible, [data-theme="dark"] .graph-branch-button:focus-visible { outline-color: #7ea6f5; }
316
+ [data-theme="dark"] .selection-followup { border-color: #5b8def; background: #5b8def; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
317
+ [data-theme="dark"] .selection-followup:hover { border-color: #7ea6f5; background: #7ea6f5; color: #fff; }
243
318
  [data-theme="dark"] .thread-meta { color: #737a83; }
244
- [data-theme="dark"] .thread-answer { color: #a7adb5; }
245
- [data-theme="dark"] .thread-answer h1, [data-theme="dark"] .thread-answer h2, [data-theme="dark"] .thread-answer h3 { color: #d7dae0; }
246
- [data-theme="dark"] .thread-answer code { background: #26282d; color: #d7dae0; }
247
- [data-theme="dark"] .thread-answer pre { border-color: #2a2d33; background: #15171b; }
248
- [data-theme="dark"] .thread-answer th, [data-theme="dark"] .thread-answer td { border-color: #2a2d33; }
249
- [data-theme="dark"] .thread-answer th { background: #222428; }
250
- [data-theme="dark"] .thread-answer-empty { color: #737a83; }
251
- [data-theme="dark"] .thread-answer-pending, [data-theme="dark"] .message-pending p { color: #a7adb5; }
252
- [data-theme="dark"] .thread-card footer { border-top-color: #23262b; }
253
- [data-theme="dark"] .thread-card footer button { color: #a7adb5; }
254
- [data-theme="dark"] .thread-card footer button:hover { background: #26282d; color: #e6e8eb; }
319
+ [data-theme="dark"] .thread-meta .card-process-count { background: #1e2a44; color: #7ea6f5; }
320
+ [data-theme="dark"] .thread-answer { color: #a7adb5; }
321
+ [data-theme="dark"] .thread-answer h1, [data-theme="dark"] .thread-answer h2, [data-theme="dark"] .thread-answer h3 { color: #d7dae0; }
322
+ [data-theme="dark"] .thread-answer code { background: #26282d; color: #d7dae0; }
323
+ [data-theme="dark"] .thread-answer pre { border-color: #2a2d33; background: #15171b; }
324
+ [data-theme="dark"] .thread-answer th, [data-theme="dark"] .thread-answer td { border-color: #2a2d33; }
325
+ [data-theme="dark"] .thread-answer th { background: #222428; }
326
+ [data-theme="dark"] .thread-answer-empty { color: #737a83; }
327
+ [data-theme="dark"] .thread-answer-pending, [data-theme="dark"] .message-pending p { color: #a7adb5; }
328
+ [data-theme="dark"] .thread-card footer { border-top-color: #23262b; }
329
+ [data-theme="dark"] .thread-card footer button { color: #a7adb5; }
330
+ [data-theme="dark"] .thread-card footer button:hover { background: #26282d; color: #e6e8eb; }
255
331
  [data-theme="dark"] .thread-card footer .compare-button { color: #d7dae0; }
256
332
  [data-theme="dark"] .thread-card footer .compare-button.selected { background: #2a2d33; color: #fff; }
257
- [data-theme="dark"] .draft-card { border-color: #4a4f57; box-shadow: 0 7px 19px rgba(0,0,0,.4); }
333
+ [data-theme="dark"] .card-inspector { border-left-color: #2a2d33; background: #15171b; }
334
+ [data-theme="dark"] .card-inspector-head, [data-theme="dark"] .card-inspector-actions { border-color: #2a2d33; background: #1b1c1f; }
335
+ [data-theme="dark"] .card-inspector-meta { color: #737a83; }
336
+ [data-theme="dark"] .card-inspector-meta span + span::before { color: #4a4f57; }
337
+ [data-theme="dark"] .card-inspector-meta span:last-child { color: inherit; }
338
+ [data-theme="dark"] .thread-meta .card-error-status, [data-theme="dark"] .card-inspector-meta .card-inspector-error-status { color: #f87171; }
339
+ [data-theme="dark"] .card-inspector-head h2 { color: #e6e8eb; }
340
+ [data-theme="dark"] .card-inspector-answer { color: #d7dae0; }
341
+ [data-theme="dark"] .card-inspector-answer h1, [data-theme="dark"] .card-inspector-answer h2, [data-theme="dark"] .card-inspector-answer h3 { color: #e6e8eb; }
342
+ [data-theme="dark"] .card-inspector-answer blockquote { border-left-color: #3a3f47; color: #8f959e; }
343
+ [data-theme="dark"] .card-inspector-answer code { background: #26282d; color: #d7dae0; }
344
+ [data-theme="dark"] .card-inspector-answer pre { border-color: #2a2d33; background: #15171b; }
345
+ [data-theme="dark"] .card-inspector-answer th, [data-theme="dark"] .card-inspector-answer td { border-color: #2a2d33; }
346
+ [data-theme="dark"] .card-inspector-answer th { background: #222428; }
347
+ [data-theme="dark"] .card-inspector-pending { color: #8f959e; }
348
+ [data-theme="dark"] .thread-answer-error { color: #f87171; }
349
+ [data-theme="dark"] .card-inspector-error { border-left-color: #f87171; color: #f0a3a3; }
350
+ [data-theme="dark"] .card-inspector-error strong { color: #f87171; }
351
+ [data-theme="dark"] .card-inspector .process-records-fold { color: #a7adb5; }
352
+ [data-theme="dark"] .card-inspector .process-records-fold:hover { color: #7ea6f5; }
353
+ [data-theme="dark"] .card-inspector-close { color: #8f959e; }
354
+ [data-theme="dark"] .card-inspector-close:hover { background: #26282d; color: #e6e8eb; }
355
+ [data-theme="dark"] .card-inspector-actions button { border-color: #3a3f47; background: #222428; color: #c6cbd2; }
356
+ [data-theme="dark"] .card-inspector-actions button:hover { border-color: #4a4f57; background: #26282d; color: #fff; }
357
+ [data-theme="dark"] .card-inspector-actions .primary { border-color: #5b8def; background: #5b8def; color: #fff; }
358
+ [data-theme="dark"] .card-inspector-actions .primary:hover { border-color: #7ea6f5; background: #7ea6f5; }
359
+ [data-theme="dark"] .draft-card { border-color: #4a4f57; box-shadow: 0 7px 19px rgba(0,0,0,.4); }
258
360
  [data-theme="dark"] .draft-card strong { color: #e6e8eb; }
361
+ [data-theme="dark"] .draft-quick-phrase, [data-theme="dark"] .draft-quick-phrase-add-button { border-color: #3a3f47; background: #222428; color: #a7adb5; }
362
+ [data-theme="dark"] .draft-quick-phrase:hover, [data-theme="dark"] .draft-quick-phrase-add-button:hover { border-color: #5b8def; background: #1e2a44; color: #7ea6f5; }
363
+ [data-theme="dark"] .draft-quick-phrase-editor-row input, [data-theme="dark"] .draft-quick-phrase-add input { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
364
+ [data-theme="dark"] .draft-quick-phrase-editor-row button { border-color: #3a3f47; background: #222428; color: #a7adb5; }
365
+ [data-theme="dark"] .draft-quick-phrase-editor-row button:hover { border-color: #b75f5f; background: #2b1a1c; color: #f0a3a3; }
366
+ [data-theme="dark"] .draft-quick-editor-close { color: #a7adb5; }
367
+ [data-theme="dark"] .draft-quick-editor-close:hover { background: #26282d; color: #e6e8eb; }
259
368
  [data-theme="dark"] .draft-branch-form textarea { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
260
- [data-theme="dark"] .draft-actions button { background: #1b1c1f; color: #a7adb5; }
261
- [data-theme="dark"] .draft-actions button.primary { background: #3478f6; color: #fff; }
262
- [data-theme="dark"] .view-switch { border-color: #2a2d33; background: rgba(21,23,27,.96); }
263
- [data-theme="dark"] .view-switch button { color: #8f959e; }
264
- [data-theme="dark"] .view-switch button:hover { background: #26282d; color: #e6e8eb; }
265
- [data-theme="dark"] .view-switch button.active { background: #e6e8eb; color: #111317; }
266
- [data-theme="dark"] .canvas-controls span { color: #8f959e; }
267
- [data-theme="dark"] .sidebar-toggle { color: #a7adb5; }
268
- [data-theme="dark"] .sidebar-toggle:hover { background: #26282d; color: #e6e8eb; }
269
- [data-theme="dark"] .new-workspace { border-color: rgba(255,255,255,.12); background: #1b1c1f; color: #e6e8eb; }
270
- [data-theme="dark"] .new-workspace:hover { border-color: rgba(255,255,255,.22); background: #222428; color: #fff; }
271
- [data-theme="dark"] .workspace-label, [data-theme="dark"] .sidebar-heading { color: #8f959e; }
272
- [data-theme="dark"] .workspace-label select { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
273
- [data-theme="dark"] .workspace-select svg { stroke: #8f959e; }
274
- [data-theme="dark"] .tree-row { color: #a7adb5; }
275
- [data-theme="dark"] .tree-row:hover { background: #26282d; }
276
- [data-theme="dark"] .tree-row.active { background: #2a2d33; color: #e6e8eb; }
277
- [data-theme="dark"] .tree-row i { color: #737a83; }
278
- [data-theme="dark"] .tree-empty { color: #737a83; }
279
- [data-theme="dark"] .brand::after { background: #e6e8eb; color: #111317; }
280
- [data-theme="dark"] .empty-canvas strong { color: #d7dae0; }
281
- [data-theme="dark"] .empty-canvas p { color: #8f959e; }
282
- [data-theme="dark"] .note-empty { border-color: #2a2d33; color: #8f959e; }
283
- [data-theme="dark"] .status-message { border-color: #7a2e2e; background: #2b1a1c; color: #f0a3a3; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
284
- [data-theme="dark"] .status-message button { color: #f0a3a3; }
285
- [data-theme="dark"] .status-message button:hover { background: #3a2326; }
286
- [data-theme="dark"] .detail-view { background: #0f1115; }
287
- [data-theme="dark"] .detail-head { border-bottom-color: #26282d; }
288
- [data-theme="dark"] .detail-badge { background: #1e2a44; color: #7ea6f5; }
289
- [data-theme="dark"] .detail-subtitle { color: #737a83; }
290
- [data-theme="dark"] .detail-head h1 { color: #e6e8eb; }
291
- [data-theme="dark"] .detail-head-actions button { border-color: #2a2d33; background: #15171b; color: #c6cbd2; }
292
- [data-theme="dark"] .detail-head-actions button:hover { border-color: #4a4f57; background: #222428; }
293
- [data-theme="dark"] .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
294
- [data-theme="dark"] .detail-head-actions button.primary:hover { background: #2563eb; }
295
- [data-theme="dark"] .message { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
296
- [data-theme="dark"] .message header { color: #a7adb5; }
297
- [data-theme="dark"] .message time { color: #737a83; }
298
- [data-theme="dark"] .message-role { color: #d7dae0; }
299
- [data-theme="dark"] .message-user { border-color: transparent; background: #1e2a45; box-shadow: none; }
300
- [data-theme="dark"] .message-user header { color: #8fa9d9; }
301
- [data-theme="dark"] .message-user .message-body p { color: #c9d4ea; }
302
- [data-theme="dark"] .message-error { border-left-color: #dc2626; background: #2b1a1c; }
303
- [data-theme="dark"] .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
304
- [data-theme="dark"] .message-body p { color: #d7dae0; }
305
- [data-theme="dark"] .message-body h1, [data-theme="dark"] .message-body h2, [data-theme="dark"] .message-body h3 { color: #e6e8eb; }
306
- [data-theme="dark"] .message-body blockquote { border-left-color: #3a3f47; color: #8f959e; }
307
- [data-theme="dark"] .message-body code { background: #26282d; color: #d7dae0; }
308
- [data-theme="dark"] .message-body pre { border-color: #2a2d33; background: #15171b; }
309
- [data-theme="dark"] .message-body pre code { background: transparent; }
310
- [data-theme="dark"] .message-body th, [data-theme="dark"] .message-body td { border-color: #2a2d33; }
311
- [data-theme="dark"] .message-body th { background: #222428; }
312
- [data-theme="dark"] .message-branch { color: #8f959e; }
313
- [data-theme="dark"] .message-branch:hover { background: #1e2a44; color: #7ea6f5; }
314
- [data-theme="dark"] .message-fold { color: #737a83; }
315
- [data-theme="dark"] .message-fold:hover { background: #1e2a44 !important; color: #7ea6f5 !important; }
316
- [data-theme="dark"] .message-summary { color: #8f959e !important; }
317
- [data-theme="dark"] .message-streaming { color: #8f959e !important; }
318
- [data-theme="dark"] .streaming-dot { background: #737a83; }
319
- [data-theme="dark"] .process-records { border-top-color: #2a2d33; }
320
- [data-theme="dark"] .process-records-fold { background: #222428; color: #a7adb5; }
321
- [data-theme="dark"] .process-records-fold:hover { background: #1e2a44; color: #7ea6f5; }
322
- [data-theme="dark"] .process-count { background: #2a2d33; color: #8f959e; }
323
- [data-theme="dark"] .process-entry { border-color: #2a2d33; background: #15171b; }
324
- [data-theme="dark"] .process-entry-fold { color: #d7dae0; }
325
- [data-theme="dark"] .process-entry-fold:hover { background: #222428; }
326
- [data-theme="dark"] .process-status-done { color: #34d399; }
327
- [data-theme="dark"] .process-status-pending { color: #fbbf24; }
328
- [data-theme="dark"] .process-status-error { color: #f87171; }
329
- [data-theme="dark"] .process-args, [data-theme="dark"] .process-result { background: #222428; color: #d7dae0; }
330
- [data-theme="dark"] .process-error { background: #2b1a1c; color: #f0a3a3; }
331
- [data-theme="dark"] .message-composer { border-top-color: #26282d; background: #0f1115; }
332
- [data-theme="dark"] .message-composer textarea { border-color: #2a2d33; background: #15171b; color: #e6e8eb; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
333
- [data-theme="dark"] .message-composer button:disabled { background: #2a2d33; color: #737a83; }
334
- [data-theme="dark"] button { border-color: #2a2d33; background: #1b1c1f; color: #d7dae0; }
335
- [data-theme="dark"] button:hover { border-color: #4a4f57; background: #26282d; color: #fff; }
369
+ [data-theme="dark"] .draft-actions button { background: #1b1c1f; color: #a7adb5; }
370
+ [data-theme="dark"] .draft-actions button.primary { background: #3478f6; color: #fff; }
371
+ [data-theme="dark"] .view-switch { border-color: #2a2d33; background: rgba(21,23,27,.96); }
372
+ [data-theme="dark"] .view-switch button { color: #8f959e; }
373
+ [data-theme="dark"] .view-switch button:hover { background: #26282d; color: #e6e8eb; }
374
+ [data-theme="dark"] .view-switch button.active { background: #e6e8eb; color: #111317; }
375
+ [data-theme="dark"] .canvas-controls span { color: #8f959e; }
376
+ [data-theme="dark"] .sidebar-toggle { color: #a7adb5; }
377
+ [data-theme="dark"] .sidebar-toggle:hover { background: #26282d; color: #e6e8eb; }
378
+ [data-theme="dark"] .new-workspace { border-color: rgba(255,255,255,.12); background: #1b1c1f; color: #e6e8eb; }
379
+ [data-theme="dark"] .new-workspace:hover { border-color: rgba(255,255,255,.22); background: #222428; color: #fff; }
380
+ [data-theme="dark"] .workspace-label, [data-theme="dark"] .sidebar-heading { color: #8f959e; }
381
+ [data-theme="dark"] .workspace-label select { border-color: #2a2d33; background: #15171b; color: #e6e8eb; }
382
+ [data-theme="dark"] .workspace-select svg { stroke: #8f959e; }
383
+ [data-theme="dark"] .tree-row { color: #a7adb5; }
384
+ [data-theme="dark"] .tree-row:hover { background: #26282d; }
385
+ [data-theme="dark"] .tree-row.active { background: #2a2d33; color: #e6e8eb; }
386
+ [data-theme="dark"] .tree-row i { color: #737a83; }
387
+ [data-theme="dark"] .tree-empty { color: #737a83; }
388
+ [data-theme="dark"] .brand::after { background: #e6e8eb; color: #111317; }
389
+ [data-theme="dark"] .empty-canvas strong { color: #d7dae0; }
390
+ [data-theme="dark"] .empty-canvas p { color: #8f959e; }
391
+ [data-theme="dark"] .note-empty { border-color: #2a2d33; color: #8f959e; }
392
+ [data-theme="dark"] .status-message { border-color: #7a2e2e; background: #2b1a1c; color: #f0a3a3; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
393
+ [data-theme="dark"] .status-message button { color: #f0a3a3; }
394
+ [data-theme="dark"] .status-message button:hover { background: #3a2326; }
395
+ [data-theme="dark"] .detail-view { background: #0f1115; }
396
+ [data-theme="dark"] .detail-head { border-bottom-color: #26282d; }
397
+ [data-theme="dark"] .detail-badge { background: #1e2a44; color: #7ea6f5; }
398
+ [data-theme="dark"] .detail-subtitle { color: #737a83; }
399
+ [data-theme="dark"] .detail-head h1 { color: #e6e8eb; }
400
+ [data-theme="dark"] .detail-head-actions button { border-color: #2a2d33; background: #15171b; color: #c6cbd2; }
401
+ [data-theme="dark"] .detail-head-actions button:hover { border-color: #4a4f57; background: #222428; }
402
+ [data-theme="dark"] .detail-head-actions button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
403
+ [data-theme="dark"] .detail-head-actions button.primary:hover { background: #2563eb; }
404
+ [data-theme="dark"] .message { border-color: #2a2d33; background: #1b1c1f; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
405
+ [data-theme="dark"] .message header { color: #a7adb5; }
406
+ [data-theme="dark"] .message time { color: #737a83; }
407
+ [data-theme="dark"] .message-role { color: #d7dae0; }
408
+ [data-theme="dark"] .message-user { border-color: transparent; background: #1e2a45; box-shadow: none; }
409
+ [data-theme="dark"] .message-user header { color: #8fa9d9; }
410
+ [data-theme="dark"] .message-user .message-body p { color: #c9d4ea; }
411
+ [data-theme="dark"] .message-error { border-left-color: #dc2626; background: #2b1a1c; }
412
+ [data-theme="dark"] .message-collapsible.expanded { box-shadow: 0 2px 10px rgba(0,0,0,.35); }
413
+ [data-theme="dark"] .message-body p { color: #d7dae0; }
414
+ [data-theme="dark"] .message-body h1, [data-theme="dark"] .message-body h2, [data-theme="dark"] .message-body h3 { color: #e6e8eb; }
415
+ [data-theme="dark"] .message-body blockquote { border-left-color: #3a3f47; color: #8f959e; }
416
+ [data-theme="dark"] .message-body code { background: #26282d; color: #d7dae0; }
417
+ [data-theme="dark"] .message-body pre { border-color: #2a2d33; background: #15171b; }
418
+ [data-theme="dark"] .message-body pre code { background: transparent; }
419
+ [data-theme="dark"] .message-body th, [data-theme="dark"] .message-body td { border-color: #2a2d33; }
420
+ [data-theme="dark"] .message-body th { background: #222428; }
421
+ [data-theme="dark"] .message-branch { color: #8f959e; }
422
+ [data-theme="dark"] .message-branch:hover { background: #1e2a44; color: #7ea6f5; }
423
+ [data-theme="dark"] .message-fold { color: #737a83; }
424
+ [data-theme="dark"] .message-fold:hover { background: #1e2a44 !important; color: #7ea6f5 !important; }
425
+ [data-theme="dark"] .message-summary { color: #8f959e !important; }
426
+ [data-theme="dark"] .message-streaming { color: #8f959e !important; }
427
+ [data-theme="dark"] .streaming-dot { background: #737a83; }
428
+ [data-theme="dark"] .process-records { border-top-color: #2a2d33; }
429
+ [data-theme="dark"] .process-records-fold { background: #222428; color: #a7adb5; }
430
+ [data-theme="dark"] .process-records-fold:hover { background: #1e2a44; color: #7ea6f5; }
431
+ [data-theme="dark"] .process-count { background: #2a2d33; color: #8f959e; }
432
+ [data-theme="dark"] .process-entry { border-color: #2a2d33; background: #15171b; }
433
+ [data-theme="dark"] .process-entry-fold { color: #d7dae0; }
434
+ [data-theme="dark"] .process-entry-fold:hover { background: #222428; }
435
+ [data-theme="dark"] .process-status-done { color: #34d399; }
436
+ [data-theme="dark"] .process-status-pending { color: #fbbf24; }
437
+ [data-theme="dark"] .process-status-error { color: #f87171; }
438
+ [data-theme="dark"] .process-args, [data-theme="dark"] .process-result { background: #222428; color: #d7dae0; }
439
+ [data-theme="dark"] .process-error { background: #2b1a1c; color: #f0a3a3; }
440
+ [data-theme="dark"] .message-composer { border-top-color: #26282d; background: #0f1115; }
441
+ [data-theme="dark"] .message-composer textarea { border-color: #2a2d33; background: #15171b; color: #e6e8eb; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
442
+ [data-theme="dark"] .message-composer button:disabled { background: #2a2d33; color: #737a83; }
443
+ [data-theme="dark"] button { border-color: #2a2d33; background: #1b1c1f; color: #d7dae0; }
444
+ [data-theme="dark"] button:hover { border-color: #4a4f57; background: #26282d; color: #fff; }
336
445
  [data-theme="dark"] button.primary { border-color: #3478f6; background: #3478f6; color: #fff; }
337
446
  [data-theme="dark"] button.primary:hover { border-color: #2563eb; background: #2563eb; color: #fff; }
447
+ @media (max-width: 760px) { [data-theme="dark"] .card-inspector { border-top-color: #2a2d33; border-left: 0; } }