openclacky 1.2.18 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +21 -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 +28 -0
- 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 +345 -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 +2038 -1147
- data/lib/clacky/web/app.js +22 -1
- data/lib/clacky/web/backup.js +119 -0
- data/lib/clacky/web/billing.js +94 -7
- 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 +159 -31
- data/lib/clacky/web/index.html +175 -55
- data/lib/clacky/web/logo_nav_dark.png +0 -0
- data/lib/clacky/web/onboard.js +114 -28
- data/lib/clacky/web/sessions.js +436 -192
- data/lib/clacky/web/settings.js +21 -1
- data/lib/clacky/web/skills.js +1 -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 +7 -3
- 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: 7rem; width: 100%; }
|
|
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: 2.
|
|
378
|
+
height: 2.3rem;
|
|
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;
|
|
@@ -326,9 +499,6 @@ body {
|
|
|
326
499
|
background: var(--color-bg-hover);
|
|
327
500
|
}
|
|
328
501
|
/* 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
502
|
#notify-toggle-header.notify-on:hover {
|
|
333
503
|
color: var(--color-accent-primary, var(--color-text-primary));
|
|
334
504
|
}
|
|
@@ -407,34 +577,50 @@ body {
|
|
|
407
577
|
display: flex;
|
|
408
578
|
flex-direction: column;
|
|
409
579
|
min-height: 0;
|
|
410
|
-
padding
|
|
580
|
+
padding: 0 6px 8px;
|
|
411
581
|
}
|
|
412
|
-
#session-list { padding:
|
|
582
|
+
#session-list { padding: 4px 0 0; min-height: 6.75rem; }
|
|
413
583
|
|
|
414
584
|
/* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
|
|
415
585
|
.sidebar-divider {
|
|
416
586
|
display: flex;
|
|
417
587
|
align-items: center;
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
font-size: 0.
|
|
422
|
-
font-weight:
|
|
588
|
+
gap: 8px;
|
|
589
|
+
padding: 14px 8px 7px;
|
|
590
|
+
font-family: var(--font-mono);
|
|
591
|
+
font-size: 0.65625rem;
|
|
592
|
+
font-weight: 500;
|
|
423
593
|
color: var(--color-text-tertiary);
|
|
424
594
|
text-transform: uppercase;
|
|
425
|
-
letter-spacing:
|
|
426
|
-
margin-top: 0.25rem;
|
|
595
|
+
letter-spacing: .14em;
|
|
427
596
|
position: sticky;
|
|
428
597
|
top: 0;
|
|
429
|
-
background: var(--color-bg-
|
|
598
|
+
background: var(--color-bg-primary);
|
|
430
599
|
z-index: 10;
|
|
431
600
|
}
|
|
432
601
|
.sidebar-divider:first-child {
|
|
433
602
|
margin-top: 0;
|
|
603
|
+
padding-top: 18px;
|
|
434
604
|
}
|
|
435
605
|
.sidebar-divider span {
|
|
436
|
-
flex: 1;
|
|
437
606
|
white-space: nowrap;
|
|
607
|
+
flex: 0 0 auto;
|
|
608
|
+
}
|
|
609
|
+
/* Pure label dividers (Config / My Data / Creator) get a trailing rule line */
|
|
610
|
+
.sidebar-divider:not(:has(.sidebar-divider-actions))::after {
|
|
611
|
+
content: "";
|
|
612
|
+
flex: 1;
|
|
613
|
+
height: 1px;
|
|
614
|
+
background: var(--color-border-secondary);
|
|
615
|
+
}
|
|
616
|
+
/* The Sessions divider keeps its action buttons pushed to the far right */
|
|
617
|
+
.sidebar-divider:has(.sidebar-divider-actions) {
|
|
618
|
+
justify-content: space-between;
|
|
619
|
+
}
|
|
620
|
+
.sidebar-divider-actions {
|
|
621
|
+
display: flex;
|
|
622
|
+
align-items: center;
|
|
623
|
+
gap: 4px;
|
|
438
624
|
}
|
|
439
625
|
|
|
440
626
|
/* ── Split button [+ ▾] ─────────────────────────────────────────────────── */
|
|
@@ -518,6 +704,7 @@ body {
|
|
|
518
704
|
Critical: all colors are neutrals — no hue bleeds onto the brand accent. */
|
|
519
705
|
.session-badge {
|
|
520
706
|
display: inline-block;
|
|
707
|
+
font-family: var(--font-mono);
|
|
521
708
|
font-size: 0.5625rem;
|
|
522
709
|
font-weight: 600;
|
|
523
710
|
line-height: 1;
|
|
@@ -525,7 +712,8 @@ body {
|
|
|
525
712
|
border-radius: var(--radius-xs);
|
|
526
713
|
margin-left: 0.3125rem;
|
|
527
714
|
vertical-align: middle;
|
|
528
|
-
letter-spacing: 0.
|
|
715
|
+
letter-spacing: 0.04em;
|
|
716
|
+
text-transform: uppercase;
|
|
529
717
|
background: var(--color-bg-tertiary);
|
|
530
718
|
color: var(--color-text-tertiary);
|
|
531
719
|
border: 1px solid var(--color-border-secondary);
|
|
@@ -549,12 +737,15 @@ body {
|
|
|
549
737
|
color: var(--color-text-muted);
|
|
550
738
|
opacity: 0.8;
|
|
551
739
|
}
|
|
552
|
-
/* Agent profile: coding —
|
|
553
|
-
|
|
740
|
+
/* Agent profile: coding — the most common badge, so it's the quietest:
|
|
741
|
+
a hollow neutral mono marker that reads as a system tag, not a label. */
|
|
554
742
|
.session-badge--coding {
|
|
555
|
-
background:
|
|
556
|
-
color:
|
|
557
|
-
border-color:
|
|
743
|
+
background: transparent;
|
|
744
|
+
color: var(--color-text-muted);
|
|
745
|
+
border-color: var(--color-border-strong);
|
|
746
|
+
}
|
|
747
|
+
.session-item.active .session-badge--coding {
|
|
748
|
+
color: var(--color-text-tertiary);
|
|
558
749
|
}
|
|
559
750
|
|
|
560
751
|
|
|
@@ -590,18 +781,86 @@ body {
|
|
|
590
781
|
color: var(--color-accent-primary);
|
|
591
782
|
}
|
|
592
783
|
|
|
593
|
-
/* ──
|
|
594
|
-
.
|
|
595
|
-
|
|
596
|
-
|
|
784
|
+
/* ── Command-palette search overlay (⌘K) ─────────────────────────────────── */
|
|
785
|
+
.cmd-palette-overlay {
|
|
786
|
+
position: fixed;
|
|
787
|
+
inset: 0;
|
|
788
|
+
z-index: 1000;
|
|
789
|
+
display: flex;
|
|
790
|
+
align-items: flex-start;
|
|
791
|
+
justify-content: center;
|
|
792
|
+
padding-top: 4.75rem;
|
|
793
|
+
background: rgba(0, 0, 0, 0.35);
|
|
597
794
|
opacity: 0;
|
|
598
|
-
transition:
|
|
599
|
-
padding: 0 0.625rem;
|
|
795
|
+
transition: opacity 0.16s ease;
|
|
600
796
|
}
|
|
601
|
-
.
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
797
|
+
[data-theme="dark"] .cmd-palette-overlay {
|
|
798
|
+
background: rgba(0, 0, 0, 0.55);
|
|
799
|
+
}
|
|
800
|
+
.cmd-palette-overlay[hidden] { display: none; }
|
|
801
|
+
.cmd-palette-overlay.cmd-palette--open { opacity: 1; }
|
|
802
|
+
|
|
803
|
+
.cmd-palette {
|
|
804
|
+
width: 100%;
|
|
805
|
+
max-width: 34rem;
|
|
806
|
+
margin: 0 1rem;
|
|
807
|
+
background: var(--color-bg-card, var(--color-bg-secondary));
|
|
808
|
+
border: 1px solid var(--color-border-primary);
|
|
809
|
+
border-radius: 12px;
|
|
810
|
+
box-shadow: var(--shadow-lg, 0 12px 40px rgba(0,0,0,0.25));
|
|
811
|
+
overflow: hidden;
|
|
812
|
+
transform: translateY(-8px) scale(0.99);
|
|
813
|
+
transition: transform 0.16s ease;
|
|
814
|
+
}
|
|
815
|
+
.cmd-palette--open .cmd-palette {
|
|
816
|
+
transform: translateY(0) scale(1);
|
|
817
|
+
}
|
|
818
|
+
.cmd-palette .search-panel-card {
|
|
819
|
+
border: none;
|
|
820
|
+
border-radius: 0;
|
|
821
|
+
border-bottom: 1px solid var(--color-border-secondary);
|
|
822
|
+
background: transparent;
|
|
823
|
+
}
|
|
824
|
+
.cmd-palette .search-input-row { height: 3rem; }
|
|
825
|
+
.cmd-palette .search-input { font-size: 0.9375rem; }
|
|
826
|
+
|
|
827
|
+
/* ESC chip in the input row */
|
|
828
|
+
.cmd-palette-esc {
|
|
829
|
+
flex-shrink: 0;
|
|
830
|
+
font-family: var(--font-mono);
|
|
831
|
+
font-size: 0.625rem;
|
|
832
|
+
letter-spacing: 0.04em;
|
|
833
|
+
color: var(--color-text-muted);
|
|
834
|
+
padding: 0.125rem 0.375rem;
|
|
835
|
+
border: 1px solid var(--color-border-secondary);
|
|
836
|
+
border-radius: var(--radius-sm);
|
|
837
|
+
background: var(--color-bg-secondary);
|
|
838
|
+
cursor: pointer;
|
|
839
|
+
transition: color 0.12s, border-color 0.12s;
|
|
840
|
+
}
|
|
841
|
+
.cmd-palette-esc:hover {
|
|
842
|
+
color: var(--color-text-secondary);
|
|
843
|
+
border-color: var(--color-border-primary);
|
|
844
|
+
}
|
|
845
|
+
|
|
846
|
+
/* Results region */
|
|
847
|
+
.cmd-palette-results {
|
|
848
|
+
max-height: min(26rem, 60vh);
|
|
849
|
+
overflow-y: auto;
|
|
850
|
+
padding: 0.375rem 0.5rem 0.5rem;
|
|
851
|
+
}
|
|
852
|
+
.cmd-palette-results .session-item { border-radius: 7px; }
|
|
853
|
+
.cmd-palette-hint {
|
|
854
|
+
padding: 1.75rem 1rem;
|
|
855
|
+
text-align: center;
|
|
856
|
+
font-size: 0.8125rem;
|
|
857
|
+
color: var(--color-text-muted);
|
|
858
|
+
}
|
|
859
|
+
|
|
860
|
+
#header-cmdbar.active {
|
|
861
|
+
border-color: var(--color-accent-primary);
|
|
862
|
+
background: var(--color-bg-hover);
|
|
863
|
+
color: var(--color-text-secondary);
|
|
605
864
|
}
|
|
606
865
|
|
|
607
866
|
/* Card container — one unified bordered box */
|
|
@@ -920,11 +1179,10 @@ body {
|
|
|
920
1179
|
display: flex;
|
|
921
1180
|
align-items: center;
|
|
922
1181
|
gap: 0.4375rem;
|
|
923
|
-
padding: 0.375rem 0.
|
|
1182
|
+
padding: 0.375rem 0.5rem 0.3125rem 0.625rem;
|
|
924
1183
|
border-radius: var(--radius-sm);
|
|
925
1184
|
cursor: pointer;
|
|
926
1185
|
margin-bottom: 1px;
|
|
927
|
-
border: 1px solid transparent;
|
|
928
1186
|
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
|
|
929
1187
|
}
|
|
930
1188
|
/* Two-row text block next to dot */
|
|
@@ -940,8 +1198,9 @@ body {
|
|
|
940
1198
|
display: flex;
|
|
941
1199
|
align-items: center;
|
|
942
1200
|
gap: 0.25rem;
|
|
943
|
-
color: var(--color-text-
|
|
944
|
-
font-
|
|
1201
|
+
color: var(--color-text-primary);
|
|
1202
|
+
font-size: 0.8125rem;
|
|
1203
|
+
font-weight: 400;
|
|
945
1204
|
transition: color var(--transition-fast), font-weight var(--transition-fast);
|
|
946
1205
|
}
|
|
947
1206
|
.session-item .session-name .session-name__text {
|
|
@@ -963,10 +1222,6 @@ body {
|
|
|
963
1222
|
.session-item.active {
|
|
964
1223
|
background: var(--color-accent-soft);
|
|
965
1224
|
}
|
|
966
|
-
.session-item.active .session-name {
|
|
967
|
-
color: var(--color-text-primary);
|
|
968
|
-
font-weight: 600;
|
|
969
|
-
}
|
|
970
1225
|
/* Left indicator bar (0.1875rem) — brand color, the ONE place it shows up big */
|
|
971
1226
|
.session-item.active::before {
|
|
972
1227
|
content: '';
|
|
@@ -1013,8 +1268,8 @@ body {
|
|
|
1013
1268
|
color: var(--color-text-tertiary);
|
|
1014
1269
|
}
|
|
1015
1270
|
.session-item.active .session-pin-icon {
|
|
1016
|
-
opacity:
|
|
1017
|
-
color: var(--color-
|
|
1271
|
+
opacity: 0.6;
|
|
1272
|
+
color: var(--color-text-tertiary);
|
|
1018
1273
|
}
|
|
1019
1274
|
|
|
1020
1275
|
/* Actions menu dropdown */
|
|
@@ -1151,12 +1406,27 @@ body {
|
|
|
1151
1406
|
/* Meta: second row — tasks + cost */
|
|
1152
1407
|
.session-meta {
|
|
1153
1408
|
display: block;
|
|
1409
|
+
font-family: var(--font-mono);
|
|
1154
1410
|
font-size: 0.625rem;
|
|
1411
|
+
letter-spacing: 0.01em;
|
|
1155
1412
|
color: var(--color-text-muted);
|
|
1156
1413
|
white-space: nowrap;
|
|
1157
1414
|
opacity: 0.7;
|
|
1158
|
-
margin-top:
|
|
1415
|
+
margin-top: 2px;
|
|
1159
1416
|
}
|
|
1417
|
+
.session-meta-sep {
|
|
1418
|
+
display: inline-block;
|
|
1419
|
+
width: 0.125rem;
|
|
1420
|
+
height: 0.125rem;
|
|
1421
|
+
border-radius: 50%;
|
|
1422
|
+
background: currentColor;
|
|
1423
|
+
opacity: 0.6;
|
|
1424
|
+
margin: 0 0.3rem;
|
|
1425
|
+
vertical-align: middle;
|
|
1426
|
+
position: relative;
|
|
1427
|
+
top: -0.0625rem;
|
|
1428
|
+
}
|
|
1429
|
+
|
|
1160
1430
|
.session-dot {
|
|
1161
1431
|
flex-shrink: 0;
|
|
1162
1432
|
display: inline-block;
|
|
@@ -1166,11 +1436,11 @@ body {
|
|
|
1166
1436
|
margin-right: 0.25rem;
|
|
1167
1437
|
vertical-align: middle;
|
|
1168
1438
|
position: relative;
|
|
1169
|
-
top: -
|
|
1439
|
+
top: -0.0625rem;
|
|
1170
1440
|
}
|
|
1171
1441
|
/* Idle state no longer renders a dot at all — rule kept for safety / future use */
|
|
1172
1442
|
.dot-idle { background: var(--color-text-secondary); opacity: 0.4; }
|
|
1173
|
-
.dot-running { background: var(--
|
|
1443
|
+
.dot-running { background: var(--live); opacity: 1; animation: pulse 1.6s ease-in-out infinite; }
|
|
1174
1444
|
.dot-error { background: var(--color-error); opacity: 1; }
|
|
1175
1445
|
|
|
1176
1446
|
@keyframes pulse {
|
|
@@ -1178,6 +1448,10 @@ body {
|
|
|
1178
1448
|
50% { opacity: .4; }
|
|
1179
1449
|
}
|
|
1180
1450
|
|
|
1451
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1452
|
+
.dot-running { animation: none; }
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1181
1455
|
/* ── Task items in sidebar ───────────────────────────────────────────────── */
|
|
1182
1456
|
#task-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
|
|
1183
1457
|
|
|
@@ -1191,66 +1465,68 @@ body {
|
|
|
1191
1465
|
|
|
1192
1466
|
.task-item {
|
|
1193
1467
|
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;
|
|
1468
|
+
border-radius: 8px;
|
|
1469
|
+
padding: 8px 10px;
|
|
1470
|
+
margin: 0 0 2px 0;
|
|
1471
|
+
cursor: pointer;
|
|
1472
|
+
color: var(--color-text-primary);
|
|
1473
|
+
transition: background .12s, color .12s;
|
|
1204
1474
|
}
|
|
1205
|
-
/* Hover: subtle background */
|
|
1206
1475
|
.task-item:hover {
|
|
1207
1476
|
background: var(--color-bg-hover);
|
|
1208
1477
|
}
|
|
1209
|
-
|
|
1478
|
+
.task-item:hover .task-name {
|
|
1479
|
+
color: var(--color-text-primary);
|
|
1480
|
+
opacity: 1;
|
|
1481
|
+
}
|
|
1210
1482
|
.task-item.active {
|
|
1211
1483
|
background: var(--color-accent-soft);
|
|
1212
1484
|
}
|
|
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
1485
|
.task-item.active::before {
|
|
1220
|
-
content:
|
|
1486
|
+
content: "";
|
|
1221
1487
|
position: absolute;
|
|
1222
|
-
left:
|
|
1488
|
+
left: -10px;
|
|
1223
1489
|
top: 50%;
|
|
1224
1490
|
transform: translateY(-50%);
|
|
1225
|
-
width:
|
|
1226
|
-
height:
|
|
1491
|
+
width: 3px;
|
|
1492
|
+
height: 17px;
|
|
1493
|
+
border-radius: 0 3px 3px 0;
|
|
1227
1494
|
background: var(--color-accent-primary);
|
|
1228
|
-
border-radius: 0 2px 2px 0;
|
|
1229
1495
|
}
|
|
1230
1496
|
|
|
1231
1497
|
.task-row {
|
|
1232
1498
|
display: flex;
|
|
1233
1499
|
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;
|
|
1500
|
+
gap: 9px;
|
|
1239
1501
|
}
|
|
1240
1502
|
.task-icon {
|
|
1241
|
-
width:
|
|
1242
|
-
height:
|
|
1503
|
+
width: 16px;
|
|
1504
|
+
height: 16px;
|
|
1243
1505
|
flex-shrink: 0;
|
|
1244
|
-
|
|
1506
|
+
color: var(--color-text-primary);
|
|
1507
|
+
transition: color .12s, opacity .12s;
|
|
1508
|
+
}
|
|
1509
|
+
.task-item:hover .task-icon {
|
|
1510
|
+
color: var(--color-text-primary);
|
|
1511
|
+
opacity: 1;
|
|
1512
|
+
}
|
|
1513
|
+
.task-item.active .task-icon {
|
|
1514
|
+
color: var(--color-text-primary);
|
|
1515
|
+
opacity: 1;
|
|
1245
1516
|
}
|
|
1246
1517
|
.task-info { flex: 1; min-width: 0; }
|
|
1247
1518
|
.task-name {
|
|
1248
1519
|
display: block;
|
|
1249
|
-
font-size: 0.
|
|
1250
|
-
font-weight:
|
|
1520
|
+
font-size: 0.875rem;
|
|
1521
|
+
font-weight: 400;
|
|
1251
1522
|
white-space: nowrap;
|
|
1252
1523
|
overflow: hidden;
|
|
1253
1524
|
text-overflow: ellipsis;
|
|
1525
|
+
color: var(--color-text-primary);
|
|
1526
|
+
transition: color .12s, opacity .12s;
|
|
1527
|
+
}
|
|
1528
|
+
.task-item.active .task-name {
|
|
1529
|
+
color: var(--color-text-primary);
|
|
1254
1530
|
}
|
|
1255
1531
|
.task-cron {
|
|
1256
1532
|
display: block;
|
|
@@ -1356,11 +1632,9 @@ body {
|
|
|
1356
1632
|
text-align: center;
|
|
1357
1633
|
padding: 2.5rem 1.25rem;
|
|
1358
1634
|
}
|
|
1359
|
-
|
|
1360
1635
|
.task-table-empty p {
|
|
1361
1636
|
margin: 0 0 1rem;
|
|
1362
1637
|
}
|
|
1363
|
-
|
|
1364
1638
|
.task-create-btn {
|
|
1365
1639
|
display: inline-flex;
|
|
1366
1640
|
align-items: center;
|
|
@@ -1374,158 +1648,131 @@ body {
|
|
|
1374
1648
|
cursor: pointer;
|
|
1375
1649
|
transition: background 0.15s;
|
|
1376
1650
|
}
|
|
1377
|
-
|
|
1378
1651
|
.task-create-btn:hover {
|
|
1379
1652
|
background: var(--color-button-primary-hover);
|
|
1380
1653
|
}
|
|
1381
1654
|
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
display:
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
gap: 0.75rem;
|
|
1388
|
-
padding: 0.625rem 0.875rem;
|
|
1389
|
-
min-width: 37.5rem;
|
|
1655
|
+
/* ── Task card list ──────────────────────────────────────────────────────── */
|
|
1656
|
+
#task-list-table {
|
|
1657
|
+
display: flex;
|
|
1658
|
+
flex-direction: column;
|
|
1659
|
+
gap: 0.5rem;
|
|
1390
1660
|
}
|
|
1391
|
-
|
|
1392
|
-
.task-table-header {
|
|
1661
|
+
.task-card {
|
|
1393
1662
|
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
1663
|
border: 1px solid var(--color-border-primary);
|
|
1408
|
-
border-
|
|
1409
|
-
|
|
1664
|
+
border-radius: 8px;
|
|
1665
|
+
padding: 0.875rem 1rem;
|
|
1666
|
+
transition: border-color .15s;
|
|
1410
1667
|
}
|
|
1411
|
-
.task-
|
|
1412
|
-
|
|
1668
|
+
.task-card:hover { border-color: var(--color-text-muted); }
|
|
1669
|
+
.task-card-paused { opacity: 0.65; }
|
|
1670
|
+
.task-card-main {
|
|
1671
|
+
display: flex;
|
|
1672
|
+
align-items: center;
|
|
1673
|
+
gap: 0.75rem;
|
|
1413
1674
|
}
|
|
1414
|
-
.task-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
.task-col-name {
|
|
1675
|
+
.task-card-icon {
|
|
1676
|
+
flex-shrink: 0;
|
|
1677
|
+
width: 2rem;
|
|
1678
|
+
height: 2rem;
|
|
1419
1679
|
display: flex;
|
|
1420
1680
|
align-items: center;
|
|
1421
|
-
|
|
1681
|
+
justify-content: center;
|
|
1682
|
+
border-radius: 6px;
|
|
1683
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
1684
|
+
color: var(--color-accent-primary);
|
|
1685
|
+
}
|
|
1686
|
+
.task-card-paused .task-card-icon {
|
|
1687
|
+
background: var(--color-bg-hover);
|
|
1688
|
+
color: var(--color-text-secondary);
|
|
1689
|
+
}
|
|
1690
|
+
.task-card-info {
|
|
1691
|
+
flex: 1;
|
|
1422
1692
|
min-width: 0;
|
|
1423
1693
|
}
|
|
1424
|
-
.task-
|
|
1694
|
+
.task-card-title-row {
|
|
1425
1695
|
display: flex;
|
|
1426
|
-
|
|
1427
|
-
|
|
1696
|
+
align-items: center;
|
|
1697
|
+
gap: 0.5rem;
|
|
1698
|
+
margin-bottom: 0.25rem;
|
|
1699
|
+
flex-wrap: wrap;
|
|
1428
1700
|
}
|
|
1429
|
-
.task-name
|
|
1430
|
-
font-weight: 600;
|
|
1701
|
+
.task-card-name {
|
|
1431
1702
|
font-size: 0.8125rem;
|
|
1703
|
+
font-weight: 600;
|
|
1432
1704
|
color: var(--color-text-primary);
|
|
1433
|
-
white-space: nowrap;
|
|
1434
|
-
overflow: hidden;
|
|
1435
|
-
text-overflow: ellipsis;
|
|
1436
1705
|
}
|
|
1437
|
-
|
|
1438
|
-
.task-name-sched {
|
|
1439
|
-
display: none;
|
|
1440
|
-
}
|
|
1441
|
-
|
|
1442
|
-
.task-col-schedule {
|
|
1706
|
+
.task-card-cron {
|
|
1443
1707
|
font-size: 0.75rem;
|
|
1444
1708
|
font-family: monospace;
|
|
1445
1709
|
color: var(--color-warning);
|
|
1446
|
-
white-space: nowrap;
|
|
1447
|
-
overflow: hidden;
|
|
1448
|
-
text-overflow: ellipsis;
|
|
1449
1710
|
}
|
|
1450
|
-
.
|
|
1451
|
-
color: var(--color-text-secondary);
|
|
1711
|
+
.task-card-cron-manual {
|
|
1452
1712
|
font-style: italic;
|
|
1453
1713
|
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
1714
|
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
1715
|
}
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1716
|
+
.task-card-badge {
|
|
1717
|
+
font-size: 0.625rem;
|
|
1718
|
+
font-weight: 600;
|
|
1719
|
+
padding: 2px 0.4375rem;
|
|
1720
|
+
border-radius: 10px;
|
|
1721
|
+
letter-spacing: 0.3px;
|
|
1481
1722
|
}
|
|
1482
|
-
.task-
|
|
1483
|
-
|
|
1723
|
+
.task-card-badge-paused {
|
|
1724
|
+
background: var(--color-bg-hover);
|
|
1725
|
+
color: var(--color-text-secondary);
|
|
1726
|
+
border: 1px solid var(--color-border-primary);
|
|
1484
1727
|
}
|
|
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 {
|
|
1728
|
+
.task-card-preview {
|
|
1490
1729
|
font-size: 0.75rem;
|
|
1491
1730
|
color: var(--color-text-secondary);
|
|
1492
1731
|
white-space: nowrap;
|
|
1493
1732
|
overflow: hidden;
|
|
1494
1733
|
text-overflow: ellipsis;
|
|
1495
1734
|
}
|
|
1496
|
-
|
|
1497
|
-
.task-col-actions {
|
|
1735
|
+
.task-card-actions {
|
|
1498
1736
|
display: flex;
|
|
1737
|
+
align-items: center;
|
|
1499
1738
|
gap: 0.375rem;
|
|
1500
|
-
justify-content: flex-end;
|
|
1501
1739
|
flex-shrink: 0;
|
|
1502
|
-
overflow: visible;
|
|
1503
1740
|
}
|
|
1504
|
-
|
|
1505
|
-
.task-btn {
|
|
1741
|
+
.task-run-btn {
|
|
1506
1742
|
display: inline-flex;
|
|
1507
1743
|
align-items: center;
|
|
1508
|
-
gap: 0.
|
|
1744
|
+
gap: 0.3rem;
|
|
1745
|
+
padding: 0.4375rem 0.875rem;
|
|
1746
|
+
background: var(--color-accent-primary);
|
|
1747
|
+
color: #fff;
|
|
1509
1748
|
border: none;
|
|
1510
|
-
border-radius:
|
|
1511
|
-
padding: 0.3125rem 0.75rem;
|
|
1749
|
+
border-radius: 6px;
|
|
1512
1750
|
font-size: 0.75rem;
|
|
1751
|
+
font-weight: 500;
|
|
1513
1752
|
cursor: pointer;
|
|
1514
1753
|
white-space: nowrap;
|
|
1515
|
-
transition: background .12s
|
|
1516
|
-
}
|
|
1517
|
-
.task-btn:hover {
|
|
1518
|
-
transform: translateY(-1px);
|
|
1754
|
+
transition: background .12s;
|
|
1519
1755
|
}
|
|
1520
|
-
.task-btn:
|
|
1521
|
-
|
|
1756
|
+
.task-run-btn:hover { background: var(--color-accent-hover); }
|
|
1757
|
+
.task-action-btn {
|
|
1758
|
+
display: inline-flex;
|
|
1759
|
+
align-items: center;
|
|
1760
|
+
gap: 0.3rem;
|
|
1761
|
+
padding: 0.4375rem 0.75rem;
|
|
1762
|
+
border: none;
|
|
1763
|
+
border-radius: 6px;
|
|
1764
|
+
font-size: 0.75rem;
|
|
1765
|
+
font-weight: 500;
|
|
1766
|
+
cursor: pointer;
|
|
1767
|
+
white-space: nowrap;
|
|
1768
|
+
transition: background .12s, color .12s;
|
|
1769
|
+
background: var(--color-bg-hover);
|
|
1770
|
+
color: var(--color-text-secondary);
|
|
1522
1771
|
}
|
|
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; }
|
|
1772
|
+
.task-action-btn:hover { color: var(--color-text-primary); background: var(--color-border-primary); }
|
|
1773
|
+
.task-btn-resume { color: var(--color-accent-primary); }
|
|
1774
|
+
.task-btn-resume:hover { background: color-mix(in srgb, var(--color-accent-primary) 12%, transparent); color: var(--color-accent-primary); }
|
|
1775
|
+
.task-btn-del:hover { background: var(--color-error-bg); color: var(--color-error); }
|
|
1529
1776
|
|
|
1530
1777
|
.empty-hint {
|
|
1531
1778
|
color: var(--color-text-secondary);
|
|
@@ -1552,22 +1799,85 @@ body {
|
|
|
1552
1799
|
flex-direction: column;
|
|
1553
1800
|
align-items: center;
|
|
1554
1801
|
justify-content: center;
|
|
1555
|
-
gap:
|
|
1802
|
+
gap: 1.25rem;
|
|
1556
1803
|
color: var(--color-text-secondary);
|
|
1557
1804
|
}
|
|
1558
|
-
|
|
1559
|
-
|
|
1805
|
+
|
|
1806
|
+
/* ── Empty / welcome state — agent "standing by" cockpit ─────────────────── */
|
|
1807
|
+
.ce-mark {
|
|
1808
|
+
width: 3.25rem;
|
|
1809
|
+
height: 3.25rem;
|
|
1810
|
+
border-radius: 0.875rem;
|
|
1811
|
+
background: var(--color-accent-soft);
|
|
1812
|
+
display: grid;
|
|
1813
|
+
place-items: center;
|
|
1814
|
+
}
|
|
1815
|
+
.ce-mark svg { width: 1.625rem; height: 1.625rem; color: var(--color-accent-primary); }
|
|
1816
|
+
.ce-head {
|
|
1817
|
+
display: flex;
|
|
1818
|
+
flex-direction: column;
|
|
1819
|
+
gap: 0.375rem;
|
|
1820
|
+
align-items: center;
|
|
1821
|
+
}
|
|
1822
|
+
.ce-title {
|
|
1823
|
+
font-size: 1.3125rem;
|
|
1824
|
+
font-weight: 680;
|
|
1825
|
+
color: var(--color-text-primary);
|
|
1826
|
+
letter-spacing: -0.01em;
|
|
1827
|
+
text-align: center;
|
|
1828
|
+
}
|
|
1829
|
+
.ce-sub {
|
|
1830
|
+
color: var(--color-text-tertiary);
|
|
1831
|
+
font-size: 0.84375rem;
|
|
1832
|
+
text-align: center;
|
|
1833
|
+
}
|
|
1834
|
+
.chips {
|
|
1835
|
+
display: flex;
|
|
1836
|
+
gap: 0.625rem;
|
|
1837
|
+
flex-wrap: wrap;
|
|
1838
|
+
justify-content: center;
|
|
1839
|
+
max-width: 34rem;
|
|
1840
|
+
}
|
|
1841
|
+
.chip {
|
|
1842
|
+
display: flex;
|
|
1843
|
+
align-items: center;
|
|
1844
|
+
gap: 0.5625rem;
|
|
1845
|
+
padding: 0.6875rem 0.9375rem;
|
|
1846
|
+
border: 1px solid var(--color-border-primary);
|
|
1847
|
+
border-radius: 0.625rem;
|
|
1848
|
+
background: var(--color-bg-primary);
|
|
1849
|
+
cursor: pointer;
|
|
1850
|
+
text-align: left;
|
|
1851
|
+
transition: border-color 0.14s, transform 0.14s;
|
|
1852
|
+
}
|
|
1853
|
+
.chip:hover {
|
|
1854
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 45%, var(--color-border-primary));
|
|
1855
|
+
transform: translateY(-1px);
|
|
1856
|
+
}
|
|
1857
|
+
.chip .ci {
|
|
1858
|
+
width: 1.875rem;
|
|
1859
|
+
height: 1.875rem;
|
|
1860
|
+
border-radius: 0.5rem;
|
|
1861
|
+
background: var(--color-bg-hover);
|
|
1862
|
+
display: grid;
|
|
1863
|
+
place-items: center;
|
|
1864
|
+
flex-shrink: 0;
|
|
1865
|
+
}
|
|
1866
|
+
.chip .ci svg { width: 1rem; height: 1rem; color: var(--color-text-secondary); }
|
|
1867
|
+
.chip .ct-wrap { display: flex; flex-direction: column; gap: 1px; }
|
|
1868
|
+
.chip .ct { font-size: 0.8125rem; color: var(--color-text-primary); font-weight: 550; }
|
|
1869
|
+
.chip .cd { font-size: 0.71875rem; color: var(--color-text-tertiary); }
|
|
1560
1870
|
#btn-welcome-new {
|
|
1561
|
-
background:
|
|
1562
|
-
color: var(--color-
|
|
1871
|
+
background: transparent;
|
|
1872
|
+
color: var(--color-text-tertiary);
|
|
1563
1873
|
border: none;
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
font-size: 0.875rem;
|
|
1874
|
+
padding: 0.25rem 0.5rem;
|
|
1875
|
+
font-size: 0.8125rem;
|
|
1567
1876
|
cursor: pointer;
|
|
1568
|
-
transition:
|
|
1877
|
+
transition: color var(--transition-fast);
|
|
1569
1878
|
}
|
|
1570
|
-
#btn-welcome-new:hover {
|
|
1879
|
+
#btn-welcome-new:hover { color: var(--color-text-secondary); text-decoration: underline; }
|
|
1880
|
+
|
|
1571
1881
|
|
|
1572
1882
|
/* ── Chat panel ──────────────────────────────────────────────────────────── */
|
|
1573
1883
|
#chat-panel { flex: 1; display: flex; flex-direction: row; overflow: hidden; position: relative; }
|
|
@@ -1617,6 +1927,7 @@ body {
|
|
|
1617
1927
|
overflow-y: auto;
|
|
1618
1928
|
padding: 0.375rem 0.25rem;
|
|
1619
1929
|
font-size: 0.8125rem;
|
|
1930
|
+
font-family: var(--font-mono);
|
|
1620
1931
|
}
|
|
1621
1932
|
.wt-node { user-select: none; }
|
|
1622
1933
|
.wt-row {
|
|
@@ -1683,7 +1994,7 @@ body {
|
|
|
1683
1994
|
flex: 1;
|
|
1684
1995
|
overflow-y: auto;
|
|
1685
1996
|
overflow-x: hidden;
|
|
1686
|
-
padding: 1.25rem;
|
|
1997
|
+
padding: 1.75rem 1.25rem 1.25rem;
|
|
1687
1998
|
display: flex;
|
|
1688
1999
|
flex-direction: column;
|
|
1689
2000
|
gap: 0.75rem;
|
|
@@ -1817,8 +2128,8 @@ body {
|
|
|
1817
2128
|
.msg-user .msg-time { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
|
|
1818
2129
|
.msg-assistant .msg-time { color: var(--color-text-secondary); left: 0; right: auto; padding-left: 0.25rem; }
|
|
1819
2130
|
|
|
1820
|
-
.msg-user { background: var(--color-accent-
|
|
1821
|
-
[data-theme="dark"] .msg-user { background: var(--color-accent-
|
|
2131
|
+
.msg-user { background: var(--color-accent-soft); color: var(--color-text-primary); align-self: flex-end; white-space: pre-wrap; border: 1px solid var(--color-border-secondary); }
|
|
2132
|
+
[data-theme="dark"] .msg-user { background: var(--color-accent-soft); }
|
|
1822
2133
|
.msg-assistant { background: var(--color-bg-tertiary); border: 1px solid var(--color-border-primary); align-self: flex-start; }
|
|
1823
2134
|
|
|
1824
2135
|
/* ── Copy button on assistant messages ────────────────────────────────────
|
|
@@ -2158,7 +2469,7 @@ body {
|
|
|
2158
2469
|
.token-usage-line b { font-weight: 600; color: var(--color-text-secondary); }
|
|
2159
2470
|
.tu-label { color: var(--color-text-tertiary); font-weight: 600; }
|
|
2160
2471
|
.tu-sep { color: var(--color-text-muted); opacity: 0.45; padding: 0 1px; }
|
|
2161
|
-
.tu-cache { color: var(--color-
|
|
2472
|
+
.tu-cache { color: var(--color-text-tertiary); font-weight: 600; } /* [*] cache hit — neutral, not brand */
|
|
2162
2473
|
.tu-field { color: var(--color-text-muted); }
|
|
2163
2474
|
.tu-cost { color: var(--color-text-tertiary); }
|
|
2164
2475
|
.tu-delta { font-weight: 700; }
|
|
@@ -2174,7 +2485,7 @@ body {
|
|
|
2174
2485
|
flex-wrap: wrap;
|
|
2175
2486
|
}
|
|
2176
2487
|
.tool-item .token-usage-line.tu-attached:hover { opacity: 0.95; }
|
|
2177
|
-
.tu-delta-neg { color:
|
|
2488
|
+
.tu-delta-neg { color: #34d399; } /* compression / token reduction — semantic green */
|
|
2178
2489
|
|
|
2179
2490
|
/* Detail fields: hidden by default, revealed on hover */
|
|
2180
2491
|
.tu-detail {
|
|
@@ -2236,7 +2547,7 @@ body {
|
|
|
2236
2547
|
align-items: baseline;
|
|
2237
2548
|
gap: 0.375rem;
|
|
2238
2549
|
}
|
|
2239
|
-
.tool-item-name { color: var(--color-
|
|
2550
|
+
.tool-item-name { color: var(--color-text-primary); font-weight: 600; }
|
|
2240
2551
|
.tool-item-arg { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
|
|
2241
2552
|
.tool-item-header.tool-item-expandable { cursor: pointer; user-select: none; }
|
|
2242
2553
|
.tool-item-header.tool-item-expandable:hover .tool-item-name,
|
|
@@ -2260,7 +2571,10 @@ body {
|
|
|
2260
2571
|
.tool-item-status { margin-left: auto; font-size: 0.6875rem; flex-shrink: 0; }
|
|
2261
2572
|
.tool-item-status.ok { color: var(--color-success); }
|
|
2262
2573
|
.tool-item-status.err { color: var(--color-error); }
|
|
2263
|
-
.tool-item-status.running { color: var(--
|
|
2574
|
+
.tool-item-status.running { color: var(--live); animation: pulse 1.6s ease-in-out infinite; }
|
|
2575
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2576
|
+
.tool-item-status.running { animation: none; }
|
|
2577
|
+
}
|
|
2264
2578
|
.tool-item-stdout {
|
|
2265
2579
|
margin: 0.25rem 0 2px 0;
|
|
2266
2580
|
padding: 0.375rem 0.5rem;
|
|
@@ -2463,25 +2777,46 @@ body {
|
|
|
2463
2777
|
#session-info-bar {
|
|
2464
2778
|
display: flex;
|
|
2465
2779
|
align-items: center;
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2780
|
+
gap: 6px;
|
|
2781
|
+
flex-wrap: wrap;
|
|
2782
|
+
padding: 6px 0 6px 0;
|
|
2783
|
+
margin-left: 24px;
|
|
2784
|
+
margin-right: 24px;
|
|
2785
|
+
background: transparent;
|
|
2786
|
+
border-top: none;
|
|
2469
2787
|
font-size: 0.6875rem;
|
|
2470
|
-
color: var(--color-text-
|
|
2788
|
+
color: var(--color-text-tertiary);
|
|
2471
2789
|
font-family: var(--font-mono, monospace);
|
|
2472
2790
|
white-space: nowrap;
|
|
2473
2791
|
overflow: hidden;
|
|
2474
2792
|
flex-shrink: 0;
|
|
2475
|
-
opacity: 0.
|
|
2793
|
+
opacity: 0.95;
|
|
2476
2794
|
transition: opacity 0.15s ease;
|
|
2477
2795
|
cursor: default;
|
|
2478
2796
|
}
|
|
2479
2797
|
|
|
2798
|
+
#session-info-bar .sib-sep {
|
|
2799
|
+
opacity: 0.3;
|
|
2800
|
+
}
|
|
2480
2801
|
#session-info-bar:hover {
|
|
2481
2802
|
opacity: 1;
|
|
2482
2803
|
}
|
|
2483
2804
|
#session-info-bar:hover .sib-sep { opacity: 0.35; }
|
|
2484
2805
|
|
|
2806
|
+
/* Dark theme optical adjustments for high glanceability */
|
|
2807
|
+
[data-theme="dark"] #session-info-bar {
|
|
2808
|
+
color: var(--color-text-secondary);
|
|
2809
|
+
}
|
|
2810
|
+
[data-theme="dark"] #session-info-bar .sib-sep {
|
|
2811
|
+
opacity: 0.45;
|
|
2812
|
+
}
|
|
2813
|
+
[data-theme="dark"] #sib-id {
|
|
2814
|
+
opacity: 0.6;
|
|
2815
|
+
}
|
|
2816
|
+
[data-theme="dark"] #sib-dir {
|
|
2817
|
+
opacity: 0.85;
|
|
2818
|
+
}
|
|
2819
|
+
|
|
2485
2820
|
/* Show all fields by default, not just on hover */
|
|
2486
2821
|
.sib-detail {
|
|
2487
2822
|
display: contents;
|
|
@@ -2561,20 +2896,45 @@ body {
|
|
|
2561
2896
|
}
|
|
2562
2897
|
|
|
2563
2898
|
.sib-sep {
|
|
2564
|
-
margin: 0
|
|
2899
|
+
margin: 0;
|
|
2565
2900
|
opacity: 0.18; /* very subtle — only visible on hover */
|
|
2566
2901
|
flex-shrink: 0;
|
|
2567
2902
|
transition: opacity 0.15s ease;
|
|
2568
2903
|
}
|
|
2569
2904
|
|
|
2570
2905
|
/* Status colors (Tier 1) */
|
|
2571
|
-
|
|
2572
|
-
|
|
2906
|
+
#sib-status {
|
|
2907
|
+
display: inline-flex;
|
|
2908
|
+
align-items: center;
|
|
2909
|
+
gap: 0.375rem;
|
|
2910
|
+
flex-shrink: 0;
|
|
2911
|
+
letter-spacing: 0.04em;
|
|
2912
|
+
}
|
|
2913
|
+
.sib-dot {
|
|
2914
|
+
width: 6px;
|
|
2915
|
+
height: 6px;
|
|
2916
|
+
border-radius: 50%;
|
|
2917
|
+
background: currentColor;
|
|
2918
|
+
flex-shrink: 0;
|
|
2919
|
+
}
|
|
2920
|
+
.sib-status-idle { color: var(--color-text-tertiary); opacity: 1; }
|
|
2921
|
+
.sib-status-idle .sib-dot { background: var(--color-text-muted); }
|
|
2922
|
+
.sib-status-running { color: var(--live); }
|
|
2923
|
+
.sib-status-running .sib-dot {
|
|
2924
|
+
background: var(--live);
|
|
2925
|
+
box-shadow: 0 0 0 0 var(--live);
|
|
2926
|
+
animation: sib-heartbeat 1.6s ease-in-out infinite;
|
|
2927
|
+
}
|
|
2573
2928
|
.sib-status-error { color: #e05f5f; }
|
|
2574
2929
|
|
|
2575
|
-
@keyframes sib-
|
|
2576
|
-
0
|
|
2577
|
-
|
|
2930
|
+
@keyframes sib-heartbeat {
|
|
2931
|
+
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 55%, transparent); }
|
|
2932
|
+
70% { box-shadow: 0 0 0 5px transparent; }
|
|
2933
|
+
100% { box-shadow: 0 0 0 0 transparent; }
|
|
2934
|
+
}
|
|
2935
|
+
|
|
2936
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2937
|
+
.sib-status-running .sib-dot { animation: none; }
|
|
2578
2938
|
}
|
|
2579
2939
|
|
|
2580
2940
|
#sib-dir {
|
|
@@ -2734,7 +3094,7 @@ body {
|
|
|
2734
3094
|
position: fixed;
|
|
2735
3095
|
/* Position will be calculated dynamically via JavaScript */
|
|
2736
3096
|
min-width: 12.5rem;
|
|
2737
|
-
max-width: 17.5rem;
|
|
3097
|
+
max-width: min(17.5rem, calc(100vw - 1.5rem));
|
|
2738
3098
|
background: var(--color-bg-secondary);
|
|
2739
3099
|
border: 1px solid var(--color-border-primary);
|
|
2740
3100
|
border-radius: 8px;
|
|
@@ -2742,6 +3102,7 @@ body {
|
|
|
2742
3102
|
z-index: 1000;
|
|
2743
3103
|
max-height: 18.75rem;
|
|
2744
3104
|
overflow-y: auto;
|
|
3105
|
+
overflow-x: hidden;
|
|
2745
3106
|
}
|
|
2746
3107
|
.sib-model-option {
|
|
2747
3108
|
padding: 0.5625rem 0.875rem;
|
|
@@ -2753,6 +3114,8 @@ body {
|
|
|
2753
3114
|
display: flex;
|
|
2754
3115
|
align-items: center;
|
|
2755
3116
|
justify-content: space-between;
|
|
3117
|
+
gap: 0.375rem;
|
|
3118
|
+
min-width: 0;
|
|
2756
3119
|
}
|
|
2757
3120
|
.sib-model-option:hover {
|
|
2758
3121
|
background: var(--color-bg-hover);
|
|
@@ -2929,47 +3292,136 @@ body {
|
|
|
2929
3292
|
white-space: nowrap;
|
|
2930
3293
|
}
|
|
2931
3294
|
|
|
2932
|
-
.sib-model-
|
|
3295
|
+
.sib-model-vision {
|
|
2933
3296
|
display: inline-flex;
|
|
2934
|
-
align-items:
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
gap: 0.125rem;
|
|
2944
|
-
}
|
|
2945
|
-
.sib-model-option .sib-model-name-main {
|
|
2946
|
-
overflow: hidden;
|
|
2947
|
-
text-overflow: ellipsis;
|
|
2948
|
-
white-space: nowrap;
|
|
2949
|
-
flex-shrink: 0;
|
|
2950
|
-
max-width: 100%;
|
|
2951
|
-
}
|
|
2952
|
-
.sib-model-option .sib-model-name-sub {
|
|
2953
|
-
font-size: 0.6875rem;
|
|
3297
|
+
align-items: center;
|
|
3298
|
+
flex: 0 0 auto;
|
|
3299
|
+
margin-left: 0.375rem;
|
|
3300
|
+
padding: 1px 0.375rem;
|
|
3301
|
+
font-size: 0.5625rem;
|
|
3302
|
+
line-height: 1.4;
|
|
3303
|
+
border-radius: 8px;
|
|
3304
|
+
border: 1px solid var(--color-border-primary);
|
|
3305
|
+
background: var(--color-bg-secondary);
|
|
2954
3306
|
color: var(--color-text-secondary);
|
|
2955
|
-
opacity: 0.75;
|
|
2956
|
-
overflow: hidden;
|
|
2957
|
-
text-overflow: ellipsis;
|
|
2958
3307
|
white-space: nowrap;
|
|
2959
|
-
max-width: 100%;
|
|
2960
3308
|
}
|
|
2961
|
-
.sib-model-
|
|
2962
|
-
|
|
2963
|
-
color: var(--color-
|
|
2964
|
-
|
|
2965
|
-
overflow: hidden;
|
|
2966
|
-
text-overflow: ellipsis;
|
|
2967
|
-
white-space: nowrap;
|
|
2968
|
-
max-width: 100%;
|
|
3309
|
+
.sib-model-vision.is-ok {
|
|
3310
|
+
color: var(--color-success);
|
|
3311
|
+
border-color: var(--color-success-border);
|
|
3312
|
+
background: var(--color-success-bg);
|
|
2969
3313
|
}
|
|
2970
|
-
.sib-model-
|
|
2971
|
-
|
|
2972
|
-
|
|
3314
|
+
.sib-model-vision.is-missing {
|
|
3315
|
+
color: var(--color-error);
|
|
3316
|
+
border-color: var(--color-error-border);
|
|
3317
|
+
background: var(--color-error-bg);
|
|
3318
|
+
}
|
|
3319
|
+
|
|
3320
|
+
.sib-gen-footer {
|
|
3321
|
+
display: flex;
|
|
3322
|
+
align-items: center;
|
|
3323
|
+
gap: 0.375rem;
|
|
3324
|
+
padding: 0.375rem 0.5rem;
|
|
3325
|
+
border-top: 1px solid var(--color-border-primary);
|
|
3326
|
+
background: var(--color-bg-primary);
|
|
3327
|
+
position: sticky;
|
|
3328
|
+
bottom: 0;
|
|
3329
|
+
z-index: 1;
|
|
3330
|
+
}
|
|
3331
|
+
.sib-gen-title {
|
|
3332
|
+
font-size: 0.625rem;
|
|
3333
|
+
color: var(--color-text-tertiary);
|
|
3334
|
+
flex: 0 0 auto;
|
|
3335
|
+
}
|
|
3336
|
+
.sib-gen-list {
|
|
3337
|
+
display: flex;
|
|
3338
|
+
align-items: center;
|
|
3339
|
+
gap: 0.25rem;
|
|
3340
|
+
flex: 1 1 auto;
|
|
3341
|
+
flex-wrap: wrap;
|
|
3342
|
+
}
|
|
3343
|
+
.sib-gen-chip {
|
|
3344
|
+
display: inline-flex;
|
|
3345
|
+
align-items: center;
|
|
3346
|
+
padding: 1px 0.375rem;
|
|
3347
|
+
font-size: 0.5625rem;
|
|
3348
|
+
line-height: 1.4;
|
|
3349
|
+
border-radius: 8px;
|
|
3350
|
+
border: 1px solid var(--color-border-primary);
|
|
3351
|
+
background: var(--color-bg-secondary);
|
|
3352
|
+
color: var(--color-text-secondary);
|
|
3353
|
+
white-space: nowrap;
|
|
3354
|
+
}
|
|
3355
|
+
.sib-gen-chip.is-ok {
|
|
3356
|
+
color: var(--color-success);
|
|
3357
|
+
border-color: var(--color-success-border);
|
|
3358
|
+
background: var(--color-success-bg);
|
|
3359
|
+
}
|
|
3360
|
+
.sib-gen-chip.is-off {
|
|
3361
|
+
color: var(--color-text-tertiary);
|
|
3362
|
+
opacity: 0.75;
|
|
3363
|
+
}
|
|
3364
|
+
.sib-gen-config {
|
|
3365
|
+
flex: 0 0 auto;
|
|
3366
|
+
margin-left: auto;
|
|
3367
|
+
padding: 2px 0.5rem;
|
|
3368
|
+
font-size: 0.5625rem;
|
|
3369
|
+
line-height: 1.4;
|
|
3370
|
+
font-family: inherit;
|
|
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
|
+
cursor: pointer;
|
|
3376
|
+
white-space: nowrap;
|
|
3377
|
+
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
|
|
3378
|
+
}
|
|
3379
|
+
.sib-gen-config:hover {
|
|
3380
|
+
background: var(--color-bg-hover);
|
|
3381
|
+
border-color: var(--color-accent-primary);
|
|
3382
|
+
color: var(--color-accent-primary);
|
|
3383
|
+
}
|
|
3384
|
+
.sib-model-option .sib-model-name {
|
|
3385
|
+
display: inline-flex;
|
|
3386
|
+
align-items: baseline;
|
|
3387
|
+
gap: 0.375rem;
|
|
3388
|
+
overflow: hidden;
|
|
3389
|
+
flex: 1 1 auto;
|
|
3390
|
+
min-width: 0;
|
|
3391
|
+
}
|
|
3392
|
+
.sib-model-option .sib-model-name.has-sub {
|
|
3393
|
+
flex-direction: column;
|
|
3394
|
+
align-items: flex-start;
|
|
3395
|
+
gap: 0.125rem;
|
|
3396
|
+
}
|
|
3397
|
+
.sib-model-option .sib-model-name-main {
|
|
3398
|
+
overflow: hidden;
|
|
3399
|
+
text-overflow: ellipsis;
|
|
3400
|
+
white-space: nowrap;
|
|
3401
|
+
flex: 0 1 auto;
|
|
3402
|
+
min-width: 0;
|
|
3403
|
+
}
|
|
3404
|
+
.sib-model-option .sib-model-name-sub {
|
|
3405
|
+
font-size: 0.6875rem;
|
|
3406
|
+
color: var(--color-text-secondary);
|
|
3407
|
+
opacity: 0.75;
|
|
3408
|
+
overflow: hidden;
|
|
3409
|
+
text-overflow: ellipsis;
|
|
3410
|
+
white-space: nowrap;
|
|
3411
|
+
max-width: 100%;
|
|
3412
|
+
}
|
|
3413
|
+
.sib-model-option .sib-model-name-override {
|
|
3414
|
+
font-size: 0.6875rem;
|
|
3415
|
+
color: var(--color-accent-primary);
|
|
3416
|
+
font-weight: 600;
|
|
3417
|
+
overflow: hidden;
|
|
3418
|
+
text-overflow: ellipsis;
|
|
3419
|
+
white-space: nowrap;
|
|
3420
|
+
max-width: 100%;
|
|
3421
|
+
}
|
|
3422
|
+
.sib-model-option .sib-model-right {
|
|
3423
|
+
display: inline-flex;
|
|
3424
|
+
align-items: center;
|
|
2973
3425
|
gap: 0.5rem;
|
|
2974
3426
|
flex-shrink: 0;
|
|
2975
3427
|
}
|
|
@@ -3008,12 +3460,11 @@ body {
|
|
|
3008
3460
|
|
|
3009
3461
|
#input-area {
|
|
3010
3462
|
position: relative;
|
|
3011
|
-
|
|
3012
|
-
background: var(--color-bg-secondary);
|
|
3463
|
+
background: transparent;
|
|
3013
3464
|
flex-shrink: 0;
|
|
3014
|
-
min-height: var(--footer-height);
|
|
3015
3465
|
display: flex;
|
|
3016
3466
|
flex-direction: column;
|
|
3467
|
+
padding: 0px 24px 20px;
|
|
3017
3468
|
}
|
|
3018
3469
|
|
|
3019
3470
|
/* Hide top border when skill autocomplete is visible */
|
|
@@ -3028,17 +3479,28 @@ body {
|
|
|
3028
3479
|
outline-offset: -2px;
|
|
3029
3480
|
}
|
|
3030
3481
|
|
|
3031
|
-
/* Image preview strip */
|
|
3482
|
+
/* Image preview strip — visually merged into the input-bar card above the textarea */
|
|
3032
3483
|
#image-preview-strip {
|
|
3033
3484
|
display: flex;
|
|
3034
3485
|
flex-wrap: wrap;
|
|
3035
3486
|
gap: 0.5rem;
|
|
3036
|
-
padding: 0.5rem
|
|
3487
|
+
padding: 0.5rem 0.75rem;
|
|
3488
|
+
background: var(--color-bg-primary);
|
|
3489
|
+
border: 1px solid var(--color-border-primary);
|
|
3490
|
+
border-bottom: none;
|
|
3491
|
+
border-radius: 13px 13px 0 0;
|
|
3492
|
+
box-shadow: var(--shadow-card);
|
|
3493
|
+
margin-bottom: -1px;
|
|
3494
|
+
}
|
|
3495
|
+
/* Square off the top corners of the input-bar when the preview strip sits above it */
|
|
3496
|
+
#input-area:has(#image-preview-strip:not([style*="display:none"])):not(:has(#image-preview-strip[style*="display: none"])) #input-bar {
|
|
3497
|
+
border-top-left-radius: 0;
|
|
3498
|
+
border-top-right-radius: 0;
|
|
3037
3499
|
}
|
|
3038
3500
|
.img-preview-item {
|
|
3039
3501
|
position: relative;
|
|
3040
|
-
width:
|
|
3041
|
-
height:
|
|
3502
|
+
width: 3.25rem;
|
|
3503
|
+
height: 3.25rem;
|
|
3042
3504
|
border-radius: 6px;
|
|
3043
3505
|
overflow: hidden;
|
|
3044
3506
|
border: 1px solid var(--color-border-primary);
|
|
@@ -3074,7 +3536,7 @@ body {
|
|
|
3074
3536
|
flex-direction: row;
|
|
3075
3537
|
align-items: center;
|
|
3076
3538
|
gap: 0.5rem;
|
|
3077
|
-
height:
|
|
3539
|
+
height: 3.25rem;
|
|
3078
3540
|
padding: 0 1.75rem 0 0.625rem;
|
|
3079
3541
|
border-radius: 8px;
|
|
3080
3542
|
border: 1px solid var(--color-border-primary);
|
|
@@ -3339,92 +3801,132 @@ body {
|
|
|
3339
3801
|
|
|
3340
3802
|
/* ── Input bar ───────────────────────────────────────────────────────────── */
|
|
3341
3803
|
#input-bar {
|
|
3342
|
-
margin
|
|
3343
|
-
|
|
3344
|
-
|
|
3804
|
+
margin: 0;
|
|
3805
|
+
padding: 10px 12px;
|
|
3806
|
+
border: 1px solid var(--color-border-primary);
|
|
3807
|
+
border-radius: 13px;
|
|
3808
|
+
background: var(--color-bg-primary);
|
|
3345
3809
|
display: flex;
|
|
3346
|
-
gap: 0.375rem;
|
|
3347
3810
|
align-items: center;
|
|
3348
|
-
|
|
3811
|
+
gap: 8px;
|
|
3812
|
+
box-shadow: var(--shadow-card);
|
|
3813
|
+
transition: border-color .14s;
|
|
3814
|
+
}
|
|
3815
|
+
#input-bar:focus-within {
|
|
3816
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 50%, var(--color-border-primary));
|
|
3349
3817
|
}
|
|
3350
3818
|
|
|
3351
3819
|
/* Attach button — left of textarea, vertically centered */
|
|
3352
3820
|
#btn-attach {
|
|
3353
3821
|
border: none;
|
|
3354
3822
|
background: transparent;
|
|
3355
|
-
color: var(--color-text-
|
|
3823
|
+
color: var(--color-text-tertiary);
|
|
3356
3824
|
cursor: pointer;
|
|
3357
|
-
width:
|
|
3358
|
-
height:
|
|
3825
|
+
width: 32px;
|
|
3826
|
+
height: 32px;
|
|
3359
3827
|
padding: 0;
|
|
3360
|
-
|
|
3828
|
+
margin-right: -4px;
|
|
3361
3829
|
flex-shrink: 0;
|
|
3362
|
-
display:
|
|
3363
|
-
|
|
3364
|
-
|
|
3365
|
-
|
|
3830
|
+
display: grid;
|
|
3831
|
+
place-items: center;
|
|
3832
|
+
border-radius: 8px;
|
|
3833
|
+
transition: background .12s, color .12s;
|
|
3834
|
+
}
|
|
3835
|
+
#btn-attach:hover {
|
|
3836
|
+
color: var(--color-text-primary);
|
|
3837
|
+
background: var(--color-bg-hover);
|
|
3838
|
+
}
|
|
3839
|
+
#btn-attach svg {
|
|
3840
|
+
width: 18px;
|
|
3841
|
+
height: 18px;
|
|
3366
3842
|
}
|
|
3367
|
-
|
|
3843
|
+
|
|
3368
3844
|
#btn-slash {
|
|
3369
3845
|
border: none;
|
|
3370
3846
|
background: transparent;
|
|
3371
|
-
color: var(--color-text-
|
|
3847
|
+
color: var(--color-text-tertiary);
|
|
3372
3848
|
cursor: pointer;
|
|
3373
|
-
width:
|
|
3374
|
-
height:
|
|
3849
|
+
width: 32px;
|
|
3850
|
+
height: 32px;
|
|
3375
3851
|
padding: 0;
|
|
3376
|
-
line-height: 1;
|
|
3377
3852
|
flex-shrink: 0;
|
|
3378
|
-
display:
|
|
3379
|
-
|
|
3380
|
-
|
|
3381
|
-
border-radius: 6px;
|
|
3382
|
-
font-weight: 600;
|
|
3853
|
+
display: grid;
|
|
3854
|
+
place-items: center;
|
|
3855
|
+
border-radius: 8px;
|
|
3383
3856
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
|
|
3857
|
+
transition: background .12s, color .12s;
|
|
3384
3858
|
}
|
|
3385
3859
|
#btn-slash span {
|
|
3386
|
-
font-size:
|
|
3860
|
+
font-size: 0.875rem;
|
|
3861
|
+
font-weight: 400;
|
|
3862
|
+
}
|
|
3863
|
+
#btn-slash:hover {
|
|
3864
|
+
color: var(--color-text-primary);
|
|
3865
|
+
background: var(--color-bg-hover);
|
|
3866
|
+
}
|
|
3867
|
+
#btn-slash.active {
|
|
3868
|
+
color: var(--color-accent-primary);
|
|
3869
|
+
background: var(--color-accent-soft);
|
|
3387
3870
|
}
|
|
3388
|
-
|
|
3389
|
-
#btn-slash.active { color: var(--color-accent-primary); }
|
|
3871
|
+
|
|
3390
3872
|
#user-input {
|
|
3391
3873
|
flex: 1;
|
|
3392
|
-
background:
|
|
3393
|
-
border:
|
|
3394
|
-
|
|
3874
|
+
background: transparent !important;
|
|
3875
|
+
border: none !important;
|
|
3876
|
+
outline: none !important;
|
|
3395
3877
|
color: var(--color-text-primary);
|
|
3396
|
-
padding:
|
|
3878
|
+
padding: 4px 6px;
|
|
3397
3879
|
font-size: 0.875rem;
|
|
3398
3880
|
resize: none;
|
|
3399
3881
|
max-height: 12.5rem;
|
|
3400
|
-
font-family:
|
|
3401
|
-
line-height: 1.
|
|
3882
|
+
font-family: var(--font-sans);
|
|
3883
|
+
line-height: 1.55;
|
|
3402
3884
|
overflow-y: auto;
|
|
3403
3885
|
scrollbar-width: none;
|
|
3886
|
+
margin: 0;
|
|
3404
3887
|
}
|
|
3405
3888
|
#user-input::-webkit-scrollbar { display: none; }
|
|
3406
|
-
|
|
3889
|
+
|
|
3407
3890
|
#btn-send, #btn-interrupt {
|
|
3408
3891
|
border: none;
|
|
3409
|
-
border-radius:
|
|
3410
|
-
|
|
3411
|
-
height:
|
|
3412
|
-
font-size: 0.8125rem;
|
|
3892
|
+
border-radius: 9px;
|
|
3893
|
+
width: 34px;
|
|
3894
|
+
height: 34px;
|
|
3413
3895
|
cursor: pointer;
|
|
3414
3896
|
white-space: nowrap;
|
|
3415
3897
|
flex-shrink: 0;
|
|
3416
|
-
display:
|
|
3417
|
-
|
|
3418
|
-
|
|
3898
|
+
display: grid;
|
|
3899
|
+
place-items: center;
|
|
3900
|
+
transition: background .12s, opacity .12s;
|
|
3901
|
+
}
|
|
3902
|
+
#btn-send {
|
|
3903
|
+
background: var(--color-accent-primary);
|
|
3904
|
+
color: #fff;
|
|
3905
|
+
}
|
|
3906
|
+
#btn-send svg {
|
|
3907
|
+
width: 15px;
|
|
3908
|
+
height: 15px;
|
|
3909
|
+
}
|
|
3910
|
+
#btn-send:hover {
|
|
3911
|
+
background: color-mix(in srgb, var(--color-accent-primary) 85%, #fff);
|
|
3912
|
+
}
|
|
3913
|
+
#btn-send:disabled {
|
|
3914
|
+
background: var(--color-border-primary);
|
|
3915
|
+
color: var(--color-text-tertiary);
|
|
3916
|
+
cursor: not-allowed;
|
|
3917
|
+
opacity: 0.6;
|
|
3918
|
+
}
|
|
3919
|
+
#btn-interrupt {
|
|
3920
|
+
background: var(--color-error);
|
|
3921
|
+
color: #fff;
|
|
3922
|
+
}
|
|
3923
|
+
#btn-interrupt svg {
|
|
3924
|
+
width: 14px;
|
|
3925
|
+
height: 14px;
|
|
3926
|
+
}
|
|
3927
|
+
#btn-interrupt:hover {
|
|
3928
|
+
background: color-mix(in srgb, var(--color-error) 85%, #fff);
|
|
3419
3929
|
}
|
|
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
3930
|
|
|
3429
3931
|
/* ── Sidebar footer ──────────────────────────────────────────────────────── */
|
|
3430
3932
|
#sidebar-footer {
|
|
@@ -3438,21 +3940,45 @@ body {
|
|
|
3438
3940
|
.sidebar-nav-btn {
|
|
3439
3941
|
display: flex;
|
|
3440
3942
|
align-items: center;
|
|
3441
|
-
gap:
|
|
3943
|
+
gap: 11px;
|
|
3442
3944
|
width: 100%;
|
|
3443
3945
|
background: transparent;
|
|
3444
3946
|
border: none;
|
|
3445
|
-
border-radius:
|
|
3446
|
-
color: var(--color-text-
|
|
3447
|
-
font-size: 0.
|
|
3448
|
-
|
|
3947
|
+
border-radius: 8px;
|
|
3948
|
+
color: var(--color-text-primary);
|
|
3949
|
+
font-size: 0.875rem;
|
|
3950
|
+
font-weight: 400;
|
|
3951
|
+
padding: 8px 10px;
|
|
3449
3952
|
cursor: pointer;
|
|
3450
3953
|
text-align: left;
|
|
3451
|
-
transition: background .
|
|
3954
|
+
transition: background .12s, color .12s, opacity .12s;
|
|
3955
|
+
}
|
|
3956
|
+
.sidebar-nav-btn:hover {
|
|
3957
|
+
background: var(--color-bg-hover);
|
|
3958
|
+
color: var(--color-text-primary);
|
|
3959
|
+
opacity: 1;
|
|
3960
|
+
}
|
|
3961
|
+
.sidebar-nav-btn:hover svg {
|
|
3962
|
+
color: var(--color-text-primary);
|
|
3963
|
+
opacity: 1;
|
|
3964
|
+
}
|
|
3965
|
+
.sidebar-nav-btn.active {
|
|
3966
|
+
background: var(--color-bg-hover);
|
|
3967
|
+
}
|
|
3968
|
+
.sidebar-nav-btn.active span {
|
|
3969
|
+
color: var(--color-text-primary);
|
|
3970
|
+
}
|
|
3971
|
+
.sidebar-nav-btn.active svg {
|
|
3972
|
+
color: var(--color-text-primary);
|
|
3973
|
+
opacity: 1;
|
|
3974
|
+
}
|
|
3975
|
+
.sidebar-nav-btn svg {
|
|
3976
|
+
width: 16px;
|
|
3977
|
+
height: 16px;
|
|
3978
|
+
flex-shrink: 0;
|
|
3979
|
+
color: var(--color-text-primary);
|
|
3980
|
+
transition: color .12s, opacity .12s;
|
|
3452
3981
|
}
|
|
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
3982
|
|
|
3457
3983
|
/* ── Settings panel ──────────────────────────────────────────────────────── */
|
|
3458
3984
|
#settings-panel {
|
|
@@ -3594,6 +4120,38 @@ body {
|
|
|
3594
4120
|
line-height: 1.5;
|
|
3595
4121
|
margin: 0;
|
|
3596
4122
|
}
|
|
4123
|
+
|
|
4124
|
+
/* ── Backup section ── */
|
|
4125
|
+
.backup-option,
|
|
4126
|
+
.backup-auto-label {
|
|
4127
|
+
font-size: 0.8125rem;
|
|
4128
|
+
color: var(--color-text-primary);
|
|
4129
|
+
display: flex;
|
|
4130
|
+
align-items: center;
|
|
4131
|
+
gap: 0.375rem;
|
|
4132
|
+
}
|
|
4133
|
+
.backup-option {
|
|
4134
|
+
margin: 0.75rem 0;
|
|
4135
|
+
}
|
|
4136
|
+
.backup-auto-row {
|
|
4137
|
+
display: flex;
|
|
4138
|
+
align-items: center;
|
|
4139
|
+
gap: 0.625rem;
|
|
4140
|
+
margin: 0.75rem 0;
|
|
4141
|
+
flex-wrap: wrap;
|
|
4142
|
+
}
|
|
4143
|
+
.backup-auto-hint {
|
|
4144
|
+
font-size: 0.75rem;
|
|
4145
|
+
color: var(--color-text-secondary);
|
|
4146
|
+
}
|
|
4147
|
+
.backup-actions {
|
|
4148
|
+
display: flex;
|
|
4149
|
+
align-items: center;
|
|
4150
|
+
gap: 0.75rem;
|
|
4151
|
+
margin: 0.75rem 0;
|
|
4152
|
+
flex-wrap: wrap;
|
|
4153
|
+
}
|
|
4154
|
+
|
|
3597
4155
|
.settings-network-url {
|
|
3598
4156
|
display: flex;
|
|
3599
4157
|
flex-direction: column;
|
|
@@ -4168,7 +4726,7 @@ body {
|
|
|
4168
4726
|
position: fixed;
|
|
4169
4727
|
inset: 0;
|
|
4170
4728
|
z-index: 1000;
|
|
4171
|
-
background: rgba(0, 0, 0, 0.
|
|
4729
|
+
background: rgba(0, 0, 0, 0.55);
|
|
4172
4730
|
display: flex;
|
|
4173
4731
|
align-items: center;
|
|
4174
4732
|
justify-content: center;
|
|
@@ -4190,19 +4748,18 @@ body {
|
|
|
4190
4748
|
}
|
|
4191
4749
|
.model-edit-modal-content {
|
|
4192
4750
|
max-width: 500px;
|
|
4193
|
-
overflow-y: auto;
|
|
4194
4751
|
}
|
|
4195
4752
|
.model-edit-modal-content .modal-body {
|
|
4196
|
-
overflow-y:
|
|
4753
|
+
overflow-y: auto;
|
|
4197
4754
|
}
|
|
4198
|
-
.modal-header {
|
|
4755
|
+
.modal-content .modal-header {
|
|
4199
4756
|
display: flex;
|
|
4200
4757
|
align-items: center;
|
|
4201
4758
|
justify-content: space-between;
|
|
4202
4759
|
padding: 1rem 1.25rem;
|
|
4203
4760
|
border-bottom: 1px solid var(--color-border-primary);
|
|
4204
4761
|
}
|
|
4205
|
-
.modal-header h3 {
|
|
4762
|
+
.modal-content .modal-header h3 {
|
|
4206
4763
|
margin: 0;
|
|
4207
4764
|
font-size: 1.0625rem;
|
|
4208
4765
|
font-weight: 600;
|
|
@@ -4225,20 +4782,20 @@ body {
|
|
|
4225
4782
|
background: var(--color-bg-hover);
|
|
4226
4783
|
color: var(--color-text-primary);
|
|
4227
4784
|
}
|
|
4228
|
-
.modal-body {
|
|
4229
|
-
padding: 1.25rem;
|
|
4785
|
+
.modal-content .modal-body {
|
|
4230
4786
|
overflow-y: auto;
|
|
4231
4787
|
display: flex;
|
|
4232
4788
|
flex-direction: column;
|
|
4233
4789
|
gap: 0.875rem;
|
|
4790
|
+
padding: 1.25rem;
|
|
4234
4791
|
}
|
|
4235
|
-
.modal-footer {
|
|
4792
|
+
.modal-content .modal-footer {
|
|
4236
4793
|
display: flex;
|
|
4237
4794
|
align-items: center;
|
|
4238
4795
|
justify-content: flex-end;
|
|
4239
4796
|
gap: 0.625rem;
|
|
4240
|
-
padding: 1rem 1.25rem;
|
|
4241
4797
|
border-top: 1px solid var(--color-border-primary);
|
|
4798
|
+
padding: 0.875rem 1.25rem;
|
|
4242
4799
|
}
|
|
4243
4800
|
.btn-secondary {
|
|
4244
4801
|
display: inline-flex;
|
|
@@ -4260,7 +4817,7 @@ body {
|
|
|
4260
4817
|
}
|
|
4261
4818
|
|
|
4262
4819
|
/* ── Directory Picker Modal (tree-based) ─────────────────────────────────── */
|
|
4263
|
-
.modal-title {
|
|
4820
|
+
.modal-content .modal-title {
|
|
4264
4821
|
padding: 1rem 1.25rem;
|
|
4265
4822
|
border-bottom: 1px solid var(--color-border-primary);
|
|
4266
4823
|
font-size: 1.0625rem;
|
|
@@ -4293,6 +4850,19 @@ body {
|
|
|
4293
4850
|
.dir-picker-input::placeholder {
|
|
4294
4851
|
color: var(--color-text-tertiary);
|
|
4295
4852
|
}
|
|
4853
|
+
.dp-hidden-toggle {
|
|
4854
|
+
display: flex;
|
|
4855
|
+
align-items: center;
|
|
4856
|
+
gap: 0.375rem;
|
|
4857
|
+
font-size: 0.8125rem;
|
|
4858
|
+
color: var(--color-text-secondary);
|
|
4859
|
+
cursor: pointer;
|
|
4860
|
+
user-select: none;
|
|
4861
|
+
}
|
|
4862
|
+
.dp-hidden-toggle input {
|
|
4863
|
+
cursor: pointer;
|
|
4864
|
+
margin: 0;
|
|
4865
|
+
}
|
|
4296
4866
|
/* Preset buttons row */
|
|
4297
4867
|
.dp-presets {
|
|
4298
4868
|
display: flex;
|
|
@@ -4303,6 +4873,16 @@ body {
|
|
|
4303
4873
|
padding: 0.25rem 0.625rem;
|
|
4304
4874
|
font-size: 0.75rem;
|
|
4305
4875
|
}
|
|
4876
|
+
.dp-up-btn {
|
|
4877
|
+
display: inline-flex;
|
|
4878
|
+
align-items: center;
|
|
4879
|
+
gap: 0.25rem;
|
|
4880
|
+
}
|
|
4881
|
+
.dp-up-btn svg { flex-shrink: 0; }
|
|
4882
|
+
.dp-up-btn:disabled {
|
|
4883
|
+
opacity: 0.45;
|
|
4884
|
+
cursor: not-allowed;
|
|
4885
|
+
}
|
|
4306
4886
|
/* Path input container */
|
|
4307
4887
|
.dp-path-container {
|
|
4308
4888
|
flex-shrink: 0;
|
|
@@ -4433,16 +5013,27 @@ body {
|
|
|
4433
5013
|
position: relative;
|
|
4434
5014
|
display: flex;
|
|
4435
5015
|
gap: 0;
|
|
5016
|
+
border: 1px solid var(--color-border-primary);
|
|
5017
|
+
border-radius: 7px;
|
|
5018
|
+
transition: border-color .15s, box-shadow .15s;
|
|
5019
|
+
}
|
|
5020
|
+
.model-name-combobox:focus-within {
|
|
5021
|
+
border-color: var(--color-accent-primary);
|
|
5022
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
|
|
4436
5023
|
}
|
|
4437
5024
|
.model-name-combobox .model-name-input {
|
|
4438
5025
|
flex: 1;
|
|
4439
|
-
border
|
|
4440
|
-
border-
|
|
4441
|
-
|
|
5026
|
+
border: none;
|
|
5027
|
+
border-radius: 7px 0 0 7px;
|
|
5028
|
+
background: transparent;
|
|
5029
|
+
}
|
|
5030
|
+
.model-name-combobox .model-name-input:focus {
|
|
5031
|
+
box-shadow: none;
|
|
4442
5032
|
}
|
|
4443
5033
|
.model-name-combobox .model-name-dropdown-btn {
|
|
4444
5034
|
background: var(--color-bg-primary);
|
|
4445
|
-
border:
|
|
5035
|
+
border: none;
|
|
5036
|
+
border-left: 1px solid var(--color-border-primary);
|
|
4446
5037
|
border-top-right-radius: 6px;
|
|
4447
5038
|
border-bottom-right-radius: 6px;
|
|
4448
5039
|
color: var(--color-text-secondary);
|
|
@@ -4498,16 +5089,27 @@ body {
|
|
|
4498
5089
|
position: relative;
|
|
4499
5090
|
display: flex;
|
|
4500
5091
|
gap: 0;
|
|
5092
|
+
border: 1px solid var(--color-border-primary);
|
|
5093
|
+
border-radius: 7px;
|
|
5094
|
+
transition: border-color .15s, box-shadow .15s;
|
|
5095
|
+
}
|
|
5096
|
+
.base-url-combobox:focus-within {
|
|
5097
|
+
border-color: var(--color-accent-primary);
|
|
5098
|
+
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
|
|
4501
5099
|
}
|
|
4502
5100
|
.base-url-combobox .base-url-input {
|
|
4503
5101
|
flex: 1;
|
|
4504
|
-
border
|
|
4505
|
-
border-
|
|
4506
|
-
|
|
5102
|
+
border: none;
|
|
5103
|
+
border-radius: 7px 0 0 7px;
|
|
5104
|
+
background: transparent;
|
|
5105
|
+
}
|
|
5106
|
+
.base-url-combobox .base-url-input:focus {
|
|
5107
|
+
box-shadow: none;
|
|
4507
5108
|
}
|
|
4508
5109
|
.base-url-combobox .base-url-dropdown-btn {
|
|
4509
5110
|
background: var(--color-bg-primary);
|
|
4510
|
-
border:
|
|
5111
|
+
border: none;
|
|
5112
|
+
border-left: 1px solid var(--color-border-primary);
|
|
4511
5113
|
border-top-right-radius: 6px;
|
|
4512
5114
|
border-bottom-right-radius: 6px;
|
|
4513
5115
|
color: var(--color-text-secondary);
|
|
@@ -4605,22 +5207,35 @@ body {
|
|
|
4605
5207
|
.modal-overlay {
|
|
4606
5208
|
position: fixed;
|
|
4607
5209
|
inset: 0;
|
|
4608
|
-
background:
|
|
5210
|
+
background: var(--color-bg-overlay);
|
|
5211
|
+
-webkit-backdrop-filter: blur(2px);
|
|
5212
|
+
backdrop-filter: blur(2px);
|
|
4609
5213
|
display: flex;
|
|
4610
5214
|
align-items: center;
|
|
4611
5215
|
justify-content: center;
|
|
4612
5216
|
z-index: 100;
|
|
5217
|
+
animation: modal-overlay-in var(--transition-base);
|
|
5218
|
+
}
|
|
5219
|
+
@keyframes modal-overlay-in {
|
|
5220
|
+
from { opacity: 0; }
|
|
5221
|
+
to { opacity: 1; }
|
|
4613
5222
|
}
|
|
4614
5223
|
.modal-box {
|
|
4615
5224
|
background: var(--color-bg-secondary);
|
|
4616
5225
|
border: 1px solid var(--color-border-primary);
|
|
4617
|
-
border-radius:
|
|
5226
|
+
border-radius: var(--radius-lg);
|
|
5227
|
+
box-shadow: var(--shadow-lg);
|
|
4618
5228
|
padding: 1.5rem;
|
|
4619
5229
|
width: 90%;
|
|
5230
|
+
animation: modal-box-in var(--transition-slow);
|
|
5231
|
+
}
|
|
5232
|
+
@keyframes modal-box-in {
|
|
5233
|
+
from { opacity: 0; transform: translateY(12px) scale(0.98); }
|
|
5234
|
+
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
4620
5235
|
}
|
|
4621
5236
|
.modal-box.sm { max-width: 30rem; }
|
|
4622
5237
|
.modal-box.lg { max-width: 42.5rem; }
|
|
4623
|
-
.modal-title
|
|
5238
|
+
.modal-box .modal-title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); }
|
|
4624
5239
|
.modal-confirm-message {
|
|
4625
5240
|
font-size: 0.9375rem;
|
|
4626
5241
|
line-height: 1.6;
|
|
@@ -4634,11 +5249,12 @@ body {
|
|
|
4634
5249
|
justify-content: flex-end;
|
|
4635
5250
|
margin-top: 1rem;
|
|
4636
5251
|
}
|
|
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
|
-
|
|
5252
|
+
.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); }
|
|
5253
|
+
.btn-primary:hover { background: var(--color-button-primary-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
|
|
5254
|
+
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
|
|
5255
|
+
.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); }
|
|
5256
|
+
.btn-secondary:hover { background: var(--color-bg-hover); border-color: var(--color-border-strong); color: var(--color-text-primary); }
|
|
5257
|
+
[data-theme="dark"] .btn-secondary:hover { background: var(--color-bg-hover); }
|
|
4642
5258
|
.btn-danger { background: var(--color-error); color: #fff; border: none; border-radius: 0.375rem; padding: 0.5rem 1.25rem; cursor: pointer; }
|
|
4643
5259
|
.btn-danger:hover { background: var(--color-error); }
|
|
4644
5260
|
|
|
@@ -4743,12 +5359,28 @@ body {
|
|
|
4743
5359
|
/* New Session Modal */
|
|
4744
5360
|
.new-session-modal {
|
|
4745
5361
|
max-width: 32.5rem;
|
|
5362
|
+
padding: 1.25rem 1.25rem 1rem;
|
|
5363
|
+
}
|
|
5364
|
+
.new-session-modal .modal-header {
|
|
5365
|
+
display: flex;
|
|
5366
|
+
align-items: center;
|
|
5367
|
+
margin-bottom: 0.875rem;
|
|
5368
|
+
}
|
|
5369
|
+
.new-session-modal .modal-title {
|
|
5370
|
+
font-size: 1rem;
|
|
5371
|
+
font-weight: 600;
|
|
5372
|
+
margin: 0;
|
|
5373
|
+
padding: 0;
|
|
5374
|
+
border: none;
|
|
5375
|
+
color: var(--color-text-primary);
|
|
4746
5376
|
}
|
|
4747
|
-
.modal-header {
|
|
5377
|
+
.modal-box .modal-header {
|
|
4748
5378
|
display: flex;
|
|
4749
5379
|
align-items: center;
|
|
4750
5380
|
justify-content: space-between;
|
|
4751
|
-
|
|
5381
|
+
padding: 0 0 0.75rem;
|
|
5382
|
+
margin-bottom: 0.75rem;
|
|
5383
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
4752
5384
|
}
|
|
4753
5385
|
.modal-close-btn {
|
|
4754
5386
|
background: transparent;
|
|
@@ -4767,7 +5399,7 @@ body {
|
|
|
4767
5399
|
.modal-close-btn:hover {
|
|
4768
5400
|
color: var(--color-text-primary);
|
|
4769
5401
|
}
|
|
4770
|
-
.modal-body {
|
|
5402
|
+
.modal-box .modal-body {
|
|
4771
5403
|
display: flex;
|
|
4772
5404
|
flex-direction: column;
|
|
4773
5405
|
gap: 1rem;
|
|
@@ -4787,18 +5419,26 @@ body {
|
|
|
4787
5419
|
margin-left: 2px;
|
|
4788
5420
|
}
|
|
4789
5421
|
.modal-input, .modal-select {
|
|
4790
|
-
background: var(--color-bg-
|
|
5422
|
+
background: var(--color-bg-input);
|
|
4791
5423
|
border: 1px solid var(--color-border-primary);
|
|
4792
|
-
border-radius:
|
|
5424
|
+
border-radius: var(--radius-sm);
|
|
4793
5425
|
color: var(--color-text-primary);
|
|
4794
5426
|
padding: 0.5625rem 0.75rem;
|
|
4795
5427
|
font-size: 0.8125rem;
|
|
4796
5428
|
font-family: inherit;
|
|
4797
5429
|
width: 100%;
|
|
5430
|
+
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
|
|
5431
|
+
}
|
|
5432
|
+
.modal-input:hover, .modal-select:hover {
|
|
5433
|
+
border-color: var(--color-border-strong);
|
|
4798
5434
|
}
|
|
4799
5435
|
.modal-input:focus, .modal-select:focus {
|
|
4800
5436
|
outline: none;
|
|
4801
5437
|
border-color: var(--color-accent-primary);
|
|
5438
|
+
box-shadow: 0 0 0 3px var(--color-accent-soft);
|
|
5439
|
+
}
|
|
5440
|
+
.modal-input::placeholder {
|
|
5441
|
+
color: var(--color-text-muted);
|
|
4802
5442
|
}
|
|
4803
5443
|
.modal-input.input-error {
|
|
4804
5444
|
border-color: var(--color-error);
|
|
@@ -4830,6 +5470,14 @@ body {
|
|
|
4830
5470
|
}
|
|
4831
5471
|
.modal-browse-btn:hover {
|
|
4832
5472
|
background: var(--color-bg-hover);
|
|
5473
|
+
border-color: var(--color-border-strong);
|
|
5474
|
+
color: var(--color-accent-primary);
|
|
5475
|
+
}
|
|
5476
|
+
.modal-browse-btn {
|
|
5477
|
+
display: inline-flex;
|
|
5478
|
+
align-items: center;
|
|
5479
|
+
justify-content: center;
|
|
5480
|
+
color: var(--color-text-secondary);
|
|
4833
5481
|
}
|
|
4834
5482
|
.modal-field-checkbox {
|
|
4835
5483
|
display: flex;
|
|
@@ -4850,6 +5498,13 @@ body {
|
|
|
4850
5498
|
cursor: pointer;
|
|
4851
5499
|
accent-color: var(--color-accent-primary);
|
|
4852
5500
|
}
|
|
5501
|
+
.new-session-modal .modal-body {
|
|
5502
|
+
gap: 0.75rem;
|
|
5503
|
+
}
|
|
5504
|
+
.new-session-modal .modal-footer {
|
|
5505
|
+
margin-top: 1rem;
|
|
5506
|
+
padding-top: 1rem;
|
|
5507
|
+
}
|
|
4853
5508
|
.modal-footer {
|
|
4854
5509
|
display: flex;
|
|
4855
5510
|
gap: 0.625rem;
|
|
@@ -5363,29 +6018,6 @@ body {
|
|
|
5363
6018
|
cursor: help;
|
|
5364
6019
|
flex-shrink: 0;
|
|
5365
6020
|
}
|
|
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
6021
|
|
|
5390
6022
|
/* ── Toggle Switch ───────────────────────────────────────────────────────── */
|
|
5391
6023
|
.skill-toggle {
|
|
@@ -5395,42 +6027,10 @@ body {
|
|
|
5395
6027
|
cursor: pointer;
|
|
5396
6028
|
flex-shrink: 0;
|
|
5397
6029
|
}
|
|
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
6030
|
.skill-toggle-disabled {
|
|
5428
6031
|
cursor: not-allowed;
|
|
5429
6032
|
opacity: 0.4;
|
|
5430
6033
|
}
|
|
5431
|
-
.skill-toggle-disabled:hover::after {
|
|
5432
|
-
opacity: 1; /* Still show tooltip for disabled toggles */
|
|
5433
|
-
}
|
|
5434
6034
|
.skill-toggle-input {
|
|
5435
6035
|
opacity: 0;
|
|
5436
6036
|
width: 0;
|
|
@@ -5968,8 +6568,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
5968
6568
|
inset: 0;
|
|
5969
6569
|
z-index: 500;
|
|
5970
6570
|
display: flex;
|
|
5971
|
-
|
|
5972
|
-
justify-content: center;
|
|
6571
|
+
flex-direction: column;
|
|
5973
6572
|
overflow-y: auto;
|
|
5974
6573
|
/* Reserve scrollbar space always so card doesn't shift when scrollbar appears */
|
|
5975
6574
|
scrollbar-gutter: stable;
|
|
@@ -5998,6 +6597,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
5998
6597
|
min-height: 21.25rem;
|
|
5999
6598
|
/* Dropdown must overflow the card boundary */
|
|
6000
6599
|
overflow: visible;
|
|
6600
|
+
margin: auto;
|
|
6601
|
+
flex-shrink: 0;
|
|
6001
6602
|
}
|
|
6002
6603
|
[data-theme="dark"] #setup-card {
|
|
6003
6604
|
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
|
|
@@ -6149,7 +6750,11 @@ body.setup-mode[data-theme="dark"] {
|
|
|
6149
6750
|
.setup-field {
|
|
6150
6751
|
display: flex;
|
|
6151
6752
|
flex-direction: column;
|
|
6152
|
-
gap: 0.
|
|
6753
|
+
gap: 0.375rem;
|
|
6754
|
+
margin-bottom: 0.875rem;
|
|
6755
|
+
}
|
|
6756
|
+
.setup-field:last-of-type {
|
|
6757
|
+
margin-bottom: 0;
|
|
6153
6758
|
}
|
|
6154
6759
|
.setup-label {
|
|
6155
6760
|
font-size: 0.6875rem;
|
|
@@ -6189,106 +6794,309 @@ body.setup-mode[data-theme="dark"] {
|
|
|
6189
6794
|
.setup-test-result.result-ok { color: var(--color-success); }
|
|
6190
6795
|
.setup-test-result.result-fail { color: var(--color-error); }
|
|
6191
6796
|
|
|
6192
|
-
/*
|
|
6193
|
-
|
|
6797
|
+
/* ── Device-login (primary onboarding path) ─────────────────────────────── */
|
|
6798
|
+
#setup-device-block {
|
|
6799
|
+
margin-bottom: 0.75rem;
|
|
6800
|
+
}
|
|
6801
|
+
.setup-device-card {
|
|
6802
|
+
border: 1px solid var(--color-accent-primary);
|
|
6803
|
+
border-radius: 12px;
|
|
6804
|
+
padding: 1rem 1.125rem 1.125rem;
|
|
6805
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-primary) 6%, transparent), transparent);
|
|
6806
|
+
}
|
|
6807
|
+
.setup-device-card-head {
|
|
6194
6808
|
display: flex;
|
|
6809
|
+
align-items: center;
|
|
6195
6810
|
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;
|
|
6811
|
+
margin-bottom: 0.5rem;
|
|
6211
6812
|
}
|
|
6212
|
-
.setup-
|
|
6213
|
-
|
|
6813
|
+
.setup-device-card-title {
|
|
6814
|
+
font-size: 0.9375rem;
|
|
6815
|
+
font-weight: 700;
|
|
6214
6816
|
color: var(--color-text-primary);
|
|
6215
6817
|
}
|
|
6216
|
-
|
|
6217
|
-
|
|
6218
|
-
|
|
6219
|
-
|
|
6818
|
+
.setup-device-card-badge {
|
|
6819
|
+
font-size: 0.625rem;
|
|
6820
|
+
font-weight: 600;
|
|
6821
|
+
padding: 1px 0.375rem;
|
|
6822
|
+
border-radius: 4px;
|
|
6220
6823
|
background: var(--color-accent-primary);
|
|
6221
6824
|
color: #fff;
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
|
|
6825
|
+
letter-spacing: 0.3px;
|
|
6826
|
+
line-height: 1.6;
|
|
6827
|
+
}
|
|
6828
|
+
.setup-device-card-lead {
|
|
6829
|
+
font-size: 0.8125rem;
|
|
6226
6830
|
font-weight: 600;
|
|
6227
|
-
|
|
6228
|
-
|
|
6831
|
+
color: var(--color-text-primary);
|
|
6832
|
+
margin: 0 0 0.625rem;
|
|
6833
|
+
line-height: 1.5;
|
|
6229
6834
|
}
|
|
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;
|
|
6835
|
+
.setup-device-card-points {
|
|
6836
|
+
list-style: none;
|
|
6837
|
+
margin: 0 0 0.875rem;
|
|
6838
|
+
padding: 0;
|
|
6241
6839
|
}
|
|
6242
|
-
|
|
6243
|
-
|
|
6840
|
+
.setup-device-card-points li {
|
|
6841
|
+
position: relative;
|
|
6842
|
+
font-size: 0.75rem;
|
|
6843
|
+
line-height: 1.6;
|
|
6844
|
+
color: var(--color-text-secondary);
|
|
6845
|
+
padding-left: 1rem;
|
|
6846
|
+
}
|
|
6847
|
+
.setup-device-card-points li::before {
|
|
6848
|
+
content: "✓";
|
|
6849
|
+
position: absolute;
|
|
6850
|
+
left: 0;
|
|
6851
|
+
color: var(--color-accent-primary);
|
|
6852
|
+
font-weight: 700;
|
|
6853
|
+
}
|
|
6854
|
+
.setup-device-btn {
|
|
6244
6855
|
width: 100%;
|
|
6245
|
-
max-width: 30rem;
|
|
6246
|
-
display: flex;
|
|
6247
|
-
flex-direction: column;
|
|
6248
|
-
align-items: center;
|
|
6249
|
-
gap: 0.5rem;
|
|
6250
6856
|
}
|
|
6251
|
-
|
|
6252
|
-
|
|
6253
|
-
|
|
6254
|
-
margin-bottom: 0.25rem;
|
|
6857
|
+
#setup-device-pending {
|
|
6858
|
+
text-align: center;
|
|
6859
|
+
margin-top: 0.75rem;
|
|
6255
6860
|
}
|
|
6256
|
-
|
|
6257
|
-
|
|
6258
|
-
|
|
6259
|
-
|
|
6861
|
+
.setup-device-spinner {
|
|
6862
|
+
width: 22px;
|
|
6863
|
+
height: 22px;
|
|
6864
|
+
margin: 0 auto 0.5rem;
|
|
6865
|
+
border: 2.5px solid var(--color-border-primary);
|
|
6866
|
+
border-top-color: var(--color-accent, var(--accent, #6366f1));
|
|
6867
|
+
border-radius: 50%;
|
|
6868
|
+
animation: setup-device-spin 0.8s linear infinite;
|
|
6869
|
+
}
|
|
6870
|
+
@keyframes setup-device-spin { to { transform: rotate(360deg); } }
|
|
6871
|
+
.setup-device-pending-text {
|
|
6872
|
+
font-size: 0.8125rem;
|
|
6260
6873
|
color: var(--color-text-primary);
|
|
6261
|
-
|
|
6874
|
+
margin: 0 0 0.25rem;
|
|
6262
6875
|
}
|
|
6263
|
-
|
|
6264
|
-
|
|
6265
|
-
font-size: 0.875rem;
|
|
6876
|
+
.setup-device-code {
|
|
6877
|
+
font-size: 0.8125rem;
|
|
6266
6878
|
color: var(--color-text-secondary);
|
|
6267
|
-
|
|
6268
|
-
margin-bottom: 0.5rem;
|
|
6879
|
+
margin: 0 0 0.5rem;
|
|
6269
6880
|
}
|
|
6270
|
-
|
|
6271
|
-
|
|
6272
|
-
|
|
6881
|
+
.setup-device-code strong {
|
|
6882
|
+
letter-spacing: 0.1em;
|
|
6883
|
+
color: var(--color-text-primary);
|
|
6884
|
+
}
|
|
6885
|
+
.setup-device-reopen {
|
|
6886
|
+
display: inline-block;
|
|
6887
|
+
font-size: 0.75rem;
|
|
6888
|
+
color: var(--color-accent, var(--accent, #6366f1));
|
|
6889
|
+
text-decoration: none;
|
|
6890
|
+
margin-right: 0.75rem;
|
|
6891
|
+
}
|
|
6892
|
+
.setup-device-success {
|
|
6893
|
+
margin-top: 0.75rem;
|
|
6894
|
+
border: 1px solid var(--color-accent-primary);
|
|
6895
|
+
border-radius: 12px;
|
|
6896
|
+
padding: 1rem 1.125rem 1.125rem;
|
|
6897
|
+
background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-primary) 8%, transparent), transparent);
|
|
6898
|
+
}
|
|
6899
|
+
.setup-device-success-head {
|
|
6273
6900
|
display: flex;
|
|
6274
6901
|
align-items: center;
|
|
6275
|
-
gap: 0;
|
|
6276
|
-
margin:
|
|
6902
|
+
gap: 0.5rem;
|
|
6903
|
+
margin-bottom: 0.5rem;
|
|
6277
6904
|
}
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6905
|
+
.setup-device-success-icon {
|
|
6906
|
+
width: 22px;
|
|
6907
|
+
height: 22px;
|
|
6908
|
+
display: inline-flex;
|
|
6909
|
+
align-items: center;
|
|
6910
|
+
justify-content: center;
|
|
6911
|
+
background: var(--color-accent-primary);
|
|
6912
|
+
color: #fff;
|
|
6282
6913
|
border-radius: 50%;
|
|
6283
|
-
background: var(--color-border-secondary);
|
|
6284
|
-
border: 2px solid var(--color-border-primary);
|
|
6285
|
-
color: var(--color-text-secondary);
|
|
6286
6914
|
font-size: 0.75rem;
|
|
6287
6915
|
font-weight: 700;
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
|
|
6916
|
+
}
|
|
6917
|
+
.setup-device-success-title {
|
|
6918
|
+
font-size: 0.9375rem;
|
|
6919
|
+
font-weight: 700;
|
|
6920
|
+
color: var(--color-text-primary);
|
|
6921
|
+
}
|
|
6922
|
+
.setup-device-success-lead {
|
|
6923
|
+
font-size: 0.8125rem;
|
|
6924
|
+
color: var(--color-text-primary);
|
|
6925
|
+
margin: 0 0 0.625rem;
|
|
6926
|
+
line-height: 1.5;
|
|
6927
|
+
}
|
|
6928
|
+
.setup-device-success-points {
|
|
6929
|
+
list-style: none;
|
|
6930
|
+
margin: 0 0 0.875rem;
|
|
6931
|
+
padding: 0;
|
|
6932
|
+
}
|
|
6933
|
+
.setup-device-success-points li {
|
|
6934
|
+
font-size: 0.75rem;
|
|
6935
|
+
line-height: 1.6;
|
|
6936
|
+
color: var(--color-text-secondary);
|
|
6937
|
+
margin-bottom: 0.25rem;
|
|
6938
|
+
}
|
|
6939
|
+
.setup-device-success-points li strong {
|
|
6940
|
+
color: var(--color-text-primary);
|
|
6941
|
+
font-weight: 600;
|
|
6942
|
+
margin-right: 0.25rem;
|
|
6943
|
+
}
|
|
6944
|
+
.setup-device-success-points li.setup-device-success-note {
|
|
6945
|
+
margin-top: 0.5rem;
|
|
6946
|
+
padding: 0.5rem 0.625rem;
|
|
6947
|
+
background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
|
|
6948
|
+
border-radius: 6px;
|
|
6949
|
+
color: var(--color-text-secondary);
|
|
6950
|
+
font-style: normal;
|
|
6951
|
+
}
|
|
6952
|
+
#setup-btn-device-continue {
|
|
6953
|
+
display: block;
|
|
6954
|
+
width: 100%;
|
|
6955
|
+
margin-top: 0.75rem;
|
|
6956
|
+
padding: 0.875rem 1.5rem;
|
|
6957
|
+
font-size: 1rem;
|
|
6958
|
+
font-weight: 700;
|
|
6959
|
+
border: none;
|
|
6960
|
+
border-radius: 12px;
|
|
6961
|
+
background: var(--color-accent-primary);
|
|
6962
|
+
color: #fff;
|
|
6963
|
+
cursor: pointer;
|
|
6964
|
+
letter-spacing: 0.01em;
|
|
6965
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 6px 16px color-mix(in srgb, var(--color-accent-primary) 28%, transparent);
|
|
6966
|
+
transition: background .15s, transform .08s, box-shadow .15s;
|
|
6967
|
+
}
|
|
6968
|
+
#setup-btn-device-continue:hover {
|
|
6969
|
+
background: color-mix(in srgb, var(--color-accent-primary) 88%, black);
|
|
6970
|
+
box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 8px 24px color-mix(in srgb, var(--color-accent-primary) 36%, transparent);
|
|
6971
|
+
}
|
|
6972
|
+
#setup-btn-device-continue:active {
|
|
6973
|
+
transform: translateY(1px);
|
|
6974
|
+
}
|
|
6975
|
+
#setup-device-error {
|
|
6976
|
+
margin-top: 0.5rem;
|
|
6977
|
+
}
|
|
6978
|
+
#setup-device-error.result-fail { color: var(--color-error); }
|
|
6979
|
+
|
|
6980
|
+
/* Manual-config collapsible (secondary path) */
|
|
6981
|
+
#setup-manual-details {
|
|
6982
|
+
margin-top: 0.25rem;
|
|
6983
|
+
}
|
|
6984
|
+
#setup-manual-summary {
|
|
6985
|
+
cursor: pointer;
|
|
6986
|
+
font-size: 0.75rem;
|
|
6987
|
+
color: var(--color-text-secondary);
|
|
6988
|
+
text-align: center;
|
|
6989
|
+
list-style: none;
|
|
6990
|
+
padding: 0.5rem 0;
|
|
6991
|
+
user-select: none;
|
|
6992
|
+
}
|
|
6993
|
+
#setup-manual-summary::-webkit-details-marker { display: none; }
|
|
6994
|
+
#setup-manual-summary:hover { color: var(--color-text-primary); }
|
|
6995
|
+
#setup-manual-details[open] #setup-manual-summary {
|
|
6996
|
+
margin-bottom: 0.5rem;
|
|
6997
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
6998
|
+
}
|
|
6999
|
+
|
|
7000
|
+
/* Bottom action row: [← Back] [Test & Continue →] */
|
|
7001
|
+
.setup-key-actions {
|
|
7002
|
+
display: flex;
|
|
7003
|
+
gap: 0.5rem;
|
|
7004
|
+
margin-top: 0.25rem;
|
|
7005
|
+
}
|
|
7006
|
+
|
|
7007
|
+
.setup-back-btn {
|
|
7008
|
+
flex-shrink: 0;
|
|
7009
|
+
background: transparent;
|
|
7010
|
+
color: var(--color-text-secondary);
|
|
7011
|
+
border: 1.5px solid var(--color-border-primary);
|
|
7012
|
+
border-radius: 8px;
|
|
7013
|
+
padding: 0.5625rem 0.875rem;
|
|
7014
|
+
font-size: 0.8125rem;
|
|
7015
|
+
font-weight: 600;
|
|
7016
|
+
cursor: pointer;
|
|
7017
|
+
white-space: nowrap;
|
|
7018
|
+
transition: border-color .15s, color .15s;
|
|
7019
|
+
}
|
|
7020
|
+
.setup-back-btn:hover {
|
|
7021
|
+
border-color: var(--color-text-secondary);
|
|
7022
|
+
color: var(--color-text-primary);
|
|
7023
|
+
}
|
|
7024
|
+
|
|
7025
|
+
/* Submit button */
|
|
7026
|
+
.setup-submit-btn {
|
|
7027
|
+
flex: 1;
|
|
7028
|
+
background: var(--color-accent-primary);
|
|
7029
|
+
color: #fff;
|
|
7030
|
+
border: none;
|
|
7031
|
+
border-radius: 8px;
|
|
7032
|
+
padding: 0.625rem 0;
|
|
7033
|
+
font-size: 0.875rem;
|
|
7034
|
+
font-weight: 600;
|
|
7035
|
+
cursor: pointer;
|
|
7036
|
+
transition: background .15s, opacity .15s;
|
|
7037
|
+
}
|
|
7038
|
+
.setup-submit-btn:hover { background: #2563eb; }
|
|
7039
|
+
.setup-submit-btn:disabled { opacity: .5; cursor: default; }
|
|
7040
|
+
|
|
7041
|
+
/* ── Onboard panel ───────────────────────────────────────────────────────── */
|
|
7042
|
+
#onboard-panel {
|
|
7043
|
+
flex: 1;
|
|
7044
|
+
display: flex;
|
|
7045
|
+
flex-direction: column;
|
|
7046
|
+
overflow-y: auto;
|
|
7047
|
+
padding: 2.5rem 1.25rem;
|
|
7048
|
+
}
|
|
7049
|
+
|
|
7050
|
+
#onboard-inner {
|
|
7051
|
+
width: 100%;
|
|
7052
|
+
max-width: 30rem;
|
|
7053
|
+
display: flex;
|
|
7054
|
+
flex-direction: column;
|
|
7055
|
+
align-items: center;
|
|
7056
|
+
gap: 0.5rem;
|
|
7057
|
+
margin: auto;
|
|
7058
|
+
}
|
|
7059
|
+
|
|
7060
|
+
.onboard-logo {
|
|
7061
|
+
font-size: 3rem;
|
|
7062
|
+
margin-bottom: 0.25rem;
|
|
7063
|
+
}
|
|
7064
|
+
|
|
7065
|
+
.onboard-title {
|
|
7066
|
+
font-size: 1.625rem;
|
|
7067
|
+
font-weight: 700;
|
|
7068
|
+
color: var(--color-text-primary);
|
|
7069
|
+
text-align: center;
|
|
7070
|
+
}
|
|
7071
|
+
|
|
7072
|
+
.onboard-subtitle {
|
|
7073
|
+
font-size: 0.875rem;
|
|
7074
|
+
color: var(--color-text-secondary);
|
|
7075
|
+
text-align: center;
|
|
7076
|
+
margin-bottom: 0.5rem;
|
|
7077
|
+
}
|
|
7078
|
+
|
|
7079
|
+
/* ── Step indicators ── */
|
|
7080
|
+
#onboard-steps {
|
|
7081
|
+
display: flex;
|
|
7082
|
+
align-items: center;
|
|
7083
|
+
gap: 0;
|
|
7084
|
+
margin: 1rem 0 1.5rem;
|
|
7085
|
+
}
|
|
7086
|
+
|
|
7087
|
+
.onboard-step {
|
|
7088
|
+
width: 1.75rem;
|
|
7089
|
+
height: 1.75rem;
|
|
7090
|
+
border-radius: 50%;
|
|
7091
|
+
background: var(--color-border-secondary);
|
|
7092
|
+
border: 2px solid var(--color-border-primary);
|
|
7093
|
+
color: var(--color-text-secondary);
|
|
7094
|
+
font-size: 0.75rem;
|
|
7095
|
+
font-weight: 700;
|
|
7096
|
+
display: flex;
|
|
7097
|
+
align-items: center;
|
|
7098
|
+
justify-content: center;
|
|
7099
|
+
transition: background .2s, border-color .2s, color .2s;
|
|
6292
7100
|
}
|
|
6293
7101
|
|
|
6294
7102
|
.onboard-step.active {
|
|
@@ -7148,11 +7956,11 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7148
7956
|
}
|
|
7149
7957
|
|
|
7150
7958
|
.channel-status-hint {
|
|
7151
|
-
font-size: 0.
|
|
7152
|
-
line-height: 1.
|
|
7959
|
+
font-size: 0.75rem;
|
|
7960
|
+
line-height: 1.4;
|
|
7153
7961
|
margin: 0;
|
|
7154
|
-
padding: 0.
|
|
7155
|
-
border-radius:
|
|
7962
|
+
padding: 0.375rem 0.75rem;
|
|
7963
|
+
border-radius: 6px;
|
|
7156
7964
|
}
|
|
7157
7965
|
|
|
7158
7966
|
.hint-ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
|
|
@@ -7164,8 +7972,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7164
7972
|
display: flex;
|
|
7165
7973
|
align-items: center;
|
|
7166
7974
|
justify-content: flex-end;
|
|
7167
|
-
gap: 0.
|
|
7168
|
-
padding-top: 0.
|
|
7975
|
+
gap: 0.5rem;
|
|
7976
|
+
padding-top: 0.625rem;
|
|
7169
7977
|
border-top: 1px solid var(--color-border-primary);
|
|
7170
7978
|
}
|
|
7171
7979
|
|
|
@@ -7182,23 +7990,25 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7182
7990
|
align-items: center;
|
|
7183
7991
|
gap: 0.375rem;
|
|
7184
7992
|
font-size: 0.8125rem;
|
|
7185
|
-
padding: 0.375rem
|
|
7993
|
+
padding: 0.375rem 0.875rem;
|
|
7186
7994
|
border-radius: 6px;
|
|
7187
7995
|
cursor: pointer;
|
|
7188
7996
|
font-weight: 500;
|
|
7189
7997
|
border: none;
|
|
7190
|
-
transition: background 0.15s, opacity 0.15s;
|
|
7998
|
+
transition: background 0.15s, color 0.15s, opacity 0.15s;
|
|
7191
7999
|
}
|
|
7192
8000
|
|
|
7193
|
-
/* Test button
|
|
8001
|
+
/* Test button: secondary outline style */
|
|
7194
8002
|
.btn-channel-test {
|
|
7195
8003
|
background: transparent;
|
|
7196
8004
|
color: var(--color-text-secondary);
|
|
7197
|
-
border: 1px solid var(--color-border-
|
|
8005
|
+
border: 1px solid var(--color-border-secondary);
|
|
8006
|
+
padding: 0.375rem 0.75rem;
|
|
7198
8007
|
}
|
|
7199
8008
|
.btn-channel-test:hover {
|
|
7200
|
-
background: var(--color-border-secondary);
|
|
7201
8009
|
color: var(--color-text-primary);
|
|
8010
|
+
border-color: var(--color-text-muted);
|
|
8011
|
+
background: var(--color-bg-tertiary);
|
|
7202
8012
|
}
|
|
7203
8013
|
|
|
7204
8014
|
.btn-channel-test:disabled,
|
|
@@ -7218,6 +8028,33 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7218
8028
|
border-radius: 8px;
|
|
7219
8029
|
}
|
|
7220
8030
|
|
|
8031
|
+
/* ── Channel sections (connected / unconfigured grouping) ────────────────── */
|
|
8032
|
+
.channel-section {
|
|
8033
|
+
display: flex;
|
|
8034
|
+
flex-direction: column;
|
|
8035
|
+
gap: 0.75rem;
|
|
8036
|
+
}
|
|
8037
|
+
|
|
8038
|
+
.channel-section-header {
|
|
8039
|
+
font-size: 0.75rem;
|
|
8040
|
+
font-weight: 600;
|
|
8041
|
+
text-transform: uppercase;
|
|
8042
|
+
letter-spacing: 0.05em;
|
|
8043
|
+
color: var(--color-text-tertiary);
|
|
8044
|
+
padding: 0 0.25rem 0.25rem;
|
|
8045
|
+
}
|
|
8046
|
+
|
|
8047
|
+
/* Custom dev card */
|
|
8048
|
+
.channel-card-custom-dev {
|
|
8049
|
+
border: 1px dashed var(--color-border-primary);
|
|
8050
|
+
background: var(--color-bg-tertiary);
|
|
8051
|
+
}
|
|
8052
|
+
|
|
8053
|
+
.channel-logo-custom {
|
|
8054
|
+
background: linear-gradient(135deg, var(--color-accent-primary), #7c3aed);
|
|
8055
|
+
color: #fff;
|
|
8056
|
+
}
|
|
8057
|
+
|
|
7221
8058
|
/* ── Version badge (inline in Settings row, right-aligned) ──────────────── */
|
|
7222
8059
|
|
|
7223
8060
|
/* Settings button stretches to fill width; version badge pushes to the right */
|
|
@@ -7991,479 +8828,109 @@ body.setup-mode[data-theme="dark"] {
|
|
|
7991
8828
|
|
|
7992
8829
|
|
|
7993
8830
|
/* ── 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
8831
|
|
|
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
8832
|
|
|
8026
|
-
|
|
8027
|
-
|
|
8028
|
-
|
|
8029
|
-
min-width: 0;
|
|
8030
|
-
overflow: visible;
|
|
8031
|
-
}
|
|
8833
|
+
/* ══════════════════════════════════════════════════════════════════════════
|
|
8834
|
+
Creator Hub — Creator Center
|
|
8835
|
+
══════════════════════════════════════════════════════════════════════════ */
|
|
8032
8836
|
|
|
8033
|
-
|
|
8034
|
-
|
|
8035
|
-
|
|
8036
|
-
|
|
8837
|
+
#creator-panel {
|
|
8838
|
+
display: flex;
|
|
8839
|
+
flex-direction: column;
|
|
8840
|
+
height: 100%;
|
|
8841
|
+
overflow: hidden;
|
|
8842
|
+
}
|
|
8037
8843
|
|
|
8038
|
-
|
|
8039
|
-
|
|
8040
|
-
|
|
8041
|
-
|
|
8042
|
-
|
|
8043
|
-
|
|
8044
|
-
|
|
8045
|
-
|
|
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
|
-
}
|
|
8844
|
+
#creator-body {
|
|
8845
|
+
flex: 1;
|
|
8846
|
+
overflow-y: auto;
|
|
8847
|
+
display: flex;
|
|
8848
|
+
flex-direction: column;
|
|
8849
|
+
padding: 2rem 2rem 3.75rem;
|
|
8850
|
+
gap: 1.75rem;
|
|
8851
|
+
}
|
|
8063
8852
|
|
|
8064
|
-
|
|
8065
|
-
|
|
8066
|
-
|
|
8067
|
-
|
|
8068
|
-
|
|
8853
|
+
/* ── Section blocks ────────────────────────────────────────────────────── */
|
|
8854
|
+
.creator-section-block {
|
|
8855
|
+
display: flex;
|
|
8856
|
+
flex-direction: column;
|
|
8857
|
+
gap: 0.625rem;
|
|
8858
|
+
}
|
|
8069
8859
|
|
|
8070
|
-
|
|
8071
|
-
|
|
8072
|
-
|
|
8073
|
-
|
|
8074
|
-
|
|
8075
|
-
|
|
8076
|
-
|
|
8077
|
-
|
|
8860
|
+
.creator-section-header {
|
|
8861
|
+
display: flex;
|
|
8862
|
+
align-items: baseline;
|
|
8863
|
+
gap: 0.625rem;
|
|
8864
|
+
padding-bottom: 0.375rem;
|
|
8865
|
+
border-bottom: 1px solid var(--color-border-primary);
|
|
8866
|
+
margin-bottom: 2px;
|
|
8867
|
+
}
|
|
8078
8868
|
|
|
8079
|
-
|
|
8080
|
-
|
|
8081
|
-
|
|
8082
|
-
|
|
8083
|
-
|
|
8869
|
+
.creator-section-label {
|
|
8870
|
+
font-size: 0.75rem;
|
|
8871
|
+
font-weight: 600;
|
|
8872
|
+
color: var(--color-text-secondary);
|
|
8873
|
+
text-transform: uppercase;
|
|
8874
|
+
letter-spacing: 0.5px;
|
|
8875
|
+
}
|
|
8084
8876
|
|
|
8085
|
-
|
|
8086
|
-
|
|
8087
|
-
|
|
8088
|
-
|
|
8089
|
-
}
|
|
8877
|
+
.creator-section-hint {
|
|
8878
|
+
font-size: 0.6875rem;
|
|
8879
|
+
color: var(--color-text-muted);
|
|
8880
|
+
}
|
|
8090
8881
|
|
|
8091
|
-
|
|
8092
|
-
|
|
8093
|
-
|
|
8094
|
-
|
|
8095
|
-
|
|
8096
|
-
padding-right: 1.5rem;
|
|
8097
|
-
}
|
|
8882
|
+
.creator-list {
|
|
8883
|
+
display: flex;
|
|
8884
|
+
flex-direction: column;
|
|
8885
|
+
gap: 0.5rem;
|
|
8886
|
+
}
|
|
8098
8887
|
|
|
8099
|
-
|
|
8100
|
-
|
|
8101
|
-
|
|
8102
|
-
|
|
8103
|
-
|
|
8104
|
-
|
|
8105
|
-
|
|
8106
|
-
|
|
8107
|
-
|
|
8108
|
-
|
|
8109
|
-
|
|
8110
|
-
|
|
8111
|
-
|
|
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
|
-
}
|
|
8888
|
+
/* ── Skill Card base ───────────────────────────────────────────────────── */
|
|
8889
|
+
.creator-skill-card {
|
|
8890
|
+
background: var(--color-bg-secondary);
|
|
8891
|
+
border: 1px solid var(--color-border-primary);
|
|
8892
|
+
border-radius: 8px;
|
|
8893
|
+
padding: 0.875rem 1rem;
|
|
8894
|
+
margin-bottom: 0.75rem;
|
|
8895
|
+
transition: border-color .15s;
|
|
8896
|
+
}
|
|
8897
|
+
.creator-skill-card:last-child {
|
|
8898
|
+
margin-bottom: 0;
|
|
8899
|
+
}
|
|
8900
|
+
.creator-skill-card:hover { border-color: var(--color-text-muted); }
|
|
8184
8901
|
|
|
8185
|
-
|
|
8186
|
-
|
|
8187
|
-
|
|
8188
|
-
|
|
8189
|
-
|
|
8190
|
-
|
|
8191
|
-
|
|
8192
|
-
|
|
8193
|
-
|
|
8194
|
-
|
|
8195
|
-
|
|
8196
|
-
|
|
8197
|
-
|
|
8198
|
-
|
|
8199
|
-
|
|
8200
|
-
|
|
8201
|
-
|
|
8202
|
-
|
|
8203
|
-
|
|
8204
|
-
|
|
8205
|
-
|
|
8206
|
-
|
|
8207
|
-
|
|
8208
|
-
|
|
8209
|
-
|
|
8210
|
-
|
|
8211
|
-
|
|
8212
|
-
|
|
8213
|
-
|
|
8214
|
-
|
|
8215
|
-
|
|
8216
|
-
|
|
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
|
-
}
|
|
8231
|
-
|
|
8232
|
-
/* ── Settings page ── */
|
|
8233
|
-
#settings-header {
|
|
8234
|
-
padding: 0.75rem 1rem;
|
|
8235
|
-
font-size: 0.9375rem;
|
|
8236
|
-
}
|
|
8237
|
-
#settings-body {
|
|
8238
|
-
padding: 1rem 1rem 5rem;
|
|
8239
|
-
gap: 1.5rem;
|
|
8240
|
-
overflow-y: auto;
|
|
8241
|
-
-webkit-overflow-scrolling: touch;
|
|
8242
|
-
overscroll-behavior: contain;
|
|
8243
|
-
}
|
|
8244
|
-
#settings-panel {
|
|
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); }
|
|
8434
|
-
|
|
8435
|
-
.creator-card-main {
|
|
8436
|
-
display: flex;
|
|
8437
|
-
align-items: center;
|
|
8438
|
-
gap: 0.75rem;
|
|
8439
|
-
}
|
|
8440
|
-
.creator-card-info { flex: 1; min-width: 0; }
|
|
8441
|
-
.creator-card-actions {
|
|
8442
|
-
display: flex;
|
|
8443
|
-
align-items: center;
|
|
8444
|
-
gap: 0.5rem;
|
|
8445
|
-
flex-shrink: 0;
|
|
8446
|
-
}
|
|
8447
|
-
.creator-card-title {
|
|
8448
|
-
display: flex;
|
|
8449
|
-
align-items: center;
|
|
8450
|
-
gap: 0.5rem;
|
|
8451
|
-
margin-bottom: 0.25rem;
|
|
8452
|
-
flex-wrap: wrap;
|
|
8453
|
-
}
|
|
8454
|
-
.creator-skill-name {
|
|
8455
|
-
font-size: 0.8125rem;
|
|
8456
|
-
font-weight: 600;
|
|
8457
|
-
color: var(--color-text-primary);
|
|
8458
|
-
}
|
|
8459
|
-
.creator-card-desc {
|
|
8460
|
-
font-size: 0.75rem;
|
|
8461
|
-
color: var(--color-text-tertiary);
|
|
8462
|
-
line-height: 1.5;
|
|
8463
|
-
white-space: nowrap;
|
|
8464
|
-
overflow: hidden;
|
|
8465
|
-
text-overflow: ellipsis;
|
|
8466
|
-
}
|
|
8902
|
+
.creator-card-main {
|
|
8903
|
+
display: flex;
|
|
8904
|
+
align-items: center;
|
|
8905
|
+
gap: 0.75rem;
|
|
8906
|
+
}
|
|
8907
|
+
.creator-card-info { flex: 1; min-width: 0; }
|
|
8908
|
+
.creator-card-actions {
|
|
8909
|
+
display: flex;
|
|
8910
|
+
align-items: center;
|
|
8911
|
+
gap: 0.5rem;
|
|
8912
|
+
flex-shrink: 0;
|
|
8913
|
+
}
|
|
8914
|
+
.creator-card-title {
|
|
8915
|
+
display: flex;
|
|
8916
|
+
align-items: center;
|
|
8917
|
+
gap: 0.5rem;
|
|
8918
|
+
margin-bottom: 0.25rem;
|
|
8919
|
+
flex-wrap: wrap;
|
|
8920
|
+
}
|
|
8921
|
+
.creator-skill-name {
|
|
8922
|
+
font-size: 0.8125rem;
|
|
8923
|
+
font-weight: 600;
|
|
8924
|
+
color: var(--color-text-primary);
|
|
8925
|
+
}
|
|
8926
|
+
.creator-card-desc {
|
|
8927
|
+
font-size: 0.75rem;
|
|
8928
|
+
color: var(--color-text-tertiary);
|
|
8929
|
+
line-height: 1.5;
|
|
8930
|
+
white-space: nowrap;
|
|
8931
|
+
overflow: hidden;
|
|
8932
|
+
text-overflow: ellipsis;
|
|
8933
|
+
}
|
|
8467
8934
|
|
|
8468
8935
|
/* ── Card meta row (version + download count) ──────────────────────────── */
|
|
8469
8936
|
.creator-card-meta {
|
|
@@ -9042,7 +9509,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9042
9509
|
padding: 1.75rem 2.25rem;
|
|
9043
9510
|
}
|
|
9044
9511
|
#billing-content {
|
|
9045
|
-
max-width:
|
|
9512
|
+
max-width: 1000px;
|
|
9046
9513
|
margin: 0 auto;
|
|
9047
9514
|
}
|
|
9048
9515
|
.billing-loading,
|
|
@@ -9054,11 +9521,22 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9054
9521
|
.billing-error {
|
|
9055
9522
|
color: var(--color-error);
|
|
9056
9523
|
}
|
|
9524
|
+
|
|
9057
9525
|
/* ── Dashboard Layout ─────────────────────────────────────────────────── */
|
|
9058
9526
|
.billing-dashboard {
|
|
9059
9527
|
display: flex;
|
|
9060
9528
|
flex-direction: column;
|
|
9061
9529
|
gap: 1.25rem;
|
|
9530
|
+
position: relative;
|
|
9531
|
+
}
|
|
9532
|
+
.billing-skel-overlay {
|
|
9533
|
+
position: absolute;
|
|
9534
|
+
inset: 0;
|
|
9535
|
+
z-index: 10;
|
|
9536
|
+
background: var(--color-bg-secondary);
|
|
9537
|
+
display: flex;
|
|
9538
|
+
flex-direction: column;
|
|
9539
|
+
gap: 1.25rem;
|
|
9062
9540
|
}
|
|
9063
9541
|
.billing-top-bar {
|
|
9064
9542
|
display: flex;
|
|
@@ -9085,7 +9563,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9085
9563
|
.billing-controls {
|
|
9086
9564
|
display: flex;
|
|
9087
9565
|
align-items: center;
|
|
9088
|
-
gap: 0.
|
|
9566
|
+
gap: 0.625rem;
|
|
9089
9567
|
flex-wrap: wrap;
|
|
9090
9568
|
}
|
|
9091
9569
|
|
|
@@ -9098,7 +9576,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9098
9576
|
overflow: hidden;
|
|
9099
9577
|
}
|
|
9100
9578
|
.billing-period-btn {
|
|
9101
|
-
padding: 0.
|
|
9579
|
+
padding: 0.4375rem 0.75rem;
|
|
9102
9580
|
border: none;
|
|
9103
9581
|
background: transparent;
|
|
9104
9582
|
color: var(--color-text-secondary);
|
|
@@ -9114,57 +9592,65 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9114
9592
|
color: var(--color-text-primary);
|
|
9115
9593
|
}
|
|
9116
9594
|
.billing-period-btn.active {
|
|
9117
|
-
background:
|
|
9595
|
+
background: var(--color-accent-primary);
|
|
9118
9596
|
color: #ffffff;
|
|
9119
9597
|
font-weight: 500;
|
|
9120
9598
|
}
|
|
9121
9599
|
|
|
9122
9600
|
/* ── Model Filter ────────────────────────────────────────────────────── */
|
|
9123
9601
|
.billing-model-filter {
|
|
9124
|
-
padding: 0.
|
|
9602
|
+
padding: 0.4375rem 0.75rem;
|
|
9125
9603
|
border: 1px solid var(--color-border-primary);
|
|
9126
9604
|
border-radius: 8px;
|
|
9127
9605
|
background: var(--color-bg-secondary);
|
|
9128
9606
|
color: var(--color-text-primary);
|
|
9129
9607
|
font-size: 0.8125rem;
|
|
9130
9608
|
cursor: pointer;
|
|
9131
|
-
min-width:
|
|
9609
|
+
min-width: 130px;
|
|
9132
9610
|
}
|
|
9133
9611
|
|
|
9134
|
-
/* ──
|
|
9612
|
+
/* ── Action Buttons ──────────────────────────────────────────────────── */
|
|
9135
9613
|
.billing-clear-container {
|
|
9136
9614
|
position: relative;
|
|
9137
9615
|
}
|
|
9138
9616
|
.billing-clear-btn {
|
|
9139
|
-
|
|
9617
|
+
width: 32px;
|
|
9618
|
+
height: 32px;
|
|
9619
|
+
display: inline-flex;
|
|
9620
|
+
align-items: center;
|
|
9621
|
+
justify-content: center;
|
|
9140
9622
|
border: 1px solid var(--color-border-primary);
|
|
9141
9623
|
border-radius: 8px;
|
|
9142
9624
|
background: var(--color-bg-secondary);
|
|
9143
9625
|
color: var(--color-text-secondary);
|
|
9144
9626
|
font-size: 0.875rem;
|
|
9145
9627
|
cursor: pointer;
|
|
9146
|
-
transition: all 0.
|
|
9628
|
+
transition: all 0.15s ease;
|
|
9147
9629
|
}
|
|
9148
9630
|
.billing-clear-btn:hover {
|
|
9149
9631
|
background: var(--color-bg-tertiary);
|
|
9150
|
-
color:
|
|
9151
|
-
|
|
9632
|
+
border-color: #ef4444;
|
|
9633
|
+
color: #ef4444;
|
|
9152
9634
|
}
|
|
9153
9635
|
.billing-share-btn {
|
|
9154
|
-
|
|
9155
|
-
|
|
9636
|
+
display: inline-flex;
|
|
9637
|
+
align-items: center;
|
|
9638
|
+
gap: 0.375rem;
|
|
9639
|
+
padding: 0.4375rem 0.75rem;
|
|
9640
|
+
border: 1px solid var(--color-border-primary);
|
|
9156
9641
|
border-radius: 8px;
|
|
9157
9642
|
background: var(--color-bg-secondary);
|
|
9158
|
-
color: var(--color-
|
|
9643
|
+
color: var(--color-text-secondary);
|
|
9159
9644
|
font-size: 0.8125rem;
|
|
9160
|
-
font-weight:
|
|
9645
|
+
font-weight: 500;
|
|
9161
9646
|
white-space: nowrap;
|
|
9162
9647
|
cursor: pointer;
|
|
9163
|
-
transition: all 0.
|
|
9648
|
+
transition: all 0.15s ease;
|
|
9164
9649
|
}
|
|
9165
9650
|
.billing-share-btn:hover {
|
|
9166
|
-
background: var(--color-
|
|
9167
|
-
color:
|
|
9651
|
+
background: var(--color-bg-tertiary);
|
|
9652
|
+
color: var(--color-text-primary);
|
|
9653
|
+
border-color: var(--color-text-secondary);
|
|
9168
9654
|
}
|
|
9169
9655
|
.billing-clear-popup {
|
|
9170
9656
|
position: absolute;
|
|
@@ -9177,13 +9663,13 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9177
9663
|
background: var(--color-bg-secondary);
|
|
9178
9664
|
border: 1px solid var(--color-border-primary);
|
|
9179
9665
|
border-radius: 8px;
|
|
9180
|
-
padding: 0.
|
|
9181
|
-
box-shadow: 0 4px
|
|
9666
|
+
padding: 0.375rem;
|
|
9667
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
9182
9668
|
z-index: 100;
|
|
9183
9669
|
min-width: 120px;
|
|
9184
9670
|
}
|
|
9185
9671
|
.billing-clear-option {
|
|
9186
|
-
padding: 0.
|
|
9672
|
+
padding: 0.4375rem 0.75rem;
|
|
9187
9673
|
border: none;
|
|
9188
9674
|
border-radius: 6px;
|
|
9189
9675
|
background: transparent;
|
|
@@ -9198,17 +9684,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9198
9684
|
background: var(--color-bg-tertiary);
|
|
9199
9685
|
}
|
|
9200
9686
|
.billing-clear-danger {
|
|
9201
|
-
color:
|
|
9687
|
+
color: #ef4444;
|
|
9202
9688
|
}
|
|
9203
9689
|
.billing-clear-danger:hover {
|
|
9204
|
-
background: rgba(239, 68, 68, 0.
|
|
9690
|
+
background: rgba(239, 68, 68, 0.08) !important;
|
|
9205
9691
|
}
|
|
9206
9692
|
|
|
9207
9693
|
/* ── Stats Row ───────────────────────────────────────────────────────── */
|
|
9208
9694
|
.billing-stats-row {
|
|
9209
9695
|
display: grid;
|
|
9210
9696
|
grid-template-columns: repeat(4, 1fr);
|
|
9211
|
-
gap:
|
|
9697
|
+
gap: 0.875rem;
|
|
9212
9698
|
}
|
|
9213
9699
|
@media (max-width: 900px) {
|
|
9214
9700
|
.billing-stats-row { grid-template-columns: repeat(2, 1fr); }
|
|
@@ -9220,67 +9706,90 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9220
9706
|
display: flex;
|
|
9221
9707
|
align-items: center;
|
|
9222
9708
|
gap: 0.875rem;
|
|
9223
|
-
padding: 1rem 1.
|
|
9709
|
+
padding: 1rem 1.125rem;
|
|
9224
9710
|
background: var(--color-bg-secondary);
|
|
9225
9711
|
border: 1px solid var(--color-border-primary);
|
|
9226
9712
|
border-radius: 12px;
|
|
9713
|
+
transition: border-color 0.15s ease;
|
|
9714
|
+
}
|
|
9715
|
+
.billing-stat-card:hover {
|
|
9716
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 40%, transparent);
|
|
9227
9717
|
}
|
|
9228
9718
|
.billing-stat-primary {
|
|
9229
|
-
|
|
9230
|
-
border-color: var(--color-accent);
|
|
9719
|
+
border-color: color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
|
|
9231
9720
|
}
|
|
9232
9721
|
.billing-stat-icon {
|
|
9233
|
-
|
|
9234
|
-
|
|
9722
|
+
width: 36px;
|
|
9723
|
+
height: 36px;
|
|
9724
|
+
border-radius: 9px;
|
|
9725
|
+
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
|
|
9726
|
+
color: var(--color-accent-primary);
|
|
9727
|
+
display: flex;
|
|
9728
|
+
align-items: center;
|
|
9729
|
+
justify-content: center;
|
|
9730
|
+
flex-shrink: 0;
|
|
9731
|
+
}
|
|
9732
|
+
.billing-stat-icon-cost { background: color-mix(in srgb, #10b981 10%, transparent); color: #10b981; }
|
|
9733
|
+
.billing-stat-icon-tokens { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; }
|
|
9734
|
+
.billing-stat-icon-requests { background: color-mix(in srgb, #f59e0b 10%, transparent); color: #f59e0b; }
|
|
9735
|
+
.billing-stat-icon-cache { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); color: var(--color-accent-primary); }
|
|
9736
|
+
.billing-stat-icon svg {
|
|
9737
|
+
width: 18px;
|
|
9738
|
+
height: 18px;
|
|
9235
9739
|
}
|
|
9236
9740
|
.billing-stat-content {
|
|
9237
9741
|
display: flex;
|
|
9238
9742
|
flex-direction: column;
|
|
9743
|
+
min-width: 0;
|
|
9239
9744
|
}
|
|
9240
9745
|
.billing-stat-value {
|
|
9241
|
-
font-size: 1.
|
|
9746
|
+
font-size: 1.1875rem;
|
|
9242
9747
|
font-weight: 700;
|
|
9243
9748
|
color: var(--color-text-primary);
|
|
9244
|
-
line-height: 1.
|
|
9749
|
+
line-height: 1.25;
|
|
9750
|
+
white-space: nowrap;
|
|
9751
|
+
overflow: hidden;
|
|
9752
|
+
text-overflow: ellipsis;
|
|
9245
9753
|
}
|
|
9246
9754
|
.billing-stat-primary .billing-stat-value {
|
|
9247
|
-
color: var(--color-accent);
|
|
9755
|
+
color: var(--color-accent-primary);
|
|
9248
9756
|
}
|
|
9249
9757
|
.billing-stat-label {
|
|
9250
|
-
font-size: 0.
|
|
9758
|
+
font-size: 0.71875rem;
|
|
9251
9759
|
color: var(--color-text-secondary);
|
|
9252
|
-
|
|
9253
|
-
|
|
9760
|
+
margin-top: 0.125rem;
|
|
9761
|
+
white-space: nowrap;
|
|
9254
9762
|
}
|
|
9255
9763
|
|
|
9256
|
-
/* ──
|
|
9764
|
+
/* ── Heatmap ─────────────────────────────────────────────────────────── */
|
|
9257
9765
|
.billing-heatmap-row { width: 100%; }
|
|
9258
9766
|
.billing-heat-dow-row {
|
|
9259
9767
|
display: grid;
|
|
9260
|
-
grid-template-columns: repeat(7,
|
|
9261
|
-
gap:
|
|
9262
|
-
margin: 0.75rem 0
|
|
9768
|
+
grid-template-columns: repeat(7, 28px);
|
|
9769
|
+
gap: 5px;
|
|
9770
|
+
margin: 0.75rem 0 5px;
|
|
9263
9771
|
justify-content: start;
|
|
9264
9772
|
}
|
|
9265
9773
|
.billing-heat-dow {
|
|
9266
9774
|
text-align: center;
|
|
9267
|
-
font-size:
|
|
9268
|
-
color: var(--color-text-
|
|
9775
|
+
font-size: 0.625rem;
|
|
9776
|
+
color: var(--color-text-secondary);
|
|
9777
|
+
opacity: 0.7;
|
|
9269
9778
|
}
|
|
9270
9779
|
.billing-heat-grid {
|
|
9271
9780
|
display: grid;
|
|
9272
|
-
grid-template-columns: repeat(7,
|
|
9273
|
-
gap:
|
|
9781
|
+
grid-template-columns: repeat(7, 28px);
|
|
9782
|
+
gap: 5px;
|
|
9274
9783
|
justify-content: start;
|
|
9275
9784
|
}
|
|
9276
9785
|
.billing-heat-cell {
|
|
9277
|
-
width:
|
|
9278
|
-
height:
|
|
9279
|
-
border-radius:
|
|
9280
|
-
background: var(--color-bg-
|
|
9786
|
+
width: 28px;
|
|
9787
|
+
height: 28px;
|
|
9788
|
+
border-radius: 5px;
|
|
9789
|
+
background: var(--color-bg-tertiary);
|
|
9281
9790
|
}
|
|
9282
9791
|
.billing-heat-cell.is-empty { background: transparent; }
|
|
9283
|
-
.billing-heat-cell[data-level="0"] { background: var(--color-
|
|
9792
|
+
.billing-heat-cell[data-level="0"] { background: var(--color-border-primary); }
|
|
9284
9793
|
.billing-heat-cell[data-level="1"] { background: #9be9a8; }
|
|
9285
9794
|
.billing-heat-cell[data-level="2"] { background: #40c463; }
|
|
9286
9795
|
.billing-heat-cell[data-level="3"] { background: #30a14e; }
|
|
@@ -9289,19 +9798,18 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9289
9798
|
.billing-heat-legend {
|
|
9290
9799
|
display: flex;
|
|
9291
9800
|
align-items: center;
|
|
9292
|
-
gap:
|
|
9293
|
-
font-size:
|
|
9801
|
+
gap: 4px;
|
|
9802
|
+
font-size: 0.6875rem;
|
|
9294
9803
|
color: var(--color-text-secondary);
|
|
9295
9804
|
}
|
|
9296
9805
|
.billing-heat-legend .billing-heat-cell {
|
|
9297
|
-
width:
|
|
9298
|
-
height:
|
|
9806
|
+
width: 12px;
|
|
9807
|
+
height: 12px;
|
|
9299
9808
|
aspect-ratio: auto;
|
|
9300
9809
|
}
|
|
9301
9810
|
|
|
9302
|
-
|
|
9303
|
-
|
|
9304
|
-
}
|
|
9811
|
+
/* ── Chart Card base ─────────────────────────────────────────────────── */
|
|
9812
|
+
.billing-chart-row { width: 100%; }
|
|
9305
9813
|
.billing-chart-card {
|
|
9306
9814
|
background: var(--color-bg-secondary);
|
|
9307
9815
|
border: 1px solid var(--color-border-primary);
|
|
@@ -9311,14 +9819,14 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9311
9819
|
display: flex;
|
|
9312
9820
|
flex-direction: column;
|
|
9313
9821
|
}
|
|
9314
|
-
.billing-chart-wide {
|
|
9315
|
-
width: 100%;
|
|
9316
|
-
}
|
|
9822
|
+
.billing-chart-wide { width: 100%; }
|
|
9317
9823
|
.billing-chart-header {
|
|
9318
9824
|
display: flex;
|
|
9319
9825
|
justify-content: space-between;
|
|
9320
9826
|
align-items: center;
|
|
9321
9827
|
margin-bottom: 1rem;
|
|
9828
|
+
flex-wrap: wrap;
|
|
9829
|
+
gap: 0.5rem;
|
|
9322
9830
|
}
|
|
9323
9831
|
.billing-chart-header h4 {
|
|
9324
9832
|
font-size: 0.9375rem;
|
|
@@ -9329,25 +9837,21 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9329
9837
|
.billing-chart-legends {
|
|
9330
9838
|
display: flex;
|
|
9331
9839
|
align-items: center;
|
|
9332
|
-
gap:
|
|
9840
|
+
gap: 0.875rem;
|
|
9841
|
+
flex-wrap: wrap;
|
|
9333
9842
|
}
|
|
9334
9843
|
.billing-chart-legend {
|
|
9335
9844
|
display: flex;
|
|
9336
9845
|
align-items: center;
|
|
9337
|
-
gap: 0.
|
|
9338
|
-
font-size: 0.
|
|
9846
|
+
gap: 0.3125rem;
|
|
9847
|
+
font-size: 0.71875rem;
|
|
9339
9848
|
color: var(--color-text-secondary);
|
|
9340
9849
|
}
|
|
9341
9850
|
.billing-legend-dot {
|
|
9342
|
-
width:
|
|
9343
|
-
height:
|
|
9851
|
+
width: 7px;
|
|
9852
|
+
height: 7px;
|
|
9344
9853
|
border-radius: 50%;
|
|
9345
|
-
|
|
9346
|
-
.billing-legend-tokens {
|
|
9347
|
-
background: var(--color-accent);
|
|
9348
|
-
}
|
|
9349
|
-
.billing-legend-cost {
|
|
9350
|
-
background: #10b981;
|
|
9854
|
+
flex-shrink: 0;
|
|
9351
9855
|
}
|
|
9352
9856
|
.billing-chart-empty {
|
|
9353
9857
|
flex: 1;
|
|
@@ -9358,7 +9862,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9358
9862
|
font-size: 0.875rem;
|
|
9359
9863
|
}
|
|
9360
9864
|
|
|
9361
|
-
/* ── Combined Chart
|
|
9865
|
+
/* ── Combined Bar Chart ──────────────────────────────────────────────── */
|
|
9362
9866
|
.billing-combined-chart {
|
|
9363
9867
|
display: flex;
|
|
9364
9868
|
align-items: flex-end;
|
|
@@ -9376,10 +9880,10 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9376
9880
|
position: relative;
|
|
9377
9881
|
min-width: 0;
|
|
9378
9882
|
cursor: pointer;
|
|
9883
|
+
border-radius: 4px;
|
|
9379
9884
|
}
|
|
9380
9885
|
.billing-bar-group:hover {
|
|
9381
9886
|
background: var(--color-bg-tertiary);
|
|
9382
|
-
border-radius: 4px;
|
|
9383
9887
|
}
|
|
9384
9888
|
.billing-bar-pair {
|
|
9385
9889
|
width: 100%;
|
|
@@ -9387,17 +9891,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9387
9891
|
display: flex;
|
|
9388
9892
|
align-items: flex-end;
|
|
9389
9893
|
justify-content: center;
|
|
9390
|
-
gap:
|
|
9894
|
+
gap: 2px;
|
|
9391
9895
|
}
|
|
9392
9896
|
.billing-input-stack {
|
|
9393
|
-
width:
|
|
9897
|
+
width: 10px;
|
|
9394
9898
|
display: flex;
|
|
9395
9899
|
flex-direction: column;
|
|
9396
9900
|
justify-content: flex-end;
|
|
9397
9901
|
align-items: stretch;
|
|
9398
9902
|
}
|
|
9399
9903
|
.billing-cache-hit {
|
|
9400
|
-
background: #
|
|
9904
|
+
background: #3b82f6;
|
|
9401
9905
|
width: 100%;
|
|
9402
9906
|
border-radius: 2px 2px 0 0;
|
|
9403
9907
|
transition: height 0.2s ease;
|
|
@@ -9406,26 +9910,29 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9406
9910
|
background: #f59e0b;
|
|
9407
9911
|
width: 100%;
|
|
9408
9912
|
transition: height 0.2s ease;
|
|
9409
|
-
}
|
|
9410
|
-
|
|
9411
|
-
|
|
9913
|
+
}
|
|
9914
|
+
.billing-output-bar {
|
|
9915
|
+
width: 10px;
|
|
9916
|
+
background: #34d399;
|
|
9412
9917
|
border-radius: 2px 2px 0 0;
|
|
9413
9918
|
transition: height 0.2s ease;
|
|
9414
9919
|
}
|
|
9415
9920
|
.billing-bar-date {
|
|
9416
9921
|
position: absolute;
|
|
9417
9922
|
bottom: -1.25rem;
|
|
9418
|
-
font-size: 0.
|
|
9923
|
+
font-size: 0.5625rem;
|
|
9419
9924
|
color: var(--color-text-secondary);
|
|
9420
9925
|
white-space: nowrap;
|
|
9421
9926
|
min-height: 0.75rem;
|
|
9927
|
+
opacity: 0.8;
|
|
9422
9928
|
}
|
|
9423
9929
|
|
|
9424
|
-
/* Legend colors */
|
|
9425
|
-
.billing-legend-total
|
|
9426
|
-
.billing-legend-cache-hit { background: #
|
|
9427
|
-
.billing-legend-cache-miss
|
|
9428
|
-
.billing-legend-output
|
|
9930
|
+
/* Legend colors — indigo + emerald */
|
|
9931
|
+
.billing-legend-total { background: var(--color-accent-primary); }
|
|
9932
|
+
.billing-legend-cache-hit { background: #3b82f6; }
|
|
9933
|
+
.billing-legend-cache-miss{ background: #f59e0b; }
|
|
9934
|
+
.billing-legend-output { background: #34d399; }
|
|
9935
|
+
|
|
9429
9936
|
/* ── Chart Tooltip ───────────────────────────────────────────────────── */
|
|
9430
9937
|
.billing-chart-tooltip {
|
|
9431
9938
|
display: none;
|
|
@@ -9472,10 +9979,10 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9472
9979
|
border-radius: 50%;
|
|
9473
9980
|
flex-shrink: 0;
|
|
9474
9981
|
}
|
|
9475
|
-
.tooltip-total
|
|
9476
|
-
.tooltip-cache-hit { background: #
|
|
9477
|
-
.tooltip-cache-miss
|
|
9478
|
-
.tooltip-output
|
|
9982
|
+
.tooltip-total { background: var(--color-accent-primary); }
|
|
9983
|
+
.tooltip-cache-hit { background: #3b82f6; }
|
|
9984
|
+
.tooltip-cache-miss{ background: #f59e0b; }
|
|
9985
|
+
.tooltip-output { background: #34d399; }.tooltip-label {
|
|
9479
9986
|
flex: 1;
|
|
9480
9987
|
color: var(--color-text-secondary);
|
|
9481
9988
|
}
|
|
@@ -9490,9 +9997,6 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9490
9997
|
grid-template-columns: repeat(2, 1fr);
|
|
9491
9998
|
gap: 1rem;
|
|
9492
9999
|
}
|
|
9493
|
-
@media (max-width: 768px) {
|
|
9494
|
-
.billing-bottom-grid { grid-template-columns: 1fr; }
|
|
9495
|
-
}
|
|
9496
10000
|
.billing-section {
|
|
9497
10001
|
background: var(--color-bg-secondary);
|
|
9498
10002
|
border: 1px solid var(--color-border-primary);
|
|
@@ -9543,16 +10047,16 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9543
10047
|
transition: width 0.3s ease;
|
|
9544
10048
|
}
|
|
9545
10049
|
.billing-bar-total {
|
|
9546
|
-
background:
|
|
10050
|
+
background: var(--color-accent-primary);
|
|
9547
10051
|
}
|
|
9548
10052
|
.billing-bar-completion {
|
|
9549
|
-
background:
|
|
10053
|
+
background: #34d399;
|
|
9550
10054
|
}
|
|
9551
10055
|
.billing-bar-cache-read {
|
|
9552
|
-
background:
|
|
10056
|
+
background: #3b82f6;
|
|
9553
10057
|
}
|
|
9554
10058
|
.billing-bar-cache-miss {
|
|
9555
|
-
background:
|
|
10059
|
+
background: #f59e0b;
|
|
9556
10060
|
}
|
|
9557
10061
|
/* ── Model List ──────────────────────────────────────────────────────── */
|
|
9558
10062
|
.billing-model-list {
|
|
@@ -9597,7 +10101,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9597
10101
|
}
|
|
9598
10102
|
.billing-model-bar-fill {
|
|
9599
10103
|
height: 100%;
|
|
9600
|
-
background:
|
|
10104
|
+
background: var(--color-accent-primary);
|
|
9601
10105
|
border-radius: 3px;
|
|
9602
10106
|
}
|
|
9603
10107
|
.billing-model-cost {
|
|
@@ -9872,9 +10376,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9872
10376
|
align-items: center;
|
|
9873
10377
|
gap: 0.4375rem;
|
|
9874
10378
|
padding: 0.5rem 0.9375rem;
|
|
9875
|
-
background: var(--color-
|
|
9876
|
-
color:
|
|
9877
|
-
border:
|
|
10379
|
+
background: var(--color-accent-primary);
|
|
10380
|
+
color: #fff;
|
|
10381
|
+
border: none;
|
|
9878
10382
|
border-radius: 8px;
|
|
9879
10383
|
font-size: 0.8125rem;
|
|
9880
10384
|
font-weight: 500;
|
|
@@ -9909,14 +10413,6 @@ body.setup-mode[data-theme="dark"] {
|
|
|
9909
10413
|
background: rgba(221, 51, 51, 0.06);
|
|
9910
10414
|
}
|
|
9911
10415
|
|
|
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
10416
|
|
|
9921
10417
|
/* Exchange Rate Settings */
|
|
9922
10418
|
.settings-exchange-rate {
|
|
@@ -10012,6 +10508,8 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10012
10508
|
border: 1px solid var(--color-border-primary);
|
|
10013
10509
|
border-radius: 12px;
|
|
10014
10510
|
padding: 1.25rem;
|
|
10511
|
+
overflow: hidden;
|
|
10512
|
+
min-width: 0;
|
|
10015
10513
|
}
|
|
10016
10514
|
.billing-sessions-section h3 {
|
|
10017
10515
|
font-size: 0.9375rem;
|
|
@@ -10027,9 +10525,9 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10027
10525
|
}
|
|
10028
10526
|
.billing-sessions-header {
|
|
10029
10527
|
display: grid;
|
|
10030
|
-
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.
|
|
10528
|
+
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1.4fr;
|
|
10031
10529
|
gap: 0.5rem;
|
|
10032
|
-
padding: 0.75rem
|
|
10530
|
+
padding: 0.75rem 0rem;
|
|
10033
10531
|
background: var(--color-bg-tertiary);
|
|
10034
10532
|
border-radius: 8px;
|
|
10035
10533
|
font-size: 0.75rem;
|
|
@@ -10046,12 +10544,16 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10046
10544
|
}
|
|
10047
10545
|
.billing-session-row {
|
|
10048
10546
|
display: grid;
|
|
10049
|
-
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.
|
|
10547
|
+
grid-template-columns: 36px 1.5fr 0.8fr 0.8fr 0.8fr 0.8fr 0.9fr 1.4fr;
|
|
10050
10548
|
gap: 0.5rem;
|
|
10051
|
-
padding: 0.75rem
|
|
10549
|
+
padding: 0.75rem 0rem;
|
|
10052
10550
|
border-radius: 8px;
|
|
10053
10551
|
transition: background 0.15s;
|
|
10054
10552
|
align-items: center;
|
|
10553
|
+
border-bottom: 1px solid color-mix(in srgb, var(--color-border-primary) 50%, transparent);
|
|
10554
|
+
}
|
|
10555
|
+
.billing-session-row:last-child {
|
|
10556
|
+
border-bottom: none;
|
|
10055
10557
|
}
|
|
10056
10558
|
.billing-session-row:hover {
|
|
10057
10559
|
background: var(--color-bg-tertiary);
|
|
@@ -10110,42 +10612,17 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10110
10612
|
.billing-cell-cost {
|
|
10111
10613
|
font-family: var(--font-mono);
|
|
10112
10614
|
font-weight: 600;
|
|
10113
|
-
color: var(--color-
|
|
10615
|
+
color: var(--color-text-primary);
|
|
10114
10616
|
text-align: right;
|
|
10115
10617
|
}
|
|
10116
10618
|
.billing-cell-time {
|
|
10117
10619
|
font-size: 0.75rem;
|
|
10118
10620
|
color: var(--color-text-secondary);
|
|
10621
|
+
text-align: right;
|
|
10119
10622
|
}
|
|
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
|
-
}
|
|
10623
|
+
/* Mobile-only summary row — hidden on desktop */
|
|
10624
|
+
.billing-session-numbers-row { display: none; }
|
|
10625
|
+
|
|
10149
10626
|
|
|
10150
10627
|
/* ════ Media generation (Settings → Models tab) ════ */
|
|
10151
10628
|
.settings-section-desc {
|
|
@@ -10211,6 +10688,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10211
10688
|
cursor: not-allowed;
|
|
10212
10689
|
}
|
|
10213
10690
|
.media-row-status {
|
|
10691
|
+
flex: 1;
|
|
10214
10692
|
margin-left: auto;
|
|
10215
10693
|
font-size: 0.75rem;
|
|
10216
10694
|
color: var(--color-text-secondary);
|
|
@@ -10218,8 +10696,22 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10218
10696
|
white-space: nowrap;
|
|
10219
10697
|
overflow: hidden;
|
|
10220
10698
|
text-overflow: ellipsis;
|
|
10699
|
+
text-align: right;
|
|
10221
10700
|
max-width: 16rem;
|
|
10222
10701
|
}
|
|
10702
|
+
.media-vision-primary-note {
|
|
10703
|
+
flex: 1 1 auto;
|
|
10704
|
+
text-align: left;
|
|
10705
|
+
font-family: inherit;
|
|
10706
|
+
max-width: none;
|
|
10707
|
+
}
|
|
10708
|
+
.media-vision-primary-model {
|
|
10709
|
+
flex: 0 0 auto;
|
|
10710
|
+
font-size: 0.75rem;
|
|
10711
|
+
color: var(--color-text-secondary);
|
|
10712
|
+
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
|
|
10713
|
+
white-space: nowrap;
|
|
10714
|
+
}
|
|
10223
10715
|
.media-row-detail {
|
|
10224
10716
|
border-top: 1px solid var(--color-border-primary);
|
|
10225
10717
|
padding: 0.625rem 0.75rem;
|
|
@@ -10462,7 +10954,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10462
10954
|
right: 14px;
|
|
10463
10955
|
border: none;
|
|
10464
10956
|
background: none;
|
|
10465
|
-
font-size:
|
|
10957
|
+
font-size: 1.375rem;
|
|
10466
10958
|
line-height: 1;
|
|
10467
10959
|
color: var(--color-text-muted);
|
|
10468
10960
|
cursor: pointer;
|
|
@@ -10471,13 +10963,13 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10471
10963
|
|
|
10472
10964
|
.share-title {
|
|
10473
10965
|
margin: 0 0 4px;
|
|
10474
|
-
font-size:
|
|
10966
|
+
font-size: 1.0625rem;
|
|
10475
10967
|
font-weight: 700;
|
|
10476
10968
|
color: var(--color-text-primary);
|
|
10477
10969
|
}
|
|
10478
10970
|
.share-subtitle {
|
|
10479
10971
|
margin: 0 0 16px;
|
|
10480
|
-
font-size:
|
|
10972
|
+
font-size: 0.8125rem;
|
|
10481
10973
|
color: var(--color-text-tertiary);
|
|
10482
10974
|
}
|
|
10483
10975
|
|
|
@@ -10509,7 +11001,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10509
11001
|
}
|
|
10510
11002
|
|
|
10511
11003
|
.share-row-label {
|
|
10512
|
-
font-size:
|
|
11004
|
+
font-size: 0.75rem;
|
|
10513
11005
|
font-weight: 600;
|
|
10514
11006
|
color: var(--color-text-tertiary);
|
|
10515
11007
|
}
|
|
@@ -10539,7 +11031,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10539
11031
|
.share-theme-chip:hover { transform: translateY(-1px); }
|
|
10540
11032
|
.share-theme-chip.is-active { border-color: var(--color-button-primary); }
|
|
10541
11033
|
.share-theme-name {
|
|
10542
|
-
font-size:
|
|
11034
|
+
font-size: 0.6875rem;
|
|
10543
11035
|
font-weight: 700;
|
|
10544
11036
|
color: rgba(0,0,0,.55);
|
|
10545
11037
|
text-shadow: 0 1px 0 rgba(255,255,255,.4);
|
|
@@ -10565,7 +11057,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10565
11057
|
border-radius: var(--radius-sm, 5px);
|
|
10566
11058
|
background: transparent;
|
|
10567
11059
|
color: var(--color-text-secondary);
|
|
10568
|
-
font-size:
|
|
11060
|
+
font-size: 0.8125rem;
|
|
10569
11061
|
font-weight: 600;
|
|
10570
11062
|
cursor: pointer;
|
|
10571
11063
|
transition: background .12s ease, color .12s ease;
|
|
@@ -10588,7 +11080,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10588
11080
|
border-radius: var(--radius-sm, 6px);
|
|
10589
11081
|
background: var(--color-bg-primary);
|
|
10590
11082
|
color: var(--color-text-secondary);
|
|
10591
|
-
font-size:
|
|
11083
|
+
font-size: 0.8125rem;
|
|
10592
11084
|
font-weight: 600;
|
|
10593
11085
|
cursor: pointer;
|
|
10594
11086
|
transition: background .12s ease, border-color .12s ease, color .12s ease;
|
|
@@ -10614,7 +11106,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10614
11106
|
border: none;
|
|
10615
11107
|
background: none;
|
|
10616
11108
|
color: var(--color-button-primary);
|
|
10617
|
-
font-size:
|
|
11109
|
+
font-size: 0.75rem;
|
|
10618
11110
|
font-weight: 600;
|
|
10619
11111
|
cursor: pointer;
|
|
10620
11112
|
padding: 2px 4px;
|
|
@@ -10630,7 +11122,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10630
11122
|
border-radius: var(--radius-sm, 6px);
|
|
10631
11123
|
background: var(--color-bg-primary);
|
|
10632
11124
|
color: var(--color-text-primary);
|
|
10633
|
-
font-size:
|
|
11125
|
+
font-size: 0.8125rem;
|
|
10634
11126
|
line-height: 1.5;
|
|
10635
11127
|
font-family: inherit;
|
|
10636
11128
|
}
|
|
@@ -10647,7 +11139,7 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10647
11139
|
.share-btn-primary, .share-btn-secondary {
|
|
10648
11140
|
padding: 10px;
|
|
10649
11141
|
border-radius: var(--radius-sm, 6px);
|
|
10650
|
-
font-size:
|
|
11142
|
+
font-size: 0.8125rem;
|
|
10651
11143
|
font-weight: 600;
|
|
10652
11144
|
cursor: pointer;
|
|
10653
11145
|
border: 1px solid var(--color-border-primary);
|
|
@@ -10668,3 +11160,402 @@ body.setup-mode[data-theme="dark"] {
|
|
|
10668
11160
|
.share-btn-secondary:hover { background: var(--color-bg-hover); }
|
|
10669
11161
|
|
|
10670
11162
|
#share-toggle-header svg { display: block; }
|
|
11163
|
+
|
|
11164
|
+
@media (max-width: 768px) {
|
|
11165
|
+
/* Sidebar becomes a fixed drawer on top of content */
|
|
11166
|
+
#sidebar {
|
|
11167
|
+
position: fixed;
|
|
11168
|
+
top: 0;
|
|
11169
|
+
left: 0;
|
|
11170
|
+
height: 100%;
|
|
11171
|
+
z-index: 200;
|
|
11172
|
+
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
|
|
11173
|
+
transition: transform 0.3s ease, background-color 0.3s ease;
|
|
11174
|
+
transform: translateX(0);
|
|
11175
|
+
margin-left: 0 !important;
|
|
11176
|
+
}
|
|
11177
|
+
/* active session: always show ⋯ button (no hover on touch) */
|
|
11178
|
+
.session-item.active .session-actions-btn { display: flex; }
|
|
11179
|
+
#sidebar.hidden {
|
|
11180
|
+
transform: translateX(-100%);
|
|
11181
|
+
margin-left: 0 !important;
|
|
11182
|
+
}
|
|
11183
|
+
|
|
11184
|
+
/* Overlay backdrop */
|
|
11185
|
+
#sidebar-overlay {
|
|
11186
|
+
display: none;
|
|
11187
|
+
position: fixed;
|
|
11188
|
+
inset: 0;
|
|
11189
|
+
z-index: 199;
|
|
11190
|
+
background: rgba(0,0,0,0.4);
|
|
11191
|
+
}
|
|
11192
|
+
#sidebar-overlay.active {
|
|
11193
|
+
display: block;
|
|
11194
|
+
}
|
|
11195
|
+
|
|
11196
|
+
/* Main takes full width since sidebar is no longer in flow */
|
|
11197
|
+
#main {
|
|
11198
|
+
width: 100%;
|
|
11199
|
+
min-width: 0;
|
|
11200
|
+
overflow: visible;
|
|
11201
|
+
}
|
|
11202
|
+
|
|
11203
|
+
/* Tighten header padding */
|
|
11204
|
+
#top-header {
|
|
11205
|
+
padding: 0 0.75rem;
|
|
11206
|
+
}
|
|
11207
|
+
|
|
11208
|
+
/* Hide brand name and divider on mobile, keep only the logo icon */
|
|
11209
|
+
.header-logo,
|
|
11210
|
+
#header-brand .header-logo-divider,
|
|
11211
|
+
#header-brand.has-logo .header-logo-divider {
|
|
11212
|
+
display: none;
|
|
11213
|
+
}
|
|
11214
|
+
|
|
11215
|
+
/* Tighten right-side icon gap on mobile */
|
|
11216
|
+
#header-right {
|
|
11217
|
+
gap: 0.125rem;
|
|
11218
|
+
}
|
|
11219
|
+
|
|
11220
|
+
/* Session info bar: single-line, no hover-expand, font smaller */
|
|
11221
|
+
#session-info-bar {
|
|
11222
|
+
padding: 0.1875rem 0.75rem;
|
|
11223
|
+
font-size: 0.625rem;
|
|
11224
|
+
overflow: hidden;
|
|
11225
|
+
white-space: nowrap;
|
|
11226
|
+
flex-wrap: nowrap;
|
|
11227
|
+
}
|
|
11228
|
+
/* Always show detail fields on mobile (no hover) */
|
|
11229
|
+
#session-info-bar .sib-detail {
|
|
11230
|
+
display: contents;
|
|
11231
|
+
}
|
|
11232
|
+
/* Hide less-important fields and their separators (element + sib-sep-after-element pattern) */
|
|
11233
|
+
#sib-id,
|
|
11234
|
+
.sib-sep-after-id,
|
|
11235
|
+
#sib-dir,
|
|
11236
|
+
.sib-sep-after-dir,
|
|
11237
|
+
#sib-mode,
|
|
11238
|
+
.sib-sep-after-mode,
|
|
11239
|
+
#sib-reasoning-wrap,
|
|
11240
|
+
.sib-sep-after-reasoning,
|
|
11241
|
+
#sib-signal-wrap,
|
|
11242
|
+
.sib-sep-after-signal {
|
|
11243
|
+
display: none;
|
|
11244
|
+
}
|
|
11245
|
+
.sib-sep {
|
|
11246
|
+
margin: 0 0.25rem;
|
|
11247
|
+
}
|
|
11248
|
+
|
|
11249
|
+
/* Input bar: proportional spacing, touch-friendly */
|
|
11250
|
+
#input-bar {
|
|
11251
|
+
padding: 0.5rem 0.625rem;
|
|
11252
|
+
gap: 0.25rem;
|
|
11253
|
+
}
|
|
11254
|
+
|
|
11255
|
+
/* Attach & slash buttons: slightly smaller touch target */
|
|
11256
|
+
#btn-attach {
|
|
11257
|
+
padding: 0.25rem;
|
|
11258
|
+
}
|
|
11259
|
+
#btn-slash {
|
|
11260
|
+
padding: 0.25rem 0.375rem;
|
|
11261
|
+
font-size: 0.875rem;
|
|
11262
|
+
}
|
|
11263
|
+
|
|
11264
|
+
/* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
|
|
11265
|
+
#user-input {
|
|
11266
|
+
font-size: 1rem;
|
|
11267
|
+
padding: 0.4375rem 0.625rem;
|
|
11268
|
+
}
|
|
11269
|
+
|
|
11270
|
+
/* Send button: bigger tap target */
|
|
11271
|
+
#btn-send, #btn-interrupt {
|
|
11272
|
+
padding: 0.4375rem 0.875rem;
|
|
11273
|
+
font-size: 0.875rem;
|
|
11274
|
+
}
|
|
11275
|
+
|
|
11276
|
+
/* Welcome page: vertically centered but shifted up, add horizontal padding */
|
|
11277
|
+
#welcome {
|
|
11278
|
+
justify-content: center;
|
|
11279
|
+
padding-bottom: 30vh;
|
|
11280
|
+
padding-left: 1.5rem;
|
|
11281
|
+
padding-right: 1.5rem;
|
|
11282
|
+
}
|
|
11283
|
+
|
|
11284
|
+
/* ── Tasks page ── */
|
|
11285
|
+
#task-detail-panel {
|
|
11286
|
+
overflow: visible;
|
|
11287
|
+
height: auto;
|
|
11288
|
+
flex: 1;
|
|
11289
|
+
min-height: 0;
|
|
11290
|
+
}
|
|
11291
|
+
#task-detail-body {
|
|
11292
|
+
padding: 1rem 1rem 5rem;
|
|
11293
|
+
gap: 0.75rem;
|
|
11294
|
+
overflow-y: auto;
|
|
11295
|
+
-webkit-overflow-scrolling: touch;
|
|
11296
|
+
overscroll-behavior: contain;
|
|
11297
|
+
flex: 1;
|
|
11298
|
+
min-height: 0;
|
|
11299
|
+
}
|
|
11300
|
+
/* btn-create-task: move below title instead of absolute top-right */
|
|
11301
|
+
.task-page-header {
|
|
11302
|
+
flex-direction: column;
|
|
11303
|
+
padding-right: 0;
|
|
11304
|
+
}
|
|
11305
|
+
.btn-create-task {
|
|
11306
|
+
position: static;
|
|
11307
|
+
align-self: flex-start;
|
|
11308
|
+
margin-top: 0.25rem;
|
|
11309
|
+
}
|
|
11310
|
+
/* Task cards: stack info and actions vertically */
|
|
11311
|
+
.task-card-main {
|
|
11312
|
+
flex-wrap: wrap;
|
|
11313
|
+
}
|
|
11314
|
+
.task-card-actions {
|
|
11315
|
+
width: 100%;
|
|
11316
|
+
flex-wrap: wrap;
|
|
11317
|
+
}
|
|
11318
|
+
/* Table: let it scroll horizontally, keep columns readable */
|
|
11319
|
+
#task-list-table {
|
|
11320
|
+
overflow-x: auto;
|
|
11321
|
+
-webkit-overflow-scrolling: touch;
|
|
11322
|
+
}
|
|
11323
|
+
|
|
11324
|
+
/* ── Skills page ── */
|
|
11325
|
+
#skills-panel {
|
|
11326
|
+
overflow: visible;
|
|
11327
|
+
height: auto;
|
|
11328
|
+
flex: 1;
|
|
11329
|
+
min-height: 0;
|
|
11330
|
+
}
|
|
11331
|
+
#skills-body {
|
|
11332
|
+
padding: 1rem 1rem 5rem;
|
|
11333
|
+
gap: 0.75rem;
|
|
11334
|
+
overflow-y: auto;
|
|
11335
|
+
-webkit-overflow-scrolling: touch;
|
|
11336
|
+
overscroll-behavior: contain;
|
|
11337
|
+
flex: 1;
|
|
11338
|
+
min-height: 0;
|
|
11339
|
+
}
|
|
11340
|
+
/* action buttons: move below title, inline row */
|
|
11341
|
+
.skills-page-header {
|
|
11342
|
+
padding-right: 0;
|
|
11343
|
+
}
|
|
11344
|
+
.skill-action-btns {
|
|
11345
|
+
position: static;
|
|
11346
|
+
margin-top: 0.5rem;
|
|
11347
|
+
}
|
|
11348
|
+
/* Show system skills toggle: give right margin */
|
|
11349
|
+
#label-show-system {
|
|
11350
|
+
margin-right: 0.5rem;
|
|
11351
|
+
}
|
|
11352
|
+
/* Skills tab bar: stack tabs and controls vertically */
|
|
11353
|
+
#skills-tabs {
|
|
11354
|
+
flex-direction: row;
|
|
11355
|
+
align-items: center;
|
|
11356
|
+
gap: 0.5rem;
|
|
11357
|
+
}
|
|
11358
|
+
.skills-tabs-left {
|
|
11359
|
+
display: flex;
|
|
11360
|
+
flex-shrink: 0;
|
|
11361
|
+
}
|
|
11362
|
+
.skills-tab {
|
|
11363
|
+
padding: 0.5rem 0.5rem;
|
|
11364
|
+
}
|
|
11365
|
+
.skills-tabs-controls {
|
|
11366
|
+
padding-right: 0;
|
|
11367
|
+
flex-shrink: 0;
|
|
11368
|
+
margin-bottom: 0.25rem;
|
|
11369
|
+
}
|
|
11370
|
+
|
|
11371
|
+
/* ── Settings page ── */
|
|
11372
|
+
#settings-header {
|
|
11373
|
+
padding: 0.75rem 1rem;
|
|
11374
|
+
font-size: 0.9375rem;
|
|
11375
|
+
}
|
|
11376
|
+
#settings-body {
|
|
11377
|
+
padding: 1rem 1rem 5rem;
|
|
11378
|
+
gap: 1.5rem;
|
|
11379
|
+
overflow-y: auto;
|
|
11380
|
+
-webkit-overflow-scrolling: touch;
|
|
11381
|
+
overscroll-behavior: contain;
|
|
11382
|
+
}
|
|
11383
|
+
#settings-panel {
|
|
11384
|
+
overflow: visible;
|
|
11385
|
+
height: auto;
|
|
11386
|
+
flex: 1;
|
|
11387
|
+
min-height: 0;
|
|
11388
|
+
}
|
|
11389
|
+
.settings-section-title {
|
|
11390
|
+
font-size: 0.9375rem;
|
|
11391
|
+
flex-wrap: wrap;
|
|
11392
|
+
gap: 0.5rem;
|
|
11393
|
+
}
|
|
11394
|
+
/* Add Model button: full width on mobile */
|
|
11395
|
+
.btn-settings-add {
|
|
11396
|
+
width: 100%;
|
|
11397
|
+
justify-content: center;
|
|
11398
|
+
}
|
|
11399
|
+
/* Model card: tighter, stack actions */
|
|
11400
|
+
.model-card {
|
|
11401
|
+
padding: 0.75rem 0.875rem;
|
|
11402
|
+
gap: 0.625rem;
|
|
11403
|
+
}
|
|
11404
|
+
.model-card-header {
|
|
11405
|
+
flex-wrap: wrap;
|
|
11406
|
+
gap: 0.5rem;
|
|
11407
|
+
}
|
|
11408
|
+
.model-card-actions {
|
|
11409
|
+
flex-wrap: wrap;
|
|
11410
|
+
}
|
|
11411
|
+
|
|
11412
|
+
/* ── Channels page ── */
|
|
11413
|
+
#channels-panel {
|
|
11414
|
+
overflow: visible;
|
|
11415
|
+
height: auto;
|
|
11416
|
+
flex: 1;
|
|
11417
|
+
min-height: 0;
|
|
11418
|
+
}
|
|
11419
|
+
#channels-body {
|
|
11420
|
+
padding: 1rem 1rem 5rem;
|
|
11421
|
+
gap: 1rem;
|
|
11422
|
+
overflow-y: auto;
|
|
11423
|
+
-webkit-overflow-scrolling: touch;
|
|
11424
|
+
overscroll-behavior: contain;
|
|
11425
|
+
}
|
|
11426
|
+
/* Channel card: tighter padding, stack footer buttons */
|
|
11427
|
+
.channel-card {
|
|
11428
|
+
padding: 0.875rem 1rem;
|
|
11429
|
+
gap: 0.75rem;
|
|
11430
|
+
}
|
|
11431
|
+
|
|
11432
|
+
/* ── Billing / Trash / Creator pages ── */
|
|
11433
|
+
#billing-body { padding: 1rem 1rem 5rem; }
|
|
11434
|
+
#trash-body { padding: 1rem 1rem 5rem; }
|
|
11435
|
+
#creator-body { padding: 1rem 1rem 5rem; }
|
|
11436
|
+
|
|
11437
|
+
/* ── MCP page ── */
|
|
11438
|
+
#mcp-panel {
|
|
11439
|
+
overflow: visible;
|
|
11440
|
+
height: auto;
|
|
11441
|
+
flex: 1;
|
|
11442
|
+
min-height: 0;
|
|
11443
|
+
}
|
|
11444
|
+
#mcp-body {
|
|
11445
|
+
padding: 1rem 1rem 5rem;
|
|
11446
|
+
gap: 1rem;
|
|
11447
|
+
overflow-y: auto;
|
|
11448
|
+
-webkit-overflow-scrolling: touch;
|
|
11449
|
+
overscroll-behavior: contain;
|
|
11450
|
+
}
|
|
11451
|
+
.channel-card-footer {
|
|
11452
|
+
flex-wrap: wrap;
|
|
11453
|
+
gap: 0.5rem;
|
|
11454
|
+
}
|
|
11455
|
+
.channel-card-actions {
|
|
11456
|
+
flex-wrap: wrap;
|
|
11457
|
+
gap: 0.375rem;
|
|
11458
|
+
}
|
|
11459
|
+
|
|
11460
|
+
/* ── Profile / My Data page ── */
|
|
11461
|
+
#profile-body { padding: 1rem 0.875rem; }
|
|
11462
|
+
.profile-tab { padding: 0.5625rem 0.75rem; font-size: 0.75rem; }
|
|
11463
|
+
.profile-section-head { flex-wrap: wrap; }
|
|
11464
|
+
.profile-path { max-width: 100%; }
|
|
11465
|
+
.memory-card-head { flex-wrap: wrap; }
|
|
11466
|
+
.memory-card-actions { margin-top: 0.375rem; flex-wrap: wrap; }
|
|
11467
|
+
.btn-memory-curate span,
|
|
11468
|
+
.btn-memory-delete span { display: none; } /* icon-only on narrow screens */
|
|
11469
|
+
|
|
11470
|
+
/* ── File Recall page ── */
|
|
11471
|
+
.trash-toolbar {
|
|
11472
|
+
flex-wrap: wrap;
|
|
11473
|
+
gap: 0.5rem;
|
|
11474
|
+
}
|
|
11475
|
+
.trash-summary {
|
|
11476
|
+
width: 100%;
|
|
11477
|
+
}
|
|
11478
|
+
.trash-actions {
|
|
11479
|
+
flex-wrap: wrap;
|
|
11480
|
+
margin-left: 0;
|
|
11481
|
+
gap: 0.375rem;
|
|
11482
|
+
}
|
|
11483
|
+
.btn-trash-action {
|
|
11484
|
+
white-space: nowrap;
|
|
11485
|
+
flex-shrink: 0;
|
|
11486
|
+
}
|
|
11487
|
+
|
|
11488
|
+
/* Latency signal popup (tap to show on mobile, replaces native title tooltip) */
|
|
11489
|
+
.sib-signal-popup {
|
|
11490
|
+
position: fixed;
|
|
11491
|
+
z-index: 500;
|
|
11492
|
+
background: var(--color-bg-secondary);
|
|
11493
|
+
border: 1px solid var(--color-border-primary);
|
|
11494
|
+
border-radius: 6px;
|
|
11495
|
+
padding: 0.5rem 0.75rem;
|
|
11496
|
+
font-size: 0.75rem;
|
|
11497
|
+
color: var(--color-text-primary);
|
|
11498
|
+
white-space: pre-line;
|
|
11499
|
+
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
|
|
11500
|
+
max-width: 80vw;
|
|
11501
|
+
pointer-events: none;
|
|
11502
|
+
}
|
|
11503
|
+
/* Make signal icon look tappable on mobile */
|
|
11504
|
+
.sib-signal-clickable {
|
|
11505
|
+
cursor: pointer;
|
|
11506
|
+
}
|
|
11507
|
+
|
|
11508
|
+
.billing-bottom-grid { grid-template-columns: 1fr; }
|
|
11509
|
+
.billing-section,
|
|
11510
|
+
.billing-sessions-section { padding: 0.875rem; }
|
|
11511
|
+
.billing-stats-row { gap: 0.5rem; }
|
|
11512
|
+
.billing-stat-card { padding: 0.75rem; }
|
|
11513
|
+
.mcp-cta {
|
|
11514
|
+
flex-direction: column;
|
|
11515
|
+
align-items: stretch;
|
|
11516
|
+
gap: 0.75rem;
|
|
11517
|
+
}
|
|
11518
|
+
.btn-mcp-cta { justify-content: center; }
|
|
11519
|
+
.billing-sessions-header {
|
|
11520
|
+
display: none;
|
|
11521
|
+
}
|
|
11522
|
+
.billing-session-row {
|
|
11523
|
+
display: flex;
|
|
11524
|
+
flex-direction: column;
|
|
11525
|
+
gap: 0.25rem;
|
|
11526
|
+
padding: 0.75rem 1rem;
|
|
11527
|
+
border: 1px solid var(--color-border-primary);
|
|
11528
|
+
border-radius: 8px;
|
|
11529
|
+
background: var(--color-bg-secondary);
|
|
11530
|
+
min-width: 0;
|
|
11531
|
+
overflow: hidden;
|
|
11532
|
+
}
|
|
11533
|
+
.billing-cell-session {
|
|
11534
|
+
min-width: 0;
|
|
11535
|
+
width: 100%;
|
|
11536
|
+
}
|
|
11537
|
+
.billing-cell-index,
|
|
11538
|
+
.billing-session-row > .billing-cell-number,
|
|
11539
|
+
.billing-session-row > .billing-cell-cost,
|
|
11540
|
+
.billing-session-row > .billing-cell-time {
|
|
11541
|
+
display: none;
|
|
11542
|
+
}
|
|
11543
|
+
.billing-session-numbers-row {
|
|
11544
|
+
display: flex;
|
|
11545
|
+
flex-wrap: wrap;
|
|
11546
|
+
gap: 0.25rem 1rem;
|
|
11547
|
+
font-size: 0.8125rem;
|
|
11548
|
+
font-family: var(--font-mono);
|
|
11549
|
+
color: var(--color-text-secondary);
|
|
11550
|
+
margin-top: 0.125rem;
|
|
11551
|
+
}
|
|
11552
|
+
.billing-session-numbers-row .billing-cell-cost {
|
|
11553
|
+
font-weight: 600;
|
|
11554
|
+
color: var(--color-text-primary);
|
|
11555
|
+
}
|
|
11556
|
+
.billing-session-numbers-row .billing-cell-time {
|
|
11557
|
+
flex: 1 0 100%;
|
|
11558
|
+
font-size: 0.7rem;
|
|
11559
|
+
color: var(--color-text-tertiary);
|
|
11560
|
+
}
|
|
11561
|
+
}
|