@growthub/cli 0.12.2 → 0.13.0

package/assets/worker-kits/growthub-custom-workspace-starter-v1/apps/workspace/app/globals.css

@@ -413,7 +413,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-rail {
   display: flex;
   flex-direction: column;
-  gap: 18px;
+  gap: 8px;
   border-right: 1px solid #e8e8e8;
   padding: 18px 14px;
   /* Lock rail to viewport height so the bottom status pill never
@@ -426,6 +426,66 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   top: 0;
   overflow: hidden;
 }
+body.workspace-rail-collapsed .workspace-builder {
+  grid-template-columns: 52px minmax(0, 1fr) 320px;
+}
+body.workspace-rail-collapsed .workspace-builder.workspace-settings-page {
+  grid-template-columns: 52px minmax(0, 1fr);
+}
+.workspace-rail.is-collapsed {
+  padding: 18px 10px;
+  align-items: center;
+  gap: 10px;
+}
+.workspace-rail.is-collapsed .workspace-rail-brand-button,
+.workspace-rail.is-collapsed .workspace-rail-folders,
+.workspace-rail.is-collapsed .workspace-nav,
+.workspace-rail.is-collapsed .workspace-rail-chat,
+.workspace-rail.is-collapsed .workspace-rail-status,
+.workspace-rail.is-collapsed .workspace-rail-helper-pill {
+  display: none;
+}
+.workspace-rail.is-collapsed .workspace-rail-topbar {
+  justify-content: center;
+  width: 100%;
+}
+.workspace-rail.is-collapsed .workspace-rail-topbar-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 8px;
+}
+.workspace-rail.is-collapsed .workspace-rail-topbar-actions .workspace-rail-icon-btn {
+  order: 2;
+}
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] {
+  order: 1;
+}
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[data-rail-search] {
+  order: 2;
+}
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-label="Workspace settings"] {
+  order: 3;
+}
+.workspace-rail.is-collapsed .workspace-rail-icon-btn[aria-pressed="true"] svg {
+  transform: rotate(180deg);
+}
+.workspace-rail.is-collapsed .workspace-rail-tabbar {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.workspace-rail.is-collapsed .workspace-rail-tabs {
+  flex-direction: column;
+  gap: 8px;
+  padding: 0;
+}
+.workspace-rail.is-collapsed .workspace-rail-tab,
+.workspace-rail.is-collapsed .workspace-rail-icon-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 9px;
+}
 .workspace-brand {
   display: flex;
   align-items: center;
@@ -578,11 +638,9 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   border: 1px solid #e7e7e7;
   border-radius: 8px;
   background: #ffffff;
-  /* Bounded height with internal scroll — the 16-row × 52px grid
-     (832px+) was being clipped on most laptop viewports. Reserves
-     ~210px above for the workspace toolbar + dashboard tabs + page
-     padding so the rail's bottom status pill stays above the fold. */
-  max-height: calc(100vh - 210px);
+  /* Bounded height with internal scroll. Keep the dashboard canvas tall
+     enough to show more tab/widget state before the internal scroll. */
+  max-height: calc(100vh - 150px);
   overflow-y: auto;
   overscroll-behavior: contain;
   scrollbar-gutter: stable;
@@ -5217,7 +5275,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-rail-chat {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 2px;
   min-height: 0;
   flex: 1;
 }
@@ -5233,7 +5291,7 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
   border-radius: 7px;
   background: #fafafa;
   color: #6b7280;
-  margin: 2px 0 4px;
+  margin: 0;
 }
 .workspace-rail-chat-search:focus-within {
   background: #ffffff;
@@ -5440,6 +5498,851 @@ code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0
 .workspace-rail-thread-menu-item.is-destructive { color: #b91c1c; }
 .workspace-rail-thread-menu-item.is-destructive:hover { background: #fef2f2; }
 
+/* ─── Workspace rail — Custom Folders Navigation Module ────────────────
+ *
+ * Twenty CRM-style sidebar folders: drag-to-reorder, three-dot menu,
+ * collapsible folder body, dashboard/view items. Sits directly below
+ * the tab row and above the Home / Chat body — mirrors the existing
+ * thread-list visual treatment so the rail stays uniform.
+ */
+.workspace-rail-folders {
+  --nav-folder-row-h: 34px;
+  --nav-item-row-h: 34px;
+  --nav-max-folders: 10;
+  --nav-max-items: 10;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 0 9px;
+  border-bottom: 1px solid #f0f0f0;
+  margin-top: -7px;
+  margin-bottom: 0;
+  flex-shrink: 0;
+  min-height: 0;
+  max-height: min(560px, 52vh);
+}
+.workspace-rail-folders.is-section-collapsed {
+  max-height: none;
+  padding-bottom: 9px;
+}
+.workspace-rail-folders-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  height: 32px;
+  padding: 0 12px 0 0;
+  flex-shrink: 0;
+}
+.workspace-rail-folders-section-toggle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  height: 28px;
+  padding: 0 5px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 400;
+  text-align: left;
+  border-radius: 6px;
+}
+.workspace-rail-folders-section-toggle:hover { background: #f5f5f5; }
+.workspace-rail-folders-section-toggle:focus {
+  outline: none;
+}
+.workspace-rail-folders-section-toggle:focus-visible {
+  outline: 1px solid #d1d5db;
+  outline-offset: 1px;
+}
+.workspace-rail-folders .workspace-rail-section-label {
+  flex: 0 1 auto;
+  min-width: 0;
+  color: #686868;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1;
+  padding: 0;
+}
+.workspace-rail-folders-section-chevron {
+  color: #6b7280;
+  flex-shrink: 0;
+  transition: transform .16s ease;
+}
+.workspace-rail-folders-count {
+  font-size: 10px;
+  font-weight: 600;
+  color: #9ca3af;
+  padding: 1px 6px;
+  border-radius: 99px;
+  background: #f3f4f6;
+}
+.workspace-rail-folders-filters {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px 7px 2.5px;
+  flex-shrink: 0;
+}
+.workspace-rail-folders-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 7px;
+  background: #fafafa;
+  color: #6b7280;
+}
+.workspace-rail-folders-search:focus-within {
+  background: #fff;
+  border-color: #9ca3af;
+}
+.workspace-rail-folders-search-input {
+  flex: 1;
+  min-width: 0;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  color: #111827;
+  font: inherit;
+  font-size: 12px;
+}
+.workspace-rail-folders-search-input::placeholder { color: #9ca3af; }
+.workspace-rail-folders-filter-menu-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+.workspace-rail-folders-filter-btn {
+  position: relative;
+  width: 30px;
+  height: 30px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 7px;
+  background: #f5f5f5;
+  color: #6b7280;
+  cursor: pointer;
+}
+.workspace-rail-folders-filter-btn:hover {
+  background: #ececec;
+  color: #111827;
+}
+.workspace-rail-folders-filter-btn.is-open {
+  background: #f5f5f5;
+  color: #6b7280;
+}
+.workspace-rail-folders-filter-btn:focus {
+  outline: none;
+}
+.workspace-rail-folders-filter-btn:focus-visible {
+  outline: 1px solid #d1d5db;
+  outline-offset: 1px;
+}
+.workspace-rail-folders-filter-btn.is-disabled {
+  color: #9ca3af;
+  cursor: default;
+  opacity: .65;
+}
+.workspace-rail-folders-filter-btn.is-disabled:hover {
+  background: #f5f5f5;
+  color: #9ca3af;
+}
+.workspace-rail-folders-filter-state-dot {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: #f97316;
+  box-shadow: 0 0 0 2px #f5f5f5;
+  pointer-events: none;
+}
+.workspace-rail-folders-filter-btn:hover .workspace-rail-folders-filter-state-dot {
+  box-shadow: 0 0 0 2px #ececec;
+}
+.workspace-rail-folders-filter-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: auto;
+  right: 0;
+  z-index: 70;
+  width: min(234.5px, calc(100vw - 36px));
+  padding: 6px;
+  border: 1px solid #d9d9d9;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
+}
+.workspace-rail-folders-filter-menu-group + .workspace-rail-folders-filter-menu-group {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px solid #ededed;
+}
+.workspace-rail-folders-filter-menu-label {
+  margin: 0;
+  padding: 5px 7px 3px;
+  font-size: 11px;
+  line-height: 1;
+  color: #9ca3af;
+}
+.workspace-rail-folders-filter-menu-item {
+  width: 100%;
+  height: 28px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 8px;
+  padding: 0 7px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: #252525;
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.workspace-rail-folders-filter-menu-item:hover {
+  background: #f5f5f5;
+}
+.workspace-rail-folders-filter-menu-item.is-reset {
+  color: #b45309;
+}
+.workspace-rail-folders-filter-menu-item.is-reset:hover {
+  background: #fff7ed;
+}
+.workspace-rail-folders-filter-menu-value {
+  color: #8c8c8c;
+  white-space: nowrap;
+}
+.workspace-rail-folders-scroll {
+  flex: 0 1 auto;
+  min-height: 0;
+}
+.workspace-rail-folders-scroll.is-scrollable {
+  max-height: calc(var(--nav-folder-row-h) * var(--nav-max-folders) + 12px);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+.workspace-rail-folders-scroll-hint {
+  margin: 0;
+  padding: 4px 10px 2px;
+  font-size: 10.5px;
+  color: #9ca3af;
+  text-align: center;
+}
+.workspace-rail-folder-items.is-scrollable {
+  max-height: calc(var(--nav-item-row-h) * var(--nav-max-items));
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+.workspace-rail-nav-menu-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1px;
+}
+.workspace-rail-nav-menu-stack .workspace-rail-thread-menu-item {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+.workspace-rail-folders-add-btn {
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: #6b7280;
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: background .12s ease, color .12s ease;
+}
+.workspace-rail-folders-head:hover .workspace-rail-folders-add-btn,
+.workspace-rail-folders-add-btn:focus-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.workspace-rail-folders-add-btn:hover { background: #f3f4f6; color: #111827; }
+.workspace-rail-folders-add-btn:focus-visible { outline: 2px solid #bfdbfe; outline-offset: 1px; }
+
+.workspace-rail-folders-empty {
+  margin: 0;
+  padding: 4px 10px 8px;
+  font-size: 11.5px;
+  color: #9ca3af;
+  line-height: 1.4;
+}
+
+.workspace-rail-folder-create {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  color: #6b7280;
+}
+
+.workspace-rail-folders-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.workspace-rail-folder {
+  display: flex;
+  flex-direction: column;
+}
+
+.workspace-rail-folder-accordion-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows 0.22s ease,
+    opacity 0.18s ease;
+}
+.workspace-rail-folder.is-expanded .workspace-rail-folder-accordion-panel {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+.workspace-rail-folder-accordion-inner {
+  overflow: hidden;
+  min-height: 0;
+}
+.workspace-rail-folder.is-drop-target {
+  outline: 1px dashed #9ca3af;
+  outline-offset: -1px;
+  border-radius: 6px;
+}
+
+.workspace-rail-folder-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  transition: background .12s ease;
+}
+.workspace-rail-folder-header:hover { background: #f5f5f5; }
+.workspace-rail-folder-header:hover .workspace-rail-thread-menu-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.workspace-rail-folder-toggle {
+  flex: 1;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px 5px 9px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  min-width: 0;
+  border-radius: 6px;
+}
+.workspace-rail-folder-icon { color: #6b7280; flex-shrink: 0; }
+.workspace-rail-folder-name {
+  font-size: 13px;
+  font-weight: 400;
+  color: #5f6368;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.workspace-rail-folder-items {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.workspace-rail-folder-items:has(.workspace-rail-folder-item)::before {
+  content: "";
+  position: absolute;
+  left: 13px;
+  top: 0;
+  bottom: 21px;
+  width: 5px;
+  border-left: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+  border-bottom-left-radius: 5px;
+  pointer-events: none;
+}
+
+.workspace-rail-folder-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 6px;
+  transition: background .12s ease;
+}
+.workspace-rail-folder-item:hover { background: #f5f5f5; }
+.workspace-rail-folder-item:hover .workspace-rail-thread-menu-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+.workspace-rail-folder-item.is-active { background: #ececec; }
+
+.workspace-rail-folder-item-main {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 9px;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  min-width: 0;
+  border-radius: 6px;
+}
+.workspace-rail-folder-item-icon { color: #6b7280; flex-shrink: 0; }
+.workspace-rail-folder-item-label {
+  font-size: 13px;
+  font-weight: 400;
+  color: #5f6368;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.workspace-rail-folder-empty {
+  font-size: 11.5px;
+  color: #9ca3af;
+  padding: 4px 8px 6px;
+  line-height: 1.35;
+}
+.workspace-rail-folder-empty-spacer {
+  height: 8px;
+  list-style: none;
+  pointer-events: none;
+}
+
+/* Picker — lightweight modal-ish overlay for "Add dashboard" / "Add view" */
+.workspace-rail-folder-picker-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.38);
+  display: grid;
+  align-items: start;
+  justify-items: center;
+  padding-top: 56px;
+  z-index: 4990;
+  backdrop-filter: blur(1px);
+}
+.workspace-rail-folder-picker {
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2);
+  overflow: hidden;
+}
+.workspace-rail-folder-picker-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 13px;
+  color: #111827;
+}
+.workspace-rail-folder-picker-close {
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: 5px;
+  color: #6b7280;
+  cursor: pointer;
+}
+.workspace-rail-folder-picker-close:hover { background: #f3f4f6; color: #111827; }
+.workspace-rail-folder-picker-list {
+  list-style: none;
+  margin: 0;
+  padding: 6px;
+  overflow-y: auto;
+}
+.workspace-rail-folder-picker-item {
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 13px;
+  color: #2c2c2c;
+  text-align: left;
+  cursor: pointer;
+}
+.workspace-rail-folder-picker-item:hover { background: #f5f5f5; }
+.workspace-rail-folder-picker-hint {
+  font-size: 11px;
+  color: #9ca3af;
+}
+
+/* Nav row layout — Twenty-style favorites tree + right-aligned ⋯ */
+.workspace-rail-nav-row {
+  position: relative;
+  list-style: none;
+}
+.workspace-rail-nav-row-body {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  border-radius: 6px;
+  transition: background .12s ease;
+}
+.workspace-rail-nav-row:hover > .workspace-rail-nav-row-body,
+.workspace-rail-nav-row.is-menu-open > .workspace-rail-nav-row-body {
+  background: #f5f5f5;
+}
+.workspace-rail-nav-row:hover > .workspace-rail-nav-row-body .workspace-rail-nav-menu-btn,
+.workspace-rail-nav-row.is-menu-open > .workspace-rail-nav-row-body .workspace-rail-nav-menu-btn {
+  opacity: 1;
+  pointer-events: auto;
+}
+.workspace-rail-nav-row-main {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px 4px 6px 6px;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  border-radius: 6px;
+}
+.workspace-rail-nav-icon-badge {
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
+  display: grid;
+  place-items: center;
+  border-radius: 5px;
+}
+.workspace-rail-nav-row-text {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.workspace-rail-nav-row-meta {
+  font-size: 10.5px;
+  color: #9ca3af;
+  line-height: 1.2;
+}
+.workspace-rail-nav-menu-wrap {
+  flex-shrink: 0;
+  padding-right: 2px;
+}
+.workspace-rail-nav-menu-btn {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  opacity: 0;
+  pointer-events: none;
+}
+.workspace-rail-nav-menu:not(.is-customize) {
+  position: fixed;
+  right: auto;
+  width: 188px;
+  min-width: 188px;
+  z-index: 240;
+}
+.workspace-rail-nav-menu.is-customize {
+  position: fixed;
+  top: 48px;
+  left: 16px;
+  right: auto;
+  width: min(520px, calc(100vw - 32px));
+  max-width: min(520px, calc(100vw - 32px));
+  max-height: calc(100vh - 72px);
+  overflow-y: auto;
+  padding: 14px;
+  z-index: 5000;
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #dbe2ea;
+  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
+}
+.workspace-rail-nav-customize {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.workspace-rail-nav-customize-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: #6b7280;
+}
+.workspace-rail-nav-customize-field input {
+  height: 28px;
+  padding: 0 8px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 13px;
+  color: #111827;
+  background: #fff;
+  caret-color: #111827;
+}
+.workspace-rail-nav-customize-field input:focus {
+  border-color: #9ca3af;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0,0,0,.05);
+}
+.workspace-rail-nav-customize-field input::selection {
+  background: #dbeafe;
+  color: #111827;
+}
+.workspace-rail-nav-customize-label {
+  font-size: 11px;
+  font-weight: 600;
+  color: #9ca3af;
+  letter-spacing: 0.02em;
+}
+.workspace-rail-nav-icon-picker {
+  margin-top: 0;
+}
+.workspace-rail-nav-color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.workspace-rail-nav-color-swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+.workspace-rail-nav-color-swatch {
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+}
+.workspace-rail-nav-color-swatch.active {
+  border-color: #111827;
+  box-shadow: 0 0 0 1px #111827;
+}
+.workspace-rail-nav-color-swatch-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 99px;
+}
+.workspace-rail-nav-color-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  color: #6b7280;
+}
+.workspace-rail-nav-color-custom input[type="color"] {
+  width: 32px;
+  height: 24px;
+  padding: 0;
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.workspace-rail-nav-customize-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+  margin-top: 4px;
+}
+.workspace-rail-nav-btn-ghost,
+.workspace-rail-nav-btn-primary {
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 6px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.workspace-rail-nav-btn-ghost {
+  border: 1px solid #e5e7eb;
+  background: #fff;
+  color: #374151;
+}
+.workspace-rail-nav-btn-ghost:hover { background: #f9fafb; }
+.workspace-rail-nav-btn-primary {
+  border: 1px solid #111827;
+  background: #111827;
+  color: #fff;
+}
+.workspace-rail-nav-btn-primary:hover { background: #252525; }
+.workspace-rail-nav-btn-primary.is-compact {
+  height: 24px;
+  padding: 0 8px;
+  font-size: 11.5px;
+  flex-shrink: 0;
+}
+.workspace-rail-nav-discard-warn {
+  margin: 0;
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 1.35;
+  color: #b45309;
+  background: #fffbeb;
+  border-radius: 6px;
+  border: 1px solid #fde68a;
+}
+.workspace-rail-nav-discard-warn.is-inline {
+  flex: 1 1 100%;
+  margin-top: 2px;
+}
+.workspace-rail-tree-guide {
+  position: absolute;
+  left: -5px;
+  top: calc(50% - 8px);
+  width: 23px;
+  height: 8px;
+  border-left: 1px solid #e5e7eb;
+  border-bottom: 1px solid #e5e7eb;
+  border-bottom-left-radius: 4px;
+  pointer-events: none;
+}
+.workspace-rail-folder-item.workspace-rail-nav-row {
+  padding-left: 14px;
+  position: relative;
+}
+.workspace-rail-folder-chevron {
+  flex-shrink: 0;
+  color: #9ca3af;
+  transition: transform 0.2s ease, color 0.12s ease;
+}
+.workspace-rail-folder.is-expanded .workspace-rail-folder-chevron {
+  transform: rotate(90deg);
+}
+.workspace-rail-folder-create {
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  margin: 2px 4px 6px;
+  border: 1px solid #bfdbfe;
+  border-radius: 8px;
+  background: #f8fafc;
+}
+.workspace-rail-folder-create .workspace-rail-thread-rename {
+  flex: 1;
+  min-width: 80px;
+}
+
+/* ─── Custom Folders View page — clean user-facing table renderer ──── */
+.workspace-view-surface {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  padding: 16px 24px 24px;
+}
+.workspace-view-empty {
+  margin: 24px 0 0;
+  font-size: 13px;
+  color: #6b7280;
+}
+.workspace-view-error { color: #b91c1c; }
+.workspace-view-table-wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  border: 1px solid #ececec;
+  border-radius: 10px;
+  background: #fff;
+}
+.workspace-view-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+  color: #2c2c2c;
+}
+.workspace-view-table th,
+.workspace-view-table td {
+  padding: 9px 12px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+  vertical-align: top;
+}
+.workspace-view-table th {
+  font-weight: 600;
+  font-size: 12px;
+  color: #6b7280;
+  background: #fafafa;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.workspace-view-table tbody tr:hover { background: #fafafa; }
+.workspace-view-table-empty {
+  padding: 20px 12px;
+  text-align: center;
+  color: #9ca3af;
+  font-size: 12.5px;
+}
+.workspace-view-footer {
+  margin: 10px 2px 0;
+  font-size: 11.5px;
+  color: #9ca3af;
+}
+
 /* ─── HelperSidecar — clean light textarea (fix the dark-UA fallback) ─── */
 .dm-field-textarea {
   width: 100%;