添加切换工作目录功能

src/components/DirectorySidebar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, computed, watch} from "vue";
+import {ref, computed, onBeforeUnmount, watch} from "vue";
 import SettingsModal from "./SettingsModal.vue";
 import TreeEntry from "./TreeEntry.vue";
 
@@ -14,6 +14,11 @@ interface DirEntry {
   children?: DirEntry[];
 }
 
+interface WorkspaceEntry {
+  name: string;
+  path: string;
+}
+
 const props = withDefaults(
     defineProps<{
       folderPath: string;
@@ -23,6 +28,7 @@ const props = withDefaults(
       settingsInitialPage?: SettingsPage;
       defaultDocumentMode?: DocumentMode;
       appTheme?: AppTheme;
+      recentWorkspaces?: WorkspaceEntry[];
     }>(),
     {
       currentFilePath: null,
@@ -30,11 +36,14 @@ const props = withDefaults(
       settingsInitialPage: "about",
       defaultDocumentMode: "edit",
       appTheme: "warm",
+      recentWorkspaces: () => [],
     },
 );
 
 const emit = defineEmits<{
   openFolder: [];
+  switchWorkspace: [path: string];
+  removeWorkspace: [path: string];
   toggleFolder: [path: string];
   openFile: [path: string];
   createFile: [];
@@ -69,6 +78,170 @@ function switchView(view: ViewMode) {
   }
 }
 
+// ---- workspace switcher ----
+const workspaceSwitcherRef = ref<HTMLElement | null>(null);
+const showWorkspaceMenu = ref(false);
+const showWorkspaceManager = ref(false);
+const pendingRemovalWorkspace = ref<WorkspaceEntry | null>(null);
+
+function normalizeWorkspacePath(path: string) {
+  const trimmed = path.trim();
+  if (!trimmed) return "";
+
+  const normalized = trimmed.replace(/[\\/]+$/, "");
+  if (!normalized) return trimmed[0] || "";
+  if (/^[A-Za-z]:$/.test(normalized) && /^[A-Za-z]:[\\/]+$/.test(trimmed)) {
+    return `${normalized}\\`;
+  }
+
+  return normalized;
+}
+
+function getWorkspaceIdentity(path: string) {
+  return normalizeWorkspacePath(path).toLocaleLowerCase();
+}
+
+function getWorkspaceName(path: string) {
+  const normalized = normalizeWorkspacePath(path);
+  return normalized.split(/[/\\]/).pop() || normalized || path;
+}
+
+function getWorkspaceParent(path: string) {
+  const normalized = normalizeWorkspacePath(path);
+  const parts = normalized.split(/[/\\]/).filter(Boolean);
+  if (parts.length <= 1) return normalized;
+  return parts.slice(0, -1).join("\\");
+}
+
+function isCurrentWorkspace(path: string) {
+  return Boolean(props.folderPath) && getWorkspaceIdentity(props.folderPath) === getWorkspaceIdentity(path);
+}
+
+const currentWorkspaceName = computed(() => {
+  return props.folderPath ? getWorkspaceName(props.folderPath) : "未选择工作目录";
+});
+
+const currentWorkspacePath = computed(() => {
+  return props.folderPath || "打开或选择一个工作目录";
+});
+
+const workspaceMenuItems = computed<WorkspaceEntry[]>(() => {
+  const seen = new Set<string>();
+  const workspaces: WorkspaceEntry[] = [];
+
+  const addWorkspace = (workspace: WorkspaceEntry) => {
+    const normalized = normalizeWorkspacePath(workspace.path);
+    if (!normalized) return;
+
+    const identity = getWorkspaceIdentity(normalized);
+    if (seen.has(identity)) return;
+
+    seen.add(identity);
+    workspaces.push({
+      name: workspace.name || getWorkspaceName(normalized),
+      path: normalized,
+    });
+  };
+
+  if (props.folderPath) {
+    addWorkspace({
+      name: getWorkspaceName(props.folderPath),
+      path: props.folderPath,
+    });
+  }
+
+  props.recentWorkspaces.forEach(addWorkspace);
+  return workspaces;
+});
+
+const isRemovingCurrentWorkspace = computed(() => {
+  return Boolean(
+    pendingRemovalWorkspace.value &&
+    isCurrentWorkspace(pendingRemovalWorkspace.value.path),
+  );
+});
+
+function toggleWorkspaceMenu() {
+  showWorkspaceMenu.value = !showWorkspaceMenu.value;
+}
+
+function closeWorkspaceMenu() {
+  showWorkspaceMenu.value = false;
+}
+
+function onDocumentClick(event: MouseEvent) {
+  const target = event.target;
+  if (target instanceof Node && workspaceSwitcherRef.value?.contains(target)) return;
+  closeWorkspaceMenu();
+}
+
+function openFolderFromMenu() {
+  closeWorkspaceMenu();
+  emit("openFolder");
+}
+
+function selectWorkspace(path: string) {
+  closeWorkspaceMenu();
+  if (isCurrentWorkspace(path)) return;
+  emit("switchWorkspace", path);
+}
+
+function openWorkspaceManager() {
+  closeWorkspaceMenu();
+  showWorkspaceManager.value = true;
+}
+
+function closeWorkspaceManager() {
+  showWorkspaceManager.value = false;
+}
+
+function openFolderFromManager() {
+  closeWorkspaceManager();
+  emit("openFolder");
+}
+
+function selectWorkspaceFromManager(path: string) {
+  closeWorkspaceManager();
+  if (isCurrentWorkspace(path)) return;
+  emit("switchWorkspace", path);
+}
+
+function requestRemoveWorkspace(path: string) {
+  const normalized = normalizeWorkspacePath(path);
+  pendingRemovalWorkspace.value = {
+    name: getWorkspaceName(normalized),
+    path: normalized,
+  };
+}
+
+function cancelRemoveWorkspace() {
+  pendingRemovalWorkspace.value = null;
+}
+
+function confirmRemoveWorkspace() {
+  const workspace = pendingRemovalWorkspace.value;
+  if (!workspace) return;
+
+  pendingRemovalWorkspace.value = null;
+  emit("removeWorkspace", workspace.path);
+}
+
+watch(showWorkspaceMenu, (open) => {
+  if (open) {
+    document.addEventListener("click", onDocumentClick);
+  } else {
+    document.removeEventListener("click", onDocumentClick);
+  }
+});
+
+watch(() => props.folderPath, () => {
+  closeWorkspaceMenu();
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+});
+
 // ---- settings modal ----
 const showSettings = ref(false);
 const settingsPage = ref<SettingsPage>("about");
@@ -170,6 +343,75 @@ function openSettings(page: SettingsPage) {
           </p>
         </div>
       </div>
+
+      <!-- ===== WORKSPACE SWITCHER ===== -->
+      <div ref="workspaceSwitcherRef" class="workspace-switcher">
+        <Transition name="workspace-menu-pop">
+          <div
+              v-if="showWorkspaceMenu"
+              class="workspace-menu"
+              role="menu"
+              aria-label="工作目录"
+              @click.stop
+          >
+            <div v-if="workspaceMenuItems.length" class="workspace-menu-list">
+              <button
+                  v-for="workspace in workspaceMenuItems"
+                  :key="workspace.path"
+                  class="workspace-menu-item"
+                  :class="{ 'workspace-menu-item-active': isCurrentWorkspace(workspace.path) }"
+                  type="button"
+                  role="menuitem"
+                  :title="workspace.path"
+                  @click="selectWorkspace(workspace.path)"
+              >
+                <span class="workspace-menu-item-copy">
+                  <span class="workspace-menu-item-name">{{ workspace.name }}</span>
+                  <span class="workspace-menu-item-path">{{ getWorkspaceParent(workspace.path) }}</span>
+                </span>
+                <i v-if="isCurrentWorkspace(workspace.path)" class="ri-check-line workspace-menu-check"></i>
+              </button>
+            </div>
+            <div v-else class="workspace-menu-empty">
+              暂无工作目录
+            </div>
+
+            <div class="workspace-menu-separator"></div>
+
+            <button
+                class="workspace-menu-command"
+                type="button"
+                role="menuitem"
+                @click="openFolderFromMenu"
+            >
+              <i class="ri-folder-open-line"></i>
+              <span>打开工作目录</span>
+            </button>
+            <button
+                class="workspace-menu-command"
+                type="button"
+                role="menuitem"
+                @click="openWorkspaceManager"
+            >
+              <i class="ri-book-shelf-line"></i>
+              <span>管理工作目录</span>
+            </button>
+          </div>
+        </Transition>
+
+        <button
+            class="workspace-trigger"
+            type="button"
+            :title="currentWorkspacePath"
+            aria-haspopup="menu"
+            :aria-expanded="showWorkspaceMenu"
+            @click.stop="toggleWorkspaceMenu"
+        >
+          <i class="ri-arrow-up-down-line workspace-trigger-icon"></i>
+          <span class="workspace-trigger-name">{{ currentWorkspaceName }}</span>
+          <i class="ri-arrow-down-s-line workspace-trigger-caret"></i>
+        </button>
+      </div>
     </div>
   </aside>
 
@@ -181,6 +423,142 @@ function openSettings(page: SettingsPage) {
       @update-default-document-mode="(mode: DocumentMode) => emit('updateDefaultDocumentMode', mode)"
       @update-app-theme="(theme: AppTheme) => emit('updateAppTheme', theme)"
   />
+
+  <Teleport to="body">
+    <div
+        v-if="showWorkspaceManager"
+        class="workspace-manager-overlay"
+        role="presentation"
+        @click.self="closeWorkspaceManager"
+    >
+      <section
+          class="workspace-manager-shell"
+          role="dialog"
+          aria-modal="true"
+          aria-label="管理工作目录"
+      >
+        <header class="workspace-manager-header">
+          <div class="workspace-manager-title">
+            <h2>管理工作目录</h2>
+            <p>{{ currentWorkspaceName }}</p>
+          </div>
+          <button
+              class="workspace-manager-close"
+              type="button"
+              title="关闭"
+              aria-label="关闭"
+              @click="closeWorkspaceManager"
+          >
+            <i class="ri-close-line"></i>
+          </button>
+        </header>
+
+        <div class="workspace-manager-body">
+          <div class="workspace-manager-list" aria-label="最近工作目录">
+            <div v-if="!workspaceMenuItems.length" class="workspace-manager-empty">
+              暂无工作目录
+            </div>
+
+            <div
+                v-for="workspace in workspaceMenuItems"
+                :key="workspace.path"
+                class="workspace-manager-row"
+                :class="{ 'workspace-manager-row-current': isCurrentWorkspace(workspace.path) }"
+            >
+              <div class="workspace-manager-row-main">
+                <i class="ri-folder-line"></i>
+                <div class="workspace-manager-row-copy">
+                  <strong>{{ workspace.name }}</strong>
+                  <span>{{ workspace.path }}</span>
+                </div>
+              </div>
+              <div class="workspace-manager-row-actions">
+                <span v-if="isCurrentWorkspace(workspace.path)" class="workspace-manager-current-label">
+                  当前
+                </span>
+                <button
+                    v-else
+                    class="workspace-manager-icon-btn"
+                    type="button"
+                    title="打开"
+                    aria-label="打开"
+                    @click="selectWorkspaceFromManager(workspace.path)"
+                >
+                  <i class="ri-arrow-right-line"></i>
+                </button>
+                <button
+                    class="workspace-manager-icon-btn"
+                    type="button"
+                    title="移除"
+                    aria-label="移除"
+                    @click="requestRemoveWorkspace(workspace.path)"
+                >
+                  <i class="ri-delete-bin-line"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <footer class="workspace-manager-actions">
+            <button
+                class="workspace-manager-primary"
+                type="button"
+                @click="openFolderFromManager"
+            >
+              <i class="ri-folder-open-line"></i>
+              <span>打开本地工作目录</span>
+            </button>
+          </footer>
+        </div>
+      </section>
+    </div>
+
+    <div
+        v-if="pendingRemovalWorkspace"
+        class="workspace-remove-confirm-overlay"
+        role="presentation"
+        @click.self="cancelRemoveWorkspace"
+    >
+      <section
+          class="workspace-remove-confirm-shell"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="workspace-remove-confirm-title"
+      >
+        <header class="workspace-remove-confirm-header">
+          <i class="ri-error-warning-line"></i>
+          <h3 id="workspace-remove-confirm-title">移除工作目录</h3>
+        </header>
+        <div class="workspace-remove-confirm-body">
+          <p>
+            确定要从列表中移除“{{ pendingRemovalWorkspace.name }}”吗？
+          </p>
+          <p>
+            这只会移除工作目录记录，不会删除本地文件。
+          </p>
+          <p v-if="isRemovingCurrentWorkspace">
+            当前工作目录会被关闭，编辑区域会被重置。
+          </p>
+        </div>
+        <footer class="workspace-remove-confirm-actions">
+          <button
+              class="workspace-remove-confirm-cancel"
+              type="button"
+              @click="cancelRemoveWorkspace"
+          >
+            取消
+          </button>
+          <button
+              class="workspace-remove-confirm-danger"
+              type="button"
+              @click="confirmRemoveWorkspace"
+          >
+            移除
+          </button>
+        </footer>
+      </section>
+    </div>
+  </Teleport>
 </template>
 
 <style scoped>
@@ -232,4 +610,562 @@ function openSettings(page: SettingsPage) {
 .sidebar-search-input::placeholder {
   color: var(--app-subtle);
 }
+
+.workspace-switcher {
+  position: relative;
+  z-index: 20;
+  padding: 6px;
+  border-top: 1px solid var(--app-border);
+  background: color-mix(in srgb, var(--app-sidebar-bg) 88%, transparent);
+}
+
+.workspace-trigger {
+  display: grid;
+  grid-template-columns: 18px minmax(0, 1fr) 16px;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--app-text-soft);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  text-align: left;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.workspace-trigger:hover,
+.workspace-trigger[aria-expanded="true"] {
+  border-color: var(--app-border-strong);
+  background: var(--app-hover);
+  color: var(--app-text);
+}
+
+.workspace-trigger-icon,
+.workspace-trigger-caret {
+  color: var(--app-subtle);
+  font-size: 14px;
+}
+
+.workspace-trigger-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+.workspace-menu-pop-enter-active,
+.workspace-menu-pop-leave-active {
+  transition:
+    opacity 0.12s ease,
+    transform 0.12s ease;
+}
+
+.workspace-menu-pop-enter-from,
+.workspace-menu-pop-leave-to {
+  opacity: 0;
+  transform: translateY(4px);
+}
+
+.workspace-menu {
+  position: absolute;
+  right: 6px;
+  bottom: calc(100% + 6px);
+  left: 6px;
+  overflow: hidden;
+  border: 1px solid var(--app-border-strong);
+  border-radius: 8px;
+  background: var(--app-surface);
+  box-shadow:
+    0 14px 34px color-mix(in srgb, var(--app-shadow) 70%, transparent),
+    0 1px 4px color-mix(in srgb, var(--app-shadow) 70%, transparent);
+}
+
+.workspace-menu-list {
+  max-height: 210px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.workspace-menu-item,
+.workspace-menu-command {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border: none;
+  background: transparent;
+  color: var(--app-text-soft);
+  cursor: pointer;
+  text-align: left;
+}
+
+.workspace-menu-item {
+  min-height: 42px;
+  gap: 8px;
+  justify-content: space-between;
+  padding: 6px 8px;
+  border-radius: 6px;
+}
+
+.workspace-menu-item:hover,
+.workspace-menu-command:hover {
+  background: var(--app-hover);
+  color: var(--app-text);
+}
+
+.workspace-menu-item-active {
+  color: var(--app-text-strong);
+  font-weight: 600;
+}
+
+.workspace-menu-item-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.workspace-menu-item-name,
+.workspace-menu-item-path {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-menu-item-name {
+  font-size: 13px;
+  line-height: 1.1;
+}
+
+.workspace-menu-item-path {
+  color: var(--app-subtle);
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+.workspace-menu-check {
+  flex-shrink: 0;
+  color: var(--app-accent);
+  font-size: 15px;
+}
+
+.workspace-menu-empty {
+  padding: 12px 10px 10px;
+  color: var(--app-subtle);
+  font-size: 12px;
+  text-align: center;
+}
+
+.workspace-menu-separator {
+  height: 1px;
+  background: var(--app-border);
+}
+
+.workspace-menu-command {
+  gap: 8px;
+  min-height: 34px;
+  padding: 0 10px;
+  font-size: 13px;
+}
+
+.workspace-menu-command i {
+  color: var(--app-muted);
+  font-size: 15px;
+}
+
+.workspace-manager-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: var(--app-overlay);
+  backdrop-filter: blur(8px);
+}
+
+.workspace-manager-shell {
+  display: flex;
+  width: min(720px, calc(100vw - 48px));
+  max-height: min(620px, calc(100vh - 48px));
+  min-height: 390px;
+  overflow: hidden;
+  flex-direction: column;
+  border: 1px solid var(--app-border-strong);
+  border-radius: 12px;
+  background: var(--app-surface);
+  box-shadow:
+    0 24px 70px var(--app-shadow),
+    0 2px 10px color-mix(in srgb, var(--app-shadow) 46%, transparent);
+}
+
+.workspace-manager-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 66px;
+  padding: 0 18px 0 22px;
+  border-bottom: 1px solid var(--app-border);
+  background: color-mix(in srgb, var(--app-surface) 72%, transparent);
+}
+
+.workspace-manager-title {
+  min-width: 0;
+}
+
+.workspace-manager-title h2 {
+  margin: 0 0 5px;
+  color: var(--app-text-strong);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.workspace-manager-title p {
+  margin: 0;
+  overflow: hidden;
+  color: var(--app-muted);
+  font-size: 12px;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-manager-close,
+.workspace-manager-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--app-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.workspace-manager-close {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  font-size: 17px;
+}
+
+.workspace-manager-close:hover,
+.workspace-manager-icon-btn:hover:not(:disabled) {
+  background: var(--app-hover);
+  color: var(--app-text);
+}
+
+.workspace-manager-body {
+  display: flex;
+  min-height: 0;
+  flex: 1;
+  flex-direction: column;
+  background: var(--app-panel-bg);
+}
+
+.workspace-manager-list {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+}
+
+.workspace-manager-empty {
+  display: flex;
+  min-height: 190px;
+  align-items: center;
+  justify-content: center;
+  color: var(--app-subtle);
+  font-size: 13px;
+}
+
+.workspace-manager-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 14px;
+  align-items: center;
+  min-height: 62px;
+  padding: 10px 10px 10px 12px;
+  border-radius: 8px;
+  color: var(--app-text-soft);
+}
+
+.workspace-manager-row + .workspace-manager-row {
+  margin-top: 4px;
+}
+
+.workspace-manager-row:hover {
+  background: var(--app-hover);
+}
+
+.workspace-manager-row-current {
+  background: var(--app-active-bg);
+  color: var(--app-text);
+}
+
+.workspace-manager-row-main {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 11px;
+}
+
+.workspace-manager-row-main > i {
+  flex-shrink: 0;
+  color: color-mix(in srgb, var(--app-accent) 76%, transparent);
+  font-size: 18px;
+}
+
+.workspace-manager-row-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.workspace-manager-row-copy strong,
+.workspace-manager-row-copy span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.workspace-manager-row-copy strong {
+  color: var(--app-text-strong);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.workspace-manager-row-copy span {
+  color: var(--app-muted);
+  font-size: 12px;
+}
+
+.workspace-manager-row-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.workspace-manager-current-label {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--app-accent) 12%, transparent);
+  color: var(--app-accent);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.workspace-manager-icon-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  font-size: 15px;
+}
+
+.workspace-manager-icon-btn:disabled {
+  cursor: default;
+  opacity: 0.34;
+}
+
+.workspace-manager-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  min-height: 62px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--app-border);
+  background: var(--app-surface);
+}
+
+.workspace-manager-primary {
+  display: inline-flex;
+  gap: 8px;
+  min-height: 32px;
+  min-width: 142px;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  background: var(--app-control);
+  color: var(--app-control-contrast);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  box-shadow: 0 2px 7px color-mix(in srgb, var(--app-control) 32%, transparent);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.workspace-manager-primary:hover {
+  background: var(--app-control-hover);
+}
+
+.workspace-remove-confirm-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: color-mix(in srgb, var(--app-overlay) 86%, transparent);
+  backdrop-filter: blur(10px);
+}
+
+.workspace-remove-confirm-shell {
+  width: min(420px, calc(100vw - 40px));
+  overflow: hidden;
+  border: 1px solid var(--app-border-strong);
+  border-radius: 10px;
+  background: var(--app-surface);
+  box-shadow:
+    0 22px 56px var(--app-shadow),
+    0 2px 10px color-mix(in srgb, var(--app-shadow) 45%, transparent);
+}
+
+.workspace-remove-confirm-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 56px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--app-border);
+}
+
+.workspace-remove-confirm-header i {
+  color: #d97706;
+  font-size: 19px;
+}
+
+.workspace-remove-confirm-header h3 {
+  margin: 0;
+  color: var(--app-text-strong);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.workspace-remove-confirm-body {
+  padding: 16px 18px 4px;
+}
+
+.workspace-remove-confirm-body p {
+  margin: 0 0 10px;
+  color: var(--app-text-soft);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.workspace-remove-confirm-body p:first-child {
+  color: var(--app-text);
+}
+
+.workspace-remove-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 14px 18px 16px;
+}
+
+.workspace-remove-confirm-cancel,
+.workspace-remove-confirm-danger {
+  display: inline-flex;
+  min-width: 74px;
+  min-height: 32px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.workspace-remove-confirm-cancel {
+  border: 1px solid var(--app-border-strong);
+  background: var(--app-surface);
+  color: var(--app-text-soft);
+}
+
+.workspace-remove-confirm-cancel:hover {
+  background: var(--app-hover);
+  color: var(--app-text);
+}
+
+.workspace-remove-confirm-danger {
+  border: 1px solid #dc2626;
+  background: #dc2626;
+  color: #ffffff;
+}
+
+.workspace-remove-confirm-danger:hover {
+  border-color: #b91c1c;
+  background: #b91c1c;
+}
+
+@media (max-width: 680px) {
+  .workspace-manager-overlay {
+    align-items: stretch;
+    padding: 14px;
+  }
+
+  .workspace-manager-shell {
+    width: 100%;
+    max-height: none;
+  }
+
+  .workspace-manager-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+
+  .workspace-manager-row-actions {
+    justify-content: flex-end;
+  }
+
+  .workspace-manager-actions {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .workspace-manager-primary {
+    width: 100%;
+  }
+
+  .workspace-remove-confirm-overlay {
+    align-items: flex-end;
+    padding: 14px;
+  }
+
+  .workspace-remove-confirm-shell {
+    width: 100%;
+  }
+}
 </style>