feat(ui): restyle workspace shell and conversation header

apps/ui/src/App.tsx

@@ -329,24 +329,43 @@ function LobsterClawIcon() {
   return (
     <svg viewBox="0 0 64 64" aria-hidden="true" focusable="false">
       <defs>
-        <linearGradient id="lobster-claw-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stopColor="#ff9a6b" />
-          <stop offset="100%" stopColor="#ff7b76" />
+        <linearGradient id="lobster-claw-orb" x1="14%" y1="12%" x2="86%" y2="88%">
+          <stop offset="0%" stopColor="#eefaff" />
+          <stop offset="52%" stopColor="#a7dcff" />
+          <stop offset="100%" stopColor="#4c9dff" />
+        </linearGradient>
+        <linearGradient id="lobster-claw-gradient" x1="12%" y1="12%" x2="88%" y2="90%">
+          <stop offset="0%" stopColor="#f9fdff" />
+          <stop offset="30%" stopColor="#87d2ff" />
+          <stop offset="100%" stopColor="#1f7cf0" />
+        </linearGradient>
+        <linearGradient id="lobster-claw-line" x1="18%" y1="18%" x2="78%" y2="82%">
+          <stop offset="0%" stopColor="#ffffff" />
+          <stop offset="100%" stopColor="#0e63c3" />
         </linearGradient>
       </defs>
+      <circle cx="32" cy="32" r="26.5" fill="url(#lobster-claw-orb)" />
+      <circle cx="32" cy="32" r="26.5" fill="none" stroke="rgba(255,255,255,0.9)" strokeWidth="1.5" />
+      <path
+        d="M15.8 22.5C20 16.8 26.7 13.3 34 13.3c4.7 0 9.1 1.4 12.9 4.1"
+        fill="none"
+        stroke="rgba(255,255,255,0.62)"
+        strokeLinecap="round"
+        strokeWidth="1.8"
+      />
       <path
-        d="M14 42c0-7.8 6.3-14 14-14h3.5c2.2 0 4.3.8 5.9 2.2L50 42.8c1 .9 1.1 2.4.2 3.4l-3.2 3.7a2.4 2.4 0 0 1-3.4.2L31 39.5H28c-1.9 0-3.5 1.6-3.5 3.5v4.2c0 1.3-1.1 2.3-2.3 2.3H16.3c-1.3 0-2.3-1-2.3-2.3V42Z"
+        d="M14 42.4c0-7.7 6.2-13.8 13.9-13.8h3.4c2.2 0 4.3.8 5.9 2.3l12.5 11.7c1 .9 1 2.4.1 3.4l-3.1 3.5a2.4 2.4 0 0 1-3.4.2L30.9 39.2H28c-2 0-3.6 1.6-3.6 3.5v4.5c0 1.3-1 2.3-2.3 2.3h-5.8c-1.3 0-2.3-1-2.3-2.3v-4.8Z"
         fill="url(#lobster-claw-gradient)"
       />
       <path
-        d="M38 16.5c6.7 0 12.3 5.1 13 11.8l.1 1.4-5.9-.1c-5.6 0-10.6-3.3-12.7-8.4l-1.2-2.8 2.9-.9c1.3-.4 2.5-.7 3.8-.9Zm-3.6 14.1c3.7 0 7.2 1.5 9.7 4.2l1.1 1.2-5.3 2.7a13.9 13.9 0 0 1-17.6-4.6l-1.8-2.5 2.6-.9c3.6-1.3 7.5-2 11.3-2Z"
-        fill="#fff3eb"
-        opacity="0.95"
+        d="M37.7 16.2c6.6 0 12.2 5.2 13 11.8l.1 1.3-6-.1c-5.7 0-10.7-3.3-12.8-8.5L30.8 18l2.9-.8c1.2-.4 2.5-.7 4-.9Zm-3.3 14.5c3.7 0 7.1 1.5 9.6 4.1l1 1.1-5.1 2.7a13.8 13.8 0 0 1-17.6-4.5l-1.9-2.5 2.6-.9c3.6-1.3 7.4-2 11.4-2Z"
+        fill="#f8fdff"
+        opacity="0.98"
       />
       <path
-        d="M31.3 22.8c2.2 5.4 7.5 8.9 13.3 8.9h6.5M22.1 32.7c3 3.9 7.6 6.2 12.5 6.2 2.2 0 4.4-.4 6.5-1.3"
+        d="M31.3 22.8c2.2 5.4 7.5 8.9 13.3 8.9h6.4M22.2 32.7c3 3.8 7.6 6.2 12.4 6.2 2.2 0 4.4-.4 6.5-1.3"
         fill="none"
-        stroke="#c85650"
+        stroke="url(#lobster-claw-line)"
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2.2"
@@ -2400,8 +2419,6 @@ export default function App() {
   })));
   const workspaceStatusTone = getWorkspaceStatusTone(chatLaunchState, isBound);
   const workspaceStatusLabel = getWorkspaceStatusLabel(chatLaunchState, isBound);
-  const pageTitle = viewMode === "plugins" ? ui.plugins : viewMode === "knowledge" ? ui.knowledge : ui.settings;
-  const pageDesc = viewMode === "plugins" ? ui.pluginsPageDesc : viewMode === "knowledge" ? ui.knowledgePageDesc : ui.settingsDesc;
   useEffect(() => {
     if (!infoText) {
       return;
@@ -4561,12 +4578,19 @@ export default function App() {
     </span>
   ) : null;
   const conversationPanelLead = viewMode === "chat" ? (
-    <div className="home-microcopy" aria-label="start your idea">
+    <div className="home-microcopy" aria-label="current conversation">
+      <span className="home-microcopy-icon-shell" aria-hidden="true">
         <span className="home-microcopy-icon">
           <LobsterClawIcon />
         </span>
+        <span className="home-microcopy-icon-beam" />
+      </span>
+      <span className="home-microcopy-body">
         <span className="home-microcopy-text">当前对话</span>
-      <span className="home-microcopy-tag">{selectedSkillBadge}</span>
+      </span>
+      <span className={"home-microcopy-tag" + (selectedSkillId === DEFAULT_SKILL.id ? " brand" : "")}>
+        {selectedSkillBadge}
+      </span>
     </div>
   ) : (
     <div className="conversation-panel-kicker expert-hero-kicker">
@@ -5131,19 +5155,6 @@ export default function App() {
         </div>
       </aside>
       <div className={"main-shell" + (isConversationView ? " conversation-main-layout" : "") + (viewMode === "settings" ? " settings-main-shell" : "")}>
-        {viewMode === "plugins" ? (
-          <div className="page-topbar">
-            <div className="page-copy">
-              <h2>{pageTitle}</h2>
-              <p>{pageDesc}</p>
-            </div>
-            <div className="page-drag-strip" aria-hidden="true" />
-            <div className="header-actions">
-              <StatusChip tone={workspaceStatusTone}>{workspaceStatusLabel}</StatusChip>
-              {isMockDesktopApi ? <StatusChip tone="warning">Mock API</StatusChip> : null}
-            </div>
-          </div>
-        ) : null}
         {infoText ? <div className="notice toast-notice">{infoText}</div> : null}
         {errorText ? <div className="notice error">{errorText}</div> : null}
         <main className={"content-area" + (isConversationView ? " conversation-content-area" : "")}>

apps/ui/src/styles.css

@@ -4755,18 +4755,112 @@ button.secondary {
 }
 
 .conversation-shell {
+  --conversation-blue-050: #f5fbff;
+  --conversation-blue-100: #edf7ff;
+  --conversation-blue-200: #deefff;
+  --conversation-blue-300: #cae7ff;
+  --conversation-blue-400: #9fd4f7;
+  --conversation-blue-500: #67b7ed;
+  --conversation-blue-600: #2487d2;
+  --conversation-cyan-500: #3abfdb;
+  --conversation-ink: #1d4059;
+  --conversation-ink-soft: #58728d;
+  --conversation-border: rgba(149, 201, 235, 0.48);
+  --conversation-border-strong: rgba(111, 179, 223, 0.66);
+  --conversation-shadow: 0 24px 48px rgba(79, 137, 182, 0.16);
   grid-template-columns: clamp(232px, 19vw, 280px) minmax(0, 1fr);
 }
 
+.conversation-shell .sidebar {
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(180deg, rgba(200, 232, 250, 0.97) 0%, rgba(224, 242, 253, 0.92) 42%, rgba(209, 235, 250, 0.96) 100%);
+  border-right: 1px solid rgba(123, 185, 224, 0.62);
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.64);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+}
+
+.conversation-shell .sidebar::before,
+.conversation-shell .sidebar::after {
+  content: "";
+  position: absolute;
+  pointer-events: none;
+}
+
+.conversation-shell .sidebar::before {
+  inset: 0;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 32%, rgba(66, 161, 221, 0.14) 100%);
+}
+
+.conversation-shell .sidebar::after {
+  top: -14%;
+  left: -18%;
+  width: 72%;
+  height: 34%;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 72%);
+  opacity: 0.78;
+}
+
 .conversation-sidebar-layout {
+  position: relative;
+  isolation: isolate;
   grid-template-rows: auto minmax(0, 1fr);
-  gap: 12px;
+  gap: 14px;
+  padding: 18px 16px;
 }
 
 .sidebar-top {
+  gap: 12px;
+}
+
+.conversation-shell .nav-list {
   gap: 10px;
 }
 
+.conversation-shell .nav-item {
+  position: relative;
+  min-height: 46px;
+  padding: 0 14px;
+  border-radius: 16px;
+  border: 1px solid transparent;
+  background: linear-gradient(135deg, rgba(242, 250, 255, 0.82), rgba(212, 236, 251, 0.74));
+  color: #2e516c;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(63, 128, 173, 0.12);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+.conversation-shell .nav-item:hover:not(.active) {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(228, 244, 255, 0.78));
+  border-color: rgba(148, 199, 232, 0.46);
+  color: #106bbf;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 24px rgba(89, 150, 194, 0.12);
+  transform: translateY(-1px);
+}
+
+.conversation-shell .nav-item.active {
+  background: linear-gradient(135deg, rgba(248, 253, 255, 0.96), rgba(204, 232, 249, 0.9) 52%, rgba(189, 222, 244, 0.94) 100%);
+  border-color: rgba(103, 170, 216, 0.72);
+  color: #0b63b8;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 30px rgba(55, 122, 169, 0.22);
+}
+
+.conversation-shell .nav-item.active::before {
+  content: "";
+  position: absolute;
+  inset: 1px auto 1px 1px;
+  width: 3px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #86d7ff 0%, #1490db 100%);
+}
+
+.conversation-shell .nav-item-label {
+  letter-spacing: 0.01em;
+}
+
 .conversation-sidebar-action {
   display: grid;
   flex: 0 0 auto;
@@ -4778,6 +4872,34 @@ button.secondary {
   justify-content: flex-start;
   padding: 0 16px;
   border-radius: 16px;
+  border-color: rgba(128, 192, 235, 0.58);
+  background: linear-gradient(135deg, rgba(245, 252, 255, 0.92), rgba(199, 229, 248, 0.88));
+  color: #0e6ec7;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 28px rgba(64, 129, 174, 0.18);
+  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
+}
+
+.conversation-shell .conversation-new-session:hover:not(:disabled) {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(210, 238, 255, 0.92));
+  border-color: rgba(103, 176, 230, 0.74);
+  color: #075eaf;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 30px rgba(76, 143, 193, 0.2);
+  transform: translateY(-1px);
+}
+
+.conversation-shell .conversation-new-session-plus {
+  width: 22px;
+  height: 22px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 999px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(200, 232, 255, 0.9));
+  color: #0f7cd2;
+  box-shadow: inset 0 0 0 1px rgba(133, 190, 229, 0.4);
+}
+
+.conversation-shell .conversation-new-session-label {
+  letter-spacing: 0.01em;
 }
 
 .sidebar-bottom {
@@ -4786,10 +4908,10 @@ button.secondary {
   flex-direction: column;
   overflow-y: auto;
   overflow-x: hidden;
-  gap: 12px;
-  padding-right: 2px;
+  gap: 14px;
+  padding-right: 4px;
   scrollbar-width: thin;
-  scrollbar-color: rgba(139, 92, 246, 0.28) transparent;
+  scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
 }
 
 .sidebar-bottom::-webkit-scrollbar {
@@ -4802,15 +4924,18 @@ button.secondary {
 
 .sidebar-bottom::-webkit-scrollbar-thumb {
   border-radius: 999px;
-  background: rgba(139, 92, 246, 0.28);
+  background: rgba(94, 164, 216, 0.44);
 }
 
-.sidebar-experts-entry,
-.sidebar-session-section {
+.conversation-shell .sidebar-experts-entry,
+.conversation-shell .sidebar-session-section {
   padding: 14px;
   border-radius: 22px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 250, 0.96));
-  box-shadow: 0 18px 34px rgba(17, 24, 39, 0.06);
+  border: 1px solid rgba(170, 213, 239, 0.54);
+  background: linear-gradient(180deg, rgba(242, 250, 255, 0.82), rgba(213, 236, 249, 0.74));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 20px 36px rgba(62, 126, 170, 0.14);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 .sidebar-experts-entry {
@@ -4837,7 +4962,22 @@ button.secondary {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 251, 250, 0.96));
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(241, 249, 255, 0.72));
+}
+
+.conversation-shell .sidebar-section-label,
+.conversation-shell .sidebar-entry-copy,
+.conversation-shell .sidebar-session-main span {
+  color: #6d87a0;
+}
+
+.conversation-shell .sidebar-section-title,
+.conversation-shell .sidebar-session-main strong {
+  color: var(--conversation-ink);
+}
+
+.conversation-shell .sidebar-inline-action {
+  color: #0c73cc;
 }
 
 .sidebar-section-fill {
@@ -4855,20 +4995,136 @@ button.secondary {
 
 .expert-category-header:focus-visible,
 .expert-category-expert-item:focus-visible {
-  outline: 2px solid rgba(109, 93, 252, 0.38);
+  outline: 2px solid rgba(21, 132, 209, 0.42);
   outline-offset: 2px;
 }
 
 .sidebar-session-list {
   min-height: 0;
+  display: grid;
+  gap: 10px;
+  align-content: start;
   overflow: auto;
   padding-right: 2px;
   scrollbar-width: thin;
-  scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
+  scrollbar-color: rgba(94, 164, 216, 0.44) transparent;
 }
 
 .sidebar-session-list::-webkit-scrollbar-thumb {
-  background: rgba(139, 92, 246, 0.3);
+  background: rgba(94, 164, 216, 0.44);
+}
+
+.conversation-shell .expert-category-item {
+  border-radius: 16px;
+  border: 1px solid rgba(173, 214, 239, 0.48);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(235, 247, 255, 0.62));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 22px rgba(85, 147, 192, 0.08);
+}
+
+.conversation-shell .expert-category-item:hover {
+  border-color: rgba(123, 188, 233, 0.58);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(78, 145, 194, 0.12);
+}
+
+.conversation-shell .expert-category-header {
+  min-height: 44px;
+  padding: 0 12px;
+}
+
+.conversation-shell .expert-category-header:hover {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(228, 244, 255, 0.72));
+}
+
+.conversation-shell .expert-category-icon,
+.conversation-shell .expert-category-toggle {
+  color: #3188cf;
+}
+
+.conversation-shell .expert-category-name {
+  color: #365772;
+}
+
+.conversation-shell .expert-category-content {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(226, 242, 255, 0.4));
+  border-top: 1px solid rgba(165, 210, 237, 0.4);
+}
+
+.conversation-shell .expert-category-experts {
+  gap: 6px;
+  padding: 7px;
+}
+
+.conversation-shell .expert-category-expert-item {
+  min-height: 36px;
+  padding: 7px 10px 7px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(174, 215, 239, 0.56);
+  background: rgba(255, 255, 255, 0.66);
+  color: #42617d;
+}
+
+.conversation-shell .expert-category-expert-item:hover {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(229, 245, 255, 0.78));
+  border-color: rgba(126, 191, 233, 0.58);
+  color: #0e6cc3;
+}
+
+.conversation-shell .expert-category-expert-item.active {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 241, 255, 0.9));
+  border-color: rgba(116, 182, 230, 0.68);
+  color: #0a68bc;
+  box-shadow: 0 10px 18px rgba(82, 153, 203, 0.16);
+}
+
+.conversation-shell .expert-category-expert-name {
+  color: currentColor;
+}
+
+.conversation-shell .sidebar-session-card {
+  min-height: 54px;
+  height: 54px;
+  flex: 0 0 54px;
+  align-self: start;
+  padding: 4px;
+  border-radius: 18px;
+  border: 1px solid rgba(172, 214, 239, 0.48);
+  background: linear-gradient(180deg, rgba(247, 252, 255, 0.84), rgba(215, 238, 251, 0.72));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 12px 24px rgba(66, 132, 177, 0.12);
+}
+
+.conversation-shell .sidebar-session-card:hover {
+  background: linear-gradient(180deg, rgba(251, 254, 255, 0.9), rgba(206, 233, 249, 0.8));
+  border-color: rgba(109, 178, 223, 0.6);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 14px 26px rgba(64, 131, 176, 0.16);
+}
+
+.conversation-shell .sidebar-session-card.active {
+  border-color: rgba(90, 165, 214, 0.76);
+  background: linear-gradient(135deg, rgba(250, 254, 255, 0.98), rgba(196, 228, 248, 0.92));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 18px 30px rgba(56, 123, 170, 0.2);
+}
+
+.conversation-shell .sidebar-session-main {
+  min-height: 46px;
+  padding: 0 12px;
+  border-radius: 14px;
+  color: var(--conversation-ink);
+}
+
+.conversation-shell .sidebar-session-main:hover {
+  background: rgba(228, 243, 255, 0.78);
+}
+
+.conversation-shell .sidebar-session-close {
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: inset 0 0 0 1px rgba(167, 209, 236, 0.72);
+  color: #64809d;
+}
+
+.conversation-shell .sidebar-session-close:hover:not(:disabled) {
+  background: rgba(240, 249, 255, 0.94);
+  box-shadow: inset 0 0 0 1px rgba(111, 179, 223, 0.68);
+  color: #0f71ca;
 }
 
 .conversation-shell .conversation-main-layout,
@@ -5702,3 +5958,393 @@ h1, h2, h3, h4, h5, h6,
   font-family: var(--font-heading);
   font-weight: 600;
 }
+
+/* 共享左侧栏最终覆盖：避免切到非对话页时回退到旧紫色主题 */
+.shell.openclaw-theme > .sidebar {
+  background: linear-gradient(180deg, rgba(200, 232, 250, 0.97) 0%, rgba(224, 242, 253, 0.92) 42%, rgba(209, 235, 250, 0.96) 100%);
+  border-right: 1px solid rgba(123, 185, 224, 0.62);
+}
+
+.shell.openclaw-theme > .sidebar::before {
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 32%, rgba(66, 161, 221, 0.14) 100%);
+}
+
+.shell.openclaw-theme .nav-item {
+  background: linear-gradient(135deg, rgba(242, 250, 255, 0.82), rgba(212, 236, 251, 0.74));
+  color: #2e516c;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(63, 128, 173, 0.12);
+}
+
+.shell.openclaw-theme .nav-item:hover:not(.active) {
+  background: linear-gradient(135deg, rgba(250, 254, 255, 0.88), rgba(221, 241, 253, 0.8));
+  border-color: rgba(127, 190, 232, 0.46);
+  color: #106bbf;
+}
+
+.shell.openclaw-theme .nav-item.active {
+  background: linear-gradient(135deg, rgba(248, 253, 255, 0.96), rgba(204, 232, 249, 0.9) 52%, rgba(189, 222, 244, 0.94) 100%);
+  border-color: rgba(103, 170, 216, 0.72);
+  color: #0b63b8;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 30px rgba(55, 122, 169, 0.22);
+}
+
+.shell.openclaw-theme .nav-item.active::before {
+  height: auto;
+  width: 3px;
+  inset: 1px auto 1px 1px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #86d7ff 0%, #1490db 100%);
+}
+
+.shell.openclaw-theme .conversation-new-session {
+  background: linear-gradient(135deg, rgba(245, 252, 255, 0.92), rgba(199, 229, 248, 0.88));
+  color: #0e6ec7;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 16px 28px rgba(64, 129, 174, 0.18);
+}
+
+.shell.openclaw-theme .sidebar-experts-entry,
+.shell.openclaw-theme .sidebar-session-section {
+  background: linear-gradient(180deg, rgba(242, 250, 255, 0.82), rgba(213, 236, 249, 0.74));
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 20px 36px rgba(62, 126, 170, 0.14);
+}
+
+.shell.openclaw-theme .expert-category-item {
+  background: linear-gradient(180deg, rgba(247, 252, 255, 0.82), rgba(214, 237, 250, 0.72));
+  border-color: rgba(132, 192, 230, 0.46);
+  box-shadow: 0 6px 16px rgba(66, 132, 177, 0.1);
+}
+
+.shell.openclaw-theme .expert-category-item:hover {
+  border-color: rgba(107, 178, 223, 0.58);
+  box-shadow: 0 10px 20px rgba(58, 123, 168, 0.14);
+}
+
+.shell.openclaw-theme .expert-category-header:hover {
+  background: linear-gradient(135deg, rgba(249, 253, 255, 0.92), rgba(219, 240, 252, 0.82));
+}
+
+.shell.openclaw-theme .expert-category-icon,
+.shell.openclaw-theme .expert-category-toggle {
+  color: #3188cf;
+}
+
+.shell.openclaw-theme .expert-category-content {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(226, 242, 255, 0.42));
+  border-top: 1px solid rgba(165, 210, 237, 0.4);
+}
+
+.shell.openclaw-theme .expert-category-expert-item {
+  border-color: rgba(174, 215, 239, 0.56);
+  background: rgba(255, 255, 255, 0.7);
+  color: #42617d;
+}
+
+.shell.openclaw-theme .expert-category-expert-item:hover {
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(229, 245, 255, 0.78));
+  border-color: rgba(126, 191, 233, 0.58);
+  color: #0e6cc3;
+}
+
+.shell.openclaw-theme .expert-category-expert-item.active {
+  color: #0a68bc;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(220, 241, 255, 0.9));
+  border-color: rgba(116, 182, 230, 0.68);
+}
+
+/* ui-ux-pro-max: shared neutral-blue sidebar + cool gray workspace refinement */
+.shell.openclaw-theme > .sidebar {
+  background: linear-gradient(180deg, #d3e6f2 0%, #d9eaf4 52%, #d1e3ef 100%);
+  border-right: 1px solid rgba(159, 186, 206, 0.88);
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.72);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.shell.openclaw-theme > .sidebar::before,
+.shell.openclaw-theme > .sidebar::after {
+  display: none;
+}
+
+.shell.openclaw-theme .nav-item {
+  border: 1px solid rgba(174, 198, 216, 0.88);
+  background: #e8f0f5;
+  color: #334a5d;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.shell.openclaw-theme .nav-item:hover:not(.active) {
+  background: #edf4f8;
+  border-color: rgba(136, 174, 202, 0.96);
+  color: #225f95;
+  box-shadow: none;
+  transform: none;
+}
+
+.shell.openclaw-theme .nav-item.active {
+  background: #f7fafc;
+  border-color: rgba(110, 158, 194, 0.96);
+  color: #1f5d96;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .conversation-new-session {
+  border: 1px solid rgba(163, 191, 211, 0.92);
+  background: #eef4f7;
+  color: #245f92;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .conversation-new-session:hover:not(:disabled) {
+  background: #f4f8fa;
+  border-color: rgba(128, 168, 196, 0.98);
+  color: #1e5788;
+  box-shadow: none;
+  transform: none;
+}
+
+.shell.openclaw-theme .conversation-new-session-plus {
+  background: #dbeaf3;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .sidebar-experts-entry,
+.shell.openclaw-theme .sidebar-session-section {
+  border: 1px solid rgba(172, 198, 215, 0.9);
+  background: #e3edf3;
+  box-shadow: none;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+.shell.openclaw-theme .sidebar-digital-workers-title {
+  background: #e3edf3;
+}
+
+.shell.openclaw-theme .expert-category-item {
+  border-color: rgba(175, 199, 216, 0.9);
+  background: #edf3f7;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .expert-category-item:hover {
+  border-color: rgba(145, 180, 203, 0.96);
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .expert-category-header:hover {
+  background: #f4f8fa;
+}
+
+.shell.openclaw-theme .expert-category-content {
+  background: #e8f0f5;
+  border-top: 1px solid rgba(175, 199, 216, 0.82);
+}
+
+.shell.openclaw-theme .expert-category-expert-item {
+  border-color: rgba(179, 201, 217, 0.86);
+  background: #f6f9fb;
+}
+
+.shell.openclaw-theme .expert-category-expert-item:hover {
+  background: #ffffff;
+  border-color: rgba(136, 175, 202, 0.92);
+}
+
+.shell.openclaw-theme .expert-category-expert-item.active {
+  background: #fdfefe;
+  border-color: rgba(112, 160, 194, 0.96);
+}
+
+.shell.openclaw-theme .sidebar-session-card {
+  border-color: rgba(175, 199, 216, 0.9);
+  background: #eff4f7;
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .sidebar-session-card:hover {
+  background: #f5f8fa;
+  border-color: rgba(137, 176, 202, 0.94);
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .sidebar-session-card.active {
+  background: #ffffff;
+  border-color: rgba(112, 160, 194, 0.96);
+  box-shadow: none;
+}
+
+.shell.openclaw-theme .sidebar-session-main:hover {
+  background: #eaf2f7;
+}
+
+.shell.openclaw-theme .sidebar-session-close {
+  background: #f6f9fb;
+  box-shadow: inset 0 0 0 1px rgba(182, 204, 219, 0.92);
+}
+
+.shell.openclaw-theme .sidebar-session-close:hover:not(:disabled) {
+  background: #ffffff;
+  box-shadow: inset 0 0 0 1px rgba(136, 175, 202, 0.96);
+}
+
+.shell.openclaw-theme .sidebar-expert-scroll,
+.shell.openclaw-theme .sidebar-session-list {
+  scrollbar-color: rgba(196, 224, 241, 0.96) transparent;
+}
+
+.shell.openclaw-theme .sidebar-expert-scroll::-webkit-scrollbar-thumb,
+.shell.openclaw-theme .sidebar-session-list::-webkit-scrollbar-thumb {
+  background: rgba(196, 224, 241, 0.96);
+}
+
+.shell.openclaw-theme .sidebar-expert-scroll::-webkit-scrollbar-thumb:hover,
+.shell.openclaw-theme .sidebar-session-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(177, 210, 230, 0.98);
+}
+
+.conversation-shell .conversation-panel-kicker {
+  border-color: rgba(208, 214, 221, 0.96);
+  background: #f7f9fb;
+  color: #556779;
+  box-shadow: none;
+}
+
+.conversation-shell .conversation-workspace {
+  border: 1px solid rgba(212, 219, 225, 0.96);
+  background: linear-gradient(180deg, #fafbfd 0%, #f2f4f7 100%);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
+}
+
+.conversation-shell .conversation-workspace::before,
+.conversation-shell .conversation-workspace::after {
+  display: none;
+}
+
+.conversation-shell .message-bubble {
+  border-color: rgba(216, 222, 228, 0.96);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.97));
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
+}
+
+.conversation-shell .message-bubble-user {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(242, 245, 247, 0.97));
+}
+
+.conversation-shell .message-card.assistant .markdown-body {
+  border-color: rgba(216, 222, 228, 0.96);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(245, 247, 249, 0.98));
+  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
+}
+
+.conversation-shell .composer-shell {
+  background: linear-gradient(180deg, rgba(241, 244, 247, 0.92), rgba(241, 244, 247, 0) 18px);
+  border-top: 1px solid rgba(216, 222, 230, 0.96);
+}
+
+.conversation-shell .composer-resize-handle span {
+  background: rgba(148, 163, 184, 0.32);
+}
+
+.conversation-shell .composer-resize-handle:hover span,
+.conversation-shell .composer-resize-handle:focus-visible span,
+.conversation-shell .composer-shell.resizing .composer-resize-handle span {
+  background: rgba(96, 165, 250, 0.46);
+}
+
+.conversation-shell .composer-resize-handle:focus-visible {
+  outline: 2px solid rgba(96, 165, 250, 0.28);
+}
+
+.conversation-shell .composer-surface {
+  border: 1px solid rgba(211, 217, 224, 0.94);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 246, 248, 0.96));
+  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
+}
+
+.conversation-shell .composer-surface:focus-within {
+  border-color: rgba(96, 165, 250, 0.52);
+  box-shadow:
+    0 0 0 3px rgba(96, 165, 250, 0.12),
+    0 10px 22px rgba(15, 23, 42, 0.06);
+}
+
+.conversation-shell .composer-field textarea::placeholder,
+.conversation-shell .composer-textarea::placeholder {
+  color: #8b99aa;
+}
+
+.conversation-shell .composer-attachment-chip {
+  background: linear-gradient(180deg, rgba(250, 251, 252, 0.98), rgba(239, 242, 245, 0.96));
+  border-color: rgba(211, 217, 224, 0.92);
+  color: #334155;
+}
+
+.conversation-shell .composer-attachment-remove {
+  background: #ffffff;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
+}
+
+.conversation-shell .attachment-trigger.icon-only,
+.conversation-shell .skill-trigger,
+.conversation-shell .skill-chip {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 244, 247, 0.96));
+  color: #2563eb;
+  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
+}
+
+.conversation-shell .attachment-trigger.icon-only:hover:not(:disabled),
+.conversation-shell .skill-trigger:hover:not(:disabled),
+.conversation-shell .skill-chip:hover:not(:disabled),
+.conversation-shell .composer-attachment-remove:hover:not(:disabled) {
+  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(236, 240, 243, 0.98));
+  color: #1d4ed8;
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
+}
+
+.conversation-shell .attachment-trigger.icon-only:focus-visible,
+.conversation-shell .skill-trigger:focus-visible,
+.conversation-shell .skill-chip:focus-visible,
+.conversation-shell .composer-attachment-remove:focus-visible,
+.conversation-shell .composer-submit:focus-visible {
+  outline: 2px solid rgba(96, 165, 250, 0.3);
+}
+
+.conversation-shell .attachment-trigger.icon-only:disabled,
+.conversation-shell .skill-trigger:disabled {
+  background: rgba(244, 246, 248, 0.94);
+  color: rgba(100, 116, 139, 0.56);
+  box-shadow: none;
+}
+
+.conversation-shell .composer-footer {
+  background: linear-gradient(to top, rgba(203, 213, 225, 0.16) 0%, transparent 4px);
+}
+
+.conversation-shell .composer-submit {
+  background: linear-gradient(135deg, #2563eb, #3b82f6);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 12px 24px rgba(37, 99, 235, 0.24);
+}
+
+.conversation-shell .composer-submit:hover:not(:disabled) {
+  background: linear-gradient(135deg, #1d4ed8, #2563eb);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.24),
+    0 14px 28px rgba(37, 99, 235, 0.28);
+}
+
+.conversation-shell .composer-submit:disabled {
+  background: linear-gradient(135deg, #c9d7e6, #dbe4ec);
+}
+
+.conversation-shell .composer-hint {
+  color: #7c8797;
+}
+
+.conversation-shell .empty-state {
+  border: 1px dashed rgba(203, 213, 225, 0.96);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 248, 0.94));
+}