From 0b6b39f26299f1d10aedb188dcda616004eae4f6 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Thu, 28 May 2026 14:15:02 +0800
Subject: [PATCH] fix(ui): refine sidebar and personal space styling

---
 .../personalization/ExperienceOnboarding.vue  |  8 +-
 .../personalization/PersonalizationDrawer.vue | 77 +++++++++++++++----
 .../styles/components/chat/_chat-area.scss    | 26 +++----
 .../styles/components/input/_composer.scss    | 27 +++----
 .../styles/components/overlays/_overlays.scss | 20 ++---
 .../styles/components/panels/_left-panel.scss | 41 +++++-----
 .../components/sidebar/_conversation.scss     |  6 +-
 7 files changed, 126 insertions(+), 79 deletions(-)

diff --git a/static/src/components/personalization/ExperienceOnboarding.vue b/static/src/components/personalization/ExperienceOnboarding.vue
index 13739d2..d2e398c 100644
--- a/static/src/components/personalization/ExperienceOnboarding.vue
+++ b/static/src/components/personalization/ExperienceOnboarding.vue
@@ -105,7 +105,7 @@ function confirmSelection() {
   background: rgba(255, 255, 255, 0.96);
   border-radius: 18px;
   padding: 24px 28px;
-  box-shadow: 0 20px 50px rgba(33, 24, 14, 0.25);
+  box-shadow: none;
   border: 1px solid rgba(118, 103, 84, 0.25);
 }
 .exp-header {
@@ -144,16 +144,16 @@ function confirmSelection() {
   padding: 16px 14px;
   cursor: pointer;
   transition: 0.2s ease;
-  box-shadow: 0 8px 18px rgba(61, 57, 41, 0.06);
+  box-shadow: none;
   background: #fff;
 }
 .mode-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 16px 30px rgba(61, 57, 41, 0.12);
+  box-shadow: none;
 }
 .mode-card.active {
   border-color: #da7756;
-  box-shadow: 0 18px 36px rgba(218, 119, 86, 0.25);
+  box-shadow: none;
 }
 .badge {
   display: inline-flex;
diff --git a/static/src/components/personalization/PersonalizationDrawer.vue b/static/src/components/personalization/PersonalizationDrawer.vue
index 59c249b..627fc36 100644
--- a/static/src/components/personalization/PersonalizationDrawer.vue
+++ b/static/src/components/personalization/PersonalizationDrawer.vue
@@ -343,6 +343,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               type="button"
@@ -395,6 +396,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in filteredModelOptions"
@@ -437,6 +439,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in runModeOptions"
@@ -514,6 +517,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in themeOptions"
@@ -594,13 +598,14 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in blockDisplayOptions"
                               :key="option.id"
                               type="button"
                               class="settings-menu-option"
-                              :class="{ selected: form.block_display_mode === option.value }"
+                              :class="{ selected: currentBlockDisplayMode === option.value }"
                               @click="selectBlockDisplayMode(option.value)"
                             >
                               <strong>{{ option.label }}</strong
@@ -638,6 +643,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in permissionModeOptions"
@@ -1106,6 +1112,7 @@
                           </button>
                           <div
                             :class="['settings-floating-menu', { dark: activeTheme === 'dark' }]"
+                            :style="activeDropdown ? floatingMenuStyle : undefined"
                           >
                             <button
                               v-for="option in imageCompressionOptions"
@@ -1276,7 +1283,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
 import { storeToRefs } from 'pinia';
 import { usePersonalizationStore } from '@/stores/personalization';
 import { useResourceStore } from '@/stores/resource';
@@ -1310,7 +1317,8 @@ const {
   skillsCatalog,
   thinkingIntervalDefault,
   thinkingIntervalRange,
-  recentConversationsPromptLimitRange
+  recentConversationsPromptLimitRange,
+  experiments
 } = storeToRefs(personalization);
 
 type IconKey = keyof typeof ICONS;
@@ -1372,23 +1380,62 @@ const personalTabs = computed(() => {
 
 const activeTab = ref<PersonalTab>('general');
 const activeDropdown = ref<string | null>(null);
+const floatingMenuStyle = ref<Record<string, string>>({});
 
 const activeTabLabel = computed(() => {
   return personalTabs.value.find((tab) => tab.id === activeTab.value)?.label || '常规';
 });
 
-const toggleDropdown = (key: string) => {
+const updateFloatingMenuPosition = async () => {
+  if (!activeDropdown.value || typeof window === 'undefined') {
+    floatingMenuStyle.value = {};
+    return;
+  }
+  await nextTick();
+  const button = document.querySelector<HTMLElement>(
+    '.settings-select-wrap.open .settings-select-button'
+  );
+  if (!button) {
+    return;
+  }
+  const rect = button.getBoundingClientRect();
+  const menuWidth = Math.min(300, Math.max(240, window.innerWidth - 32));
+  const left = Math.max(16, Math.min(rect.right - menuWidth, window.innerWidth - menuWidth - 16));
+  const top = Math.max(16, Math.min(rect.bottom + 10, window.innerHeight - 80));
+  floatingMenuStyle.value = {
+    position: 'fixed',
+    top: `${Math.round(top)}px`,
+    left: `${Math.round(left)}px`,
+    right: 'auto',
+    width: `${Math.round(menuWidth)}px`,
+    zIndex: '2147483647'
+  };
+};
+
+const toggleDropdown = async (key: string) => {
   activeDropdown.value = activeDropdown.value === key ? null : key;
+  await updateFloatingMenuPosition();
 };
 
 const closeDropdown = () => {
   activeDropdown.value = null;
+  floatingMenuStyle.value = {};
 };
 
 const settingsTabIconStyle = (icon: IconKey) => ({
   '--icon-src': `url(${ICONS[icon]})`
 });
 
+onMounted(() => {
+  window.addEventListener('resize', updateFloatingMenuPosition);
+  window.addEventListener('scroll', updateFloatingMenuPosition, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateFloatingMenuPosition);
+  window.removeEventListener('scroll', updateFloatingMenuPosition, true);
+});
+
 type RunModeValue = 'fast' | 'thinking' | 'deep' | null;
 type PermissionModeValue = 'readonly' | 'approval' | 'auto_approval' | 'unrestricted';
 type CompressionField =
@@ -1487,9 +1534,11 @@ const communicationStyleLabel = computed(() => {
   return form.value.communication_style === 'human_like' ? '拟人' : '默认';
 });
 
+const currentBlockDisplayMode = computed(() => experiments.value.blockDisplayMode);
+
 const blockDisplayLabel = computed(() => {
   return (
-    blockDisplayOptions.find((option) => option.value === form.value.block_display_mode)?.label ||
+    blockDisplayOptions.find((option) => option.value === currentBlockDisplayMode.value)?.label ||
     '堆叠动画'
   );
 });
@@ -2176,14 +2225,12 @@ const applyThemeOption = async (theme: ThemeKey) => {
   overflow-y: auto;
   overflow-x: visible;
   padding-right: 18px;
-  padding-bottom: 28px;
+  padding-bottom: 86px;
+  scroll-padding-bottom: 86px;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-.settings-redesign-scroll:has(.settings-select-wrap.open) {
-  overflow: visible;
-}
 
 .settings-redesign-tabs::-webkit-scrollbar,
 .settings-redesign-scroll::-webkit-scrollbar,
@@ -2300,9 +2347,9 @@ const applyThemeOption = async (theme: ThemeKey) => {
 }
 
 .settings-floating-menu {
-  position: absolute;
-  right: 0;
-  top: calc(100% + 10px);
+  position: fixed;
+  right: auto;
+  top: auto;
   width: 300px;
   max-height: min(420px, 60vh);
   overflow: auto;
@@ -2313,7 +2360,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
   box-shadow: var(--settings-floating-menu-shadow);
   opacity: 1;
   backdrop-filter: none;
-  z-index: 10000;
+  z-index: 2147483647;
   display: none;
 }
 
@@ -2435,7 +2482,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
 .settings-number-row input:focus,
 .settings-compression-grid input:focus {
   border-color: var(--claude-text-secondary);
-  box-shadow: 0 0 0 4px rgba(128, 128, 128, 0.11);
+  box-shadow: none;
 }
 
 .settings-input-stack {
@@ -2608,7 +2655,7 @@ const applyThemeOption = async (theme: ThemeKey) => {
 }
 
 .settings-toggle-row input:checked + .fancy-check .fancy-path {
-  stroke: var(--claude-accent);
+  stroke: var(--claude-text-secondary);
   stroke-dasharray: 70.5096664428711 9999999;
   stroke-dashoffset: -262.2723388671875;
 }
diff --git a/static/src/styles/components/chat/_chat-area.scss b/static/src/styles/components/chat/_chat-area.scss
index f2f2ac8..bc18ebb 100644
--- a/static/src/styles/components/chat/_chat-area.scss
+++ b/static/src/styles/components/chat/_chat-area.scss
@@ -269,7 +269,7 @@
   padding: 12px;
   border-radius: 14px;
   background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
+  box-shadow: none;
   backdrop-filter: blur(8px);
   pointer-events: auto;
   min-width: 480px;
@@ -398,17 +398,17 @@
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-shadow: 0 6px 16px rgba(61, 57, 41, 0.08);
+  box-shadow: none;
 }
 
 .scroll-lock-btn:hover {
   transform: translateY(-2px);
-  box-shadow: 0 9px 20px rgba(61, 57, 41, 0.12);
+  box-shadow: none;
 }
 
 .scroll-lock-toggle.locked .scroll-lock-btn {
   border-color: var(--claude-accent);
-  box-shadow: 0 0 10px var(--claude-highlight);
+  box-shadow: none;
 }
 
 .scroll-lock-btn svg {
@@ -477,7 +477,7 @@
   border-radius: 18px;
   font-size: 15px;
   line-height: 1.6;
-  box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
+  box-shadow: none;
   color: var(--claude-text);
   white-space: pre-wrap;
   word-break: break-all;
@@ -485,7 +485,7 @@
 }
 
 .user-message .message-text {
-  background: rgba(255, 255, 255, 0.88);
+  background: #f5f5f5;
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -588,7 +588,7 @@
   overflow: hidden;
   border: 1px solid var(--claude-border);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  box-shadow: 0 12px 28px rgba(61, 57, 41, 0.08);
+  box-shadow: none;
 }
 
 .collapsible-header {
@@ -711,7 +711,7 @@
   border: 1px solid var(--claude-border);
   border-radius: 16px;
   background: var(--claude-card);
-  box-shadow: var(--claude-shadow);
+  box-shadow: none;
   overflow: hidden;
   min-height: 0;
 }
@@ -927,7 +927,7 @@ body[data-theme='dark'] .more-icon {
   border-radius: 12px;
   overflow: hidden;
   background: transparent;
-  box-shadow: var(--claude-shadow);
+  box-shadow: none;
 }
 
 .chat-inline-card__body {
@@ -982,7 +982,7 @@ body[data-theme='dark'] .more-icon {
   object-fit: contain;
   border-radius: 12px;
   border: 1px solid var(--claude-border);
-  box-shadow: var(--claude-shadow);
+  box-shadow: none;
   background: var(--claude-card);
 }
 
@@ -1090,7 +1090,7 @@ show-html:not([data-rendered='1']) {
   border: 1px solid var(--claude-border);
   border-radius: 12px;
   background: transparent;
-  box-shadow: var(--claude-shadow);
+  box-shadow: none;
 }
 
 show_html:not([data-rendered='1'])[ratio='1:1'],
@@ -1169,7 +1169,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
   border: 1px solid var(--claude-border);
   border-radius: 12px;
   background: var(--theme-surface-soft);
-  box-shadow: var(--theme-shadow-soft);
+  box-shadow: none;
 }
 
 .text-output .text-content .md-table-scroll > table,
@@ -1258,7 +1258,7 @@ show-html:not([data-rendered='1'])[ratio='3:4'] {
   border-radius: 10px;
   background: var(--theme-surface-soft);
   border-left: 4px solid var(--claude-accent);
-  box-shadow: inset 0 0 0 1px var(--claude-border);
+  box-shadow: none;
   display: flex;
   flex-direction: column;
   gap: 8px;
diff --git a/static/src/styles/components/input/_composer.scss b/static/src/styles/components/input/_composer.scss
index b761b42..11bf3ff 100644
--- a/static/src/styles/components/input/_composer.scss
+++ b/static/src/styles/components/input/_composer.scss
@@ -214,7 +214,7 @@ body[data-theme='dark'] {
     border-radius: 10px;
     border: 1px solid var(--theme-control-border);
     background: var(--theme-surface-soft);
-    box-shadow: var(--theme-shadow-mid);
+    box-shadow: none;
     color: var(--claude-text);
     font-size: 12px;
     line-height: 1.35;
@@ -269,7 +269,7 @@ body[data-theme='dark'] {
     border: 1px solid var(--theme-control-border);
     border-radius: 14px;
     background: var(--theme-surface-soft);
-    box-shadow: var(--theme-shadow-mid);
+    box-shadow: none;
 }
 
 .permission-switcher__menu--split {
@@ -375,7 +375,7 @@ body[data-theme='dark'] {
     border-radius: var(--stadium-radius);
     border: 1px solid rgba(15, 23, 42, 0.12);
     background: #ffffff;
-    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
+    box-shadow: none;
     display: flex;
     gap: 12px;
     transition:
@@ -388,24 +388,19 @@ body[data-theme='dark'] {
     padding-bottom: 16px;
     min-height: calc(var(--stadium-radius) * 2.7);
     border-color: rgba(15, 23, 42, 0.2);
-    box-shadow: 0 26px 70px rgba(15, 23, 42, 0.22);
+    box-shadow: none;
 }
 
 .stadium-shell.is-focused,
 .stadium-shell.has-text {
-    border-color: var(--claude-accent);
-    box-shadow:
-        0 2px 22px var(--claude-highlight),
-        0 0 30px var(--claude-highlight),
-        0 22px 60px rgba(15, 23, 42, 0.22);
+    border-color: rgba(15, 23, 42, 0.12);
+    box-shadow: none;
 }
 
 .stadium-shell.is-multiline.is-focused,
 .stadium-shell.is-multiline.has-text {
-    box-shadow:
-        0 2px 28px var(--claude-highlight),
-        0 0 36px var(--claude-highlight),
-        0 32px 86px rgba(15, 23, 42, 0.28);
+    border-color: rgba(15, 23, 42, 0.2);
+    box-shadow: none;
 }
 
 .input-stack {
@@ -581,7 +576,7 @@ body[data-theme='dark'] {
     background: rgba(255, 255, 255, 0.98);
     border: 1px solid var(--claude-border);
     border-radius: 18px;
-    box-shadow: var(--claude-shadow);
+    box-shadow: none;
     z-index: 30;
     pointer-events: auto;
 }
@@ -640,7 +635,7 @@ body[data-theme='dark'] {
     border-radius: 18px;
     border: 1px solid var(--claude-border);
     background: rgba(255, 255, 255, 0.98);
-    box-shadow: var(--claude-shadow);
+    box-shadow: none;
     z-index: 31;
 }
 
@@ -799,7 +794,7 @@ body[data-theme='dark'] {
     background: rgba(255, 255, 255, 0.96);
     border: 1px solid var(--claude-border);
     border-radius: 12px;
-    box-shadow: var(--claude-shadow);
+    box-shadow: none;
     padding: 12px;
     display: flex;
     flex-direction: column;
diff --git a/static/src/styles/components/overlays/_overlays.scss b/static/src/styles/components/overlays/_overlays.scss
index ac01f31..3fb3214 100644
--- a/static/src/styles/components/overlays/_overlays.scss
+++ b/static/src/styles/components/overlays/_overlays.scss
@@ -2847,14 +2847,14 @@ body[data-theme='light'] {
 
   .experiment-visual {
     background: var(--theme-surface-card);
-    box-shadow: var(--theme-shadow-soft);
+    box-shadow: none;
   }
 
   .stadium-shell.is-focused,
   .stadium-shell.has-text,
   .stadium-shell.is-multiline.is-focused,
   .stadium-shell.is-multiline.has-text {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    box-shadow: none;
   }
 
   /* 按钮背景色 - 使用浅灰色 */
@@ -3004,14 +3004,14 @@ body[data-theme='dark'] {
 
   .experiment-visual {
     background: var(--theme-surface-card);
-    box-shadow: var(--theme-shadow-soft);
+    box-shadow: none;
   }
 
   .stadium-shell.is-focused,
   .stadium-shell.has-text,
   .stadium-shell.is-multiline.is-focused,
   .stadium-shell.is-multiline.has-text {
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+    box-shadow: none;
   }
 
   /* 输入栏 - 改为灰黑色 */
@@ -3023,7 +3023,7 @@ body[data-theme='dark'] {
   .stadium-shell.is-focused,
   .stadium-shell.has-text {
     background: #2a2a2a;
-    border-color: rgba(255, 255, 255, 0.15);
+    border-color: rgba(255, 255, 255, 0.1);
   }
 
   /* 输入框文字颜色 */
@@ -3377,7 +3377,7 @@ body[data-theme='dark'] {
   /* 用户消息块 - 使用浅灰色 */
   .user-message .message-text {
     background: #2a2a2a;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
   }
 
   /* AI 消息块 - 使用浅灰色 */
@@ -3421,17 +3421,17 @@ body[data-theme='dark'] {
   .scroll-lock-btn {
     background: #2a2a2a;
     border-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
   }
 
   .scroll-lock-btn:hover {
     background: #353535;
-    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
+    box-shadow: none;
   }
 
   .scroll-lock-toggle.locked .scroll-lock-btn {
     border-color: rgba(255, 255, 255, 0.2);
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    box-shadow: none;
   }
 
   .scroll-lock-toggle.locked .scroll-lock-btn img {
@@ -3444,7 +3444,7 @@ body[data-theme='dark'] {
 
   /* 左侧面板头部（文件/待办事项/子智能体标签栏） */
   .sidebar-header {
-    background: #1a1a1a;
+    background: var(--claude-left-rail);
   }
 
   /* 移动端审批面板 - 移除所有背景让内容顶头 */
diff --git a/static/src/styles/components/panels/_left-panel.scss b/static/src/styles/components/panels/_left-panel.scss
index 1ccfb01..15c89d4 100644
--- a/static/src/styles/components/panels/_left-panel.scss
+++ b/static/src/styles/components/panels/_left-panel.scss
@@ -17,6 +17,7 @@
   align-items: stretch;
   flex-shrink: 0;
   margin-left: 52px;
+  background: var(--claude-left-rail);
 }
 
 /* 侧边栏 */
@@ -67,11 +68,11 @@
 }
 
 .compact-status-card {
-  background: var(--claude-panel);
+  background: var(--claude-left-rail);
   border: 1px solid var(--claude-border);
   border-radius: 18px;
   padding: 14px 16px;
-  box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
+  box-shadow: none;
   display: flex;
   align-items: center;
 }
@@ -249,9 +250,9 @@
   border-bottom: 1px solid var(--claude-border);
   position: sticky;
   top: 0;
-  background: rgba(255, 255, 255, 0.85);
+  background: var(--claude-left-rail);
   z-index: 10;
-  backdrop-filter: blur(16px);
+  backdrop-filter: none;
   display: flex;
   align-items: center;
   gap: 10px;
@@ -309,10 +310,10 @@
 }
 
 .sidebar-panel-card {
-  background: var(--claude-panel);
+  background: var(--claude-left-rail);
   border: 1px solid var(--claude-border);
   border-radius: 18px;
-  box-shadow: 0 12px 30px rgba(61, 57, 41, 0.12);
+  box-shadow: none;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -330,7 +331,7 @@
   flex-direction: column;
   min-height: 0;
   overflow: hidden;
-  background: var(--claude-sidebar);
+  background: var(--claude-left-rail);
   padding: 6px 12px 24px;
   border-radius: 0 0 18px 18px;
   border-top: 1px solid rgba(118, 103, 84, 0.12);
@@ -352,7 +353,7 @@
   border: 1px solid rgba(118, 103, 84, 0.2);
   border-radius: 8px;
   padding: 6px 8px;
-  box-shadow: 0 6px 18px rgba(61, 57, 41, 0.12);
+  box-shadow: none;
   z-index: 20;
 }
 
@@ -457,7 +458,7 @@
   border: 1px solid rgba(118, 103, 84, 0.2);
   border-radius: 10px;
   padding: 12px 14px;
-  background: rgba(255, 255, 255, 0.92);
+  background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
   cursor: pointer;
   transition:
     border-color 0.2s ease,
@@ -471,11 +472,11 @@
 
 .sub-agent-card:hover {
   border-color: #6c5ce7;
-  box-shadow: 0 6px 16px rgba(108, 92, 231, 0.15);
+  box-shadow: none;
 
   [data-theme='dark'] & {
     border-color: #8b7ce7;
-    box-shadow: 0 6px 16px rgba(139, 124, 231, 0.25);
+    box-shadow: none;
   }
 }
 
@@ -531,7 +532,7 @@
   color: var(--claude-text-secondary);
   padding: 10px 14px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.8);
+  background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
   border: 1px dashed var(--claude-border);
   text-align: center;
 
@@ -562,7 +563,7 @@
   margin: 0 auto;
   border-radius: 12px;
   border: 1px dashed var(--claude-border-strong);
-  background: var(--theme-surface-muted);
+  background: color-mix(in srgb, var(--claude-left-rail) 90%, var(--theme-surface-strong) 10%);
   padding: 10px 12px;
   position: relative;
   display: flex;
@@ -616,7 +617,7 @@
 .host-workspace-card {
   width: 100%;
   border: 1px solid var(--theme-control-border);
-  background: var(--theme-surface-soft);
+  background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
   border-radius: 10px;
   padding: 10px 12px;
   text-align: left;
@@ -685,12 +686,12 @@
 }
 
 [data-theme='dark'] .host-workspace-header-box {
-  background: rgba(30, 30, 30, 0.78);
+  background: var(--claude-left-rail);
   border-color: rgba(160, 160, 160, 0.45);
 }
 
 [data-theme='dark'] .host-workspace-card {
-  background: #1f1f1f;
+  background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
 
   &:hover:not(:disabled) {
     background: #222222;
@@ -735,7 +736,7 @@
   border-radius: 10px;
   font-size: 13px;
   color: var(--claude-text);
-  background: rgba(255, 255, 255, 0.9);
+  background: color-mix(in srgb, var(--claude-left-rail) 88%, var(--theme-surface-strong) 12%);
 }
 
 .todo-task.done {
@@ -843,7 +844,7 @@
   background: #ffffff;
   border: 1px solid rgba(15, 23, 42, 0.08);
   border-radius: 8px;
-  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
+  box-shadow: none;
   z-index: 3000;
   min-width: 180px;
   padding: 6px 0;
@@ -917,11 +918,11 @@
   top: 0;
   display: flex;
   gap: 4px;
-  background: var(--theme-surface-strong, #ffffff);
+  background: var(--claude-left-rail);
   border: 1px solid var(--claude-border);
   border-radius: 14px;
   padding: 6px;
-  box-shadow: var(--theme-shadow-soft);
+  box-shadow: none;
   z-index: 20;
 }
 
diff --git a/static/src/styles/components/sidebar/_conversation.scss b/static/src/styles/components/sidebar/_conversation.scss
index 8fb5f44..c82b7c1 100644
--- a/static/src/styles/components/sidebar/_conversation.scss
+++ b/static/src/styles/components/sidebar/_conversation.scss
@@ -150,6 +150,10 @@
   height: 29px;
 }
 
+.conversation-menu-btn .chat-icon svg {
+  transform: translateY(3px);
+}
+
 .pencil-icon svg {
   width: 22px;
   height: 22px;
@@ -420,7 +424,7 @@ body[data-theme='dark'] .conversation-sidebar .conversation-item.active:focus-wi
   border: 1px solid var(--claude-border);
   border-radius: 14px;
   background: var(--theme-surface-strong, #fff);
-  box-shadow: var(--theme-shadow-soft);
+  box-shadow: none;
   opacity: 0;
   transform: translateY(-4px) scale(0.98);
   pointer-events: none;