From 51208950942a3ec69fe7b2d90dae0253ea9bedb1 Mon Sep 17 00:00:00 2001
From: bakaECC <1064071566@qq.com>
Date: Wed, 10 Dec 2025 16:27:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E7=A9=BA=E9=97=B4=E4=BB=A3?=
 =?UTF-8?q?=E7=90=86UI=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=92=8C?=
 =?UTF-8?q?=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/chat-layout.css | 993 ++++++++++++++++++++++++++++++++++---
 1 file changed, 936 insertions(+), 57 deletions(-)

diff --git a/src/layout/chat-layout.css b/src/layout/chat-layout.css
index 6598625..b082a91 100644
--- a/src/layout/chat-layout.css
+++ b/src/layout/chat-layout.css
@@ -1,25 +1,778 @@
-/* chat-layout-final.css - 修复滚动 + 白蓝配色 */
+/* chat-layout-final.css - 完全复刻 space-agent-hub 布局 */
 
-/* ========== 1. 根容器（两侧留白：白色） ========== */
-/* 根容器改为水平布局 */
-/* 在 chat-layout-final.css 中 */
+/* ========== 1. 根容器 ========== */
 .chat-root {
+    position: relative !important;
+    display: flex !important;
+    height: 100vh !important;
+    background: hsl(var(--background)) !important;
+    overflow: hidden !important;
+}
+
+/* ========== 2. 侧边栏包装器 ========== */
+.left-sidebar-wrapper {
+    width: 280px !important;
+    height: 100vh !important;
+    flex-shrink: 0 !important;
+    background: rgba(255, 255, 255, 0.3) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
+    position: relative !important;
     display: flex !important;
     flex-direction: column !important;
-    height: 100vh !important;
-    background: linear-gradient(135deg, #f5f7fa 0%, #e3e2fd 100%) !important;
     overflow: hidden !important;
+    z-index: 10 !important;
+}
+
+/* 侧边栏内部高光效果 */
+.left-sidebar-wrapper::before {
+    content: '' !important;
+    position: absolute !important;
+    top: -32px !important;
+    left: -32px !important;
+    width: 128px !important;
+    height: 128px !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+    border-radius: 50% !important;
+    filter: blur(48px) !important;
+    opacity: 0.6 !important;
+    pointer-events: none !important;
+}
+
+.left-sidebar-wrapper::after {
+    content: '' !important;
+    position: absolute !important;
+    top: -24px !important;
+    right: -24px !important;
+    width: 96px !important;
+    height: 96px !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-radius: 50% !important;
+    filter: blur(32px) !important;
+    opacity: 0.5 !important;
+    pointer-events: none !important;
+}
+
+/* ========== 侧边栏内容区域 ========== */
+.sidebar-logo-section {
+    padding: 24px !important;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.sidebar-logo-group {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+}
+
+.sidebar-logo-container {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 16px !important;
+    background: var(--gradient-primary) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+    padding: 6px !important;
+    box-shadow: var(--shadow-liquid) !important;
+    transition: all 0.5s ease !important;
+}
+
+.sidebar-logo-container:hover {
+    box-shadow: var(--shadow-liquid-hover) !important;
+    transform: scale(1.05) !important;
+}
+
+.sidebar-logo-img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain !important;
+    transition: transform 0.5s ease !important;
+}
+
+.sidebar-logo-group:hover .sidebar-logo-img {
+    transform: rotate(12deg) !important;
+}
+
+.sidebar-logo-text {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.sidebar-logo-title {
+    font-size: 16px !important;
+    font-weight: 700 !important;
+    background: var(--gradient-primary) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    margin: 0 !important;
+    line-height: 1.2 !important;
+}
+
+.sidebar-logo-subtitle {
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    margin: 0 !important;
+    line-height: 1.2 !important;
+}
+
+.sidebar-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.sidebar-history-section {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+    padding: 16px !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.sidebar-history-header {
+    flex-shrink: 0 !important;
+    margin-bottom: 16px !important;
+}
+
+.sidebar-history-list {
+    flex: 1 !important;
+    overflow-y: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 8px !important;
+}
+
+.sidebar-history-item {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 8px 12px !important;
+    border-radius: 8px !important;
+    background: rgba(255, 255, 255, 0.1) !important;
+    cursor: pointer !important;
+    transition: all 0.3s ease !important;
+}
+
+.sidebar-history-item:hover {
+    background: rgba(255, 255, 255, 0.2) !important;
+}
+
+.sidebar-history-content {
+    flex: 1 !important;
+    min-width: 0 !important;
+}
+
+.sidebar-history-title {
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    color: hsl(var(--foreground)) !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+    margin-bottom: 4px !important;
+}
+
+.sidebar-history-time {
+    font-size: 11px !important;
+    color: hsl(var(--muted-foreground)) !important;
+}
+
+.sidebar-delete-btn {
+    flex-shrink: 0 !important;
+    width: 24px !important;
+    height: 24px !important;
+    padding: 0 !important;
+    opacity: 0 !important;
+    transition: opacity 0.3s ease !important;
+}
+
+.sidebar-history-item:hover .sidebar-delete-btn {
+    opacity: 1 !important;
+}
+
+.sidebar-empty-history {
+    text-align: center !important;
+    color: hsl(var(--muted-foreground)) !important;
+    font-size: 12px !important;
+    padding: 40px 20px !important;
+}
+
+.sidebar-user-section {
+    padding: 16px !important;
+    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.sidebar-user-card {
+    position: relative !important;
+    background: rgba(255, 255, 255, 0.4) !important;
+    backdrop-filter: blur(24px) !important;
+    -webkit-backdrop-filter: blur(24px) !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    overflow: hidden !important;
+    transition: all 0.5s ease !important;
+}
+
+.sidebar-user-card:hover {
+    transform: scale(1.02) !important;
+}
+
+.sidebar-user-card::before {
+    content: '' !important;
+    position: absolute !important;
+    top: -40px !important;
+    right: -40px !important;
+    width: 128px !important;
+    height: 128px !important;
+    background: rgba(59, 130, 246, 0.1) !important;
+    border-radius: 50% !important;
+    filter: blur(32px) !important;
+    animation: blob-float 20s ease-in-out infinite !important;
+}
+
+.sidebar-user-card {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.sidebar-user-avatar {
+    flex-shrink: 0 !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.sidebar-user-info {
+    flex: 1 !important;
+    min-width: 0 !important;
+}
+
+.sidebar-user-name {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    color: hsl(var(--foreground)) !important;
+    margin: 0 0 4px 0 !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+.sidebar-user-role {
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    margin: 0 !important;
+    white-space: nowrap !important;
+    overflow: hidden !important;
+    text-overflow: ellipsis !important;
+}
+
+/* ========== 3. 主内容包装器 ========== */
+.main-content-wrapper {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    min-width: 0 !important;
+    transition: margin-left 0.3s ease-in-out !important;
+    overflow: hidden !important;
+}
+
+/* ========== 4. Header 顶部栏 ========== */
+.chat-header {
+    height: 64px !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
+    background: hsla(220, 25%, 99%, 0.4) !important;
+    backdrop-filter: blur(24px) !important;
+    -webkit-backdrop-filter: blur(24px) !important;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    padding: 0 32px !important;
+    flex-shrink: 0 !important;
+    position: relative !important;
+    z-index: 20 !important;
+}
+
+.chat-header .header-bottom-line {
+    position: absolute !important;
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 1px !important;
+    background: linear-gradient(90deg, transparent, hsla(220, 25%, 99%, 0.6), transparent) !important;
+    pointer-events: none !important;
+}
+
+.chat-header .header-left {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+}
+
+.chat-header .menu-toggle-btn {
+    background: transparent !important;
+    border: none !important;
+    padding: 8px !important;
+    border-radius: 12px !important;
+    transition: all 0.2s ease !important;
+}
+
+.chat-header .menu-toggle-btn:hover {
+    background: hsla(220, 25%, 99%, 0.6) !important;
+}
+
+.chat-header .header-logo-group {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+}
+
+.chat-header .logo-container {
+    width: 40px !important;
+    height: 40px !important;
+    border-radius: 16px !important;
+    background: var(--gradient-primary) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    overflow: hidden !important;
+    padding: 6px !important;
+    box-shadow: var(--shadow-liquid) !important;
+}
+
+.chat-header .logo-img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain !important;
+}
+
+.chat-header .header-title-group {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.chat-header .header-title {
+    font-size: 16px !important;
+    font-weight: 700 !important;
+    background: var(--gradient-primary) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    margin: 0 !important;
+    line-height: 1.2 !important;
+}
+
+.chat-header .header-subtitle {
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    margin: 0 !important;
+    line-height: 1.2 !important;
+}
+
+.chat-header .header-right {
+    display: flex !important;
+    align-items: center !important;
+    gap: 12px !important;
+}
+
+.chat-header .new-session-btn {
+    background: hsla(220, 25%, 99%, 0.6) !important;
+    border: 1px solid hsla(0, 0%, 0%, 0.1) !important;
+    border-radius: 12px !important;
+    padding: 6px 12px !important;
+    transition: all 0.2s ease !important;
+}
+
+.chat-header .new-session-btn:hover {
+    background: hsla(220, 25%, 99%, 1) !important;
+}
+
+.chat-header .user-avatar {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* ========== 5. Chat Area 聊天区域 ========== */
+.chat-area {
+    flex: 1 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+    background: var(--gradient-glow) !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+/* ========== Blob 背景动画 ========== */
+.chat-area .blob-container {
+    position: absolute !important;
+    inset: 0 !important;
+    overflow: hidden !important;
+    pointer-events: none !important;
+    z-index: 0 !important;
+}
+
+.chat-root .blob {
+    position: absolute !important;
+    border-radius: 50% !important;
+    filter: blur(100px) !important;
+    opacity: 0.4 !important;
+    pointer-events: none !important;
+}
+
+.chat-area .blob {
+    position: absolute !important;
+    border-radius: 50% !important;
+    filter: blur(100px) !important;
+    opacity: 0.4 !important;
+    pointer-events: none !important;
+}
+
+.chat-area .blob-1 {
+    width: 850px !important;
+    height: 850px !important;
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(34, 211, 238, 0.2), rgba(139, 92, 246, 0.25)) !important;
+    top: -200px !important;
+    right: -250px !important;
+    animation: blob-float 20s ease-in-out infinite !important;
+    animation-delay: 0s !important;
+}
+
+.chat-area .blob-2 {
+    width: 900px !important;
+    height: 900px !important;
+    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.25), rgba(56, 189, 248, 0.2)) !important;
+    bottom: -300px !important;
+    left: -300px !important;
+    animation: blob-float-2 25s ease-in-out infinite !important;
+    animation-delay: 5s !important;
+}
+
+.chat-area .blob-3 {
+    width: 750px !important;
+    height: 750px !important;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(96, 165, 250, 0.22), rgba(139, 92, 246, 0.18)) !important;
+    top: 10% !important;
+    left: -200px !important;
+    animation: blob-float-3 30s ease-in-out infinite !important;
+    animation-delay: 10s !important;
+}
+
+.chat-area .blob-4 {
+    width: 800px !important;
+    height: 800px !important;
+    background: linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(59, 130, 246, 0.25), rgba(139, 92, 246, 0.22)) !important;
+    bottom: -250px !important;
+    right: 15% !important;
+    animation: blob-float 22s ease-in-out infinite !important;
+    animation-delay: 7s !important;
+}
+
+.chat-area .blob-5 {
+    width: 700px !important;
+    height: 700px !important;
+    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(139, 92, 246, 0.22), rgba(236, 72, 153, 0.18)) !important;
+    top: 45% !important;
+    right: 5% !important;
+    animation: blob-float-2 28s ease-in-out infinite !important;
+    animation-delay: 12s !important;
+}
+
+.chat-area .blob-6 {
+    width: 720px !important;
+    height: 720px !important;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18), rgba(59, 130, 246, 0.22), rgba(56, 189, 248, 0.18)) !important;
+    top: 35% !important;
+    left: 8% !important;
+    animation: blob-float-3 26s ease-in-out infinite !important;
+    animation-delay: 15s !important;
+}
+
+/* ========== 6. 消息滚动区域 ========== */
+.messages-scroll-area {
+    flex: 1 !important;
+    padding: 0 32px !important;
+    position: relative !important;
+    z-index: 10 !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+}
+
+.messages-container {
+    max-width: 1280px !important;
+    margin: 0 auto !important;
+    padding: 40px 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 16px !important;
+}
+
+/* ========== 7. 空状态欢迎界面 ========== */
+.empty-state {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    height: 100% !important;
+    padding: 96px 0 !important;
+}
+
+.empty-state-content {
+    text-align: center !important;
+    max-width: 512px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 24px !important;
+}
+
+.empty-logo-wrapper {
+    position: relative !important;
+    width: 96px !important;
+    height: 96px !important;
+    margin: 0 auto !important;
+}
+
+.empty-logo-glow {
+    position: absolute !important;
+    inset: 0 !important;
+    background: var(--gradient-primary) !important;
+    border-radius: 24px !important;
+    filter: blur(32px) !important;
+    opacity: 0.4 !important;
+}
+
+.empty-logo-main {
+    position: relative !important;
+    width: 96px !important;
+    height: 96px !important;
+    border-radius: 24px !important;
+    background: var(--gradient-primary) !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    box-shadow: var(--shadow-liquid) !important;
+    overflow: hidden !important;
+    padding: 12px !important;
+    z-index: 10 !important;
+}
+
+.empty-logo-img {
+    width: 100% !important;
+    height: 100% !important;
+    object-fit: contain !important;
+    transition: transform 0.5s ease !important;
+}
+
+.empty-logo-wrapper:hover .empty-logo-img {
+    transform: scale(1.1) rotate(12deg) !important;
+}
+
+.empty-text-content {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 12px !important;
+}
+
+.empty-title {
+    font-size: 24px !important;
+    font-weight: 700 !important;
+    color: hsl(var(--foreground)) !important;
+    margin: 0 !important;
+}
+
+.empty-description {
+    font-size: 14px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    line-height: 1.6 !important;
+    margin: 0 !important;
+}
+
+/* ========== 8. Floating Input Area ========== */
+.floating-input-area {
+    position: sticky !important;
+    bottom: 0 !important;
+    z-index: 50 !important;
+    padding: 24px 32px !important;
+    background: transparent !important;
+}
+
+.input-container {
+    max-width: 1280px !important;
+    margin: 0 auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 12px !important;
+}
+
+/* ========== 9. Quick Actions 快速操作 ========== */
+.quick-actions-wrapper {
+    position: relative !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    flex-wrap: wrap !important;
+    min-height: 24px !important;
+}
+
+.quick-actions-label {
+    position: absolute !important;
+    left: 0 !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    color: hsla(var(--muted-foreground), 0.2) !important;
+    user-select: none !important;
+    pointer-events: none !important;
+    z-index: 0 !important;
+}
+
+.quick-actions-buttons {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    flex-wrap: wrap !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.quick-action-btn {
+    height: 24px !important;
+    padding: 0 12px !important;
+    border-radius: 6px !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    backdrop-filter: blur(4px) !important;
+    border: 1px solid rgba(255, 255, 255, 1) !important;
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    transition: all 0.2s ease !important;
+    cursor: pointer !important;
+    font-family: inherit !important;
+}
+
+.quick-action-btn:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 1) !important;
+    border-color: rgba(255, 255, 255, 1) !important;
+    color: hsl(var(--foreground)) !important;
+}
+
+.quick-action-btn:disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+}
+
+/* ========== 10. Chat Input Form ========== */
+.chat-input-form {
+    position: relative !important;
+}
+
+.chat-input-wrapper {
+    position: relative !important;
+    background: rgba(255, 255, 255, 0.3) !important;
+    backdrop-filter: blur(24px) !important;
+    -webkit-backdrop-filter: blur(24px) !important;
+    border-radius: 24px !important;
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
+    padding: 24px !important;
+    transition: all 0.3s ease !important;
+}
+
+.chat-input-wrapper:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
+}
+
+.input-inner-wrapper {
+    display: flex !important;
+    align-items: flex-end !important;
+    gap: 12px !important;
+}
+
+.chat-textarea {
+    flex: 1 !important;
+}
+
+.chat-textarea :deep(.el-textarea__inner) {
+    min-height: 44px !important;
+    max-height: 200px !important;
+    resize: none !important;
+    border: none !important;
+    background: transparent !important;
+    padding: 12px 16px !important;
+    padding-right: 80px !important;
+    font-size: 18px !important;
+    line-height: 1.5 !important;
+    color: hsl(var(--foreground)) !important;
+    transition: all 0.3s ease !important;
+    overflow-y: auto !important;
+}
+
+.chat-textarea :deep(.el-textarea__inner::placeholder) {
+    color: hsla(var(--muted-foreground), 0.6) !important;
+}
+
+.chat-textarea :deep(.el-textarea__inner:focus) {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.send-button {
+    height: 32px !important;
+    padding: 0 16px !important;
+    border-radius: 8px !important;
+    background: var(--gradient-primary) !important;
+    border: none !important;
+    color: white !important;
+    font-size: 12px !important;
+    font-weight: 500 !important;
+    box-shadow: 0 2px 8px hsla(var(--primary), 0.3) !important;
+    transition: all 0.2s ease !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 6px !important;
+    flex-shrink: 0 !important;
+    z-index: 10 !important;
+}
+
+.send-button:hover:not(:disabled) {
+    transform: scale(1.05) !important;
+    box-shadow: 0 4px 12px hsla(var(--primary), 0.4) !important;
+}
+
+.send-button:disabled {
+    opacity: 0.5 !important;
+    cursor: not-allowed !important;
+    transform: none !important;
+}
+
+.keyboard-hint {
+    font-size: 12px !important;
+    color: hsla(var(--muted-foreground), 0.6) !important;
+    text-align: center !important;
+    margin: 0 !important;
 }
 
 /* ========== 3. 左侧边栏（固定宽度，居左） ========== */
 .left-sidebar {
+    position: relative !important;
+    z-index: 10 !important;
     flex-shrink: 0 !important;
     width: 350px !important;
     height: 100% !important;
-    background: rgba(255, 255, 255, 0.7) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
-    border-right: 1px solid rgba(200, 200, 200, 0.3) !important;
+    background: rgba(255, 255, 255, 0.3) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
     padding: 16px !important;
     box-sizing: border-box !important;
     overflow-y: auto !important;
@@ -27,23 +780,25 @@
     flex-direction: column !important;
     gap: 16px !important;
     border-radius: 24px 0 0 24px !important;
-    box-shadow: 4px 0 16px rgba(0,0,0,0.05) !important;
+    box-shadow: 4px 0 16px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
 }
 
 
 /* 右侧主聊天区域 */
 .chat-main-content {
+    position: relative !important;
+    z-index: 10 !important;
     flex: 1 !important;
     /*max-width: 1700px !important;  */
     display: flex !important;
     flex-direction: column !important; /* 垂直：header + main + footer */
     overflow: hidden !important;
-    background: rgba(187, 222, 251, 0.7) !important;
-    backdrop-filter: blur(10px) !important;
-    -webkit-backdrop-filter: blur(10px) !important;
-    border: 1px solid rgba(255, 255, 255, 0.5) !important;
+    background: rgba(255, 255, 255, 0.4) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
     border-radius: 0 24px 24px 0 !important;
-    box-shadow: 0 25px 50px rgba(2, 132, 199, 0.15) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
 }
 
 /* 左侧边栏头部 */
@@ -243,63 +998,164 @@
     gap: 24px;
 }
 
+/* ========== 消息列表样式 ========== */
+.message-list {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 20px !important;
+}
+
 /* ========== 5. 消息项 ========== */
 .message-wrapper {
-    display: flex;
-    gap: 12px;
-    align-items: flex-start;
-    animation: floatIn 0.4s ease-out;
+    display: flex !important;
+    gap: 20px !important;
+    align-items: flex-start !important;
+    padding: 20px 0 !important;
+    animation: fadeIn 0.4s ease-out !important;
 }
 
 .message-wrapper.user {
-    flex-direction: row-reverse;
+    flex-direction: row-reverse !important;
 }
 
 .avatar {
-    flex-shrink: 0;
-    border: 2px solid rgba(56, 189, 248, 0.3);
-    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
-    transition: all 0.3s ease;
+    flex-shrink: 0 !important;
+    width: 44px !important;
+    height: 44px !important;
+    border: 2px solid hsl(var(--border)) !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+    transition: all 0.2s ease !important;
+}
+
+.message-wrapper.user .avatar {
+    background: var(--gradient-primary) !important;
+    border-color: transparent !important;
+    box-shadow: var(--shadow-glow) !important;
+}
+
+.message-wrapper:not(.user) .avatar {
+    background: hsla(220, 25%, 99%, 1) !important;
 }
 
 .avatar:hover {
-    transform: scale(1.1);
+    transform: scale(1.05) !important;
 }
 
-/* ========== 6. 消息气泡（浮窗样式） ========== */
-/* 修改 .bubble-float 允许内容溢出 */
+/* ========== 6. 消息气泡（Liquid Glass Bubble） ========== */
 .bubble-float {
     position: relative !important;
-    padding: 16px 20px !important;
-    border-radius: 18px !important;
-    backdrop-filter: blur(12px) !important;
-    -webkit-backdrop-filter: blur(12px) !important;
-    border: 1px solid !important;
-    box-shadow: 0 8px 32px rgba(2, 132, 199, 0.15) !important;
-    max-width: 70% !important;
+    padding: 20px 28px !important;
+    border-radius: 16px !important;
+    max-width: 768px !important;
     word-wrap: break-word !important;
-    transition: all 0.3s ease !important;
-    overflow: visible !important; /* 关键：允许按钮溢出显示 */
+    transition: all 0.5s ease !important;
+    overflow: hidden !important;
 }
 
-/* 机器人消息：白色边框 */
-.message-wrapper:not(.user) .bubble-float {
-    background: rgba(255, 255, 255, 0.95);
-    border-color: #ffffff !important; /* 改为白色边框 */
-    color: #1e293b;
+/* 消息头部 */
+.message-header {
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
+    margin-bottom: 12px !important;
+    position: relative !important;
+    z-index: 10 !important;
 }
 
-/* 修改用户消息气泡为浅蓝色 */
+.message-wrapper.user .message-header {
+    flex-direction: row-reverse !important;
+}
+
+.message-role {
+    font-size: 14px !important;
+    font-weight: 600 !important;
+}
+
+.message-wrapper.user .message-role {
+    color: white !important;
+}
+
+.message-wrapper:not(.user) .message-role {
+    color: hsl(var(--foreground)) !important;
+}
+
+.message-time {
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+}
+
+/* 用户消息：渐变背景 */
 .message-wrapper.user .bubble-float {
-    background: rgba(0, 81, 255, 0.05) !important; /* 浅蓝色半透明 */
-    border-color: rgb(255, 255, 255) !important;
-    color: rgba(14, 8, 8, 0.89) !important; /* 深蓝色文字确保可读 */
-    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.2) !important; /* 调整阴影颜色 */
+    background: var(--gradient-primary) !important;
+    color: white !important;
+    box-shadow: var(--shadow-neumorphic) !important;
 }
 
-.bubble-float:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 12px 40px rgba(2, 132, 199, 0.25);
+.message-wrapper.user .bubble-float:hover {
+    box-shadow: var(--shadow-neumorphic-hover) !important;
+}
+
+/* AI消息：玻璃态效果 */
+.message-wrapper:not(.user) .bubble-float {
+    background: rgba(255, 255, 255, 0.3) !important;
+    backdrop-filter: blur(24px) !important;
+    -webkit-backdrop-filter: blur(24px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    color: hsl(var(--foreground)) !important;
+}
+
+.message-wrapper:not(.user) .bubble-float:hover {
+    transform: scale(1.01) !important;
+}
+
+/* AI消息的高光效果 */
+.message-wrapper:not(.user) .bubble-float::before {
+    content: '' !important;
+    position: absolute !important;
+    top: -32px !important;
+    left: -32px !important;
+    width: 128px !important;
+    height: 128px !important;
+    background: rgba(255, 255, 255, 0.2) !important;
+    border-radius: 50% !important;
+    filter: blur(48px) !important;
+    opacity: 0.6 !important;
+    pointer-events: none !important;
+}
+
+.message-wrapper:not(.user) .bubble-float::after {
+    content: '' !important;
+    position: absolute !important;
+    top: -24px !important;
+    right: -24px !important;
+    width: 96px !important;
+    height: 96px !important;
+    background: rgba(255, 255, 255, 0.15) !important;
+    border-radius: 50% !important;
+    filter: blur(32px) !important;
+    opacity: 0.5 !important;
+    pointer-events: none !important;
+}
+
+/* 顶部高光线 */
+.message-wrapper:not(.user) .bubble-float {
+    position: relative !important;
+}
+
+.message-wrapper:not(.user) .bubble-float > *:first-child::before {
+    content: '' !important;
+    position: absolute !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    height: 1px !important;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent) !important;
+    opacity: 0.6 !important;
+    transition: opacity 0.3s ease !important;
+}
+
+.message-wrapper:not(.user) .bubble-float:hover > *:first-child::before {
+    opacity: 1 !important;
 }
 
 /* 机器人第一条问候语占满宽度 */
@@ -310,16 +1166,28 @@
 
 
 .content {
-    font-size: 15px;
-    line-height: 1.6;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    white-space: pre-wrap !important;
+    word-wrap: break-word !important;
+    position: relative !important;
+    z-index: 10 !important;
+}
+
+.message-wrapper.user .content {
+    color: white !important;
+}
+
+.message-wrapper:not(.user) .content {
+    color: hsl(var(--foreground)) !important;
 }
 
 .time {
-    margin-top: 8px;
-    font-size: 12px;
-    color: #94a3b8;
-    text-align: right;
-    opacity: 0.8;
+    margin-top: 16px !important;
+    font-size: 12px !important;
+    color: hsl(var(--muted-foreground)) !important;
+    text-align: right !important;
+    opacity: 0.8 !important;
 }
 
 
@@ -762,6 +1630,17 @@
 }
 
 /* ========== 14. 动画效果 ========== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+}
+
 @keyframes floatIn {
     from {
         opacity: 0;