@sunshaobei/dsh-session-manager 0.0.0-stage → 0.4.3-fork.1

package/client.css

@@ -0,0 +1,1178 @@
+/*
+ * dsh-session-recycle-bin — plugin stylesheet (client.css)
+ *
+ * Served by the host at GET /api/session-trash/client.css and injected by
+ * client.js as a <link rel="stylesheet">. All colors are CSS custom
+ * properties (design tokens) declared on :root; the dark palette applies
+ * under `body[data-ds-dark-theme]` (the resolved DSH appearance: light /
+ * dark / system, set by the host right after <body> opens) OR under
+ * `@media (prefers-color-scheme: dark)` (OS-level fallback), while an
+ * explicit light appearance restores the light palette via
+ * `body:not([data-ds-dark-theme])` — so inside DSH the app preference is
+ * authoritative, and the OS media query remains the fallback without it.
+ *
+ * Naming: components use the `dsh-trash-` prefix; markdown blocks are styled
+ * with element selectors scoped under `.dsh-trash-md`.
+ */
+
+/* ------------------------------------------------------------------ */
+/*  Design tokens (light default; dark = app theme || OS fallback)   */
+/* ------------------------------------------------------------------ */
+
+:root {
+  /* FONT STACKS ARE RESOLVED AT THE POINT OF USE, NOT HERE.
+   *
+   * These two tokens are the last-resort fallbacks for hosts that do not
+   * publish the shell's own font tokens (older DSH builds, the standalone
+   * test harness). They are deliberately CONCRETE stacks: a custom property
+   * whose value contains var() is substituted at computed-value time on the
+   * element that DECLARES it, and that computed value is what inherits. So
+   *     :root { --dstrb-font: var(--dsw-font-family); }
+   * would freeze the :root-scoped stock stack and would NOT follow the
+   * body-level `--dsw-font-family` override that dsh-ui-font installs for the
+   * whole app — the plugin page would keep rendering in the default face.
+   * The effective font is therefore routed at the use sites (see the
+   * "Font routing" block below), where the inherited DSH tokens are visible.
+   */
+  --dstrb-font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
+  --dstrb-mono-fallback: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+
+  /* Text */
+  --dstrb-text-strong: #1a202c;
+  --dstrb-text: #2d3748;
+  --dstrb-text-secondary: #4a5568;
+  --dstrb-text-muted: #718096;
+  --dstrb-text-faint: #a0aec0;
+
+  /* Accents */
+  --dstrb-accent: #3182ce;
+  --dstrb-accent-veil: rgba(49, 130, 206, 0.15);
+  --dstrb-danger: #e53e3e;
+  --dstrb-danger-strong: #c53030;
+  --dstrb-danger-border: #feb2b2;
+  --dstrb-danger-veil: rgba(229, 62, 62, 0.08);
+  --dstrb-on-danger: #ffffff;
+
+  /* Surfaces */
+  --dstrb-surface: #ffffff;          /* cards, modals, menus            */
+  --dstrb-surface-subtle: #f7fafc;   /* inputs, badges, checked rows    */
+  --dstrb-surface-hover: #edf2f7;    /* cancel button, user bubble base */
+
+  /* Borders */
+  --dstrb-border: #e2e8f0;
+  --dstrb-border-light: #edf2f7;
+  --dstrb-border-hairline: #f0f4f8;
+
+  /* Veils & overlays */
+  --dstrb-veil: rgba(0, 0, 0, 0.06);
+  --dstrb-overlay: rgba(0, 0, 0, 0.45);
+
+  /* Shadows */
+  --dstrb-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.03);
+  --dstrb-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --dstrb-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-modal-sm: 0 10px 25px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  /* Inverted tooltip */
+  --dstrb-tooltip-bg: #1a202c;
+  --dstrb-tooltip-text: #ffffff;
+  --dstrb-tooltip-muted: #a0aec0;
+
+  /* Toast (also inverted) */
+  --dstrb-toast-bg: #2d3748;
+  --dstrb-toast-text: #ffffff;
+  --dstrb-toast-btn-bg: #4a5568;
+  --dstrb-toast-btn-text: #63b3ed;
+
+  /* Markdown */
+  --dstrb-code-inline-bg: rgba(0, 0, 0, 0.07);
+  --dstrb-code-inline-text: #c53030;
+  --dstrb-quote-bg: rgba(0, 0, 0, 0.02);
+  --dstrb-quote-border: #cbd5e0;
+  --dstrb-bubble-user: #edf2f7;
+  /* Code blocks stay dark in both modes (editor-style) */
+  --dstrb-codeblock-bg: #1e293b;
+  --dstrb-codeblock-text: #e2e8f0;
+  --dstrb-codeblock-lang: #94a3b8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --dstrb-text-strong: #edf2f7;
+    --dstrb-text: #e2e8f0;
+    --dstrb-text-secondary: #cbd5e0;
+    --dstrb-text-muted: #a0aec0;
+    --dstrb-text-faint: #718096;
+
+    --dstrb-accent: #63b3ed;
+    --dstrb-accent-veil: rgba(99, 179, 237, 0.2);
+    --dstrb-danger: #fc8181;
+    --dstrb-danger-strong: #feb2b2;
+    --dstrb-danger-border: #9b2c2c;
+    --dstrb-danger-veil: rgba(252, 129, 129, 0.12);
+    --dstrb-on-danger: #1a202c;
+
+    --dstrb-surface: #1f2530;
+    --dstrb-surface-subtle: #262e3d;
+    --dstrb-surface-hover: #2c3444;
+
+    --dstrb-border: #3a4356;
+    --dstrb-border-light: #333c4e;
+    --dstrb-border-hairline: #2c3444;
+
+    --dstrb-veil: rgba(255, 255, 255, 0.08);
+    --dstrb-overlay: rgba(0, 0, 0, 0.65);
+
+    --dstrb-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
+    --dstrb-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.5);
+    --dstrb-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.55);
+    --dstrb-shadow-modal-sm: 0 10px 25px rgba(0, 0, 0, 0.5);
+    --dstrb-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.55);
+    --dstrb-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+    --dstrb-tooltip-bg: #e2e8f0;
+    --dstrb-tooltip-text: #1a202c;
+    --dstrb-tooltip-muted: #4a5568;
+
+    --dstrb-toast-bg: #e2e8f0;
+    --dstrb-toast-text: #1a202c;
+    --dstrb-toast-btn-bg: #cbd5e0;
+    --dstrb-toast-btn-text: #1a202c;
+
+    --dstrb-code-inline-bg: rgba(255, 255, 255, 0.12);
+    --dstrb-code-inline-text: #fc8181;
+    --dstrb-quote-bg: rgba(255, 255, 255, 0.04);
+    --dstrb-quote-border: #4a5568;
+    --dstrb-bubble-user: #2c3444;
+  }
+}
+
+/* ------------------------------------------------------------------ */
+/*  DSH app theme — body[data-ds-dark-theme]                          */
+/* ------------------------------------------------------------------ */
+/*  The host app resolves its appearance preference (light / dark /    */
+/*  system) onto body[data-ds-dark-theme] as an inline script right    */
+/*  after <body> opens. This block ORs with the OS media query above:  */
+/*  either match resolves the dark palette.                            */
+/* ------------------------------------------------------------------ */
+
+body[data-ds-dark-theme] {
+  --dstrb-text-strong: #edf2f7;
+  --dstrb-text: #e2e8f0;
+  --dstrb-text-secondary: #cbd5e0;
+  --dstrb-text-muted: #a0aec0;
+  --dstrb-text-faint: #718096;
+
+  --dstrb-accent: #63b3ed;
+  --dstrb-accent-veil: rgba(99, 179, 237, 0.2);
+  --dstrb-danger: #fc8181;
+  --dstrb-danger-strong: #feb2b2;
+  --dstrb-danger-border: #9b2c2c;
+  --dstrb-danger-veil: rgba(252, 129, 129, 0.12);
+  --dstrb-on-danger: #1a202c;
+
+  --dstrb-surface: #1f2530;
+  --dstrb-surface-subtle: #262e3d;
+  --dstrb-surface-hover: #2c3444;
+
+  --dstrb-border: #3a4356;
+  --dstrb-border-light: #333c4e;
+  --dstrb-border-hairline: #2c3444;
+
+  --dstrb-veil: rgba(255, 255, 255, 0.08);
+  --dstrb-overlay: rgba(0, 0, 0, 0.65);
+
+  --dstrb-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35);
+  --dstrb-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.5);
+  --dstrb-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.55);
+  --dstrb-shadow-modal-sm: 0 10px 25px rgba(0, 0, 0, 0.5);
+  --dstrb-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.55);
+  --dstrb-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.4);
+
+  --dstrb-tooltip-bg: #e2e8f0;
+  --dstrb-tooltip-text: #1a202c;
+  --dstrb-tooltip-muted: #4a5568;
+
+  --dstrb-toast-bg: #e2e8f0;
+  --dstrb-toast-text: #1a202c;
+  --dstrb-toast-btn-bg: #cbd5e0;
+  --dstrb-toast-btn-text: #1a202c;
+
+  --dstrb-code-inline-bg: rgba(255, 255, 255, 0.12);
+  --dstrb-code-inline-text: #fc8181;
+  --dstrb-quote-bg: rgba(255, 255, 255, 0.04);
+  --dstrb-quote-border: #4a5568;
+  --dstrb-bubble-user: #2c3444;
+}
+
+/*  An explicit light preference restores the light palette even under  */
+/*  a dark OS, so the app preference stays authoritative inside DSH     */
+/*  (fixes near-white titles on a light page).                          */
+
+body:not([data-ds-dark-theme]) {
+  /* Fonts are NOT palette state: they are routed once, at the point of use,
+     in the "Font routing" block above — do not re-declare them here, or the
+     explicit-light branch would pin the plugin back to the stock stack. */
+
+  /* Text */
+  --dstrb-text-strong: #1a202c;
+  --dstrb-text: #2d3748;
+  --dstrb-text-secondary: #4a5568;
+  --dstrb-text-muted: #718096;
+  --dstrb-text-faint: #a0aec0;
+
+  /* Accents */
+  --dstrb-accent: #3182ce;
+  --dstrb-accent-veil: rgba(49, 130, 206, 0.15);
+  --dstrb-danger: #e53e3e;
+  --dstrb-danger-strong: #c53030;
+  --dstrb-danger-border: #feb2b2;
+  --dstrb-danger-veil: rgba(229, 62, 62, 0.08);
+  --dstrb-on-danger: #ffffff;
+
+  /* Surfaces */
+  --dstrb-surface: #ffffff;          /* cards, modals, menus            */
+  --dstrb-surface-subtle: #f7fafc;   /* inputs, badges, checked rows    */
+  --dstrb-surface-hover: #edf2f7;    /* cancel button, user bubble base */
+
+  /* Borders */
+  --dstrb-border: #e2e8f0;
+  --dstrb-border-light: #edf2f7;
+  --dstrb-border-hairline: #f0f4f8;
+
+  /* Veils & overlays */
+  --dstrb-veil: rgba(0, 0, 0, 0.06);
+  --dstrb-overlay: rgba(0, 0, 0, 0.45);
+
+  /* Shadows */
+  --dstrb-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.03);
+  --dstrb-shadow-menu: 0 4px 16px rgba(0, 0, 0, 0.12);
+  --dstrb-shadow-modal: 0 20px 40px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-modal-sm: 0 10px 25px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-tooltip: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --dstrb-shadow-toast: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  /* Inverted tooltip */
+  --dstrb-tooltip-bg: #1a202c;
+  --dstrb-tooltip-text: #ffffff;
+  --dstrb-tooltip-muted: #a0aec0;
+
+  /* Toast (also inverted) */
+  --dstrb-toast-bg: #2d3748;
+  --dstrb-toast-text: #ffffff;
+  --dstrb-toast-btn-bg: #4a5568;
+  --dstrb-toast-btn-text: #63b3ed;
+
+  /* Markdown */
+  --dstrb-code-inline-bg: rgba(0, 0, 0, 0.07);
+  --dstrb-code-inline-text: #c53030;
+  --dstrb-quote-bg: rgba(0, 0, 0, 0.02);
+  --dstrb-quote-border: #cbd5e0;
+  --dstrb-bubble-user: #edf2f7;
+  /* Code blocks stay dark in both modes (editor-style) */
+  --dstrb-codeblock-bg: #1e293b;
+  --dstrb-codeblock-text: #e2e8f0;
+  --dstrb-codeblock-lang: #94a3b8;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Font routing — follow the DSH shell, stay overridable              */
+/* ------------------------------------------------------------------ */
+/*
+ * The shell paints `<body>` with `font-family: var(--dsw-font-family, …)`
+ * and dsh-ui-font swaps that token at the body level to apply the user's
+ * Settings → 字体 choice (and `--ds-font-family-code` for code faces)
+ * across the whole app. Referencing those host tokens HERE — on the plugin
+ * roots, where the inherited values are already in scope — is what makes
+ * the settings page and the portaled toast track the app font, live.
+ *
+ * --dstrb-font / --dstrb-mono remain available as optional override hooks:
+ * a theme may still declare either one higher up the tree and it wins,
+ * because the fallback chain is evaluated at the use site.
+ */
+.dsh-trash-container,
+.dsh-trash-toast {
+  font-family: var(--dstrb-font, var(--dsw-font-family, var(--dstrb-font-fallback)));
+}
+
+/* ------------------------------------------------------------------ */
+/*  Page container — width follows the window ratio (no fixed px cap) */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-container {
+  width: 90%;
+  padding: 24px;
+  margin: 0 auto;
+  color: var(--dstrb-text);
+  color-scheme: light dark; /* native select/checkbox follow the resolved mode */
+}
+
+/* App-theme-scoped overrides: native controls (select, checkbox,
+   scrollbars) follow the resolved plugin mode, matching the painted
+   surfaces even when the OS media query disagrees with the DSH
+   appearance preference. */
+body[data-ds-dark-theme] .dsh-trash-container { color-scheme: dark; }
+body:not([data-ds-dark-theme]) .dsh-trash-container { color-scheme: light; }
+
+.dsh-trash-container,
+.dsh-trash-container * {
+  box-sizing: border-box;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Header                                                             */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.dsh-trash-header-left {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dsh-trash-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--dstrb-text-strong);
+  display: flex;
+  align-items: center;
+}
+
+.dsh-trash-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: var(--dstrb-text-muted);
+}
+
+/* Icons (size/margin/color moved out of JS inline styles) */
+.dsh-trash-icon-title { width: 20px; height: 20px; margin-right: 8px; color: var(--dstrb-text-secondary); flex: none; }
+.dsh-trash-icon-btn { width: 14px; height: 14px; margin-right: 6px; }
+.dsh-trash-icon-menu { width: 13px; height: 13px; margin-right: 6px; }
+.dsh-trash-icon-folder { width: 18px; height: 18px; color: var(--dstrb-text-muted); flex: none; }
+.dsh-trash-icon-badge { width: 13px; height: 13px; margin-right: 4px; color: var(--dstrb-text-muted); }
+.dsh-trash-icon-sm { width: 12px; height: 12px; margin-right: 3px; }
+
+/* ------------------------------------------------------------------ */
+/*  Search bar                                                         */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-search {
+  position: relative;
+  margin-bottom: 12px;
+  width: 100%;
+}
+
+.dsh-trash-search-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 14px;
+  color: var(--dstrb-text-faint);
+  pointer-events: none;
+}
+
+.dsh-trash-search-input {
+  width: 100%;
+  padding: 10px 14px 10px 40px;
+  border-radius: 24px;
+  border: 1px solid var(--dstrb-border);
+  background-color: var(--dstrb-surface-subtle);
+  font-size: 14px;
+  font-family: inherit;
+  color: var(--dstrb-text);
+  outline: none;
+  transition: all 0.15s ease;
+}
+
+.dsh-trash-search-input::placeholder {
+  color: var(--dstrb-text-faint);
+}
+
+.dsh-trash-search-input:focus {
+  border-color: var(--dstrb-accent);
+  box-shadow: 0 0 0 3px var(--dstrb-accent-veil);
+  background-color: var(--dstrb-surface);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Filter toolbar                                                     */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-toolbar {
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 12px;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.dsh-trash-select {
+  width: 100%;
+  height: 36px;
+  padding: 0 32px 0 14px;
+  border-radius: 18px;
+  border: 1px solid var(--dstrb-border);
+  background-color: var(--dstrb-surface);
+  font-size: 13px;
+  font-family: inherit;
+  color: var(--dstrb-text-secondary);
+  cursor: pointer;
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 14px;
+}
+
+.dsh-trash-btn-danger-outline {
+  height: 36px;
+  background-color: var(--dstrb-surface);
+  color: var(--dstrb-danger);
+  border: 1px solid var(--dstrb-danger-border);
+  padding: 0 16px;
+  border-radius: 18px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.dsh-trash-btn-danger-outline:hover {
+  background-color: var(--dstrb-danger-veil);
+}
+
+/* ------------------------------------------------------------------ */
+/*  States (loading / error / empty)                                   */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-state {
+  padding: 40px 0;
+  text-align: center;
+  color: var(--dstrb-text-faint);
+  font-size: 14px;
+}
+
+.dsh-trash-state--error {
+  color: var(--dstrb-danger);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Workspace groups                                                   */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.dsh-trash-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.dsh-trash-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 2px;
+}
+
+.dsh-trash-group-title-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  margin-right: 12px;
+}
+
+.dsh-trash-group-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--dstrb-text-strong);
+  white-space: nowrap;
+}
+
+.dsh-trash-group-path {
+  font-size: 11px;
+  color: var(--dstrb-text-faint);
+  font-family: var(--dstrb-mono, var(--ds-font-family-code, var(--dstrb-mono-fallback)));
+  margin-left: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}
+
+.dsh-trash-group-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+}
+
+.dsh-trash-group-count {
+  font-size: 12px;
+  color: var(--dstrb-text-faint);
+}
+
+.dsh-trash-more-wrap {
+  position: relative;
+}
+
+.dsh-trash-more-btn {
+  background: none;
+  border: none;
+  color: var(--dstrb-text-faint);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.dsh-trash-more-btn:hover {
+  background: var(--dstrb-veil);
+  color: var(--dstrb-text-muted);
+}
+
+.dsh-trash-menu {
+  position: absolute;
+  right: 0;
+  top: 24px;
+  background-color: var(--dstrb-surface);
+  box-shadow: var(--dstrb-shadow-menu);
+  border-radius: 8px;
+  padding: 6px 0;
+  z-index: 100;
+  min-width: 180px;
+  border: 1px solid var(--dstrb-border-light);
+}
+
+.dsh-trash-menu-item--danger {
+  width: 100%;
+  text-align: left;
+  padding: 8px 14px;
+  background-color: transparent;
+  border: none;
+  color: var(--dstrb-danger);
+  font-size: 13px;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.dsh-trash-menu-item--danger:hover {
+  background-color: var(--dstrb-danger-veil);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Session cards                                                      */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-cards {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dstrb-surface);
+  border-radius: 16px;
+  border: 1px solid var(--dstrb-border-light);
+  overflow: hidden;
+  box-shadow: var(--dstrb-shadow-card);
+}
+
+.dsh-trash-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--dstrb-border-hairline);
+  transition: background-color 0.15s ease;
+  gap: 16px;
+}
+
+.dsh-trash-card--checked {
+  background-color: var(--dstrb-surface-subtle);
+}
+
+.dsh-trash-checkbox {
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  border: 1px solid var(--dstrb-border);
+  cursor: pointer;
+  accent-color: var(--dstrb-accent);
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.dsh-trash-card-main {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 0%;
+}
+
+.dsh-trash-card-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--dstrb-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.3;
+}
+
+.dsh-trash-card-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 14px;
+  font-size: 12px;
+  color: var(--dstrb-text-muted);
+  line-height: 1;
+}
+
+.dsh-trash-card-meta-item {
+  white-space: nowrap;
+}
+
+.dsh-trash-badge {
+  background-color: var(--dstrb-surface-subtle);
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  color: var(--dstrb-text-muted);
+  border: 1px solid var(--dstrb-border-light);
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+}
+
+.dsh-trash-card-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.dsh-trash-btn-ghost {
+  background-color: var(--dstrb-surface-subtle);
+  color: var(--dstrb-text-secondary);
+  border: 1px solid var(--dstrb-border);
+  padding: 3px 9px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  white-space: nowrap;
+}
+
+.dsh-trash-btn-ghost:hover {
+  background-color: var(--dstrb-surface-hover);
+  border-color: var(--dstrb-text-faint);
+}
+
+.dsh-trash-btn-danger-text {
+  background-color: transparent;
+  color: var(--dstrb-danger);
+  border: none;
+  padding: 3px 6px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: inherit;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  white-space: nowrap;
+}
+
+.dsh-trash-btn-danger-text:hover {
+  background-color: var(--dstrb-danger-veil);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Hover tooltip (position left/top set inline by JS)                 */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-tooltip {
+  position: fixed;
+  transform: translateY(-100%);
+  background-color: var(--dstrb-tooltip-bg);
+  color: var(--dstrb-tooltip-text);
+  padding: 10px 14px;
+  border-radius: 8px;
+  box-shadow: var(--dstrb-shadow-tooltip);
+  pointer-events: none;
+  z-index: 20000;
+  max-width: 380px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.dsh-trash-tooltip-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dstrb-tooltip-text);
+  word-break: break-all;
+}
+
+.dsh-trash-tooltip-sub {
+  font-size: 11px;
+  color: var(--dstrb-tooltip-muted);
+  font-family: var(--dstrb-mono, var(--ds-font-family-code, var(--dstrb-mono-fallback)));
+  word-break: break-all;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Footer                                                             */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-footer {
+  margin-top: 24px;
+  font-size: 12px;
+  color: var(--dstrb-text-faint);
+  text-align: right;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Modals                                                             */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--dstrb-overlay);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+}
+
+.dsh-trash-preview {
+  background-color: var(--dstrb-surface);
+  border-radius: 12px;
+  width: 680px;
+  max-width: 92vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--dstrb-shadow-modal);
+  overflow: hidden;
+}
+
+.dsh-trash-preview-header {
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--dstrb-border-light);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dsh-trash-preview-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dstrb-text-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dsh-trash-close {
+  background: none;
+  border: none;
+  font-size: 18px;
+  color: var(--dstrb-text-faint);
+  cursor: pointer;
+  padding: 4px 8px;
+}
+
+.dsh-trash-close:hover {
+  color: var(--dstrb-text-muted);
+}
+
+.dsh-trash-preview-body {
+  padding: 20px 24px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-height: 70vh;
+  background-color: var(--dstrb-surface-subtle);
+}
+
+.dsh-trash-preview-state {
+  text-align: center;
+  padding: 30px;
+  color: var(--dstrb-text-faint);
+}
+
+.dsh-trash-modal {
+  background-color: var(--dstrb-surface);
+  border-radius: 12px;
+  padding: 24px;
+  width: 420px;
+  max-width: 92vw;
+  box-shadow: var(--dstrb-shadow-modal-sm);
+}
+
+.dsh-trash-modal-title {
+  margin: 0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--dstrb-text-strong);
+}
+
+.dsh-trash-modal-body {
+  margin: 0 0 20px 0;
+  font-size: 14px;
+  color: var(--dstrb-text-secondary);
+  line-height: 1.5;
+}
+
+.dsh-trash-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+.dsh-trash-btn-cancel {
+  background-color: var(--dstrb-surface-hover);
+  color: var(--dstrb-text-secondary);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.dsh-trash-btn-cancel:hover {
+  background-color: var(--dstrb-border);
+}
+
+.dsh-trash-btn-confirm {
+  background-color: var(--dstrb-danger);
+  color: var(--dstrb-on-danger);
+  border: none;
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.dsh-trash-btn-confirm:hover {
+  background-color: var(--dstrb-danger-strong);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Message bubbles (preview modal)                                    */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-message {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.dsh-trash-message-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+}
+
+.dsh-trash-message-role {
+  font-weight: 600;
+  color: var(--dstrb-text-secondary);
+}
+
+.dsh-trash-message-time {
+  color: var(--dstrb-text-faint);
+}
+
+.dsh-trash-bubble-user {
+  background-color: var(--dstrb-bubble-user);
+  color: var(--dstrb-text-strong);
+  padding: 12px 16px;
+  border-radius: 12px;
+  border-top-left-radius: 2px;
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dsh-trash-bubble-assistant {
+  background-color: var(--dstrb-surface);
+  color: var(--dstrb-text);
+  padding: 14px 18px;
+  border-radius: 12px;
+  border-top-left-radius: 2px;
+  border: 1px solid var(--dstrb-border);
+  font-size: 14px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+}
+
+/* ------------------------------------------------------------------ */
+/*  Lightweight markdown renderer                                      */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-md {
+  white-space: normal;
+  word-break: break-word;
+}
+
+.dsh-trash-md p {
+  margin: 0 0 10px 0;
+  line-height: 1.65;
+}
+
+.dsh-trash-md h1 { font-size: 20px; font-weight: 600; margin: 16px 0 8px; line-height: 1.4; color: var(--dstrb-text-strong); }
+.dsh-trash-md h2 { font-size: 18px; font-weight: 600; margin: 14px 0 8px; line-height: 1.4; color: var(--dstrb-text-strong); }
+.dsh-trash-md h3 { font-size: 16px; font-weight: 600; margin: 12px 0 6px; line-height: 1.4; color: var(--dstrb-text-strong); }
+.dsh-trash-md h4 { font-size: 15px; font-weight: 600; margin: 12px 0 6px; line-height: 1.4; color: var(--dstrb-text-strong); }
+.dsh-trash-md h5 { font-size: 14px; font-weight: 600; margin: 10px 0 4px; line-height: 1.4; color: var(--dstrb-text-strong); }
+.dsh-trash-md h6 { font-size: 13px; font-weight: 600; margin: 10px 0 4px; line-height: 1.4; color: var(--dstrb-text-strong); }
+
+.dsh-trash-md ul,
+.dsh-trash-md ol {
+  margin: 6px 0 10px;
+  padding-left: 22px;
+}
+
+.dsh-trash-md li {
+  margin: 3px 0;
+  line-height: 1.6;
+}
+
+.dsh-trash-md blockquote {
+  border-left: 3px solid var(--dstrb-quote-border);
+  margin: 8px 0;
+  padding: 4px 12px;
+  color: var(--dstrb-text-secondary);
+  background-color: var(--dstrb-quote-bg);
+}
+
+.dsh-trash-md hr {
+  border: none;
+  border-top: 1px solid var(--dstrb-border);
+  margin: 14px 0;
+}
+
+.dsh-trash-md-code-inline {
+  background-color: var(--dstrb-code-inline-bg);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-family: var(--dstrb-mono, var(--ds-font-family-code, var(--dstrb-mono-fallback)));
+  font-size: 0.9em;
+  color: var(--dstrb-code-inline-text);
+}
+
+.dsh-trash-md-codeblock {
+  background-color: var(--dstrb-codeblock-bg);
+  color: var(--dstrb-codeblock-text);
+  padding: 12px 14px;
+  border-radius: 8px;
+  overflow-x: auto;
+  margin: 10px 0;
+  font-family: var(--dstrb-mono, var(--ds-font-family-code, var(--dstrb-mono-fallback)));
+  font-size: 13px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dsh-trash-md-codeblock-content {
+  font-family: inherit;
+  font-size: inherit;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.dsh-trash-md-lang {
+  font-size: 11px;
+  color: var(--dstrb-codeblock-lang);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 6px;
+}
+
+.dsh-trash-md-link {
+  color: var(--dstrb-accent);
+  text-decoration: underline;
+}
+
+.dsh-trash-md-table-wrap {
+  overflow-x: auto;
+  margin: 10px 0;
+}
+
+.dsh-trash-md-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+}
+
+.dsh-trash-md-th {
+  border: 1px solid var(--dstrb-border);
+  padding: 6px 10px;
+  background-color: var(--dstrb-surface-subtle);
+  font-weight: 600;
+  text-align: left;
+}
+
+.dsh-trash-md-td {
+  border: 1px solid var(--dstrb-border);
+  padding: 6px 10px;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Toast layer (bottom-left; show/hide animated via inline styles)    */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  pointer-events: none;
+}
+
+.dsh-trash-toast {
+  background-color: var(--dstrb-toast-bg);
+  color: var(--dstrb-toast-text);
+  padding: 10px 18px;
+  border-radius: 6px;
+  box-shadow: var(--dstrb-shadow-toast);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+  /* font-family comes from the "Font routing" block (it is portaled to
+     <body>, outside .dsh-trash-container, so it is routed there too). */
+  pointer-events: auto;
+  transition: all 0.2s ease;
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.dsh-trash-toast-undo {
+  background-color: var(--dstrb-toast-btn-bg);
+  color: var(--dstrb-toast-btn-text);
+  border: none;
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  margin-left: 4px;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Sidebar per-row delete button (moved out of client.js)             */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-row-btn {
+  background: none;
+  border: none;
+  padding: 2px;
+  width: 20px;
+  height: 20px;
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
+  color: var(--dsw-alias-label-tertiary, var(--dstrb-text-faint));
+  margin-right: 4px;
+}
+
+/* 占位按钮：等宽隐形，保持无法解析 ID 的会话行与其它行布局一致（防止"往左靠"） */
+.dsh-trash-row-btn--spacer {
+  pointer-events: none;
+  cursor: default;
+  opacity: 0 !important;
+}
+
+.dsh-trash-row:hover .dsh-trash-row-btn:not(.dsh-trash-row-btn--spacer),
+[role="treeitem"]:hover .dsh-trash-row-btn:not(.dsh-trash-row-btn--spacer),
+.dsh-session-item:hover .dsh-trash-row-btn:not(.dsh-trash-row-btn--spacer),
+a[href*="/session/"]:hover .dsh-trash-row-btn:not(.dsh-trash-row-btn--spacer) {
+  opacity: 0.85;
+}
+
+.dsh-trash-row-btn:not(.dsh-trash-row-btn--spacer):hover {
+  opacity: 1;
+  color: var(--dstrb-danger);
+  background: var(--dstrb-veil);
+}
+
+.dsh-trash-row-btn svg {
+  display: block;
+}
+
+/* ------------------------------------------------------------------ */
+/*  Conversation-header delete action                                  */
+/* ------------------------------------------------------------------ */
+
+.dsh-trash-header-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 5px;
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  line-height: 1;
+  cursor: pointer;
+  color: var(--dsw-alias-label-tertiary, var(--dstrb-text-faint));
+  opacity: 0.85;
+  transition: color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
+}
+
+.dsh-trash-header-action:hover {
+  color: var(--dstrb-danger);
+  background: var(--dstrb-veil);
+  opacity: 1;
+}