@dickpy/dsh-imagegen 1.4.0 → 1.5.0

package/src/client/panel.module.css

@@ -15,140 +15,140 @@
    both shells: the legacy `[data-pane="conversation"]` and the rc.6+
    AppFrame class-based column ([class*="centerCol"]) — without a positioned
    ancestor the absolutely-positioned view resolves against the frame. */
-[data-pane='conversation'],
-[class*='centerCol'] {
-  position: relative;
-  min-width: 0;
-  min-height: 0;
-}
+[data-pane='conversation'],
+[class*='centerCol'] {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+}
 
 /* The panel container rides inside the conversation grid item as an extra
    trailing child; hidden unless the panel is active. */
-[data-dsh-imagegen-view] {
-  position: relative;
-  grid-column: 1;
-  grid-row: 1;
-  display: none;
-  z-index: 60;
-  min-width: 0;
-  min-height: 0;
-  background: var(--dsw-alias-bg-base);
-}
+[data-dsh-imagegen-view] {
+  position: relative;
+  grid-column: 1;
+  grid-row: 1;
+  display: none;
+  z-index: 60;
+  min-width: 0;
+  min-height: 0;
+  background: var(--dsw-alias-bg-base);
+}
 
 /* The center column is single-occupant; the :not() guards keep the sibling
    panels (task board / ssh) from fighting over visibility if both activation
    attributes ever coexist. */
-html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
-html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
-  display: grid !important;
-  grid-template-columns: minmax(0, 1fr) 8px minmax(320px, clamp(320px, var(--dsh-imagegen-chat-width, 36%), 70%));
-  grid-template-rows: minmax(0, 1fr);
-  gap: 1px;
-  overflow: hidden;
-  background: var(--dsw-alias-border-l1);
-}
-
-html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-view] {
-  display: block;
-}
-
-html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
-  grid-column: 3;
-  grid-row: 1;
-  align-items: stretch;
-  display: flex !important;
-  width: auto;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  background: var(--dsw-alias-bg-base);
-}
-
-/* DSH's native conversation root is a flex item with an intrinsic width.
-   Stretch that direct child to the complete chat column so its hero composer
-   can center itself inside the resized pane instead of leaving a blank rail
-   on the right. */
-html[data-dsh-imagegen-active] [data-slot='conversation'] > [data-phase] {
-  align-self: stretch;
-  flex: 1 1 auto;
-  width: 100%;
-  max-width: none;
-  min-width: 0;
-}
-
-html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-chat-resizer] {
-  grid-column: 2;
-  grid-row: 1;
-}
-
-.chatResizer {
-  position: relative;
-  z-index: 70;
-  display: none;
-  width: 8px;
-  min-width: 8px;
-  align-items: center;
-  justify-content: center;
-  color: var(--dsw-alias-label-tertiary);
-  background: var(--dsw-alias-border-l1);
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.chatResizer::before {
-  width: 3px;
-  height: 36px;
-  border-radius: 3px;
-  background: currentColor;
-  content: '';
-  opacity: .55;
-}
-
-.chatResizer:hover,
-.chatResizer:focus-visible {
-  color: var(--dsw-alias-brand-primary);
-  outline: none;
-  background: var(--dsw-alias-bg-layer-2);
-}
-
-/* Keep the handle above shell defaults: some skins set display:none on
-   unrecognised children of the conversation frame. */
-html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
-  display: flex !important;
-}
-
-/* Hide only unrelated center-column plugin children. */
-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]),
-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]) {
-  display: none !important;
-}
-
-/* The shell can have any number of plugin entries between the New Session
-   tabs and its workspace region. Hide the whole middle run while image
-   generation owns the frame, without relying on a plugin allow-list. */
-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']) {
-  display: none !important;
-}
-
-@media (max-width: 760px) {
-  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
-  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr) minmax(340px, 0.9fr);
-    overflow-y: auto;
-  }
-
-  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
-  html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
-    display: none !important;
-  }
-}
-
-/* --- sidebar entry row ------------------------------------------------------- */
+html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
+html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
+  display: grid !important;
+  grid-template-columns: minmax(0, 1fr) 8px minmax(320px, clamp(320px, var(--dsh-imagegen-chat-width, 36%), 70%));
+  grid-template-rows: minmax(0, 1fr);
+  gap: 1px;
+  overflow: hidden;
+  background: var(--dsw-alias-border-l1);
+}
+
+html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-view] {
+  display: block;
+}
+
+html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
+  grid-column: 3;
+  grid-row: 1;
+  align-items: stretch;
+  display: flex !important;
+  width: auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base);
+}
+
+/* DSH's native conversation root is a flex item with an intrinsic width.
+   Stretch that direct child to the complete chat column so its hero composer
+   can center itself inside the resized pane instead of leaving a blank rail
+   on the right. */
+html[data-dsh-imagegen-active] [data-slot='conversation'] > [data-phase] {
+  align-self: stretch;
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: none;
+  min-width: 0;
+}
+
+html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-dsh-imagegen-chat-resizer] {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.chatResizer {
+  position: relative;
+  z-index: 70;
+  display: none;
+  width: 8px;
+  min-width: 8px;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsw-alias-label-tertiary);
+  background: var(--dsw-alias-border-l1);
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.chatResizer::before {
+  width: 3px;
+  height: 36px;
+  border-radius: 3px;
+  background: currentColor;
+  content: '';
+  opacity: .55;
+}
+
+.chatResizer:hover,
+.chatResizer:focus-visible {
+  color: var(--dsw-alias-brand-primary);
+  outline: none;
+  background: var(--dsw-alias-bg-layer-2);
+}
+
+/* Keep the handle above shell defaults: some skins set display:none on
+   unrecognised children of the conversation frame. */
+html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
+  display: flex !important;
+}
+
+/* Hide only unrelated center-column plugin children. */
+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]),
+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]) {
+  display: none !important;
+}
+
+/* The shell can have any number of plugin entries between the New Session
+   tabs and its workspace region. Hide the whole middle run while image
+   generation owns the frame, without relying on a plugin allow-list. */
+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']) {
+  display: none !important;
+}
+
+@media (max-width: 760px) {
+  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
+  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr) minmax(340px, 0.9fr);
+    overflow-y: auto;
+  }
+
+  html[data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  html[data-dsh-imagegen-active] [data-dsh-imagegen-chat-resizer] {
+    display: none !important;
+  }
+}
+
+/* --- sidebar entry row ------------------------------------------------------- */
 
 .entry {
   display: flex;
@@ -184,96 +184,121 @@ html[data-dsh-imagegen-active] [data-dsh-imagegen-sidebar-root] > :not([data-dsh
   flex: none;
 }
 
-.entryLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* New Session + Image Generation tabs share the shell's top action row. */
-.sessionTabs {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 2px;
-  width: 100%;
-  min-width: 0;
-  padding: 3px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 9px;
-  background: var(--dsw-alias-bg-layer-1);
-}
-
-.sessionTab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-  height: 30px;
-  padding: 0 8px;
-  border: 0;
-  border-radius: 7px;
-  color: var(--dsw-alias-label-secondary);
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.sessionTab:hover,
-.sessionTab[data-active] {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-sidebar-nav-item-active);
-}
-
-.sessionTabIcon {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  justify-content: center;
-}
-
-.sessionTabLabel {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* The history surface occupies the shell's workspace/session region while
-   image generation is active. The shell's own tree stays mounted underneath
-   so closing the tab restores it without a React remount. */
-[class*='regionArea'] {
-  position: relative;
-  min-height: 0;
-}
-
-.sidebarHistoryHost {
-  position: absolute;
-  z-index: 30;
-  inset: 0;
-  display: none;
-  min-width: 0;
-  min-height: 0;
-  padding: 6px 4px;
-  overflow: hidden;
-  background: var(--dsw-alias-bg-base);
-}
-
-html[data-dsh-imagegen-active] .sidebarHistoryHost {
-  display: flex;
-}
-
-.sidebarHistoryHost .history {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-}
-
-[data-dsh-frame][data-sidebar-collapsed] .sidebarHistoryHost {
-  display: none;
-}
+.entryLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* New Session + Image Generation tabs share the shell's top action row. */
+.sessionTabs {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 2px;
+  width: 100%;
+  min-width: 0;
+  padding: 3px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 9px;
+  background: var(--dsw-alias-bg-layer-1);
+}
+
+.sessionTab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  height: 30px;
+  padding: 0 8px;
+  border: 0;
+  border-radius: 7px;
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+/* Collapsed sidebar rail: the injected tabs become plain stacked icon
+ * buttons that match the shell's native rail entries. */
+[data-sidebar-collapsed] .sessionTabs {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: auto;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+[data-sidebar-collapsed] .sessionTab {
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 9px;
+  font-size: 0;
+}
+
+[data-sidebar-collapsed] .sessionTabLabel {
+  display: none;
+}
+
+.sessionTab:hover,
+.sessionTab[data-active] {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-specific-sidebar-nav-item-active);
+}
+
+.sessionTabIcon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+}
+
+.sessionTabLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The history surface occupies the shell's workspace/session region while
+   image generation is active. The shell's own tree stays mounted underneath
+   so closing the tab restores it without a React remount. */
+[class*='regionArea'] {
+  position: relative;
+  min-height: 0;
+}
+
+.sidebarHistoryHost {
+  position: absolute;
+  z-index: 30;
+  inset: 0;
+  display: none;
+  min-width: 0;
+  min-height: 0;
+  padding: 6px 4px;
+  overflow: hidden;
+  background: var(--dsw-alias-bg-base);
+}
+
+html[data-dsh-imagegen-active] .sidebarHistoryHost {
+  display: flex;
+}
+
+.sidebarHistoryHost .history {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+}
+
+[data-dsh-frame][data-sidebar-collapsed] .sidebarHistoryHost {
+  display: none;
+}
 
 /* Collapsed rail: icon-only, centered, matching the shell's 56px rail. */
 [data-dsh-frame][data-sidebar-collapsed] .entry {
@@ -288,12 +313,12 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 
 /* --- panel frame -------------------------------------------------------------- */
 
-.view {
-  width: 100%;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-}
+.view {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
 
 /* The shell does not ship a global `box-sizing: border-box` reset, so scope
    one to the panel subtree: without it, `height: 100%` + padding grows past
@@ -321,6 +346,7 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 }
 
 .panelHeader {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -453,36 +479,80 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   }
 }
 
-/* --- studio split: left history + middle generation workspace ----------------- */
-
-.studio {
-  display: flex;
-  min-width: 0;
-  min-height: 0;
-  flex: 1;
-}
-
-.generation {
-  display: flex;
-  width: 100%;
-  gap: 14px;
-  min-width: 0;
-  min-height: 0;
-}
+/* --- studio split: left history + middle generation workspace ----------------- */
+
+.studio {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex: 1;
+}
+
+.generation {
+  display: flex;
+  width: 100%;
+  gap: 14px;
+  min-width: 0;
+  min-height: 0;
+}
 
 .config {
   display: flex;
   flex-direction: column;
   gap: 12px;
   flex: none;
-  width: min(300px, 42%);
-  min-width: 220px;
-  max-width: 300px;
+  position: relative;
+  width: clamp(240px, var(--dsh-imagegen-config-width, 300px), 480px);
+  min-width: 240px;
+  max-width: 480px;
   height: 100%;
   min-height: 0;
   overflow: hidden;
 }
 
+.configHeader {
+  display: flex;
+  justify-content: flex-end;
+  flex: none;
+  min-height: 28px;
+}
+
+.configToggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  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;
+}
+
+.configToggle:hover,
+.configToggle:focus-visible {
+  border-color: var(--dsw-alias-brand-primary);
+  color: var(--dsw-alias-brand-primary);
+  outline: none;
+}
+
+.config[data-collapsed='true'] {
+  width: 38px;
+  min-width: 38px;
+  max-width: 38px;
+  gap: 0;
+}
+
+.config[data-collapsed='true'] .configHeader {
+  justify-content: center;
+}
+
+.config[data-collapsed='true'] > :not(.configHeader) {
+  display: none;
+}
+
 /* The cards scroll in their own scrollport; the footer stays a fixed sibling
    below, so nothing ever hides underneath it (text and edit modes alike). */
 .configScroll {
@@ -562,14 +632,14 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 .configGuideBody span { color: var(--dsw-alias-label-secondary); font-size: 13px; line-height: 1.55; }
 .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; }
 
-/* --- history surface (rendered into the shell sidebar) ----------------------- */
-
-.history {
-  display: flex;
-  flex-direction: column;
-  width: auto;
-  min-width: 0;
-  max-width: none;
+/* --- history surface (rendered into the shell sidebar) ----------------------- */
+
+.history {
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  min-width: 0;
+  max-width: none;
   min-height: 0;
   border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 12px;
@@ -587,6 +657,13 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   flex: none;
 }
 
+.historyHeaderActions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+}
+
 .historyFilters {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -623,172 +700,851 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   color: var(--dsw-alias-label-primary);
 }
 
-.historyClear {
-  padding: 2px 8px;
-  font: inherit;
-  font-size: 11.5px;
-  color: var(--dsw-alias-label-tertiary);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 999px;
+.historyNew {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  cursor: pointer;
+}
+
+.historyNew:hover {
+  color: var(--dsw-alias-brand-primary);
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.historyClear {
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-tertiary);
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.historyClear:hover {
+  color: var(--dsw-alias-label-error);
+  border-color: var(--dsw-alias-label-error);
+}
+
+.historyList {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dsw-alias-border-l2) transparent;
+}
+
+.historyList::-webkit-scrollbar {
+  width: 8px;
+}
+
+.historyList::-webkit-scrollbar-thumb {
+  background: var(--dsw-alias-border-l2);
+  border-radius: 999px;
+}
+
+.historyEmpty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  font-size: 12px;
+  line-height: 1.6;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.historyItem {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-2);
+  flex: none;
+}
+
+.historyItem:hover {
+  border-color: var(--dsw-alias-border-l2);
+}
+
+.historyItem[data-active] {
+  border-color: var(--dsw-alias-brand-primary);
+}
+
+.historyMain {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  padding: 0;
+  background: transparent;
+  border: none;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.historyThumb {
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  object-fit: cover;
+  background: var(--dsw-alias-bg-base);
+  flex: none;
+}
+
+.historyThumbPlaceholder {
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+  flex: none;
+}
+
+.historyInfo {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.historyPrompt {
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.historyMeta {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.historyActions {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.historyAction {
+  padding: 2px 8px;
+  font: inherit;
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.historyAction:hover {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.historyAction[data-danger]:hover {
+  color: var(--dsw-alias-label-error);
+  border-color: var(--dsw-alias-label-error);
+}
+
+/* --- cards (system-aligned rounded group chrome) ------------------------------ */
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 12px;
+  flex: none;
+}
+
+.ecommerceWorkspace {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 6px 2px 12px;
+}
+
+/* Flat sections in the CapyAI style: plain headings, no card boxes. */
+.ecommerceSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+.ecommerceSection h3 {
+  margin: 0;
+  font-size: 13.5px;
+  font-weight: 600;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.ecommerceSectionHint {
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.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; }
+.ecommerceSection textarea { min-height: 60px; resize: vertical; }
+
+.ecommerceField {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.ecommerceFieldLabel {
+  font-size: 11.5px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.ecommerceParamGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 8px;
+}
+
+.ecommerceUploadHero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-height: 78px;
+  padding: 12px;
+  border: 1.5px dashed var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+}
+
+.ecommerceUploadHero:hover {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.ecommerceUploadHero span {
+  font-size: 12px;
+}
+
+.ecommerceUploadHero small {
+  font-size: 10.5px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.ecommerceStructureGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.ecommerceSlotCard {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 34px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.ecommerceSlotCard:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.ecommerceSlotCard[data-active] {
+  background: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-base);
+  font-weight: 600;
+}
+
+.ecommerceSlotCount {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--dsw-alias-brand-primary);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+}
+
+.ecommerceRefRow {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  align-items: center;
+  gap: 8px;
+}
+
+.ecommerceRefRow > span {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.ecommercePrimaryAction {
+  width: 100%;
+  height: 38px;
+  border-radius: 999px;
+  font-size: 13.5px;
+}
+
+.previewBadge {
+  margin-left: 5px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: var(--dsw-alias-brand-primary);
+  color: #fff;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 13px;
+  letter-spacing: 0.02em;
+}
+
+.ecommercePlanNote {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+
+.ecommercePlanWarn {
+  padding: 6px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+
+.ecommerceAssets {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.ecommerceAsset {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  padding: 4px;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.ecommerceAsset img {
+  width: 100%;
+  height: 44px;
+  object-fit: cover;
+  border-radius: 5px;
+}
+
+.ecommerceAsset select {
+  width: 100%;
+  min-width: 0;
+  padding: 2px;
+  font-size: 10px;
+}
+
+.ecommerceAsset button {
+  position: absolute;
+  top: 7px;
+  right: 7px;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 15px;
+  text-align: center;
+}
+
+.ecommerceAsset button:hover {
+  background: rgba(0, 0, 0, 0.8);
+}
+
+.ecommerceAssetAdd {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  min-height: 78px;
+  border: 1.5px dashed var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+}
+
+.ecommerceAssetAdd:hover {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.ecommerceAssetAdd span {
+  font-size: 16px;
+  line-height: 1;
+}
+
+.ecommerceAssetAdd small {
+  font-size: 10px;
+}
+
+.ecommerceAdvancedToggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12.5px;
+}
+
+.ecommerceAdvancedToggle:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.ecommerceAdvancedChevron {
+  font-size: 11px;
+}
+
+.ecommerceAdvancedBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.ecommerceFooterBody {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.ecommercePlanMini {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--dsw-alias-brand-primary);
+  border-radius: 10px;
+}
+
+.ecommercePlanMini > strong {
+  font-size: 12.5px;
+}
+
+.ecommercePlanList {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  max-height: 116px;
+  overflow-y: auto;
+}
+
+.ecommercePlanList > div {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11.5px;
+}
+
+.ecommercePlanBack {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+}
+
+.ecommercePlanBack:hover {
+  color: var(--dsw-alias-label-primary);
+}
+
+.ecommerceFooterHint { color: var(--dsw-alias-label-secondary); font-size: 12px; }
+
+.ecommerceResults {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 16px 18px;
+  overflow-y: auto;
+}
+
+.ecommerceResultsHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.ecommerceResultsHeader h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.ecommerceResultsHeader > div:first-child {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+}
+
+.ecommerceResultsHeader span {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.ecommerceResultsActions {
+  display: flex;
+  gap: 8px;
+}
+
+.ecommerceResultsEmpty {
+  padding: 32px 16px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  text-align: center;
+  border: 1.5px dashed var(--dsw-alias-border-l2);
+  border-radius: 12px;
+}
+
+.ecommerceGroups {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.ecommerceGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+.ecommerceGroup > header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+}
+
+.ecommerceGroup > header strong {
+  font-size: 13px;
+}
+
+.ecommerceGroup > header span {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+}
+
+.ecommerceGroup > header button {
+  margin-left: auto;
+}
+
+.ecommerceGroupGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+}
+
+.ecommerceTaskCard {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  aspect-ratio: 1;
+  min-height: 0;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l1);
+  border-radius: 10px;
+  background: var(--dsw-alias-bg-layer-3);
+  overflow: hidden;
+}
+
+.ecommerceTaskCard[data-status="failed"],
+.ecommerceTaskCard[data-status="cancelled"] {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+}
+
+.ecommerceTaskCard .imageCard {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+}
+
+.ecommerceTaskCard .image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ecommerceResultBadge {
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: rgb(0 0 0 / 55%);
+  color: #fff;
+  font-size: 10px;
+  line-height: 16px;
+  pointer-events: none;
+}
+
+.ecommerceTaskActions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  padding: 10px 4px 5px;
+  background: linear-gradient(transparent, rgb(0 0 0 / 55%));
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+
+.ecommerceTaskCard:hover .ecommerceTaskActions {
+  opacity: 1;
+}
+
+.ecommerceActionChip {
+  border: none;
+  border-radius: 6px;
+  background: rgb(255 255 255 / 92%);
+  color: #111;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 18px;
+  padding: 0 6px;
   cursor: pointer;
+  text-decoration: none;
+  white-space: nowrap;
 }
 
-.historyClear:hover {
-  color: var(--dsw-alias-label-error);
-  border-color: var(--dsw-alias-label-error);
+.ecommerceActionChip:hover {
+  background: #fff;
 }
 
-.historyList {
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
+.ecommerceActionChip:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ecommerceTaskState {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px;
-  scrollbar-width: thin;
-  scrollbar-color: var(--dsw-alias-border-l2) transparent;
+  gap: 3px;
+  padding: 10px 8px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  text-align: center;
+  word-break: break-all;
 }
 
-.historyList::-webkit-scrollbar {
-  width: 8px;
+.ecommerceTaskState b {
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary);
 }
 
-.historyList::-webkit-scrollbar-thumb {
-  background: var(--dsw-alias-border-l2);
-  border-radius: 999px;
-}
 
-.historyEmpty {
-  flex: 1;
+
+/* --- top navigation (mode tabs live in the panel header row) -------------------- */
+
+.topNav {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
-  font-size: 12px;
-  line-height: 1.6;
-  text-align: center;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.historyItem {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 8px;
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 10px;
-  background: var(--dsw-alias-bg-layer-2);
+  gap: 2px;
   flex: none;
 }
 
-.historyItem:hover {
-  border-color: var(--dsw-alias-border-l2);
+.topNavItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 30px;
+  padding: 0 14px;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
 }
 
-.historyItem[data-active] {
-  border-color: var(--dsw-alias-brand-primary);
+.topNavItem,
+.topNavItem span {
+  white-space: nowrap;
 }
 
-.historyMain {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  padding: 0;
-  background: transparent;
-  border: none;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  min-width: 0;
+.topNavItem:hover {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.historyThumb {
-  width: 52px;
-  height: 52px;
-  border-radius: 8px;
-  object-fit: cover;
-  background: var(--dsw-alias-bg-base);
-  flex: none;
+.topNavItem[data-active] {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-base);
+  font-weight: 600;
 }
 
-.historyThumbPlaceholder {
-  width: 52px;
-  height: 52px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-3);
-  flex: none;
+.topNavDivider {
+  width: 1px;
+  height: 16px;
+  margin: 0 8px;
+  background: var(--dsw-alias-border-l2);
 }
 
-.historyInfo {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+/* chat pane toggle + collapse */
+
+.panelHeaderActions {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
 }
 
-.historyPrompt {
+.chatToggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  font: inherit;
   font-size: 12px;
-  line-height: 1.4;
+}
+
+.chatToggle:hover {
   color: var(--dsw-alias-label-primary);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
 }
 
-.historyMeta {
-  font-size: 11px;
-  color: var(--dsw-alias-label-tertiary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.chatToggle[data-open='true'] {
+  color: var(--dsw-alias-brand-primary);
+  border-color: var(--dsw-alias-brand-primary);
 }
 
-.historyActions {
-  display: flex;
-  gap: 6px;
-  justify-content: flex-end;
+/* Drop the conversation column entirely while the chat toggle is collapsed. */
+html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-pane='conversation'],
+html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [class*='centerCol'] {
+  grid-template-columns: minmax(0, 1fr);
 }
 
-.historyAction {
-  padding: 2px 8px;
-  font: inherit;
-  font-size: 11.5px;
-  color: var(--dsw-alias-label-secondary);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 999px;
-  cursor: pointer;
+/* Drop the conversation column entirely while the chat toggle is collapsed.
+   The hide rule must out-specify the base `display: flex !important`. */
+html[data-dsh-imagegen-chat-collapsed][data-dsh-imagegen-active]:not([data-dsh-taskboard-active]):not([data-dsh-ssh-active]) [data-slot='conversation'] {
+  display: none !important;
 }
 
-.historyAction:hover {
-  color: var(--dsw-alias-label-primary);
-  border-color: var(--dsw-alias-label-dimmed);
+html[data-dsh-imagegen-chat-collapsed] [data-dsh-imagegen-chat-resizer] {
+  display: none !important;
 }
 
-.historyAction[data-danger]:hover {
-  color: var(--dsw-alias-label-error);
-  border-color: var(--dsw-alias-label-error);
+/* config panel drag handle */
+
+.configResizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 6;
 }
 
-/* --- cards (system-aligned rounded group chrome) ------------------------------ */
+.configResizer:hover {
+  background: linear-gradient(90deg, transparent, var(--dsw-alias-border-l2));
+}
 
-.card {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  padding: 12px;
-  background: var(--dsw-alias-bg-layer-2);
-  border: 1px solid var(--dsw-alias-border-l1);
-  border-radius: 12px;
-  flex: none;
+.config[data-collapsed='true'] .configResizer {
+  display: none;
 }
 
-/* --- mode tabs (system Pill switcher) ------------------------------------------ */
+/* --- generation sub-modes (inside the normal workspace) ------------------------ */
 
 .modeRow {
   display: flex;
@@ -800,7 +1556,14 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   flex: 1;
   justify-content: center;
   height: 28px;
-  font-size: 13px;
+  font-size: 12.5px;
+}
+
+.modePill,
+.modePill span,
+.modePill div {
+  white-space: nowrap;
+  min-width: 0;
 }
 
 /* --- reference image upload (edit mode) ---------------------------------------- */
@@ -1258,14 +2021,15 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-mask-1);
-  border: 1px solid var(--dsw-alias-border-l2);
+  color: #fff;
+  background: rgb(15 18 24 / 82%);
+  border: 1px solid rgb(255 255 255 / 62%);
   border-radius: 999px;
   text-decoration: none;
   opacity: 0;
   transition: opacity 0.12s;
   backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
 }
 
 .imageCard:hover .download {
@@ -1273,7 +2037,13 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 }
 
 .download:hover {
-  background: var(--dsw-alias-bg-base);
+  background: rgb(15 18 24 / 94%);
+}
+
+.download:focus-visible {
+  opacity: 1;
+  outline: 2px solid #fff;
+  outline-offset: 2px;
 }
 
 /* Add-to-gallery pill (top-left, mirrors .download; shows on card hover). */
@@ -1289,14 +2059,15 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-mask-1);
-  border: 1px solid var(--dsw-alias-border-l2);
+  color: #fff;
+  background: rgb(15 18 24 / 82%);
+  border: 1px solid rgb(255 255 255 / 62%);
   border-radius: 999px;
   cursor: pointer;
   opacity: 0;
   transition: opacity 0.12s;
   backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
 }
 
 .imageCard:hover .galleryAdd {
@@ -1304,50 +2075,63 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 }
 
 .galleryAdd:hover {
-  background: var(--dsw-alias-bg-base);
+  background: rgb(15 18 24 / 94%);
+}
+
+.galleryAdd:focus-visible {
+  opacity: 1;
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.galleryAdd:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* Add-to-conversation action sits below the gallery action on hover. */
+.conversationAdd {
+  position: absolute;
+  top: 38px;
+  left: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 10px;
+  border: 1px solid rgb(255 255 255 / 62%);
+  border-radius: 999px;
+  color: #fff;
+  background: rgb(15 18 24 / 82%);
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+  opacity: 0;
+  transition: opacity 0.12s;
+  backdrop-filter: blur(4px);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
 }
 
-.galleryAdd:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-/* Add-to-conversation action sits below the gallery action on hover. */
-.conversationAdd {
-  position: absolute;
-  top: 38px;
-  left: 8px;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  padding: 2px 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 999px;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-mask-1);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  line-height: 20px;
-  font-weight: 500;
-  opacity: 0;
-  transition: opacity 0.12s;
-  backdrop-filter: blur(4px);
-}
-
-.imageCard:hover .conversationAdd,
-.conversationAdd:focus-visible {
-  opacity: 1;
-}
-
-.conversationAdd:hover {
-  background: var(--dsw-alias-bg-base);
-}
-
-.conversationAdd:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
+.imageCard:hover .conversationAdd,
+.conversationAdd:focus-visible {
+  opacity: 1;
+}
+
+.conversationAdd:hover {
+  background: rgb(15 18 24 / 94%);
+}
+
+.conversationAdd:focus-visible {
+  opacity: 1;
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.conversationAdd:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
 
 /* Hover hint for the click-to-zoom behavior. */
 .zoomHint {
@@ -1675,33 +2459,33 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   animation: dshImageGenToastIn 160ms ease-out;
 }
 
-@keyframes dshImageGenToastIn {
+@keyframes dshImageGenToastIn {
   from { opacity: 0; transform: translate(-50%, 6px); }
   to { opacity: 1; transform: translate(-50%, 0); }
-}
-
-.conversationToast {
-  position: absolute;
-  left: 50%;
-  bottom: 24px;
-  z-index: 30;
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  max-width: calc(100% - 32px);
-  padding: 6px 16px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 999px;
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-mask-1);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
-  font-size: 13px;
-  font-weight: 500;
-  pointer-events: none;
-  transform: translateX(-50%);
-  animation: dshImageGenToastIn 160ms ease-out;
-  backdrop-filter: blur(6px);
-}
+}
+
+.conversationToast {
+  position: absolute;
+  left: 50%;
+  bottom: 24px;
+  z-index: 30;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  max-width: calc(100% - 32px);
+  padding: 6px 16px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 999px;
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-mask-1);
+  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
+  font-size: 13px;
+  font-weight: 500;
+  pointer-events: none;
+  transform: translateX(-50%);
+  animation: dshImageGenToastIn 160ms ease-out;
+  backdrop-filter: blur(6px);
+}
 
 @media (prefers-reduced-motion: reduce) {
   .download, .spinner, .bigSpinner {
@@ -1792,6 +2576,10 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
 .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n + 2) .galleryImage { aspect-ratio: 4 / 3; }
 .galleryMasonry[data-view='masonry'] .galleryCard:nth-child(3n) .galleryImage { aspect-ratio: 3 / 4; }
 .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); }
+.galleryCardActions { display: flex; padding: 8px 12px 0; }
+.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; }
+.galleryCardAction:hover, .galleryCardAction:focus-visible { border-color: var(--dsw-alias-brand-primary); color: var(--dsw-alias-brand-primary); outline: none; }
+.galleryCardAction:disabled { cursor: wait; opacity: .55; }
 .galleryCardFooter { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; }
 .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; }
 .galleryCardInfo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
@@ -1814,17 +2602,17 @@ html[data-dsh-imagegen-active] .sidebarHistoryHost {
   .galleryMasonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }
 
-@media (max-width: 760px) {
-  .studio {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: minmax(220px, 36%) minmax(0, 1fr);
-    overflow-y: auto;
-  }
-  .history { grid-column: 1; grid-row: 1; min-height: 220px; }
-  .generation { grid-column: 1; grid-row: 2; flex-direction: column; min-height: 0; }
-  .config { width: auto; max-width: none; height: auto; min-height: 0; }
-  .config[data-gallery='true'] { flex: none; }
-  .canvas { min-height: 560px; }
+@media (max-width: 760px) {
+  .studio {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: minmax(220px, 36%) minmax(0, 1fr);
+    overflow-y: auto;
+  }
+  .history { grid-column: 1; grid-row: 1; min-height: 220px; }
+  .generation { grid-column: 1; grid-row: 2; flex-direction: column; min-height: 0; }
+  .config { width: auto; max-width: none; height: auto; min-height: 0; }
+  .config[data-gallery='true'] { flex: none; }
+  .canvas { min-height: 560px; }
   .galleryToolbar { align-items: flex-start; flex-direction: column; }
   .galleryToolbarActions { width: 100%; flex-wrap: wrap; }
   .galleryMasonry { grid-template-columns: 1fr; }