@dickpy/dsh-imagegen 1.3.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/README.md +363 -196
  2. package/docs/images/ecommerce-mode.png +0 -0
  3. package/docs/images/image-generation-studio-three-column.png +0 -0
  4. package/docs/images/imagegen-overview.png +0 -0
  5. package/docs/images/multi-model-comparison.png +0 -0
  6. package/docs/videos/agent-chat-edit.gif +0 -0
  7. package/docs/videos/agent-chat-edit.mp4 +0 -0
  8. package/lib/client.js +2589 -884
  9. package/lib/client.js.map +1 -1
  10. package/lib/index.js +585 -240
  11. package/package.json +5 -2
  12. package/src/agent-image-tools.ts +131 -102
  13. package/src/client/ImageGenPanel.tsx +2679 -1594
  14. package/src/client/SettingsCard.tsx +6 -27
  15. package/src/client/api.ts +11 -1
  16. package/src/client/conversation-sync.ts +14 -0
  17. package/src/client/image-toolview.tsx +176 -165
  18. package/src/client/index.ts +25 -15
  19. package/src/client/locales.ts +746 -602
  20. package/src/client/mount.tsx +213 -124
  21. package/src/client/panel.module.css +2619 -1563
  22. package/src/client/sidebar-entry.ts +190 -144
  23. package/src/edit-image-command.ts +110 -0
  24. package/src/engine.ts +47 -5
  25. package/src/gallery-store.ts +20 -0
  26. package/src/generation-runtime.ts +11 -2
  27. package/src/history-store.ts +26 -0
  28. package/src/image-models.ts +1 -1
  29. package/src/index.ts +31 -12
  30. package/src/model-catalog.ts +19 -2
  31. package/src/presets.ts +11 -3
  32. package/src/prompt-enhancer.ts +63 -5
  33. package/src/protocol.ts +59 -5
  34. package/src/routes.ts +62 -4
  35. package/src/task-queue.ts +42 -32
  36. package/docs/images/agent-chat-edit.png +0 -0
  37. package/docs/images/agent-chat-generate.png +0 -0
  38. package/docs/images/agent-chat-poster-workflow.png +0 -0
package/src/client/panel.module.css CHANGED
@@ -1,1563 +1,2619 @@
1
- /**
2
- * dsh-imagegen studio styles. Scoped by the plugin's own data attributes so
3
- * nothing leaks into the rest of the GUI; colors ride the dsh --dsw-* tokens
4
- * and interactive controls reuse the system primitives (Button / Pill), so
5
- * the studio follows the active theme (light/dark and skins) by construction.
6
- * The center-column hide rules are attribute-scoped and must stay in this
7
- * stylesheet (it is imported by mount.tsx, so the styles load with the
8
- * plugin).
9
- */
10
-
11
- /* --- center-column takeover (global rules, attribute-scoped) ----------------- */
12
-
13
- /* The panel container rides inside the conversation grid item as an extra
14
- trailing child; hidden unless the panel is active. The position rule covers
15
- both shells: the legacy `[data-pane="conversation"]` and the rc.6+
16
- AppFrame class-based column ([class*="centerCol"]) — without a positioned
17
- ancestor the absolutely-positioned view resolves against the frame. */
18
- [data-pane='conversation'],
19
- [class*='centerCol'] {
20
- position: relative;
21
- }
22
-
23
- /* The panel container rides inside the conversation grid item as an extra
24
- trailing child; hidden unless the panel is active. */
25
- [data-dsh-imagegen-view] {
26
- position: absolute;
27
- inset: 0;
28
- display: none;
29
- z-index: 60;
30
- background: var(--dsw-alias-bg-base);
31
- }
32
-
33
- /* The center column is single-occupant; the :not() guards keep the sibling
34
- panels (task board / ssh) from fighting over visibility if both activation
35
- attributes ever coexist. */
36
- html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-view] {
37
- display: block;
38
- }
39
-
40
- /* While the panel is active, the conversation content underneath is hidden
41
- (it stays mounted and stateful). */
42
- html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-imagegen-view]),
43
- html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] > :not([data-dsh-imagegen-view]) {
44
- display: none !important;
45
- }
46
-
47
- /* --- sidebar entry row ------------------------------------------------------- */
48
-
49
- .entry {
50
- display: flex;
51
- align-items: center;
52
- gap: 8px;
53
- width: 100%;
54
- height: 32px;
55
- padding: 0 12px;
56
- background: transparent;
57
- border: none;
58
- border-radius: 8px;
59
- color: var(--dsw-alias-label-secondary);
60
- cursor: pointer;
61
- font-size: 13px;
62
- white-space: nowrap;
63
- }
64
-
65
- .entry:hover {
66
- background: var(--dsw-specific-sidebar-nav-item-hover);
67
- color: var(--dsw-alias-label-primary);
68
- }
69
-
70
- .entry[data-active] {
71
- background: var(--dsw-specific-sidebar-nav-item-active);
72
- color: var(--dsw-alias-label-primary);
73
- font-weight: 600;
74
- }
75
-
76
- .entryIcon {
77
- display: inline-flex;
78
- align-items: center;
79
- justify-content: center;
80
- flex: none;
81
- }
82
-
83
- .entryLabel {
84
- overflow: hidden;
85
- text-overflow: ellipsis;
86
- }
87
-
88
- /* Collapsed rail: icon-only, centered, matching the shell's 56px rail. */
89
- [data-dsh-frame][data-sidebar-collapsed] .entry {
90
- justify-content: center;
91
- padding: 0;
92
- width: 100%;
93
- }
94
-
95
- [data-dsh-frame][data-sidebar-collapsed] .entryLabel {
96
- display: none;
97
- }
98
-
99
- /* --- panel frame -------------------------------------------------------------- */
100
-
101
- .view {
102
- overflow: hidden;
103
- }
104
-
105
- /* The shell does not ship a global `box-sizing: border-box` reset, so scope
106
- one to the panel subtree: without it, `height: 100%` + padding grows past
107
- the container and clips the footer off the bottom of the screen. */
108
- .panel,
109
- .panel *,
110
- .panel *::before,
111
- .panel *::after {
112
- box-sizing: border-box;
113
- }
114
-
115
- .panel {
116
- position: relative;
117
- display: flex;
118
- flex-direction: column;
119
- height: 100%;
120
- min-width: 0;
121
- min-height: 0;
122
- overflow: hidden;
123
- padding: 14px 16px 16px;
124
- gap: 10px;
125
- background: var(--dsw-alias-bg-base);
126
- color: var(--dsw-alias-label-primary);
127
- font-family: var(--dsw-font-family);
128
- }
129
-
130
- .panelHeader {
131
- display: flex;
132
- align-items: center;
133
- justify-content: space-between;
134
- gap: 12px;
135
- flex: none;
136
- }
137
-
138
- .panelHeading {
139
- display: flex;
140
- align-items: baseline;
141
- gap: 10px;
142
- min-width: 0;
143
- }
144
-
145
- .panelTitle {
146
- margin: 0;
147
- font-size: 16px;
148
- font-weight: 700;
149
- color: var(--dsw-alias-label-primary);
150
- white-space: nowrap;
151
- }
152
-
153
- /* GitHub icon button next to the title (opens the repo). */
154
- .githubLink {
155
- display: inline-flex;
156
- align-items: center;
157
- justify-content: center;
158
- flex: none;
159
- width: 22px;
160
- height: 22px;
161
- border-radius: 6px;
162
- color: var(--dsw-alias-label-secondary);
163
- text-decoration: none;
164
- transition: color 0.12s, background 0.12s;
165
- }
166
-
167
- .githubLink:hover {
168
- color: var(--dsw-alias-label-primary);
169
- background: var(--dsw-alias-bg-layer-2);
170
- }
171
-
172
- /* --- connection status and update notice -------------------------------------- */
173
-
174
- .connectionStatus {
175
- display: inline-flex;
176
- align-items: center;
177
- gap: 6px;
178
- flex: none;
179
- height: 28px;
180
- padding: 0 10px;
181
- border: 1px solid var(--dsw-alias-label-error);
182
- border-radius: 8px;
183
- background: transparent;
184
- color: var(--dsw-alias-label-error);
185
- font: inherit;
186
- font-size: 12px;
187
- line-height: 1;
188
- white-space: nowrap;
189
- }
190
-
191
- .connectionStatus[data-connected='true'] {
192
- border-color: var(--dsw-alias-state-success-primary);
193
- color: var(--dsw-alias-state-success-primary);
194
- }
195
-
196
- .connectionDot {
197
- width: 6px;
198
- height: 6px;
199
- border-radius: 50%;
200
- background: currentColor;
201
- }
202
-
203
- .updateBanner {
204
- display: flex;
205
- align-items: center;
206
- justify-content: space-between;
207
- gap: 12px;
208
- flex: none;
209
- padding: 7px 10px 7px 12px;
210
- font-size: 12px;
211
- line-height: 1.5;
212
- border-radius: 10px;
213
- border: 1px solid var(--dsw-alias-state-warn-primary);
214
- color: var(--dsw-alias-state-warn-primary);
215
- overflow-wrap: anywhere;
216
- }
217
-
218
- .updateBanner[data-kind='ok'] {
219
- color: var(--dsw-alias-state-success-primary);
220
- border-color: var(--dsw-alias-state-success-primary);
221
- }
222
-
223
- .updateText {
224
- min-width: 0;
225
- }
226
-
227
- .updateActions {
228
- display: inline-flex;
229
- align-items: center;
230
- gap: 10px;
231
- flex: none;
232
- }
233
-
234
- .updateRelease {
235
- color: inherit;
236
- text-decoration: underline;
237
- text-underline-offset: 2px;
238
- white-space: nowrap;
239
- }
240
-
241
- @media (max-width: 700px) {
242
- .panelHeader {
243
- align-items: flex-start;
244
- }
245
-
246
- .panelHeading {
247
- align-items: flex-start;
248
- flex-direction: column;
249
- gap: 2px;
250
- }
251
-
252
- .updateBanner {
253
- align-items: flex-start;
254
- flex-direction: column;
255
- }
256
-
257
- .updateActions {
258
- width: 100%;
259
- justify-content: space-between;
260
- }
261
- }
262
-
263
- /* --- studio split: left config sidebar (narrow) + right canvas (wide) --------- */
264
-
265
- .studio {
266
- display: flex;
267
- gap: 14px;
268
- flex: 1;
269
- min-height: 0;
270
- min-width: 0;
271
- }
272
-
273
- .config {
274
- display: flex;
275
- flex-direction: column;
276
- gap: 12px;
277
- flex: none;
278
- width: 300px;
279
- min-width: 260px;
280
- max-width: 340px;
281
- height: 100%;
282
- min-height: 0;
283
- overflow: hidden;
284
- }
285
-
286
- /* The cards scroll in their own scrollport; the footer stays a fixed sibling
287
- below, so nothing ever hides underneath it (text and edit modes alike). */
288
- .configScroll {
289
- display: flex;
290
- flex-direction: column;
291
- gap: 12px;
292
- flex: 1;
293
- min-height: 0;
294
- overflow-y: auto;
295
- padding-right: 2px;
296
- scrollbar-width: thin;
297
- scrollbar-color: var(--dsw-alias-border-l2) transparent;
298
- }
299
-
300
- .configScroll::-webkit-scrollbar {
301
- width: 8px;
302
- }
303
-
304
- .configScroll::-webkit-scrollbar-thumb {
305
- background: var(--dsw-alias-border-l2);
306
- border-radius: 999px;
307
- }
308
-
309
- .canvas {
310
- position: relative;
311
- flex: 1;
312
- min-width: 0;
313
- min-height: 0;
314
- display: flex;
315
- flex-direction: column;
316
- border: 1px solid var(--dsw-alias-border-l1);
317
- border-radius: 12px;
318
- background: var(--dsw-alias-bg-layer-1);
319
- overflow: hidden;
320
- }
321
-
322
- .taskTray {
323
- position: absolute;
324
- z-index: 6;
325
- top: 12px;
326
- right: 12px;
327
- width: min(360px, calc(100% - 24px));
328
- max-height: calc(100% - 24px);
329
- display: flex;
330
- flex-direction: column;
331
- overflow: hidden;
332
- border: 1px solid var(--dsw-alias-border-l2);
333
- border-radius: 9px;
334
- background: color-mix(in srgb, var(--dsw-alias-bg-layer-1) 92%, transparent);
335
- box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
336
- backdrop-filter: blur(10px);
337
- }
338
-
339
- .taskTray[data-open='false'] { width: auto; max-width: calc(100% - 24px); }
340
- .taskTrayHeader { display: flex; align-items: stretch; min-height: 34px; color: var(--dsw-alias-label-primary); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--dsw-alias-border-l1); }
341
- .taskTray[data-open='false'] .taskTrayHeader { border-bottom: 0; }
342
- .taskTrayToggle { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 8px 10px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-size: inherit; font-weight: inherit; text-align: left; }
343
- .taskTrayToggle:hover { background: var(--dsw-alias-bg-layer-2); }
344
- .taskTrayCount { min-width: 18px; padding: 1px 5px; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; font-weight: 500; text-align: center; }
345
- .taskTrayChevron { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 400; }
346
- .taskTrayClose { width: 32px; border: 0; border-left: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font: inherit; font-size: 17px; }
347
- .taskTrayClose:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
348
- .taskTray[data-open='false'] .taskTrayToggle { min-height: 34px; }
349
- .taskRows { min-height: 0; overflow-y: auto; }
350
- .taskTray[data-open='false'] .taskRows { display: none; }
351
- .taskRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--dsw-alias-border-l1); }
352
- .taskRow:first-of-type { border-top: 0; }
353
- .taskStatus { color: var(--dsw-alias-label-tertiary); font-size: 11px; white-space: nowrap; }
354
- .taskRow[data-status='running'] .taskStatus { color: var(--dsw-alias-brand-primary); }
355
- .taskRow[data-status='failed'] .taskStatus { color: var(--dsw-alias-label-error); }
356
- .taskPrompt { overflow: hidden; color: var(--dsw-alias-label-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
357
- .taskRow button { padding: 2px 7px; border: 0; border-radius: 5px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
358
- .taskRow button:hover { color: var(--dsw-alias-brand-primary); }
359
-
360
- .configGuide { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 35%); }
361
- .configGuideBody { display: flex; width: min(360px, 100%); flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); box-shadow: 0 14px 40px rgb(0 0 0 / 20%); }
362
- .configGuideBody span { color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 1.55; }
363
- .configGuideBody button { align-self: flex-end; min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--dsw-alias-bg-layer-1); background: var(--dsw-alias-brand-primary); cursor: pointer; font: inherit; font-size: 12px; }
364
-
365
- /* --- history column (far right) ------------------------------------------------ */
366
-
367
- .history {
368
- display: flex;
369
- flex-direction: column;
370
- flex: none;
371
- width: 240px;
372
- min-width: 200px;
373
- max-width: 280px;
374
- min-height: 0;
375
- border: 1px solid var(--dsw-alias-border-l1);
376
- border-radius: 12px;
377
- background: var(--dsw-alias-bg-layer-1);
378
- overflow: hidden;
379
- }
380
-
381
- .historyHeader {
382
- display: flex;
383
- align-items: center;
384
- justify-content: space-between;
385
- gap: 8px;
386
- padding: 10px 12px;
387
- border-bottom: 1px solid var(--dsw-alias-border-l1);
388
- flex: none;
389
- }
390
-
391
- .historyFilters {
392
- display: grid;
393
- grid-template-columns: 1fr 1fr;
394
- gap: 6px;
395
- padding: 8px 10px;
396
- border-bottom: 1px solid var(--dsw-alias-border-l1);
397
- }
398
-
399
- .historySearch,
400
- .historyFilters select,
401
- .gallerySearch {
402
- min-width: 0;
403
- min-height: 29px;
404
- box-sizing: border-box;
405
- padding: 0 8px;
406
- border: 1px solid var(--dsw-alias-border-l2);
407
- border-radius: 7px;
408
- color: var(--dsw-alias-label-primary);
409
- background: var(--dsw-alias-bg-layer-2);
410
- font: inherit;
411
- font-size: 11px;
412
- }
413
-
414
- .historySearch { grid-column: 1 / -1; }
415
- .gallerySearch { width: 156px; }
416
- .galleryTagInput { width: 130px; min-height: 29px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); font: inherit; font-size: 11px; }
417
- .galleryBulkButton { min-height: 29px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 11px; }
418
- .galleryBulkButton:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); }
419
- .galleryBulkButton:disabled { opacity: .45; cursor: default; }
420
-
421
- .historyTitle {
422
- font-size: 13px;
423
- font-weight: 600;
424
- color: var(--dsw-alias-label-primary);
425
- }
426
-
427
- .historyClear {
428
- padding: 2px 8px;
429
- font: inherit;
430
- font-size: 11.5px;
431
- color: var(--dsw-alias-label-tertiary);
432
- background: transparent;
433
- border: 1px solid var(--dsw-alias-border-l2);
434
- border-radius: 999px;
435
- cursor: pointer;
436
- }
437
-
438
- .historyClear:hover {
439
- color: var(--dsw-alias-label-error);
440
- border-color: var(--dsw-alias-label-error);
441
- }
442
-
443
- .historyList {
444
- flex: 1;
445
- min-height: 0;
446
- overflow-y: auto;
447
- display: flex;
448
- flex-direction: column;
449
- gap: 8px;
450
- padding: 10px;
451
- scrollbar-width: thin;
452
- scrollbar-color: var(--dsw-alias-border-l2) transparent;
453
- }
454
-
455
- .historyList::-webkit-scrollbar {
456
- width: 8px;
457
- }
458
-
459
- .historyList::-webkit-scrollbar-thumb {
460
- background: var(--dsw-alias-border-l2);
461
- border-radius: 999px;
462
- }
463
-
464
- .historyEmpty {
465
- flex: 1;
466
- display: flex;
467
- align-items: center;
468
- justify-content: center;
469
- padding: 20px;
470
- font-size: 12px;
471
- line-height: 1.6;
472
- text-align: center;
473
- color: var(--dsw-alias-label-tertiary);
474
- }
475
-
476
- .historyItem {
477
- display: flex;
478
- flex-direction: column;
479
- gap: 6px;
480
- padding: 8px;
481
- border: 1px solid var(--dsw-alias-border-l1);
482
- border-radius: 10px;
483
- background: var(--dsw-alias-bg-layer-2);
484
- flex: none;
485
- }
486
-
487
- .historyItem:hover {
488
- border-color: var(--dsw-alias-border-l2);
489
- }
490
-
491
- .historyItem[data-active] {
492
- border-color: var(--dsw-alias-brand-primary);
493
- }
494
-
495
- .historyMain {
496
- display: flex;
497
- gap: 8px;
498
- align-items: flex-start;
499
- padding: 0;
500
- background: transparent;
501
- border: none;
502
- font: inherit;
503
- color: inherit;
504
- text-align: left;
505
- cursor: pointer;
506
- min-width: 0;
507
- }
508
-
509
- .historyThumb {
510
- width: 52px;
511
- height: 52px;
512
- border-radius: 8px;
513
- object-fit: cover;
514
- background: var(--dsw-alias-bg-base);
515
- flex: none;
516
- }
517
-
518
- .historyThumbPlaceholder {
519
- width: 52px;
520
- height: 52px;
521
- border-radius: 8px;
522
- background: var(--dsw-alias-bg-layer-3);
523
- flex: none;
524
- }
525
-
526
- .historyInfo {
527
- flex: 1;
528
- min-width: 0;
529
- display: flex;
530
- flex-direction: column;
531
- gap: 4px;
532
- }
533
-
534
- .historyPrompt {
535
- font-size: 12px;
536
- line-height: 1.4;
537
- color: var(--dsw-alias-label-primary);
538
- display: -webkit-box;
539
- -webkit-line-clamp: 2;
540
- -webkit-box-orient: vertical;
541
- overflow: hidden;
542
- }
543
-
544
- .historyMeta {
545
- font-size: 11px;
546
- color: var(--dsw-alias-label-tertiary);
547
- white-space: nowrap;
548
- overflow: hidden;
549
- text-overflow: ellipsis;
550
- }
551
-
552
- .historyActions {
553
- display: flex;
554
- gap: 6px;
555
- justify-content: flex-end;
556
- }
557
-
558
- .historyAction {
559
- padding: 2px 8px;
560
- font: inherit;
561
- font-size: 11.5px;
562
- color: var(--dsw-alias-label-secondary);
563
- background: transparent;
564
- border: 1px solid var(--dsw-alias-border-l2);
565
- border-radius: 999px;
566
- cursor: pointer;
567
- }
568
-
569
- .historyAction:hover {
570
- color: var(--dsw-alias-label-primary);
571
- border-color: var(--dsw-alias-label-dimmed);
572
- }
573
-
574
- .historyAction[data-danger]:hover {
575
- color: var(--dsw-alias-label-error);
576
- border-color: var(--dsw-alias-label-error);
577
- }
578
-
579
- /* --- cards (system-aligned rounded group chrome) ------------------------------ */
580
-
581
- .card {
582
- display: flex;
583
- flex-direction: column;
584
- gap: 10px;
585
- padding: 12px;
586
- background: var(--dsw-alias-bg-layer-2);
587
- border: 1px solid var(--dsw-alias-border-l1);
588
- border-radius: 12px;
589
- flex: none;
590
- }
591
-
592
- /* --- mode tabs (system Pill switcher) ------------------------------------------ */
593
-
594
- .modeRow {
595
- display: flex;
596
- gap: 8px;
597
- align-items: center;
598
- }
599
-
600
- .modePill {
601
- flex: 1;
602
- justify-content: center;
603
- height: 28px;
604
- font-size: 13px;
605
- }
606
-
607
- /* --- reference image upload (edit mode) ---------------------------------------- */
608
-
609
- .uploadBox {
610
- display: flex;
611
- flex-direction: column;
612
- align-items: center;
613
- justify-content: center;
614
- gap: 6px;
615
- min-height: 128px;
616
- padding: 16px;
617
- color: var(--dsw-alias-label-secondary);
618
- background: transparent;
619
- border: 1.5px dashed var(--dsw-alias-border-l2);
620
- border-radius: 12px;
621
- cursor: pointer;
622
- font: inherit;
623
- font-size: 12.5px;
624
- text-align: center;
625
- }
626
-
627
- .uploadBox:hover {
628
- color: var(--dsw-alias-label-primary);
629
- border-color: var(--dsw-alias-label-dimmed);
630
- background: var(--dsw-alias-interactive-bg-hover);
631
- }
632
-
633
- .uploadBox:focus-visible {
634
- outline: 2px solid var(--dsw-alias-brand-primary);
635
- outline-offset: 1px;
636
- }
637
-
638
- .uploadIcon {
639
- display: inline-flex;
640
- color: var(--dsw-alias-label-tertiary);
641
- }
642
-
643
- .uploadHint {
644
- font-size: 11px;
645
- color: var(--dsw-alias-label-tertiary);
646
- }
647
-
648
- .reference {
649
- display: flex;
650
- flex-direction: column;
651
- gap: 8px;
652
- }
653
-
654
- .referenceImage {
655
- width: 100%;
656
- max-height: 176px;
657
- object-fit: contain;
658
- border-radius: 10px;
659
- background: var(--dsw-alias-bg-base);
660
- border: 1px solid var(--dsw-alias-border-l1);
661
- }
662
-
663
- .referenceActions {
664
- display: flex;
665
- gap: 8px;
666
- }
667
-
668
- .hiddenFile {
669
- display: none;
670
- }
671
-
672
- /* --- prompt -------------------------------------------------------------------- */
673
-
674
- .prompt {
675
- width: 100%;
676
- min-height: 120px;
677
- padding: 10px 12px;
678
- font-size: 13px;
679
- line-height: 1.6;
680
- color: var(--dsw-alias-label-primary);
681
- background: var(--dsw-alias-bg-layer-3);
682
- border: 1px solid var(--dsw-alias-border-l2);
683
- border-radius: 10px;
684
- outline: none;
685
- resize: vertical;
686
- font-family: inherit;
687
- box-sizing: border-box;
688
- }
689
-
690
- .prompt:focus-visible {
691
- border-color: var(--dsw-alias-brand-primary);
692
- }
693
-
694
- .prompt::placeholder {
695
- color: var(--dsw-alias-label-tertiary);
696
- }
697
-
698
- .promptFooter {
699
- display: flex;
700
- align-items: center;
701
- justify-content: space-between;
702
- gap: 8px;
703
- margin-top: -6px;
704
- }
705
-
706
- .templatesButton {
707
- display: inline-flex;
708
- align-items: center;
709
- gap: 6px;
710
- height: 26px;
711
- padding: 0 12px;
712
- border: 1px solid var(--dsw-alias-brand-primary);
713
- border-radius: 999px;
714
- background: linear-gradient(135deg, color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), color-mix(in srgb, var(--dsw-alias-brand-primary) 5%, transparent));
715
- color: var(--dsw-alias-brand-primary);
716
- font-size: 12px;
717
- font-weight: 600;
718
- font-family: inherit;
719
- cursor: pointer;
720
- box-shadow: 0 1px 0 color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent);
721
- transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
722
- }
723
-
724
- .templatesButton svg {
725
- flex: none;
726
- }
727
-
728
- .templatesButton:hover {
729
- background: linear-gradient(135deg, color-mix(in srgb, var(--dsw-alias-brand-primary) 24%, transparent), color-mix(in srgb, var(--dsw-alias-brand-primary) 8%, transparent));
730
- color: var(--dsw-alias-brand-primary);
731
- transform: translateY(-1px);
732
- box-shadow: 0 2px 6px color-mix(in srgb, var(--dsw-alias-brand-primary) 30%, transparent);
733
- }
734
-
735
- .templatesButton:active {
736
- transform: translateY(0);
737
- }
738
-
739
- .enhanceButton {
740
- height: 26px;
741
- margin-left: auto;
742
- padding: 0 11px;
743
- border: 1px solid var(--dsw-alias-border-l2);
744
- border-radius: 999px;
745
- color: var(--dsw-alias-label-secondary);
746
- background: var(--dsw-alias-bg-layer-2);
747
- font: inherit;
748
- font-size: 12px;
749
- cursor: pointer;
750
- }
751
-
752
- .enhanceButton:hover:not(:disabled) {
753
- color: var(--dsw-alias-brand-primary);
754
- border-color: var(--dsw-alias-brand-primary);
755
- }
756
-
757
- .enhanceButton:disabled { opacity: 0.5; cursor: default; }
758
-
759
- .promptCount {
760
- font-size: 11px;
761
- color: var(--dsw-alias-label-tertiary);
762
- font-variant-numeric: tabular-nums;
763
- }
764
-
765
- /* --- parameter groups ----------------------------------------------------------- */
766
-
767
- .paramGroup {
768
- display: flex;
769
- flex-direction: column;
770
- gap: 8px;
771
- }
772
-
773
- .paramLabel {
774
- font-size: 12px;
775
- font-weight: 600;
776
- color: var(--dsw-alias-label-secondary);
777
- }
778
-
779
- .optionRow {
780
- display: flex;
781
- gap: 6px;
782
- flex-wrap: wrap;
783
- }
784
-
785
- .optionGrid {
786
- display: grid;
787
- grid-template-columns: repeat(3, 1fr);
788
- gap: 6px;
789
- }
790
-
791
- .optionPill {
792
- justify-content: center;
793
- }
794
-
795
- .paramHint {
796
- font-size: 11px;
797
- line-height: 1.45;
798
- color: var(--dsw-alias-label-tertiary);
799
- }
800
-
801
- /* --- footer: model dropdown + generate button (fixed under the scroll) -------- */
802
-
803
- .footer {
804
- display: flex;
805
- flex-direction: column;
806
- align-items: stretch;
807
- gap: 8px;
808
- flex: none;
809
- padding: 10px 2px 0 0;
810
- border-top: 1px solid var(--dsw-alias-border-l1);
811
- }
812
-
813
- .modelWrap {
814
- display: flex;
815
- flex-direction: column;
816
- gap: 5px;
817
- min-width: 0;
818
- }
819
-
820
- .modelLabel {
821
- font-size: 12px;
822
- font-weight: 600;
823
- color: var(--dsw-alias-label-secondary);
824
- }
825
-
826
- .modelSelect {
827
- width: 100%;
828
- height: 36px;
829
- display: flex;
830
- align-items: center;
831
- justify-content: space-between;
832
- gap: 8px;
833
- padding: 0 12px;
834
- font-size: 13px;
835
- color: var(--dsw-alias-label-primary);
836
- background: var(--dsw-alias-bg-layer-2);
837
- border: 1px solid var(--dsw-alias-border-l2);
838
- border-radius: 18px;
839
- outline: none;
840
- font-family: inherit;
841
- cursor: pointer;
842
- text-align: left;
843
- }
844
-
845
- .modelSelect:focus-visible {
846
- border-color: var(--dsw-alias-brand-primary);
847
- }
848
-
849
- .modelSelect:disabled {
850
- opacity: 0.55;
851
- cursor: default;
852
- }
853
-
854
- /* Model dropdown trigger + upward-opening menu. */
855
- .modelMenu {
856
- position: relative;
857
- display: block;
858
- min-width: 0;
859
- }
860
-
861
- /* The list opens UPWARD (absolute above the trigger) so it never hides
862
- behind the footer edge below. */
863
- .modelMenuList {
864
- position: absolute;
865
- left: 0;
866
- right: 0;
867
- bottom: calc(100% + 6px);
868
- z-index: 40;
869
- display: flex;
870
- flex-direction: column;
871
- padding: 4px;
872
- background: var(--dsw-alias-bg-layer-2);
873
- border: 1px solid var(--dsw-alias-border-l2);
874
- border-radius: 12px;
875
- box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
876
- overflow: hidden;
877
- }
878
-
879
- .modelMenuItem {
880
- display: block;
881
- width: 100%;
882
- padding: 7px 10px;
883
- font: inherit;
884
- font-size: 13px;
885
- color: var(--dsw-alias-label-primary);
886
- background: transparent;
887
- border: none;
888
- border-radius: 8px;
889
- cursor: pointer;
890
- text-align: left;
891
- white-space: nowrap;
892
- overflow: hidden;
893
- text-overflow: ellipsis;
894
- }
895
-
896
- .modelMenuItem:hover {
897
- background: var(--dsw-alias-bg-hover);
898
- }
899
-
900
- .modelMenuItem[data-selected] {
901
- color: var(--dsw-alias-brand-primary);
902
- font-weight: 600;
903
- background: var(--dsw-alias-bg-layer-1);
904
- }
905
-
906
- .generateButton {
907
- width: 100%;
908
- }
909
-
910
- .generateInner {
911
- display: inline-flex;
912
- align-items: center;
913
- gap: 7px;
914
- }
915
-
916
- /* --- canvas states --------------------------------------------------------------- */
917
-
918
- .canvasState {
919
- flex: 1;
920
- display: flex;
921
- flex-direction: column;
922
- align-items: center;
923
- justify-content: center;
924
- gap: 8px;
925
- padding: 24px;
926
- text-align: center;
927
- color: var(--dsw-alias-label-tertiary);
928
- }
929
-
930
- .canvasStateTitle {
931
- font-size: 14px;
932
- font-weight: 600;
933
- color: var(--dsw-alias-label-secondary);
934
- }
935
-
936
- .canvasStateHint {
937
- font-size: 12px;
938
- max-width: 380px;
939
- line-height: 1.6;
940
- }
941
-
942
- .canvasEmptyIcon {
943
- display: inline-flex;
944
- margin-bottom: 4px;
945
- color: var(--dsw-alias-label-tertiary);
946
- }
947
-
948
- .canvasError {
949
- margin: 14px;
950
- padding: 10px 14px;
951
- font-size: 12.5px;
952
- line-height: 1.6;
953
- color: var(--dsw-alias-label-error);
954
- background: var(--dsw-alias-bg-layer-2);
955
- border: 1px solid var(--dsw-alias-label-error);
956
- border-radius: 10px;
957
- overflow-wrap: anywhere;
958
- flex: none;
959
- }
960
-
961
- .canvasBody {
962
- flex: 1;
963
- min-height: 0;
964
- display: flex;
965
- flex-direction: column;
966
- gap: 10px;
967
- overflow-y: auto;
968
- padding: 14px;
969
- scrollbar-width: thin;
970
- scrollbar-color: var(--dsw-alias-border-l2) transparent;
971
- }
972
-
973
- .canvasBody::-webkit-scrollbar {
974
- width: 8px;
975
- }
976
-
977
- .canvasBody::-webkit-scrollbar-thumb {
978
- background: var(--dsw-alias-border-l2);
979
- border-radius: 999px;
980
- }
981
-
982
- .canvasMeta {
983
- flex: none;
984
- display: flex;
985
- align-items: center;
986
- gap: 8px;
987
- font-size: 12px;
988
- color: var(--dsw-alias-label-tertiary);
989
- }
990
-
991
- .canvasHistoryTag {
992
- padding: 1px 8px;
993
- font-size: 11px;
994
- color: var(--dsw-alias-label-secondary);
995
- background: var(--dsw-alias-bg-layer-2);
996
- border: 1px solid var(--dsw-alias-border-l2);
997
- border-radius: 999px;
998
- white-space: nowrap;
999
- }
1000
-
1001
- /* --- result grid ----------------------------------------------------------------- */
1002
-
1003
- .grid {
1004
- display: grid;
1005
- flex: 1;
1006
- min-height: 0;
1007
- gap: 14px;
1008
- grid-template-columns: repeat(2, minmax(0, 1fr));
1009
- grid-template-rows: repeat(2, minmax(0, 1fr));
1010
- }
1011
-
1012
- .grid[data-count='1'] .imageCard {
1013
- grid-area: 1 / 1 / 3 / 3;
1014
- }
1015
-
1016
- .imageCard {
1017
- position: relative;
1018
- display: flex;
1019
- flex-direction: column;
1020
- margin: 0;
1021
- border: 1px solid var(--dsw-alias-border-l1);
1022
- border-radius: 12px;
1023
- overflow: hidden;
1024
- background: var(--dsw-alias-bg-layer-2);
1025
- cursor: zoom-in;
1026
- min-height: 0;
1027
- }
1028
-
1029
- .imageCard:focus-visible {
1030
- outline: 2px solid var(--dsw-alias-brand-primary);
1031
- outline-offset: 1px;
1032
- }
1033
-
1034
- .image {
1035
- display: block;
1036
- flex: 1;
1037
- min-height: 0;
1038
- width: 100%;
1039
- object-fit: cover;
1040
- background: var(--dsw-alias-bg-base);
1041
- }
1042
-
1043
- .imageCaption {
1044
- padding: 7px 10px;
1045
- font-size: 11px;
1046
- line-height: 1.5;
1047
- color: var(--dsw-alias-label-tertiary);
1048
- white-space: nowrap;
1049
- overflow: hidden;
1050
- text-overflow: ellipsis;
1051
- border-top: 1px solid var(--dsw-alias-border-l1);
1052
- }
1053
-
1054
- .download {
1055
- position: absolute;
1056
- top: 8px;
1057
- right: 8px;
1058
- padding: 2px 10px;
1059
- font-size: 12px;
1060
- line-height: 20px;
1061
- font-weight: 500;
1062
- color: var(--dsw-alias-label-primary);
1063
- background: var(--dsw-alias-bg-mask-1);
1064
- border: 1px solid var(--dsw-alias-border-l2);
1065
- border-radius: 999px;
1066
- text-decoration: none;
1067
- opacity: 0;
1068
- transition: opacity 0.12s;
1069
- backdrop-filter: blur(4px);
1070
- }
1071
-
1072
- .imageCard:hover .download {
1073
- opacity: 1;
1074
- }
1075
-
1076
- .download:hover {
1077
- background: var(--dsw-alias-bg-base);
1078
- }
1079
-
1080
- /* Add-to-gallery pill (top-left, mirrors .download; shows on card hover). */
1081
- .galleryAdd {
1082
- position: absolute;
1083
- top: 8px;
1084
- left: 8px;
1085
- display: inline-flex;
1086
- align-items: center;
1087
- gap: 5px;
1088
- padding: 2px 10px;
1089
- font: inherit;
1090
- font-size: 12px;
1091
- line-height: 20px;
1092
- font-weight: 500;
1093
- color: var(--dsw-alias-label-primary);
1094
- background: var(--dsw-alias-bg-mask-1);
1095
- border: 1px solid var(--dsw-alias-border-l2);
1096
- border-radius: 999px;
1097
- cursor: pointer;
1098
- opacity: 0;
1099
- transition: opacity 0.12s;
1100
- backdrop-filter: blur(4px);
1101
- }
1102
-
1103
- .imageCard:hover .galleryAdd {
1104
- opacity: 1;
1105
- }
1106
-
1107
- .galleryAdd:hover {
1108
- background: var(--dsw-alias-bg-base);
1109
- }
1110
-
1111
- .galleryAdd:disabled {
1112
- opacity: 0.4;
1113
- cursor: default;
1114
- }
1115
-
1116
- /* Hover hint for the click-to-zoom behavior. */
1117
- .zoomHint {
1118
- position: absolute;
1119
- left: 8px;
1120
- bottom: 8px;
1121
- display: inline-flex;
1122
- align-items: center;
1123
- gap: 5px;
1124
- padding: 2px 10px;
1125
- font-size: 12px;
1126
- line-height: 20px;
1127
- font-weight: 500;
1128
- color: var(--dsw-alias-label-primary);
1129
- background: var(--dsw-alias-bg-mask-1);
1130
- border: 1px solid var(--dsw-alias-border-l2);
1131
- border-radius: 999px;
1132
- opacity: 0;
1133
- transition: opacity 0.12s;
1134
- backdrop-filter: blur(4px);
1135
- pointer-events: none;
1136
- }
1137
-
1138
- .imageCard:hover .zoomHint {
1139
- opacity: 1;
1140
- }
1141
-
1142
- /* --- spinner --------------------------------------------------------------------- */
1143
-
1144
- .spinner,
1145
- .bigSpinner {
1146
- display: inline-block;
1147
- flex: none;
1148
- border-radius: 50%;
1149
- border: 2px solid currentColor;
1150
- border-top-color: transparent;
1151
- animation: dshImageGenSpin 800ms linear infinite;
1152
- }
1153
-
1154
- .spinner {
1155
- width: 11px;
1156
- height: 11px;
1157
- }
1158
-
1159
- .bigSpinner {
1160
- width: 30px;
1161
- height: 30px;
1162
- border-width: 3px;
1163
- color: var(--dsw-alias-state-business-primary);
1164
- margin-bottom: 6px;
1165
- }
1166
-
1167
- /* --- full-screen image preview (lightbox) -------------------------------------- */
1168
-
1169
- .lightbox {
1170
- position: fixed;
1171
- inset: 0;
1172
- z-index: 1000;
1173
- display: flex;
1174
- align-items: center;
1175
- justify-content: center;
1176
- padding: 24px;
1177
- background: rgba(0, 0, 0, 0.72);
1178
- backdrop-filter: blur(6px);
1179
- }
1180
-
1181
- .lightboxClose {
1182
- position: absolute;
1183
- top: 16px;
1184
- right: 16px;
1185
- display: inline-flex;
1186
- align-items: center;
1187
- justify-content: center;
1188
- width: 38px;
1189
- height: 38px;
1190
- color: #fff;
1191
- background: rgba(255, 255, 255, 0.14);
1192
- border: 1px solid rgba(255, 255, 255, 0.28);
1193
- border-radius: 50%;
1194
- cursor: pointer;
1195
- }
1196
-
1197
- .lightboxClose:hover {
1198
- background: rgba(255, 255, 255, 0.26);
1199
- }
1200
-
1201
- .lightboxNav {
1202
- position: absolute;
1203
- top: 50%;
1204
- transform: translateY(-50%);
1205
- display: inline-flex;
1206
- align-items: center;
1207
- justify-content: center;
1208
- width: 42px;
1209
- height: 42px;
1210
- color: #fff;
1211
- background: rgba(255, 255, 255, 0.14);
1212
- border: 1px solid rgba(255, 255, 255, 0.28);
1213
- border-radius: 50%;
1214
- cursor: pointer;
1215
- }
1216
-
1217
- .lightboxNav:hover {
1218
- background: rgba(255, 255, 255, 0.26);
1219
- }
1220
-
1221
- .lightboxNav[data-dir='prev'] {
1222
- left: max(20px, calc(50% - 640px));
1223
- }
1224
-
1225
- .lightboxNav[data-dir='next'] {
1226
- right: max(20px, calc(50% - 640px));
1227
- }
1228
-
1229
- .lightboxFigure {
1230
- display: flex;
1231
- flex-direction: column;
1232
- gap: 10px;
1233
- margin: 0;
1234
- max-width: min(1100px, calc(100vw - 160px));
1235
- width: min(1100px, calc(100vw - 160px));
1236
- height: min(820px, calc(100vh - 48px));
1237
- min-height: 0;
1238
- }
1239
-
1240
- .lightboxStage {
1241
- flex: 1;
1242
- min-height: 0;
1243
- position: relative;
1244
- overflow: auto;
1245
- border-radius: 10px;
1246
- background: rgba(255, 255, 255, 0.04);
1247
- }
1248
-
1249
- .lightboxScaleFrame {
1250
- display: flex;
1251
- align-items: center;
1252
- justify-content: center;
1253
- min-width: 100%;
1254
- min-height: 100%;
1255
- }
1256
-
1257
- .lightboxImage {
1258
- display: block;
1259
- max-width: 100%;
1260
- max-height: 100%;
1261
- object-fit: contain;
1262
- border-radius: 10px;
1263
- box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
1264
- }
1265
-
1266
- .lightboxTools {
1267
- display: flex;
1268
- align-items: center;
1269
- justify-content: center;
1270
- gap: 6px;
1271
- }
1272
-
1273
- .lightboxTool,
1274
- .lightboxZoomLevel,
1275
- .lightboxCopy {
1276
- display: inline-flex;
1277
- align-items: center;
1278
- justify-content: center;
1279
- color: #fff;
1280
- background: rgba(255, 255, 255, 0.14);
1281
- border: 1px solid rgba(255, 255, 255, 0.28);
1282
- cursor: pointer;
1283
- }
1284
-
1285
- .lightboxTool,
1286
- .lightboxZoomLevel {
1287
- height: 32px;
1288
- }
1289
-
1290
- .lightboxTool {
1291
- width: 32px;
1292
- border-radius: 50%;
1293
- }
1294
-
1295
- .lightboxZoomLevel {
1296
- min-width: 58px;
1297
- padding: 0 9px;
1298
- border-radius: 999px;
1299
- font: inherit;
1300
- font-size: 12px;
1301
- font-variant-numeric: tabular-nums;
1302
- }
1303
-
1304
- .lightboxTool:hover,
1305
- .lightboxZoomLevel:hover,
1306
- .lightboxCopy:hover {
1307
- background: rgba(255, 255, 255, 0.26);
1308
- }
1309
-
1310
- .lightboxCaptionRow {
1311
- display: flex;
1312
- align-items: flex-start;
1313
- gap: 8px;
1314
- min-width: 0;
1315
- }
1316
-
1317
- .lightboxCaption {
1318
- flex: 1;
1319
- min-width: 0;
1320
- font-size: 12px;
1321
- line-height: 1.6;
1322
- color: rgba(255, 255, 255, 0.9);
1323
- display: -webkit-box;
1324
- -webkit-line-clamp: 3;
1325
- -webkit-box-orient: vertical;
1326
- overflow: hidden;
1327
- }
1328
-
1329
- .lightboxCopy {
1330
- flex: none;
1331
- gap: 5px;
1332
- min-height: 28px;
1333
- padding: 4px 9px;
1334
- border-radius: 999px;
1335
- font: inherit;
1336
- font-size: 12px;
1337
- white-space: nowrap;
1338
- }
1339
-
1340
- .lightboxMeta {
1341
- display: flex;
1342
- align-items: center;
1343
- justify-content: space-between;
1344
- gap: 12px;
1345
- }
1346
-
1347
- .lightboxIndex {
1348
- font-size: 12px;
1349
- color: rgba(255, 255, 255, 0.8);
1350
- font-variant-numeric: tabular-nums;
1351
- }
1352
-
1353
- .lightboxActions {
1354
- display: inline-flex;
1355
- align-items: center;
1356
- gap: 8px;
1357
- }
1358
-
1359
- .lightboxDownload,
1360
- .lightboxEdit {
1361
- padding: 4px 14px;
1362
- font: inherit;
1363
- font-size: 12.5px;
1364
- font-weight: 500;
1365
- color: #fff;
1366
- background: rgba(255, 255, 255, 0.14);
1367
- border: 1px solid rgba(255, 255, 255, 0.28);
1368
- border-radius: 999px;
1369
- text-decoration: none;
1370
- cursor: pointer;
1371
- }
1372
-
1373
- .lightboxDownload:hover,
1374
- .lightboxEdit:hover {
1375
- background: rgba(255, 255, 255, 0.26);
1376
- }
1377
-
1378
- .lightboxEdit {
1379
- color: #fff;
1380
- background: rgba(255, 255, 255, 0.14);
1381
- border: 1px solid rgba(255, 255, 255, 0.28);
1382
- border-radius: 999px;
1383
- }
1384
-
1385
- @media (max-width: 720px) {
1386
- .lightbox {
1387
- padding: 16px;
1388
- }
1389
-
1390
- .lightboxFigure {
1391
- width: calc(100vw - 32px);
1392
- max-width: none;
1393
- }
1394
-
1395
- .lightboxNav[data-dir='prev'] {
1396
- left: 20px;
1397
- }
1398
-
1399
- .lightboxNav[data-dir='next'] {
1400
- right: 20px;
1401
- }
1402
-
1403
- .lightboxCaptionRow,
1404
- .lightboxMeta {
1405
- align-items: stretch;
1406
- flex-direction: column;
1407
- }
1408
-
1409
- .lightboxCopy,
1410
- .lightboxActions {
1411
- align-self: flex-end;
1412
- }
1413
- }
1414
-
1415
- @keyframes dshImageGenSpin {
1416
- to { transform: rotate(360deg); }
1417
- }
1418
-
1419
- /* Transient "added to gallery" toast, centered above the canvas bottom. */
1420
- .galleryToast {
1421
- position: absolute;
1422
- left: 50%;
1423
- bottom: 24px;
1424
- transform: translateX(-50%);
1425
- z-index: 30;
1426
- display: inline-flex;
1427
- align-items: center;
1428
- gap: 7px;
1429
- padding: 6px 16px;
1430
- font-size: 13px;
1431
- font-weight: 500;
1432
- color: var(--dsw-alias-label-primary);
1433
- background: var(--dsw-alias-bg-mask-1);
1434
- border: 1px solid var(--dsw-alias-border-l2);
1435
- border-radius: 999px;
1436
- box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
1437
- backdrop-filter: blur(6px);
1438
- pointer-events: none;
1439
- animation: dshImageGenToastIn 160ms ease-out;
1440
- }
1441
-
1442
- @keyframes dshImageGenToastIn {
1443
- from { opacity: 0; transform: translate(-50%, 6px); }
1444
- to { opacity: 1; transform: translate(-50%, 0); }
1445
- }
1446
-
1447
- @media (prefers-reduced-motion: reduce) {
1448
- .download, .spinner, .bigSpinner {
1449
- transition: none;
1450
- animation-duration: 1.5s;
1451
- }
1452
- }
1453
-
1454
- /* --- gallery workspace -------------------------------------------------------- */
1455
- .config[data-gallery='true'] .configScroll > *:not(:first-child),
1456
- .config[data-gallery='true'] .footer,
1457
- .canvas[data-gallery='true'] > .canvasState,
1458
- .canvas[data-gallery='true'] > .canvasError,
1459
- .canvas[data-gallery='true'] > .canvasBody,
1460
- .studio:has(.config[data-gallery='true']) > .history { display: none; }
1461
- .config[data-gallery='true'] .configScroll { display: flex; flex: none; overflow: visible; order: 1; }
1462
- .config[data-gallery='true'] .galleryFilters { order: 2; flex: 1; min-height: 0; }
1463
- .galleryFilters { padding: 18px 14px; overflow-y: auto; overflow-x: hidden; }
1464
- .galleryFilterHeading { margin: 0 4px 10px; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 600; }
1465
- .galleryFilter { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; text-align: left; }
1466
- .galleryFilter:hover, .galleryFilter[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
1467
- .galleryFilterCount { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; text-align: center; }
1468
- .galleryFilterDivider { height: 1px; margin: 18px 4px; background: var(--dsw-alias-border-l1); }
1469
- .galleryRatioList { display: flex; flex-wrap: wrap; gap: 6px; }
1470
- .galleryRatio { padding: 6px 10px; border: 0; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font-size: 12px; }
1471
- .galleryRatio[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 13%, transparent); }
1472
- .galleryTagFilterList { display: flex; flex-wrap: wrap; gap: 6px; }
1473
- .galleryTagFilter { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; min-height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
1474
- .galleryTagFilter span:first-child { overflow: hidden; max-width: 112px; text-overflow: ellipsis; white-space: nowrap; }
1475
- .galleryTagFilter span:last-child { color: var(--dsw-alias-label-tertiary); font-size: 10px; }
1476
- .galleryTagFilter:hover, .galleryTagFilter[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
1477
- .galleryFilterNote { margin: 20px 4px 0; color: var(--dsw-alias-label-quaternary); font-size: 11px; line-height: 1.5; }
1478
- .galleryWorkspace { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; padding: 22px 24px 26px; box-sizing: border-box; }
1479
- .galleryToolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; min-width: 0; margin-bottom: 18px; }
1480
- .galleryHeading { display: inline; margin: 0; color: var(--dsw-alias-label-primary); font-size: 20px; font-weight: 700; }
1481
- .galleryCount { margin-left: 8px; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
1482
- .galleryToolbarActions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
1483
- .gallerySelectMode, .galleryBulkButton, .gallerySelectionClear { min-height: 30px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 7px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 12px; }
1484
- .gallerySelectMode:hover, .gallerySelectMode[data-active], .galleryBulkButton:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 38%, var(--dsw-alias-border-l1)); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 11%, transparent); }
1485
- .galleryBulkButton:disabled { cursor: not-allowed; opacity: .45; }
1486
- .gallerySelectionBar { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; margin: -4px 0 16px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--dsw-alias-brand-primary) 35%, var(--dsw-alias-border-l1)); border-radius: 9px; background: color-mix(in srgb, var(--dsw-alias-brand-primary) 7%, var(--dsw-alias-bg-layer-1)); }
1487
- .gallerySelectionBar strong { flex: none; color: var(--dsw-alias-brand-primary); font-size: 12px; }
1488
- .gallerySelectionClear { margin-left: auto; }
1489
- .gallerySelectionClear:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
1490
- .galleryTagInput, .gallerySearch { min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 7px; outline: none; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); font: inherit; font-size: 12px; }
1491
- .galleryTagInput { flex: 1 1 190px; }
1492
- .galleryTagInput:focus, .gallerySearch:focus { border-color: var(--dsw-alias-brand-primary); }
1493
- .galleryViewToggle { display: flex; padding: 3px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 9px; background: var(--dsw-alias-bg-layer-1); }
1494
- .galleryViewToggle button, .gallerySort, .galleryClear { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 12px; }
1495
- .galleryViewToggle button[data-active], .galleryViewToggle button:hover, .gallerySort:hover, .galleryClear:hover { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 11%, transparent); }
1496
- .gallerySort { border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-1); }
1497
- .galleryClear { border: 1px solid var(--dsw-alias-border-l1); }
1498
- .compareControl { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
1499
- .compareToggle, .compareModelChoices label { display: flex; align-items: center; gap: 6px; color: var(--dsw-alias-label-secondary); font-size: 12px; cursor: pointer; }
1500
- .compareToggle input, .compareModelChoices input { accent-color: var(--dsw-alias-brand-primary); }
1501
- .compareModelChoices { display: flex; flex-wrap: wrap; gap: 6px; }
1502
- .compareModelChoices label { padding: 4px 6px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 5px; font-size: 10px; }
1503
- .comparisonBoard { position: absolute; z-index: 4; top: 126px; right: 14px; bottom: 14px; left: 14px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
1504
- .comparisonBoard > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
1505
- .comparisonBoard > header div { display: flex; align-items: baseline; gap: 7px; }
1506
- .comparisonBoard > header strong { color: var(--dsw-alias-label-primary); font-size: 13px; }
1507
- .comparisonBoard > header span { color: var(--dsw-alias-label-tertiary); font-size: 11px; }
1508
- .comparisonBoard > header button { min-height: 28px; padding: 0 9px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 5px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
1509
- .comparisonGrid { display: grid; flex: 1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; overflow: auto; padding: 12px; }
1510
- .comparisonGrid article { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
1511
- .comparisonGrid article > strong { color: var(--dsw-alias-label-primary); font-size: 12px; }
1512
- .comparisonGrid article > span { display: grid; min-height: 160px; place-items: center; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); font-size: 12px; }
1513
- .comparisonGrid img { display: block; width: 100%; min-height: 160px; max-height: calc(100vh - 260px); object-fit: contain; background: var(--dsw-alias-bg-base); }
1514
- .comparisonFullscreen { position: fixed; z-index: 1200; inset: 0; overflow: auto; padding: 54px 24px 24px; background: rgb(0 0 0 / 92%); }
1515
- .comparisonFullscreenGrid { display: grid; min-height: 100%; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 18px; }
1516
- .comparisonFullscreen figure { min-width: 0; margin: 0; }
1517
- .comparisonFullscreen figcaption { margin-bottom: 8px; color: #fff; font-size: 13px; font-weight: 600; }
1518
- .comparisonFullscreen img { display: block; width: 100%; margin-bottom: 10px; background: #111; }
1519
- .galleryMasonry { display: grid; flex: 1 1 auto; width: 100%; height: 0; max-width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px; overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; padding: 2px 8px 16px 2px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2) transparent; }
1520
- .galleryMasonry::-webkit-scrollbar { width: 8px; }
1521
- .galleryMasonry::-webkit-scrollbar-thumb { background: var(--dsw-alias-border-l2); border-radius: 999px; }
1522
- .galleryCard { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--dsw-alias-border-l1); border-radius: 14px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 5px 18px rgb(24 32 54 / 7%); }
1523
- .galleryCard[data-selected] { border-color: var(--dsw-alias-brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary) 26%, transparent), 0 5px 18px rgb(24 32 54 / 7%); }
1524
- .gallerySelect { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 7px; background: rgb(0 0 0 / 58%); cursor: pointer; }
1525
- .gallerySelect input { width: 16px; height: 16px; margin: 0; accent-color: var(--dsw-alias-brand-primary); cursor: pointer; }
1526
- .galleryImageButton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--dsw-alias-bg-base); cursor: zoom-in; }
1527
- .galleryImageButton[data-selecting] { cursor: pointer; }
1528
- .galleryImage { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
1529
- .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 1) .galleryImage { aspect-ratio: 4 / 5; }
1530
- .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 2) .galleryImage { aspect-ratio: 4 / 3; }
1531
- .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n) .galleryImage { aspect-ratio: 3 / 4; }
1532
- .galleryBadge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgb(18 23 36 / 76%); font-size: 11px; backdrop-filter: blur(4px); }
1533
- .galleryCardFooter { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; }
1534
- .galleryAvatar { display: grid; flex: none; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--dsw-alias-brand-primary); font-size: 12px; font-weight: 700; }
1535
- .galleryCardInfo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
1536
- .galleryCardInfo strong, .galleryCardInfo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1537
- .galleryCardInfo strong { color: var(--dsw-alias-label-primary); font-size: 12px; }
1538
- .galleryCardInfo small { color: var(--dsw-alias-label-tertiary); font-size: 10px; }
1539
- .galleryTags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
1540
- .galleryTags button { overflow: hidden; max-width: 96px; min-height: 19px; padding: 1px 6px; border: 0; border-radius: 4px; color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); cursor: pointer; font: inherit; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
1541
- .galleryTags button:hover { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 17%, transparent); }
1542
- .galleryTags .galleryTagEdit { flex: none; color: var(--dsw-alias-label-tertiary); background: transparent; }
1543
- .galleryTagEditor { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px 48px; }
1544
- .galleryTagEditor input { min-width: 0; flex: 1; height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; outline: none; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); font: inherit; font-size: 11px; }
1545
- .galleryTagEditor input:focus { border-color: var(--dsw-alias-brand-primary); }
1546
- .galleryTagEditor button { height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 11px; }
1547
- .galleryTagEditor button[type='submit'] { color: var(--dsw-alias-brand-primary); }
1548
- .galleryRemove { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font-size: 18px; }
1549
- .galleryRemove:hover { color: var(--dsw-alias-state-error); background: var(--dsw-alias-bg-layer-2); }
1550
-
1551
- @media (max-width: 1100px) {
1552
- .galleryMasonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
1553
- }
1554
-
1555
- @media (max-width: 760px) {
1556
- .studio { flex-direction: column; overflow: auto; }
1557
- .config { width: auto; max-width: none; height: auto; min-height: 0; }
1558
- .config[data-gallery='true'] { flex: none; }
1559
- .canvas { min-height: 560px; }
1560
- .galleryToolbar { align-items: flex-start; flex-direction: column; }
1561
- .galleryToolbarActions { width: 100%; flex-wrap: wrap; }
1562
- .galleryMasonry { grid-template-columns: 1fr; }
1563
- }
1
+ /**
2
+ * dsh-imagegen studio styles. Scoped by the plugin's own data attributes so
3
+ * nothing leaks into the rest of the GUI; colors ride the dsh --dsw-* tokens
4
+ * and interactive controls reuse the system primitives (Button / Pill), so
5
+ * the studio follows the active theme (light/dark and skins) by construction.
6
+ * The center-column hide rules are attribute-scoped and must stay in this
7
+ * stylesheet (it is imported by mount.tsx, so the styles load with the
8
+ * plugin).
9
+ */
10
+
11
+ /* --- center-column takeover (global rules, attribute-scoped) ----------------- */
12
+
13
+ /* The panel container rides inside the conversation grid item as an extra
14
+ trailing child; hidden unless the panel is active. The position rule covers
15
+ both shells: the legacy `[data-pane="conversation"]` and the rc.6+
16
+ AppFrame class-based column ([class*="centerCol"]) — without a positioned
17
+ ancestor the absolutely-positioned view resolves against the frame. */
18
+ [data-pane='conversation'],
19
+ [class*='centerCol'] {
20
+ position: relative;
21
+ min-width: 0;
22
+ min-height: 0;
23
+ }
24
+
25
+ /* The panel container rides inside the conversation grid item as an extra
26
+ trailing child; hidden unless the panel is active. */
27
+ [data-dsh-imagegen-view] {
28
+ position: relative;
29
+ grid-column: 1;
30
+ grid-row: 1;
31
+ display: none;
32
+ z-index: 60;
33
+ min-width: 0;
34
+ min-height: 0;
35
+ background: var(--dsw-alias-bg-base);
36
+ }
37
+
38
+ /* The center column is single-occupant; the :not() guards keep the sibling
39
+ panels (task board / ssh) from fighting over visibility if both activation
40
+ attributes ever coexist. */
41
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
42
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
43
+ display: grid !important;
44
+ grid-template-columns: minmax(0, 1fr) 8px minmax(320px, clamp(320px, var(--dsh-imagegen-chat-width, 36%), 70%));
45
+ grid-template-rows: minmax(0, 1fr);
46
+ gap: 1px;
47
+ overflow: hidden;
48
+ background: var(--dsw-alias-border-l1);
49
+ }
50
+
51
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-view] {
52
+ display: block;
53
+ }
54
+
55
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
56
+ grid-column: 3;
57
+ grid-row: 1;
58
+ align-items: stretch;
59
+ display: flex !important;
60
+ width: auto;
61
+ min-width: 0;
62
+ min-height: 0;
63
+ overflow: hidden;
64
+ background: var(--dsw-alias-bg-base);
65
+ }
66
+
67
+ /* DSH's native conversation root is a flex item with an intrinsic width.
68
+ Stretch that direct child to the complete chat column so its hero composer
69
+ can center itself inside the resized pane instead of leaving a blank rail
70
+ on the right. */
71
+ html[data-dsh-imagegen-active] [data-slot='conversation'] > [data-phase] {
72
+ align-self: stretch;
73
+ flex: 1 1 auto;
74
+ width: 100%;
75
+ max-width: none;
76
+ min-width: 0;
77
+ }
78
+
79
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-chat-resizer] {
80
+ grid-column: 2;
81
+ grid-row: 1;
82
+ }
83
+
84
+ .chatResizer {
85
+ position: relative;
86
+ z-index: 70;
87
+ display: none;
88
+ width: 8px;
89
+ min-width: 8px;
90
+ align-items: center;
91
+ justify-content: center;
92
+ color: var(--dsw-alias-label-tertiary);
93
+ background: var(--dsw-alias-border-l1);
94
+ cursor: col-resize;
95
+ touch-action: none;
96
+ }
97
+
98
+ .chatResizer::before {
99
+ width: 3px;
100
+ height: 36px;
101
+ border-radius: 3px;
102
+ background: currentColor;
103
+ content: '';
104
+ opacity: .55;
105
+ }
106
+
107
+ .chatResizer:hover,
108
+ .chatResizer:focus-visible {
109
+ color: var(--dsw-alias-brand-primary);
110
+ outline: none;
111
+ background: var(--dsw-alias-bg-layer-2);
112
+ }
113
+
114
+ /* Keep the handle above shell defaults: some skins set display:none on
115
+ unrecognised children of the conversation frame. */
116
+ html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
117
+ display: flex !important;
118
+ }
119
+
120
+ /* Hide only unrelated center-column plugin children. */
121
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'] > :not([data-dsh-imagegen-view]):not([data-slot='conversation']):not([data-dsh-imagegen-chat-resizer]),
122
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] > :not([data-dsh-imagegen-view]):not([data-slot='conversation']):not([data-dsh-imagegen-chat-resizer]) {
123
+ display: none !important;
124
+ }
125
+
126
+ /* The shell can have any number of plugin entries between the New Session
127
+ tabs and its workspace region. Hide the whole middle run while image
128
+ generation owns the frame, without relying on a plugin allow-list. */
129
+ html[data-dsh-imagegen-active] [data-dsh-imagegen-sidebar-root] > :not([data-dsh-imagegen-session-tabs]):not([class*='logoRow']):not([class*='regionArea']):not([class*='footArea']) {
130
+ display: none !important;
131
+ }
132
+
133
+ @media (max-width: 760px) {
134
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
135
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
136
+ grid-template-columns: minmax(0, 1fr);
137
+ grid-template-rows: minmax(0, 1fr) minmax(340px, 0.9fr);
138
+ overflow-y: auto;
139
+ }
140
+
141
+ html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
142
+ grid-column: 1;
143
+ grid-row: 2;
144
+ }
145
+
146
+ html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
147
+ display: none !important;
148
+ }
149
+ }
150
+
151
+ /* --- sidebar entry row ------------------------------------------------------- */
152
+
153
+ .entry {
154
+ display: flex;
155
+ align-items: center;
156
+ gap: 8px;
157
+ width: 100%;
158
+ height: 32px;
159
+ padding: 0 12px;
160
+ background: transparent;
161
+ border: none;
162
+ border-radius: 8px;
163
+ color: var(--dsw-alias-label-secondary);
164
+ cursor: pointer;
165
+ font-size: 13px;
166
+ white-space: nowrap;
167
+ }
168
+
169
+ .entry:hover {
170
+ background: var(--dsw-specific-sidebar-nav-item-hover);
171
+ color: var(--dsw-alias-label-primary);
172
+ }
173
+
174
+ .entry[data-active] {
175
+ background: var(--dsw-specific-sidebar-nav-item-active);
176
+ color: var(--dsw-alias-label-primary);
177
+ font-weight: 600;
178
+ }
179
+
180
+ .entryIcon {
181
+ display: inline-flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ flex: none;
185
+ }
186
+
187
+ .entryLabel {
188
+ overflow: hidden;
189
+ text-overflow: ellipsis;
190
+ }
191
+
192
+ /* New Session + Image Generation tabs share the shell's top action row. */
193
+ .sessionTabs {
194
+ display: grid;
195
+ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
196
+ gap: 2px;
197
+ width: 100%;
198
+ min-width: 0;
199
+ padding: 3px;
200
+ border: 1px solid var(--dsw-alias-border-l1);
201
+ border-radius: 9px;
202
+ background: var(--dsw-alias-bg-layer-1);
203
+ }
204
+
205
+ .sessionTab {
206
+ display: inline-flex;
207
+ align-items: center;
208
+ justify-content: center;
209
+ gap: 6px;
210
+ min-width: 0;
211
+ height: 30px;
212
+ padding: 0 8px;
213
+ border: 0;
214
+ border-radius: 7px;
215
+ color: var(--dsw-alias-label-secondary);
216
+ background: transparent;
217
+ cursor: pointer;
218
+ font: inherit;
219
+ font-size: 12px;
220
+ white-space: nowrap;
221
+ }
222
+
223
+ /* Collapsed sidebar rail: the injected tabs become plain stacked icon
224
+ * buttons that match the shell's native rail entries. */
225
+ [data-sidebar-collapsed] .sessionTabs {
226
+ display: flex;
227
+ flex-direction: column;
228
+ gap: 6px;
229
+ width: auto;
230
+ padding: 0;
231
+ border: none;
232
+ border-radius: 0;
233
+ background: transparent;
234
+ }
235
+
236
+ [data-sidebar-collapsed] .sessionTab {
237
+ width: 34px;
238
+ height: 34px;
239
+ padding: 0;
240
+ border-radius: 9px;
241
+ font-size: 0;
242
+ }
243
+
244
+ [data-sidebar-collapsed] .sessionTabLabel {
245
+ display: none;
246
+ }
247
+
248
+ .sessionTab:hover,
249
+ .sessionTab[data-active] {
250
+ color: var(--dsw-alias-label-primary);
251
+ background: var(--dsw-specific-sidebar-nav-item-active);
252
+ }
253
+
254
+ .sessionTabIcon {
255
+ display: inline-flex;
256
+ flex: none;
257
+ align-items: center;
258
+ justify-content: center;
259
+ }
260
+
261
+ .sessionTabLabel {
262
+ min-width: 0;
263
+ overflow: hidden;
264
+ text-overflow: ellipsis;
265
+ }
266
+
267
+ /* The history surface occupies the shell's workspace/session region while
268
+ image generation is active. The shell's own tree stays mounted underneath
269
+ so closing the tab restores it without a React remount. */
270
+ [class*='regionArea'] {
271
+ position: relative;
272
+ min-height: 0;
273
+ }
274
+
275
+ .sidebarHistoryHost {
276
+ position: absolute;
277
+ z-index: 30;
278
+ inset: 0;
279
+ display: none;
280
+ min-width: 0;
281
+ min-height: 0;
282
+ padding: 6px 4px;
283
+ overflow: hidden;
284
+ background: var(--dsw-alias-bg-base);
285
+ }
286
+
287
+ html[data-dsh-imagegen-active] .sidebarHistoryHost {
288
+ display: flex;
289
+ }
290
+
291
+ .sidebarHistoryHost .history {
292
+ width: 100%;
293
+ height: 100%;
294
+ border: 0;
295
+ border-radius: 8px;
296
+ background: transparent;
297
+ }
298
+
299
+ [data-dsh-frame][data-sidebar-collapsed] .sidebarHistoryHost {
300
+ display: none;
301
+ }
302
+
303
+ /* Collapsed rail: icon-only, centered, matching the shell's 56px rail. */
304
+ [data-dsh-frame][data-sidebar-collapsed] .entry {
305
+ justify-content: center;
306
+ padding: 0;
307
+ width: 100%;
308
+ }
309
+
310
+ [data-dsh-frame][data-sidebar-collapsed] .entryLabel {
311
+ display: none;
312
+ }
313
+
314
+ /* --- panel frame -------------------------------------------------------------- */
315
+
316
+ .view {
317
+ width: 100%;
318
+ min-width: 0;
319
+ min-height: 0;
320
+ overflow: hidden;
321
+ }
322
+
323
+ /* The shell does not ship a global `box-sizing: border-box` reset, so scope
324
+ one to the panel subtree: without it, `height: 100%` + padding grows past
325
+ the container and clips the footer off the bottom of the screen. */
326
+ .panel,
327
+ .panel *,
328
+ .panel *::before,
329
+ .panel *::after {
330
+ box-sizing: border-box;
331
+ }
332
+
333
+ .panel {
334
+ position: relative;
335
+ display: flex;
336
+ flex-direction: column;
337
+ height: 100%;
338
+ min-width: 0;
339
+ min-height: 0;
340
+ overflow: hidden;
341
+ padding: 14px 16px 16px;
342
+ gap: 10px;
343
+ background: var(--dsw-alias-bg-base);
344
+ color: var(--dsw-alias-label-primary);
345
+ font-family: var(--dsw-font-family);
346
+ }
347
+
348
+ .panelHeader {
349
+ position: relative;
350
+ display: flex;
351
+ align-items: center;
352
+ justify-content: space-between;
353
+ gap: 12px;
354
+ flex: none;
355
+ }
356
+
357
+ .panelHeading {
358
+ display: flex;
359
+ align-items: baseline;
360
+ gap: 10px;
361
+ min-width: 0;
362
+ }
363
+
364
+ .panelTitle {
365
+ margin: 0;
366
+ font-size: 16px;
367
+ font-weight: 700;
368
+ color: var(--dsw-alias-label-primary);
369
+ white-space: nowrap;
370
+ }
371
+
372
+ /* GitHub icon button next to the title (opens the repo). */
373
+ .githubLink {
374
+ display: inline-flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ flex: none;
378
+ width: 22px;
379
+ height: 22px;
380
+ border-radius: 6px;
381
+ color: var(--dsw-alias-label-secondary);
382
+ text-decoration: none;
383
+ transition: color 0.12s, background 0.12s;
384
+ }
385
+
386
+ .githubLink:hover {
387
+ color: var(--dsw-alias-label-primary);
388
+ background: var(--dsw-alias-bg-layer-2);
389
+ }
390
+
391
+ /* --- connection status and update notice -------------------------------------- */
392
+
393
+ .connectionStatus {
394
+ display: inline-flex;
395
+ align-items: center;
396
+ gap: 6px;
397
+ flex: none;
398
+ height: 28px;
399
+ padding: 0 10px;
400
+ border: 1px solid var(--dsw-alias-label-error);
401
+ border-radius: 8px;
402
+ background: transparent;
403
+ color: var(--dsw-alias-label-error);
404
+ font: inherit;
405
+ font-size: 12px;
406
+ line-height: 1;
407
+ white-space: nowrap;
408
+ }
409
+
410
+ .connectionStatus[data-connected='true'] {
411
+ border-color: var(--dsw-alias-state-success-primary);
412
+ color: var(--dsw-alias-state-success-primary);
413
+ }
414
+
415
+ .connectionDot {
416
+ width: 6px;
417
+ height: 6px;
418
+ border-radius: 50%;
419
+ background: currentColor;
420
+ }
421
+
422
+ .updateBanner {
423
+ display: flex;
424
+ align-items: center;
425
+ justify-content: space-between;
426
+ gap: 12px;
427
+ flex: none;
428
+ padding: 7px 10px 7px 12px;
429
+ font-size: 12px;
430
+ line-height: 1.5;
431
+ border-radius: 10px;
432
+ border: 1px solid var(--dsw-alias-state-warn-primary);
433
+ color: var(--dsw-alias-state-warn-primary);
434
+ overflow-wrap: anywhere;
435
+ }
436
+
437
+ .updateBanner[data-kind='ok'] {
438
+ color: var(--dsw-alias-state-success-primary);
439
+ border-color: var(--dsw-alias-state-success-primary);
440
+ }
441
+
442
+ .updateText {
443
+ min-width: 0;
444
+ }
445
+
446
+ .updateActions {
447
+ display: inline-flex;
448
+ align-items: center;
449
+ gap: 10px;
450
+ flex: none;
451
+ }
452
+
453
+ .updateRelease {
454
+ color: inherit;
455
+ text-decoration: underline;
456
+ text-underline-offset: 2px;
457
+ white-space: nowrap;
458
+ }
459
+
460
+ @media (max-width: 700px) {
461
+ .panelHeader {
462
+ align-items: flex-start;
463
+ }
464
+
465
+ .panelHeading {
466
+ align-items: flex-start;
467
+ flex-direction: column;
468
+ gap: 2px;
469
+ }
470
+
471
+ .updateBanner {
472
+ align-items: flex-start;
473
+ flex-direction: column;
474
+ }
475
+
476
+ .updateActions {
477
+ width: 100%;
478
+ justify-content: space-between;
479
+ }
480
+ }
481
+
482
+ /* --- studio split: left history + middle generation workspace ----------------- */
483
+
484
+ .studio {
485
+ display: flex;
486
+ min-width: 0;
487
+ min-height: 0;
488
+ flex: 1;
489
+ }
490
+
491
+ .generation {
492
+ display: flex;
493
+ width: 100%;
494
+ gap: 14px;
495
+ min-width: 0;
496
+ min-height: 0;
497
+ }
498
+
499
+ .config {
500
+ display: flex;
501
+ flex-direction: column;
502
+ gap: 12px;
503
+ flex: none;
504
+ position: relative;
505
+ width: clamp(240px, var(--dsh-imagegen-config-width, 300px), 480px);
506
+ min-width: 240px;
507
+ max-width: 480px;
508
+ height: 100%;
509
+ min-height: 0;
510
+ overflow: hidden;
511
+ }
512
+
513
+ .configHeader {
514
+ display: flex;
515
+ justify-content: flex-end;
516
+ flex: none;
517
+ min-height: 28px;
518
+ }
519
+
520
+ .configToggle {
521
+ display: inline-flex;
522
+ align-items: center;
523
+ justify-content: center;
524
+ width: 28px;
525
+ height: 28px;
526
+ padding: 0;
527
+ border: 1px solid var(--dsw-alias-border-l1);
528
+ border-radius: 7px;
529
+ color: var(--dsw-alias-label-secondary);
530
+ background: var(--dsw-alias-bg-layer-1);
531
+ cursor: pointer;
532
+ }
533
+
534
+ .configToggle:hover,
535
+ .configToggle:focus-visible {
536
+ border-color: var(--dsw-alias-brand-primary);
537
+ color: var(--dsw-alias-brand-primary);
538
+ outline: none;
539
+ }
540
+
541
+ .config[data-collapsed='true'] {
542
+ width: 38px;
543
+ min-width: 38px;
544
+ max-width: 38px;
545
+ gap: 0;
546
+ }
547
+
548
+ .config[data-collapsed='true'] .configHeader {
549
+ justify-content: center;
550
+ }
551
+
552
+ .config[data-collapsed='true'] > :not(.configHeader) {
553
+ display: none;
554
+ }
555
+
556
+ /* The cards scroll in their own scrollport; the footer stays a fixed sibling
557
+ below, so nothing ever hides underneath it (text and edit modes alike). */
558
+ .configScroll {
559
+ display: flex;
560
+ flex-direction: column;
561
+ gap: 12px;
562
+ flex: 1;
563
+ min-height: 0;
564
+ overflow-y: auto;
565
+ padding-right: 2px;
566
+ scrollbar-width: thin;
567
+ scrollbar-color: var(--dsw-alias-border-l2) transparent;
568
+ }
569
+
570
+ .configScroll::-webkit-scrollbar {
571
+ width: 8px;
572
+ }
573
+
574
+ .configScroll::-webkit-scrollbar-thumb {
575
+ background: var(--dsw-alias-border-l2);
576
+ border-radius: 999px;
577
+ }
578
+
579
+ .canvas {
580
+ position: relative;
581
+ flex: 1;
582
+ min-width: 0;
583
+ min-height: 0;
584
+ display: flex;
585
+ flex-direction: column;
586
+ border: 1px solid var(--dsw-alias-border-l1);
587
+ border-radius: 12px;
588
+ background: var(--dsw-alias-bg-layer-1);
589
+ overflow: hidden;
590
+ }
591
+
592
+ .taskTray {
593
+ position: absolute;
594
+ z-index: 6;
595
+ top: 12px;
596
+ right: 12px;
597
+ width: min(360px, calc(100% - 24px));
598
+ max-height: calc(100% - 24px);
599
+ display: flex;
600
+ flex-direction: column;
601
+ overflow: hidden;
602
+ border: 1px solid var(--dsw-alias-border-l2);
603
+ border-radius: 9px;
604
+ background: color-mix(in srgb, var(--dsw-alias-bg-layer-1) 92%, transparent);
605
+ box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
606
+ backdrop-filter: blur(10px);
607
+ }
608
+
609
+ .taskTray[data-open='false'] { width: auto; max-width: calc(100% - 24px); }
610
+ .taskTrayHeader { display: flex; align-items: stretch; min-height: 34px; color: var(--dsw-alias-label-primary); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--dsw-alias-border-l1); }
611
+ .taskTray[data-open='false'] .taskTrayHeader { border-bottom: 0; }
612
+ .taskTrayToggle { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; padding: 8px 10px; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; font-size: inherit; font-weight: inherit; text-align: left; }
613
+ .taskTrayToggle:hover { background: var(--dsw-alias-bg-layer-2); }
614
+ .taskTrayCount { min-width: 18px; padding: 1px 5px; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; font-weight: 500; text-align: center; }
615
+ .taskTrayChevron { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 400; }
616
+ .taskTrayClose { width: 32px; border: 0; border-left: 1px solid var(--dsw-alias-border-l1); color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font: inherit; font-size: 17px; }
617
+ .taskTrayClose:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
618
+ .taskTray[data-open='false'] .taskTrayToggle { min-height: 34px; }
619
+ .taskRows { min-height: 0; overflow-y: auto; }
620
+ .taskTray[data-open='false'] .taskRows { display: none; }
621
+ .taskRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 10px; border-top: 1px solid var(--dsw-alias-border-l1); }
622
+ .taskRow:first-of-type { border-top: 0; }
623
+ .taskStatus { color: var(--dsw-alias-label-tertiary); font-size: 11px; white-space: nowrap; }
624
+ .taskRow[data-status='running'] .taskStatus { color: var(--dsw-alias-brand-primary); }
625
+ .taskRow[data-status='failed'] .taskStatus { color: var(--dsw-alias-label-error); }
626
+ .taskPrompt { overflow: hidden; color: var(--dsw-alias-label-secondary); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
627
+ .taskRow button { padding: 2px 7px; border: 0; border-radius: 5px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
628
+ .taskRow button:hover { color: var(--dsw-alias-brand-primary); }
629
+
630
+ .configGuide { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; background: rgb(0 0 0 / 35%); }
631
+ .configGuideBody { display: flex; width: min(360px, 100%); flex-direction: column; gap: 12px; padding: 18px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 10px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); box-shadow: 0 14px 40px rgb(0 0 0 / 20%); }
632
+ .configGuideBody span { color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 1.55; }
633
+ .configGuideBody button { align-self: flex-end; min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; color: var(--dsw-alias-bg-layer-1); background: var(--dsw-alias-brand-primary); cursor: pointer; font: inherit; font-size: 12px; }
634
+
635
+ /* --- history surface (rendered into the shell sidebar) ----------------------- */
636
+
637
+ .history {
638
+ display: flex;
639
+ flex-direction: column;
640
+ width: auto;
641
+ min-width: 0;
642
+ max-width: none;
643
+ min-height: 0;
644
+ border: 1px solid var(--dsw-alias-border-l1);
645
+ border-radius: 12px;
646
+ background: var(--dsw-alias-bg-layer-1);
647
+ overflow: hidden;
648
+ }
649
+
650
+ .historyHeader {
651
+ display: flex;
652
+ align-items: center;
653
+ justify-content: space-between;
654
+ gap: 8px;
655
+ padding: 10px 12px;
656
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
657
+ flex: none;
658
+ }
659
+
660
+ .historyHeaderActions {
661
+ display: flex;
662
+ align-items: center;
663
+ gap: 6px;
664
+ flex: none;
665
+ }
666
+
667
+ .historyFilters {
668
+ display: grid;
669
+ grid-template-columns: 1fr 1fr;
670
+ gap: 6px;
671
+ padding: 8px 10px;
672
+ border-bottom: 1px solid var(--dsw-alias-border-l1);
673
+ }
674
+
675
+ .historySearch,
676
+ .historyFilters select,
677
+ .gallerySearch {
678
+ min-width: 0;
679
+ min-height: 29px;
680
+ box-sizing: border-box;
681
+ padding: 0 8px;
682
+ border: 1px solid var(--dsw-alias-border-l2);
683
+ border-radius: 7px;
684
+ color: var(--dsw-alias-label-primary);
685
+ background: var(--dsw-alias-bg-layer-2);
686
+ font: inherit;
687
+ font-size: 11px;
688
+ }
689
+
690
+ .historySearch { grid-column: 1 / -1; }
691
+ .gallerySearch { width: 156px; }
692
+ .galleryTagInput { width: 130px; min-height: 29px; box-sizing: border-box; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); font: inherit; font-size: 11px; }
693
+ .galleryBulkButton { min-height: 29px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 11px; }
694
+ .galleryBulkButton:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); }
695
+ .galleryBulkButton:disabled { opacity: .45; cursor: default; }
696
+
697
+ .historyTitle {
698
+ font-size: 13px;
699
+ font-weight: 600;
700
+ color: var(--dsw-alias-label-primary);
701
+ }
702
+
703
+ .historyNew {
704
+ display: inline-flex;
705
+ align-items: center;
706
+ justify-content: center;
707
+ width: 26px;
708
+ height: 26px;
709
+ padding: 0;
710
+ color: var(--dsw-alias-label-secondary);
711
+ background: transparent;
712
+ border: 1px solid var(--dsw-alias-border-l2);
713
+ border-radius: 7px;
714
+ cursor: pointer;
715
+ }
716
+
717
+ .historyNew:hover {
718
+ color: var(--dsw-alias-brand-primary);
719
+ border-color: var(--dsw-alias-brand-primary);
720
+ }
721
+
722
+ .historyClear {
723
+ padding: 2px 8px;
724
+ font: inherit;
725
+ font-size: 11.5px;
726
+ color: var(--dsw-alias-label-tertiary);
727
+ background: transparent;
728
+ border: 1px solid var(--dsw-alias-border-l2);
729
+ border-radius: 999px;
730
+ cursor: pointer;
731
+ }
732
+
733
+ .historyClear:hover {
734
+ color: var(--dsw-alias-label-error);
735
+ border-color: var(--dsw-alias-label-error);
736
+ }
737
+
738
+ .historyList {
739
+ flex: 1;
740
+ min-height: 0;
741
+ overflow-y: auto;
742
+ display: flex;
743
+ flex-direction: column;
744
+ gap: 8px;
745
+ padding: 10px;
746
+ scrollbar-width: thin;
747
+ scrollbar-color: var(--dsw-alias-border-l2) transparent;
748
+ }
749
+
750
+ .historyList::-webkit-scrollbar {
751
+ width: 8px;
752
+ }
753
+
754
+ .historyList::-webkit-scrollbar-thumb {
755
+ background: var(--dsw-alias-border-l2);
756
+ border-radius: 999px;
757
+ }
758
+
759
+ .historyEmpty {
760
+ flex: 1;
761
+ display: flex;
762
+ align-items: center;
763
+ justify-content: center;
764
+ padding: 20px;
765
+ font-size: 12px;
766
+ line-height: 1.6;
767
+ text-align: center;
768
+ color: var(--dsw-alias-label-tertiary);
769
+ }
770
+
771
+ .historyItem {
772
+ display: flex;
773
+ flex-direction: column;
774
+ gap: 6px;
775
+ padding: 8px;
776
+ border: 1px solid var(--dsw-alias-border-l1);
777
+ border-radius: 10px;
778
+ background: var(--dsw-alias-bg-layer-2);
779
+ flex: none;
780
+ }
781
+
782
+ .historyItem:hover {
783
+ border-color: var(--dsw-alias-border-l2);
784
+ }
785
+
786
+ .historyItem[data-active] {
787
+ border-color: var(--dsw-alias-brand-primary);
788
+ }
789
+
790
+ .historyMain {
791
+ display: flex;
792
+ gap: 8px;
793
+ align-items: flex-start;
794
+ padding: 0;
795
+ background: transparent;
796
+ border: none;
797
+ font: inherit;
798
+ color: inherit;
799
+ text-align: left;
800
+ cursor: pointer;
801
+ min-width: 0;
802
+ }
803
+
804
+ .historyThumb {
805
+ width: 52px;
806
+ height: 52px;
807
+ border-radius: 8px;
808
+ object-fit: cover;
809
+ background: var(--dsw-alias-bg-base);
810
+ flex: none;
811
+ }
812
+
813
+ .historyThumbPlaceholder {
814
+ width: 52px;
815
+ height: 52px;
816
+ border-radius: 8px;
817
+ background: var(--dsw-alias-bg-layer-3);
818
+ flex: none;
819
+ }
820
+
821
+ .historyInfo {
822
+ flex: 1;
823
+ min-width: 0;
824
+ display: flex;
825
+ flex-direction: column;
826
+ gap: 4px;
827
+ }
828
+
829
+ .historyPrompt {
830
+ font-size: 12px;
831
+ line-height: 1.4;
832
+ color: var(--dsw-alias-label-primary);
833
+ display: -webkit-box;
834
+ -webkit-line-clamp: 2;
835
+ -webkit-box-orient: vertical;
836
+ overflow: hidden;
837
+ }
838
+
839
+ .historyMeta {
840
+ font-size: 11px;
841
+ color: var(--dsw-alias-label-tertiary);
842
+ white-space: nowrap;
843
+ overflow: hidden;
844
+ text-overflow: ellipsis;
845
+ }
846
+
847
+ .historyActions {
848
+ display: flex;
849
+ gap: 6px;
850
+ justify-content: flex-end;
851
+ }
852
+
853
+ .historyAction {
854
+ padding: 2px 8px;
855
+ font: inherit;
856
+ font-size: 11.5px;
857
+ color: var(--dsw-alias-label-secondary);
858
+ background: transparent;
859
+ border: 1px solid var(--dsw-alias-border-l2);
860
+ border-radius: 999px;
861
+ cursor: pointer;
862
+ }
863
+
864
+ .historyAction:hover {
865
+ color: var(--dsw-alias-label-primary);
866
+ border-color: var(--dsw-alias-label-dimmed);
867
+ }
868
+
869
+ .historyAction[data-danger]:hover {
870
+ color: var(--dsw-alias-label-error);
871
+ border-color: var(--dsw-alias-label-error);
872
+ }
873
+
874
+ /* --- cards (system-aligned rounded group chrome) ------------------------------ */
875
+
876
+ .card {
877
+ display: flex;
878
+ flex-direction: column;
879
+ gap: 10px;
880
+ padding: 12px;
881
+ background: var(--dsw-alias-bg-layer-2);
882
+ border: 1px solid var(--dsw-alias-border-l1);
883
+ border-radius: 12px;
884
+ flex: none;
885
+ }
886
+
887
+ .ecommerceWorkspace {
888
+ display: flex;
889
+ flex-direction: column;
890
+ gap: 16px;
891
+ max-width: 720px;
892
+ margin: 0 auto;
893
+ padding: 6px 2px 12px;
894
+ }
895
+
896
+ /* Flat sections in the CapyAI style: plain headings, no card boxes. */
897
+ .ecommerceSection {
898
+ display: flex;
899
+ flex-direction: column;
900
+ gap: 8px;
901
+ padding: 0;
902
+ border: none;
903
+ border-radius: 0;
904
+ background: transparent;
905
+ }
906
+
907
+ .ecommerceSection h3 {
908
+ margin: 0;
909
+ font-size: 13.5px;
910
+ font-weight: 600;
911
+ display: flex;
912
+ align-items: baseline;
913
+ gap: 6px;
914
+ }
915
+
916
+ .ecommerceSectionHint {
917
+ font-size: 11px;
918
+ font-weight: 400;
919
+ color: var(--dsw-alias-label-tertiary);
920
+ }
921
+
922
+ .ecommerceSection input:not([type="checkbox"]), .ecommerceSection select, .ecommerceSection textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-3); border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; font: inherit; }
923
+ .ecommerceSection textarea { min-height: 60px; resize: vertical; }
924
+
925
+ .ecommerceField {
926
+ display: flex;
927
+ flex-direction: column;
928
+ gap: 4px;
929
+ min-width: 0;
930
+ }
931
+
932
+ .ecommerceFieldLabel {
933
+ font-size: 11.5px;
934
+ color: var(--dsw-alias-label-secondary);
935
+ }
936
+
937
+ .ecommerceParamGrid {
938
+ display: grid;
939
+ grid-template-columns: 1fr 1fr;
940
+ gap: 10px 8px;
941
+ }
942
+
943
+ .ecommerceUploadHero {
944
+ display: flex;
945
+ flex-direction: column;
946
+ align-items: center;
947
+ justify-content: center;
948
+ gap: 4px;
949
+ min-height: 78px;
950
+ padding: 12px;
951
+ border: 1.5px dashed var(--dsw-alias-border-l2);
952
+ border-radius: 10px;
953
+ background: transparent;
954
+ color: var(--dsw-alias-label-secondary);
955
+ cursor: pointer;
956
+ font: inherit;
957
+ text-align: center;
958
+ }
959
+
960
+ .ecommerceUploadHero:hover {
961
+ color: var(--dsw-alias-label-primary);
962
+ border-color: var(--dsw-alias-label-dimmed);
963
+ background: var(--dsw-alias-interactive-bg-hover);
964
+ }
965
+
966
+ .ecommerceUploadHero span {
967
+ font-size: 12px;
968
+ }
969
+
970
+ .ecommerceUploadHero small {
971
+ font-size: 10.5px;
972
+ color: var(--dsw-alias-label-tertiary);
973
+ }
974
+
975
+ .ecommerceStructureGrid {
976
+ display: grid;
977
+ grid-template-columns: repeat(3, 1fr);
978
+ gap: 6px;
979
+ }
980
+
981
+ .ecommerceSlotCard {
982
+ position: relative;
983
+ display: flex;
984
+ align-items: center;
985
+ justify-content: center;
986
+ height: 34px;
987
+ border: 1px solid var(--dsw-alias-border-l2);
988
+ border-radius: 8px;
989
+ background: var(--dsw-alias-bg-layer-2);
990
+ color: var(--dsw-alias-label-primary);
991
+ cursor: pointer;
992
+ font: inherit;
993
+ font-size: 12px;
994
+ white-space: nowrap;
995
+ }
996
+
997
+ .ecommerceSlotCard:hover {
998
+ border-color: var(--dsw-alias-label-dimmed);
999
+ }
1000
+
1001
+ .ecommerceSlotCard[data-active] {
1002
+ background: var(--dsw-alias-label-primary);
1003
+ border-color: var(--dsw-alias-label-primary);
1004
+ color: var(--dsw-alias-bg-base);
1005
+ font-weight: 600;
1006
+ }
1007
+
1008
+ .ecommerceSlotCount {
1009
+ position: absolute;
1010
+ top: -6px;
1011
+ right: -6px;
1012
+ min-width: 16px;
1013
+ height: 16px;
1014
+ padding: 0 4px;
1015
+ border-radius: 8px;
1016
+ background: var(--dsw-alias-brand-primary);
1017
+ color: #fff;
1018
+ font-size: 10px;
1019
+ font-weight: 600;
1020
+ line-height: 16px;
1021
+ text-align: center;
1022
+ }
1023
+
1024
+ .ecommerceRefRow {
1025
+ display: grid;
1026
+ grid-template-columns: 64px 1fr;
1027
+ align-items: center;
1028
+ gap: 8px;
1029
+ }
1030
+
1031
+ .ecommerceRefRow > span {
1032
+ font-size: 12px;
1033
+ color: var(--dsw-alias-label-secondary);
1034
+ }
1035
+
1036
+ .ecommercePrimaryAction {
1037
+ width: 100%;
1038
+ height: 38px;
1039
+ border-radius: 999px;
1040
+ font-size: 13.5px;
1041
+ }
1042
+
1043
+ .previewBadge {
1044
+ margin-left: 5px;
1045
+ padding: 0 4px;
1046
+ border-radius: 4px;
1047
+ background: var(--dsw-alias-brand-primary);
1048
+ color: #fff;
1049
+ font-size: 9px;
1050
+ font-weight: 700;
1051
+ line-height: 13px;
1052
+ letter-spacing: 0.02em;
1053
+ }
1054
+
1055
+ .ecommercePlanNote {
1056
+ color: var(--dsw-alias-label-secondary);
1057
+ font-size: 11.5px;
1058
+ line-height: 1.5;
1059
+ }
1060
+
1061
+ .ecommercePlanWarn {
1062
+ padding: 6px 8px;
1063
+ border: 1px solid var(--dsw-alias-border-l2);
1064
+ border-radius: 6px;
1065
+ background: var(--dsw-alias-bg-layer-2);
1066
+ color: var(--dsw-alias-label-secondary);
1067
+ font-size: 11.5px;
1068
+ line-height: 1.5;
1069
+ }
1070
+
1071
+ .ecommerceAssets {
1072
+ display: grid;
1073
+ grid-template-columns: repeat(3, 1fr);
1074
+ gap: 6px;
1075
+ }
1076
+
1077
+ .ecommerceAsset {
1078
+ position: relative;
1079
+ display: flex;
1080
+ flex-direction: column;
1081
+ gap: 3px;
1082
+ padding: 4px;
1083
+ border: 1px solid var(--dsw-alias-border-l1);
1084
+ border-radius: 8px;
1085
+ background: var(--dsw-alias-bg-layer-3);
1086
+ }
1087
+
1088
+ .ecommerceAsset img {
1089
+ width: 100%;
1090
+ height: 44px;
1091
+ object-fit: cover;
1092
+ border-radius: 5px;
1093
+ }
1094
+
1095
+ .ecommerceAsset select {
1096
+ width: 100%;
1097
+ min-width: 0;
1098
+ padding: 2px;
1099
+ font-size: 10px;
1100
+ }
1101
+
1102
+ .ecommerceAsset button {
1103
+ position: absolute;
1104
+ top: 7px;
1105
+ right: 7px;
1106
+ width: 16px;
1107
+ height: 16px;
1108
+ padding: 0;
1109
+ border: none;
1110
+ border-radius: 50%;
1111
+ background: rgba(0, 0, 0, 0.55);
1112
+ color: #fff;
1113
+ cursor: pointer;
1114
+ font-size: 11px;
1115
+ line-height: 15px;
1116
+ text-align: center;
1117
+ }
1118
+
1119
+ .ecommerceAsset button:hover {
1120
+ background: rgba(0, 0, 0, 0.8);
1121
+ }
1122
+
1123
+ .ecommerceAssetAdd {
1124
+ display: flex;
1125
+ flex-direction: column;
1126
+ align-items: center;
1127
+ justify-content: center;
1128
+ gap: 2px;
1129
+ min-height: 78px;
1130
+ border: 1.5px dashed var(--dsw-alias-border-l2);
1131
+ border-radius: 8px;
1132
+ background: transparent;
1133
+ color: var(--dsw-alias-label-secondary);
1134
+ cursor: pointer;
1135
+ font: inherit;
1136
+ }
1137
+
1138
+ .ecommerceAssetAdd:hover {
1139
+ color: var(--dsw-alias-label-primary);
1140
+ border-color: var(--dsw-alias-label-dimmed);
1141
+ }
1142
+
1143
+ .ecommerceAssetAdd span {
1144
+ font-size: 16px;
1145
+ line-height: 1;
1146
+ }
1147
+
1148
+ .ecommerceAssetAdd small {
1149
+ font-size: 10px;
1150
+ }
1151
+
1152
+ .ecommerceAdvancedToggle {
1153
+ display: flex;
1154
+ align-items: center;
1155
+ justify-content: space-between;
1156
+ width: 100%;
1157
+ padding: 0;
1158
+ border: none;
1159
+ background: transparent;
1160
+ color: var(--dsw-alias-label-secondary);
1161
+ cursor: pointer;
1162
+ font: inherit;
1163
+ font-size: 12.5px;
1164
+ }
1165
+
1166
+ .ecommerceAdvancedToggle:hover {
1167
+ color: var(--dsw-alias-label-primary);
1168
+ }
1169
+
1170
+ .ecommerceAdvancedChevron {
1171
+ font-size: 11px;
1172
+ }
1173
+
1174
+ .ecommerceAdvancedBody {
1175
+ display: flex;
1176
+ flex-direction: column;
1177
+ gap: 8px;
1178
+ margin-top: 8px;
1179
+ }
1180
+
1181
+ .ecommerceFooterBody {
1182
+ display: flex;
1183
+ flex-direction: column;
1184
+ gap: 8px;
1185
+ }
1186
+
1187
+ .ecommercePlanMini {
1188
+ display: flex;
1189
+ flex-direction: column;
1190
+ gap: 6px;
1191
+ padding: 10px;
1192
+ border: 1px solid var(--dsw-alias-brand-primary);
1193
+ border-radius: 10px;
1194
+ }
1195
+
1196
+ .ecommercePlanMini > strong {
1197
+ font-size: 12.5px;
1198
+ }
1199
+
1200
+ .ecommercePlanList {
1201
+ display: flex;
1202
+ flex-direction: column;
1203
+ gap: 3px;
1204
+ max-height: 116px;
1205
+ overflow-y: auto;
1206
+ }
1207
+
1208
+ .ecommercePlanList > div {
1209
+ display: flex;
1210
+ justify-content: space-between;
1211
+ gap: 12px;
1212
+ color: var(--dsw-alias-label-secondary);
1213
+ font-size: 11.5px;
1214
+ }
1215
+
1216
+ .ecommercePlanBack {
1217
+ padding: 0;
1218
+ border: none;
1219
+ background: transparent;
1220
+ color: var(--dsw-alias-label-tertiary);
1221
+ cursor: pointer;
1222
+ font: inherit;
1223
+ font-size: 12px;
1224
+ }
1225
+
1226
+ .ecommercePlanBack:hover {
1227
+ color: var(--dsw-alias-label-primary);
1228
+ }
1229
+
1230
+ .ecommerceFooterHint { color: var(--dsw-alias-label-secondary); font-size: 12px; }
1231
+
1232
+ .ecommerceResults {
1233
+ display: flex;
1234
+ flex-direction: column;
1235
+ gap: 14px;
1236
+ width: 100%;
1237
+ margin: 0 auto;
1238
+ padding: 16px 18px;
1239
+ overflow-y: auto;
1240
+ }
1241
+
1242
+ .ecommerceResultsHeader {
1243
+ display: flex;
1244
+ align-items: center;
1245
+ justify-content: space-between;
1246
+ gap: 12px;
1247
+ }
1248
+
1249
+ .ecommerceResultsHeader h3 {
1250
+ margin: 0;
1251
+ font-size: 15px;
1252
+ }
1253
+
1254
+ .ecommerceResultsHeader > div:first-child {
1255
+ display: flex;
1256
+ align-items: baseline;
1257
+ gap: 10px;
1258
+ }
1259
+
1260
+ .ecommerceResultsHeader span {
1261
+ font-size: 12px;
1262
+ color: var(--dsw-alias-label-secondary);
1263
+ }
1264
+
1265
+ .ecommerceResultsActions {
1266
+ display: flex;
1267
+ gap: 8px;
1268
+ }
1269
+
1270
+ .ecommerceResultsEmpty {
1271
+ padding: 32px 16px;
1272
+ color: var(--dsw-alias-label-tertiary);
1273
+ font-size: 13px;
1274
+ text-align: center;
1275
+ border: 1.5px dashed var(--dsw-alias-border-l2);
1276
+ border-radius: 12px;
1277
+ }
1278
+
1279
+ .ecommerceGroups {
1280
+ display: flex;
1281
+ flex-direction: column;
1282
+ gap: 16px;
1283
+ }
1284
+
1285
+ .ecommerceGroup {
1286
+ display: flex;
1287
+ flex-direction: column;
1288
+ gap: 8px;
1289
+ padding: 0;
1290
+ border: none;
1291
+ border-radius: 0;
1292
+ background: transparent;
1293
+ }
1294
+
1295
+ .ecommerceGroup > header {
1296
+ display: flex;
1297
+ align-items: center;
1298
+ gap: 10px;
1299
+ font-size: 13px;
1300
+ }
1301
+
1302
+ .ecommerceGroup > header strong {
1303
+ font-size: 13px;
1304
+ }
1305
+
1306
+ .ecommerceGroup > header span {
1307
+ color: var(--dsw-alias-label-secondary);
1308
+ font-size: 12px;
1309
+ }
1310
+
1311
+ .ecommerceGroup > header button {
1312
+ margin-left: auto;
1313
+ }
1314
+
1315
+ .ecommerceGroupGrid {
1316
+ display: grid;
1317
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
1318
+ gap: 12px;
1319
+ }
1320
+
1321
+ .ecommerceTaskCard {
1322
+ position: relative;
1323
+ display: flex;
1324
+ align-items: center;
1325
+ justify-content: center;
1326
+ width: 100%;
1327
+ aspect-ratio: 1;
1328
+ min-height: 0;
1329
+ padding: 0;
1330
+ border: 1px solid var(--dsw-alias-border-l1);
1331
+ border-radius: 10px;
1332
+ background: var(--dsw-alias-bg-layer-3);
1333
+ overflow: hidden;
1334
+ }
1335
+
1336
+ .ecommerceTaskCard[data-status="failed"],
1337
+ .ecommerceTaskCard[data-status="cancelled"] {
1338
+ color: var(--dsw-alias-label-tertiary);
1339
+ font-size: 12px;
1340
+ }
1341
+
1342
+ .ecommerceTaskCard .imageCard {
1343
+ width: 100%;
1344
+ height: 100%;
1345
+ margin: 0;
1346
+ border: none;
1347
+ border-radius: 0;
1348
+ }
1349
+
1350
+ .ecommerceTaskCard .image {
1351
+ width: 100%;
1352
+ height: 100%;
1353
+ object-fit: cover;
1354
+ }
1355
+
1356
+ .ecommerceResultBadge {
1357
+ position: absolute;
1358
+ top: 6px;
1359
+ left: 6px;
1360
+ padding: 0 7px;
1361
+ border-radius: 999px;
1362
+ background: rgb(0 0 0 / 55%);
1363
+ color: #fff;
1364
+ font-size: 10px;
1365
+ line-height: 16px;
1366
+ pointer-events: none;
1367
+ }
1368
+
1369
+ .ecommerceTaskActions {
1370
+ position: absolute;
1371
+ left: 0;
1372
+ right: 0;
1373
+ bottom: 0;
1374
+ display: flex;
1375
+ gap: 4px;
1376
+ justify-content: center;
1377
+ padding: 10px 4px 5px;
1378
+ background: linear-gradient(transparent, rgb(0 0 0 / 55%));
1379
+ opacity: 0;
1380
+ transition: opacity 0.12s ease;
1381
+ }
1382
+
1383
+ .ecommerceTaskCard:hover .ecommerceTaskActions {
1384
+ opacity: 1;
1385
+ }
1386
+
1387
+ .ecommerceActionChip {
1388
+ border: none;
1389
+ border-radius: 6px;
1390
+ background: rgb(255 255 255 / 92%);
1391
+ color: #111;
1392
+ font-size: 10px;
1393
+ font-weight: 500;
1394
+ line-height: 18px;
1395
+ padding: 0 6px;
1396
+ cursor: pointer;
1397
+ text-decoration: none;
1398
+ white-space: nowrap;
1399
+ }
1400
+
1401
+ .ecommerceActionChip:hover {
1402
+ background: #fff;
1403
+ }
1404
+
1405
+ .ecommerceActionChip:disabled {
1406
+ opacity: 0.5;
1407
+ cursor: default;
1408
+ }
1409
+
1410
+ .ecommerceTaskState {
1411
+ display: flex;
1412
+ flex-direction: column;
1413
+ gap: 3px;
1414
+ padding: 10px 8px;
1415
+ color: var(--dsw-alias-label-secondary);
1416
+ font-size: 11px;
1417
+ text-align: center;
1418
+ word-break: break-all;
1419
+ }
1420
+
1421
+ .ecommerceTaskState b {
1422
+ font-size: 12px;
1423
+ color: var(--dsw-alias-label-primary);
1424
+ }
1425
+
1426
+
1427
+
1428
+ /* --- top navigation (mode tabs live in the panel header row) -------------------- */
1429
+
1430
+ .topNav {
1431
+ position: absolute;
1432
+ left: 50%;
1433
+ transform: translateX(-50%);
1434
+ display: flex;
1435
+ align-items: center;
1436
+ justify-content: center;
1437
+ gap: 2px;
1438
+ flex: none;
1439
+ }
1440
+
1441
+ .topNavItem {
1442
+ display: inline-flex;
1443
+ align-items: center;
1444
+ gap: 4px;
1445
+ height: 30px;
1446
+ padding: 0 14px;
1447
+ border: none;
1448
+ border-radius: 999px;
1449
+ background: transparent;
1450
+ color: var(--dsw-alias-label-secondary);
1451
+ cursor: pointer;
1452
+ font: inherit;
1453
+ font-size: 13px;
1454
+ }
1455
+
1456
+ .topNavItem,
1457
+ .topNavItem span {
1458
+ white-space: nowrap;
1459
+ }
1460
+
1461
+ .topNavItem:hover {
1462
+ color: var(--dsw-alias-label-primary);
1463
+ background: var(--dsw-alias-interactive-bg-hover);
1464
+ }
1465
+
1466
+ .topNavItem[data-active] {
1467
+ background: var(--dsw-alias-label-primary);
1468
+ color: var(--dsw-alias-bg-base);
1469
+ font-weight: 600;
1470
+ }
1471
+
1472
+ .topNavDivider {
1473
+ width: 1px;
1474
+ height: 16px;
1475
+ margin: 0 8px;
1476
+ background: var(--dsw-alias-border-l2);
1477
+ }
1478
+
1479
+ /* chat pane toggle + collapse */
1480
+
1481
+ .panelHeaderActions {
1482
+ display: inline-flex;
1483
+ align-items: center;
1484
+ gap: 10px;
1485
+ }
1486
+
1487
+ .chatToggle {
1488
+ display: inline-flex;
1489
+ align-items: center;
1490
+ gap: 5px;
1491
+ height: 26px;
1492
+ padding: 0 10px;
1493
+ border: 1px solid var(--dsw-alias-border-l2);
1494
+ border-radius: 999px;
1495
+ background: var(--dsw-alias-bg-layer-2);
1496
+ color: var(--dsw-alias-label-secondary);
1497
+ cursor: pointer;
1498
+ font: inherit;
1499
+ font-size: 12px;
1500
+ }
1501
+
1502
+ .chatToggle:hover {
1503
+ color: var(--dsw-alias-label-primary);
1504
+ }
1505
+
1506
+ .chatToggle[data-open='true'] {
1507
+ color: var(--dsw-alias-brand-primary);
1508
+ border-color: var(--dsw-alias-brand-primary);
1509
+ }
1510
+
1511
+ /* Drop the conversation column entirely while the chat toggle is collapsed. */
1512
+ html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
1513
+ html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
1514
+ grid-template-columns: minmax(0, 1fr);
1515
+ }
1516
+
1517
+ /* Drop the conversation column entirely while the chat toggle is collapsed.
1518
+ The hide rule must out-specify the base `display: flex !important`. */
1519
+ html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
1520
+ display: none !important;
1521
+ }
1522
+
1523
+ html[data-dsh-imagegen-chat-collapsed] [data-dsh-imagegen-chat-resizer] {
1524
+ display: none !important;
1525
+ }
1526
+
1527
+ /* config panel drag handle */
1528
+
1529
+ .configResizer {
1530
+ position: absolute;
1531
+ top: 0;
1532
+ right: 0;
1533
+ width: 6px;
1534
+ height: 100%;
1535
+ cursor: col-resize;
1536
+ z-index: 6;
1537
+ }
1538
+
1539
+ .configResizer:hover {
1540
+ background: linear-gradient(90deg, transparent, var(--dsw-alias-border-l2));
1541
+ }
1542
+
1543
+ .config[data-collapsed='true'] .configResizer {
1544
+ display: none;
1545
+ }
1546
+
1547
+ /* --- generation sub-modes (inside the normal workspace) ------------------------ */
1548
+
1549
+ .modeRow {
1550
+ display: flex;
1551
+ gap: 8px;
1552
+ align-items: center;
1553
+ }
1554
+
1555
+ .modePill {
1556
+ flex: 1;
1557
+ justify-content: center;
1558
+ height: 28px;
1559
+ font-size: 12.5px;
1560
+ }
1561
+
1562
+ .modePill,
1563
+ .modePill span,
1564
+ .modePill div {
1565
+ white-space: nowrap;
1566
+ min-width: 0;
1567
+ }
1568
+
1569
+ /* --- reference image upload (edit mode) ---------------------------------------- */
1570
+
1571
+ .uploadBox {
1572
+ display: flex;
1573
+ flex-direction: column;
1574
+ align-items: center;
1575
+ justify-content: center;
1576
+ gap: 6px;
1577
+ min-height: 128px;
1578
+ padding: 16px;
1579
+ color: var(--dsw-alias-label-secondary);
1580
+ background: transparent;
1581
+ border: 1.5px dashed var(--dsw-alias-border-l2);
1582
+ border-radius: 12px;
1583
+ cursor: pointer;
1584
+ font: inherit;
1585
+ font-size: 12.5px;
1586
+ text-align: center;
1587
+ }
1588
+
1589
+ .uploadBox:hover {
1590
+ color: var(--dsw-alias-label-primary);
1591
+ border-color: var(--dsw-alias-label-dimmed);
1592
+ background: var(--dsw-alias-interactive-bg-hover);
1593
+ }
1594
+
1595
+ .uploadBox:focus-visible {
1596
+ outline: 2px solid var(--dsw-alias-brand-primary);
1597
+ outline-offset: 1px;
1598
+ }
1599
+
1600
+ .uploadIcon {
1601
+ display: inline-flex;
1602
+ color: var(--dsw-alias-label-tertiary);
1603
+ }
1604
+
1605
+ .uploadHint {
1606
+ font-size: 11px;
1607
+ color: var(--dsw-alias-label-tertiary);
1608
+ }
1609
+
1610
+ .reference {
1611
+ display: flex;
1612
+ flex-direction: column;
1613
+ gap: 8px;
1614
+ }
1615
+
1616
+ .referenceImage {
1617
+ width: 100%;
1618
+ max-height: 176px;
1619
+ object-fit: contain;
1620
+ border-radius: 10px;
1621
+ background: var(--dsw-alias-bg-base);
1622
+ border: 1px solid var(--dsw-alias-border-l1);
1623
+ }
1624
+
1625
+ .referenceActions {
1626
+ display: flex;
1627
+ gap: 8px;
1628
+ }
1629
+
1630
+ .hiddenFile {
1631
+ display: none;
1632
+ }
1633
+
1634
+ /* --- prompt -------------------------------------------------------------------- */
1635
+
1636
+ .prompt {
1637
+ width: 100%;
1638
+ min-height: 120px;
1639
+ padding: 10px 12px;
1640
+ font-size: 13px;
1641
+ line-height: 1.6;
1642
+ color: var(--dsw-alias-label-primary);
1643
+ background: var(--dsw-alias-bg-layer-3);
1644
+ border: 1px solid var(--dsw-alias-border-l2);
1645
+ border-radius: 10px;
1646
+ outline: none;
1647
+ resize: vertical;
1648
+ font-family: inherit;
1649
+ box-sizing: border-box;
1650
+ }
1651
+
1652
+ .prompt:focus-visible {
1653
+ border-color: var(--dsw-alias-brand-primary);
1654
+ }
1655
+
1656
+ .prompt::placeholder {
1657
+ color: var(--dsw-alias-label-tertiary);
1658
+ }
1659
+
1660
+ .promptFooter {
1661
+ display: flex;
1662
+ align-items: center;
1663
+ justify-content: space-between;
1664
+ gap: 8px;
1665
+ margin-top: -6px;
1666
+ }
1667
+
1668
+ .templatesButton {
1669
+ display: inline-flex;
1670
+ align-items: center;
1671
+ gap: 6px;
1672
+ height: 26px;
1673
+ padding: 0 12px;
1674
+ border: 1px solid var(--dsw-alias-brand-primary);
1675
+ border-radius: 999px;
1676
+ background: linear-gradient(135deg, color-mix(in srgb, var(--dsw-alias-brand-primary) 14%, transparent), color-mix(in srgb, var(--dsw-alias-brand-primary) 5%, transparent));
1677
+ color: var(--dsw-alias-brand-primary);
1678
+ font-size: 12px;
1679
+ font-weight: 600;
1680
+ font-family: inherit;
1681
+ cursor: pointer;
1682
+ box-shadow: 0 1px 0 color-mix(in srgb, var(--dsw-alias-brand-primary) 22%, transparent);
1683
+ transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
1684
+ }
1685
+
1686
+ .templatesButton svg {
1687
+ flex: none;
1688
+ }
1689
+
1690
+ .templatesButton:hover {
1691
+ background: linear-gradient(135deg, color-mix(in srgb, var(--dsw-alias-brand-primary) 24%, transparent), color-mix(in srgb, var(--dsw-alias-brand-primary) 8%, transparent));
1692
+ color: var(--dsw-alias-brand-primary);
1693
+ transform: translateY(-1px);
1694
+ box-shadow: 0 2px 6px color-mix(in srgb, var(--dsw-alias-brand-primary) 30%, transparent);
1695
+ }
1696
+
1697
+ .templatesButton:active {
1698
+ transform: translateY(0);
1699
+ }
1700
+
1701
+ .enhanceButton {
1702
+ height: 26px;
1703
+ margin-left: auto;
1704
+ padding: 0 11px;
1705
+ border: 1px solid var(--dsw-alias-border-l2);
1706
+ border-radius: 999px;
1707
+ color: var(--dsw-alias-label-secondary);
1708
+ background: var(--dsw-alias-bg-layer-2);
1709
+ font: inherit;
1710
+ font-size: 12px;
1711
+ cursor: pointer;
1712
+ }
1713
+
1714
+ .enhanceButton:hover:not(:disabled) {
1715
+ color: var(--dsw-alias-brand-primary);
1716
+ border-color: var(--dsw-alias-brand-primary);
1717
+ }
1718
+
1719
+ .enhanceButton:disabled { opacity: 0.5; cursor: default; }
1720
+
1721
+ .promptCount {
1722
+ font-size: 11px;
1723
+ color: var(--dsw-alias-label-tertiary);
1724
+ font-variant-numeric: tabular-nums;
1725
+ }
1726
+
1727
+ /* --- parameter groups ----------------------------------------------------------- */
1728
+
1729
+ .paramGroup {
1730
+ display: flex;
1731
+ flex-direction: column;
1732
+ gap: 8px;
1733
+ }
1734
+
1735
+ .paramLabel {
1736
+ font-size: 12px;
1737
+ font-weight: 600;
1738
+ color: var(--dsw-alias-label-secondary);
1739
+ }
1740
+
1741
+ .optionRow {
1742
+ display: flex;
1743
+ gap: 6px;
1744
+ flex-wrap: wrap;
1745
+ }
1746
+
1747
+ .optionGrid {
1748
+ display: grid;
1749
+ grid-template-columns: repeat(3, 1fr);
1750
+ gap: 6px;
1751
+ }
1752
+
1753
+ .optionPill {
1754
+ justify-content: center;
1755
+ }
1756
+
1757
+ .paramHint {
1758
+ font-size: 11px;
1759
+ line-height: 1.45;
1760
+ color: var(--dsw-alias-label-tertiary);
1761
+ }
1762
+
1763
+ /* --- footer: model dropdown + generate button (fixed under the scroll) -------- */
1764
+
1765
+ .footer {
1766
+ display: flex;
1767
+ flex-direction: column;
1768
+ align-items: stretch;
1769
+ gap: 8px;
1770
+ flex: none;
1771
+ padding: 10px 2px 0 0;
1772
+ border-top: 1px solid var(--dsw-alias-border-l1);
1773
+ }
1774
+
1775
+ .modelWrap {
1776
+ display: flex;
1777
+ flex-direction: column;
1778
+ gap: 5px;
1779
+ min-width: 0;
1780
+ }
1781
+
1782
+ .modelLabel {
1783
+ font-size: 12px;
1784
+ font-weight: 600;
1785
+ color: var(--dsw-alias-label-secondary);
1786
+ }
1787
+
1788
+ .modelSelect {
1789
+ width: 100%;
1790
+ height: 36px;
1791
+ display: flex;
1792
+ align-items: center;
1793
+ justify-content: space-between;
1794
+ gap: 8px;
1795
+ padding: 0 12px;
1796
+ font-size: 13px;
1797
+ color: var(--dsw-alias-label-primary);
1798
+ background: var(--dsw-alias-bg-layer-2);
1799
+ border: 1px solid var(--dsw-alias-border-l2);
1800
+ border-radius: 18px;
1801
+ outline: none;
1802
+ font-family: inherit;
1803
+ cursor: pointer;
1804
+ text-align: left;
1805
+ }
1806
+
1807
+ .modelSelect:focus-visible {
1808
+ border-color: var(--dsw-alias-brand-primary);
1809
+ }
1810
+
1811
+ .modelSelect:disabled {
1812
+ opacity: 0.55;
1813
+ cursor: default;
1814
+ }
1815
+
1816
+ /* Model dropdown trigger + upward-opening menu. */
1817
+ .modelMenu {
1818
+ position: relative;
1819
+ display: block;
1820
+ min-width: 0;
1821
+ }
1822
+
1823
+ /* The list opens UPWARD (absolute above the trigger) so it never hides
1824
+ behind the footer edge below. */
1825
+ .modelMenuList {
1826
+ position: absolute;
1827
+ left: 0;
1828
+ right: 0;
1829
+ bottom: calc(100% + 6px);
1830
+ z-index: 40;
1831
+ display: flex;
1832
+ flex-direction: column;
1833
+ padding: 4px;
1834
+ background: var(--dsw-alias-bg-layer-2);
1835
+ border: 1px solid var(--dsw-alias-border-l2);
1836
+ border-radius: 12px;
1837
+ box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
1838
+ overflow: hidden;
1839
+ }
1840
+
1841
+ .modelMenuItem {
1842
+ display: block;
1843
+ width: 100%;
1844
+ padding: 7px 10px;
1845
+ font: inherit;
1846
+ font-size: 13px;
1847
+ color: var(--dsw-alias-label-primary);
1848
+ background: transparent;
1849
+ border: none;
1850
+ border-radius: 8px;
1851
+ cursor: pointer;
1852
+ text-align: left;
1853
+ white-space: nowrap;
1854
+ overflow: hidden;
1855
+ text-overflow: ellipsis;
1856
+ }
1857
+
1858
+ .modelMenuItem:hover {
1859
+ background: var(--dsw-alias-bg-hover);
1860
+ }
1861
+
1862
+ .modelMenuItem[data-selected] {
1863
+ color: var(--dsw-alias-brand-primary);
1864
+ font-weight: 600;
1865
+ background: var(--dsw-alias-bg-layer-1);
1866
+ }
1867
+
1868
+ .generateButton {
1869
+ width: 100%;
1870
+ }
1871
+
1872
+ .generateInner {
1873
+ display: inline-flex;
1874
+ align-items: center;
1875
+ gap: 7px;
1876
+ }
1877
+
1878
+ /* --- canvas states --------------------------------------------------------------- */
1879
+
1880
+ .canvasState {
1881
+ flex: 1;
1882
+ display: flex;
1883
+ flex-direction: column;
1884
+ align-items: center;
1885
+ justify-content: center;
1886
+ gap: 8px;
1887
+ padding: 24px;
1888
+ text-align: center;
1889
+ color: var(--dsw-alias-label-tertiary);
1890
+ }
1891
+
1892
+ .canvasStateTitle {
1893
+ font-size: 14px;
1894
+ font-weight: 600;
1895
+ color: var(--dsw-alias-label-secondary);
1896
+ }
1897
+
1898
+ .canvasStateHint {
1899
+ font-size: 12px;
1900
+ max-width: 380px;
1901
+ line-height: 1.6;
1902
+ }
1903
+
1904
+ .canvasEmptyIcon {
1905
+ display: inline-flex;
1906
+ margin-bottom: 4px;
1907
+ color: var(--dsw-alias-label-tertiary);
1908
+ }
1909
+
1910
+ .canvasError {
1911
+ margin: 14px;
1912
+ padding: 10px 14px;
1913
+ font-size: 12.5px;
1914
+ line-height: 1.6;
1915
+ color: var(--dsw-alias-label-error);
1916
+ background: var(--dsw-alias-bg-layer-2);
1917
+ border: 1px solid var(--dsw-alias-label-error);
1918
+ border-radius: 10px;
1919
+ overflow-wrap: anywhere;
1920
+ flex: none;
1921
+ }
1922
+
1923
+ .canvasBody {
1924
+ flex: 1;
1925
+ min-height: 0;
1926
+ display: flex;
1927
+ flex-direction: column;
1928
+ gap: 10px;
1929
+ overflow-y: auto;
1930
+ padding: 14px;
1931
+ scrollbar-width: thin;
1932
+ scrollbar-color: var(--dsw-alias-border-l2) transparent;
1933
+ }
1934
+
1935
+ .canvasBody::-webkit-scrollbar {
1936
+ width: 8px;
1937
+ }
1938
+
1939
+ .canvasBody::-webkit-scrollbar-thumb {
1940
+ background: var(--dsw-alias-border-l2);
1941
+ border-radius: 999px;
1942
+ }
1943
+
1944
+ .canvasMeta {
1945
+ flex: none;
1946
+ display: flex;
1947
+ align-items: center;
1948
+ gap: 8px;
1949
+ font-size: 12px;
1950
+ color: var(--dsw-alias-label-tertiary);
1951
+ }
1952
+
1953
+ .canvasHistoryTag {
1954
+ padding: 1px 8px;
1955
+ font-size: 11px;
1956
+ color: var(--dsw-alias-label-secondary);
1957
+ background: var(--dsw-alias-bg-layer-2);
1958
+ border: 1px solid var(--dsw-alias-border-l2);
1959
+ border-radius: 999px;
1960
+ white-space: nowrap;
1961
+ }
1962
+
1963
+ /* --- result grid ----------------------------------------------------------------- */
1964
+
1965
+ .grid {
1966
+ display: grid;
1967
+ flex: 1;
1968
+ min-height: 0;
1969
+ gap: 14px;
1970
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1971
+ grid-template-rows: repeat(2, minmax(0, 1fr));
1972
+ }
1973
+
1974
+ .grid[data-count='1'] .imageCard {
1975
+ grid-area: 1 / 1 / 3 / 3;
1976
+ }
1977
+
1978
+ .imageCard {
1979
+ position: relative;
1980
+ display: flex;
1981
+ flex-direction: column;
1982
+ margin: 0;
1983
+ border: 1px solid var(--dsw-alias-border-l1);
1984
+ border-radius: 12px;
1985
+ overflow: hidden;
1986
+ background: var(--dsw-alias-bg-layer-2);
1987
+ cursor: zoom-in;
1988
+ min-height: 0;
1989
+ }
1990
+
1991
+ .imageCard:focus-visible {
1992
+ outline: 2px solid var(--dsw-alias-brand-primary);
1993
+ outline-offset: 1px;
1994
+ }
1995
+
1996
+ .image {
1997
+ display: block;
1998
+ flex: 1;
1999
+ min-height: 0;
2000
+ width: 100%;
2001
+ object-fit: cover;
2002
+ background: var(--dsw-alias-bg-base);
2003
+ }
2004
+
2005
+ .imageCaption {
2006
+ padding: 7px 10px;
2007
+ font-size: 11px;
2008
+ line-height: 1.5;
2009
+ color: var(--dsw-alias-label-tertiary);
2010
+ white-space: nowrap;
2011
+ overflow: hidden;
2012
+ text-overflow: ellipsis;
2013
+ border-top: 1px solid var(--dsw-alias-border-l1);
2014
+ }
2015
+
2016
+ .download {
2017
+ position: absolute;
2018
+ top: 8px;
2019
+ right: 8px;
2020
+ padding: 2px 10px;
2021
+ font-size: 12px;
2022
+ line-height: 20px;
2023
+ font-weight: 500;
2024
+ color: #fff;
2025
+ background: rgb(15 18 24 / 82%);
2026
+ border: 1px solid rgb(255 255 255 / 62%);
2027
+ border-radius: 999px;
2028
+ text-decoration: none;
2029
+ opacity: 0;
2030
+ transition: opacity 0.12s;
2031
+ backdrop-filter: blur(4px);
2032
+ box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
2033
+ }
2034
+
2035
+ .imageCard:hover .download {
2036
+ opacity: 1;
2037
+ }
2038
+
2039
+ .download:hover {
2040
+ background: rgb(15 18 24 / 94%);
2041
+ }
2042
+
2043
+ .download:focus-visible {
2044
+ opacity: 1;
2045
+ outline: 2px solid #fff;
2046
+ outline-offset: 2px;
2047
+ }
2048
+
2049
+ /* Add-to-gallery pill (top-left, mirrors .download; shows on card hover). */
2050
+ .galleryAdd {
2051
+ position: absolute;
2052
+ top: 8px;
2053
+ left: 8px;
2054
+ display: inline-flex;
2055
+ align-items: center;
2056
+ gap: 5px;
2057
+ padding: 2px 10px;
2058
+ font: inherit;
2059
+ font-size: 12px;
2060
+ line-height: 20px;
2061
+ font-weight: 500;
2062
+ color: #fff;
2063
+ background: rgb(15 18 24 / 82%);
2064
+ border: 1px solid rgb(255 255 255 / 62%);
2065
+ border-radius: 999px;
2066
+ cursor: pointer;
2067
+ opacity: 0;
2068
+ transition: opacity 0.12s;
2069
+ backdrop-filter: blur(4px);
2070
+ box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
2071
+ }
2072
+
2073
+ .imageCard:hover .galleryAdd {
2074
+ opacity: 1;
2075
+ }
2076
+
2077
+ .galleryAdd:hover {
2078
+ background: rgb(15 18 24 / 94%);
2079
+ }
2080
+
2081
+ .galleryAdd:focus-visible {
2082
+ opacity: 1;
2083
+ outline: 2px solid #fff;
2084
+ outline-offset: 2px;
2085
+ }
2086
+
2087
+ .galleryAdd:disabled {
2088
+ opacity: 0.4;
2089
+ cursor: default;
2090
+ }
2091
+
2092
+ /* Add-to-conversation action sits below the gallery action on hover. */
2093
+ .conversationAdd {
2094
+ position: absolute;
2095
+ top: 38px;
2096
+ left: 8px;
2097
+ display: inline-flex;
2098
+ align-items: center;
2099
+ gap: 5px;
2100
+ padding: 2px 10px;
2101
+ border: 1px solid rgb(255 255 255 / 62%);
2102
+ border-radius: 999px;
2103
+ color: #fff;
2104
+ background: rgb(15 18 24 / 82%);
2105
+ cursor: pointer;
2106
+ font: inherit;
2107
+ font-size: 12px;
2108
+ line-height: 20px;
2109
+ font-weight: 500;
2110
+ opacity: 0;
2111
+ transition: opacity 0.12s;
2112
+ backdrop-filter: blur(4px);
2113
+ box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
2114
+ }
2115
+
2116
+ .imageCard:hover .conversationAdd,
2117
+ .conversationAdd:focus-visible {
2118
+ opacity: 1;
2119
+ }
2120
+
2121
+ .conversationAdd:hover {
2122
+ background: rgb(15 18 24 / 94%);
2123
+ }
2124
+
2125
+ .conversationAdd:focus-visible {
2126
+ opacity: 1;
2127
+ outline: 2px solid #fff;
2128
+ outline-offset: 2px;
2129
+ }
2130
+
2131
+ .conversationAdd:disabled {
2132
+ opacity: 0.4;
2133
+ cursor: default;
2134
+ }
2135
+
2136
+ /* Hover hint for the click-to-zoom behavior. */
2137
+ .zoomHint {
2138
+ position: absolute;
2139
+ left: 8px;
2140
+ bottom: 8px;
2141
+ display: inline-flex;
2142
+ align-items: center;
2143
+ gap: 5px;
2144
+ padding: 2px 10px;
2145
+ font-size: 12px;
2146
+ line-height: 20px;
2147
+ font-weight: 500;
2148
+ color: var(--dsw-alias-label-primary);
2149
+ background: var(--dsw-alias-bg-mask-1);
2150
+ border: 1px solid var(--dsw-alias-border-l2);
2151
+ border-radius: 999px;
2152
+ opacity: 0;
2153
+ transition: opacity 0.12s;
2154
+ backdrop-filter: blur(4px);
2155
+ pointer-events: none;
2156
+ }
2157
+
2158
+ .imageCard:hover .zoomHint {
2159
+ opacity: 1;
2160
+ }
2161
+
2162
+ /* --- spinner --------------------------------------------------------------------- */
2163
+
2164
+ .spinner,
2165
+ .bigSpinner {
2166
+ display: inline-block;
2167
+ flex: none;
2168
+ border-radius: 50%;
2169
+ border: 2px solid currentColor;
2170
+ border-top-color: transparent;
2171
+ animation: dshImageGenSpin 800ms linear infinite;
2172
+ }
2173
+
2174
+ .spinner {
2175
+ width: 11px;
2176
+ height: 11px;
2177
+ }
2178
+
2179
+ .bigSpinner {
2180
+ width: 30px;
2181
+ height: 30px;
2182
+ border-width: 3px;
2183
+ color: var(--dsw-alias-state-business-primary);
2184
+ margin-bottom: 6px;
2185
+ }
2186
+
2187
+ /* --- full-screen image preview (lightbox) -------------------------------------- */
2188
+
2189
+ .lightbox {
2190
+ position: fixed;
2191
+ inset: 0;
2192
+ z-index: 1000;
2193
+ display: flex;
2194
+ align-items: center;
2195
+ justify-content: center;
2196
+ padding: 24px;
2197
+ background: rgba(0, 0, 0, 0.72);
2198
+ backdrop-filter: blur(6px);
2199
+ }
2200
+
2201
+ .lightboxClose {
2202
+ position: absolute;
2203
+ top: 16px;
2204
+ right: 16px;
2205
+ display: inline-flex;
2206
+ align-items: center;
2207
+ justify-content: center;
2208
+ width: 38px;
2209
+ height: 38px;
2210
+ color: #fff;
2211
+ background: rgba(255, 255, 255, 0.14);
2212
+ border: 1px solid rgba(255, 255, 255, 0.28);
2213
+ border-radius: 50%;
2214
+ cursor: pointer;
2215
+ }
2216
+
2217
+ .lightboxClose:hover {
2218
+ background: rgba(255, 255, 255, 0.26);
2219
+ }
2220
+
2221
+ .lightboxNav {
2222
+ position: absolute;
2223
+ top: 50%;
2224
+ transform: translateY(-50%);
2225
+ display: inline-flex;
2226
+ align-items: center;
2227
+ justify-content: center;
2228
+ width: 42px;
2229
+ height: 42px;
2230
+ color: #fff;
2231
+ background: rgba(255, 255, 255, 0.14);
2232
+ border: 1px solid rgba(255, 255, 255, 0.28);
2233
+ border-radius: 50%;
2234
+ cursor: pointer;
2235
+ }
2236
+
2237
+ .lightboxNav:hover {
2238
+ background: rgba(255, 255, 255, 0.26);
2239
+ }
2240
+
2241
+ .lightboxNav[data-dir='prev'] {
2242
+ left: max(20px, calc(50% - 640px));
2243
+ }
2244
+
2245
+ .lightboxNav[data-dir='next'] {
2246
+ right: max(20px, calc(50% - 640px));
2247
+ }
2248
+
2249
+ .lightboxFigure {
2250
+ display: flex;
2251
+ flex-direction: column;
2252
+ gap: 10px;
2253
+ margin: 0;
2254
+ max-width: min(1100px, calc(100vw - 160px));
2255
+ width: min(1100px, calc(100vw - 160px));
2256
+ height: min(820px, calc(100vh - 48px));
2257
+ min-height: 0;
2258
+ }
2259
+
2260
+ .lightboxStage {
2261
+ flex: 1;
2262
+ min-height: 0;
2263
+ position: relative;
2264
+ overflow: auto;
2265
+ border-radius: 10px;
2266
+ background: rgba(255, 255, 255, 0.04);
2267
+ }
2268
+
2269
+ .lightboxScaleFrame {
2270
+ display: flex;
2271
+ align-items: center;
2272
+ justify-content: center;
2273
+ min-width: 100%;
2274
+ min-height: 100%;
2275
+ }
2276
+
2277
+ .lightboxImage {
2278
+ display: block;
2279
+ max-width: 100%;
2280
+ max-height: 100%;
2281
+ object-fit: contain;
2282
+ border-radius: 10px;
2283
+ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
2284
+ }
2285
+
2286
+ .lightboxTools {
2287
+ display: flex;
2288
+ align-items: center;
2289
+ justify-content: center;
2290
+ gap: 6px;
2291
+ }
2292
+
2293
+ .lightboxTool,
2294
+ .lightboxZoomLevel,
2295
+ .lightboxCopy {
2296
+ display: inline-flex;
2297
+ align-items: center;
2298
+ justify-content: center;
2299
+ color: #fff;
2300
+ background: rgba(255, 255, 255, 0.14);
2301
+ border: 1px solid rgba(255, 255, 255, 0.28);
2302
+ cursor: pointer;
2303
+ }
2304
+
2305
+ .lightboxTool,
2306
+ .lightboxZoomLevel {
2307
+ height: 32px;
2308
+ }
2309
+
2310
+ .lightboxTool {
2311
+ width: 32px;
2312
+ border-radius: 50%;
2313
+ }
2314
+
2315
+ .lightboxZoomLevel {
2316
+ min-width: 58px;
2317
+ padding: 0 9px;
2318
+ border-radius: 999px;
2319
+ font: inherit;
2320
+ font-size: 12px;
2321
+ font-variant-numeric: tabular-nums;
2322
+ }
2323
+
2324
+ .lightboxTool:hover,
2325
+ .lightboxZoomLevel:hover,
2326
+ .lightboxCopy:hover {
2327
+ background: rgba(255, 255, 255, 0.26);
2328
+ }
2329
+
2330
+ .lightboxCaptionRow {
2331
+ display: flex;
2332
+ align-items: flex-start;
2333
+ gap: 8px;
2334
+ min-width: 0;
2335
+ }
2336
+
2337
+ .lightboxCaption {
2338
+ flex: 1;
2339
+ min-width: 0;
2340
+ font-size: 12px;
2341
+ line-height: 1.6;
2342
+ color: rgba(255, 255, 255, 0.9);
2343
+ display: -webkit-box;
2344
+ -webkit-line-clamp: 3;
2345
+ -webkit-box-orient: vertical;
2346
+ overflow: hidden;
2347
+ }
2348
+
2349
+ .lightboxCopy {
2350
+ flex: none;
2351
+ gap: 5px;
2352
+ min-height: 28px;
2353
+ padding: 4px 9px;
2354
+ border-radius: 999px;
2355
+ font: inherit;
2356
+ font-size: 12px;
2357
+ white-space: nowrap;
2358
+ }
2359
+
2360
+ .lightboxMeta {
2361
+ display: flex;
2362
+ align-items: center;
2363
+ justify-content: space-between;
2364
+ gap: 12px;
2365
+ }
2366
+
2367
+ .lightboxIndex {
2368
+ font-size: 12px;
2369
+ color: rgba(255, 255, 255, 0.8);
2370
+ font-variant-numeric: tabular-nums;
2371
+ }
2372
+
2373
+ .lightboxActions {
2374
+ display: inline-flex;
2375
+ align-items: center;
2376
+ gap: 8px;
2377
+ }
2378
+
2379
+ .lightboxDownload,
2380
+ .lightboxEdit {
2381
+ padding: 4px 14px;
2382
+ font: inherit;
2383
+ font-size: 12.5px;
2384
+ font-weight: 500;
2385
+ color: #fff;
2386
+ background: rgba(255, 255, 255, 0.14);
2387
+ border: 1px solid rgba(255, 255, 255, 0.28);
2388
+ border-radius: 999px;
2389
+ text-decoration: none;
2390
+ cursor: pointer;
2391
+ }
2392
+
2393
+ .lightboxDownload:hover,
2394
+ .lightboxEdit:hover {
2395
+ background: rgba(255, 255, 255, 0.26);
2396
+ }
2397
+
2398
+ .lightboxEdit {
2399
+ color: #fff;
2400
+ background: rgba(255, 255, 255, 0.14);
2401
+ border: 1px solid rgba(255, 255, 255, 0.28);
2402
+ border-radius: 999px;
2403
+ }
2404
+
2405
+ @media (max-width: 720px) {
2406
+ .lightbox {
2407
+ padding: 16px;
2408
+ }
2409
+
2410
+ .lightboxFigure {
2411
+ width: calc(100vw - 32px);
2412
+ max-width: none;
2413
+ }
2414
+
2415
+ .lightboxNav[data-dir='prev'] {
2416
+ left: 20px;
2417
+ }
2418
+
2419
+ .lightboxNav[data-dir='next'] {
2420
+ right: 20px;
2421
+ }
2422
+
2423
+ .lightboxCaptionRow,
2424
+ .lightboxMeta {
2425
+ align-items: stretch;
2426
+ flex-direction: column;
2427
+ }
2428
+
2429
+ .lightboxCopy,
2430
+ .lightboxActions {
2431
+ align-self: flex-end;
2432
+ }
2433
+ }
2434
+
2435
+ @keyframes dshImageGenSpin {
2436
+ to { transform: rotate(360deg); }
2437
+ }
2438
+
2439
+ /* Transient "added to gallery" toast, centered above the canvas bottom. */
2440
+ .galleryToast {
2441
+ position: absolute;
2442
+ left: 50%;
2443
+ bottom: 24px;
2444
+ transform: translateX(-50%);
2445
+ z-index: 30;
2446
+ display: inline-flex;
2447
+ align-items: center;
2448
+ gap: 7px;
2449
+ padding: 6px 16px;
2450
+ font-size: 13px;
2451
+ font-weight: 500;
2452
+ color: var(--dsw-alias-label-primary);
2453
+ background: var(--dsw-alias-bg-mask-1);
2454
+ border: 1px solid var(--dsw-alias-border-l2);
2455
+ border-radius: 999px;
2456
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
2457
+ backdrop-filter: blur(6px);
2458
+ pointer-events: none;
2459
+ animation: dshImageGenToastIn 160ms ease-out;
2460
+ }
2461
+
2462
+ @keyframes dshImageGenToastIn {
2463
+ from { opacity: 0; transform: translate(-50%, 6px); }
2464
+ to { opacity: 1; transform: translate(-50%, 0); }
2465
+ }
2466
+
2467
+ .conversationToast {
2468
+ position: absolute;
2469
+ left: 50%;
2470
+ bottom: 24px;
2471
+ z-index: 30;
2472
+ display: inline-flex;
2473
+ align-items: center;
2474
+ gap: 7px;
2475
+ max-width: calc(100% - 32px);
2476
+ padding: 6px 16px;
2477
+ border: 1px solid var(--dsw-alias-border-l2);
2478
+ border-radius: 999px;
2479
+ color: var(--dsw-alias-label-primary);
2480
+ background: var(--dsw-alias-bg-mask-1);
2481
+ box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
2482
+ font-size: 13px;
2483
+ font-weight: 500;
2484
+ pointer-events: none;
2485
+ transform: translateX(-50%);
2486
+ animation: dshImageGenToastIn 160ms ease-out;
2487
+ backdrop-filter: blur(6px);
2488
+ }
2489
+
2490
+ @media (prefers-reduced-motion: reduce) {
2491
+ .download, .spinner, .bigSpinner {
2492
+ transition: none;
2493
+ animation-duration: 1.5s;
2494
+ }
2495
+ }
2496
+
2497
+ /* --- gallery workspace -------------------------------------------------------- */
2498
+ .config[data-gallery='true'] .configScroll > *:not(:first-child),
2499
+ .config[data-gallery='true'] .footer,
2500
+ .canvas[data-gallery='true'] > .canvasState,
2501
+ .canvas[data-gallery='true'] > .canvasError,
2502
+ .canvas[data-gallery='true'] > .canvasBody,
2503
+ .studio:has(.config[data-gallery='true']) > .history { display: none; }
2504
+ .config[data-gallery='true'] .configScroll { display: flex; flex: none; overflow: visible; order: 1; }
2505
+ .config[data-gallery='true'] .galleryFilters { order: 2; flex: 1; min-height: 0; }
2506
+ .galleryFilters { padding: 18px 14px; overflow-y: auto; overflow-x: hidden; }
2507
+ .galleryFilterHeading { margin: 0 4px 10px; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 600; }
2508
+ .galleryFilter { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; text-align: left; }
2509
+ .galleryFilter:hover, .galleryFilter[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
2510
+ .galleryFilterCount { min-width: 20px; padding: 1px 6px; border-radius: 999px; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); font-size: 11px; text-align: center; }
2511
+ .galleryFilterDivider { height: 1px; margin: 18px 4px; background: var(--dsw-alias-border-l1); }
2512
+ .galleryRatioList { display: flex; flex-wrap: wrap; gap: 6px; }
2513
+ .galleryRatio { padding: 6px 10px; border: 0; border-radius: 999px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font-size: 12px; }
2514
+ .galleryRatio[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 13%, transparent); }
2515
+ .galleryTagFilterList { display: flex; flex-wrap: wrap; gap: 6px; }
2516
+ .galleryTagFilter { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; min-height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 6px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
2517
+ .galleryTagFilter span:first-child { overflow: hidden; max-width: 112px; text-overflow: ellipsis; white-space: nowrap; }
2518
+ .galleryTagFilter span:last-child { color: var(--dsw-alias-label-tertiary); font-size: 10px; }
2519
+ .galleryTagFilter:hover, .galleryTagFilter[data-active] { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); }
2520
+ .galleryFilterNote { margin: 20px 4px 0; color: var(--dsw-alias-label-quaternary); font-size: 11px; line-height: 1.5; }
2521
+ .galleryWorkspace { position: absolute; inset: 0; display: flex; width: 100%; height: 100%; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; padding: 22px 24px 26px; box-sizing: border-box; }
2522
+ .galleryToolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none; min-width: 0; margin-bottom: 18px; }
2523
+ .galleryHeading { display: inline; margin: 0; color: var(--dsw-alias-label-primary); font-size: 20px; font-weight: 700; }
2524
+ .galleryCount { margin-left: 8px; color: var(--dsw-alias-label-tertiary); font-size: 13px; }
2525
+ .galleryToolbarActions { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
2526
+ .gallerySelectMode, .galleryBulkButton, .gallerySelectionClear { min-height: 30px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 7px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 12px; }
2527
+ .gallerySelectMode:hover, .gallerySelectMode[data-active], .galleryBulkButton:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 38%, var(--dsw-alias-border-l1)); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 11%, transparent); }
2528
+ .galleryBulkButton:disabled { cursor: not-allowed; opacity: .45; }
2529
+ .gallerySelectionBar { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; margin: -4px 0 16px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--dsw-alias-brand-primary) 35%, var(--dsw-alias-border-l1)); border-radius: 9px; background: color-mix(in srgb, var(--dsw-alias-brand-primary) 7%, var(--dsw-alias-bg-layer-1)); }
2530
+ .gallerySelectionBar strong { flex: none; color: var(--dsw-alias-brand-primary); font-size: 12px; }
2531
+ .gallerySelectionClear { margin-left: auto; }
2532
+ .gallerySelectionClear:hover { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); }
2533
+ .galleryTagInput, .gallerySearch { min-width: 0; height: 30px; padding: 0 10px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 7px; outline: none; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-1); font: inherit; font-size: 12px; }
2534
+ .galleryTagInput { flex: 1 1 190px; }
2535
+ .galleryTagInput:focus, .gallerySearch:focus { border-color: var(--dsw-alias-brand-primary); }
2536
+ .galleryViewToggle { display: flex; padding: 3px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 9px; background: var(--dsw-alias-bg-layer-1); }
2537
+ .galleryViewToggle button, .gallerySort, .galleryClear { min-height: 30px; padding: 0 10px; border: 0; border-radius: 7px; color: var(--dsw-alias-label-secondary); background: transparent; cursor: pointer; font: inherit; font-size: 12px; }
2538
+ .galleryViewToggle button[data-active], .galleryViewToggle button:hover, .gallerySort:hover, .galleryClear:hover { color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 11%, transparent); }
2539
+ .gallerySort { border: 1px solid var(--dsw-alias-border-l1); background: var(--dsw-alias-bg-layer-1); }
2540
+ .galleryClear { border: 1px solid var(--dsw-alias-border-l1); }
2541
+ .compareControl { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
2542
+ .compareToggle, .compareModelChoices label { display: flex; align-items: center; gap: 6px; color: var(--dsw-alias-label-secondary); font-size: 12px; cursor: pointer; }
2543
+ .compareToggle input, .compareModelChoices input { accent-color: var(--dsw-alias-brand-primary); }
2544
+ .compareModelChoices { display: flex; flex-wrap: wrap; gap: 6px; }
2545
+ .compareModelChoices label { padding: 4px 6px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 5px; font-size: 10px; }
2546
+ .comparisonBoard { position: absolute; z-index: 4; top: 14px; right: 14px; bottom: 14px; left: 14px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); }
2547
+ .comparisonBoard > header { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--dsw-alias-border-l1); }
2548
+ .comparisonBoard > header div { display: flex; align-items: baseline; gap: 7px; }
2549
+ .comparisonBoard > header strong { color: var(--dsw-alias-label-primary); font-size: 13px; }
2550
+ .comparisonBoard > header span { color: var(--dsw-alias-label-tertiary); font-size: 11px; }
2551
+ .comparisonBoard > header button { min-height: 28px; padding: 0 9px; border: 1px solid var(--dsw-alias-border-l1); border-radius: 5px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 11px; }
2552
+ .comparisonGrid { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 12px; overflow: auto; padding: 12px; }
2553
+ .comparisonGrid article { display: flex; height: 100%; min-width: 0; min-height: 0; flex-direction: column; gap: 7px; }
2554
+ .comparisonGrid article > strong { color: var(--dsw-alias-label-primary); font-size: 12px; }
2555
+ .comparisonImageButton { display: flex; width: 100%; min-height: 0; flex: 1; padding: 0; overflow: hidden; border: 0; cursor: zoom-in; background: var(--dsw-alias-bg-base); }
2556
+ .comparisonImageButton:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: -2px; }
2557
+ .comparisonGrid article > span { display: grid; flex: 1; min-height: 0; place-items: center; color: var(--dsw-alias-label-tertiary); background: var(--dsw-alias-bg-layer-2); font-size: 12px; }
2558
+ .comparisonGrid img { display: block; width: 100%; height: 100%; min-height: 0; max-height: none; flex: 1; object-fit: contain; background: var(--dsw-alias-bg-base); }
2559
+ .comparisonFullscreen { position: fixed; z-index: 1200; inset: 0; overflow: auto; padding: 54px 24px 24px; background: rgb(0 0 0 / 92%); }
2560
+ .comparisonFullscreenGrid { display: grid; min-height: 100%; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; gap: 18px; }
2561
+ .comparisonFullscreen figure { min-width: 0; margin: 0; }
2562
+ .comparisonFullscreen figcaption { margin-bottom: 8px; color: #fff; font-size: 13px; font-weight: 600; }
2563
+ .comparisonFullscreen img { display: block; width: 100%; margin-bottom: 10px; background: #111; }
2564
+ .historyItem[data-comparison] { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary) 55%, var(--dsw-alias-border-l1)); }
2565
+ .galleryMasonry { display: grid; flex: 1 1 auto; width: 100%; height: 0; max-width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 16px; overflow-y: scroll; overflow-x: hidden; overscroll-behavior: contain; padding: 2px 8px 16px 2px; scrollbar-width: thin; scrollbar-color: var(--dsw-alias-border-l2) transparent; }
2566
+ .galleryMasonry::-webkit-scrollbar { width: 8px; }
2567
+ .galleryMasonry::-webkit-scrollbar-thumb { background: var(--dsw-alias-border-l2); border-radius: 999px; }
2568
+ .galleryCard { position: relative; display: block; width: 100%; margin: 0; overflow: hidden; border: 1px solid var(--dsw-alias-border-l1); border-radius: 14px; background: var(--dsw-alias-bg-layer-1); box-shadow: 0 5px 18px rgb(24 32 54 / 7%); }
2569
+ .galleryCard[data-selected] { border-color: var(--dsw-alias-brand-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dsw-alias-brand-primary) 26%, transparent), 0 5px 18px rgb(24 32 54 / 7%); }
2570
+ .gallerySelect { position: absolute; z-index: 2; top: 9px; right: 9px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgb(255 255 255 / 75%); border-radius: 7px; background: rgb(0 0 0 / 58%); cursor: pointer; }
2571
+ .gallerySelect input { width: 16px; height: 16px; margin: 0; accent-color: var(--dsw-alias-brand-primary); cursor: pointer; }
2572
+ .galleryImageButton { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--dsw-alias-bg-base); cursor: zoom-in; }
2573
+ .galleryImageButton[data-selecting] { cursor: pointer; }
2574
+ .galleryImage { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
2575
+ .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 1) .galleryImage { aspect-ratio: 4 / 5; }
2576
+ .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 2) .galleryImage { aspect-ratio: 4 / 3; }
2577
+ .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n) .galleryImage { aspect-ratio: 3 / 4; }
2578
+ .galleryBadge { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; color: #fff; background: rgb(18 23 36 / 76%); font-size: 11px; backdrop-filter: blur(4px); }
2579
+ .galleryCardActions { display: flex; padding: 8px 12px 0; }
2580
+ .galleryCardAction { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; gap: 4px; min-height: 28px; padding: 0 4px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-2); cursor: pointer; font: inherit; font-size: 10px; font-weight: 500; white-space: nowrap; }
2581
+ .galleryCardAction:hover, .galleryCardAction:focus-visible { border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); outline: none; }
2582
+ .galleryCardAction:disabled { cursor: wait; opacity: .55; }
2583
+ .galleryCardFooter { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; }
2584
+ .galleryAvatar { display: grid; flex: none; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: #fff; background: var(--dsw-alias-brand-primary); font-size: 12px; font-weight: 700; }
2585
+ .galleryCardInfo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
2586
+ .galleryCardInfo strong, .galleryCardInfo small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2587
+ .galleryCardInfo strong { color: var(--dsw-alias-label-primary); font-size: 12px; }
2588
+ .galleryCardInfo small { color: var(--dsw-alias-label-tertiary); font-size: 10px; }
2589
+ .galleryTags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
2590
+ .galleryTags button { overflow: hidden; max-width: 96px; min-height: 19px; padding: 1px 6px; border: 0; border-radius: 4px; color: var(--dsw-alias-brand-primary); background: color-mix(in srgb, var(--dsw-alias-brand-primary) 10%, transparent); cursor: pointer; font: inherit; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
2591
+ .galleryTags button:hover { background: color-mix(in srgb, var(--dsw-alias-brand-primary) 17%, transparent); }
2592
+ .galleryTags .galleryTagEdit { flex: none; color: var(--dsw-alias-label-tertiary); background: transparent; }
2593
+ .galleryTagEditor { display: flex; align-items: center; gap: 6px; padding: 0 12px 10px 48px; }
2594
+ .galleryTagEditor input { min-width: 0; flex: 1; height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; outline: none; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); font: inherit; font-size: 11px; }
2595
+ .galleryTagEditor input:focus { border-color: var(--dsw-alias-brand-primary); }
2596
+ .galleryTagEditor button { height: 27px; padding: 0 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; color: var(--dsw-alias-label-secondary); background: var(--dsw-alias-bg-layer-1); cursor: pointer; font: inherit; font-size: 11px; }
2597
+ .galleryTagEditor button[type='submit'] { color: var(--dsw-alias-brand-primary); }
2598
+ .galleryRemove { flex: none; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; color: var(--dsw-alias-label-tertiary); background: transparent; cursor: pointer; font-size: 18px; }
2599
+ .galleryRemove:hover { color: var(--dsw-alias-state-error); background: var(--dsw-alias-bg-layer-2); }
2600
+
2601
+ @media (max-width: 1100px) {
2602
+ .galleryMasonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
2603
+ }
2604
+
2605
+ @media (max-width: 760px) {
2606
+ .studio {
2607
+ grid-template-columns: minmax(0, 1fr);
2608
+ grid-template-rows: minmax(220px, 36%) minmax(0, 1fr);
2609
+ overflow-y: auto;
2610
+ }
2611
+ .history { grid-column: 1; grid-row: 1; min-height: 220px; }
2612
+ .generation { grid-column: 1; grid-row: 2; flex-direction: column; min-height: 0; }
2613
+ .config { width: auto; max-width: none; height: auto; min-height: 0; }
2614
+ .config[data-gallery='true'] { flex: none; }
2615
+ .canvas { min-height: 560px; }
2616
+ .galleryToolbar { align-items: flex-start; flex-direction: column; }
2617
+ .galleryToolbarActions { width: 100%; flex-wrap: wrap; }
2618
+ .galleryMasonry { grid-template-columns: 1fr; }
2619
+ }