openclacky 1.2.18 → 1.3.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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +35 -0
- data/lib/clacky/agent/time_machine.rb +256 -74
- data/lib/clacky/agent/tool_executor.rb +12 -0
- data/lib/clacky/agent.rb +15 -20
- data/lib/clacky/agent_config.rb +18 -0
- data/lib/clacky/cli.rb +55 -3
- data/lib/clacky/default_skills/media-gen/SKILL.md +172 -5
- data/lib/clacky/media/base.rb +93 -0
- data/lib/clacky/media/gemini.rb +10 -0
- data/lib/clacky/media/generator.rb +57 -0
- data/lib/clacky/media/openai_compat.rb +160 -0
- data/lib/clacky/message_history.rb +12 -7
- data/lib/clacky/providers.rb +29 -1
- data/lib/clacky/rich_ui_controller.rb +3 -1
- data/lib/clacky/server/backup_manager.rb +200 -0
- data/lib/clacky/server/channel/adapters/feishu/adapter.rb +10 -2
- data/lib/clacky/server/channel/adapters/feishu/bot.rb +68 -15
- data/lib/clacky/server/channel/channel_manager.rb +65 -50
- data/lib/clacky/server/http_server.rb +356 -14
- data/lib/clacky/server/scheduler.rb +19 -0
- data/lib/clacky/server/session_registry.rb +8 -4
- data/lib/clacky/session_manager.rb +40 -2
- data/lib/clacky/tools/trash_manager.rb +14 -0
- data/lib/clacky/ui2/components/command_suggestions.rb +1 -0
- data/lib/clacky/ui2/components/modal_component.rb +34 -7
- data/lib/clacky/ui2/ui_controller.rb +150 -19
- data/lib/clacky/utils/file_processor.rb +75 -4
- data/lib/clacky/version.rb +1 -1
- data/lib/clacky/web/app.css +2283 -1277
- data/lib/clacky/web/app.js +73 -1
- data/lib/clacky/web/backup.js +119 -0
- data/lib/clacky/web/billing.js +224 -11
- data/lib/clacky/web/channels.js +81 -11
- data/lib/clacky/web/design-sample.css +247 -0
- data/lib/clacky/web/design-sample.html +127 -0
- data/lib/clacky/web/favicon.svg +16 -0
- data/lib/clacky/web/i18n.js +167 -31
- data/lib/clacky/web/index.html +176 -55
- data/lib/clacky/web/logo_nav_dark.png +0 -0
- data/lib/clacky/web/onboard.js +121 -28
- data/lib/clacky/web/sessions.js +447 -192
- data/lib/clacky/web/settings.js +21 -1
- data/lib/clacky/web/skills.js +34 -1
- data/lib/clacky/web/tasks.js +129 -61
- data/lib/clacky/web/utils.js +72 -0
- data/lib/clacky/web/ws-dispatcher.js +6 -0
- data/lib/clacky.rb +1 -0
- metadata +9 -8
- data/lib/clacky/server/channel/group_message_buffer.rb +0 -53
data/lib/clacky/web/app.css
CHANGED
|
@@ -16,24 +16,24 @@
|
|
|
16
16
|
borders, NOT by color shifts. This gives a calm, clean look
|
|
17
17
|
and works with any brand color.
|
|
18
18
|
*/
|
|
19
|
-
--color-bg-primary: #
|
|
20
|
-
--color-bg-secondary: #ffffff; /* main content, chat */
|
|
19
|
+
--color-bg-primary: #fbfbfa; /* sidebar, status bar, all shell — warm paper, not pure white */
|
|
20
|
+
--color-bg-secondary: #ffffff; /* main content, chat — floats above shell */
|
|
21
21
|
--color-bg-tertiary: #ffffff; /* cards — rely on border, not fill */
|
|
22
|
-
--color-bg-hover: #
|
|
22
|
+
--color-bg-hover: #f2f2ef; /* hover state (only on interactive rows) */
|
|
23
23
|
--color-bg-input: #ffffff;
|
|
24
24
|
--color-bg-card: #ffffff;
|
|
25
25
|
--color-bg-overlay: rgba(15, 18, 28, 0.42); /* modal scrim */
|
|
26
26
|
|
|
27
27
|
/* Borders — hairlines, no heavy lines */
|
|
28
|
-
--color-border-primary: #
|
|
29
|
-
--color-border-secondary: #
|
|
30
|
-
--color-border-strong: #
|
|
28
|
+
--color-border-primary: #e8e8e4; /* default dividers */
|
|
29
|
+
--color-border-secondary: #f0f0ec; /* softer inner dividers */
|
|
30
|
+
--color-border-strong: #d4d4ce; /* hover / active outline */
|
|
31
31
|
|
|
32
32
|
/* Text — 4-tier hierarchy */
|
|
33
|
-
--color-text-primary: #
|
|
34
|
-
--color-text-secondary: #
|
|
35
|
-
--color-text-tertiary: #
|
|
36
|
-
--color-text-muted: #
|
|
33
|
+
--color-text-primary: #1a1b1e; /* titles, important content */
|
|
34
|
+
--color-text-secondary: #56585e; /* body text */
|
|
35
|
+
--color-text-tertiary: #8a8d94; /* captions, meta */
|
|
36
|
+
--color-text-muted: #a8abb2; /* placeholders, disabled */
|
|
37
37
|
--color-text-inverse: #ffffff; /* text on accent bg */
|
|
38
38
|
|
|
39
39
|
/* Brand accent — overridden at runtime via brand.js from brand.yml.
|
|
@@ -85,6 +85,15 @@
|
|
|
85
85
|
--transition-fast: 120ms ease;
|
|
86
86
|
--transition-base: 160ms ease;
|
|
87
87
|
--transition-slow: 240ms ease;
|
|
88
|
+
|
|
89
|
+
/* Typography — sans for prose, mono for instrument readouts (vitals,
|
|
90
|
+
status bar, eyebrows, version, token/cost numbers). Mono carries the
|
|
91
|
+
"tool / cockpit" personality without needing a brand color. */
|
|
92
|
+
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
|
|
93
|
+
|
|
94
|
+
/* Semantic live/running signal — green, deliberately NOT the brand accent
|
|
95
|
+
so the "machine is running" cue stays stable under white-label theming. */
|
|
96
|
+
--live: #2e9e5b;
|
|
88
97
|
}
|
|
89
98
|
|
|
90
99
|
/* ── Dark theme ──────────────────────────────────────────────────────
|
|
@@ -92,23 +101,24 @@
|
|
|
92
101
|
(any readable color on white is usually readable on #1a1a1d too). */
|
|
93
102
|
[data-theme="dark"] {
|
|
94
103
|
/* Same philosophy: ONE dark canvas, separated by borders */
|
|
95
|
-
--color-bg-primary: #
|
|
96
|
-
--color-bg-secondary: #16181d;
|
|
104
|
+
--color-bg-primary: #101114; /* near-black with a faint blue cast — shell */
|
|
105
|
+
--color-bg-secondary: #16181d; /* chat / main — floats above shell */
|
|
97
106
|
--color-bg-tertiary: #16181d;
|
|
98
|
-
--color-bg-hover: #
|
|
107
|
+
--color-bg-hover: #1d2026;
|
|
99
108
|
--color-bg-input: #16181d;
|
|
100
109
|
--color-bg-card: #16181d;
|
|
101
110
|
--color-bg-overlay: rgba(0, 0, 0, 0.56);
|
|
102
111
|
|
|
103
|
-
--color-border-primary: #
|
|
104
|
-
--color-border-secondary: #
|
|
112
|
+
--color-border-primary: #262a31;
|
|
113
|
+
--color-border-secondary: #1e2229;
|
|
105
114
|
--color-border-strong: #3a3f4a;
|
|
106
115
|
|
|
107
|
-
--color-text-primary: #
|
|
108
|
-
--color-text-secondary: #
|
|
109
|
-
--color-text-tertiary: #
|
|
110
|
-
--color-text-muted: #
|
|
116
|
+
--color-text-primary: #e8eaee;
|
|
117
|
+
--color-text-secondary: #a4a9b4;
|
|
118
|
+
--color-text-tertiary: #6b707b;
|
|
119
|
+
--color-text-muted: #565b66;
|
|
111
120
|
--color-text-inverse: #ffffff;
|
|
121
|
+
--live: #3ed47e;
|
|
112
122
|
|
|
113
123
|
/* Brand accent is inherited. Keep the hover slightly darker than primary
|
|
114
124
|
to preserve the interactive relationship regardless of hue. */
|
|
@@ -155,8 +165,99 @@ html { font-size: 16px; }
|
|
|
155
165
|
|
|
156
166
|
/* ── Reset & Base ────────────────────────────────────────────────────────── */
|
|
157
167
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
168
|
+
|
|
169
|
+
/* ── Global Tooltip ──────────────────────────────────────────────────────
|
|
170
|
+
JS-driven: Tooltip.init() in utils.js mounts a single <div id="tooltip">
|
|
171
|
+
on body and positions it via getBoundingClientRect, so it is never clipped
|
|
172
|
+
by any ancestor's overflow or z-index.
|
|
173
|
+
Usage: add data-tooltip="text" (+ optionally data-tooltip-pos="top|bottom|left|right")
|
|
174
|
+
to any element. Default direction is top.
|
|
175
|
+
────────────────────────────────────────────────────────────────────────── */
|
|
176
|
+
#tooltip {
|
|
177
|
+
position: fixed;
|
|
178
|
+
z-index: 99999;
|
|
179
|
+
pointer-events: none;
|
|
180
|
+
padding: 0.3125rem 0.5625rem;
|
|
181
|
+
background: var(--color-bg-inverse, #1a1a1a);
|
|
182
|
+
color: var(--color-text-inverse, #f5f5f5);
|
|
183
|
+
font-size: 0.75rem;
|
|
184
|
+
line-height: 1.5;
|
|
185
|
+
border-radius: 6px;
|
|
186
|
+
white-space: pre-wrap;
|
|
187
|
+
max-width: 18rem;
|
|
188
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
|
189
|
+
opacity: 0;
|
|
190
|
+
transition: opacity 0.12s ease;
|
|
191
|
+
}
|
|
192
|
+
#tooltip.visible { opacity: 1; }
|
|
193
|
+
#tooltip::after {
|
|
194
|
+
content: "";
|
|
195
|
+
position: absolute;
|
|
196
|
+
border: 5px solid transparent;
|
|
197
|
+
}
|
|
198
|
+
#tooltip[data-pos="top"]::after {
|
|
199
|
+
top: 100%; left: 50%; transform: translateX(-50%);
|
|
200
|
+
border-top-color: var(--color-bg-inverse, #1a1a1a);
|
|
201
|
+
}
|
|
202
|
+
#tooltip[data-pos="bottom"]::after {
|
|
203
|
+
bottom: 100%; left: 50%; transform: translateX(-50%);
|
|
204
|
+
border-bottom-color: var(--color-bg-inverse, #1a1a1a);
|
|
205
|
+
}
|
|
206
|
+
#tooltip[data-pos="left"]::after {
|
|
207
|
+
left: 100%; top: 50%; transform: translateY(-50%);
|
|
208
|
+
border-left-color: var(--color-bg-inverse, #1a1a1a);
|
|
209
|
+
}
|
|
210
|
+
#tooltip[data-pos="right"]::after {
|
|
211
|
+
right: 100%; top: 50%; transform: translateY(-50%);
|
|
212
|
+
border-right-color: var(--color-bg-inverse, #1a1a1a);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* ── Skeleton screen — reusable shimmer utility ──────────────────────────
|
|
216
|
+
Usage: add class="skel" plus a size variant class to any placeholder el.
|
|
217
|
+
Size variants are defined per-component below this block.
|
|
218
|
+
────────────────────────────────────────────────────────────────────────── */
|
|
219
|
+
@keyframes skel-shimmer {
|
|
220
|
+
0% { background-position: 200% 0; }
|
|
221
|
+
100% { background-position: -200% 0; }
|
|
222
|
+
}
|
|
223
|
+
.skel {
|
|
224
|
+
border-radius: 6px;
|
|
225
|
+
background: linear-gradient(90deg,
|
|
226
|
+
#e8e8e8 25%,
|
|
227
|
+
#d0d0d0 50%,
|
|
228
|
+
#e8e8e8 75%
|
|
229
|
+
);
|
|
230
|
+
background-size: 200% 100%;
|
|
231
|
+
animation: skel-shimmer 1.8s infinite linear;
|
|
232
|
+
}
|
|
233
|
+
[data-theme="dark"] .skel {
|
|
234
|
+
background: linear-gradient(90deg,
|
|
235
|
+
#2a2d34 25%,
|
|
236
|
+
#3a3e47 50%,
|
|
237
|
+
#2a2d34 75%
|
|
238
|
+
);
|
|
239
|
+
background-size: 200% 100%;
|
|
240
|
+
animation: skel-shimmer 1.8s infinite linear;
|
|
241
|
+
}
|
|
242
|
+
/* Generic size helpers */
|
|
243
|
+
.skel-icon { width: 2rem; height: 2rem; border-radius: 50%; flex-shrink: 0; }
|
|
244
|
+
.skel-title { height: 1.25rem; width: 6rem; }
|
|
245
|
+
.skel-subtitle { height: 0.875rem; width: 10rem; margin-top: 0.375rem; }
|
|
246
|
+
.skel-text-sm { height: 0.75rem; width: 8rem; }
|
|
247
|
+
.skel-tabs { height: 2rem; width: 16rem; border-radius: 8px; }
|
|
248
|
+
.skel-select { height: 2rem; width: 8rem; }
|
|
249
|
+
.skel-value { height: 1.5rem; width: 5rem; }
|
|
250
|
+
.skel-label { height: 0.75rem; width: 4rem; margin-top: 0.375rem; }
|
|
251
|
+
.skel-block { height: 9rem; width: 100%; }
|
|
252
|
+
.skel-block-sm { height: 5rem; width: 100%; }
|
|
253
|
+
.skel-heatmap { height: 5rem; width: 178px; }
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
|
|
257
|
+
|
|
258
|
+
|
|
158
259
|
body {
|
|
159
|
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
260
|
+
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
160
261
|
background: var(--color-bg-primary);
|
|
161
262
|
color: var(--color-text-primary);
|
|
162
263
|
height: 100vh;
|
|
@@ -195,7 +296,7 @@ body {
|
|
|
195
296
|
#top-header {
|
|
196
297
|
height: 3rem;
|
|
197
298
|
min-height: 3rem;
|
|
198
|
-
background: var(--color-bg-
|
|
299
|
+
background: var(--color-bg-primary);
|
|
199
300
|
border-bottom: 1px solid var(--color-border-primary);
|
|
200
301
|
display: flex;
|
|
201
302
|
align-items: center;
|
|
@@ -212,17 +313,22 @@ body {
|
|
|
212
313
|
gap: 0.625rem;
|
|
213
314
|
}
|
|
214
315
|
.sidebar-toggle-btn {
|
|
215
|
-
width:
|
|
216
|
-
height:
|
|
316
|
+
width: 2.25rem;
|
|
317
|
+
height: 2.25rem;
|
|
217
318
|
border: none;
|
|
218
|
-
border-radius:
|
|
319
|
+
border-radius: 6px;
|
|
219
320
|
background: transparent;
|
|
220
|
-
color: var(--color-text-
|
|
321
|
+
color: var(--color-text-secondary);
|
|
221
322
|
display: flex;
|
|
222
323
|
align-items: center;
|
|
223
324
|
justify-content: center;
|
|
224
325
|
cursor: pointer;
|
|
225
|
-
transition:
|
|
326
|
+
transition: all var(--transition-fast);
|
|
327
|
+
}
|
|
328
|
+
.sidebar-toggle-btn svg {
|
|
329
|
+
width: 1.25rem;
|
|
330
|
+
height: 1.25rem;
|
|
331
|
+
stroke-width: 1.8;
|
|
226
332
|
}
|
|
227
333
|
.sidebar-toggle-btn:hover {
|
|
228
334
|
background: var(--color-bg-hover);
|
|
@@ -235,33 +341,49 @@ body {
|
|
|
235
341
|
#header-brand {
|
|
236
342
|
display: flex;
|
|
237
343
|
align-items: center;
|
|
238
|
-
gap: 0.
|
|
344
|
+
gap: 0.625rem;
|
|
239
345
|
min-width: 0;
|
|
240
346
|
}
|
|
241
347
|
.header-logo {
|
|
242
|
-
font-
|
|
243
|
-
font-
|
|
348
|
+
font-family: "Geist Sans", "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
349
|
+
font-weight: 750;
|
|
350
|
+
font-size: 0.9375rem;
|
|
244
351
|
color: var(--color-text-primary);
|
|
245
|
-
letter-spacing: -0.
|
|
352
|
+
letter-spacing: -0.02em;
|
|
246
353
|
white-space: nowrap;
|
|
247
354
|
overflow: hidden;
|
|
248
355
|
text-overflow: ellipsis;
|
|
249
356
|
max-width: 11.25rem;
|
|
357
|
+
-webkit-font-smoothing: antialiased;
|
|
250
358
|
}
|
|
251
|
-
/* When a logo image is present,
|
|
359
|
+
/* When a logo image is present, keep the brand name strong and high-end */
|
|
252
360
|
#header-brand.has-logo .header-logo {
|
|
253
|
-
font-
|
|
254
|
-
font-
|
|
255
|
-
|
|
256
|
-
|
|
361
|
+
font-family: "Geist Sans", "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
362
|
+
font-size: 0.9375rem;
|
|
363
|
+
font-weight: 750;
|
|
364
|
+
color: var(--color-text-primary);
|
|
365
|
+
letter-spacing: -0.02em;
|
|
366
|
+
-webkit-font-smoothing: antialiased;
|
|
367
|
+
}
|
|
368
|
+
@keyframes logo-shake {
|
|
369
|
+
0% { transform: translateY(0); }
|
|
370
|
+
20% { transform: translateY(-6px); }
|
|
371
|
+
40% { transform: translateY(0); }
|
|
372
|
+
60% { transform: translateY(-3px); }
|
|
373
|
+
80% { transform: translateY(0); }
|
|
374
|
+
100% { transform: translateY(0); }
|
|
257
375
|
}
|
|
376
|
+
|
|
258
377
|
.header-logo-img {
|
|
259
|
-
height:
|
|
378
|
+
height: 2rem;
|
|
260
379
|
object-fit: contain;
|
|
261
380
|
display: block;
|
|
262
381
|
flex-shrink: 0;
|
|
263
382
|
border-radius: var(--radius-xs);
|
|
264
383
|
}
|
|
384
|
+
.header-logo-img:hover {
|
|
385
|
+
animation: none;
|
|
386
|
+
}
|
|
265
387
|
/* Subtle divider between logo image and brand name text */
|
|
266
388
|
#header-brand.has-logo .header-logo-divider {
|
|
267
389
|
display: block;
|
|
@@ -282,19 +404,20 @@ body {
|
|
|
282
404
|
display: inline-flex;
|
|
283
405
|
align-items: center;
|
|
284
406
|
height: 1.125rem;
|
|
285
|
-
padding: 0 0.
|
|
286
|
-
margin-left:
|
|
407
|
+
padding: 0 0.5rem;
|
|
408
|
+
margin-left: 6px;
|
|
287
409
|
border: none;
|
|
288
|
-
border-radius:
|
|
289
|
-
background: var(--color-
|
|
290
|
-
color:
|
|
291
|
-
font-
|
|
410
|
+
border-radius: 6px;
|
|
411
|
+
background: var(--color-bg-hover);
|
|
412
|
+
color: var(--color-accent-primary);
|
|
413
|
+
font-family: var(--font-mono, monospace);
|
|
414
|
+
font-size: 0.5625rem;
|
|
292
415
|
font-weight: 700;
|
|
293
|
-
letter-spacing: 0.
|
|
416
|
+
letter-spacing: 0.06em;
|
|
294
417
|
line-height: 1;
|
|
295
418
|
cursor: pointer;
|
|
296
419
|
flex-shrink: 0;
|
|
297
|
-
transition:
|
|
420
|
+
transition: all 0.15s ease;
|
|
298
421
|
}
|
|
299
422
|
.header-owner-badge:hover {
|
|
300
423
|
opacity: 0.88;
|
|
@@ -305,6 +428,56 @@ body {
|
|
|
305
428
|
align-items: center;
|
|
306
429
|
gap: 0.375rem;
|
|
307
430
|
}
|
|
431
|
+
#header-center {
|
|
432
|
+
flex: 1;
|
|
433
|
+
display: flex;
|
|
434
|
+
justify-content: center;
|
|
435
|
+
min-width: 0;
|
|
436
|
+
padding: 0 1rem;
|
|
437
|
+
}
|
|
438
|
+
#header-cmdbar {
|
|
439
|
+
display: flex;
|
|
440
|
+
align-items: center;
|
|
441
|
+
gap: 0.5rem;
|
|
442
|
+
width: 100%;
|
|
443
|
+
max-width: 26rem;
|
|
444
|
+
height: 1.875rem;
|
|
445
|
+
padding: 0 0.625rem;
|
|
446
|
+
border: 1px solid var(--color-border-primary);
|
|
447
|
+
border-radius: var(--radius-md);
|
|
448
|
+
background: var(--color-bg-secondary);
|
|
449
|
+
color: var(--color-text-tertiary);
|
|
450
|
+
cursor: pointer;
|
|
451
|
+
transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
|
|
452
|
+
}
|
|
453
|
+
#header-cmdbar:hover {
|
|
454
|
+
border-color: var(--color-accent-primary);
|
|
455
|
+
background: var(--color-bg-hover);
|
|
456
|
+
color: var(--color-text-secondary);
|
|
457
|
+
}
|
|
458
|
+
#header-cmdbar svg {
|
|
459
|
+
flex-shrink: 0;
|
|
460
|
+
opacity: 0.7;
|
|
461
|
+
}
|
|
462
|
+
#header-cmdbar .cmdbar-ph {
|
|
463
|
+
flex: 1;
|
|
464
|
+
text-align: left;
|
|
465
|
+
font-size: 0.8125rem;
|
|
466
|
+
white-space: nowrap;
|
|
467
|
+
overflow: hidden;
|
|
468
|
+
text-overflow: ellipsis;
|
|
469
|
+
}
|
|
470
|
+
#header-cmdbar .cmdbar-kbd {
|
|
471
|
+
flex-shrink: 0;
|
|
472
|
+
font-family: var(--font-mono);
|
|
473
|
+
font-size: 0.6875rem;
|
|
474
|
+
letter-spacing: 0.02em;
|
|
475
|
+
color: var(--color-text-muted);
|
|
476
|
+
padding: 0.0625rem 0.3125rem;
|
|
477
|
+
border: 1px solid var(--color-border-secondary);
|
|
478
|
+
border-radius: var(--radius-sm);
|
|
479
|
+
background: var(--color-bg-secondary);
|
|
480
|
+
}
|
|
308
481
|
.theme-toggle-btn {
|
|
309
482
|
width: 1.875rem;
|
|
310
483
|
height: 1.875rem;
|
|
@@ -325,13 +498,6 @@ body {
|
|
|
325
498
|
.theme-toggle-btn:active {
|
|
326
499
|
background: var(--color-bg-hover);
|
|
327
500
|
}
|
|
328
|
-
/* Sound-notification toggle shares .theme-toggle-btn; highlight when ON. */
|
|
329
|
-
#notify-toggle-header.notify-on {
|
|
330
|
-
color: var(--color-accent-primary, var(--color-text-primary));
|
|
331
|
-
}
|
|
332
|
-
#notify-toggle-header.notify-on:hover {
|
|
333
|
-
color: var(--color-accent-primary, var(--color-text-primary));
|
|
334
|
-
}
|
|
335
501
|
|
|
336
502
|
/* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
|
|
337
503
|
#app > aside,
|
|
@@ -360,8 +526,9 @@ body {
|
|
|
360
526
|
/* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
|
|
361
527
|
BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
|
|
362
528
|
#sidebar {
|
|
363
|
-
width: 15rem;
|
|
364
|
-
|
|
529
|
+
--sidebar-width: 15rem;
|
|
530
|
+
width: var(--sidebar-width);
|
|
531
|
+
min-width: var(--sidebar-width);
|
|
365
532
|
background: var(--color-bg-primary);
|
|
366
533
|
border-right: 1px solid var(--color-border-primary);
|
|
367
534
|
display: flex;
|
|
@@ -370,9 +537,22 @@ body {
|
|
|
370
537
|
height: 100%;
|
|
371
538
|
flex-shrink: 0;
|
|
372
539
|
margin-left: 0;
|
|
540
|
+
position: relative;
|
|
373
541
|
}
|
|
374
542
|
#sidebar.hidden {
|
|
375
|
-
margin-left: -
|
|
543
|
+
margin-left: calc(-1 * var(--sidebar-width));
|
|
544
|
+
}
|
|
545
|
+
#sidebar-resize-handle {
|
|
546
|
+
position: absolute;
|
|
547
|
+
top: 0;
|
|
548
|
+
right: -3px;
|
|
549
|
+
bottom: 0;
|
|
550
|
+
width: 6px;
|
|
551
|
+
cursor: col-resize;
|
|
552
|
+
z-index: 10;
|
|
553
|
+
}
|
|
554
|
+
#sidebar:has(#sidebar-resize-handle.active) {
|
|
555
|
+
transition: background-color var(--transition-base);
|
|
376
556
|
}
|
|
377
557
|
#sidebar-header {
|
|
378
558
|
display: flex;
|
|
@@ -407,34 +587,62 @@ body {
|
|
|
407
587
|
display: flex;
|
|
408
588
|
flex-direction: column;
|
|
409
589
|
min-height: 0;
|
|
410
|
-
padding
|
|
590
|
+
padding: 0 6px 8px;
|
|
591
|
+
margin-right: -1px;
|
|
592
|
+
scrollbar-width: thin;
|
|
593
|
+
scrollbar-color: transparent transparent;
|
|
594
|
+
}
|
|
595
|
+
#sidebar-list.is-scrolling {
|
|
596
|
+
scrollbar-color: var(--color-border-secondary) transparent;
|
|
597
|
+
}
|
|
598
|
+
#sidebar-list::-webkit-scrollbar { width: 4px; }
|
|
599
|
+
#sidebar-list::-webkit-scrollbar-track { background: transparent; }
|
|
600
|
+
#sidebar-list::-webkit-scrollbar-thumb {
|
|
601
|
+
background: transparent;
|
|
602
|
+
border-radius: 4px;
|
|
603
|
+
transition: background 0.4s;
|
|
411
604
|
}
|
|
412
|
-
#
|
|
605
|
+
#sidebar-list.is-scrolling::-webkit-scrollbar-thumb {
|
|
606
|
+
background: var(--color-border-secondary);
|
|
607
|
+
}
|
|
608
|
+
#session-list { padding: 4px 0 0; min-height: 6.75rem; }
|
|
413
609
|
|
|
414
610
|
/* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
|
|
415
611
|
.sidebar-divider {
|
|
416
612
|
display: flex;
|
|
417
613
|
align-items: center;
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
font-size: 0.
|
|
422
|
-
font-weight:
|
|
614
|
+
gap: 8px;
|
|
615
|
+
padding: 14px 8px 7px;
|
|
616
|
+
font-family: var(--font-mono);
|
|
617
|
+
font-size: 0.65625rem;
|
|
618
|
+
font-weight: 500;
|
|
423
619
|
color: var(--color-text-tertiary);
|
|
424
620
|
text-transform: uppercase;
|
|
425
|
-
letter-spacing:
|
|
426
|
-
margin-top: 0.25rem;
|
|
621
|
+
letter-spacing: .14em;
|
|
427
622
|
position: sticky;
|
|
428
623
|
top: 0;
|
|
429
|
-
background: var(--color-bg-
|
|
624
|
+
background: var(--color-bg-primary);
|
|
430
625
|
z-index: 10;
|
|
431
626
|
}
|
|
432
|
-
.sidebar-divider:first-child {
|
|
433
|
-
margin-top: 0;
|
|
434
|
-
}
|
|
435
627
|
.sidebar-divider span {
|
|
436
|
-
flex: 1;
|
|
437
628
|
white-space: nowrap;
|
|
629
|
+
flex: 0 0 auto;
|
|
630
|
+
}
|
|
631
|
+
/* Pure label dividers (Config / My Data / Creator) get a trailing rule line */
|
|
632
|
+
.sidebar-divider:not(:has(.sidebar-divider-actions))::after {
|
|
633
|
+
content: "";
|
|
634
|
+
flex: 1;
|
|
635
|
+
height: 1px;
|
|
636
|
+
background: var(--color-border-secondary);
|
|
637
|
+
}
|
|
638
|
+
/* The Sessions divider keeps its action buttons pushed to the far right */
|
|
639
|
+
.sidebar-divider:has(.sidebar-divider-actions) {
|
|
640
|
+
justify-content: space-between;
|
|
641
|
+
}
|
|
642
|
+
.sidebar-divider-actions {
|
|
643
|
+
display: flex;
|
|
644
|
+
align-items: center;
|
|
645
|
+
gap: 4px;
|
|
438
646
|
}
|
|
439
647
|
|
|
440
648
|
/* ── Split button [+ ▾] ─────────────────────────────────────────────────── */
|
|
@@ -518,6 +726,7 @@ body {
|
|
|
518
726
|
Critical: all colors are neutrals — no hue bleeds onto the brand accent. */
|
|
519
727
|
.session-badge {
|
|
520
728
|
display: inline-block;
|
|
729
|
+
font-family: var(--font-mono);
|
|
521
730
|
font-size: 0.5625rem;
|
|
522
731
|
font-weight: 600;
|
|
523
732
|
line-height: 1;
|
|
@@ -525,7 +734,8 @@ body {
|
|
|
525
734
|
border-radius: var(--radius-xs);
|
|
526
735
|
margin-left: 0.3125rem;
|
|
527
736
|
vertical-align: middle;
|
|
528
|
-
letter-spacing: 0.
|
|
737
|
+
letter-spacing: 0.04em;
|
|
738
|
+
text-transform: uppercase;
|
|
529
739
|
background: var(--color-bg-tertiary);
|
|
530
740
|
color: var(--color-text-tertiary);
|
|
531
741
|
border: 1px solid var(--color-border-secondary);
|
|
@@ -549,12 +759,15 @@ body {
|
|
|
549
759
|
color: var(--color-text-muted);
|
|
550
760
|
opacity: 0.8;
|
|
551
761
|
}
|
|
552
|
-
/* Agent profile: coding —
|
|
553
|
-
|
|
762
|
+
/* Agent profile: coding — the most common badge, so it's the quietest:
|
|
763
|
+
a hollow neutral mono marker that reads as a system tag, not a label. */
|
|
554
764
|
.session-badge--coding {
|
|
555
|
-
background:
|
|
556
|
-
color:
|
|
557
|
-
border-color:
|
|
765
|
+
background: transparent;
|
|
766
|
+
color: var(--color-text-muted);
|
|
767
|
+
border-color: var(--color-border-strong);
|
|
768
|
+
}
|
|
769
|
+
.session-item.active .session-badge--coding {
|
|
770
|
+
color: var(--color-text-tertiary);
|
|
558
771
|
}
|
|
559
772
|
|
|
560
773
|
|
|
@@ -590,18 +803,86 @@ body {
|
|
|
590
803
|
color: var(--color-accent-primary);
|
|
591
804
|
}
|
|
592
805
|
|
|
593
|
-
/* ──
|
|
594
|
-
.
|
|
595
|
-
|
|
596
|
-
|
|
806
|
+
/* ── Command-palette search overlay (⌘K) ─────────────────────────────────── */
|
|
807
|
+
.cmd-palette-overlay {
|
|
808
|
+
position: fixed;
|
|
809
|
+
inset: 0;
|
|
810
|
+
z-index: 1000;
|
|
811
|
+
display: flex;
|
|
812
|
+
align-items: flex-start;
|
|
813
|
+
justify-content: center;
|
|
814
|
+
padding-top: 4.75rem;
|
|
815
|
+
background: rgba(0, 0, 0, 0.35);
|
|
597
816
|
opacity: 0;
|
|
598
|
-
transition:
|
|
599
|
-
padding: 0 0.625rem;
|
|
817
|
+
transition: opacity 0.16s ease;
|
|
600
818
|
}
|
|
601
|
-
.
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
819
|
+
[data-theme="dark"] .cmd-palette-overlay {
|
|
820
|
+
background: rgba(0, 0, 0, 0.55);
|
|
821
|
+
}
|
|
822
|
+
.cmd-palette-overlay[hidden] { display: none; }
|
|
823
|
+
.cmd-palette-overlay.cmd-palette--open { opacity: 1; }
|
|
824
|
+
|
|
825
|
+
.cmd-palette {
|
|
826
|
+
width: 100%;
|
|
827
|
+
max-width: 34rem;
|
|
828
|
+
margin: 0 1rem;
|
|
829
|
+
background: var(--color-bg-card, var(--color-bg-secondary));
|
|
830
|
+
border: 1px solid var(--color-border-primary);
|
|
831
|
+
border-radius: 12px;
|
|
832
|
+
box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.25));
|
|
833
|
+
overflow: hidden;
|
|
834
|
+
transform: translateY(-8px) scale(0.99);
|
|
835
|
+
transition: transform 0.16s ease;
|
|
836
|
+
}
|
|
837
|
+
.cmd-palette--open .cmd-palette {
|
|
838
|
+
transform: translateY(0) scale(1);
|
|
839
|
+
}
|
|
840
|
+
.cmd-palette .search-panel-card {
|
|
841
|
+
border: none;
|
|
842
|
+
border-radius: 0;
|
|
843
|
+
border-bottom: 1px solid var(--color-border-secondary);
|
|
844
|
+
background: transparent;
|
|
845
|
+
}
|
|
846
|
+
.cmd-palette .search-input-row { height: 3rem; }
|
|
847
|
+
.cmd-palette .search-input { font-size: 0.9375rem; }
|
|
848
|
+
|
|
849
|
+
/* ESC chip in the input row */
|
|
850
|
+
.cmd-palette-esc {
|
|
851
|
+
flex-shrink: 0;
|
|
852
|
+
font-family: var(--font-mono);
|
|
853
|
+
font-size: 0.625rem;
|
|
854
|
+
letter-spacing: 0.04em;
|
|
855
|
+
color: var(--color-text-muted);
|
|
856
|
+
padding: 0.125rem 0.375rem;
|
|
857
|
+
border: 1px solid var(--color-border-secondary);
|
|
858
|
+
border-radius: var(--radius-sm);
|
|
859
|
+
background: var(--color-bg-secondary);
|
|
860
|
+
cursor: pointer;
|
|
861
|
+
transition: color 0.12s, border-color 0.12s;
|
|
862
|
+
}
|
|
863
|
+
.cmd-palette-esc:hover {
|
|
864
|
+
color: var(--color-text-secondary);
|
|
865
|
+
border-color: var(--color-border-primary);
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
/* Results region */
|
|
869
|
+
.cmd-palette-results {
|
|
870
|
+
max-height: min(26rem, 60vh);
|
|
871
|
+
overflow-y: auto;
|
|
872
|
+
padding: 0.375rem 0.5rem 0.5rem;
|
|
873
|
+
}
|
|
874
|
+
.cmd-palette-results .session-item { border-radius: 7px; }
|
|
875
|
+
.cmd-palette-hint {
|
|
876
|
+
padding: 1.75rem 1rem;
|
|
877
|
+
text-align: center;
|
|
878
|
+
font-size: 0.8125rem;
|
|
879
|
+
color: var(--color-text-muted);
|
|
880
|
+
}
|
|
881
|
+
|
|
882
|
+
#header-cmdbar.active {
|
|
883
|
+
border-color: var(--color-accent-primary);
|
|
884
|
+
background: var(--color-bg-hover);
|
|
885
|
+
color: var(--color-text-secondary);
|
|
605
886
|
}
|
|
606
887
|
|
|
607
888
|
/* Card container — one unified bordered box */
|
|
@@ -920,11 +1201,10 @@ body {
|
|
|
920
1201
|
display: flex;
|
|
921
1202
|
align-items: center;
|
|
922
1203
|
gap: 0.4375rem;
|
|
923
|
-
padding: 0.375rem 0.
|
|
1204
|
+
padding: 0.375rem 0.5rem 0.3125rem 0.625rem;
|
|
924
1205
|
border-radius: var(--radius-sm);
|
|
925
1206
|
cursor: pointer;
|
|
926
1207
|
margin-bottom: 1px;
|
|
927
|
-
border: 1px solid transparent;
|
|
928
1208
|
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
|
|
929
1209
|
}
|
|
930
1210
|
/* Two-row text block next to dot */
|
|
@@ -940,8 +1220,9 @@ body {
|
|
|
940
1220
|
display: flex;
|
|
941
1221
|
align-items: center;
|
|
942
1222
|
gap: 0.25rem;
|
|
943
|
-
color: var(--color-text-
|
|
944
|
-
font-
|
|
1223
|
+
color: var(--color-text-primary);
|
|
1224
|
+
font-size: 0.8125rem;
|
|
1225
|
+
font-weight: 400;
|
|
945
1226
|
transition: color var(--transition-fast), font-weight var(--transition-fast);
|
|
946
1227
|
}
|
|
947
1228
|
.session-item .session-name .session-name__text {
|
|
@@ -963,10 +1244,6 @@ body {
|
|
|
963
1244
|
.session-item.active {
|
|
964
1245
|
background: var(--color-accent-soft);
|
|
965
1246
|
}
|
|
966
|
-
.session-item.active .session-name {
|
|
967
|
-
color: var(--color-text-primary);
|
|
968
|
-
font-weight: 600;
|
|
969
|
-
}
|
|
970
1247
|
/* Left indicator bar (0.1875rem) — brand color, the ONE place it shows up big */
|
|
971
1248
|
.session-item.active::before {
|
|
972
1249
|
content: '';
|
|
@@ -1013,8 +1290,8 @@ body {
|
|
|
1013
1290
|
color: var(--color-text-tertiary);
|
|
1014
1291
|
}
|
|
1015
1292
|
.session-item.active .session-pin-icon {
|
|
1016
|
-
opacity:
|
|
1017
|
-
color: var(--color-
|
|
1293
|
+
opacity: 0.6;
|
|
1294
|
+
color: var(--color-text-tertiary);
|
|
1018
1295
|
}
|
|
1019
1296
|
|
|
1020
1297
|
/* Actions menu dropdown */
|
|
@@ -1151,12 +1428,27 @@ body {
|
|
|
1151
1428
|
/* Meta: second row — tasks + cost */
|
|
1152
1429
|
.session-meta {
|
|
1153
1430
|
display: block;
|
|
1431
|
+
font-family: var(--font-mono);
|
|
1154
1432
|
font-size: 0.625rem;
|
|
1433
|
+
letter-spacing: 0.01em;
|
|
1155
1434
|
color: var(--color-text-muted);
|
|
1156
1435
|
white-space: nowrap;
|
|
1157
1436
|
opacity: 0.7;
|
|
1158
|
-
margin-top:
|
|
1437
|
+
margin-top: 2px;
|
|
1438
|
+
}
|
|
1439
|
+
.session-meta-sep {
|
|
1440
|
+
display: inline-block;
|
|
1441
|
+
width: 0.125rem;
|
|
1442
|
+
height: 0.125rem;
|
|
1443
|
+
border-radius: 50%;
|
|
1444
|
+
background: currentColor;
|
|
1445
|
+
opacity: 0.6;
|
|
1446
|
+
margin: 0 0.3rem;
|
|
1447
|
+
vertical-align: middle;
|
|
1448
|
+
position: relative;
|
|
1449
|
+
top: -0.0625rem;
|
|
1159
1450
|
}
|
|
1451
|
+
|
|
1160
1452
|
.session-dot {
|
|
1161
1453
|
flex-shrink: 0;
|
|
1162
1454
|
display: inline-block;
|
|
@@ -1166,11 +1458,11 @@ body {
|
|
|
1166
1458
|
margin-right: 0.25rem;
|
|
1167
1459
|
vertical-align: middle;
|
|
1168
1460
|
position: relative;
|
|
1169
|
-
top: -
|
|
1461
|
+
top: -0.0625rem;
|
|
1170
1462
|
}
|
|
1171
1463
|
/* Idle state no longer renders a dot at all — rule kept for safety / future use */
|
|
1172
1464
|
.dot-idle { background: var(--color-text-secondary); opacity: 0.4; }
|
|
1173
|
-
.dot-running { background: var(--
|
|
1465
|
+
.dot-running { background: var(--live); opacity: 1; animation: pulse 1.6s ease-in-out infinite; }
|
|
1174
1466
|
.dot-error { background: var(--color-error); opacity: 1; }
|
|
1175
1467
|
|
|
1176
1468
|
@keyframes pulse {
|
|
@@ -1178,6 +1470,10 @@ body {
|
|
|
1178
1470
|
50% { opacity: .4; }
|
|
1179
1471
|
}
|
|
1180
1472
|
|
|
1473
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1474
|
+
.dot-running { animation: none; }
|
|
1475
|
+
}
|
|
1476
|
+
|
|
1181
1477
|
/* ── Task items in sidebar ───────────────────────────────────────────────── */
|
|
1182
1478
|
#task-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
|
|
1183
1479
|
|
|
@@ -1191,66 +1487,68 @@ body {
|
|
|
1191
1487
|
|
|
1192
1488
|
.task-item {
|
|
1193
1489
|
position: relative;
|
|
1194
|
-
border-radius:
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
.task-item .task-name,
|
|
1201
|
-
.task-item .task-icon {
|
|
1202
|
-
color: var(--color-text-secondary);
|
|
1203
|
-
transition: color .2s ease, font-weight .2s ease;
|
|
1490
|
+
border-radius: 8px;
|
|
1491
|
+
padding: 8px 10px;
|
|
1492
|
+
margin: 0 0 2px 0;
|
|
1493
|
+
cursor: pointer;
|
|
1494
|
+
color: var(--color-text-primary);
|
|
1495
|
+
transition: background .12s, color .12s;
|
|
1204
1496
|
}
|
|
1205
|
-
/* Hover: subtle background */
|
|
1206
1497
|
.task-item:hover {
|
|
1207
1498
|
background: var(--color-bg-hover);
|
|
1208
1499
|
}
|
|
1209
|
-
|
|
1500
|
+
.task-item:hover .task-name {
|
|
1501
|
+
color: var(--color-text-primary);
|
|
1502
|
+
opacity: 1;
|
|
1503
|
+
}
|
|
1210
1504
|
.task-item.active {
|
|
1211
1505
|
background: var(--color-accent-soft);
|
|
1212
1506
|
}
|
|
1213
|
-
.task-item.active .task-name,
|
|
1214
|
-
.task-item.active .task-icon {
|
|
1215
|
-
color: var(--color-accent-primary);
|
|
1216
|
-
font-weight: 700;
|
|
1217
|
-
}
|
|
1218
|
-
/* Left indicator bar (0.1875rem) for active state */
|
|
1219
1507
|
.task-item.active::before {
|
|
1220
|
-
content:
|
|
1508
|
+
content: "";
|
|
1221
1509
|
position: absolute;
|
|
1222
|
-
left:
|
|
1510
|
+
left: -10px;
|
|
1223
1511
|
top: 50%;
|
|
1224
1512
|
transform: translateY(-50%);
|
|
1225
|
-
width:
|
|
1226
|
-
height:
|
|
1513
|
+
width: 3px;
|
|
1514
|
+
height: 17px;
|
|
1515
|
+
border-radius: 0 3px 3px 0;
|
|
1227
1516
|
background: var(--color-accent-primary);
|
|
1228
|
-
border-radius: 0 2px 2px 0;
|
|
1229
1517
|
}
|
|
1230
1518
|
|
|
1231
1519
|
.task-row {
|
|
1232
1520
|
display: flex;
|
|
1233
1521
|
align-items: center;
|
|
1234
|
-
gap:
|
|
1235
|
-
padding: 0.625rem 0.75rem 0.625rem 0.75rem;
|
|
1236
|
-
cursor: pointer;
|
|
1237
|
-
border-radius: 6px;
|
|
1238
|
-
transition: background 0.2s ease;
|
|
1522
|
+
gap: 9px;
|
|
1239
1523
|
}
|
|
1240
1524
|
.task-icon {
|
|
1241
|
-
width:
|
|
1242
|
-
height:
|
|
1525
|
+
width: 16px;
|
|
1526
|
+
height: 16px;
|
|
1243
1527
|
flex-shrink: 0;
|
|
1244
|
-
|
|
1528
|
+
color: var(--color-text-primary);
|
|
1529
|
+
transition: color .12s, opacity .12s;
|
|
1530
|
+
}
|
|
1531
|
+
.task-item:hover .task-icon {
|
|
1532
|
+
color: var(--color-text-primary);
|
|
1533
|
+
opacity: 1;
|
|
1534
|
+
}
|
|
1535
|
+
.task-item.active .task-icon {
|
|
1536
|
+
color: var(--color-text-primary);
|
|
1537
|
+
opacity: 1;
|
|
1245
1538
|
}
|
|
1246
1539
|
.task-info { flex: 1; min-width: 0; }
|
|
1247
1540
|
.task-name {
|
|
1248
1541
|
display: block;
|
|
1249
|
-
font-size: 0.
|
|
1250
|
-
font-weight:
|
|
1542
|
+
font-size: 0.875rem;
|
|
1543
|
+
font-weight: 400;
|
|
1251
1544
|
white-space: nowrap;
|
|
1252
1545
|
overflow: hidden;
|
|
1253
1546
|
text-overflow: ellipsis;
|
|
1547
|
+
color: var(--color-text-primary);
|
|
1548
|
+
transition: color .12s, opacity .12s;
|
|
1549
|
+
}
|
|
1550
|
+
.task-item.active .task-name {
|
|
1551
|
+
color: var(--color-text-primary);
|
|
1254
1552
|
}
|
|
1255
1553
|
.task-cron {
|
|
1256
1554
|
display: block;
|
|
@@ -1356,11 +1654,9 @@ body {
|
|
|
1356
1654
|
text-align: center;
|
|
1357
1655
|
padding: 2.5rem 1.25rem;
|
|
1358
1656
|
}
|
|
1359
|
-
|
|
1360
1657
|
.task-table-empty p {
|
|
1361
1658
|
margin: 0 0 1rem;
|
|
1362
1659
|
}
|
|
1363
|
-
|
|
1364
1660
|
.task-create-btn {
|
|
1365
1661
|
display: inline-flex;
|
|
1366
1662
|
align-items: center;
|
|
@@ -1374,158 +1670,131 @@ body {
|
|
|
1374
1670
|
cursor: pointer;
|
|
1375
1671
|
transition: background 0.15s;
|
|
1376
1672
|
}
|
|
1377
|
-
|
|
1378
1673
|
.task-create-btn:hover {
|
|
1379
1674
|
background: var(--color-button-primary-hover);
|
|
1380
1675
|
}
|
|
1381
1676
|
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
display:
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
gap: 0.75rem;
|
|
1388
|
-
padding: 0.625rem 0.875rem;
|
|
1389
|
-
min-width: 37.5rem;
|
|
1677
|
+
/* ── Task card list ──────────────────────────────────────────────────────── */
|
|
1678
|
+
#task-list-table {
|
|
1679
|
+
display: flex;
|
|
1680
|
+
flex-direction: column;
|
|
1681
|
+
gap: 0.5rem;
|
|
1390
1682
|
}
|
|
1391
|
-
|
|
1392
|
-
.task-table-header {
|
|
1683
|
+
.task-card {
|
|
1393
1684
|
background: var(--color-bg-secondary);
|
|
1394
|
-
border-radius: 6px 6px 0 0;
|
|
1395
|
-
border: 1px solid var(--color-border-primary);
|
|
1396
|
-
border-bottom: none;
|
|
1397
|
-
font-size: 0.6875rem;
|
|
1398
|
-
font-weight: 600;
|
|
1399
|
-
text-transform: uppercase;
|
|
1400
|
-
letter-spacing: .05em;
|
|
1401
|
-
color: var(--color-text-secondary);
|
|
1402
|
-
flex-shrink: 0;
|
|
1403
|
-
}
|
|
1404
|
-
|
|
1405
|
-
.task-table-row {
|
|
1406
|
-
background: var(--color-bg-primary);
|
|
1407
1685
|
border: 1px solid var(--color-border-primary);
|
|
1408
|
-
border-
|
|
1409
|
-
|
|
1686
|
+
border-radius: 8px;
|
|
1687
|
+
padding: 0.875rem 1rem;
|
|
1688
|
+
transition: border-color .15s;
|
|
1410
1689
|
}
|
|
1411
|
-
.task-
|
|
1412
|
-
|
|
1690
|
+
.task-card:hover { border-color: var(--color-text-muted); }
|
|
1691
|
+
.task-card-paused { opacity: 0.65; }
|
|
1692
|
+
.task-card-main {
|
|
1693
|
+
display: flex;
|
|
1694
|
+
align-items: center;
|
|
1695
|
+
gap: 0.75rem;
|
|
1413
1696
|
}
|
|
1414
|
-
.task-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
.task-col-name {
|
|
1697
|
+
.task-card-icon {
|
|
1698
|
+
flex-shrink: 0;
|
|
1699
|
+
width: 2rem;
|
|
1700
|
+
height: 2rem;
|
|
1419
1701
|
display: flex;
|
|
1420
1702
|
align-items: center;
|
|
1421
|
-
|
|
1703
|
+
justify-content: center;
|
|
1704
|
+
border-radius: 6px;
|
|
1705
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
1706
|
+
color: var(--color-accent-primary);
|
|
1707
|
+
}
|
|
1708
|
+
.task-card-paused .task-card-icon {
|
|
1709
|
+
background: var(--color-bg-hover);
|
|
1710
|
+
color: var(--color-text-secondary);
|
|
1711
|
+
}
|
|
1712
|
+
.task-card-info {
|
|
1713
|
+
flex: 1;
|
|
1422
1714
|
min-width: 0;
|
|
1423
1715
|
}
|
|
1424
|
-
.task-
|
|
1716
|
+
.task-card-title-row {
|
|
1425
1717
|
display: flex;
|
|
1426
|
-
|
|
1427
|
-
|
|
1718
|
+
align-items: center;
|
|
1719
|
+
gap: 0.5rem;
|
|
1720
|
+
margin-bottom: 0.25rem;
|
|
1721
|
+
flex-wrap: wrap;
|
|
1428
1722
|
}
|
|
1429
|
-
.task-name
|
|
1430
|
-
font-weight: 600;
|
|
1723
|
+
.task-card-name {
|
|
1431
1724
|
font-size: 0.8125rem;
|
|
1725
|
+
font-weight: 600;
|
|
1432
1726
|
color: var(--color-text-primary);
|
|
1433
|
-
white-space: nowrap;
|
|
1434
|
-
overflow: hidden;
|
|
1435
|
-
text-overflow: ellipsis;
|
|
1436
|
-
}
|
|
1437
|
-
/* Mobile-only schedule shown inside name col — hidden on desktop */
|
|
1438
|
-
.task-name-sched {
|
|
1439
|
-
display: none;
|
|
1440
1727
|
}
|
|
1441
|
-
|
|
1442
|
-
.task-col-schedule {
|
|
1728
|
+
.task-card-cron {
|
|
1443
1729
|
font-size: 0.75rem;
|
|
1444
1730
|
font-family: monospace;
|
|
1445
1731
|
color: var(--color-warning);
|
|
1446
|
-
white-space: nowrap;
|
|
1447
|
-
overflow: hidden;
|
|
1448
|
-
text-overflow: ellipsis;
|
|
1449
1732
|
}
|
|
1450
|
-
.
|
|
1451
|
-
color: var(--color-text-secondary);
|
|
1733
|
+
.task-card-cron-manual {
|
|
1452
1734
|
font-style: italic;
|
|
1453
1735
|
font-family: inherit;
|
|
1454
|
-
}
|
|
1455
|
-
|
|
1456
|
-
/* Paused task visual treatment: dim the schedule cron text and prepend
|
|
1457
|
-
a small "Paused" pill so users can see at a glance which tasks are off. */
|
|
1458
|
-
.sched-paused-badge {
|
|
1459
|
-
display: inline-block;
|
|
1460
|
-
padding: 1px 0.5rem;
|
|
1461
|
-
margin-right: 0.375rem;
|
|
1462
|
-
border-radius: 10px;
|
|
1463
|
-
background: var(--color-bg-primary);
|
|
1464
|
-
border: 1px solid var(--color-border-primary);
|
|
1465
1736
|
color: var(--color-text-secondary);
|
|
1466
|
-
font-size: 0.6875rem;
|
|
1467
|
-
font-family: inherit;
|
|
1468
|
-
font-weight: 500;
|
|
1469
|
-
letter-spacing: 0.02em;
|
|
1470
|
-
vertical-align: middle;
|
|
1471
|
-
}
|
|
1472
|
-
.sched-paused-cron {
|
|
1473
|
-
color: var(--color-text-tertiary, var(--color-text-secondary));
|
|
1474
|
-
text-decoration: line-through;
|
|
1475
|
-
opacity: 0.6;
|
|
1476
1737
|
}
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1738
|
+
.task-card-badge {
|
|
1739
|
+
font-size: 0.625rem;
|
|
1740
|
+
font-weight: 600;
|
|
1741
|
+
padding: 2px 0.4375rem;
|
|
1742
|
+
border-radius: 10px;
|
|
1743
|
+
letter-spacing: 0.3px;
|
|
1481
1744
|
}
|
|
1482
|
-
.task-
|
|
1483
|
-
|
|
1745
|
+
.task-card-badge-paused {
|
|
1746
|
+
background: var(--color-bg-hover);
|
|
1747
|
+
color: var(--color-text-secondary);
|
|
1748
|
+
border: 1px solid var(--color-border-primary);
|
|
1484
1749
|
}
|
|
1485
|
-
|
|
1486
|
-
/* Pause/resume toggle button. Inherits from .task-btn base — no extra style needed. */
|
|
1487
|
-
.task-btn-resume { color: var(--color-accent-primary); }
|
|
1488
|
-
|
|
1489
|
-
.task-col-content {
|
|
1750
|
+
.task-card-preview {
|
|
1490
1751
|
font-size: 0.75rem;
|
|
1491
1752
|
color: var(--color-text-secondary);
|
|
1492
1753
|
white-space: nowrap;
|
|
1493
1754
|
overflow: hidden;
|
|
1494
1755
|
text-overflow: ellipsis;
|
|
1495
1756
|
}
|
|
1496
|
-
|
|
1497
|
-
.task-col-actions {
|
|
1757
|
+
.task-card-actions {
|
|
1498
1758
|
display: flex;
|
|
1759
|
+
align-items: center;
|
|
1499
1760
|
gap: 0.375rem;
|
|
1500
|
-
justify-content: flex-end;
|
|
1501
1761
|
flex-shrink: 0;
|
|
1502
|
-
overflow: visible;
|
|
1503
1762
|
}
|
|
1504
|
-
|
|
1505
|
-
.task-btn {
|
|
1763
|
+
.task-run-btn {
|
|
1506
1764
|
display: inline-flex;
|
|
1507
1765
|
align-items: center;
|
|
1508
|
-
gap: 0.
|
|
1766
|
+
gap: 0.3rem;
|
|
1767
|
+
padding: 0.4375rem 0.875rem;
|
|
1768
|
+
background: var(--color-accent-primary);
|
|
1769
|
+
color: #fff;
|
|
1509
1770
|
border: none;
|
|
1510
|
-
border-radius:
|
|
1511
|
-
padding: 0.3125rem 0.75rem;
|
|
1771
|
+
border-radius: 6px;
|
|
1512
1772
|
font-size: 0.75rem;
|
|
1773
|
+
font-weight: 500;
|
|
1513
1774
|
cursor: pointer;
|
|
1514
1775
|
white-space: nowrap;
|
|
1515
|
-
transition: background .12s
|
|
1516
|
-
}
|
|
1517
|
-
.task-btn:hover {
|
|
1518
|
-
transform: translateY(-1px);
|
|
1776
|
+
transition: background .12s;
|
|
1519
1777
|
}
|
|
1520
|
-
.task-btn:
|
|
1521
|
-
|
|
1778
|
+
.task-run-btn:hover { background: var(--color-accent-hover); }
|
|
1779
|
+
.task-action-btn {
|
|
1780
|
+
display: inline-flex;
|
|
1781
|
+
align-items: center;
|
|
1782
|
+
gap: 0.3rem;
|
|
1783
|
+
padding: 0.4375rem 0.75rem;
|
|
1784
|
+
border: none;
|
|
1785
|
+
border-radius: 6px;
|
|
1786
|
+
font-size: 0.75rem;
|
|
1787
|
+
font-weight: 500;
|
|
1788
|
+
cursor: pointer;
|
|
1789
|
+
white-space: nowrap;
|
|
1790
|
+
transition: background .12s, color .12s;
|
|
1791
|
+
background: var(--color-bg-hover);
|
|
1792
|
+
color: var(--color-text-secondary);
|
|
1522
1793
|
}
|
|
1523
|
-
.task-btn
|
|
1524
|
-
.task-btn-
|
|
1525
|
-
.task-btn-
|
|
1526
|
-
.task-btn-
|
|
1527
|
-
.task-btn-del { background: var(--color-error-bg); color: var(--color-error); }
|
|
1528
|
-
.task-btn-del:hover { background: var(--color-error); color: #fff; }
|
|
1794
|
+
.task-action-btn:hover { color: var(--color-text-primary); background: var(--color-border-primary); }
|
|
1795
|
+
.task-btn-resume { color: var(--color-accent-primary); }
|
|
1796
|
+
.task-btn-resume:hover { background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent); color: var(--color-accent-primary); }
|
|
1797
|
+
.task-btn-del:hover { background: var(--color-error-bg); color: var(--color-error); }
|
|
1529
1798
|
|
|
1530
1799
|
.empty-hint {
|
|
1531
1800
|
color: var(--color-text-secondary);
|
|
@@ -1552,22 +1821,85 @@ body {
|
|
|
1552
1821
|
flex-direction: column;
|
|
1553
1822
|
align-items: center;
|
|
1554
1823
|
justify-content: center;
|
|
1555
|
-
gap:
|
|
1824
|
+
gap: 1.25rem;
|
|
1556
1825
|
color: var(--color-text-secondary);
|
|
1557
1826
|
}
|
|
1558
|
-
|
|
1559
|
-
|
|
1827
|
+
|
|
1828
|
+
/* ── Empty / welcome state — agent "standing by" cockpit ─────────────────── */
|
|
1829
|
+
.ce-mark {
|
|
1830
|
+
width: 3.25rem;
|
|
1831
|
+
height: 3.25rem;
|
|
1832
|
+
border-radius: 0.875rem;
|
|
1833
|
+
background: var(--color-accent-soft);
|
|
1834
|
+
display: grid;
|
|
1835
|
+
place-items: center;
|
|
1836
|
+
}
|
|
1837
|
+
.ce-mark svg { width: 1.625rem; height: 1.625rem; color: var(--color-accent-primary); }
|
|
1838
|
+
.ce-head {
|
|
1839
|
+
display: flex;
|
|
1840
|
+
flex-direction: column;
|
|
1841
|
+
gap: 0.375rem;
|
|
1842
|
+
align-items: center;
|
|
1843
|
+
}
|
|
1844
|
+
.ce-title {
|
|
1845
|
+
font-size: 1.3125rem;
|
|
1846
|
+
font-weight: 680;
|
|
1847
|
+
color: var(--color-text-primary);
|
|
1848
|
+
letter-spacing: -0.01em;
|
|
1849
|
+
text-align: center;
|
|
1850
|
+
}
|
|
1851
|
+
.ce-sub {
|
|
1852
|
+
color: var(--color-text-tertiary);
|
|
1853
|
+
font-size: 0.84375rem;
|
|
1854
|
+
text-align: center;
|
|
1855
|
+
}
|
|
1856
|
+
.chips {
|
|
1857
|
+
display: flex;
|
|
1858
|
+
gap: 0.625rem;
|
|
1859
|
+
flex-wrap: wrap;
|
|
1860
|
+
justify-content: center;
|
|
1861
|
+
max-width: 34rem;
|
|
1862
|
+
}
|
|
1863
|
+
.chip {
|
|
1864
|
+
display: flex;
|
|
1865
|
+
align-items: center;
|
|
1866
|
+
gap: 0.5625rem;
|
|
1867
|
+
padding: 0.6875rem 0.9375rem;
|
|
1868
|
+
border: 1px solid var(--color-border-primary);
|
|
1869
|
+
border-radius: 0.625rem;
|
|
1870
|
+
background: var(--color-bg-primary);
|
|
1871
|
+
cursor: pointer;
|
|
1872
|
+
text-align: left;
|
|
1873
|
+
transition: border-color 0.14s, transform 0.14s;
|
|
1874
|
+
}
|
|
1875
|
+
.chip:hover {
|
|
1876
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-primary));
|
|
1877
|
+
transform: translateY(-1px);
|
|
1878
|
+
}
|
|
1879
|
+
.chip .ci {
|
|
1880
|
+
width: 1.875rem;
|
|
1881
|
+
height: 1.875rem;
|
|
1882
|
+
border-radius: 0.5rem;
|
|
1883
|
+
background: var(--color-bg-hover);
|
|
1884
|
+
display: grid;
|
|
1885
|
+
place-items: center;
|
|
1886
|
+
flex-shrink: 0;
|
|
1887
|
+
}
|
|
1888
|
+
.chip .ci svg { width: 1rem; height: 1rem; color: var(--color-text-secondary); }
|
|
1889
|
+
.chip .ct-wrap { display: flex; flex-direction: column; gap: 1px; }
|
|
1890
|
+
.chip .ct { font-size: 0.8125rem; color: var(--color-text-primary); font-weight: 550; }
|
|
1891
|
+
.chip .cd { font-size: 0.71875rem; color: var(--color-text-tertiary); }
|
|
1560
1892
|
#btn-welcome-new {
|
|
1561
|
-
background:
|
|
1562
|
-
color: var(--color-
|
|
1893
|
+
background: transparent;
|
|
1894
|
+
color: var(--color-text-tertiary);
|
|
1563
1895
|
border: none;
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
font-size: 0.875rem;
|
|
1896
|
+
padding: 0.25rem 0.5rem;
|
|
1897
|
+
font-size: 0.8125rem;
|
|
1567
1898
|
cursor: pointer;
|
|
1568
|
-
transition:
|
|
1899
|
+
transition: color var(--transition-fast);
|
|
1569
1900
|
}
|
|
1570
|
-
#btn-welcome-new:hover {
|
|
1901
|
+
#btn-welcome-new:hover { color: var(--color-text-secondary); text-decoration: underline; }
|
|
1902
|
+
|
|
1571
1903
|
|
|
1572
1904
|
/* ── Chat panel ──────────────────────────────────────────────────────────── */
|
|
1573
1905
|
#chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
|
|
@@ -1617,6 +1949,7 @@ body {
|
|
|
1617
1949
|
overflow-y: auto;
|
|
1618
1950
|
padding: 0.375rem 0.25rem;
|
|
1619
1951
|
font-size: 0.8125rem;
|
|
1952
|
+
font-family: var(--font-mono);
|
|
1620
1953
|
}
|
|
1621
1954
|
.wt-node { user-select: none; }
|
|
1622
1955
|
.wt-row {
|
|
@@ -1683,7 +2016,7 @@ body {
|
|
|
1683
2016
|
flex: 1;
|
|
1684
2017
|
overflow-y: auto;
|
|
1685
2018
|
overflow-x: hidden;
|
|
1686
|
-
padding: 1.25rem;
|
|
2019
|
+
padding: 1.75rem 1.25rem 1.25rem;
|
|
1687
2020
|
display: flex;
|
|
1688
2021
|
flex-direction: column;
|
|
1689
2022
|
gap: 0.75rem;
|
|
@@ -1817,8 +2150,8 @@ body {
|
|
|
1817
2150
|
.msg-user .msg-time { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
|
|
1818
2151
|
.msg-assistant .msg-time { color: var(--color-text-secondary); left: 0; right: auto; padding-left: 0.25rem; }
|
|
1819
2152
|
|
|
1820
|
-
.msg-user { background: var(--color-accent-
|
|
1821
|
-
[data-theme="dark"] .msg-user { background: var(--color-accent-
|
|
2153
|
+
.msg-user { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; }
|
|
2154
|
+
[data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
|
|
1822
2155
|
.msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
|
|
1823
2156
|
|
|
1824
2157
|
/* ── Copy button on assistant messages ────────────────────────────────────
|
|
@@ -2158,7 +2491,7 @@ body {
|
|
|
2158
2491
|
.token-usage-line b { font-weight: 600; color: var(--color-text-secondary); }
|
|
2159
2492
|
.tu-label { color: var(--color-text-tertiary); font-weight: 600; }
|
|
2160
2493
|
.tu-sep { color: var(--color-text-muted); opacity: 0.45; padding: 0 1px; }
|
|
2161
|
-
.tu-cache { color: var(--color-
|
|
2494
|
+
.tu-cache { color: var(--color-text-tertiary); font-weight: 600; } /* [*] cache hit — neutral, not brand */
|
|
2162
2495
|
.tu-field { color: var(--color-text-muted); }
|
|
2163
2496
|
.tu-cost { color: var(--color-text-tertiary); }
|
|
2164
2497
|
.tu-delta { font-weight: 700; }
|
|
@@ -2174,7 +2507,7 @@ body {
|
|
|
2174
2507
|
flex-wrap: wrap;
|
|
2175
2508
|
}
|
|
2176
2509
|
.tool-item .token-usage-line.tu-attached:hover { opacity: 0.95; }
|
|
2177
|
-
.tu-delta-neg { color:
|
|
2510
|
+
.tu-delta-neg { color: #34d399; } /* compression / token reduction — semantic green */
|
|
2178
2511
|
|
|
2179
2512
|
/* Detail fields: hidden by default, revealed on hover */
|
|
2180
2513
|
.tu-detail {
|
|
@@ -2236,7 +2569,7 @@ body {
|
|
|
2236
2569
|
align-items: baseline;
|
|
2237
2570
|
gap: 0.375rem;
|
|
2238
2571
|
}
|
|
2239
|
-
.tool-item-name { color: var(--color-
|
|
2572
|
+
.tool-item-name { color: var(--color-text-primary); font-weight: 600; }
|
|
2240
2573
|
.tool-item-arg { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
|
|
2241
2574
|
.tool-item-header.tool-item-expandable { cursor: pointer; user-select: none; }
|
|
2242
2575
|
.tool-item-header.tool-item-expandable:hover .tool-item-name,
|
|
@@ -2260,7 +2593,10 @@ body {
|
|
|
2260
2593
|
.tool-item-status { margin-left: auto; font-size: 0.6875rem; flex-shrink: 0; }
|
|
2261
2594
|
.tool-item-status.ok { color: var(--color-success); }
|
|
2262
2595
|
.tool-item-status.err { color: var(--color-error); }
|
|
2263
|
-
.tool-item-status.running { color: var(--
|
|
2596
|
+
.tool-item-status.running { color: var(--live); animation: pulse 1.6s ease-in-out infinite; }
|
|
2597
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2598
|
+
.tool-item-status.running { animation: none; }
|
|
2599
|
+
}
|
|
2264
2600
|
.tool-item-stdout {
|
|
2265
2601
|
margin: 0.25rem 0 2px 0;
|
|
2266
2602
|
padding: 0.375rem 0.5rem;
|
|
@@ -2463,25 +2799,46 @@ body {
|
|
|
2463
2799
|
#session-info-bar {
|
|
2464
2800
|
display: flex;
|
|
2465
2801
|
align-items: center;
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2802
|
+
gap: 0.375rem;
|
|
2803
|
+
flex-wrap: wrap;
|
|
2804
|
+
padding: 0.375rem 0.75rem;
|
|
2805
|
+
margin-left: 1.5rem;
|
|
2806
|
+
margin-right: 1.5rem;
|
|
2807
|
+
background: transparent;
|
|
2808
|
+
border-top: none;
|
|
2469
2809
|
font-size: 0.6875rem;
|
|
2470
|
-
color: var(--color-text-
|
|
2810
|
+
color: var(--color-text-tertiary);
|
|
2471
2811
|
font-family: var(--font-mono, monospace);
|
|
2472
2812
|
white-space: nowrap;
|
|
2473
2813
|
overflow: hidden;
|
|
2474
2814
|
flex-shrink: 0;
|
|
2475
|
-
opacity: 0.
|
|
2815
|
+
opacity: 0.95;
|
|
2476
2816
|
transition: opacity 0.15s ease;
|
|
2477
2817
|
cursor: default;
|
|
2478
2818
|
}
|
|
2479
2819
|
|
|
2820
|
+
#session-info-bar .sib-sep {
|
|
2821
|
+
opacity: 0.3;
|
|
2822
|
+
}
|
|
2480
2823
|
#session-info-bar:hover {
|
|
2481
2824
|
opacity: 1;
|
|
2482
2825
|
}
|
|
2483
2826
|
#session-info-bar:hover .sib-sep { opacity: 0.35; }
|
|
2484
2827
|
|
|
2828
|
+
/* Dark theme optical adjustments for high glanceability */
|
|
2829
|
+
[data-theme="dark"] #session-info-bar {
|
|
2830
|
+
color: var(--color-text-secondary);
|
|
2831
|
+
}
|
|
2832
|
+
[data-theme="dark"] #session-info-bar .sib-sep {
|
|
2833
|
+
opacity: 0.45;
|
|
2834
|
+
}
|
|
2835
|
+
[data-theme="dark"] #sib-id {
|
|
2836
|
+
opacity: 0.6;
|
|
2837
|
+
}
|
|
2838
|
+
[data-theme="dark"] #sib-dir {
|
|
2839
|
+
opacity: 0.85;
|
|
2840
|
+
}
|
|
2841
|
+
|
|
2485
2842
|
/* Show all fields by default, not just on hover */
|
|
2486
2843
|
.sib-detail {
|
|
2487
2844
|
display: contents;
|
|
@@ -2561,20 +2918,45 @@ body {
|
|
|
2561
2918
|
}
|
|
2562
2919
|
|
|
2563
2920
|
.sib-sep {
|
|
2564
|
-
margin: 0
|
|
2921
|
+
margin: 0;
|
|
2565
2922
|
opacity: 0.18; /* very subtle — only visible on hover */
|
|
2566
2923
|
flex-shrink: 0;
|
|
2567
2924
|
transition: opacity 0.15s ease;
|
|
2568
2925
|
}
|
|
2569
2926
|
|
|
2570
2927
|
/* Status colors (Tier 1) */
|
|
2571
|
-
|
|
2572
|
-
|
|
2928
|
+
#sib-status {
|
|
2929
|
+
display: inline-flex;
|
|
2930
|
+
align-items: center;
|
|
2931
|
+
gap: 0.375rem;
|
|
2932
|
+
flex-shrink: 0;
|
|
2933
|
+
letter-spacing: 0.04em;
|
|
2934
|
+
}
|
|
2935
|
+
.sib-dot {
|
|
2936
|
+
width: 6px;
|
|
2937
|
+
height: 6px;
|
|
2938
|
+
border-radius: 50%;
|
|
2939
|
+
background: currentColor;
|
|
2940
|
+
flex-shrink: 0;
|
|
2941
|
+
}
|
|
2942
|
+
.sib-status-idle { color: var(--color-text-tertiary); opacity: 1; }
|
|
2943
|
+
.sib-status-idle .sib-dot { background: var(--color-text-muted); }
|
|
2944
|
+
.sib-status-running { color: var(--live); }
|
|
2945
|
+
.sib-status-running .sib-dot {
|
|
2946
|
+
background: var(--live);
|
|
2947
|
+
box-shadow: 0 0 0 0 var(--live);
|
|
2948
|
+
animation: sib-heartbeat 1.6s ease-in-out infinite;
|
|
2949
|
+
}
|
|
2573
2950
|
.sib-status-error { color: #e05f5f; }
|
|
2574
2951
|
|
|
2575
|
-
@keyframes sib-
|
|
2576
|
-
0
|
|
2577
|
-
|
|
2952
|
+
@keyframes sib-heartbeat {
|
|
2953
|
+
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
|
|
2954
|
+
70% { box-shadow: 0 0 0 5px transparent; }
|
|
2955
|
+
100% { box-shadow: 0 0 0 0 transparent; }
|
|
2956
|
+
}
|
|
2957
|
+
|
|
2958
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2959
|
+
.sib-status-running .sib-dot { animation: none; }
|
|
2578
2960
|
}
|
|
2579
2961
|
|
|
2580
2962
|
#sib-dir {
|
|
@@ -2734,7 +3116,7 @@ body {
|
|
|
2734
3116
|
position: fixed;
|
|
2735
3117
|
/* Position will be calculated dynamically via JavaScript */
|
|
2736
3118
|
min-width: 12.5rem;
|
|
2737
|
-
max-width: 17.5rem;
|
|
3119
|
+
max-width: min(17.5rem, calc(100vw - 1.5rem));
|
|
2738
3120
|
background: var(--color-bg-secondary);
|
|
2739
3121
|
border: 1px solid var(--color-border-primary);
|
|
2740
3122
|
border-radius: 8px;
|
|
@@ -2742,6 +3124,7 @@ body {
|
|
|
2742
3124
|
z-index: 1000;
|
|
2743
3125
|
max-height: 18.75rem;
|
|
2744
3126
|
overflow-y: auto;
|
|
3127
|
+
overflow-x: hidden;
|
|
2745
3128
|
}
|
|
2746
3129
|
.sib-model-option {
|
|
2747
3130
|
padding: 0.5625rem 0.875rem;
|
|
@@ -2753,6 +3136,8 @@ body {
|
|
|
2753
3136
|
display: flex;
|
|
2754
3137
|
align-items: center;
|
|
2755
3138
|
justify-content: space-between;
|
|
3139
|
+
gap: 0.375rem;
|
|
3140
|
+
min-width: 0;
|
|
2756
3141
|
}
|
|
2757
3142
|
.sib-model-option:hover {
|
|
2758
3143
|
background: var(--color-bg-hover);
|
|
@@ -2929,25 +3314,114 @@ body {
|
|
|
2929
3314
|
white-space: nowrap;
|
|
2930
3315
|
}
|
|
2931
3316
|
|
|
2932
|
-
.sib-model-
|
|
3317
|
+
.sib-model-vision {
|
|
2933
3318
|
display: inline-flex;
|
|
2934
|
-
align-items:
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
}
|
|
2945
|
-
.sib-model-option .sib-model-name-main {
|
|
2946
|
-
overflow: hidden;
|
|
2947
|
-
text-overflow: ellipsis;
|
|
3319
|
+
align-items: center;
|
|
3320
|
+
flex: 0 0 auto;
|
|
3321
|
+
margin-left: 0.375rem;
|
|
3322
|
+
padding: 1px 0.375rem;
|
|
3323
|
+
font-size: 0.5625rem;
|
|
3324
|
+
line-height: 1.4;
|
|
3325
|
+
border-radius: 8px;
|
|
3326
|
+
border: 1px solid var(--color-border-primary);
|
|
3327
|
+
background: var(--color-bg-secondary);
|
|
3328
|
+
color: var(--color-text-secondary);
|
|
2948
3329
|
white-space: nowrap;
|
|
2949
|
-
|
|
2950
|
-
|
|
3330
|
+
}
|
|
3331
|
+
.sib-model-vision.is-ok {
|
|
3332
|
+
color: var(--color-success);
|
|
3333
|
+
border-color: var(--color-success-border);
|
|
3334
|
+
background: var(--color-success-bg);
|
|
3335
|
+
}
|
|
3336
|
+
.sib-model-vision.is-missing {
|
|
3337
|
+
color: var(--color-error);
|
|
3338
|
+
border-color: var(--color-error-border);
|
|
3339
|
+
background: var(--color-error-bg);
|
|
3340
|
+
}
|
|
3341
|
+
|
|
3342
|
+
.sib-gen-footer {
|
|
3343
|
+
display: flex;
|
|
3344
|
+
align-items: center;
|
|
3345
|
+
gap: 0.375rem;
|
|
3346
|
+
padding: 0.375rem 0.5rem;
|
|
3347
|
+
border-top: 1px solid var(--color-border-primary);
|
|
3348
|
+
background: var(--color-bg-primary);
|
|
3349
|
+
position: sticky;
|
|
3350
|
+
bottom: 0;
|
|
3351
|
+
z-index: 1;
|
|
3352
|
+
}
|
|
3353
|
+
.sib-gen-title {
|
|
3354
|
+
font-size: 0.625rem;
|
|
3355
|
+
color: var(--color-text-tertiary);
|
|
3356
|
+
flex: 0 0 auto;
|
|
3357
|
+
}
|
|
3358
|
+
.sib-gen-list {
|
|
3359
|
+
display: flex;
|
|
3360
|
+
align-items: center;
|
|
3361
|
+
gap: 0.25rem;
|
|
3362
|
+
flex: 1 1 auto;
|
|
3363
|
+
flex-wrap: wrap;
|
|
3364
|
+
}
|
|
3365
|
+
.sib-gen-chip {
|
|
3366
|
+
display: inline-flex;
|
|
3367
|
+
align-items: center;
|
|
3368
|
+
padding: 1px 0.375rem;
|
|
3369
|
+
font-size: 0.5625rem;
|
|
3370
|
+
line-height: 1.4;
|
|
3371
|
+
border-radius: 8px;
|
|
3372
|
+
border: 1px solid var(--color-border-primary);
|
|
3373
|
+
background: var(--color-bg-secondary);
|
|
3374
|
+
color: var(--color-text-secondary);
|
|
3375
|
+
white-space: nowrap;
|
|
3376
|
+
}
|
|
3377
|
+
.sib-gen-chip.is-ok {
|
|
3378
|
+
color: var(--color-success);
|
|
3379
|
+
border-color: var(--color-success-border);
|
|
3380
|
+
background: var(--color-success-bg);
|
|
3381
|
+
}
|
|
3382
|
+
.sib-gen-chip.is-off {
|
|
3383
|
+
color: var(--color-text-tertiary);
|
|
3384
|
+
opacity: 0.75;
|
|
3385
|
+
}
|
|
3386
|
+
.sib-gen-config {
|
|
3387
|
+
flex: 0 0 auto;
|
|
3388
|
+
margin-left: auto;
|
|
3389
|
+
padding: 2px 0.5rem;
|
|
3390
|
+
font-size: 0.5625rem;
|
|
3391
|
+
line-height: 1.4;
|
|
3392
|
+
font-family: inherit;
|
|
3393
|
+
border-radius: 8px;
|
|
3394
|
+
border: 1px solid var(--color-border-primary);
|
|
3395
|
+
background: var(--color-bg-secondary);
|
|
3396
|
+
color: var(--color-text-secondary);
|
|
3397
|
+
cursor: pointer;
|
|
3398
|
+
white-space: nowrap;
|
|
3399
|
+
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
|
3400
|
+
}
|
|
3401
|
+
.sib-gen-config:hover {
|
|
3402
|
+
background: var(--color-bg-hover);
|
|
3403
|
+
border-color: var(--color-accent-primary);
|
|
3404
|
+
color: var(--color-accent-primary);
|
|
3405
|
+
}
|
|
3406
|
+
.sib-model-option .sib-model-name {
|
|
3407
|
+
display: inline-flex;
|
|
3408
|
+
align-items: baseline;
|
|
3409
|
+
gap: 0.375rem;
|
|
3410
|
+
overflow: hidden;
|
|
3411
|
+
flex: 1 1 auto;
|
|
3412
|
+
min-width: 0;
|
|
3413
|
+
}
|
|
3414
|
+
.sib-model-option .sib-model-name.has-sub {
|
|
3415
|
+
flex-direction: column;
|
|
3416
|
+
align-items: flex-start;
|
|
3417
|
+
gap: 0.125rem;
|
|
3418
|
+
}
|
|
3419
|
+
.sib-model-option .sib-model-name-main {
|
|
3420
|
+
overflow: hidden;
|
|
3421
|
+
text-overflow: ellipsis;
|
|
3422
|
+
white-space: nowrap;
|
|
3423
|
+
flex: 0 1 auto;
|
|
3424
|
+
min-width: 0;
|
|
2951
3425
|
}
|
|
2952
3426
|
.sib-model-option .sib-model-name-sub {
|
|
2953
3427
|
font-size: 0.6875rem;
|
|
@@ -3008,12 +3482,11 @@ body {
|
|
|
3008
3482
|
|
|
3009
3483
|
#input-area {
|
|
3010
3484
|
position: relative;
|
|
3011
|
-
|
|
3012
|
-
background: var(--color-bg-secondary);
|
|
3485
|
+
background: transparent;
|
|
3013
3486
|
flex-shrink: 0;
|
|
3014
|
-
min-height: var(--footer-height);
|
|
3015
3487
|
display: flex;
|
|
3016
3488
|
flex-direction: column;
|
|
3489
|
+
padding: 0px 24px 20px;
|
|
3017
3490
|
}
|
|
3018
3491
|
|
|
3019
3492
|
/* Hide top border when skill autocomplete is visible */
|
|
@@ -3028,17 +3501,28 @@ body {
|
|
|
3028
3501
|
outline-offset: -2px;
|
|
3029
3502
|
}
|
|
3030
3503
|
|
|
3031
|
-
/* Image preview strip */
|
|
3504
|
+
/* Image preview strip — visually merged into the input-bar card above the textarea */
|
|
3032
3505
|
#image-preview-strip {
|
|
3033
3506
|
display: flex;
|
|
3034
3507
|
flex-wrap: wrap;
|
|
3035
3508
|
gap: 0.5rem;
|
|
3036
|
-
padding: 0.5rem
|
|
3509
|
+
padding: 0.5rem 0.75rem;
|
|
3510
|
+
background: var(--color-bg-primary);
|
|
3511
|
+
border: 1px solid var(--color-border-primary);
|
|
3512
|
+
border-bottom: none;
|
|
3513
|
+
border-radius: 13px 13px 0 0;
|
|
3514
|
+
box-shadow: var(--shadow-card);
|
|
3515
|
+
margin-bottom: -1px;
|
|
3516
|
+
}
|
|
3517
|
+
/* Square off the top corners of the input-bar when the preview strip sits above it */
|
|
3518
|
+
#input-area:has(#image-preview-strip:not([style*="display:none"])):not(:has(#image-preview-strip[style*="display: none"])) #input-bar {
|
|
3519
|
+
border-top-left-radius: 0;
|
|
3520
|
+
border-top-right-radius: 0;
|
|
3037
3521
|
}
|
|
3038
3522
|
.img-preview-item {
|
|
3039
3523
|
position: relative;
|
|
3040
|
-
width:
|
|
3041
|
-
height:
|
|
3524
|
+
width: 3.25rem;
|
|
3525
|
+
height: 3.25rem;
|
|
3042
3526
|
border-radius: 6px;
|
|
3043
3527
|
overflow: hidden;
|
|
3044
3528
|
border: 1px solid var(--color-border-primary);
|
|
@@ -3074,7 +3558,7 @@ body {
|
|
|
3074
3558
|
flex-direction: row;
|
|
3075
3559
|
align-items: center;
|
|
3076
3560
|
gap: 0.5rem;
|
|
3077
|
-
height:
|
|
3561
|
+
height: 3.25rem;
|
|
3078
3562
|
padding: 0 1.75rem 0 0.625rem;
|
|
3079
3563
|
border-radius: 8px;
|
|
3080
3564
|
border: 1px solid var(--color-border-primary);
|
|
@@ -3339,92 +3823,132 @@ body {
|
|
|
3339
3823
|
|
|
3340
3824
|
/* ── Input bar ───────────────────────────────────────────────────────────── */
|
|
3341
3825
|
#input-bar {
|
|
3342
|
-
margin
|
|
3343
|
-
|
|
3344
|
-
|
|
3826
|
+
margin: 0;
|
|
3827
|
+
padding: 10px 12px;
|
|
3828
|
+
border: 1px solid var(--color-border-primary);
|
|
3829
|
+
border-radius: 13px;
|
|
3830
|
+
background: var(--color-bg-primary);
|
|
3345
3831
|
display: flex;
|
|
3346
|
-
gap: 0.375rem;
|
|
3347
3832
|
align-items: center;
|
|
3348
|
-
|
|
3833
|
+
gap: 8px;
|
|
3834
|
+
box-shadow: var(--shadow-card);
|
|
3835
|
+
transition: border-color .14s;
|
|
3836
|
+
}
|
|
3837
|
+
#input-bar:focus-within {
|
|
3838
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
|
|
3349
3839
|
}
|
|
3350
3840
|
|
|
3351
3841
|
/* Attach button — left of textarea, vertically centered */
|
|
3352
3842
|
#btn-attach {
|
|
3353
3843
|
border: none;
|
|
3354
3844
|
background: transparent;
|
|
3355
|
-
color: var(--color-text-
|
|
3845
|
+
color: var(--color-text-tertiary);
|
|
3356
3846
|
cursor: pointer;
|
|
3357
|
-
width:
|
|
3358
|
-
height:
|
|
3847
|
+
width: 32px;
|
|
3848
|
+
height: 32px;
|
|
3359
3849
|
padding: 0;
|
|
3360
|
-
|
|
3850
|
+
margin-right: -4px;
|
|
3361
3851
|
flex-shrink: 0;
|
|
3362
|
-
display:
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3852
|
+
display: grid;
|
|
3853
|
+
place-items: center;
|
|
3854
|
+
border-radius: 8px;
|
|
3855
|
+
transition: background .12s, color .12s;
|
|
3856
|
+
}
|
|
3857
|
+
#btn-attach:hover {
|
|
3858
|
+
color: var(--color-text-primary);
|
|
3859
|
+
background: var(--color-bg-hover);
|
|
3860
|
+
}
|
|
3861
|
+
#btn-attach svg {
|
|
3862
|
+
width: 18px;
|
|
3863
|
+
height: 18px;
|
|
3366
3864
|
}
|
|
3367
|
-
|
|
3865
|
+
|
|
3368
3866
|
#btn-slash {
|
|
3369
3867
|
border: none;
|
|
3370
3868
|
background: transparent;
|
|
3371
|
-
color: var(--color-text-
|
|
3869
|
+
color: var(--color-text-tertiary);
|
|
3372
3870
|
cursor: pointer;
|
|
3373
|
-
width:
|
|
3374
|
-
height:
|
|
3871
|
+
width: 32px;
|
|
3872
|
+
height: 32px;
|
|
3375
3873
|
padding: 0;
|
|
3376
|
-
line-height: 1;
|
|
3377
3874
|
flex-shrink: 0;
|
|
3378
|
-
display:
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
border-radius: 6px;
|
|
3382
|
-
font-weight: 600;
|
|
3875
|
+
display: grid;
|
|
3876
|
+
place-items: center;
|
|
3877
|
+
border-radius: 8px;
|
|
3383
3878
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
3879
|
+
transition: background .12s, color .12s;
|
|
3384
3880
|
}
|
|
3385
3881
|
#btn-slash span {
|
|
3386
|
-
font-size:
|
|
3882
|
+
font-size: 0.875rem;
|
|
3883
|
+
font-weight: 400;
|
|
3884
|
+
}
|
|
3885
|
+
#btn-slash:hover {
|
|
3886
|
+
color: var(--color-text-primary);
|
|
3887
|
+
background: var(--color-bg-hover);
|
|
3888
|
+
}
|
|
3889
|
+
#btn-slash.active {
|
|
3890
|
+
color: var(--color-accent-primary);
|
|
3891
|
+
background: var(--color-accent-soft);
|
|
3387
3892
|
}
|
|
3388
|
-
|
|
3389
|
-
#btn-slash.active { color: var(--color-accent-primary); }
|
|
3893
|
+
|
|
3390
3894
|
#user-input {
|
|
3391
3895
|
flex: 1;
|
|
3392
|
-
background:
|
|
3393
|
-
border:
|
|
3394
|
-
|
|
3896
|
+
background: transparent !important;
|
|
3897
|
+
border: none !important;
|
|
3898
|
+
outline: none !important;
|
|
3395
3899
|
color: var(--color-text-primary);
|
|
3396
|
-
padding:
|
|
3900
|
+
padding: 4px 6px;
|
|
3397
3901
|
font-size: 0.875rem;
|
|
3398
3902
|
resize: none;
|
|
3399
3903
|
max-height: 12.5rem;
|
|
3400
|
-
font-family:
|
|
3401
|
-
line-height: 1.
|
|
3904
|
+
font-family: var(--font-sans);
|
|
3905
|
+
line-height: 1.55;
|
|
3402
3906
|
overflow-y: auto;
|
|
3403
3907
|
scrollbar-width: none;
|
|
3908
|
+
margin: 0;
|
|
3404
3909
|
}
|
|
3405
3910
|
#user-input::-webkit-scrollbar { display: none; }
|
|
3406
|
-
|
|
3911
|
+
|
|
3407
3912
|
#btn-send, #btn-interrupt {
|
|
3408
3913
|
border: none;
|
|
3409
|
-
border-radius:
|
|
3410
|
-
|
|
3411
|
-
height:
|
|
3412
|
-
font-size: 0.8125rem;
|
|
3914
|
+
border-radius: 9px;
|
|
3915
|
+
width: 34px;
|
|
3916
|
+
height: 34px;
|
|
3413
3917
|
cursor: pointer;
|
|
3414
3918
|
white-space: nowrap;
|
|
3415
3919
|
flex-shrink: 0;
|
|
3416
|
-
display:
|
|
3417
|
-
|
|
3418
|
-
|
|
3920
|
+
display: grid;
|
|
3921
|
+
place-items: center;
|
|
3922
|
+
transition: background .12s, opacity .12s;
|
|
3923
|
+
}
|
|
3924
|
+
#btn-send {
|
|
3925
|
+
background: var(--color-accent-primary);
|
|
3926
|
+
color: #fff;
|
|
3927
|
+
}
|
|
3928
|
+
#btn-send svg {
|
|
3929
|
+
width: 15px;
|
|
3930
|
+
height: 15px;
|
|
3931
|
+
}
|
|
3932
|
+
#btn-send:hover {
|
|
3933
|
+
background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
|
|
3934
|
+
}
|
|
3935
|
+
#btn-send:disabled {
|
|
3936
|
+
background: var(--color-border-primary);
|
|
3937
|
+
color: var(--color-text-tertiary);
|
|
3938
|
+
cursor: not-allowed;
|
|
3939
|
+
opacity: 0.6;
|
|
3940
|
+
}
|
|
3941
|
+
#btn-interrupt {
|
|
3942
|
+
background: var(--color-error);
|
|
3943
|
+
color: #fff;
|
|
3944
|
+
}
|
|
3945
|
+
#btn-interrupt svg {
|
|
3946
|
+
width: 14px;
|
|
3947
|
+
height: 14px;
|
|
3948
|
+
}
|
|
3949
|
+
#btn-interrupt:hover {
|
|
3950
|
+
background: color-mix(in srgb, var(--color-error) 85%, #fff);
|
|
3419
3951
|
}
|
|
3420
|
-
#btn-send { background: var(--color-button-primary); color: #fff; }
|
|
3421
|
-
#btn-send:hover { background: var(--color-button-primary-hover); }
|
|
3422
|
-
[data-theme="dark"] #btn-send { background: #2563eb; }
|
|
3423
|
-
[data-theme="dark"] #btn-send:hover { background: #1d4ed8; }
|
|
3424
|
-
#btn-send:disabled { background: var(--color-border-primary); color: var(--color-text-secondary); cursor: not-allowed; }
|
|
3425
|
-
#btn-interrupt { background: var(--color-error); color: #fff; }
|
|
3426
|
-
#btn-interrupt::after { content: ''; display: block; width: 0.625rem; height: 0.625rem; background: #fff; border-radius: 2px; }
|
|
3427
|
-
#btn-interrupt:hover{ background: var(--color-error); opacity: 0.85; }
|
|
3428
3952
|
|
|
3429
3953
|
/* ── Sidebar footer ──────────────────────────────────────────────────────── */
|
|
3430
3954
|
#sidebar-footer {
|
|
@@ -3438,21 +3962,45 @@ body {
|
|
|
3438
3962
|
.sidebar-nav-btn {
|
|
3439
3963
|
display: flex;
|
|
3440
3964
|
align-items: center;
|
|
3441
|
-
gap:
|
|
3965
|
+
gap: 11px;
|
|
3442
3966
|
width: 100%;
|
|
3443
3967
|
background: transparent;
|
|
3444
3968
|
border: none;
|
|
3445
|
-
border-radius:
|
|
3446
|
-
color: var(--color-text-
|
|
3447
|
-
font-size: 0.
|
|
3448
|
-
|
|
3969
|
+
border-radius: 8px;
|
|
3970
|
+
color: var(--color-text-primary);
|
|
3971
|
+
font-size: 0.875rem;
|
|
3972
|
+
font-weight: 400;
|
|
3973
|
+
padding: 8px 10px;
|
|
3449
3974
|
cursor: pointer;
|
|
3450
3975
|
text-align: left;
|
|
3451
|
-
transition: background .
|
|
3976
|
+
transition: background .12s, color .12s, opacity .12s;
|
|
3977
|
+
}
|
|
3978
|
+
.sidebar-nav-btn:hover {
|
|
3979
|
+
background: var(--color-bg-hover);
|
|
3980
|
+
color: var(--color-text-primary);
|
|
3981
|
+
opacity: 1;
|
|
3982
|
+
}
|
|
3983
|
+
.sidebar-nav-btn:hover svg {
|
|
3984
|
+
color: var(--color-text-primary);
|
|
3985
|
+
opacity: 1;
|
|
3986
|
+
}
|
|
3987
|
+
.sidebar-nav-btn.active {
|
|
3988
|
+
background: var(--color-bg-hover);
|
|
3989
|
+
}
|
|
3990
|
+
.sidebar-nav-btn.active span {
|
|
3991
|
+
color: var(--color-text-primary);
|
|
3992
|
+
}
|
|
3993
|
+
.sidebar-nav-btn.active svg {
|
|
3994
|
+
color: var(--color-text-primary);
|
|
3995
|
+
opacity: 1;
|
|
3996
|
+
}
|
|
3997
|
+
.sidebar-nav-btn svg {
|
|
3998
|
+
width: 16px;
|
|
3999
|
+
height: 16px;
|
|
4000
|
+
flex-shrink: 0;
|
|
4001
|
+
color: var(--color-text-primary);
|
|
4002
|
+
transition: color .12s, opacity .12s;
|
|
3452
4003
|
}
|
|
3453
|
-
.sidebar-nav-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
|
|
3454
|
-
.sidebar-nav-btn.active { background: var(--color-bg-hover); color: var(--color-accent-primary); }
|
|
3455
|
-
.sidebar-nav-btn svg { flex-shrink: 0; }
|
|
3456
4004
|
|
|
3457
4005
|
/* ── Settings panel ──────────────────────────────────────────────────────── */
|
|
3458
4006
|
#settings-panel {
|
|
@@ -3594,6 +4142,38 @@ body {
|
|
|
3594
4142
|
line-height: 1.5;
|
|
3595
4143
|
margin: 0;
|
|
3596
4144
|
}
|
|
4145
|
+
|
|
4146
|
+
/* ── Backup section ── */
|
|
4147
|
+
.backup-option,
|
|
4148
|
+
.backup-auto-label {
|
|
4149
|
+
font-size: 0.8125rem;
|
|
4150
|
+
color: var(--color-text-primary);
|
|
4151
|
+
display: flex;
|
|
4152
|
+
align-items: center;
|
|
4153
|
+
gap: 0.375rem;
|
|
4154
|
+
}
|
|
4155
|
+
.backup-option {
|
|
4156
|
+
margin: 0.75rem 0;
|
|
4157
|
+
}
|
|
4158
|
+
.backup-auto-row {
|
|
4159
|
+
display: flex;
|
|
4160
|
+
align-items: center;
|
|
4161
|
+
gap: 0.625rem;
|
|
4162
|
+
margin: 0.75rem 0;
|
|
4163
|
+
flex-wrap: wrap;
|
|
4164
|
+
}
|
|
4165
|
+
.backup-auto-hint {
|
|
4166
|
+
font-size: 0.75rem;
|
|
4167
|
+
color: var(--color-text-secondary);
|
|
4168
|
+
}
|
|
4169
|
+
.backup-actions {
|
|
4170
|
+
display: flex;
|
|
4171
|
+
align-items: center;
|
|
4172
|
+
gap: 0.75rem;
|
|
4173
|
+
margin: 0.75rem 0;
|
|
4174
|
+
flex-wrap: wrap;
|
|
4175
|
+
}
|
|
4176
|
+
|
|
3597
4177
|
.settings-network-url {
|
|
3598
4178
|
display: flex;
|
|
3599
4179
|
flex-direction: column;
|
|
@@ -4168,7 +4748,7 @@ body {
|
|
|
4168
4748
|
position: fixed;
|
|
4169
4749
|
inset: 0;
|
|
4170
4750
|
z-index: 1000;
|
|
4171
|
-
background: rgba(0, 0, 0, 0.
|
|
4751
|
+
background: rgba(0, 0, 0, 0.55);
|
|
4172
4752
|
display: flex;
|
|
4173
4753
|
align-items: center;
|
|
4174
4754
|
justify-content: center;
|
|
@@ -4190,19 +4770,18 @@ body {
|
|
|
4190
4770
|
}
|
|
4191
4771
|
.model-edit-modal-content {
|
|
4192
4772
|
max-width: 500px;
|
|
4193
|
-
overflow-y: auto;
|
|
4194
4773
|
}
|
|
4195
4774
|
.model-edit-modal-content .modal-body {
|
|
4196
|
-
overflow-y:
|
|
4775
|
+
overflow-y: auto;
|
|
4197
4776
|
}
|
|
4198
|
-
.modal-header {
|
|
4777
|
+
.modal-content .modal-header {
|
|
4199
4778
|
display: flex;
|
|
4200
4779
|
align-items: center;
|
|
4201
4780
|
justify-content: space-between;
|
|
4202
4781
|
padding: 1rem 1.25rem;
|
|
4203
4782
|
border-bottom: 1px solid var(--color-border-primary);
|
|
4204
4783
|
}
|
|
4205
|
-
.modal-header h3 {
|
|
4784
|
+
.modal-content .modal-header h3 {
|
|
4206
4785
|
margin: 0;
|
|
4207
4786
|
font-size: 1.0625rem;
|
|
4208
4787
|
font-weight: 600;
|
|
@@ -4225,20 +4804,20 @@ body {
|
|
|
4225
4804
|
background: var(--color-bg-hover);
|
|
4226
4805
|
color: var(--color-text-primary);
|
|
4227
4806
|
}
|
|
4228
|
-
.modal-body {
|
|
4229
|
-
padding: 1.25rem;
|
|
4807
|
+
.modal-content .modal-body {
|
|
4230
4808
|
overflow-y: auto;
|
|
4231
4809
|
display: flex;
|
|
4232
4810
|
flex-direction: column;
|
|
4233
4811
|
gap: 0.875rem;
|
|
4812
|
+
padding: 1.25rem;
|
|
4234
4813
|
}
|
|
4235
|
-
.modal-footer {
|
|
4814
|
+
.modal-content .modal-footer {
|
|
4236
4815
|
display: flex;
|
|
4237
4816
|
align-items: center;
|
|
4238
4817
|
justify-content: flex-end;
|
|
4239
4818
|
gap: 0.625rem;
|
|
4240
|
-
padding: 1rem 1.25rem;
|
|
4241
4819
|
border-top: 1px solid var(--color-border-primary);
|
|
4820
|
+
padding: 0.875rem 1.25rem;
|
|
4242
4821
|
}
|
|
4243
4822
|
.btn-secondary {
|
|
4244
4823
|
display: inline-flex;
|
|
@@ -4260,7 +4839,7 @@ body {
|
|
|
4260
4839
|
}
|
|
4261
4840
|
|
|
4262
4841
|
/* ── Directory Picker Modal (tree-based) ─────────────────────────────────── */
|
|
4263
|
-
.modal-title {
|
|
4842
|
+
.modal-content .modal-title {
|
|
4264
4843
|
padding: 1rem 1.25rem;
|
|
4265
4844
|
border-bottom: 1px solid var(--color-border-primary);
|
|
4266
4845
|
font-size: 1.0625rem;
|
|
@@ -4293,6 +4872,19 @@ body {
|
|
|
4293
4872
|
.dir-picker-input::placeholder {
|
|
4294
4873
|
color: var(--color-text-tertiary);
|
|
4295
4874
|
}
|
|
4875
|
+
.dp-hidden-toggle {
|
|
4876
|
+
display: flex;
|
|
4877
|
+
align-items: center;
|
|
4878
|
+
gap: 0.375rem;
|
|
4879
|
+
font-size: 0.8125rem;
|
|
4880
|
+
color: var(--color-text-secondary);
|
|
4881
|
+
cursor: pointer;
|
|
4882
|
+
user-select: none;
|
|
4883
|
+
}
|
|
4884
|
+
.dp-hidden-toggle input {
|
|
4885
|
+
cursor: pointer;
|
|
4886
|
+
margin: 0;
|
|
4887
|
+
}
|
|
4296
4888
|
/* Preset buttons row */
|
|
4297
4889
|
.dp-presets {
|
|
4298
4890
|
display: flex;
|
|
@@ -4303,6 +4895,16 @@ body {
|
|
|
4303
4895
|
padding: 0.25rem 0.625rem;
|
|
4304
4896
|
font-size: 0.75rem;
|
|
4305
4897
|
}
|
|
4898
|
+
.dp-up-btn {
|
|
4899
|
+
display: inline-flex;
|
|
4900
|
+
align-items: center;
|
|
4901
|
+
gap: 0.25rem;
|
|
4902
|
+
}
|
|
4903
|
+
.dp-up-btn svg { flex-shrink: 0; }
|
|
4904
|
+
.dp-up-btn:disabled {
|
|
4905
|
+
opacity: 0.45;
|
|
4906
|
+
cursor: not-allowed;
|
|
4907
|
+
}
|
|
4306
4908
|
/* Path input container */
|
|
4307
4909
|
.dp-path-container {
|
|
4308
4910
|
flex-shrink: 0;
|
|
@@ -4433,16 +5035,27 @@ body {
|
|
|
4433
5035
|
position: relative;
|
|
4434
5036
|
display: flex;
|
|
4435
5037
|
gap: 0;
|
|
4436
|
-
|
|
5038
|
+
border: 1px solid var(--color-border-primary);
|
|
5039
|
+
border-radius: 7px;
|
|
5040
|
+
transition: border-color .15s, box-shadow .15s;
|
|
5041
|
+
}
|
|
5042
|
+
.model-name-combobox:focus-within {
|
|
5043
|
+
border-color: var(--color-accent-primary);
|
|
5044
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
|
|
5045
|
+
}
|
|
4437
5046
|
.model-name-combobox .model-name-input {
|
|
4438
5047
|
flex: 1;
|
|
4439
|
-
border
|
|
4440
|
-
border-
|
|
4441
|
-
|
|
5048
|
+
border: none;
|
|
5049
|
+
border-radius: 7px 0 0 7px;
|
|
5050
|
+
background: transparent;
|
|
5051
|
+
}
|
|
5052
|
+
.model-name-combobox .model-name-input:focus {
|
|
5053
|
+
box-shadow: none;
|
|
4442
5054
|
}
|
|
4443
5055
|
.model-name-combobox .model-name-dropdown-btn {
|
|
4444
5056
|
background: var(--color-bg-primary);
|
|
4445
|
-
border:
|
|
5057
|
+
border: none;
|
|
5058
|
+
border-left: 1px solid var(--color-border-primary);
|
|
4446
5059
|
border-top-right-radius: 6px;
|
|
4447
5060
|
border-bottom-right-radius: 6px;
|
|
4448
5061
|
color: var(--color-text-secondary);
|
|
@@ -4498,16 +5111,27 @@ body {
|
|
|
4498
5111
|
position: relative;
|
|
4499
5112
|
display: flex;
|
|
4500
5113
|
gap: 0;
|
|
5114
|
+
border: 1px solid var(--color-border-primary);
|
|
5115
|
+
border-radius: 7px;
|
|
5116
|
+
transition: border-color .15s, box-shadow .15s;
|
|
5117
|
+
}
|
|
5118
|
+
.base-url-combobox:focus-within {
|
|
5119
|
+
border-color: var(--color-accent-primary);
|
|
5120
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
|
|
4501
5121
|
}
|
|
4502
5122
|
.base-url-combobox .base-url-input {
|
|
4503
5123
|
flex: 1;
|
|
4504
|
-
border
|
|
4505
|
-
border-
|
|
4506
|
-
|
|
5124
|
+
border: none;
|
|
5125
|
+
border-radius: 7px 0 0 7px;
|
|
5126
|
+
background: transparent;
|
|
5127
|
+
}
|
|
5128
|
+
.base-url-combobox .base-url-input:focus {
|
|
5129
|
+
box-shadow: none;
|
|
4507
5130
|
}
|
|
4508
5131
|
.base-url-combobox .base-url-dropdown-btn {
|
|
4509
5132
|
background: var(--color-bg-primary);
|
|
4510
|
-
border:
|
|
5133
|
+
border: none;
|
|
5134
|
+
border-left: 1px solid var(--color-border-primary);
|
|
4511
5135
|
border-top-right-radius: 6px;
|
|
4512
5136
|
border-bottom-right-radius: 6px;
|
|
4513
5137
|
color: var(--color-text-secondary);
|
|
@@ -4605,22 +5229,35 @@ body {
|
|
|
4605
5229
|
.modal-overlay {
|
|
4606
5230
|
position: fixed;
|
|
4607
5231
|
inset: 0;
|
|
4608
|
-
background:
|
|
5232
|
+
background: var(--color-bg-overlay);
|
|
5233
|
+
-webkit-backdrop-filter: blur(2px);
|
|
5234
|
+
backdrop-filter: blur(2px);
|
|
4609
5235
|
display: flex;
|
|
4610
5236
|
align-items: center;
|
|
4611
5237
|
justify-content: center;
|
|
4612
5238
|
z-index: 100;
|
|
5239
|
+
animation: modal-overlay-in var(--transition-base);
|
|
5240
|
+
}
|
|
5241
|
+
@keyframes modal-overlay-in {
|
|
5242
|
+
from { opacity: 0; }
|
|
5243
|
+
to { opacity: 1; }
|
|
4613
5244
|
}
|
|
4614
5245
|
.modal-box {
|
|
4615
5246
|
background: var(--color-bg-secondary);
|
|
4616
5247
|
border: 1px solid var(--color-border-primary);
|
|
4617
|
-
border-radius:
|
|
5248
|
+
border-radius: var(--radius-lg);
|
|
5249
|
+
box-shadow: var(--shadow-lg);
|
|
4618
5250
|
padding: 1.5rem;
|
|
4619
5251
|
width: 90%;
|
|
5252
|
+
animation: modal-box-in var(--transition-slow);
|
|
5253
|
+
}
|
|
5254
|
+
@keyframes modal-box-in {
|
|
5255
|
+
from { opacity: 0; transform: translateY(12px) scale(0.98); }
|
|
5256
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4620
5257
|
}
|
|
4621
5258
|
.modal-box.sm { max-width: 30rem; }
|
|
4622
5259
|
.modal-box.lg { max-width: 42.5rem; }
|
|
4623
|
-
.modal-title
|
|
5260
|
+
.modal-box .modal-title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
|
|
4624
5261
|
.modal-confirm-message {
|
|
4625
5262
|
font-size: 0.9375rem;
|
|
4626
5263
|
line-height: 1.6;
|
|
@@ -4634,11 +5271,12 @@ body {
|
|
|
4634
5271
|
justify-content: flex-end;
|
|
4635
5272
|
margin-top: 1rem;
|
|
4636
5273
|
}
|
|
4637
|
-
.btn-primary { background: var(--color-button-primary); color: #fff; border: none; border-radius:
|
|
4638
|
-
.btn-primary:hover { background: var(--color-button-primary-hover); }
|
|
4639
|
-
.btn-
|
|
4640
|
-
.btn-secondary
|
|
4641
|
-
|
|
5274
|
+
.btn-primary { background: var(--color-button-primary); color: #fff; border: none; border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-xs); transition: background var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
|
|
5275
|
+
.btn-primary:hover { background: var(--color-button-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
|
|
5276
|
+
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
|
|
5277
|
+
.btn-secondary { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-sm); padding: 0.5rem 1.25rem; font-weight: 500; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); }
|
|
5278
|
+
.btn-secondary:hover { background: var(--color-bg-hover); border-color: var(--color-border-strong); color: var(--color-text-primary); }
|
|
5279
|
+
[data-theme="dark"] .btn-secondary:hover { background: var(--color-bg-hover); }
|
|
4642
5280
|
.btn-danger { background: var(--color-error); color: #fff; border: none; border-radius: 0.375rem; padding: 0.5rem 1.25rem; cursor: pointer; }
|
|
4643
5281
|
.btn-danger:hover { background: var(--color-error); }
|
|
4644
5282
|
|
|
@@ -4743,12 +5381,28 @@ body {
|
|
|
4743
5381
|
/* New Session Modal */
|
|
4744
5382
|
.new-session-modal {
|
|
4745
5383
|
max-width: 32.5rem;
|
|
5384
|
+
padding: 1.25rem 1.25rem 1rem;
|
|
5385
|
+
}
|
|
5386
|
+
.new-session-modal .modal-header {
|
|
5387
|
+
display: flex;
|
|
5388
|
+
align-items: center;
|
|
5389
|
+
margin-bottom: 0.875rem;
|
|
5390
|
+
}
|
|
5391
|
+
.new-session-modal .modal-title {
|
|
5392
|
+
font-size: 1rem;
|
|
5393
|
+
font-weight: 600;
|
|
5394
|
+
margin: 0;
|
|
5395
|
+
padding: 0;
|
|
5396
|
+
border: none;
|
|
5397
|
+
color: var(--color-text-primary);
|
|
4746
5398
|
}
|
|
4747
|
-
.modal-header {
|
|
5399
|
+
.modal-box .modal-header {
|
|
4748
5400
|
display: flex;
|
|
4749
5401
|
align-items: center;
|
|
4750
5402
|
justify-content: space-between;
|
|
4751
|
-
|
|
5403
|
+
padding: 0 0 0.75rem;
|
|
5404
|
+
margin-bottom: 0.75rem;
|
|
5405
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
4752
5406
|
}
|
|
4753
5407
|
.modal-close-btn {
|
|
4754
5408
|
background: transparent;
|
|
@@ -4767,7 +5421,7 @@ body {
|
|
|
4767
5421
|
.modal-close-btn:hover {
|
|
4768
5422
|
color: var(--color-text-primary);
|
|
4769
5423
|
}
|
|
4770
|
-
.modal-body {
|
|
5424
|
+
.modal-box .modal-body {
|
|
4771
5425
|
display: flex;
|
|
4772
5426
|
flex-direction: column;
|
|
4773
5427
|
gap: 1rem;
|
|
@@ -4787,18 +5441,26 @@ body {
|
|
|
4787
5441
|
margin-left: 2px;
|
|
4788
5442
|
}
|
|
4789
5443
|
.modal-input, .modal-select {
|
|
4790
|
-
background: var(--color-bg-
|
|
5444
|
+
background: var(--color-bg-input);
|
|
4791
5445
|
border: 1px solid var(--color-border-primary);
|
|
4792
|
-
border-radius:
|
|
5446
|
+
border-radius: var(--radius-sm);
|
|
4793
5447
|
color: var(--color-text-primary);
|
|
4794
5448
|
padding: 0.5625rem 0.75rem;
|
|
4795
5449
|
font-size: 0.8125rem;
|
|
4796
5450
|
font-family: inherit;
|
|
4797
5451
|
width: 100%;
|
|
5452
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
5453
|
+
}
|
|
5454
|
+
.modal-input:hover, .modal-select:hover {
|
|
5455
|
+
border-color: var(--color-border-strong);
|
|
4798
5456
|
}
|
|
4799
5457
|
.modal-input:focus, .modal-select:focus {
|
|
4800
5458
|
outline: none;
|
|
4801
5459
|
border-color: var(--color-accent-primary);
|
|
5460
|
+
box-shadow: 0 0 0 3px var(--color-accent-soft);
|
|
5461
|
+
}
|
|
5462
|
+
.modal-input::placeholder {
|
|
5463
|
+
color: var(--color-text-muted);
|
|
4802
5464
|
}
|
|
4803
5465
|
.modal-input.input-error {
|
|
4804
5466
|
border-color: var(--color-error);
|
|
@@ -4830,6 +5492,14 @@ body {
|
|
|
4830
5492
|
}
|
|
4831
5493
|
.modal-browse-btn:hover {
|
|
4832
5494
|
background: var(--color-bg-hover);
|
|
5495
|
+
border-color: var(--color-border-strong);
|
|
5496
|
+
color: var(--color-accent-primary);
|
|
5497
|
+
}
|
|
5498
|
+
.modal-browse-btn {
|
|
5499
|
+
display: inline-flex;
|
|
5500
|
+
align-items: center;
|
|
5501
|
+
justify-content: center;
|
|
5502
|
+
color: var(--color-text-secondary);
|
|
4833
5503
|
}
|
|
4834
5504
|
.modal-field-checkbox {
|
|
4835
5505
|
display: flex;
|
|
@@ -4850,6 +5520,13 @@ body {
|
|
|
4850
5520
|
cursor: pointer;
|
|
4851
5521
|
accent-color: var(--color-accent-primary);
|
|
4852
5522
|
}
|
|
5523
|
+
.new-session-modal .modal-body {
|
|
5524
|
+
gap: 0.75rem;
|
|
5525
|
+
}
|
|
5526
|
+
.new-session-modal .modal-footer {
|
|
5527
|
+
margin-top: 1rem;
|
|
5528
|
+
padding-top: 1rem;
|
|
5529
|
+
}
|
|
4853
5530
|
.modal-footer {
|
|
4854
5531
|
display: flex;
|
|
4855
5532
|
gap: 0.625rem;
|
|
@@ -5363,29 +6040,6 @@ body {
|
|
|
5363
6040
|
cursor: help;
|
|
5364
6041
|
flex-shrink: 0;
|
|
5365
6042
|
}
|
|
5366
|
-
.skill-warn-icon::after {
|
|
5367
|
-
content: attr(data-tooltip);
|
|
5368
|
-
position: absolute;
|
|
5369
|
-
left: 0;
|
|
5370
|
-
top: calc(100% + 0.375rem);
|
|
5371
|
-
width: 16.25rem;
|
|
5372
|
-
background: var(--color-bg-elevated, #fff);
|
|
5373
|
-
color: var(--color-text, #333);
|
|
5374
|
-
border: 1px solid var(--color-border, #e0e0e0);
|
|
5375
|
-
border-radius: 6px;
|
|
5376
|
-
padding: 0.5rem 0.625rem;
|
|
5377
|
-
font-size: 0.7188rem;
|
|
5378
|
-
line-height: 1.6;
|
|
5379
|
-
white-space: pre-wrap;
|
|
5380
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
5381
|
-
z-index: 100;
|
|
5382
|
-
pointer-events: none;
|
|
5383
|
-
opacity: 0;
|
|
5384
|
-
transition: opacity 0.15s;
|
|
5385
|
-
}
|
|
5386
|
-
.skill-warn-icon:hover::after {
|
|
5387
|
-
opacity: 1;
|
|
5388
|
-
}
|
|
5389
6043
|
|
|
5390
6044
|
/* ── Toggle Switch ───────────────────────────────────────────────────────── */
|
|
5391
6045
|
.skill-toggle {
|
|
@@ -5395,42 +6049,10 @@ body {
|
|
|
5395
6049
|
cursor: pointer;
|
|
5396
6050
|
flex-shrink: 0;
|
|
5397
6051
|
}
|
|
5398
|
-
.skill-toggle::after {
|
|
5399
|
-
content: attr(data-tooltip);
|
|
5400
|
-
position: absolute;
|
|
5401
|
-
right: 0;
|
|
5402
|
-
bottom: calc(100% + 0.5rem);
|
|
5403
|
-
width: max-content;
|
|
5404
|
-
max-width: 17.5rem;
|
|
5405
|
-
background: var(--color-bg-elevated, #fff);
|
|
5406
|
-
color: var(--color-text, #333);
|
|
5407
|
-
border: 1px solid var(--color-border, #e0e0e0);
|
|
5408
|
-
border-radius: 6px;
|
|
5409
|
-
padding: 0.5rem 0.625rem;
|
|
5410
|
-
font-size: 0.7188rem;
|
|
5411
|
-
line-height: 1.6;
|
|
5412
|
-
white-space: pre-wrap;
|
|
5413
|
-
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
5414
|
-
z-index: 100;
|
|
5415
|
-
pointer-events: none;
|
|
5416
|
-
opacity: 0;
|
|
5417
|
-
transition: opacity 0.15s;
|
|
5418
|
-
}
|
|
5419
|
-
.skill-toggle:hover::after {
|
|
5420
|
-
opacity: 1;
|
|
5421
|
-
}
|
|
5422
|
-
/* Flip tooltip below when near top of scroll container */
|
|
5423
|
-
.skill-toggle-flip::after {
|
|
5424
|
-
bottom: auto;
|
|
5425
|
-
top: calc(100% + 8px);
|
|
5426
|
-
}
|
|
5427
6052
|
.skill-toggle-disabled {
|
|
5428
6053
|
cursor: not-allowed;
|
|
5429
6054
|
opacity: 0.4;
|
|
5430
6055
|
}
|
|
5431
|
-
.skill-toggle-disabled:hover::after {
|
|
5432
|
-
opacity: 1; /* Still show tooltip for disabled toggles */
|
|
5433
|
-
}
|
|
5434
6056
|
.skill-toggle-input {
|
|
5435
6057
|
opacity: 0;
|
|
5436
6058
|
width: 0;
|
|
@@ -5941,6 +6563,24 @@ body {
|
|
|
5941
6563
|
background: var(--color-success-bg);
|
|
5942
6564
|
}
|
|
5943
6565
|
|
|
6566
|
+
/* ── Delete button ────────────────────────────────────────────────────────── */
|
|
6567
|
+
.btn-skill-delete {
|
|
6568
|
+
background: transparent;
|
|
6569
|
+
border: 1px solid transparent;
|
|
6570
|
+
border-radius: 6px;
|
|
6571
|
+
color: var(--color-text-tertiary);
|
|
6572
|
+
cursor: pointer;
|
|
6573
|
+
padding: 0.25rem;
|
|
6574
|
+
display: inline-flex;
|
|
6575
|
+
align-items: center;
|
|
6576
|
+
transition: color .15s, border-color .15s, background .15s;
|
|
6577
|
+
}
|
|
6578
|
+
.btn-skill-delete:hover {
|
|
6579
|
+
color: var(--color-error, #c0392b);
|
|
6580
|
+
border-color: var(--color-error-border, #f5c6c6);
|
|
6581
|
+
background: var(--color-error-bg, #fff0f0);
|
|
6582
|
+
}
|
|
6583
|
+
|
|
5944
6584
|
/* ── Skills sidebar section ──────────────────────────────────────────────── */
|
|
5945
6585
|
#skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
|
|
5946
6586
|
|
|
@@ -5968,8 +6608,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
5968
6608
|
inset: 0;
|
|
5969
6609
|
z-index: 500;
|
|
5970
6610
|
display: flex;
|
|
5971
|
-
|
|
5972
|
-
justify-content: center;
|
|
6611
|
+
flex-direction: column;
|
|
5973
6612
|
overflow-y: auto;
|
|
5974
6613
|
/* Reserve scrollbar space always so card doesn't shift when scrollbar appears */
|
|
5975
6614
|
scrollbar-gutter: stable;
|
|
@@ -5998,6 +6637,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
5998
6637
|
min-height: 21.25rem;
|
|
5999
6638
|
/* Dropdown must overflow the card boundary */
|
|
6000
6639
|
overflow: visible;
|
|
6640
|
+
margin: auto;
|
|
6641
|
+
flex-shrink: 0;
|
|
6001
6642
|
}
|
|
6002
6643
|
[data-theme="dark"] #setup-card {
|
|
6003
6644
|
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
|
|
@@ -6149,7 +6790,11 @@ body.setup-mode[data-theme="dark"] {
|
|
|
6149
6790
|
.setup-field {
|
|
6150
6791
|
display: flex;
|
|
6151
6792
|
flex-direction: column;
|
|
6152
|
-
gap: 0.
|
|
6793
|
+
gap: 0.375rem;
|
|
6794
|
+
margin-bottom: 0.875rem;
|
|
6795
|
+
}
|
|
6796
|
+
.setup-field:last-of-type {
|
|
6797
|
+
margin-bottom: 0;
|
|
6153
6798
|
}
|
|
6154
6799
|
.setup-label {
|
|
6155
6800
|
font-size: 0.6875rem;
|
|
@@ -6189,114 +6834,317 @@ body.setup-mode[data-theme="dark"] {
|
|
|
6189
6834
|
.setup-test-result.result-ok { color: var(--color-success); }
|
|
6190
6835
|
.setup-test-result.result-fail { color: var(--color-error); }
|
|
6191
6836
|
|
|
6192
|
-
/*
|
|
6193
|
-
|
|
6837
|
+
/* ── Device-login (primary onboarding path) ─────────────────────────────── */
|
|
6838
|
+
#setup-device-block {
|
|
6839
|
+
margin-bottom: 0.75rem;
|
|
6840
|
+
}
|
|
6841
|
+
.setup-device-card {
|
|
6842
|
+
border: 1px solid var(--color-accent-primary);
|
|
6843
|
+
border-radius: 12px;
|
|
6844
|
+
padding: 1rem 1.125rem 1.125rem;
|
|
6845
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-primary) 6%, transparent), transparent);
|
|
6846
|
+
}
|
|
6847
|
+
.setup-device-card-head {
|
|
6194
6848
|
display: flex;
|
|
6849
|
+
align-items: center;
|
|
6195
6850
|
gap: 0.5rem;
|
|
6196
|
-
margin-
|
|
6197
|
-
}
|
|
6198
|
-
|
|
6199
|
-
.setup-back-btn {
|
|
6200
|
-
flex-shrink: 0;
|
|
6201
|
-
background: transparent;
|
|
6202
|
-
color: var(--color-text-secondary);
|
|
6203
|
-
border: 1.5px solid var(--color-border-primary);
|
|
6204
|
-
border-radius: 8px;
|
|
6205
|
-
padding: 0.5625rem 0.875rem;
|
|
6206
|
-
font-size: 0.8125rem;
|
|
6207
|
-
font-weight: 600;
|
|
6208
|
-
cursor: pointer;
|
|
6209
|
-
white-space: nowrap;
|
|
6210
|
-
transition: border-color .15s, color .15s;
|
|
6851
|
+
margin-bottom: 0.5rem;
|
|
6211
6852
|
}
|
|
6212
|
-
.setup-
|
|
6213
|
-
|
|
6853
|
+
.setup-device-card-title {
|
|
6854
|
+
font-size: 0.9375rem;
|
|
6855
|
+
font-weight: 700;
|
|
6214
6856
|
color: var(--color-text-primary);
|
|
6215
6857
|
}
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6858
|
+
.setup-device-card-badge {
|
|
6859
|
+
font-size: 0.625rem;
|
|
6860
|
+
font-weight: 600;
|
|
6861
|
+
padding: 1px 0.375rem;
|
|
6862
|
+
border-radius: 4px;
|
|
6220
6863
|
background: var(--color-accent-primary);
|
|
6221
6864
|
color: #fff;
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6865
|
+
letter-spacing: 0.3px;
|
|
6866
|
+
line-height: 1.6;
|
|
6867
|
+
}
|
|
6868
|
+
.setup-device-card-lead {
|
|
6869
|
+
font-size: 0.8125rem;
|
|
6226
6870
|
font-weight: 600;
|
|
6227
|
-
|
|
6228
|
-
|
|
6871
|
+
color: var(--color-text-primary);
|
|
6872
|
+
margin: 0 0 0.625rem;
|
|
6873
|
+
line-height: 1.5;
|
|
6229
6874
|
}
|
|
6230
|
-
.setup-
|
|
6231
|
-
|
|
6232
|
-
|
|
6233
|
-
|
|
6234
|
-
#onboard-panel {
|
|
6235
|
-
flex: 1;
|
|
6236
|
-
display: flex;
|
|
6237
|
-
align-items: center;
|
|
6238
|
-
justify-content: center;
|
|
6239
|
-
overflow-y: auto;
|
|
6240
|
-
padding: 2.5rem 1.25rem;
|
|
6875
|
+
.setup-device-card-points {
|
|
6876
|
+
list-style: none;
|
|
6877
|
+
margin: 0 0 0.875rem;
|
|
6878
|
+
padding: 0;
|
|
6241
6879
|
}
|
|
6242
|
-
|
|
6243
|
-
|
|
6880
|
+
.setup-device-card-points li {
|
|
6881
|
+
position: relative;
|
|
6882
|
+
font-size: 0.75rem;
|
|
6883
|
+
line-height: 1.6;
|
|
6884
|
+
color: var(--color-text-secondary);
|
|
6885
|
+
padding-left: 1rem;
|
|
6886
|
+
}
|
|
6887
|
+
.setup-device-card-points li::before {
|
|
6888
|
+
content: "✓";
|
|
6889
|
+
position: absolute;
|
|
6890
|
+
left: 0;
|
|
6891
|
+
color: var(--color-accent-primary);
|
|
6892
|
+
font-weight: 700;
|
|
6893
|
+
}
|
|
6894
|
+
.setup-device-btn {
|
|
6244
6895
|
width: 100%;
|
|
6245
|
-
max-width: 30rem;
|
|
6246
|
-
display: flex;
|
|
6247
|
-
flex-direction: column;
|
|
6248
|
-
align-items: center;
|
|
6249
|
-
gap: 0.5rem;
|
|
6250
6896
|
}
|
|
6251
|
-
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
margin-bottom: 0.25rem;
|
|
6897
|
+
#setup-device-pending {
|
|
6898
|
+
text-align: center;
|
|
6899
|
+
margin-top: 0.75rem;
|
|
6255
6900
|
}
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6259
|
-
|
|
6901
|
+
.setup-device-spinner {
|
|
6902
|
+
width: 22px;
|
|
6903
|
+
height: 22px;
|
|
6904
|
+
margin: 0 auto 0.5rem;
|
|
6905
|
+
border: 2.5px solid var(--color-border-primary);
|
|
6906
|
+
border-top-color: var(--color-accent, var(--accent, #6366f1));
|
|
6907
|
+
border-radius: 50%;
|
|
6908
|
+
animation: setup-device-spin 0.8s linear infinite;
|
|
6909
|
+
}
|
|
6910
|
+
@keyframes setup-device-spin { to { transform: rotate(360deg); } }
|
|
6911
|
+
.setup-device-pending-text {
|
|
6912
|
+
font-size: 0.8125rem;
|
|
6260
6913
|
color: var(--color-text-primary);
|
|
6261
|
-
|
|
6914
|
+
margin: 0 0 0.25rem;
|
|
6262
6915
|
}
|
|
6263
|
-
|
|
6264
|
-
|
|
6265
|
-
font-size: 0.875rem;
|
|
6916
|
+
.setup-device-code {
|
|
6917
|
+
font-size: 0.8125rem;
|
|
6266
6918
|
color: var(--color-text-secondary);
|
|
6267
|
-
|
|
6268
|
-
margin-bottom: 0.5rem;
|
|
6919
|
+
margin: 0 0 0.5rem;
|
|
6269
6920
|
}
|
|
6270
|
-
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
display: flex;
|
|
6274
|
-
align-items: center;
|
|
6275
|
-
gap: 0;
|
|
6276
|
-
margin: 1rem 0 1.5rem;
|
|
6921
|
+
.setup-device-code strong {
|
|
6922
|
+
letter-spacing: 0.1em;
|
|
6923
|
+
color: var(--color-text-primary);
|
|
6277
6924
|
}
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
width: 1.75rem;
|
|
6281
|
-
height: 1.75rem;
|
|
6282
|
-
border-radius: 50%;
|
|
6283
|
-
background: var(--color-border-secondary);
|
|
6284
|
-
border: 2px solid var(--color-border-primary);
|
|
6285
|
-
color: var(--color-text-secondary);
|
|
6925
|
+
.setup-device-reopen {
|
|
6926
|
+
display: inline-block;
|
|
6286
6927
|
font-size: 0.75rem;
|
|
6287
|
-
|
|
6928
|
+
color: var(--color-accent, var(--accent, #6366f1));
|
|
6929
|
+
text-decoration: none;
|
|
6930
|
+
margin-right: 0.75rem;
|
|
6931
|
+
}
|
|
6932
|
+
.setup-device-success {
|
|
6933
|
+
margin-top: 0.75rem;
|
|
6934
|
+
border: 1px solid var(--color-accent-primary);
|
|
6935
|
+
border-radius: 12px;
|
|
6936
|
+
padding: 1rem 1.125rem 1.125rem;
|
|
6937
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-primary) 8%, transparent), transparent);
|
|
6938
|
+
}
|
|
6939
|
+
.setup-device-success-head {
|
|
6288
6940
|
display: flex;
|
|
6289
6941
|
align-items: center;
|
|
6290
|
-
|
|
6291
|
-
|
|
6942
|
+
gap: 0.5rem;
|
|
6943
|
+
margin-bottom: 0.5rem;
|
|
6292
6944
|
}
|
|
6293
|
-
|
|
6294
|
-
|
|
6945
|
+
.setup-device-success-icon {
|
|
6946
|
+
width: 22px;
|
|
6947
|
+
height: 22px;
|
|
6948
|
+
display: inline-flex;
|
|
6949
|
+
align-items: center;
|
|
6950
|
+
justify-content: center;
|
|
6295
6951
|
background: var(--color-accent-primary);
|
|
6296
|
-
border-color: var(--color-accent-primary);
|
|
6297
6952
|
color: #fff;
|
|
6298
|
-
|
|
6299
|
-
|
|
6953
|
+
border-radius: 50%;
|
|
6954
|
+
font-size: 0.75rem;
|
|
6955
|
+
font-weight: 700;
|
|
6956
|
+
}
|
|
6957
|
+
.setup-device-success-title {
|
|
6958
|
+
font-size: 0.9375rem;
|
|
6959
|
+
font-weight: 700;
|
|
6960
|
+
color: var(--color-text-primary);
|
|
6961
|
+
}
|
|
6962
|
+
.setup-device-success-lead {
|
|
6963
|
+
font-size: 0.8125rem;
|
|
6964
|
+
color: var(--color-text-primary);
|
|
6965
|
+
margin: 0 0 0.625rem;
|
|
6966
|
+
line-height: 1.5;
|
|
6967
|
+
}
|
|
6968
|
+
.setup-device-success-points {
|
|
6969
|
+
list-style: none;
|
|
6970
|
+
margin: 0 0 0.875rem;
|
|
6971
|
+
padding: 0;
|
|
6972
|
+
}
|
|
6973
|
+
.setup-device-success-points li {
|
|
6974
|
+
font-size: 0.75rem;
|
|
6975
|
+
line-height: 1.6;
|
|
6976
|
+
color: var(--color-text-secondary);
|
|
6977
|
+
margin-bottom: 0.25rem;
|
|
6978
|
+
}
|
|
6979
|
+
.setup-device-success-points li strong {
|
|
6980
|
+
color: var(--color-text-primary);
|
|
6981
|
+
font-weight: 600;
|
|
6982
|
+
margin-right: 0.25rem;
|
|
6983
|
+
}
|
|
6984
|
+
.setup-device-success-points li.setup-device-success-note {
|
|
6985
|
+
margin-top: 0.5rem;
|
|
6986
|
+
padding: 0.5rem 0.625rem;
|
|
6987
|
+
background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
|
|
6988
|
+
border-radius: 6px;
|
|
6989
|
+
color: var(--color-text-secondary);
|
|
6990
|
+
font-style: normal;
|
|
6991
|
+
}
|
|
6992
|
+
#setup-btn-device-continue {
|
|
6993
|
+
display: block;
|
|
6994
|
+
width: 100%;
|
|
6995
|
+
margin-top: 0.75rem;
|
|
6996
|
+
padding: 0.875rem 1.5rem;
|
|
6997
|
+
font-size: 1rem;
|
|
6998
|
+
font-weight: 700;
|
|
6999
|
+
border: none;
|
|
7000
|
+
border-radius: 12px;
|
|
7001
|
+
background: var(--color-accent-primary);
|
|
7002
|
+
color: #fff;
|
|
7003
|
+
cursor: pointer;
|
|
7004
|
+
letter-spacing: 0.01em;
|
|
7005
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 6px 16px color-mix(in srgb, var(--color-accent-primary) 28%, transparent);
|
|
7006
|
+
transition: background .15s, transform .08s, box-shadow .15s;
|
|
7007
|
+
}
|
|
7008
|
+
#setup-btn-device-continue:hover {
|
|
7009
|
+
background: color-mix(in srgb, var(--color-accent-primary) 88%, black);
|
|
7010
|
+
box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px color-mix(in srgb, var(--color-accent-primary) 36%, transparent);
|
|
7011
|
+
}
|
|
7012
|
+
#setup-btn-device-continue:active {
|
|
7013
|
+
transform: translateY(1px);
|
|
7014
|
+
}
|
|
7015
|
+
#setup-device-error {
|
|
7016
|
+
margin-top: 0.5rem;
|
|
7017
|
+
}
|
|
7018
|
+
#setup-device-error.result-fail { color: var(--color-error); }
|
|
7019
|
+
|
|
7020
|
+
/* Manual-config collapsible (secondary path) */
|
|
7021
|
+
#setup-manual-details {
|
|
7022
|
+
margin-top: 0.25rem;
|
|
7023
|
+
}
|
|
7024
|
+
#setup-manual-summary {
|
|
7025
|
+
cursor: pointer;
|
|
7026
|
+
font-size: 0.75rem;
|
|
7027
|
+
color: var(--color-text-secondary);
|
|
7028
|
+
text-align: center;
|
|
7029
|
+
list-style: none;
|
|
7030
|
+
padding: 0.5rem 0;
|
|
7031
|
+
user-select: none;
|
|
7032
|
+
}
|
|
7033
|
+
#setup-manual-summary::-webkit-details-marker { display: none; }
|
|
7034
|
+
#setup-manual-summary:hover { color: var(--color-text-primary); }
|
|
7035
|
+
#setup-manual-details[open] #setup-manual-summary {
|
|
7036
|
+
margin-bottom: 0.5rem;
|
|
7037
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
7038
|
+
}
|
|
7039
|
+
|
|
7040
|
+
/* Bottom action row: [← Back] [Test & Continue →] */
|
|
7041
|
+
.setup-key-actions {
|
|
7042
|
+
display: flex;
|
|
7043
|
+
gap: 0.5rem;
|
|
7044
|
+
margin-top: 0.25rem;
|
|
7045
|
+
}
|
|
7046
|
+
|
|
7047
|
+
.setup-back-btn {
|
|
7048
|
+
flex-shrink: 0;
|
|
7049
|
+
background: transparent;
|
|
7050
|
+
color: var(--color-text-secondary);
|
|
7051
|
+
border: 1.5px solid var(--color-border-primary);
|
|
7052
|
+
border-radius: 8px;
|
|
7053
|
+
padding: 0.5625rem 0.875rem;
|
|
7054
|
+
font-size: 0.8125rem;
|
|
7055
|
+
font-weight: 600;
|
|
7056
|
+
cursor: pointer;
|
|
7057
|
+
white-space: nowrap;
|
|
7058
|
+
transition: border-color .15s, color .15s;
|
|
7059
|
+
}
|
|
7060
|
+
.setup-back-btn:hover {
|
|
7061
|
+
border-color: var(--color-text-secondary);
|
|
7062
|
+
color: var(--color-text-primary);
|
|
7063
|
+
}
|
|
7064
|
+
|
|
7065
|
+
/* Submit button */
|
|
7066
|
+
.setup-submit-btn {
|
|
7067
|
+
flex: 1;
|
|
7068
|
+
background: var(--color-accent-primary);
|
|
7069
|
+
color: #fff;
|
|
7070
|
+
border: none;
|
|
7071
|
+
border-radius: 8px;
|
|
7072
|
+
padding: 0.625rem 0;
|
|
7073
|
+
font-size: 0.875rem;
|
|
7074
|
+
font-weight: 600;
|
|
7075
|
+
cursor: pointer;
|
|
7076
|
+
transition: background .15s, opacity .15s;
|
|
7077
|
+
}
|
|
7078
|
+
.setup-submit-btn:hover { background: #2563eb; }
|
|
7079
|
+
.setup-submit-btn:disabled { opacity: .5; cursor: default; }
|
|
7080
|
+
|
|
7081
|
+
/* ── Onboard panel ───────────────────────────────────────────────────────── */
|
|
7082
|
+
#onboard-panel {
|
|
7083
|
+
flex: 1;
|
|
7084
|
+
display: flex;
|
|
7085
|
+
flex-direction: column;
|
|
7086
|
+
overflow-y: auto;
|
|
7087
|
+
padding: 2.5rem 1.25rem;
|
|
7088
|
+
}
|
|
7089
|
+
|
|
7090
|
+
#onboard-inner {
|
|
7091
|
+
width: 100%;
|
|
7092
|
+
max-width: 30rem;
|
|
7093
|
+
display: flex;
|
|
7094
|
+
flex-direction: column;
|
|
7095
|
+
align-items: center;
|
|
7096
|
+
gap: 0.5rem;
|
|
7097
|
+
margin: auto;
|
|
7098
|
+
}
|
|
7099
|
+
|
|
7100
|
+
.onboard-logo {
|
|
7101
|
+
font-size: 3rem;
|
|
7102
|
+
margin-bottom: 0.25rem;
|
|
7103
|
+
}
|
|
7104
|
+
|
|
7105
|
+
.onboard-title {
|
|
7106
|
+
font-size: 1.625rem;
|
|
7107
|
+
font-weight: 700;
|
|
7108
|
+
color: var(--color-text-primary);
|
|
7109
|
+
text-align: center;
|
|
7110
|
+
}
|
|
7111
|
+
|
|
7112
|
+
.onboard-subtitle {
|
|
7113
|
+
font-size: 0.875rem;
|
|
7114
|
+
color: var(--color-text-secondary);
|
|
7115
|
+
text-align: center;
|
|
7116
|
+
margin-bottom: 0.5rem;
|
|
7117
|
+
}
|
|
7118
|
+
|
|
7119
|
+
/* ── Step indicators ── */
|
|
7120
|
+
#onboard-steps {
|
|
7121
|
+
display: flex;
|
|
7122
|
+
align-items: center;
|
|
7123
|
+
gap: 0;
|
|
7124
|
+
margin: 1rem 0 1.5rem;
|
|
7125
|
+
}
|
|
7126
|
+
|
|
7127
|
+
.onboard-step {
|
|
7128
|
+
width: 1.75rem;
|
|
7129
|
+
height: 1.75rem;
|
|
7130
|
+
border-radius: 50%;
|
|
7131
|
+
background: var(--color-border-secondary);
|
|
7132
|
+
border: 2px solid var(--color-border-primary);
|
|
7133
|
+
color: var(--color-text-secondary);
|
|
7134
|
+
font-size: 0.75rem;
|
|
7135
|
+
font-weight: 700;
|
|
7136
|
+
display: flex;
|
|
7137
|
+
align-items: center;
|
|
7138
|
+
justify-content: center;
|
|
7139
|
+
transition: background .2s, border-color .2s, color .2s;
|
|
7140
|
+
}
|
|
7141
|
+
|
|
7142
|
+
.onboard-step.active {
|
|
7143
|
+
background: var(--color-accent-primary);
|
|
7144
|
+
border-color: var(--color-accent-primary);
|
|
7145
|
+
color: #fff;
|
|
7146
|
+
}
|
|
7147
|
+
|
|
6300
7148
|
.onboard-step.done {
|
|
6301
7149
|
background: var(--color-button-primary);
|
|
6302
7150
|
border-color: var(--color-button-primary);
|
|
@@ -7148,11 +7996,11 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7148
7996
|
}
|
|
7149
7997
|
|
|
7150
7998
|
.channel-status-hint {
|
|
7151
|
-
font-size: 0.
|
|
7152
|
-
line-height: 1.
|
|
7999
|
+
font-size: 0.75rem;
|
|
8000
|
+
line-height: 1.4;
|
|
7153
8001
|
margin: 0;
|
|
7154
|
-
padding: 0.
|
|
7155
|
-
border-radius:
|
|
8002
|
+
padding: 0.375rem 0.75rem;
|
|
8003
|
+
border-radius: 6px;
|
|
7156
8004
|
}
|
|
7157
8005
|
|
|
7158
8006
|
.hint-ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
|
|
@@ -7164,8 +8012,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7164
8012
|
display: flex;
|
|
7165
8013
|
align-items: center;
|
|
7166
8014
|
justify-content: flex-end;
|
|
7167
|
-
gap: 0.
|
|
7168
|
-
padding-top: 0.
|
|
8015
|
+
gap: 0.5rem;
|
|
8016
|
+
padding-top: 0.625rem;
|
|
7169
8017
|
border-top: 1px solid var(--color-border-primary);
|
|
7170
8018
|
}
|
|
7171
8019
|
|
|
@@ -7182,23 +8030,25 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7182
8030
|
align-items: center;
|
|
7183
8031
|
gap: 0.375rem;
|
|
7184
8032
|
font-size: 0.8125rem;
|
|
7185
|
-
padding: 0.375rem
|
|
8033
|
+
padding: 0.375rem 0.875rem;
|
|
7186
8034
|
border-radius: 6px;
|
|
7187
8035
|
cursor: pointer;
|
|
7188
8036
|
font-weight: 500;
|
|
7189
8037
|
border: none;
|
|
7190
|
-
transition: background 0.15s, opacity 0.15s;
|
|
8038
|
+
transition: background 0.15s, color 0.15s, opacity 0.15s;
|
|
7191
8039
|
}
|
|
7192
8040
|
|
|
7193
|
-
/* Test button
|
|
8041
|
+
/* Test button: secondary outline style */
|
|
7194
8042
|
.btn-channel-test {
|
|
7195
8043
|
background: transparent;
|
|
7196
8044
|
color: var(--color-text-secondary);
|
|
7197
|
-
border: 1px solid var(--color-border-
|
|
8045
|
+
border: 1px solid var(--color-border-secondary);
|
|
8046
|
+
padding: 0.375rem 0.75rem;
|
|
7198
8047
|
}
|
|
7199
8048
|
.btn-channel-test:hover {
|
|
7200
|
-
background: var(--color-border-secondary);
|
|
7201
8049
|
color: var(--color-text-primary);
|
|
8050
|
+
border-color: var(--color-text-muted);
|
|
8051
|
+
background: var(--color-bg-tertiary);
|
|
7202
8052
|
}
|
|
7203
8053
|
|
|
7204
8054
|
.btn-channel-test:disabled,
|
|
@@ -7218,6 +8068,33 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7218
8068
|
border-radius: 8px;
|
|
7219
8069
|
}
|
|
7220
8070
|
|
|
8071
|
+
/* ── Channel sections (connected / unconfigured grouping) ────────────────── */
|
|
8072
|
+
.channel-section {
|
|
8073
|
+
display: flex;
|
|
8074
|
+
flex-direction: column;
|
|
8075
|
+
gap: 0.75rem;
|
|
8076
|
+
}
|
|
8077
|
+
|
|
8078
|
+
.channel-section-header {
|
|
8079
|
+
font-size: 0.75rem;
|
|
8080
|
+
font-weight: 600;
|
|
8081
|
+
text-transform: uppercase;
|
|
8082
|
+
letter-spacing: 0.05em;
|
|
8083
|
+
color: var(--color-text-tertiary);
|
|
8084
|
+
padding: 0 0.25rem 0.25rem;
|
|
8085
|
+
}
|
|
8086
|
+
|
|
8087
|
+
/* Custom dev card */
|
|
8088
|
+
.channel-card-custom-dev {
|
|
8089
|
+
border: 1px dashed var(--color-border-primary);
|
|
8090
|
+
background: var(--color-bg-tertiary);
|
|
8091
|
+
}
|
|
8092
|
+
|
|
8093
|
+
.channel-logo-custom {
|
|
8094
|
+
background: linear-gradient(135deg, var(--color-accent-primary), #7c3aed);
|
|
8095
|
+
color: #fff;
|
|
8096
|
+
}
|
|
8097
|
+
|
|
7221
8098
|
/* ── Version badge (inline in Settings row, right-aligned) ──────────────── */
|
|
7222
8099
|
|
|
7223
8100
|
/* Settings button stretches to fill width; version badge pushes to the right */
|
|
@@ -7991,446 +8868,76 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7991
8868
|
|
|
7992
8869
|
|
|
7993
8870
|
/* ── Mobile responsive (≤48rem) ─────────────────────────────────────────── */
|
|
7994
|
-
@media (max-width: 768px) {
|
|
7995
|
-
/* Sidebar becomes a fixed drawer on top of content */
|
|
7996
|
-
#sidebar {
|
|
7997
|
-
position: fixed;
|
|
7998
|
-
top: 0;
|
|
7999
|
-
left: 0;
|
|
8000
|
-
height: 100%;
|
|
8001
|
-
z-index: 200;
|
|
8002
|
-
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
|
|
8003
|
-
transition: transform 0.3s ease, background-color 0.3s ease;
|
|
8004
|
-
transform: translateX(0);
|
|
8005
|
-
margin-left: 0 !important;
|
|
8006
|
-
}
|
|
8007
|
-
/* active session: always show ⋯ button (no hover on touch) */
|
|
8008
|
-
.session-item.active .session-actions-btn { display: flex; }
|
|
8009
|
-
#sidebar.hidden {
|
|
8010
|
-
transform: translateX(-100%);
|
|
8011
|
-
margin-left: 0 !important;
|
|
8012
|
-
}
|
|
8013
|
-
|
|
8014
|
-
/* Overlay backdrop */
|
|
8015
|
-
#sidebar-overlay {
|
|
8016
|
-
display: none;
|
|
8017
|
-
position: fixed;
|
|
8018
|
-
inset: 0;
|
|
8019
|
-
z-index: 199;
|
|
8020
|
-
background: rgba(0,0,0,0.4);
|
|
8021
|
-
}
|
|
8022
|
-
#sidebar-overlay.active {
|
|
8023
|
-
display: block;
|
|
8024
|
-
}
|
|
8025
8871
|
|
|
8026
|
-
/* Main takes full width since sidebar is no longer in flow */
|
|
8027
|
-
#main {
|
|
8028
|
-
width: 100%;
|
|
8029
|
-
min-width: 0;
|
|
8030
|
-
overflow: visible;
|
|
8031
|
-
}
|
|
8032
8872
|
|
|
8033
|
-
|
|
8034
|
-
|
|
8035
|
-
|
|
8036
|
-
}
|
|
8873
|
+
/* ══════════════════════════════════════════════════════════════════════════
|
|
8874
|
+
Creator Hub — Creator Center
|
|
8875
|
+
══════════════════════════════════════════════════════════════════════════ */
|
|
8037
8876
|
|
|
8038
|
-
|
|
8039
|
-
|
|
8040
|
-
|
|
8041
|
-
|
|
8042
|
-
|
|
8043
|
-
|
|
8044
|
-
}
|
|
8045
|
-
/* Always show detail fields on mobile (no hover) */
|
|
8046
|
-
#session-info-bar .sib-detail {
|
|
8047
|
-
display: contents;
|
|
8048
|
-
}
|
|
8049
|
-
/* Hide less-important fields and their separators (element + sib-sep-after-element pattern) */
|
|
8050
|
-
#sib-id,
|
|
8051
|
-
.sib-sep-after-id,
|
|
8052
|
-
#sib-dir,
|
|
8053
|
-
.sib-sep-after-dir,
|
|
8054
|
-
#sib-mode,
|
|
8055
|
-
.sib-sep-after-mode,
|
|
8056
|
-
#sib-reasoning-wrap,
|
|
8057
|
-
.sib-sep-after-reasoning {
|
|
8058
|
-
display: none;
|
|
8059
|
-
}
|
|
8060
|
-
.sib-sep {
|
|
8061
|
-
margin: 0 0.25rem;
|
|
8062
|
-
}
|
|
8063
|
-
|
|
8064
|
-
/* Input bar: proportional spacing, touch-friendly */
|
|
8065
|
-
#input-bar {
|
|
8066
|
-
padding: 0.5rem 0.625rem;
|
|
8067
|
-
gap: 0.25rem;
|
|
8068
|
-
}
|
|
8877
|
+
#creator-panel {
|
|
8878
|
+
display: flex;
|
|
8879
|
+
flex-direction: column;
|
|
8880
|
+
height: 100%;
|
|
8881
|
+
overflow: hidden;
|
|
8882
|
+
}
|
|
8069
8883
|
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8076
|
-
|
|
8077
|
-
|
|
8884
|
+
#creator-body {
|
|
8885
|
+
flex: 1;
|
|
8886
|
+
overflow-y: auto;
|
|
8887
|
+
display: flex;
|
|
8888
|
+
flex-direction: column;
|
|
8889
|
+
padding: 2rem 2rem 3.75rem;
|
|
8890
|
+
gap: 1.75rem;
|
|
8891
|
+
}
|
|
8078
8892
|
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
|
|
8082
|
-
|
|
8083
|
-
|
|
8893
|
+
/* ── Section blocks ────────────────────────────────────────────────────── */
|
|
8894
|
+
.creator-section-block {
|
|
8895
|
+
display: flex;
|
|
8896
|
+
flex-direction: column;
|
|
8897
|
+
gap: 0.625rem;
|
|
8898
|
+
}
|
|
8084
8899
|
|
|
8085
|
-
|
|
8086
|
-
|
|
8087
|
-
|
|
8088
|
-
|
|
8089
|
-
|
|
8900
|
+
.creator-section-header {
|
|
8901
|
+
display: flex;
|
|
8902
|
+
align-items: baseline;
|
|
8903
|
+
gap: 0.625rem;
|
|
8904
|
+
padding-bottom: 0.375rem;
|
|
8905
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
8906
|
+
margin-bottom: 2px;
|
|
8907
|
+
}
|
|
8090
8908
|
|
|
8091
|
-
|
|
8092
|
-
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
|
|
8097
|
-
|
|
8909
|
+
.creator-section-label {
|
|
8910
|
+
font-size: 0.75rem;
|
|
8911
|
+
font-weight: 600;
|
|
8912
|
+
color: var(--color-text-secondary);
|
|
8913
|
+
text-transform: uppercase;
|
|
8914
|
+
letter-spacing: 0.5px;
|
|
8915
|
+
}
|
|
8098
8916
|
|
|
8099
|
-
|
|
8100
|
-
|
|
8101
|
-
|
|
8102
|
-
|
|
8103
|
-
flex: 1;
|
|
8104
|
-
min-height: 0;
|
|
8105
|
-
}
|
|
8106
|
-
#task-detail-body {
|
|
8107
|
-
padding: 1rem 1rem 5rem;
|
|
8108
|
-
gap: 0.75rem;
|
|
8109
|
-
overflow-y: auto;
|
|
8110
|
-
-webkit-overflow-scrolling: touch;
|
|
8111
|
-
overscroll-behavior: contain;
|
|
8112
|
-
flex: 1;
|
|
8113
|
-
min-height: 0;
|
|
8114
|
-
}
|
|
8115
|
-
/* btn-create-task: move below title instead of absolute top-right */
|
|
8116
|
-
.task-page-header {
|
|
8117
|
-
flex-direction: column;
|
|
8118
|
-
padding-right: 0;
|
|
8119
|
-
}
|
|
8120
|
-
.btn-create-task {
|
|
8121
|
-
position: static;
|
|
8122
|
-
align-self: flex-start;
|
|
8123
|
-
margin-top: 0.25rem;
|
|
8124
|
-
}
|
|
8125
|
-
/* Table: let it scroll horizontally, keep columns readable */
|
|
8126
|
-
#task-list-table {
|
|
8127
|
-
overflow-x: auto;
|
|
8128
|
-
-webkit-overflow-scrolling: touch;
|
|
8129
|
-
}
|
|
8130
|
-
/* ── Task table: mobile layout ── */
|
|
8131
|
-
.task-table-header {
|
|
8132
|
-
display: none;
|
|
8133
|
-
}
|
|
8134
|
-
.task-table-row {
|
|
8135
|
-
display: flex;
|
|
8136
|
-
align-items: center;
|
|
8137
|
-
min-width: 0;
|
|
8138
|
-
gap: 0.5rem;
|
|
8139
|
-
padding: 0.5rem 0.625rem;
|
|
8140
|
-
border: 1px solid var(--color-border-primary); /* full border */
|
|
8141
|
-
border-radius: 6px; /* independent rounded card */
|
|
8142
|
-
margin-bottom: 0.5rem; /* spacing between cards */
|
|
8143
|
-
}
|
|
8144
|
-
.task-table-row:last-child {
|
|
8145
|
-
margin-bottom: 0;
|
|
8146
|
-
border-radius: 6px; /* override desktop's "0 0 6px 6px" */
|
|
8147
|
-
}
|
|
8148
|
-
/* Name col takes all remaining space */
|
|
8149
|
-
.task-col-name {
|
|
8150
|
-
flex: 1;
|
|
8151
|
-
min-width: 0;
|
|
8152
|
-
align-items: center;
|
|
8153
|
-
}
|
|
8154
|
-
/* Show schedule as subtitle under the task name */
|
|
8155
|
-
.task-name-sched {
|
|
8156
|
-
display: block;
|
|
8157
|
-
font-size: 0.6875rem;
|
|
8158
|
-
font-family: monospace;
|
|
8159
|
-
color: var(--color-warning);
|
|
8160
|
-
white-space: nowrap;
|
|
8161
|
-
overflow: hidden;
|
|
8162
|
-
text-overflow: ellipsis;
|
|
8163
|
-
}
|
|
8164
|
-
/* Hide standalone schedule & content columns */
|
|
8165
|
-
.task-col-schedule,
|
|
8166
|
-
.task-col-content {
|
|
8167
|
-
display: none;
|
|
8168
|
-
}
|
|
8169
|
-
/* Actions: fixed width, icon-only buttons */
|
|
8170
|
-
.task-col-actions {
|
|
8171
|
-
flex-shrink: 0;
|
|
8172
|
-
width: 6.5rem;
|
|
8173
|
-
gap: 0.25rem;
|
|
8174
|
-
}
|
|
8175
|
-
.task-btn .btn-label {
|
|
8176
|
-
display: none;
|
|
8177
|
-
}
|
|
8178
|
-
.task-btn {
|
|
8179
|
-
padding: 0.375rem;
|
|
8180
|
-
width: 1.875rem;
|
|
8181
|
-
height: 1.875rem;
|
|
8182
|
-
justify-content: center;
|
|
8183
|
-
}
|
|
8917
|
+
.creator-section-hint {
|
|
8918
|
+
font-size: 0.6875rem;
|
|
8919
|
+
color: var(--color-text-muted);
|
|
8920
|
+
}
|
|
8184
8921
|
|
|
8185
|
-
|
|
8186
|
-
|
|
8187
|
-
|
|
8188
|
-
|
|
8189
|
-
|
|
8190
|
-
min-height: 0;
|
|
8191
|
-
}
|
|
8192
|
-
#skills-body {
|
|
8193
|
-
padding: 1rem 1rem 5rem;
|
|
8194
|
-
gap: 0.75rem;
|
|
8195
|
-
overflow-y: auto;
|
|
8196
|
-
-webkit-overflow-scrolling: touch;
|
|
8197
|
-
overscroll-behavior: contain;
|
|
8198
|
-
flex: 1;
|
|
8199
|
-
min-height: 0;
|
|
8200
|
-
}
|
|
8201
|
-
/* action buttons: move below title, inline row */
|
|
8202
|
-
.skills-page-header {
|
|
8203
|
-
padding-right: 0;
|
|
8204
|
-
}
|
|
8205
|
-
.skill-action-btns {
|
|
8206
|
-
position: static;
|
|
8207
|
-
margin-top: 0.5rem;
|
|
8208
|
-
}
|
|
8209
|
-
/* Show system skills toggle: give right margin */
|
|
8210
|
-
#label-show-system {
|
|
8211
|
-
margin-right: 0.5rem;
|
|
8212
|
-
}
|
|
8213
|
-
/* Skills tab bar: stack tabs and controls vertically */
|
|
8214
|
-
#skills-tabs {
|
|
8215
|
-
flex-direction: row;
|
|
8216
|
-
align-items: center;
|
|
8217
|
-
gap: 0.5rem;
|
|
8218
|
-
}
|
|
8219
|
-
.skills-tabs-left {
|
|
8220
|
-
display: flex;
|
|
8221
|
-
flex-shrink: 0;
|
|
8222
|
-
}
|
|
8223
|
-
.skills-tab {
|
|
8224
|
-
padding: 0.5rem 0.5rem;
|
|
8225
|
-
}
|
|
8226
|
-
.skills-tabs-controls {
|
|
8227
|
-
padding-right: 0;
|
|
8228
|
-
flex-shrink: 0;
|
|
8229
|
-
margin-bottom: 0.25rem;
|
|
8230
|
-
}
|
|
8922
|
+
.creator-list {
|
|
8923
|
+
display: flex;
|
|
8924
|
+
flex-direction: column;
|
|
8925
|
+
gap: 0.5rem;
|
|
8926
|
+
}
|
|
8231
8927
|
|
|
8232
|
-
|
|
8233
|
-
|
|
8234
|
-
|
|
8235
|
-
|
|
8236
|
-
|
|
8237
|
-
|
|
8238
|
-
|
|
8239
|
-
|
|
8240
|
-
|
|
8241
|
-
|
|
8242
|
-
|
|
8243
|
-
|
|
8244
|
-
|
|
8245
|
-
overflow: visible;
|
|
8246
|
-
height: auto;
|
|
8247
|
-
flex: 1;
|
|
8248
|
-
min-height: 0;
|
|
8249
|
-
}
|
|
8250
|
-
.settings-section-title {
|
|
8251
|
-
font-size: 0.9375rem;
|
|
8252
|
-
flex-wrap: wrap;
|
|
8253
|
-
gap: 0.5rem;
|
|
8254
|
-
}
|
|
8255
|
-
/* Add Model button: full width on mobile */
|
|
8256
|
-
.btn-settings-add {
|
|
8257
|
-
width: 100%;
|
|
8258
|
-
justify-content: center;
|
|
8259
|
-
}
|
|
8260
|
-
/* Model card: tighter, stack actions */
|
|
8261
|
-
.model-card {
|
|
8262
|
-
padding: 0.75rem 0.875rem;
|
|
8263
|
-
gap: 0.625rem;
|
|
8264
|
-
}
|
|
8265
|
-
.model-card-header {
|
|
8266
|
-
flex-wrap: wrap;
|
|
8267
|
-
gap: 0.5rem;
|
|
8268
|
-
}
|
|
8269
|
-
.model-card-actions {
|
|
8270
|
-
flex-wrap: wrap;
|
|
8271
|
-
}
|
|
8272
|
-
|
|
8273
|
-
/* ── Channels page ── */
|
|
8274
|
-
#channels-panel {
|
|
8275
|
-
overflow: visible;
|
|
8276
|
-
height: auto;
|
|
8277
|
-
flex: 1;
|
|
8278
|
-
min-height: 0;
|
|
8279
|
-
}
|
|
8280
|
-
#channels-body {
|
|
8281
|
-
padding: 1rem 1rem 5rem;
|
|
8282
|
-
gap: 1rem;
|
|
8283
|
-
overflow-y: auto;
|
|
8284
|
-
-webkit-overflow-scrolling: touch;
|
|
8285
|
-
overscroll-behavior: contain;
|
|
8286
|
-
}
|
|
8287
|
-
/* Channel card: tighter padding, stack footer buttons */
|
|
8288
|
-
.channel-card {
|
|
8289
|
-
padding: 0.875rem 1rem;
|
|
8290
|
-
gap: 0.75rem;
|
|
8291
|
-
}
|
|
8292
|
-
|
|
8293
|
-
/* ── MCP page ── */
|
|
8294
|
-
#mcp-panel {
|
|
8295
|
-
overflow: visible;
|
|
8296
|
-
height: auto;
|
|
8297
|
-
flex: 1;
|
|
8298
|
-
min-height: 0;
|
|
8299
|
-
}
|
|
8300
|
-
#mcp-body {
|
|
8301
|
-
padding: 1rem 1rem 5rem;
|
|
8302
|
-
gap: 1rem;
|
|
8303
|
-
overflow-y: auto;
|
|
8304
|
-
-webkit-overflow-scrolling: touch;
|
|
8305
|
-
overscroll-behavior: contain;
|
|
8306
|
-
}
|
|
8307
|
-
.channel-card-footer {
|
|
8308
|
-
flex-wrap: wrap;
|
|
8309
|
-
gap: 0.5rem;
|
|
8310
|
-
}
|
|
8311
|
-
.channel-card-actions {
|
|
8312
|
-
flex-wrap: wrap;
|
|
8313
|
-
gap: 0.375rem;
|
|
8314
|
-
}
|
|
8315
|
-
|
|
8316
|
-
/* ── Profile / My Data page ── */
|
|
8317
|
-
#profile-body { padding: 1rem 0.875rem; }
|
|
8318
|
-
.profile-tab { padding: 0.5625rem 0.75rem; font-size: 0.75rem; }
|
|
8319
|
-
.profile-section-head { flex-wrap: wrap; }
|
|
8320
|
-
.profile-path { max-width: 100%; }
|
|
8321
|
-
.memory-card-head { flex-wrap: wrap; }
|
|
8322
|
-
.memory-card-actions { margin-top: 0.375rem; flex-wrap: wrap; }
|
|
8323
|
-
.btn-memory-curate span,
|
|
8324
|
-
.btn-memory-delete span { display: none; } /* icon-only on narrow screens */
|
|
8325
|
-
|
|
8326
|
-
/* ── File Recall page ── */
|
|
8327
|
-
.trash-toolbar {
|
|
8328
|
-
flex-wrap: wrap;
|
|
8329
|
-
gap: 0.5rem;
|
|
8330
|
-
}
|
|
8331
|
-
.trash-summary {
|
|
8332
|
-
width: 100%;
|
|
8333
|
-
}
|
|
8334
|
-
.trash-actions {
|
|
8335
|
-
flex-wrap: wrap;
|
|
8336
|
-
margin-left: 0;
|
|
8337
|
-
gap: 0.375rem;
|
|
8338
|
-
}
|
|
8339
|
-
.btn-trash-action {
|
|
8340
|
-
white-space: nowrap;
|
|
8341
|
-
flex-shrink: 0;
|
|
8342
|
-
}
|
|
8343
|
-
|
|
8344
|
-
/* Latency signal popup (tap to show on mobile, replaces native title tooltip) */
|
|
8345
|
-
.sib-signal-popup {
|
|
8346
|
-
position: fixed;
|
|
8347
|
-
z-index: 500;
|
|
8348
|
-
background: var(--color-bg-secondary);
|
|
8349
|
-
border: 1px solid var(--color-border-primary);
|
|
8350
|
-
border-radius: 6px;
|
|
8351
|
-
padding: 0.5rem 0.75rem;
|
|
8352
|
-
font-size: 0.75rem;
|
|
8353
|
-
color: var(--color-text-primary);
|
|
8354
|
-
white-space: pre-line;
|
|
8355
|
-
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
|
|
8356
|
-
max-width: 80vw;
|
|
8357
|
-
pointer-events: none;
|
|
8358
|
-
}
|
|
8359
|
-
/* Make signal icon look tappable on mobile */
|
|
8360
|
-
.sib-signal-clickable {
|
|
8361
|
-
cursor: pointer;
|
|
8362
|
-
}
|
|
8363
|
-
}
|
|
8364
|
-
|
|
8365
|
-
|
|
8366
|
-
/* ══════════════════════════════════════════════════════════════════════════
|
|
8367
|
-
Creator Hub — Creator Center
|
|
8368
|
-
══════════════════════════════════════════════════════════════════════════ */
|
|
8369
|
-
|
|
8370
|
-
#creator-panel {
|
|
8371
|
-
display: flex;
|
|
8372
|
-
flex-direction: column;
|
|
8373
|
-
height: 100%;
|
|
8374
|
-
overflow: hidden;
|
|
8375
|
-
}
|
|
8376
|
-
|
|
8377
|
-
#creator-body {
|
|
8378
|
-
flex: 1;
|
|
8379
|
-
overflow-y: auto;
|
|
8380
|
-
display: flex;
|
|
8381
|
-
flex-direction: column;
|
|
8382
|
-
padding: 2rem 2rem 3.75rem;
|
|
8383
|
-
gap: 1.75rem;
|
|
8384
|
-
}
|
|
8385
|
-
|
|
8386
|
-
/* ── Section blocks ────────────────────────────────────────────────────── */
|
|
8387
|
-
.creator-section-block {
|
|
8388
|
-
display: flex;
|
|
8389
|
-
flex-direction: column;
|
|
8390
|
-
gap: 0.625rem;
|
|
8391
|
-
}
|
|
8392
|
-
|
|
8393
|
-
.creator-section-header {
|
|
8394
|
-
display: flex;
|
|
8395
|
-
align-items: baseline;
|
|
8396
|
-
gap: 0.625rem;
|
|
8397
|
-
padding-bottom: 0.375rem;
|
|
8398
|
-
border-bottom: 1px solid var(--color-border-primary);
|
|
8399
|
-
margin-bottom: 2px;
|
|
8400
|
-
}
|
|
8401
|
-
|
|
8402
|
-
.creator-section-label {
|
|
8403
|
-
font-size: 0.75rem;
|
|
8404
|
-
font-weight: 600;
|
|
8405
|
-
color: var(--color-text-secondary);
|
|
8406
|
-
text-transform: uppercase;
|
|
8407
|
-
letter-spacing: 0.5px;
|
|
8408
|
-
}
|
|
8409
|
-
|
|
8410
|
-
.creator-section-hint {
|
|
8411
|
-
font-size: 0.6875rem;
|
|
8412
|
-
color: var(--color-text-muted);
|
|
8413
|
-
}
|
|
8414
|
-
|
|
8415
|
-
.creator-list {
|
|
8416
|
-
display: flex;
|
|
8417
|
-
flex-direction: column;
|
|
8418
|
-
gap: 0.5rem;
|
|
8419
|
-
}
|
|
8420
|
-
|
|
8421
|
-
/* ── Skill Card base ───────────────────────────────────────────────────── */
|
|
8422
|
-
.creator-skill-card {
|
|
8423
|
-
background: var(--color-bg-secondary);
|
|
8424
|
-
border: 1px solid var(--color-border-primary);
|
|
8425
|
-
border-radius: 8px;
|
|
8426
|
-
padding: 0.875rem 1rem;
|
|
8427
|
-
margin-bottom: 0.75rem;
|
|
8428
|
-
transition: border-color .15s;
|
|
8429
|
-
}
|
|
8430
|
-
.creator-skill-card:last-child {
|
|
8431
|
-
margin-bottom: 0;
|
|
8432
|
-
}
|
|
8433
|
-
.creator-skill-card:hover { border-color: var(--color-text-muted); }
|
|
8928
|
+
/* ── Skill Card base ───────────────────────────────────────────────────── */
|
|
8929
|
+
.creator-skill-card {
|
|
8930
|
+
background: var(--color-bg-secondary);
|
|
8931
|
+
border: 1px solid var(--color-border-primary);
|
|
8932
|
+
border-radius: 8px;
|
|
8933
|
+
padding: 0.875rem 1rem;
|
|
8934
|
+
margin-bottom: 0.75rem;
|
|
8935
|
+
transition: border-color .15s;
|
|
8936
|
+
}
|
|
8937
|
+
.creator-skill-card:last-child {
|
|
8938
|
+
margin-bottom: 0;
|
|
8939
|
+
}
|
|
8940
|
+
.creator-skill-card:hover { border-color: var(--color-text-muted); }
|
|
8434
8941
|
|
|
8435
8942
|
.creator-card-main {
|
|
8436
8943
|
display: flex;
|
|
@@ -9042,7 +9549,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9042
9549
|
padding: 1.75rem 2.25rem;
|
|
9043
9550
|
}
|
|
9044
9551
|
#billing-content {
|
|
9045
|
-
max-width:
|
|
9552
|
+
max-width: 1000px;
|
|
9046
9553
|
margin: 0 auto;
|
|
9047
9554
|
}
|
|
9048
9555
|
.billing-loading,
|
|
@@ -9054,11 +9561,22 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9054
9561
|
.billing-error {
|
|
9055
9562
|
color: var(--color-error);
|
|
9056
9563
|
}
|
|
9564
|
+
|
|
9057
9565
|
/* ── Dashboard Layout ─────────────────────────────────────────────────── */
|
|
9058
9566
|
.billing-dashboard {
|
|
9059
9567
|
display: flex;
|
|
9060
9568
|
flex-direction: column;
|
|
9061
9569
|
gap: 1.25rem;
|
|
9570
|
+
position: relative;
|
|
9571
|
+
}
|
|
9572
|
+
.billing-skel-overlay {
|
|
9573
|
+
position: absolute;
|
|
9574
|
+
inset: 0;
|
|
9575
|
+
z-index: 10;
|
|
9576
|
+
background: var(--color-bg-secondary);
|
|
9577
|
+
display: flex;
|
|
9578
|
+
flex-direction: column;
|
|
9579
|
+
gap: 1.25rem;
|
|
9062
9580
|
}
|
|
9063
9581
|
.billing-top-bar {
|
|
9064
9582
|
display: flex;
|
|
@@ -9085,7 +9603,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9085
9603
|
.billing-controls {
|
|
9086
9604
|
display: flex;
|
|
9087
9605
|
align-items: center;
|
|
9088
|
-
gap: 0.
|
|
9606
|
+
gap: 0.625rem;
|
|
9089
9607
|
flex-wrap: wrap;
|
|
9090
9608
|
}
|
|
9091
9609
|
|
|
@@ -9098,7 +9616,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9098
9616
|
overflow: hidden;
|
|
9099
9617
|
}
|
|
9100
9618
|
.billing-period-btn {
|
|
9101
|
-
padding: 0.
|
|
9619
|
+
padding: 0.4375rem 0.75rem;
|
|
9102
9620
|
border: none;
|
|
9103
9621
|
background: transparent;
|
|
9104
9622
|
color: var(--color-text-secondary);
|
|
@@ -9114,57 +9632,65 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9114
9632
|
color: var(--color-text-primary);
|
|
9115
9633
|
}
|
|
9116
9634
|
.billing-period-btn.active {
|
|
9117
|
-
background:
|
|
9635
|
+
background: var(--color-accent-primary);
|
|
9118
9636
|
color: #ffffff;
|
|
9119
9637
|
font-weight: 500;
|
|
9120
9638
|
}
|
|
9121
9639
|
|
|
9122
9640
|
/* ── Model Filter ────────────────────────────────────────────────────── */
|
|
9123
9641
|
.billing-model-filter {
|
|
9124
|
-
padding: 0.
|
|
9642
|
+
padding: 0.4375rem 0.75rem;
|
|
9125
9643
|
border: 1px solid var(--color-border-primary);
|
|
9126
9644
|
border-radius: 8px;
|
|
9127
9645
|
background: var(--color-bg-secondary);
|
|
9128
9646
|
color: var(--color-text-primary);
|
|
9129
9647
|
font-size: 0.8125rem;
|
|
9130
9648
|
cursor: pointer;
|
|
9131
|
-
min-width:
|
|
9649
|
+
min-width: 130px;
|
|
9132
9650
|
}
|
|
9133
9651
|
|
|
9134
|
-
/* ──
|
|
9652
|
+
/* ── Action Buttons ──────────────────────────────────────────────────── */
|
|
9135
9653
|
.billing-clear-container {
|
|
9136
9654
|
position: relative;
|
|
9137
9655
|
}
|
|
9138
9656
|
.billing-clear-btn {
|
|
9139
|
-
|
|
9657
|
+
width: 32px;
|
|
9658
|
+
height: 32px;
|
|
9659
|
+
display: inline-flex;
|
|
9660
|
+
align-items: center;
|
|
9661
|
+
justify-content: center;
|
|
9140
9662
|
border: 1px solid var(--color-border-primary);
|
|
9141
9663
|
border-radius: 8px;
|
|
9142
9664
|
background: var(--color-bg-secondary);
|
|
9143
9665
|
color: var(--color-text-secondary);
|
|
9144
9666
|
font-size: 0.875rem;
|
|
9145
9667
|
cursor: pointer;
|
|
9146
|
-
transition: all 0.
|
|
9668
|
+
transition: all 0.15s ease;
|
|
9147
9669
|
}
|
|
9148
9670
|
.billing-clear-btn:hover {
|
|
9149
9671
|
background: var(--color-bg-tertiary);
|
|
9150
|
-
color:
|
|
9151
|
-
|
|
9672
|
+
border-color: #ef4444;
|
|
9673
|
+
color: #ef4444;
|
|
9152
9674
|
}
|
|
9153
9675
|
.billing-share-btn {
|
|
9154
|
-
|
|
9155
|
-
|
|
9676
|
+
display: inline-flex;
|
|
9677
|
+
align-items: center;
|
|
9678
|
+
gap: 0.375rem;
|
|
9679
|
+
padding: 0.4375rem 0.75rem;
|
|
9680
|
+
border: 1px solid var(--color-border-primary);
|
|
9156
9681
|
border-radius: 8px;
|
|
9157
9682
|
background: var(--color-bg-secondary);
|
|
9158
|
-
color: var(--color-
|
|
9683
|
+
color: var(--color-text-secondary);
|
|
9159
9684
|
font-size: 0.8125rem;
|
|
9160
|
-
font-weight:
|
|
9685
|
+
font-weight: 500;
|
|
9161
9686
|
white-space: nowrap;
|
|
9162
9687
|
cursor: pointer;
|
|
9163
|
-
transition: all 0.
|
|
9688
|
+
transition: all 0.15s ease;
|
|
9164
9689
|
}
|
|
9165
9690
|
.billing-share-btn:hover {
|
|
9166
|
-
background: var(--color-
|
|
9167
|
-
color:
|
|
9691
|
+
background: var(--color-bg-tertiary);
|
|
9692
|
+
color: var(--color-text-primary);
|
|
9693
|
+
border-color: var(--color-text-secondary);
|
|
9168
9694
|
}
|
|
9169
9695
|
.billing-clear-popup {
|
|
9170
9696
|
position: absolute;
|
|
@@ -9177,13 +9703,13 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9177
9703
|
background: var(--color-bg-secondary);
|
|
9178
9704
|
border: 1px solid var(--color-border-primary);
|
|
9179
9705
|
border-radius: 8px;
|
|
9180
|
-
padding: 0.
|
|
9181
|
-
box-shadow: 0 4px
|
|
9706
|
+
padding: 0.375rem;
|
|
9707
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
9182
9708
|
z-index: 100;
|
|
9183
9709
|
min-width: 120px;
|
|
9184
9710
|
}
|
|
9185
9711
|
.billing-clear-option {
|
|
9186
|
-
padding: 0.
|
|
9712
|
+
padding: 0.4375rem 0.75rem;
|
|
9187
9713
|
border: none;
|
|
9188
9714
|
border-radius: 6px;
|
|
9189
9715
|
background: transparent;
|
|
@@ -9198,17 +9724,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9198
9724
|
background: var(--color-bg-tertiary);
|
|
9199
9725
|
}
|
|
9200
9726
|
.billing-clear-danger {
|
|
9201
|
-
color:
|
|
9727
|
+
color: #ef4444;
|
|
9202
9728
|
}
|
|
9203
9729
|
.billing-clear-danger:hover {
|
|
9204
|
-
background: rgba(239, 68, 68, 0.
|
|
9730
|
+
background: rgba(239, 68, 68, 0.08) !important;
|
|
9205
9731
|
}
|
|
9206
9732
|
|
|
9207
9733
|
/* ── Stats Row ───────────────────────────────────────────────────────── */
|
|
9208
9734
|
.billing-stats-row {
|
|
9209
9735
|
display: grid;
|
|
9210
9736
|
grid-template-columns: repeat(4, 1fr);
|
|
9211
|
-
gap:
|
|
9737
|
+
gap: 0.875rem;
|
|
9212
9738
|
}
|
|
9213
9739
|
@media (max-width: 900px) {
|
|
9214
9740
|
.billing-stats-row { grid-template-columns: repeat(2, 1fr); }
|
|
@@ -9220,105 +9746,186 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9220
9746
|
display: flex;
|
|
9221
9747
|
align-items: center;
|
|
9222
9748
|
gap: 0.875rem;
|
|
9223
|
-
padding: 1rem 1.
|
|
9749
|
+
padding: 1rem 1.125rem;
|
|
9224
9750
|
background: var(--color-bg-secondary);
|
|
9225
9751
|
border: 1px solid var(--color-border-primary);
|
|
9226
9752
|
border-radius: 12px;
|
|
9753
|
+
transition: border-color 0.15s ease;
|
|
9227
9754
|
}
|
|
9228
9755
|
.billing-stat-primary {
|
|
9229
|
-
|
|
9230
|
-
border-color: var(--color-accent);
|
|
9756
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
|
|
9231
9757
|
}
|
|
9232
9758
|
.billing-stat-icon {
|
|
9233
|
-
|
|
9234
|
-
|
|
9759
|
+
width: 36px;
|
|
9760
|
+
height: 36px;
|
|
9761
|
+
border-radius: 9px;
|
|
9762
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
9763
|
+
color: var(--color-accent-primary);
|
|
9764
|
+
display: flex;
|
|
9765
|
+
align-items: center;
|
|
9766
|
+
justify-content: center;
|
|
9767
|
+
flex-shrink: 0;
|
|
9768
|
+
}
|
|
9769
|
+
.billing-stat-icon-cost { background: color-mix(in srgb, #10b981 10%, transparent); color: #10b981; }
|
|
9770
|
+
.billing-stat-icon-tokens { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; }
|
|
9771
|
+
.billing-stat-icon-requests { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #f59e0b; }
|
|
9772
|
+
.billing-stat-icon-cache { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); color: var(--color-accent-primary); }
|
|
9773
|
+
.billing-stat-icon svg {
|
|
9774
|
+
width: 18px;
|
|
9775
|
+
height: 18px;
|
|
9235
9776
|
}
|
|
9236
9777
|
.billing-stat-content {
|
|
9237
9778
|
display: flex;
|
|
9238
9779
|
flex-direction: column;
|
|
9780
|
+
min-width: 0;
|
|
9239
9781
|
}
|
|
9240
9782
|
.billing-stat-value {
|
|
9241
|
-
font-size: 1.
|
|
9783
|
+
font-size: 1.1875rem;
|
|
9242
9784
|
font-weight: 700;
|
|
9243
9785
|
color: var(--color-text-primary);
|
|
9244
|
-
line-height: 1.
|
|
9786
|
+
line-height: 1.25;
|
|
9787
|
+
white-space: nowrap;
|
|
9788
|
+
overflow: hidden;
|
|
9789
|
+
text-overflow: ellipsis;
|
|
9245
9790
|
}
|
|
9246
9791
|
.billing-stat-primary .billing-stat-value {
|
|
9247
|
-
color: var(--color-accent);
|
|
9792
|
+
color: var(--color-accent-primary);
|
|
9248
9793
|
}
|
|
9249
9794
|
.billing-stat-label {
|
|
9250
|
-
font-size: 0.
|
|
9795
|
+
font-size: 0.71875rem;
|
|
9251
9796
|
color: var(--color-text-secondary);
|
|
9252
|
-
|
|
9253
|
-
|
|
9797
|
+
margin-top: 0.125rem;
|
|
9798
|
+
white-space: nowrap;
|
|
9254
9799
|
}
|
|
9255
9800
|
|
|
9256
|
-
/* ──
|
|
9257
|
-
.billing-heatmap-row {
|
|
9801
|
+
/* ── Heatmap ─────────────────────────────────────────────────────────── */
|
|
9802
|
+
.billing-heatmap-row {
|
|
9803
|
+
display: grid;
|
|
9804
|
+
grid-template-columns: auto 1fr;
|
|
9805
|
+
gap: 1rem;
|
|
9806
|
+
width: 100%;
|
|
9807
|
+
}
|
|
9258
9808
|
.billing-heat-dow-row {
|
|
9259
9809
|
display: grid;
|
|
9260
|
-
grid-template-columns: repeat(7,
|
|
9261
|
-
gap:
|
|
9262
|
-
margin: 0.75rem 0
|
|
9810
|
+
grid-template-columns: repeat(7, 28px);
|
|
9811
|
+
gap: 5px;
|
|
9812
|
+
margin: 0.75rem 0 5px;
|
|
9263
9813
|
justify-content: start;
|
|
9264
9814
|
}
|
|
9265
9815
|
.billing-heat-dow {
|
|
9266
9816
|
text-align: center;
|
|
9267
|
-
font-size:
|
|
9268
|
-
color: var(--color-text-
|
|
9817
|
+
font-size: 0.625rem;
|
|
9818
|
+
color: var(--color-text-secondary);
|
|
9819
|
+
opacity: 0.7;
|
|
9269
9820
|
}
|
|
9270
9821
|
.billing-heat-grid {
|
|
9271
9822
|
display: grid;
|
|
9272
|
-
grid-template-columns: repeat(7,
|
|
9273
|
-
gap:
|
|
9823
|
+
grid-template-columns: repeat(7, 28px);
|
|
9824
|
+
gap: 5px;
|
|
9274
9825
|
justify-content: start;
|
|
9275
9826
|
}
|
|
9276
9827
|
.billing-heat-cell {
|
|
9277
|
-
width:
|
|
9278
|
-
height:
|
|
9279
|
-
border-radius:
|
|
9280
|
-
background: var(--color-bg-
|
|
9828
|
+
width: 28px;
|
|
9829
|
+
height: 28px;
|
|
9830
|
+
border-radius: 5px;
|
|
9831
|
+
background: var(--color-bg-tertiary);
|
|
9281
9832
|
}
|
|
9282
9833
|
.billing-heat-cell.is-empty { background: transparent; }
|
|
9283
|
-
.billing-heat-cell[data-level="0"] { background: var(--color-
|
|
9284
|
-
.billing-heat-cell[data-level="1"] { background:
|
|
9285
|
-
.billing-heat-cell[data-level="2"] { background:
|
|
9286
|
-
.billing-heat-cell[data-level="3"] { background:
|
|
9287
|
-
.billing-heat-cell[data-level="4"] { background:
|
|
9288
|
-
.billing-heat-cell[data-level="5"] { background:
|
|
9834
|
+
.billing-heat-cell[data-level="0"] { background: var(--color-border-primary); }
|
|
9835
|
+
.billing-heat-cell[data-level="1"] { background: color-mix(in srgb, var(--color-accent-primary) 20%, var(--color-bg-secondary)); }
|
|
9836
|
+
.billing-heat-cell[data-level="2"] { background: color-mix(in srgb, var(--color-accent-primary) 40%, var(--color-bg-secondary)); }
|
|
9837
|
+
.billing-heat-cell[data-level="3"] { background: color-mix(in srgb, var(--color-accent-primary) 60%, var(--color-bg-secondary)); }
|
|
9838
|
+
.billing-heat-cell[data-level="4"] { background: color-mix(in srgb, var(--color-accent-primary) 80%, var(--color-bg-secondary)); }
|
|
9839
|
+
.billing-heat-cell[data-level="5"] { background: var(--color-accent-primary); }
|
|
9289
9840
|
.billing-heat-legend {
|
|
9290
9841
|
display: flex;
|
|
9291
9842
|
align-items: center;
|
|
9292
|
-
gap:
|
|
9293
|
-
font-size:
|
|
9843
|
+
gap: 4px;
|
|
9844
|
+
font-size: 0.6875rem;
|
|
9294
9845
|
color: var(--color-text-secondary);
|
|
9295
9846
|
}
|
|
9296
9847
|
.billing-heat-legend .billing-heat-cell {
|
|
9297
|
-
width:
|
|
9298
|
-
height:
|
|
9848
|
+
width: 12px;
|
|
9849
|
+
height: 12px;
|
|
9299
9850
|
aspect-ratio: auto;
|
|
9300
9851
|
}
|
|
9301
9852
|
|
|
9302
|
-
|
|
9303
|
-
|
|
9853
|
+
/* ── Heatmap + Trend two-column row ──────────────────────────────────── */
|
|
9854
|
+
.billing-heatmap-card,
|
|
9855
|
+
.billing-trend-card {
|
|
9856
|
+
min-width: 0;
|
|
9857
|
+
min-height: 140px;
|
|
9304
9858
|
}
|
|
9305
|
-
|
|
9306
|
-
|
|
9307
|
-
|
|
9308
|
-
|
|
9309
|
-
|
|
9310
|
-
|
|
9311
|
-
|
|
9312
|
-
|
|
9859
|
+
|
|
9860
|
+
/* ── Cost Trend Line Chart ───────────────────────────────────────────── */
|
|
9861
|
+
.billing-trend-total {
|
|
9862
|
+
font-size: 0.75rem;
|
|
9863
|
+
font-weight: 600;
|
|
9864
|
+
color: var(--color-accent-primary);
|
|
9865
|
+
}
|
|
9866
|
+
.billing-trend-chart {
|
|
9867
|
+
flex: 1;
|
|
9868
|
+
min-height: 0;
|
|
9313
9869
|
}
|
|
9314
|
-
.billing-
|
|
9870
|
+
.billing-trend-svg {
|
|
9315
9871
|
width: 100%;
|
|
9872
|
+
height: 100%;
|
|
9873
|
+
overflow: visible;
|
|
9874
|
+
}
|
|
9875
|
+
.billing-trend-grid-line {
|
|
9876
|
+
stroke: var(--color-border-primary);
|
|
9877
|
+
stroke-width: 1;
|
|
9878
|
+
}
|
|
9879
|
+
.billing-trend-y-label {
|
|
9880
|
+
font-size: 9px;
|
|
9881
|
+
fill: var(--color-text-secondary);
|
|
9882
|
+
text-anchor: end;
|
|
9883
|
+
}
|
|
9884
|
+
.billing-trend-x-label {
|
|
9885
|
+
font-size: 9px;
|
|
9886
|
+
fill: var(--color-text-secondary);
|
|
9887
|
+
text-anchor: middle;
|
|
9888
|
+
}
|
|
9889
|
+
.billing-trend-line {
|
|
9890
|
+
stroke: var(--color-accent-primary);
|
|
9891
|
+
stroke-width: 1.5;
|
|
9892
|
+
stroke-linecap: round;
|
|
9893
|
+
stroke-linejoin: round;
|
|
9894
|
+
}
|
|
9895
|
+
.billing-trend-area {
|
|
9896
|
+
fill: url(#billing-trend-grad);
|
|
9897
|
+
}
|
|
9898
|
+
.billing-trend-dot {
|
|
9899
|
+
fill: var(--color-accent-primary);
|
|
9900
|
+
stroke: var(--color-bg-secondary);
|
|
9901
|
+
stroke-width: 2;
|
|
9902
|
+
cursor: pointer;
|
|
9903
|
+
opacity: 0;
|
|
9904
|
+
transition: opacity 0.15s;
|
|
9905
|
+
}
|
|
9906
|
+
.billing-trend-svg:hover .billing-trend-dot {
|
|
9907
|
+
opacity: 1;
|
|
9908
|
+
}
|
|
9909
|
+
|
|
9910
|
+
/* ── Chart Card base ─────────────────────────────────────────────────── */
|
|
9911
|
+
.billing-chart-row { width: 100%; }
|
|
9912
|
+
.billing-chart-card {
|
|
9913
|
+
background: var(--color-bg-secondary);
|
|
9914
|
+
border: 1px solid var(--color-border-primary);
|
|
9915
|
+
border-radius: 12px;
|
|
9916
|
+
padding: 1.25rem;
|
|
9917
|
+
min-height: 180px;
|
|
9918
|
+
display: flex;
|
|
9919
|
+
flex-direction: column;
|
|
9316
9920
|
}
|
|
9921
|
+
.billing-chart-wide { width: 100%; }
|
|
9317
9922
|
.billing-chart-header {
|
|
9318
9923
|
display: flex;
|
|
9319
9924
|
justify-content: space-between;
|
|
9320
9925
|
align-items: center;
|
|
9321
9926
|
margin-bottom: 1rem;
|
|
9927
|
+
flex-wrap: wrap;
|
|
9928
|
+
gap: 0.5rem;
|
|
9322
9929
|
}
|
|
9323
9930
|
.billing-chart-header h4 {
|
|
9324
9931
|
font-size: 0.9375rem;
|
|
@@ -9329,25 +9936,21 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9329
9936
|
.billing-chart-legends {
|
|
9330
9937
|
display: flex;
|
|
9331
9938
|
align-items: center;
|
|
9332
|
-
gap:
|
|
9939
|
+
gap: 0.875rem;
|
|
9940
|
+
flex-wrap: wrap;
|
|
9333
9941
|
}
|
|
9334
9942
|
.billing-chart-legend {
|
|
9335
9943
|
display: flex;
|
|
9336
9944
|
align-items: center;
|
|
9337
|
-
gap: 0.
|
|
9338
|
-
font-size: 0.
|
|
9945
|
+
gap: 0.3125rem;
|
|
9946
|
+
font-size: 0.71875rem;
|
|
9339
9947
|
color: var(--color-text-secondary);
|
|
9340
9948
|
}
|
|
9341
9949
|
.billing-legend-dot {
|
|
9342
|
-
width:
|
|
9343
|
-
height:
|
|
9950
|
+
width: 7px;
|
|
9951
|
+
height: 7px;
|
|
9344
9952
|
border-radius: 50%;
|
|
9345
|
-
|
|
9346
|
-
.billing-legend-tokens {
|
|
9347
|
-
background: var(--color-accent);
|
|
9348
|
-
}
|
|
9349
|
-
.billing-legend-cost {
|
|
9350
|
-
background: #10b981;
|
|
9953
|
+
flex-shrink: 0;
|
|
9351
9954
|
}
|
|
9352
9955
|
.billing-chart-empty {
|
|
9353
9956
|
flex: 1;
|
|
@@ -9358,7 +9961,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9358
9961
|
font-size: 0.875rem;
|
|
9359
9962
|
}
|
|
9360
9963
|
|
|
9361
|
-
/* ── Combined Chart
|
|
9964
|
+
/* ── Combined Bar Chart ──────────────────────────────────────────────── */
|
|
9362
9965
|
.billing-combined-chart {
|
|
9363
9966
|
display: flex;
|
|
9364
9967
|
align-items: flex-end;
|
|
@@ -9376,10 +9979,10 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9376
9979
|
position: relative;
|
|
9377
9980
|
min-width: 0;
|
|
9378
9981
|
cursor: pointer;
|
|
9982
|
+
border-radius: 4px;
|
|
9379
9983
|
}
|
|
9380
9984
|
.billing-bar-group:hover {
|
|
9381
9985
|
background: var(--color-bg-tertiary);
|
|
9382
|
-
border-radius: 4px;
|
|
9383
9986
|
}
|
|
9384
9987
|
.billing-bar-pair {
|
|
9385
9988
|
width: 100%;
|
|
@@ -9387,17 +9990,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9387
9990
|
display: flex;
|
|
9388
9991
|
align-items: flex-end;
|
|
9389
9992
|
justify-content: center;
|
|
9390
|
-
gap:
|
|
9993
|
+
gap: 2px;
|
|
9391
9994
|
}
|
|
9392
9995
|
.billing-input-stack {
|
|
9393
|
-
width:
|
|
9996
|
+
width: 10px;
|
|
9394
9997
|
display: flex;
|
|
9395
9998
|
flex-direction: column;
|
|
9396
9999
|
justify-content: flex-end;
|
|
9397
10000
|
align-items: stretch;
|
|
9398
10001
|
}
|
|
9399
10002
|
.billing-cache-hit {
|
|
9400
|
-
background: #
|
|
10003
|
+
background: #3b82f6;
|
|
9401
10004
|
width: 100%;
|
|
9402
10005
|
border-radius: 2px 2px 0 0;
|
|
9403
10006
|
transition: height 0.2s ease;
|
|
@@ -9406,26 +10009,29 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9406
10009
|
background: #f59e0b;
|
|
9407
10010
|
width: 100%;
|
|
9408
10011
|
transition: height 0.2s ease;
|
|
9409
|
-
}
|
|
9410
|
-
|
|
9411
|
-
|
|
10012
|
+
}
|
|
10013
|
+
.billing-output-bar {
|
|
10014
|
+
width: 10px;
|
|
10015
|
+
background: #34d399;
|
|
9412
10016
|
border-radius: 2px 2px 0 0;
|
|
9413
10017
|
transition: height 0.2s ease;
|
|
9414
10018
|
}
|
|
9415
10019
|
.billing-bar-date {
|
|
9416
10020
|
position: absolute;
|
|
9417
10021
|
bottom: -1.25rem;
|
|
9418
|
-
font-size: 0.
|
|
10022
|
+
font-size: 0.5625rem;
|
|
9419
10023
|
color: var(--color-text-secondary);
|
|
9420
10024
|
white-space: nowrap;
|
|
9421
10025
|
min-height: 0.75rem;
|
|
10026
|
+
opacity: 0.8;
|
|
9422
10027
|
}
|
|
9423
10028
|
|
|
9424
|
-
/* Legend colors */
|
|
9425
|
-
.billing-legend-total
|
|
9426
|
-
.billing-legend-cache-hit { background: #
|
|
9427
|
-
.billing-legend-cache-miss
|
|
9428
|
-
.billing-legend-output
|
|
10029
|
+
/* Legend colors — indigo + emerald */
|
|
10030
|
+
.billing-legend-total { background: var(--color-accent-primary); }
|
|
10031
|
+
.billing-legend-cache-hit { background: #3b82f6; }
|
|
10032
|
+
.billing-legend-cache-miss{ background: #f59e0b; }
|
|
10033
|
+
.billing-legend-output { background: #34d399; }
|
|
10034
|
+
|
|
9429
10035
|
/* ── Chart Tooltip ───────────────────────────────────────────────────── */
|
|
9430
10036
|
.billing-chart-tooltip {
|
|
9431
10037
|
display: none;
|
|
@@ -9472,10 +10078,10 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9472
10078
|
border-radius: 50%;
|
|
9473
10079
|
flex-shrink: 0;
|
|
9474
10080
|
}
|
|
9475
|
-
.tooltip-total
|
|
9476
|
-
.tooltip-cache-hit { background: #
|
|
9477
|
-
.tooltip-cache-miss
|
|
9478
|
-
.tooltip-output
|
|
10081
|
+
.tooltip-total { background: var(--color-accent-primary); }
|
|
10082
|
+
.tooltip-cache-hit { background: #3b82f6; }
|
|
10083
|
+
.tooltip-cache-miss{ background: #f59e0b; }
|
|
10084
|
+
.tooltip-output { background: #34d399; }.tooltip-label {
|
|
9479
10085
|
flex: 1;
|
|
9480
10086
|
color: var(--color-text-secondary);
|
|
9481
10087
|
}
|
|
@@ -9490,14 +10096,13 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9490
10096
|
grid-template-columns: repeat(2, 1fr);
|
|
9491
10097
|
gap: 1rem;
|
|
9492
10098
|
}
|
|
9493
|
-
@media (max-width: 768px) {
|
|
9494
|
-
.billing-bottom-grid { grid-template-columns: 1fr; }
|
|
9495
|
-
}
|
|
9496
10099
|
.billing-section {
|
|
9497
10100
|
background: var(--color-bg-secondary);
|
|
9498
10101
|
border: 1px solid var(--color-border-primary);
|
|
9499
10102
|
border-radius: 12px;
|
|
9500
10103
|
padding: 1.25rem;
|
|
10104
|
+
height: 16rem;
|
|
10105
|
+
overflow-y: auto;
|
|
9501
10106
|
}
|
|
9502
10107
|
.billing-section h3 {
|
|
9503
10108
|
font-size: 0.9375rem;
|
|
@@ -9543,16 +10148,16 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9543
10148
|
transition: width 0.3s ease;
|
|
9544
10149
|
}
|
|
9545
10150
|
.billing-bar-total {
|
|
9546
|
-
background:
|
|
10151
|
+
background: var(--color-accent-primary);
|
|
9547
10152
|
}
|
|
9548
10153
|
.billing-bar-completion {
|
|
9549
|
-
background:
|
|
10154
|
+
background: #34d399;
|
|
9550
10155
|
}
|
|
9551
10156
|
.billing-bar-cache-read {
|
|
9552
|
-
background:
|
|
10157
|
+
background: #3b82f6;
|
|
9553
10158
|
}
|
|
9554
10159
|
.billing-bar-cache-miss {
|
|
9555
|
-
background:
|
|
10160
|
+
background: #f59e0b;
|
|
9556
10161
|
}
|
|
9557
10162
|
/* ── Model List ──────────────────────────────────────────────────────── */
|
|
9558
10163
|
.billing-model-list {
|
|
@@ -9597,8 +10202,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9597
10202
|
}
|
|
9598
10203
|
.billing-model-bar-fill {
|
|
9599
10204
|
height: 100%;
|
|
9600
|
-
background:
|
|
10205
|
+
background: var(--color-accent-primary);
|
|
9601
10206
|
border-radius: 3px;
|
|
10207
|
+
min-width: 8px;
|
|
9602
10208
|
}
|
|
9603
10209
|
.billing-model-cost {
|
|
9604
10210
|
font-size: 0.8125rem;
|
|
@@ -9872,9 +10478,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9872
10478
|
align-items: center;
|
|
9873
10479
|
gap: 0.4375rem;
|
|
9874
10480
|
padding: 0.5rem 0.9375rem;
|
|
9875
|
-
background: var(--color-
|
|
9876
|
-
color:
|
|
9877
|
-
border:
|
|
10481
|
+
background: var(--color-accent-primary);
|
|
10482
|
+
color: #fff;
|
|
10483
|
+
border: none;
|
|
9878
10484
|
border-radius: 8px;
|
|
9879
10485
|
font-size: 0.8125rem;
|
|
9880
10486
|
font-weight: 500;
|
|
@@ -9909,14 +10515,6 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9909
10515
|
background: rgba(221, 51, 51, 0.06);
|
|
9910
10516
|
}
|
|
9911
10517
|
|
|
9912
|
-
@media (max-width: 768px) {
|
|
9913
|
-
.mcp-cta {
|
|
9914
|
-
flex-direction: column;
|
|
9915
|
-
align-items: stretch;
|
|
9916
|
-
gap: 0.75rem;
|
|
9917
|
-
}
|
|
9918
|
-
.btn-mcp-cta { justify-content: center; }
|
|
9919
|
-
}
|
|
9920
10518
|
|
|
9921
10519
|
/* Exchange Rate Settings */
|
|
9922
10520
|
.settings-exchange-rate {
|
|
@@ -10012,6 +10610,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10012
10610
|
border: 1px solid var(--color-border-primary);
|
|
10013
10611
|
border-radius: 12px;
|
|
10014
10612
|
padding: 1.25rem;
|
|
10613
|
+
overflow: hidden;
|
|
10614
|
+
min-width: 0;
|
|
10015
10615
|
}
|
|
10016
10616
|
.billing-sessions-section h3 {
|
|
10017
10617
|
font-size: 0.9375rem;
|
|
@@ -10027,9 +10627,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10027
10627
|
}
|
|
10028
10628
|
.billing-sessions-header {
|
|
10029
10629
|
display: grid;
|
|
10030
|
-
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.
|
|
10630
|
+
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1.4fr;
|
|
10031
10631
|
gap: 0.5rem;
|
|
10032
|
-
padding: 0.75rem
|
|
10632
|
+
padding: 0.75rem 0rem;
|
|
10033
10633
|
background: var(--color-bg-tertiary);
|
|
10034
10634
|
border-radius: 8px;
|
|
10035
10635
|
font-size: 0.75rem;
|
|
@@ -10046,12 +10646,16 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10046
10646
|
}
|
|
10047
10647
|
.billing-session-row {
|
|
10048
10648
|
display: grid;
|
|
10049
|
-
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.
|
|
10649
|
+
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1.4fr;
|
|
10050
10650
|
gap: 0.5rem;
|
|
10051
|
-
padding: 0.75rem
|
|
10651
|
+
padding: 0.75rem 0rem;
|
|
10052
10652
|
border-radius: 8px;
|
|
10053
10653
|
transition: background 0.15s;
|
|
10054
10654
|
align-items: center;
|
|
10655
|
+
border-bottom: 1px solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
|
|
10656
|
+
}
|
|
10657
|
+
.billing-session-row:last-child {
|
|
10658
|
+
border-bottom: none;
|
|
10055
10659
|
}
|
|
10056
10660
|
.billing-session-row:hover {
|
|
10057
10661
|
background: var(--color-bg-tertiary);
|
|
@@ -10101,6 +10705,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10101
10705
|
text-align: right;
|
|
10102
10706
|
color: var(--color-text-primary);
|
|
10103
10707
|
}
|
|
10708
|
+
.billing-cell-total {
|
|
10709
|
+
color: var(--color-accent-primary);
|
|
10710
|
+
}
|
|
10104
10711
|
.billing-cell-hit {
|
|
10105
10712
|
color: #3b82f6;
|
|
10106
10713
|
}
|
|
@@ -10110,42 +10717,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10110
10717
|
.billing-cell-cost {
|
|
10111
10718
|
font-family: var(--font-mono);
|
|
10112
10719
|
font-weight: 600;
|
|
10113
|
-
color: var(--color-
|
|
10720
|
+
color: var(--color-text-primary);
|
|
10114
10721
|
text-align: right;
|
|
10115
10722
|
}
|
|
10116
10723
|
.billing-cell-time {
|
|
10117
10724
|
font-size: 0.75rem;
|
|
10118
10725
|
color: var(--color-text-secondary);
|
|
10726
|
+
text-align: right;
|
|
10119
10727
|
}
|
|
10120
|
-
|
|
10121
|
-
|
|
10122
|
-
|
|
10123
|
-
}
|
|
10124
|
-
.billing-session-row {
|
|
10125
|
-
grid-template-columns: 1fr 1fr;
|
|
10126
|
-
gap: 0.5rem;
|
|
10127
|
-
padding: 1rem;
|
|
10128
|
-
}
|
|
10129
|
-
.billing-cell-index {
|
|
10130
|
-
display: none;
|
|
10131
|
-
}
|
|
10132
|
-
.billing-cell-session {
|
|
10133
|
-
grid-column: 1 / -1;
|
|
10134
|
-
}
|
|
10135
|
-
.billing-cell-number {
|
|
10136
|
-
text-align: left;
|
|
10137
|
-
}
|
|
10138
|
-
.billing-cell-number::before {
|
|
10139
|
-
font-size: 0.625rem;
|
|
10140
|
-
color: var(--color-text-secondary);
|
|
10141
|
-
text-transform: uppercase;
|
|
10142
|
-
display: block;
|
|
10143
|
-
}
|
|
10144
|
-
.billing-cell-time {
|
|
10145
|
-
grid-column: 1 / -1;
|
|
10146
|
-
text-align: right;
|
|
10147
|
-
}
|
|
10148
|
-
}
|
|
10728
|
+
/* Mobile-only summary row — hidden on desktop */
|
|
10729
|
+
.billing-session-numbers-row { display: none; }
|
|
10730
|
+
|
|
10149
10731
|
|
|
10150
10732
|
/* ════ Media generation (Settings → Models tab) ════ */
|
|
10151
10733
|
.settings-section-desc {
|
|
@@ -10211,6 +10793,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10211
10793
|
cursor: not-allowed;
|
|
10212
10794
|
}
|
|
10213
10795
|
.media-row-status {
|
|
10796
|
+
flex: 1;
|
|
10214
10797
|
margin-left: auto;
|
|
10215
10798
|
font-size: 0.75rem;
|
|
10216
10799
|
color: var(--color-text-secondary);
|
|
@@ -10218,8 +10801,22 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10218
10801
|
white-space: nowrap;
|
|
10219
10802
|
overflow: hidden;
|
|
10220
10803
|
text-overflow: ellipsis;
|
|
10804
|
+
text-align: right;
|
|
10221
10805
|
max-width: 16rem;
|
|
10222
10806
|
}
|
|
10807
|
+
.media-vision-primary-note {
|
|
10808
|
+
flex: 1 1 auto;
|
|
10809
|
+
text-align: left;
|
|
10810
|
+
font-family: inherit;
|
|
10811
|
+
max-width: none;
|
|
10812
|
+
}
|
|
10813
|
+
.media-vision-primary-model {
|
|
10814
|
+
flex: 0 0 auto;
|
|
10815
|
+
font-size: 0.75rem;
|
|
10816
|
+
color: var(--color-text-secondary);
|
|
10817
|
+
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
|
|
10818
|
+
white-space: nowrap;
|
|
10819
|
+
}
|
|
10223
10820
|
.media-row-detail {
|
|
10224
10821
|
border-top: 1px solid var(--color-border-primary);
|
|
10225
10822
|
padding: 0.625rem 0.75rem;
|
|
@@ -10462,7 +11059,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10462
11059
|
right: 14px;
|
|
10463
11060
|
border: none;
|
|
10464
11061
|
background: none;
|
|
10465
|
-
font-size:
|
|
11062
|
+
font-size: 1.375rem;
|
|
10466
11063
|
line-height: 1;
|
|
10467
11064
|
color: var(--color-text-muted);
|
|
10468
11065
|
cursor: pointer;
|
|
@@ -10471,13 +11068,13 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10471
11068
|
|
|
10472
11069
|
.share-title {
|
|
10473
11070
|
margin: 0 0 4px;
|
|
10474
|
-
font-size:
|
|
11071
|
+
font-size: 1.0625rem;
|
|
10475
11072
|
font-weight: 700;
|
|
10476
11073
|
color: var(--color-text-primary);
|
|
10477
11074
|
}
|
|
10478
11075
|
.share-subtitle {
|
|
10479
11076
|
margin: 0 0 16px;
|
|
10480
|
-
font-size:
|
|
11077
|
+
font-size: 0.8125rem;
|
|
10481
11078
|
color: var(--color-text-tertiary);
|
|
10482
11079
|
}
|
|
10483
11080
|
|
|
@@ -10502,169 +11099,578 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10502
11099
|
box-shadow: 0 6px 18px rgba(15, 18, 28, 0.16);
|
|
10503
11100
|
}
|
|
10504
11101
|
|
|
10505
|
-
@media (max-width: 560px) {
|
|
10506
|
-
.share-body { flex-direction: column; align-items: stretch; }
|
|
10507
|
-
.share-poster-wrap { margin-bottom: 4px; }
|
|
10508
|
-
.share-poster-img { width: 180px; }
|
|
10509
|
-
}
|
|
11102
|
+
@media (max-width: 560px) {
|
|
11103
|
+
.share-body { flex-direction: column; align-items: stretch; }
|
|
11104
|
+
.share-poster-wrap { margin-bottom: 4px; }
|
|
11105
|
+
.share-poster-img { width: 180px; }
|
|
11106
|
+
}
|
|
11107
|
+
|
|
11108
|
+
.share-row-label {
|
|
11109
|
+
font-size: 0.75rem;
|
|
11110
|
+
font-weight: 600;
|
|
11111
|
+
color: var(--color-text-tertiary);
|
|
11112
|
+
}
|
|
11113
|
+
|
|
11114
|
+
.share-theme-row {
|
|
11115
|
+
display: flex;
|
|
11116
|
+
flex-direction: column;
|
|
11117
|
+
gap: 6px;
|
|
11118
|
+
margin-bottom: 14px;
|
|
11119
|
+
}
|
|
11120
|
+
.share-theme-chips {
|
|
11121
|
+
display: flex;
|
|
11122
|
+
gap: 8px;
|
|
11123
|
+
}
|
|
11124
|
+
.share-theme-chip {
|
|
11125
|
+
flex: 1;
|
|
11126
|
+
height: 34px;
|
|
11127
|
+
border: 2px solid transparent;
|
|
11128
|
+
border-radius: var(--radius-sm, 6px);
|
|
11129
|
+
cursor: pointer;
|
|
11130
|
+
position: relative;
|
|
11131
|
+
display: flex;
|
|
11132
|
+
align-items: center;
|
|
11133
|
+
justify-content: center;
|
|
11134
|
+
transition: border-color .12s ease, transform .12s ease;
|
|
11135
|
+
}
|
|
11136
|
+
.share-theme-chip:hover { transform: translateY(-1px); }
|
|
11137
|
+
.share-theme-chip.is-active { border-color: var(--color-button-primary); }
|
|
11138
|
+
.share-theme-name {
|
|
11139
|
+
font-size: 0.6875rem;
|
|
11140
|
+
font-weight: 700;
|
|
11141
|
+
color: rgba(0,0,0,.55);
|
|
11142
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
11143
|
+
pointer-events: none;
|
|
11144
|
+
}
|
|
11145
|
+
.share-theme-chip[data-theme="geek"] .share-theme-name {
|
|
11146
|
+
color: rgba(255,255,255,.92);
|
|
11147
|
+
text-shadow: 0 1px 2px rgba(0,0,0,.4);
|
|
11148
|
+
}
|
|
11149
|
+
|
|
11150
|
+
.share-periods {
|
|
11151
|
+
display: inline-flex;
|
|
11152
|
+
gap: 4px;
|
|
11153
|
+
padding: 3px;
|
|
11154
|
+
margin-bottom: 12px;
|
|
11155
|
+
border: 1px solid var(--color-border-primary);
|
|
11156
|
+
border-radius: var(--radius-sm, 6px);
|
|
11157
|
+
background: var(--color-bg-primary);
|
|
11158
|
+
}
|
|
11159
|
+
.share-period {
|
|
11160
|
+
padding: 6px 16px;
|
|
11161
|
+
border: none;
|
|
11162
|
+
border-radius: var(--radius-sm, 5px);
|
|
11163
|
+
background: transparent;
|
|
11164
|
+
color: var(--color-text-secondary);
|
|
11165
|
+
font-size: 0.8125rem;
|
|
11166
|
+
font-weight: 600;
|
|
11167
|
+
cursor: pointer;
|
|
11168
|
+
transition: background .12s ease, color .12s ease;
|
|
11169
|
+
}
|
|
11170
|
+
.share-period:hover { color: var(--color-text-primary); }
|
|
11171
|
+
.share-period.is-active {
|
|
11172
|
+
background: var(--color-button-primary);
|
|
11173
|
+
color: var(--color-button-primary-text);
|
|
11174
|
+
}
|
|
11175
|
+
|
|
11176
|
+
.share-platforms {
|
|
11177
|
+
display: grid;
|
|
11178
|
+
grid-template-columns: repeat(4, 1fr);
|
|
11179
|
+
gap: 8px;
|
|
11180
|
+
margin-bottom: 14px;
|
|
11181
|
+
}
|
|
11182
|
+
.share-platform {
|
|
11183
|
+
padding: 9px 4px;
|
|
11184
|
+
border: 1px solid var(--color-border-primary);
|
|
11185
|
+
border-radius: var(--radius-sm, 6px);
|
|
11186
|
+
background: var(--color-bg-primary);
|
|
11187
|
+
color: var(--color-text-secondary);
|
|
11188
|
+
font-size: 0.8125rem;
|
|
11189
|
+
font-weight: 600;
|
|
11190
|
+
cursor: pointer;
|
|
11191
|
+
transition: background .12s ease, border-color .12s ease, color .12s ease;
|
|
11192
|
+
}
|
|
11193
|
+
.share-platform:hover {
|
|
11194
|
+
background: var(--color-bg-hover);
|
|
11195
|
+
border-color: var(--color-border-strong);
|
|
11196
|
+
}
|
|
11197
|
+
.share-platform.is-active {
|
|
11198
|
+
background: var(--color-button-primary);
|
|
11199
|
+
color: var(--color-button-primary-text);
|
|
11200
|
+
border-color: var(--color-button-primary);
|
|
11201
|
+
}
|
|
11202
|
+
|
|
11203
|
+
.share-editor { margin-bottom: 14px; }
|
|
11204
|
+
.share-editor-head {
|
|
11205
|
+
display: flex;
|
|
11206
|
+
align-items: center;
|
|
11207
|
+
justify-content: space-between;
|
|
11208
|
+
margin-bottom: 6px;
|
|
11209
|
+
}
|
|
11210
|
+
.share-shuffle {
|
|
11211
|
+
border: none;
|
|
11212
|
+
background: none;
|
|
11213
|
+
color: var(--color-button-primary);
|
|
11214
|
+
font-size: 0.75rem;
|
|
11215
|
+
font-weight: 600;
|
|
11216
|
+
cursor: pointer;
|
|
11217
|
+
padding: 2px 4px;
|
|
11218
|
+
}
|
|
11219
|
+
.share-shuffle:hover { text-decoration: underline; }
|
|
11220
|
+
.share-text {
|
|
11221
|
+
width: 100%;
|
|
11222
|
+
box-sizing: border-box;
|
|
11223
|
+
resize: vertical;
|
|
11224
|
+
min-height: 72px;
|
|
11225
|
+
padding: 10px 12px;
|
|
11226
|
+
border: 1px solid var(--color-border-primary);
|
|
11227
|
+
border-radius: var(--radius-sm, 6px);
|
|
11228
|
+
background: var(--color-bg-primary);
|
|
11229
|
+
color: var(--color-text-primary);
|
|
11230
|
+
font-size: 0.8125rem;
|
|
11231
|
+
line-height: 1.5;
|
|
11232
|
+
font-family: inherit;
|
|
11233
|
+
}
|
|
11234
|
+
.share-text:focus {
|
|
11235
|
+
outline: none;
|
|
11236
|
+
border-color: var(--color-button-primary);
|
|
11237
|
+
}
|
|
11238
|
+
|
|
11239
|
+
.share-actions {
|
|
11240
|
+
display: flex;
|
|
11241
|
+
flex-wrap: wrap;
|
|
11242
|
+
gap: 8px;
|
|
11243
|
+
}
|
|
11244
|
+
.share-btn-primary, .share-btn-secondary {
|
|
11245
|
+
padding: 10px;
|
|
11246
|
+
border-radius: var(--radius-sm, 6px);
|
|
11247
|
+
font-size: 0.8125rem;
|
|
11248
|
+
font-weight: 600;
|
|
11249
|
+
cursor: pointer;
|
|
11250
|
+
border: 1px solid var(--color-border-primary);
|
|
11251
|
+
}
|
|
11252
|
+
.share-btn-primary {
|
|
11253
|
+
flex: 1 1 100%;
|
|
11254
|
+
background: var(--color-button-primary);
|
|
11255
|
+
color: var(--color-button-primary-text);
|
|
11256
|
+
border-color: var(--color-button-primary);
|
|
11257
|
+
}
|
|
11258
|
+
.share-btn-primary:hover { background: var(--color-button-primary-hover); }
|
|
11259
|
+
.share-btn-secondary {
|
|
11260
|
+
flex: 1 1 calc(50% - 4px);
|
|
11261
|
+
min-width: 90px;
|
|
11262
|
+
background: var(--color-bg-primary);
|
|
11263
|
+
color: var(--color-text-secondary);
|
|
11264
|
+
}
|
|
11265
|
+
.share-btn-secondary:hover { background: var(--color-bg-hover); }
|
|
11266
|
+
|
|
11267
|
+
#share-toggle-header svg { display: block; }
|
|
11268
|
+
|
|
11269
|
+
@media (max-width: 768px) {
|
|
11270
|
+
/* Sidebar becomes a fixed drawer on top of content */
|
|
11271
|
+
#sidebar {
|
|
11272
|
+
position: fixed;
|
|
11273
|
+
top: 0;
|
|
11274
|
+
left: 0;
|
|
11275
|
+
height: 100%;
|
|
11276
|
+
z-index: 200;
|
|
11277
|
+
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
|
|
11278
|
+
transition: transform 0.3s ease, background-color 0.3s ease;
|
|
11279
|
+
transform: translateX(0);
|
|
11280
|
+
margin-left: 0 !important;
|
|
11281
|
+
}
|
|
11282
|
+
/* active session: always show ⋯ button (no hover on touch) */
|
|
11283
|
+
.session-item.active .session-actions-btn { display: flex; }
|
|
11284
|
+
#sidebar.hidden {
|
|
11285
|
+
transform: translateX(-100%);
|
|
11286
|
+
margin-left: 0 !important;
|
|
11287
|
+
}
|
|
11288
|
+
#sidebar-resize-handle { display: none; }
|
|
11289
|
+
|
|
11290
|
+
/* Overlay backdrop */
|
|
11291
|
+
#sidebar-overlay {
|
|
11292
|
+
display: none;
|
|
11293
|
+
position: fixed;
|
|
11294
|
+
inset: 0;
|
|
11295
|
+
z-index: 199;
|
|
11296
|
+
background: rgba(0,0,0,0.4);
|
|
11297
|
+
}
|
|
11298
|
+
#sidebar-overlay.active {
|
|
11299
|
+
display: block;
|
|
11300
|
+
}
|
|
11301
|
+
|
|
11302
|
+
/* Main takes full width since sidebar is no longer in flow */
|
|
11303
|
+
#main {
|
|
11304
|
+
width: 100%;
|
|
11305
|
+
min-width: 0;
|
|
11306
|
+
overflow: visible;
|
|
11307
|
+
}
|
|
11308
|
+
|
|
11309
|
+
/* Tighten header padding */
|
|
11310
|
+
#top-header {
|
|
11311
|
+
padding: 0 0.75rem;
|
|
11312
|
+
}
|
|
11313
|
+
|
|
11314
|
+
/* Hide brand name and divider on mobile, keep only the logo icon */
|
|
11315
|
+
.header-logo,
|
|
11316
|
+
#header-brand .header-logo-divider,
|
|
11317
|
+
#header-brand.has-logo .header-logo-divider {
|
|
11318
|
+
display: none;
|
|
11319
|
+
}
|
|
11320
|
+
|
|
11321
|
+
/* Tighten right-side icon gap on mobile */
|
|
11322
|
+
#header-right {
|
|
11323
|
+
gap: 0.125rem;
|
|
11324
|
+
}
|
|
11325
|
+
|
|
11326
|
+
/* Session info bar: single-line, no hover-expand, font smaller */
|
|
11327
|
+
#session-info-bar {
|
|
11328
|
+
padding: 0.1875rem 0.5rem;
|
|
11329
|
+
margin-left: 0.75rem;
|
|
11330
|
+
margin-right: 0.75rem;
|
|
11331
|
+
font-size: 0.625rem;
|
|
11332
|
+
overflow: hidden;
|
|
11333
|
+
white-space: nowrap;
|
|
11334
|
+
flex-wrap: nowrap;
|
|
11335
|
+
}
|
|
11336
|
+
/* Always show detail fields on mobile (no hover) */
|
|
11337
|
+
#session-info-bar .sib-detail {
|
|
11338
|
+
display: contents;
|
|
11339
|
+
}
|
|
11340
|
+
/* Hide less-important fields and their separators (element + sib-sep-after-element pattern) */
|
|
11341
|
+
#sib-id,
|
|
11342
|
+
.sib-sep-after-id,
|
|
11343
|
+
#sib-dir,
|
|
11344
|
+
.sib-sep-after-dir,
|
|
11345
|
+
#sib-mode,
|
|
11346
|
+
.sib-sep-after-mode,
|
|
11347
|
+
#sib-reasoning-wrap,
|
|
11348
|
+
.sib-sep-after-reasoning,
|
|
11349
|
+
#sib-signal-wrap,
|
|
11350
|
+
.sib-sep-after-signal {
|
|
11351
|
+
display: none;
|
|
11352
|
+
}
|
|
11353
|
+
.sib-sep {
|
|
11354
|
+
margin: 0 0.25rem;
|
|
11355
|
+
}
|
|
11356
|
+
|
|
11357
|
+
/* Tighten input area outer padding on mobile */
|
|
11358
|
+
#input-area {
|
|
11359
|
+
padding: 0px 12px 12px;
|
|
11360
|
+
}
|
|
11361
|
+
|
|
11362
|
+
/* Input bar: proportional spacing, touch-friendly */
|
|
11363
|
+
#input-bar {
|
|
11364
|
+
padding: 0.375rem 0.5rem;
|
|
11365
|
+
gap: 0.25rem;
|
|
11366
|
+
}
|
|
11367
|
+
|
|
11368
|
+
/* Attach & slash buttons: slightly smaller touch target */
|
|
11369
|
+
#btn-attach {
|
|
11370
|
+
padding: 0.25rem;
|
|
11371
|
+
}
|
|
11372
|
+
#btn-slash {
|
|
11373
|
+
padding: 0.25rem 0.375rem;
|
|
11374
|
+
font-size: 0.875rem;
|
|
11375
|
+
}
|
|
11376
|
+
|
|
11377
|
+
/* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
|
|
11378
|
+
#user-input {
|
|
11379
|
+
font-size: 1rem;
|
|
11380
|
+
padding: 0.1875rem 0.375rem;
|
|
11381
|
+
}
|
|
11382
|
+
|
|
11383
|
+
/* Send button: bigger tap target */
|
|
11384
|
+
#btn-send, #btn-interrupt {
|
|
11385
|
+
padding: 0.3125rem 0.75rem;
|
|
11386
|
+
font-size: 0.875rem;
|
|
11387
|
+
}
|
|
11388
|
+
|
|
11389
|
+
/* Welcome page: vertically centered but shifted up, add horizontal padding */
|
|
11390
|
+
#welcome {
|
|
11391
|
+
justify-content: center;
|
|
11392
|
+
padding-bottom: 30vh;
|
|
11393
|
+
padding-left: 1.5rem;
|
|
11394
|
+
padding-right: 1.5rem;
|
|
11395
|
+
}
|
|
11396
|
+
|
|
11397
|
+
/* ── Tasks page ── */
|
|
11398
|
+
#task-detail-panel {
|
|
11399
|
+
overflow: visible;
|
|
11400
|
+
height: auto;
|
|
11401
|
+
flex: 1;
|
|
11402
|
+
min-height: 0;
|
|
11403
|
+
}
|
|
11404
|
+
#task-detail-body {
|
|
11405
|
+
padding: 1rem 1rem 5rem;
|
|
11406
|
+
gap: 0.75rem;
|
|
11407
|
+
overflow-y: auto;
|
|
11408
|
+
-webkit-overflow-scrolling: touch;
|
|
11409
|
+
overscroll-behavior: contain;
|
|
11410
|
+
flex: 1;
|
|
11411
|
+
min-height: 0;
|
|
11412
|
+
}
|
|
11413
|
+
/* btn-create-task: move below title instead of absolute top-right */
|
|
11414
|
+
.task-page-header {
|
|
11415
|
+
flex-direction: column;
|
|
11416
|
+
padding-right: 0;
|
|
11417
|
+
}
|
|
11418
|
+
.btn-create-task {
|
|
11419
|
+
position: static;
|
|
11420
|
+
align-self: flex-start;
|
|
11421
|
+
margin-top: 0.25rem;
|
|
11422
|
+
}
|
|
11423
|
+
/* Task cards: stack info and actions vertically */
|
|
11424
|
+
.task-card-main {
|
|
11425
|
+
flex-wrap: wrap;
|
|
11426
|
+
}
|
|
11427
|
+
.task-card-actions {
|
|
11428
|
+
width: 100%;
|
|
11429
|
+
flex-wrap: wrap;
|
|
11430
|
+
}
|
|
11431
|
+
/* Table: let it scroll horizontally, keep columns readable */
|
|
11432
|
+
#task-list-table {
|
|
11433
|
+
overflow-x: auto;
|
|
11434
|
+
-webkit-overflow-scrolling: touch;
|
|
11435
|
+
}
|
|
11436
|
+
|
|
11437
|
+
/* ── Skills page ── */
|
|
11438
|
+
#skills-panel {
|
|
11439
|
+
overflow: visible;
|
|
11440
|
+
height: auto;
|
|
11441
|
+
flex: 1;
|
|
11442
|
+
min-height: 0;
|
|
11443
|
+
}
|
|
11444
|
+
#skills-body {
|
|
11445
|
+
padding: 1rem 1rem 5rem;
|
|
11446
|
+
gap: 0.75rem;
|
|
11447
|
+
overflow-y: auto;
|
|
11448
|
+
-webkit-overflow-scrolling: touch;
|
|
11449
|
+
overscroll-behavior: contain;
|
|
11450
|
+
flex: 1;
|
|
11451
|
+
min-height: 0;
|
|
11452
|
+
}
|
|
11453
|
+
/* action buttons: move below title, inline row */
|
|
11454
|
+
.skills-page-header {
|
|
11455
|
+
padding-right: 0;
|
|
11456
|
+
}
|
|
11457
|
+
.skill-action-btns {
|
|
11458
|
+
position: static;
|
|
11459
|
+
margin-top: 0.5rem;
|
|
11460
|
+
}
|
|
11461
|
+
/* Show system skills toggle: give right margin */
|
|
11462
|
+
#label-show-system {
|
|
11463
|
+
margin-right: 0.5rem;
|
|
11464
|
+
}
|
|
11465
|
+
/* Skills tab bar: stack tabs and controls vertically */
|
|
11466
|
+
#skills-tabs {
|
|
11467
|
+
flex-direction: row;
|
|
11468
|
+
align-items: center;
|
|
11469
|
+
gap: 0.5rem;
|
|
11470
|
+
}
|
|
11471
|
+
.skills-tabs-left {
|
|
11472
|
+
display: flex;
|
|
11473
|
+
flex-shrink: 0;
|
|
11474
|
+
}
|
|
11475
|
+
.skills-tab {
|
|
11476
|
+
padding: 0.5rem 0.5rem;
|
|
11477
|
+
}
|
|
11478
|
+
.skills-tabs-controls {
|
|
11479
|
+
padding-right: 0;
|
|
11480
|
+
flex-shrink: 0;
|
|
11481
|
+
margin-bottom: 0.25rem;
|
|
11482
|
+
}
|
|
11483
|
+
|
|
11484
|
+
/* ── Settings page ── */
|
|
11485
|
+
#settings-header {
|
|
11486
|
+
padding: 0.75rem 1rem;
|
|
11487
|
+
font-size: 0.9375rem;
|
|
11488
|
+
}
|
|
11489
|
+
#settings-body {
|
|
11490
|
+
padding: 1rem 1rem 5rem;
|
|
11491
|
+
gap: 1.5rem;
|
|
11492
|
+
overflow-y: auto;
|
|
11493
|
+
-webkit-overflow-scrolling: touch;
|
|
11494
|
+
overscroll-behavior: contain;
|
|
11495
|
+
}
|
|
11496
|
+
#settings-panel {
|
|
11497
|
+
overflow: visible;
|
|
11498
|
+
height: auto;
|
|
11499
|
+
flex: 1;
|
|
11500
|
+
min-height: 0;
|
|
11501
|
+
}
|
|
11502
|
+
.settings-section-title {
|
|
11503
|
+
font-size: 0.9375rem;
|
|
11504
|
+
flex-wrap: wrap;
|
|
11505
|
+
gap: 0.5rem;
|
|
11506
|
+
}
|
|
11507
|
+
/* Add Model button: full width on mobile */
|
|
11508
|
+
.btn-settings-add {
|
|
11509
|
+
width: 100%;
|
|
11510
|
+
justify-content: center;
|
|
11511
|
+
}
|
|
11512
|
+
/* Model card: tighter, stack actions */
|
|
11513
|
+
.model-card {
|
|
11514
|
+
padding: 0.75rem 0.875rem;
|
|
11515
|
+
gap: 0.625rem;
|
|
11516
|
+
}
|
|
11517
|
+
.model-card-header {
|
|
11518
|
+
flex-wrap: wrap;
|
|
11519
|
+
gap: 0.5rem;
|
|
11520
|
+
}
|
|
11521
|
+
.model-card-actions {
|
|
11522
|
+
flex-wrap: wrap;
|
|
11523
|
+
}
|
|
11524
|
+
|
|
11525
|
+
/* ── Channels page ── */
|
|
11526
|
+
#channels-panel {
|
|
11527
|
+
overflow: visible;
|
|
11528
|
+
height: auto;
|
|
11529
|
+
flex: 1;
|
|
11530
|
+
min-height: 0;
|
|
11531
|
+
}
|
|
11532
|
+
#channels-body {
|
|
11533
|
+
padding: 1rem 1rem 5rem;
|
|
11534
|
+
gap: 1rem;
|
|
11535
|
+
overflow-y: auto;
|
|
11536
|
+
-webkit-overflow-scrolling: touch;
|
|
11537
|
+
overscroll-behavior: contain;
|
|
11538
|
+
}
|
|
11539
|
+
/* Channel card: tighter padding, stack footer buttons */
|
|
11540
|
+
.channel-card {
|
|
11541
|
+
padding: 0.875rem 1rem;
|
|
11542
|
+
gap: 0.75rem;
|
|
11543
|
+
}
|
|
11544
|
+
|
|
11545
|
+
/* ── Billing / Trash / Creator pages ── */
|
|
11546
|
+
#billing-body { padding: 1rem 1rem 5rem; }
|
|
11547
|
+
#trash-body { padding: 1rem 1rem 5rem; }
|
|
11548
|
+
#creator-body { padding: 1rem 1rem 5rem; }
|
|
10510
11549
|
|
|
10511
|
-
.
|
|
10512
|
-
font-size: 12px;
|
|
10513
|
-
font-weight: 600;
|
|
10514
|
-
color: var(--color-text-tertiary);
|
|
10515
|
-
}
|
|
11550
|
+
.billing-heatmap-row { grid-template-columns: 1fr; }
|
|
10516
11551
|
|
|
10517
|
-
|
|
10518
|
-
|
|
10519
|
-
|
|
10520
|
-
|
|
10521
|
-
|
|
10522
|
-
|
|
10523
|
-
|
|
10524
|
-
|
|
10525
|
-
|
|
10526
|
-
|
|
10527
|
-
|
|
10528
|
-
|
|
10529
|
-
|
|
10530
|
-
|
|
10531
|
-
|
|
10532
|
-
|
|
10533
|
-
|
|
10534
|
-
|
|
10535
|
-
|
|
10536
|
-
|
|
10537
|
-
|
|
10538
|
-
}
|
|
10539
|
-
.share-theme-chip:hover { transform: translateY(-1px); }
|
|
10540
|
-
.share-theme-chip.is-active { border-color: var(--color-button-primary); }
|
|
10541
|
-
.share-theme-name {
|
|
10542
|
-
font-size: 11px;
|
|
10543
|
-
font-weight: 700;
|
|
10544
|
-
color: rgba(0,0,0,.55);
|
|
10545
|
-
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
10546
|
-
pointer-events: none;
|
|
10547
|
-
}
|
|
10548
|
-
.share-theme-chip[data-theme="geek"] .share-theme-name {
|
|
10549
|
-
color: rgba(255,255,255,.92);
|
|
10550
|
-
text-shadow: 0 1px 2px rgba(0,0,0,.4);
|
|
10551
|
-
}
|
|
11552
|
+
/* ── MCP page ── */
|
|
11553
|
+
#mcp-panel {
|
|
11554
|
+
overflow: visible;
|
|
11555
|
+
height: auto;
|
|
11556
|
+
flex: 1;
|
|
11557
|
+
min-height: 0;
|
|
11558
|
+
}
|
|
11559
|
+
#mcp-body {
|
|
11560
|
+
padding: 1rem 1rem 5rem;
|
|
11561
|
+
gap: 1rem;
|
|
11562
|
+
overflow-y: auto;
|
|
11563
|
+
-webkit-overflow-scrolling: touch;
|
|
11564
|
+
overscroll-behavior: contain;
|
|
11565
|
+
}
|
|
11566
|
+
.channel-card-footer {
|
|
11567
|
+
flex-wrap: wrap;
|
|
11568
|
+
gap: 0.5rem;
|
|
11569
|
+
}
|
|
11570
|
+
.channel-card-actions {
|
|
11571
|
+
flex-wrap: wrap;
|
|
11572
|
+
gap: 0.375rem;
|
|
11573
|
+
}
|
|
10552
11574
|
|
|
10553
|
-
|
|
10554
|
-
|
|
10555
|
-
|
|
10556
|
-
|
|
10557
|
-
|
|
10558
|
-
|
|
10559
|
-
|
|
10560
|
-
|
|
10561
|
-
}
|
|
10562
|
-
.share-period {
|
|
10563
|
-
padding: 6px 16px;
|
|
10564
|
-
border: none;
|
|
10565
|
-
border-radius: var(--radius-sm, 5px);
|
|
10566
|
-
background: transparent;
|
|
10567
|
-
color: var(--color-text-secondary);
|
|
10568
|
-
font-size: 13px;
|
|
10569
|
-
font-weight: 600;
|
|
10570
|
-
cursor: pointer;
|
|
10571
|
-
transition: background .12s ease, color .12s ease;
|
|
10572
|
-
}
|
|
10573
|
-
.share-period:hover { color: var(--color-text-primary); }
|
|
10574
|
-
.share-period.is-active {
|
|
10575
|
-
background: var(--color-button-primary);
|
|
10576
|
-
color: var(--color-button-primary-text);
|
|
10577
|
-
}
|
|
11575
|
+
/* ── Profile / My Data page ── */
|
|
11576
|
+
#profile-body { padding: 1rem 0.875rem; }
|
|
11577
|
+
.profile-tab { padding: 0.5625rem 0.75rem; font-size: 0.75rem; }
|
|
11578
|
+
.profile-section-head { flex-wrap: wrap; }
|
|
11579
|
+
.profile-path { max-width: 100%; }
|
|
11580
|
+
.memory-card-head { flex-wrap: wrap; }
|
|
11581
|
+
.memory-card-actions { margin-top: 0.375rem; flex-wrap: wrap; }
|
|
11582
|
+
.btn-memory-curate span,
|
|
11583
|
+
.btn-memory-delete span { display: none; } /* icon-only on narrow screens */
|
|
10578
11584
|
|
|
10579
|
-
|
|
10580
|
-
|
|
10581
|
-
|
|
10582
|
-
|
|
10583
|
-
|
|
10584
|
-
|
|
10585
|
-
|
|
10586
|
-
|
|
10587
|
-
|
|
10588
|
-
|
|
10589
|
-
|
|
10590
|
-
|
|
10591
|
-
|
|
10592
|
-
|
|
10593
|
-
|
|
10594
|
-
|
|
10595
|
-
}
|
|
10596
|
-
.share-platform:hover {
|
|
10597
|
-
background: var(--color-bg-hover);
|
|
10598
|
-
border-color: var(--color-border-strong);
|
|
10599
|
-
}
|
|
10600
|
-
.share-platform.is-active {
|
|
10601
|
-
background: var(--color-button-primary);
|
|
10602
|
-
color: var(--color-button-primary-text);
|
|
10603
|
-
border-color: var(--color-button-primary);
|
|
10604
|
-
}
|
|
11585
|
+
/* ── File Recall page ── */
|
|
11586
|
+
.trash-toolbar {
|
|
11587
|
+
flex-wrap: wrap;
|
|
11588
|
+
gap: 0.5rem;
|
|
11589
|
+
}
|
|
11590
|
+
.trash-summary {
|
|
11591
|
+
width: 100%;
|
|
11592
|
+
}
|
|
11593
|
+
.trash-actions {
|
|
11594
|
+
flex-wrap: wrap;
|
|
11595
|
+
margin-left: 0;
|
|
11596
|
+
gap: 0.375rem;
|
|
11597
|
+
}
|
|
11598
|
+
.btn-trash-action {
|
|
11599
|
+
white-space: nowrap;
|
|
11600
|
+
flex-shrink: 0;
|
|
11601
|
+
}
|
|
10605
11602
|
|
|
10606
|
-
|
|
10607
|
-
.
|
|
10608
|
-
|
|
10609
|
-
|
|
10610
|
-
|
|
10611
|
-
|
|
10612
|
-
|
|
10613
|
-
.
|
|
10614
|
-
|
|
10615
|
-
|
|
10616
|
-
|
|
10617
|
-
|
|
10618
|
-
|
|
10619
|
-
|
|
10620
|
-
|
|
10621
|
-
|
|
10622
|
-
.
|
|
10623
|
-
|
|
10624
|
-
|
|
10625
|
-
box-sizing: border-box;
|
|
10626
|
-
resize: vertical;
|
|
10627
|
-
min-height: 72px;
|
|
10628
|
-
padding: 10px 12px;
|
|
10629
|
-
border: 1px solid var(--color-border-primary);
|
|
10630
|
-
border-radius: var(--radius-sm, 6px);
|
|
10631
|
-
background: var(--color-bg-primary);
|
|
10632
|
-
color: var(--color-text-primary);
|
|
10633
|
-
font-size: 13px;
|
|
10634
|
-
line-height: 1.5;
|
|
10635
|
-
font-family: inherit;
|
|
10636
|
-
}
|
|
10637
|
-
.share-text:focus {
|
|
10638
|
-
outline: none;
|
|
10639
|
-
border-color: var(--color-button-primary);
|
|
10640
|
-
}
|
|
11603
|
+
/* Latency signal popup (tap to show on mobile, replaces native title tooltip) */
|
|
11604
|
+
.sib-signal-popup {
|
|
11605
|
+
position: fixed;
|
|
11606
|
+
z-index: 500;
|
|
11607
|
+
background: var(--color-bg-secondary);
|
|
11608
|
+
border: 1px solid var(--color-border-primary);
|
|
11609
|
+
border-radius: 6px;
|
|
11610
|
+
padding: 0.5rem 0.75rem;
|
|
11611
|
+
font-size: 0.75rem;
|
|
11612
|
+
color: var(--color-text-primary);
|
|
11613
|
+
white-space: pre-line;
|
|
11614
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
|
|
11615
|
+
max-width: 80vw;
|
|
11616
|
+
pointer-events: none;
|
|
11617
|
+
}
|
|
11618
|
+
/* Make signal icon look tappable on mobile */
|
|
11619
|
+
.sib-signal-clickable {
|
|
11620
|
+
cursor: pointer;
|
|
11621
|
+
}
|
|
10641
11622
|
|
|
10642
|
-
.
|
|
10643
|
-
|
|
10644
|
-
|
|
10645
|
-
gap:
|
|
10646
|
-
}
|
|
10647
|
-
.
|
|
10648
|
-
|
|
10649
|
-
|
|
10650
|
-
|
|
10651
|
-
|
|
10652
|
-
|
|
10653
|
-
|
|
10654
|
-
|
|
10655
|
-
|
|
10656
|
-
|
|
10657
|
-
|
|
10658
|
-
|
|
10659
|
-
|
|
10660
|
-
|
|
10661
|
-
|
|
10662
|
-
|
|
10663
|
-
|
|
10664
|
-
|
|
10665
|
-
|
|
10666
|
-
|
|
11623
|
+
.billing-bottom-grid { grid-template-columns: 1fr; }
|
|
11624
|
+
.billing-section,
|
|
11625
|
+
.billing-sessions-section { padding: 0.875rem; }
|
|
11626
|
+
.billing-stats-row { gap: 0.5rem; }
|
|
11627
|
+
.billing-stat-card { padding: 0.75rem; }
|
|
11628
|
+
.mcp-cta {
|
|
11629
|
+
flex-direction: column;
|
|
11630
|
+
align-items: stretch;
|
|
11631
|
+
gap: 0.75rem;
|
|
11632
|
+
}
|
|
11633
|
+
.btn-mcp-cta { justify-content: center; }
|
|
11634
|
+
.billing-sessions-header {
|
|
11635
|
+
display: none;
|
|
11636
|
+
}
|
|
11637
|
+
.billing-session-row {
|
|
11638
|
+
display: flex;
|
|
11639
|
+
flex-direction: column;
|
|
11640
|
+
gap: 0.25rem;
|
|
11641
|
+
padding: 0.75rem 1rem;
|
|
11642
|
+
border: 1px solid var(--color-border-primary);
|
|
11643
|
+
border-radius: 8px;
|
|
11644
|
+
background: var(--color-bg-secondary);
|
|
11645
|
+
min-width: 0;
|
|
11646
|
+
overflow: hidden;
|
|
11647
|
+
}
|
|
11648
|
+
.billing-cell-session {
|
|
11649
|
+
min-width: 0;
|
|
11650
|
+
width: 100%;
|
|
11651
|
+
}
|
|
11652
|
+
.billing-cell-index,
|
|
11653
|
+
.billing-session-row > .billing-cell-number,
|
|
11654
|
+
.billing-session-row > .billing-cell-cost,
|
|
11655
|
+
.billing-session-row > .billing-cell-time {
|
|
11656
|
+
display: none;
|
|
11657
|
+
}
|
|
11658
|
+
.billing-session-numbers-row {
|
|
11659
|
+
display: flex;
|
|
11660
|
+
flex-wrap: wrap;
|
|
11661
|
+
gap: 0.25rem 1rem;
|
|
11662
|
+
font-size: 0.8125rem;
|
|
11663
|
+
font-family: var(--font-mono);
|
|
11664
|
+
color: var(--color-text-secondary);
|
|
11665
|
+
margin-top: 0.125rem;
|
|
11666
|
+
}
|
|
11667
|
+
.billing-session-numbers-row .billing-cell-cost {
|
|
11668
|
+
font-weight: 600;
|
|
11669
|
+
color: var(--color-text-primary);
|
|
11670
|
+
}
|
|
11671
|
+
.billing-session-numbers-row .billing-cell-time {
|
|
11672
|
+
flex: 1 0 100%;
|
|
11673
|
+
font-size: 0.7rem;
|
|
11674
|
+
color: var(--color-text-tertiary);
|
|
11675
|
+
}
|
|
10667
11676
|
}
|
|
10668
|
-
.share-btn-secondary:hover { background: var(--color-bg-hover); }
|
|
10669
|
-
|
|
10670
|
-
#share-toggle-header svg { display: block; }
|