@lingjingai/script-editor 0.0.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 (7) hide show
  1. package/INTEGRATION.md +132 -0
  2. package/dist/index.d.ts +596 -0
  3. package/dist/index.js +3568 -0
  4. package/dist/index.js.map +1 -0
  5. package/dist/paper-fibers.png +0 -0
  6. package/dist/style.css +784 -0
  7. package/package.json +51 -0
package/dist/style.css ADDED
@@ -0,0 +1,784 @@
1
+ /* @lingjingai/script-editor — self-contained styles (no Tailwind).
2
+ Reproduces agent-frontend's screenplay editor look with `.lj-se-*` classes.
3
+ Tokens hardcoded (oklch) from the design system + paper/parchment surface. */
4
+
5
+ .lj-se-root {
6
+ /* base chrome tokens — inherit the host's ui-kit theme when present (keeps
7
+ the editor visually consistent with the surrounding app, light or dark),
8
+ falling back to standalone defaults. */
9
+ --lj-se-bg: var(--background, oklch(1 0 0));
10
+ --lj-se-fg: var(--foreground, oklch(0.145 0 0));
11
+ --lj-se-card: var(--card, oklch(1 0 0));
12
+ --lj-se-popover: var(--popover, oklch(1 0 0));
13
+ --lj-se-primary: var(--primary, oklch(0.55 0.10 210));
14
+ --lj-se-muted: var(--muted, oklch(0.97 0 0));
15
+ --lj-se-muted-fg: var(--muted-foreground, oklch(0.556 0 0));
16
+ --lj-se-accent: var(--accent, oklch(0.97 0 0));
17
+ --lj-se-border: var(--border, oklch(0.922 0 0));
18
+ --lj-se-input: var(--input, oklch(0.922 0 0));
19
+ --lj-se-ring: var(--ring, oklch(0.55 0.10 210));
20
+ --lj-se-destructive: var(--destructive, oklch(0.577 0.245 27.325));
21
+ --lj-se-radius: 0.625rem;
22
+
23
+ /* paper / parchment — values mirror agent-frontend's globals.css verbatim */
24
+ --lj-se-paper-bg: oklch(0.986 0.003 90);
25
+ --lj-se-paper-fg: oklch(0.13 0.014 60);
26
+ --lj-se-paper-grain-opacity: 0.85;
27
+ --lj-se-paper-shadow:
28
+ 0 0 0 1px oklch(0 0 0 / 0.025),
29
+ 0 1px 1px oklch(0 0 0 / 0.03),
30
+ 0 12px 32px -12px oklch(0.35 0.04 70 / 0.10);
31
+ --lj-se-cue-dialogue: oklch(0.38 0.05 45);
32
+ --lj-se-cue-inner: oklch(0.4 0.06 25);
33
+ --lj-se-actor-cue-1: oklch(0.44 0.18 25);
34
+ --lj-se-actor-cue-2: oklch(0.50 0.14 65);
35
+ --lj-se-actor-cue-3: oklch(0.46 0.14 130);
36
+ --lj-se-actor-cue-4: oklch(0.45 0.12 195);
37
+ --lj-se-actor-cue-5: oklch(0.45 0.16 240);
38
+ --lj-se-actor-cue-6: oklch(0.45 0.18 285);
39
+ --lj-se-actor-cue-7: oklch(0.46 0.18 335);
40
+ --lj-se-actor-cue-8: oklch(0.30 0.04 270);
41
+
42
+ display: flex;
43
+ min-height: 0;
44
+ height: 100%;
45
+ background: var(--lj-se-bg);
46
+ color: var(--lj-se-fg);
47
+ font-family: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
48
+ font-size: 14px;
49
+ }
50
+ .lj-se-mono {
51
+ font-family: "JetBrains Mono", ui-monospace, monospace;
52
+ }
53
+
54
+ .lj-se-root.dark,
55
+ .dark .lj-se-root {
56
+ /* host tokens still win (var()); fallbacks are for standalone dark usage */
57
+ --lj-se-bg: var(--background, oklch(0.185 0.006 260));
58
+ --lj-se-fg: var(--foreground, oklch(0.95 0 0));
59
+ --lj-se-card: var(--card, oklch(0.205 0.006 260));
60
+ --lj-se-popover: var(--popover, oklch(0.225 0.006 260));
61
+ --lj-se-primary: var(--primary, oklch(0.58 0.13 215));
62
+ --lj-se-muted: var(--muted, oklch(0.27 0.006 260));
63
+ --lj-se-muted-fg: var(--muted-foreground, oklch(0.71 0 0));
64
+ --lj-se-accent: var(--accent, oklch(0.27 0.006 260));
65
+ --lj-se-border: var(--border, oklch(0.30 0.005 260));
66
+ --lj-se-input: var(--input, oklch(0.30 0.005 260));
67
+ --lj-se-paper-bg: oklch(0.22 0.014 75);
68
+ --lj-se-paper-fg: oklch(0.95 0.022 88);
69
+ --lj-se-paper-grain-opacity: 0.5;
70
+ --lj-se-paper-shadow:
71
+ 0 0 0 1px oklch(1 0 0 / 0.04),
72
+ 0 1px 1px oklch(0 0 0 / 0.4),
73
+ 0 12px 32px -12px oklch(0 0 0 / 0.32);
74
+ --lj-se-cue-dialogue: oklch(0.82 0.06 55);
75
+ --lj-se-cue-inner: oklch(0.78 0.08 25);
76
+ --lj-se-actor-cue-1: oklch(0.82 0.16 25);
77
+ --lj-se-actor-cue-2: oklch(0.86 0.13 65);
78
+ --lj-se-actor-cue-3: oklch(0.84 0.13 130);
79
+ --lj-se-actor-cue-4: oklch(0.82 0.12 195);
80
+ --lj-se-actor-cue-5: oklch(0.80 0.14 240);
81
+ --lj-se-actor-cue-6: oklch(0.80 0.16 285);
82
+ --lj-se-actor-cue-7: oklch(0.82 0.16 335);
83
+ --lj-se-actor-cue-8: oklch(0.78 0.03 270);
84
+ }
85
+
86
+ /* ── scrollbar (thin) ─────────────────────────────────────────────────── */
87
+ .lj-se-scroll {
88
+ scrollbar-width: thin;
89
+ scrollbar-color: color-mix(in oklab, var(--lj-se-muted-fg) 30%, transparent) transparent;
90
+ }
91
+ .lj-se-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
92
+ .lj-se-scroll::-webkit-scrollbar-track { background: transparent; }
93
+ .lj-se-scroll::-webkit-scrollbar-thumb {
94
+ background: color-mix(in oklab, var(--lj-se-muted-fg) 30%, transparent);
95
+ border-radius: 999px;
96
+ }
97
+ .lj-se-scroll:hover::-webkit-scrollbar-thumb {
98
+ background: color-mix(in oklab, var(--lj-se-muted-fg) 45%, transparent);
99
+ }
100
+
101
+ /* ── paper surface ────────────────────────────────────────────────────────
102
+ Warm parchment + real scanned fiber texture (alpha PNG, multiply over the
103
+ bg-color) + edge vignette — this is what gives the "paper feel". Mirrors
104
+ agent-frontend's .script-paper / .script-paper-segment exactly. The texture
105
+ ships beside this stylesheet (dist/paper-fibers.png); url() is resolved
106
+ relative to the stylesheet so it works bundled or static. */
107
+ .lj-se-paper {
108
+ position: relative;
109
+ background-color: var(--lj-se-paper-bg);
110
+ color: var(--lj-se-paper-fg);
111
+ border-radius: 8px;
112
+ box-shadow: var(--lj-se-paper-shadow);
113
+ isolation: isolate;
114
+ background-image:
115
+ radial-gradient(ellipse at center, transparent 60%, oklch(0 0 0 / 0.04) 100%),
116
+ radial-gradient(ellipse at top left, oklch(1 0 0 / 0.06), transparent 40%);
117
+ }
118
+ .lj-se-paper::before,
119
+ .lj-se-paper-seg::before {
120
+ content: "";
121
+ position: absolute;
122
+ inset: 0;
123
+ pointer-events: none;
124
+ border-radius: inherit;
125
+ background-image: url("./paper-fibers.png");
126
+ background-repeat: repeat;
127
+ opacity: var(--lj-se-paper-grain-opacity);
128
+ mix-blend-mode: multiply;
129
+ z-index: 0;
130
+ }
131
+ .lj-se-paper > * { position: relative; z-index: 1; }
132
+ .lj-se-paper ::selection { background: oklch(0.7 0.14 30 / 0.30); }
133
+ .dark .lj-se-paper {
134
+ background-image:
135
+ radial-gradient(ellipse at center, transparent 60%, oklch(0 0 0 / 0.20) 100%),
136
+ radial-gradient(ellipse at top left, oklch(1 0 0 / 0.04), transparent 40%);
137
+ }
138
+ .dark .lj-se-paper::before,
139
+ .dark .lj-se-paper-seg::before {
140
+ mix-blend-mode: screen;
141
+ opacity: calc(var(--lj-se-paper-grain-opacity) * 0.55);
142
+ }
143
+ .dark .lj-se-paper ::selection,
144
+ .dark .lj-se-paper-seg ::selection { background: oklch(0.72 0.14 30 / 0.42); }
145
+
146
+ /* continuous-stream paper segment — middle segments carry NO shadow so the
147
+ stream reads as one continuous page; hairline left/right borders fake the
148
+ paper edge without casting a horizontal shadow bar. */
149
+ .lj-se-paper-seg {
150
+ position: relative;
151
+ background-color: var(--lj-se-paper-bg);
152
+ color: var(--lj-se-paper-fg);
153
+ isolation: isolate;
154
+ border-left: 1px solid oklch(0 0 0 / 0.045);
155
+ border-right: 1px solid oklch(0 0 0 / 0.045);
156
+ }
157
+ .dark .lj-se-paper-seg {
158
+ border-left-color: oklch(1 0 0 / 0.05);
159
+ border-right-color: oklch(1 0 0 / 0.05);
160
+ background-image: radial-gradient(ellipse at center, transparent 60%, oklch(0 0 0 / 0.20) 100%);
161
+ }
162
+ .lj-se-paper-seg > * { position: relative; z-index: 1; }
163
+ .lj-se-paper-seg ::selection { background: oklch(0.7 0.14 30 / 0.30); }
164
+ .lj-se-paper-seg.is-start {
165
+ border-top-left-radius: 8px; border-top-right-radius: 8px;
166
+ border-top: 1px solid oklch(0 0 0 / 0.045);
167
+ }
168
+ .dark .lj-se-paper-seg.is-start { border-top-color: oklch(1 0 0 / 0.05); }
169
+ .lj-se-paper-seg.is-end {
170
+ border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;
171
+ border-bottom: 1px solid oklch(0 0 0 / 0.045);
172
+ box-shadow: 0 12px 32px -12px oklch(0.35 0.04 70 / 0.10);
173
+ }
174
+ .dark .lj-se-paper-seg.is-end {
175
+ border-bottom-color: oklch(1 0 0 / 0.05);
176
+ box-shadow: 0 12px 32px -12px oklch(0 0 0 / 0.32);
177
+ }
178
+ .lj-se-paper-seg.is-sole { border-radius: 8px; box-shadow: var(--lj-se-paper-shadow); }
179
+
180
+ /* ── click-to-edit primitive ──────────────────────────────────────────── */
181
+ .lj-se-editable {
182
+ cursor: text;
183
+ white-space: pre-wrap;
184
+ border-radius: 4px;
185
+ }
186
+ /* no hover background — text stays flat like the old version */
187
+ .lj-se-editable--ro { cursor: default; }
188
+ .lj-se-ph { color: color-mix(in oklab, var(--lj-se-paper-fg) 35%, transparent); }
189
+ .lj-se-editing {
190
+ width: 100%;
191
+ resize: none;
192
+ overflow: hidden;
193
+ background: transparent;
194
+ border: 0;
195
+ outline: none;
196
+ font: inherit;
197
+ color: inherit;
198
+ text-align: inherit;
199
+ letter-spacing: inherit;
200
+ line-height: inherit;
201
+ padding: 0;
202
+ }
203
+
204
+ /* ── Asian format typography ──────────────────────────────────────────── */
205
+ .lj-se-asian { font-size: 14px; line-height: 1.75rem; color: var(--lj-se-paper-fg); }
206
+ .lj-se-asian-scene { margin-bottom: 1.75rem; }
207
+ .lj-se-asian-head {
208
+ margin-bottom: 0.75rem;
209
+ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem;
210
+ font-weight: 500;
211
+ }
212
+ .lj-se-asian-num { font-variant-numeric: tabular-nums; }
213
+ .lj-se-asian-slug { opacity: 0.8; }
214
+ .lj-se-asian-actions > * + * { margin-top: 0.25rem; }
215
+ .lj-se-asian-action { opacity: 0.75; }
216
+ .lj-se-asian-action-mark { margin-right: 0.5rem; opacity: 0.7; }
217
+ .lj-se-asian-narration { font-style: italic; opacity: 0.8; }
218
+ .lj-se-asian-speaker { font-weight: 600; }
219
+ .lj-se-asian-tag { margin-left: 0.125rem; font-style: italic; opacity: 0.45; }
220
+ .lj-se-asian-colon { margin: 0 0.125rem; }
221
+ .lj-se-asian-page {
222
+ pointer-events: none; position: absolute; bottom: 1.5rem; right: 3rem;
223
+ user-select: none; font-size: 12px; opacity: 0.45;
224
+ }
225
+
226
+ /* ── Standard format typography ───────────────────────────────────────── */
227
+ .lj-se-std-dialogue { padding: 0.625rem 2rem; text-align: center; }
228
+ .lj-se-std-speaker {
229
+ margin: 0 auto; display: block; cursor: pointer; background: transparent; border: 0;
230
+ text-align: center; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em;
231
+ font-size: 14.5px; color: color-mix(in oklab, var(--lj-se-paper-fg) 80%, transparent);
232
+ }
233
+ .lj-se-std-emotion { margin-top: 0.125rem; font-size: 13px; font-style: italic; line-height: 1.25; }
234
+ .lj-se-std-line {
235
+ margin: 0.25rem auto 0; display: block; max-width: 34rem; text-align: center;
236
+ font-size: 16px; font-weight: 700; line-height: 1.65;
237
+ }
238
+ .lj-se-std-inner {
239
+ margin: 0.125rem auto 0; display: block; max-width: 32rem; text-align: center;
240
+ font-size: 14px; font-style: italic; line-height: 1.65;
241
+ color: var(--lj-se-muted-fg);
242
+ }
243
+ .lj-se-std-action {
244
+ margin: 0 auto; display: block; max-width: 40rem; padding: 0 2rem;
245
+ text-align: left; font-size: 14.5px; line-height: 1.65;
246
+ color: color-mix(in oklab, var(--lj-se-paper-fg) 90%, transparent);
247
+ }
248
+
249
+ /* ════════════════════════════════════════════════════════════════════════
250
+ Component layer — aligned 1:1 with agent-frontend's classNames/icons.
251
+ Mono stack reused throughout: "JetBrains Mono", ui-monospace, monospace.
252
+ ════════════════════════════════════════════════════════════════════════ */
253
+
254
+ /* shared icons */
255
+ .lj-se-icon { width: 18px; height: 18px; }
256
+ .lj-se-icon-sm { width: 15px; height: 15px; }
257
+ .lj-se-ic-3 { width: 12px; height: 12px; }
258
+ .lj-se-ic-4 { width: 16px; height: 16px; }
259
+ .lj-se-spin { animation: lj-se-spin 1s linear infinite; }
260
+ @keyframes lj-se-spin { to { transform: rotate(360deg); } }
261
+
262
+ /* layout shell */
263
+ .lj-se-main { display: flex; min-width: 0; flex: 1; flex-direction: column; height: 100%; overflow: hidden; }
264
+ .lj-se-canvas { position: relative; min-height: 0; flex: 1; overflow: hidden; display: flex; }
265
+ .lj-se-canvas > .lj-se-stream,
266
+ .lj-se-canvas > .lj-se-worldview,
267
+ .lj-se-canvas > .lj-se-entity { flex: 1; }
268
+
269
+ /* small ghost icon button (change-type, undo/redo) */
270
+ .lj-se-rowbtn { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; border-radius: 6px; padding: 4px; }
271
+ .lj-se-rowbtn:hover { background: var(--lj-se-accent); color: var(--lj-se-fg); }
272
+ .lj-se-rowbtn:disabled { opacity: 0.35; cursor: default; }
273
+
274
+ /* native select-as-text */
275
+ .lj-se-select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; outline: none; padding: 0; font: inherit; color: inherit; cursor: pointer; max-width: 100%; border-radius: 3px; }
276
+ .lj-se-select:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
277
+ .lj-se-select:disabled { cursor: default; text-decoration: none; }
278
+ .lj-se-select option { color: var(--lj-se-fg); background: var(--lj-se-popover); }
279
+ .is-orphan { color: var(--lj-se-destructive); }
280
+
281
+ /* ── Popover ─────────────────────────────────────────────────────────── */
282
+ .lj-se-pop-root { position: relative; display: inline-flex; }
283
+ .lj-se-pop-panel { position: absolute; z-index: 40; min-width: 8rem; background: var(--lj-se-popover); color: var(--lj-se-fg); border: 1px solid var(--lj-se-border); border-radius: 10px; box-shadow: 0 12px 32px -8px oklch(0 0 0 / 0.22), 0 3px 8px -3px oklch(0 0 0 / 0.10); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
284
+ .lj-se-pop--bottom { top: calc(100% + 4px); }
285
+ .lj-se-pop--top { bottom: calc(100% + 4px); }
286
+ .lj-se-pop--start { left: 0; }
287
+ .lj-se-pop--center { left: 50%; transform: translateX(-50%); }
288
+ .lj-se-pop--end { right: 0; }
289
+
290
+ /* ── Type picker menu ────────────────────────────────────────────────── */
291
+ .lj-se-typemenu { width: 208px; }
292
+ .lj-se-typemenu-head { padding: 4px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lj-se-muted-fg); }
293
+ .lj-se-typemenu-list { display: flex; flex-direction: column; gap: 2px; }
294
+ .lj-se-typemenu-item { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 6px; padding: 6px 8px; text-align: left; font: inherit; font-size: 13px; color: var(--lj-se-fg); cursor: pointer; }
295
+ .lj-se-typemenu-item:hover { background: var(--lj-se-muted); }
296
+ .lj-se-typemenu-item.is-current { cursor: default; background: color-mix(in oklab, var(--lj-se-muted) 60%, transparent); color: var(--lj-se-muted-fg); }
297
+ .lj-se-typemenu-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--lj-se-muted-fg); }
298
+ .lj-se-typemenu-label { flex-shrink: 0; font-weight: 500; }
299
+ .lj-se-typemenu-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; color: var(--lj-se-muted-fg); }
300
+ .lj-se-typemenu-cur { margin-left: auto; flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px; color: var(--lj-se-muted-fg); }
301
+
302
+ /* add-ref menu */
303
+ .lj-se-addmenu { display: flex; flex-direction: column; gap: 2px; min-width: 8rem; }
304
+ .lj-se-addmenu-empty { padding: 6px 10px; font-size: 12px; color: var(--lj-se-muted-fg); }
305
+ .lj-se-addmenu-item { text-align: left; padding: 6px 10px; border-radius: 6px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; white-space: nowrap; }
306
+ .lj-se-addmenu-item:hover { background: var(--lj-se-accent); }
307
+
308
+ /* ── Delete confirm (Eraser → Check) ─────────────────────────────────── */
309
+ .lj-se-del { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 4px; color: var(--lj-se-muted-fg); cursor: pointer; transition: color 0.15s; }
310
+ .lj-se-del:hover { color: var(--lj-se-destructive); }
311
+ .lj-se-del.is-confirming { color: oklch(0.7 0.17 145); }
312
+ .lj-se-del:disabled { opacity: 0; pointer-events: none; }
313
+ .lj-se-del .lj-se-icon { width: 18px; height: 18px; }
314
+
315
+ /* ── TOC ─────────────────────────────────────────────────────────────── */
316
+ .lj-se-toc { width: 256px; flex-shrink: 0; height: 100%; overflow-y: auto; border-right: 1px solid var(--lj-se-border); background: var(--lj-se-bg); display: flex; flex-direction: column; gap: 2px; padding: 8px; font-size: 13px; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--lj-se-muted-fg) 30%, transparent) transparent; }
317
+ .lj-se-toc::-webkit-scrollbar { width: 8px; }
318
+ .lj-se-toc::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--lj-se-muted-fg) 30%, transparent); border-radius: 999px; }
319
+ .lj-se-gh { margin-top: 8px; display: flex; width: 100%; align-items: center; gap: 6px; border: 0; background: transparent; border-radius: 6px; padding: 4px 8px; text-align: left; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--lj-se-fg); cursor: pointer; }
320
+ .lj-se-gh:hover { background: color-mix(in oklab, var(--lj-se-accent) 40%, transparent); }
321
+ .lj-se-gh.is-hl { background: color-mix(in oklab, var(--lj-se-accent) 60%, transparent); }
322
+ .lj-se-gh-chev { width: 12px; height: 12px; flex-shrink: 0; color: var(--lj-se-muted-fg); transition: transform 0.15s; }
323
+ .lj-se-gh-chev.is-open { transform: rotate(90deg); }
324
+ .lj-se-gh-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--lj-se-fg); }
325
+ .lj-se-gh-label { flex: 1; }
326
+ .lj-se-gh-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--lj-se-muted-fg); }
327
+
328
+ .lj-se-tocitem { display: flex; width: 100%; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 6px; padding: 4px 0; text-align: left; font: inherit; color: var(--lj-se-fg); cursor: pointer; }
329
+ .lj-se-tocitem:hover { background: color-mix(in oklab, var(--lj-se-accent) 50%, transparent); }
330
+ .lj-se-tocitem.is-active { background: var(--lj-se-accent); }
331
+ .lj-se-toc-l0 { padding-left: 8px; padding-right: 8px; font-size: 13px; font-weight: 500; }
332
+ .lj-se-toc-l1 { padding-left: 20px; padding-right: 8px; font-size: 13px; font-weight: 500; }
333
+ .lj-se-toc-l2 { padding-left: 36px; padding-right: 8px; font-size: 12px; color: color-mix(in oklab, var(--lj-se-fg) 65%, transparent); }
334
+ .lj-se-tocitem-icon { flex-shrink: 0; }
335
+ .lj-se-tocitem-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
336
+ .lj-se-tocitem-meta { flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--lj-se-muted-fg); }
337
+ .lj-se-toc-dot { user-select: none; padding-right: 4px; color: var(--lj-se-border); }
338
+ .lj-se-toc-empty { padding: 4px 8px; font-size: 12px; color: var(--lj-se-muted-fg); }
339
+
340
+ .lj-se-eprow { display: flex; width: 100%; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 8px 4px 20px; font-size: 13px; font-weight: 500; }
341
+ .lj-se-eprow:hover { background: color-mix(in oklab, var(--lj-se-accent) 50%, transparent); }
342
+ .lj-se-eprow.is-active { background: color-mix(in oklab, var(--lj-se-accent) 70%, transparent); }
343
+ .lj-se-eprow-chev { display: inline-flex; border: 0; background: transparent; padding: 0; color: var(--lj-se-muted-fg); cursor: pointer; }
344
+ .lj-se-eprow-chev .is-open { transform: rotate(90deg); transition: transform 0.15s; }
345
+ .lj-se-eprow-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
346
+ .lj-se-eprow-glyph { color: var(--lj-se-muted-fg); flex-shrink: 0; }
347
+ .lj-se-eprow-num { flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--lj-se-muted-fg); }
348
+ .lj-se-eprow-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
349
+ .lj-se-eprow-count { flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--lj-se-muted-fg); }
350
+
351
+ /* ── Top bar ─────────────────────────────────────────────────────────── */
352
+ .lj-se-topbar { display: flex; height: 36px; flex-shrink: 0; align-items: center; gap: 8px; border-bottom: 1px solid var(--lj-se-border); padding: 0 16px; background: var(--lj-se-bg); }
353
+ .lj-se-topbar-left { min-width: 0; flex: 1; }
354
+ .lj-se-topbar-right { display: flex; align-items: center; gap: 8px; }
355
+ .lj-se-topbar-undo { display: inline-flex; gap: 2px; }
356
+ .lj-se-ctx { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
357
+ .lj-se-ctx-kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lj-se-muted-fg); }
358
+ .lj-se-ctx-name { font-size: 12px; font-weight: 500; color: var(--lj-se-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
359
+ .lj-se-ctx-meta { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--lj-se-muted-fg); }
360
+
361
+ /* ── Format toggle ───────────────────────────────────────────────────── */
362
+ .lj-se-format { display: inline-flex; align-items: center; gap: 2px; border-radius: 6px; padding: 2px; font-size: 11px; }
363
+ .lj-se-format-btn { height: 24px; border: 0; background: transparent; border-radius: 4px; padding: 0 8px; line-height: 1; cursor: pointer; font: inherit; font-size: 11px; color: color-mix(in oklab, var(--lj-se-muted-fg) 65%, transparent); }
364
+ .lj-se-format-btn:hover { background: color-mix(in oklab, var(--lj-se-fg) 3%, transparent); color: color-mix(in oklab, var(--lj-se-fg) 85%, transparent); }
365
+ .lj-se-format-btn.is-active { background: color-mix(in oklab, var(--lj-se-fg) 6%, transparent); font-weight: 500; color: var(--lj-se-fg); }
366
+
367
+ /* ── Save capsule (floating, bottom center) ──────────────────────────── */
368
+ .lj-se-capsule-anchor { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding-bottom: 28px; pointer-events: none; z-index: 30; }
369
+ .lj-se-capsule { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--lj-se-popover); padding: 6px 8px; border: 1px solid var(--lj-se-border); box-shadow: 0 12px 32px -8px oklch(0 0 0 / 0.22), 0 3px 8px -3px oklch(0 0 0 / 0.10); }
370
+ .lj-se-capsule-save { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 14px; }
371
+ .lj-se-capsule-save.is-saving { color: var(--lj-se-muted-fg); }
372
+ .lj-se-capsule-save.is-saved { color: oklch(0.6 0.13 150); }
373
+ .lj-se-capsule-save.is-error { color: var(--lj-se-destructive); }
374
+ .lj-se-capsule-diff { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 14px; }
375
+ .lj-se-capsule-ping { position: relative; display: inline-flex; width: 8px; height: 8px; }
376
+ .lj-se-capsule-dot { position: absolute; inset: 0; width: 8px; height: 8px; border-radius: 999px; background: oklch(0.75 0.16 70); }
377
+ .lj-se-capsule-dot.is-ping { animation: lj-se-ping 1s cubic-bezier(0,0,0.2,1) infinite; opacity: 0.6; }
378
+ @keyframes lj-se-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
379
+ .lj-se-capsule-count { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
380
+ .lj-se-capsule-muted { color: var(--lj-se-muted-fg); }
381
+ .lj-se-capsule-nav { display: inline-flex; border: 0; background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; border-radius: 6px; padding: 2px; }
382
+ .lj-se-capsule-nav:hover { background: var(--lj-se-muted); color: var(--lj-se-fg); }
383
+ .lj-se-capsule-reject, .lj-se-capsule-accept { border: 0; background: transparent; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; font: inherit; }
384
+ .lj-se-capsule-reject { color: var(--lj-se-muted-fg); }
385
+ .lj-se-capsule-reject:hover { background: color-mix(in oklab, var(--lj-se-destructive) 10%, transparent); color: var(--lj-se-destructive); }
386
+ .lj-se-capsule-accept { font-weight: 500; color: var(--lj-se-fg); }
387
+ .lj-se-capsule-accept:hover { background: var(--lj-se-muted); }
388
+ .lj-se-capsule-reject:disabled, .lj-se-capsule-accept:disabled { opacity: 0.4; cursor: default; }
389
+
390
+ /* ── Worldview view ──────────────────────────────────────────────────── */
391
+ .lj-se-worldview { height: 100%; overflow-y: auto; padding: 24px; }
392
+ .lj-se-worldview, .lj-se-entity { max-width: 760px; margin: 0 auto; width: 100%; }
393
+ .lj-se-wv-header { margin-bottom: 16px; }
394
+ .lj-se-wv-kicker { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lj-se-muted-fg); font-weight: 600; }
395
+ .lj-se-wv-title { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
396
+ .lj-se-wv-sub { margin: 4px 0 0; font-size: 12px; color: var(--lj-se-muted-fg); }
397
+ .lj-se-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 20px; }
398
+ .lj-se-stat { display: flex; flex-direction: column; gap: 2px; border-radius: 8px; background: color-mix(in oklab, var(--lj-se-muted) 40%, transparent); padding: 8px 12px; }
399
+ .lj-se-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lj-se-muted-fg); }
400
+ .lj-se-stat-value { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", ui-monospace, monospace; }
401
+ .lj-se-field { margin-bottom: 18px; }
402
+ .lj-se-field-label { font-size: 12px; font-weight: 500; margin-bottom: 6px; color: var(--lj-se-fg); }
403
+ .lj-se-field-hint { font-weight: 400; font-size: 10px; color: var(--lj-se-muted-fg); margin-left: 6px; }
404
+ .lj-se-field-box { border: 1px solid var(--lj-se-input); border-radius: 8px; padding: 8px 12px; min-height: 40px; line-height: 1.7; background: transparent; }
405
+ .lj-se-field-box:focus-within { border-color: var(--lj-se-ring); }
406
+ .lj-se-field-box .lj-se-editable { display: block; min-height: 1.4em; }
407
+ .lj-se-field-box .lj-se-editing { width: 100%; }
408
+
409
+ /* ── Entity view ─────────────────────────────────────────────────────── */
410
+ .lj-se-entity { height: 100%; overflow-y: auto; padding: 24px; }
411
+ .lj-se-entity-missing { color: var(--lj-se-muted-fg); }
412
+ .lj-se-entity-header { margin-bottom: 16px; }
413
+ .lj-se-entity-name { margin: 4px 0 0; font-size: 18px; font-weight: 600; }
414
+ .lj-se-states { margin-top: 8px; }
415
+ .lj-se-states-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
416
+ .lj-se-state-add, .lj-se-merge-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--lj-se-border); background: var(--lj-se-card); color: var(--lj-se-fg); cursor: pointer; border-radius: 6px; padding: 4px 10px; font-size: 12px; font: inherit; }
417
+ .lj-se-state-add:hover, .lj-se-merge-btn:hover { background: var(--lj-se-accent); }
418
+ .lj-se-states-empty { font-size: 12px; color: var(--lj-se-muted-fg); }
419
+ .lj-se-state-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
420
+ .lj-se-state-card { border: 1px solid var(--lj-se-border); border-radius: 8px; padding: 10px 12px; background: var(--lj-se-card); }
421
+ .lj-se-state-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
422
+ .lj-se-state-card-name { font-weight: 600; }
423
+ .lj-se-state-card-desc { font-size: 13px; color: var(--lj-se-muted-fg); display: block; min-height: 1.4em; }
424
+
425
+ /* ── Stream / banner ─────────────────────────────────────────────────── */
426
+ .lj-se-stream { height: 100%; }
427
+ .lj-se-stream-empty { padding: 48px; text-align: center; color: var(--lj-se-muted-fg); }
428
+ .lj-se-stream-row { display: flex; justify-content: center; padding: 0 24px; }
429
+ .lj-se-stream-row .lj-se-paper-seg { width: 100%; max-width: 820px; padding: 8px 48px; }
430
+ .lj-se-paper-seg.is-start { margin-top: 16px; padding-top: 32px; }
431
+ .lj-se-paper-seg.is-end { margin-bottom: 16px; padding-bottom: 40px; }
432
+ .lj-se-paper-seg.is-sole { margin: 16px 0; padding-top: 32px; padding-bottom: 40px; }
433
+ .lj-se-paper-seg.is-changed { box-shadow: inset 3px 0 0 0 oklch(0.7 0.16 70); }
434
+ .lj-se-ep-banner { display: flex; align-items: baseline; gap: 12px; justify-content: center; padding: 16px 24px 6px; background: var(--lj-se-bg); }
435
+ .lj-se-ep-banner-title { font-weight: 700; font-size: 15px; }
436
+ .lj-se-ep-banner-meta { font-size: 12px; color: var(--lj-se-muted-fg); }
437
+
438
+ /* ── Scene ───────────────────────────────────────────────────────────── */
439
+ .lj-se-scene { position: relative; }
440
+ .lj-se-merge-btn { position: absolute; top: -6px; right: 0; opacity: 0; }
441
+ .lj-se-scene:hover .lj-se-merge-btn { opacity: 1; }
442
+ .lj-se-scene-head { padding: 4px 0 8px; }
443
+ .lj-se-scene-headrow { display: flex; align-items: flex-start; gap: 16px; }
444
+ .lj-se-scene-num { width: 32px; flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--lj-se-paper-fg) 38%, transparent); font-weight: 300; }
445
+ .lj-se-scene-num.is-focused { color: color-mix(in oklab, var(--lj-se-paper-fg) 85%, transparent); font-weight: 600; }
446
+ .lj-se-scene-slug { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; flex: 1; min-width: 0; font-size: 14px; }
447
+ .lj-se-scene-slug .lj-se-select { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
448
+ .lj-se-slug-loc { font-weight: 600; max-width: 100%; }
449
+ .lj-se-slug-dash { font-family: "JetBrains Mono", ui-monospace, monospace; color: color-mix(in oklab, var(--lj-se-paper-fg) 40%, transparent); }
450
+ .lj-se-slug-state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in oklab, var(--lj-se-muted-fg) 70%, transparent); }
451
+ .lj-se-scene-del { margin-left: auto; opacity: 0; }
452
+ .lj-se-scene-head:hover .lj-se-scene-del { opacity: 1; }
453
+
454
+ /* refs (CAST / PROP) */
455
+ .lj-se-refs { margin: 6px 0 0 48px; display: flex; flex-direction: column; gap: 2px; }
456
+ .lj-se-ref-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5; }
457
+ .lj-se-ref-label { flex-shrink: 0; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklab, var(--lj-se-muted-fg) 50%, transparent); }
458
+ .lj-se-ref-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
459
+ .lj-se-ref-empty { color: color-mix(in oklab, var(--lj-se-paper-fg) 40%, transparent); }
460
+ .lj-se-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 2px 4px; font-size: 13px; color: color-mix(in oklab, var(--lj-se-paper-fg) 85%, transparent); }
461
+ .lj-se-chip:hover { background: color-mix(in oklab, var(--lj-se-paper-fg) 4%, transparent); }
462
+ .lj-se-chip.is-orphan { border: 1px solid color-mix(in oklab, var(--lj-se-destructive) 40%, transparent); color: var(--lj-se-destructive); background: color-mix(in oklab, var(--lj-se-destructive) 5%, transparent); }
463
+ .lj-se-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
464
+ .lj-se-chip-sep { opacity: 0.25; }
465
+ .lj-se-chip-state { height: 20px; font-size: 11px; opacity: 0.6; }
466
+ .lj-se-chip-del { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 4px; color: inherit; cursor: pointer; opacity: 0; }
467
+ .lj-se-chip:hover .lj-se-chip-del { opacity: 0.45; }
468
+ .lj-se-chip-del:hover { color: var(--lj-se-destructive); opacity: 0.95; }
469
+ .lj-se-chip-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; border: 0; background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; }
470
+ .lj-se-chip-add:hover { background: color-mix(in oklab, var(--lj-se-paper-fg) 6%, transparent); color: var(--lj-se-paper-fg); }
471
+
472
+ /* ── Action rows ─────────────────────────────────────────────────────── */
473
+ .lj-se-actions { margin-top: 8px; position: relative; }
474
+ .lj-se-action-slot { position: relative; }
475
+ .lj-se-scene-empty { padding: 12px 0; text-align: center; font-style: italic; opacity: 0.5; }
476
+ .lj-se-row { position: relative; padding: 2px 40px 2px 8px; border-radius: 6px; }
477
+ /* no hover background on rows — keep the paper flat (matches old version) */
478
+ .lj-se-row-anno { position: absolute; left: -2px; top: 50%; transform: translateY(-50%); font-size: 10.5px; letter-spacing: 0.06em; color: var(--lj-se-muted-fg); opacity: 0; pointer-events: none; writing-mode: vertical-rl; transition: opacity 0.2s; }
479
+ .lj-se-row:hover .lj-se-row-anno { opacity: 0.5; }
480
+ .lj-se-rowtools { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 1px; opacity: 0; }
481
+ .lj-se-row:hover .lj-se-rowtools, .lj-se-row:focus-within .lj-se-rowtools { opacity: 1; }
482
+
483
+ /* state-change badges */
484
+ .lj-se-state-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; justify-content: center; }
485
+ .lj-se-row--asian .lj-se-state-badges { justify-content: flex-start; margin-left: 24px; }
486
+ .lj-se-state-badge { font-size: 11px; line-height: 1.4; color: var(--lj-se-muted-fg); border: 1px solid color-mix(in oklab, var(--lj-se-paper-fg) 18%, transparent); border-radius: 4px; padding: 0 5px; }
487
+
488
+ /* standard format cue + body */
489
+ .lj-se-std-dialogue { padding: 10px 16px; text-align: center; }
490
+ .lj-se-cue { display: block; margin: 0 auto; }
491
+ .lj-se-cue--select, .lj-se-cue--structured { text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3em; color: color-mix(in oklab, var(--lj-se-paper-fg) 80%, transparent); }
492
+ .lj-se-cue--select { cursor: pointer; }
493
+ .lj-se-cue-delivery { font-family: "Inter", sans-serif; font-weight: 500; letter-spacing: normal; text-transform: none; font-size: 12px; color: var(--lj-se-muted-fg); }
494
+ .lj-se-std-emotion { margin-top: 2px; font-size: 12px; font-style: italic; line-height: 1.25; color: var(--lj-se-muted-fg); }
495
+ .lj-se-std-line, .lj-se-std-inner, .lj-se-std-action { white-space: pre-wrap; }
496
+ .lj-se-std-line { margin: 4px auto 0; max-width: 34rem; font-size: 16px; font-weight: 700; line-height: 1.65; text-align: center; color: var(--lj-se-paper-fg); }
497
+ .lj-se-std-inner { margin: 2px auto 0; max-width: 32rem; font-size: 14px; font-style: italic; line-height: 1.65; text-align: center; color: var(--lj-se-muted-fg); }
498
+ .lj-se-std-action { margin: 0 auto; display: block; max-width: 40rem; padding: 0 2rem; text-align: left; font-size: 14.5px; line-height: 1.65; color: color-mix(in oklab, var(--lj-se-paper-fg) 90%, transparent); }
499
+ .lj-se-std-action.is-narration { font-style: italic; opacity: 0.85; }
500
+
501
+ /* asian format inline */
502
+ .lj-se-row--asian { line-height: 1.9; font-size: 14px; }
503
+ /* action + dialogue cue lines lay out as flex: the prefix (△ / speaker / colon)
504
+ stays put while the content editor fills the rest of the line. This keeps the
505
+ editing <textarea> on the SAME line as the prefix (a 100%-wide textarea would
506
+ otherwise drop below it). */
507
+ .lj-se-asian-action,
508
+ .lj-se-asian-cueline { display: flex; flex-wrap: wrap; align-items: flex-start; }
509
+ .lj-se-asian-action { opacity: 0.78; }
510
+ .lj-se-asian-action-mark { flex-shrink: 0; margin-right: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; opacity: 0.7; }
511
+ .lj-se-asian-narration { font-style: italic; opacity: 0.8; }
512
+ .lj-se-asian-cueline.is-inner { font-style: italic; opacity: 0.92; }
513
+ .lj-se-asian-speaker { flex-shrink: 0; font-weight: 600; }
514
+ .lj-se-asian-speaker--select { display: inline; }
515
+ .lj-se-asian-tag { flex-shrink: 0; margin-left: 2px; font-style: italic; opacity: 0.45; }
516
+ .lj-se-asian-colon { flex-shrink: 0; margin: 0 2px; }
517
+ .lj-se-asian-narration .lj-se-editable { display: inline; }
518
+ /* the content editor (span in display, textarea in edit) fills the rest of the
519
+ flex line in both states */
520
+ .lj-se-asian-action > .lj-se-editable,
521
+ .lj-se-asian-action > .lj-se-editing,
522
+ .lj-se-asian-cueline > .lj-se-editable,
523
+ .lj-se-asian-cueline > .lj-se-editing { flex: 1 1 auto; min-width: 6ch; width: auto; }
524
+
525
+ /* ── Insert / split boundary affordance — ZERO layout height ─────────────
526
+ The ⊕ floats in the paper's left margin (negative left) and is absolutely
527
+ positioned, so it never adds vertical space between rows. It fades in only
528
+ when the adjacent row (or the gap itself) is hovered. */
529
+ .lj-se-gap { position: absolute; left: -30px; bottom: -9px; height: 18px; display: flex; align-items: center; opacity: 0; transition: opacity 0.12s; z-index: 6; }
530
+ .lj-se-gap--lead { bottom: auto; top: -9px; }
531
+ .lj-se-action-slot:hover > .lj-se-gap,
532
+ .lj-se-gap:hover,
533
+ .lj-se-gap:focus-within { opacity: 1; }
534
+ .lj-se-actions:hover > .lj-se-gap--lead { opacity: 1; }
535
+ .lj-se-gap-add { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--lj-se-paper-fg) 25%, transparent); background: var(--lj-se-paper-bg); color: var(--lj-se-muted-fg); cursor: pointer; box-shadow: 0 1px 2px oklch(0 0 0 / 0.08); }
536
+ .lj-se-gap-add:hover, .lj-se-gap-add.is-open { color: var(--lj-se-paper-fg); border-color: color-mix(in oklab, var(--lj-se-paper-fg) 45%, transparent); }
537
+
538
+ /* type menu: split footer */
539
+ .lj-se-typemenu-divider { height: 1px; margin: 4px 2px; background: var(--lj-se-border); }
540
+ .lj-se-typemenu-scissors { transform: scaleX(-1) rotate(18deg); }
541
+
542
+ /* ── Split scene (Scissors → Check) ──────────────────────────────────── */
543
+ .lj-se-split { position: relative; display: flex; width: 100%; height: 16px; align-items: center; justify-content: center; gap: 8px; border: 0; background: transparent; color: color-mix(in oklab, var(--lj-se-paper-fg) 60%, transparent); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
544
+ .lj-se-gap:hover .lj-se-split { opacity: 0.7; }
545
+ .lj-se-split:hover { opacity: 1; }
546
+ .lj-se-split.is-confirming { opacity: 0.95; color: oklch(0.7 0.17 145); }
547
+ .lj-se-split::before, .lj-se-split::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.18; }
548
+ .lj-se-split-scissors { width: 16px; height: 16px; transform: scaleX(-1) rotate(18deg); transition: transform 0.2s ease-out; }
549
+ .lj-se-split:hover .lj-se-split-scissors { transform: scaleX(-1) rotate(38deg); }
550
+ .lj-se-split-label { font-size: 11px; letter-spacing: 0.3em; white-space: nowrap; user-select: none; }
551
+
552
+ /* ── Quote-to-chat floating chip — parchment + ink, matches the menus ──── */
553
+ .lj-se-quote-btn {
554
+ position: absolute; transform: translate(0, -100%); transform-origin: bottom left; z-index: 35;
555
+ display: inline-flex; align-items: center; gap: 6px;
556
+ background: color-mix(in oklab, var(--lj-se-popover) 85%, var(--lj-se-paper-bg));
557
+ color: var(--lj-se-fg); border: 1px solid var(--lj-se-border); border-radius: 8px;
558
+ padding: 4px 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
559
+ cursor: pointer; white-space: nowrap;
560
+ box-shadow: 0 8px 22px -10px oklch(0 0 0 / 0.26), 0 1px 4px -2px oklch(0 0 0 / 0.12);
561
+ animation: lj-se-quote-in 0.13s cubic-bezier(0.2, 0.8, 0.2, 1);
562
+ }
563
+ @keyframes lj-se-quote-in { from { opacity: 0; transform: translate(0, calc(-100% + 4px)) scale(0.96); } to { opacity: 1; transform: translate(0, -100%) scale(1); } }
564
+ .lj-se-quote-btn:hover {
565
+ background: var(--lj-se-popover);
566
+ border-color: color-mix(in oklab, var(--lj-se-fg) 20%, transparent);
567
+ }
568
+ .lj-se-quote-btn svg { width: 13px; height: 13px; color: var(--lj-se-muted-fg); }
569
+ .lj-se-quote-btn:hover svg { color: var(--lj-se-fg); }
570
+
571
+ /* ── Stream: worldview block (inline, not full-height) ───────────────── */
572
+ .lj-se-stream-worldview { display: flex; justify-content: center; padding: 16px 24px 0; }
573
+ .lj-se-stream-worldview .lj-se-worldview { height: auto; overflow: visible; padding: 24px 0; max-width: 820px; }
574
+
575
+ /* ── Asset group header ──────────────────────────────────────────────── */
576
+ .lj-se-assetgroup-head { display: flex; justify-content: center; padding: 24px 24px 8px; }
577
+ .lj-se-assetgroup-title { width: 100%; max-width: 820px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--lj-se-fg); border-bottom: 1px solid var(--lj-se-border); padding-bottom: 6px; }
578
+
579
+ /* ── Asset card ──────────────────────────────────────────────────────── */
580
+ .lj-se-assetcard-row { display: flex; justify-content: center; padding: 6px 24px; }
581
+ .lj-se-assetcard { width: 100%; max-width: 820px; position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--lj-se-border); background: var(--lj-se-card); box-shadow: 0 1px 2px oklch(0 0 0 / 0.04); padding: 16px 20px; }
582
+ .lj-se-assetcard-missing { width: 100%; max-width: 820px; border: 1px dashed var(--lj-se-border); border-radius: 8px; padding: 8px 12px; font-size: 12px; color: var(--lj-se-muted-fg); }
583
+ .lj-se-assetcard-head { display: flex; align-items: baseline; gap: 8px; }
584
+ .lj-se-assetcard-name { font-size: 18px; font-weight: 600; color: var(--lj-se-fg); }
585
+ .lj-se-assetcard-id { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; color: var(--lj-se-muted-fg); }
586
+ .lj-se-assetcard-actions { margin-left: auto; display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; }
587
+ .lj-se-assetcard-badge { border-radius: 4px; background: var(--lj-se-muted); padding: 2px 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; color: var(--lj-se-muted-fg); }
588
+ .lj-se-assetcard-del { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: 6px; color: var(--lj-se-muted-fg); cursor: pointer; }
589
+ .lj-se-assetcard-del:hover { background: color-mix(in oklab, var(--lj-se-destructive) 10%, transparent); color: var(--lj-se-destructive); }
590
+ .lj-se-assetcard-desc { margin-top: 6px; max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--lj-se-muted-fg); }
591
+ .lj-se-assetcard-desc .lj-se-editable { display: block; min-height: 1.2em; }
592
+ .lj-se-assetcard-states { margin-top: 12px; }
593
+ .lj-se-assetcard-states-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
594
+ .lj-se-assetcard-states-label { font-size: 11px; font-weight: 600; color: var(--lj-se-fg); }
595
+ .lj-se-assetcard-state-add { display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--lj-se-border); background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; border-radius: 6px; padding: 2px 8px; font-size: 11px; font: inherit; }
596
+ .lj-se-assetcard-state-add:hover { background: var(--lj-se-accent); color: var(--lj-se-fg); }
597
+ .lj-se-assetcard-state-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
598
+ .lj-se-assetcard-state { border: 1px solid var(--lj-se-border); border-radius: 8px; padding: 8px 10px; background: color-mix(in oklab, var(--lj-se-muted) 30%, transparent); }
599
+ .lj-se-assetcard-state-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
600
+ .lj-se-assetcard-state-name { font-size: 13px; font-weight: 600; }
601
+ .lj-se-assetcard-state-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--lj-se-muted-fg); min-height: 1.2em; }
602
+ .lj-se-assetcard-state .lj-se-del { width: 24px; height: 24px; }
603
+ .lj-se-assetcard-state .lj-se-del .lj-se-icon { width: 14px; height: 14px; }
604
+
605
+ /* ── Reference grid (asset → scenes) ─────────────────────────────────── */
606
+ .lj-se-refgrid { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; }
607
+ .lj-se-refgrid-chunk { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; background: color-mix(in oklab, var(--lj-se-muted) 60%, transparent); padding: 4px 8px; }
608
+ .lj-se-refgrid-ep { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--lj-se-fg); }
609
+ .lj-se-refgrid-scenes { display: inline-flex; align-items: center; gap: 2px; }
610
+ .lj-se-refgrid-scene { border: 0; background: transparent; border-radius: 4px; padding: 2px 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--lj-se-fg); cursor: pointer; }
611
+ .lj-se-refgrid-scene:hover { background: var(--lj-se-card); box-shadow: 0 0 0 1px var(--lj-se-border) inset; }
612
+ .lj-se-refgrid-scene.is-current { background: color-mix(in oklab, var(--lj-se-primary) 15%, transparent); color: var(--lj-se-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--lj-se-primary) 40%, transparent) inset; }
613
+
614
+ /* ── chip name as scene→asset link ───────────────────────────────────── */
615
+ .lj-se-chip-name--link { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 500; padding: 0; }
616
+ .lj-se-chip-name--link:hover { text-decoration: underline dotted; text-underline-offset: 2px; }
617
+
618
+ /* ── capsule: 返回 X ─────────────────────────────────────────────────── */
619
+ .lj-se-capsule-return { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500; color: var(--lj-se-fg); cursor: pointer; font: inherit; }
620
+ .lj-se-capsule-return:hover { background: var(--lj-se-muted); }
621
+ .lj-se-capsule-return-label { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
622
+
623
+ /* ── Episode title page (printed on the paper top) ───────────────────── */
624
+ .lj-se-epbanner { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 12px; color: var(--lj-se-paper-fg); text-align: center; }
625
+ .lj-se-epbanner-kicker { font-size: 11px; letter-spacing: 0.5em; text-indent: 0.5em; color: color-mix(in oklab, var(--lj-se-paper-fg) 45%, transparent); }
626
+ .lj-se-epbanner-script { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: 0.04em; }
627
+ .lj-se-epbanner-ep { margin: 2px 0 0; font-size: 18px; font-weight: 600; }
628
+ .lj-se-epbanner-divider { margin-top: 8px; height: 1px; width: 96px; background: currentColor; opacity: 0.15; }
629
+ .lj-se-epbanner .lj-se-editable { display: inline-block; }
630
+
631
+ /* ── Asian print scene heading: "n. 地点 日/内" ─────────────────────── */
632
+ .lj-se-asian-head { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; margin: 0 0 12px; padding-top: 4px; font-weight: 500; font-size: 15px; color: var(--lj-se-paper-fg); }
633
+ .lj-se-asian-num { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
634
+ .lj-se-asian-loc { font-weight: 600; max-width: 100%; }
635
+ .lj-se-asian-slug { display: inline-flex; align-items: baseline; gap: 2px; font-family: "JetBrains Mono", ui-monospace, monospace; opacity: 0.8; }
636
+ .lj-se-asian-slash { opacity: 0.5; }
637
+ .lj-se-asian-headdel { margin-left: auto; opacity: 0; }
638
+ .lj-se-asian-head:hover .lj-se-asian-headdel { opacity: 1; }
639
+
640
+ /* ════════════════════════════════════════════════════════════════════════
641
+ Left-margin structural controls — crafted to read as ink marks on paper,
642
+ not chrome buttons: invisible at rest, a faint mark on row hover, a deep
643
+ ink glyph + soft warm halo on its own hover, opening a parchment menu.
644
+ ════════════════════════════════════════════════════════════════════════ */
645
+ .lj-se-row { padding: 3px 8px; }
646
+
647
+ /* the margin handle (per row) */
648
+ .lj-se-handle-pop { position: absolute; left: -34px; top: 1px; display: inline-flex; }
649
+ .lj-se-handle {
650
+ position: relative; display: inline-flex; align-items: center; justify-content: center;
651
+ width: 22px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
652
+ color: var(--lj-se-paper-fg); opacity: 0; transform: translateX(3px);
653
+ transition: opacity 0.18s ease, transform 0.18s ease;
654
+ }
655
+ .lj-se-row:hover .lj-se-handle { opacity: 0.24; transform: none; }
656
+ .lj-se-handle:hover, .lj-se-handle.is-open { opacity: 0.92; transform: none; }
657
+ .lj-se-handle::before {
658
+ content: ""; position: absolute; left: 50%; top: 50%;
659
+ width: 28px; height: 28px; transform: translate(-50%, -50%) scale(0.6);
660
+ border-radius: 9px; pointer-events: none; opacity: 0;
661
+ background: radial-gradient(circle at center, color-mix(in oklab, var(--lj-se-paper-fg) 11%, transparent), transparent 70%);
662
+ transition: opacity 0.18s ease, transform 0.18s ease;
663
+ }
664
+ .lj-se-handle:hover::before, .lj-se-handle.is-open::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
665
+ .lj-se-handle-grip { width: 14px; height: 14px; }
666
+
667
+ /* the scene number as the scene's control hub */
668
+ .lj-se-scenenum-pop { position: relative; display: inline-flex; }
669
+ .lj-se-scenenum-btn { position: relative; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; transition: color 0.18s ease; }
670
+ .lj-se-scenenum-btn::before {
671
+ content: ""; position: absolute; inset: -6px -10px; border-radius: 12px; pointer-events: none; opacity: 0;
672
+ background: radial-gradient(ellipse at center, color-mix(in oklab, var(--lj-se-paper-fg) 9%, transparent), transparent 72%);
673
+ transition: opacity 0.18s ease;
674
+ }
675
+ .lj-se-scenenum-btn:hover::before, .lj-se-scenenum-btn.is-open::before { opacity: 1; }
676
+ .lj-se-scenenum-btn:hover, .lj-se-scenenum-btn.is-open { color: color-mix(in oklab, var(--lj-se-paper-fg) 85%, transparent); }
677
+
678
+ /* parchment-toned menu (shared by row + scene handles) */
679
+ .lj-se-rowmenu {
680
+ width: 232px; padding: 8px;
681
+ background: color-mix(in oklab, var(--lj-se-popover) 88%, var(--lj-se-paper-bg));
682
+ border: 1px solid var(--lj-se-border); border-radius: 12px;
683
+ box-shadow: 0 16px 40px -12px oklch(0 0 0 / 0.28), 0 3px 10px -4px oklch(0 0 0 / 0.12);
684
+ transform-origin: top left; animation: lj-se-menu-in 0.15s ease-out;
685
+ }
686
+ @keyframes lj-se-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
687
+ .lj-se-rowmenu-inner { display: flex; flex-direction: column; gap: 2px; }
688
+ .lj-se-rowmenu-cap { padding: 2px 8px 4px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--lj-se-muted-fg); }
689
+ .lj-se-typeseg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
690
+ .lj-se-typeseg-item {
691
+ display: flex; flex-direction: column; align-items: center; gap: 4px;
692
+ padding: 8px 2px; border: 0; border-radius: 9px; background: transparent;
693
+ color: var(--lj-se-muted-fg); cursor: pointer; font: inherit; font-size: 11px;
694
+ transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
695
+ }
696
+ .lj-se-typeseg-item:hover { background: color-mix(in oklab, var(--lj-se-paper-fg) 6%, transparent); color: var(--lj-se-fg); }
697
+ .lj-se-typeseg-item.is-on {
698
+ background: color-mix(in oklab, var(--lj-se-paper-fg) 9%, transparent); color: var(--lj-se-fg);
699
+ box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lj-se-paper-fg) 14%, transparent);
700
+ }
701
+ .lj-se-rowmenu-div { height: 1px; margin: 6px 4px; background: color-mix(in oklab, var(--lj-se-border) 85%, transparent); }
702
+ .lj-se-rowmenu-item {
703
+ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 8px;
704
+ background: transparent; color: var(--lj-se-fg); cursor: pointer; font: inherit; font-size: 13px; text-align: left;
705
+ transition: background 0.14s ease, color 0.14s ease;
706
+ }
707
+ .lj-se-rowmenu-item:hover { background: color-mix(in oklab, var(--lj-se-paper-fg) 6%, transparent); }
708
+ .lj-se-rowmenu-glyph { flex-shrink: 0; color: var(--lj-se-muted-fg); }
709
+ .lj-se-rowmenu-del { color: color-mix(in oklab, var(--lj-se-destructive) 88%, var(--lj-se-fg)); }
710
+ .lj-se-rowmenu-del .lj-se-rowmenu-glyph { color: inherit; }
711
+ .lj-se-rowmenu-del:hover { background: color-mix(in oklab, var(--lj-se-destructive) 12%, transparent); }
712
+ .lj-se-scissors-rot { transform: scaleX(-1) rotate(16deg); }
713
+
714
+ /* empty-scene affordance */
715
+ .lj-se-scene-add-first {
716
+ display: inline-flex; align-items: center; gap: 5px; margin: 4px 0; padding: 6px 12px;
717
+ border: 1px dashed color-mix(in oklab, var(--lj-se-paper-fg) 22%, transparent); border-radius: 8px;
718
+ background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; font: inherit; font-size: 13px;
719
+ transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
720
+ }
721
+ .lj-se-scene-add-first:hover {
722
+ color: var(--lj-se-paper-fg); border-color: color-mix(in oklab, var(--lj-se-paper-fg) 40%, transparent);
723
+ background: color-mix(in oklab, var(--lj-se-paper-fg) 4%, transparent);
724
+ }
725
+
726
+ /* ── drag-to-reorder ─────────────────────────────────────────────────── */
727
+ /* handle is a touch more present + grab affordance */
728
+ .lj-se-row:hover .lj-se-handle { opacity: 0.42; }
729
+ .lj-se-handle.is-draggable { cursor: grab; }
730
+ .lj-se-handle.is-draggable:active { cursor: grabbing; }
731
+ .lj-se-handle:hover, .lj-se-handle.is-open { opacity: 1; }
732
+
733
+ /* the row being dragged fades back so the drop line reads clearly */
734
+ .lj-se-action-slot { position: relative; }
735
+ .lj-se-action-slot.is-dragging { opacity: 0.4; }
736
+
737
+ /* drop indicator: a warm ink rule with a left cap, drawn on the target edge */
738
+ .lj-se-action-slot.drop-before::before,
739
+ .lj-se-dropline-end::before,
740
+ .lj-se-dropline-end {
741
+ content: "";
742
+ }
743
+ .lj-se-action-slot.drop-before::before {
744
+ content: ""; position: absolute; top: -1px; left: 6px; right: 10px; height: 2px;
745
+ border-radius: 2px; background: color-mix(in oklab, var(--lj-se-paper-fg) 55%, transparent);
746
+ box-shadow: -6px 0 0 -2px color-mix(in oklab, var(--lj-se-paper-fg) 55%, transparent);
747
+ z-index: 4; pointer-events: none;
748
+ }
749
+ .lj-se-dropline-end {
750
+ position: relative; height: 2px; margin: 2px 10px 2px 6px; border-radius: 2px;
751
+ background: color-mix(in oklab, var(--lj-se-paper-fg) 55%, transparent);
752
+ }
753
+
754
+ /* episode header sits inline on the continuous paper; mid-stream headers get a
755
+ little extra top breathing room so a new episode reads clearly without a
756
+ page break / floating edge. */
757
+ .lj-se-ep-seg.is-mid { padding-top: 26px; }
758
+
759
+ /* ── add episode affordances ─────────────────────────────────────────── */
760
+ .lj-se-toc-addep {
761
+ display: flex; align-items: center; gap: 5px; width: 100%; margin-top: 2px;
762
+ padding: 5px 8px 5px 20px; border: 0; background: transparent; border-radius: 6px;
763
+ color: var(--lj-se-muted-fg); cursor: pointer; font: inherit; font-size: 12.5px; text-align: left;
764
+ transition: background 0.14s ease, color 0.14s ease;
765
+ }
766
+ .lj-se-toc-addep:hover { background: color-mix(in oklab, var(--lj-se-accent) 50%, transparent); color: var(--lj-se-fg); }
767
+ .lj-se-addep-row { display: flex; justify-content: center; padding: 18px 24px 28px; }
768
+ .lj-se-addep-btn {
769
+ display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
770
+ border: 1px dashed color-mix(in oklab, var(--lj-se-fg) 22%, transparent); border-radius: 999px;
771
+ background: transparent; color: var(--lj-se-muted-fg); cursor: pointer; font: inherit; font-size: 13px;
772
+ transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
773
+ }
774
+ .lj-se-addep-btn:hover {
775
+ color: var(--lj-se-fg); border-color: color-mix(in oklab, var(--lj-se-fg) 40%, transparent);
776
+ background: color-mix(in oklab, var(--lj-se-fg) 4%, transparent);
777
+ }
778
+
779
+ /* episode control handle (left margin, aligned to the banner) */
780
+ .lj-se-epbanner-wrap { position: relative; }
781
+ .lj-se-ephandle-pop { position: absolute; left: -34px; top: 10px; display: inline-flex; z-index: 6; }
782
+ .lj-se-ephandle { opacity: 0; }
783
+ .lj-se-epbanner-wrap:hover .lj-se-ephandle { opacity: 0.4; }
784
+ .lj-se-ephandle:hover, .lj-se-ephandle.is-open { opacity: 1; }