From 9c4d39e29d0d2cb8a1272116522840b0e41b5c59 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Thu, 26 Feb 2026 21:22:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-gold/src/components/SidebarNav.vue    |  64 +-
 .../src/components/agents/HistoryPanel.vue    | 839 ++++++++++++------
 2 files changed, 645 insertions(+), 258 deletions(-)

diff --git a/frontend/app/web-gold/src/components/SidebarNav.vue b/frontend/app/web-gold/src/components/SidebarNav.vue
index 992a796f74..8405398aad 100644
--- a/frontend/app/web-gold/src/components/SidebarNav.vue
+++ b/frontend/app/web-gold/src/components/SidebarNav.vue
@@ -20,6 +20,21 @@ function filterVisibleGroups(config, isLoggedIn) {
 const visibleNavConfig = computed(() => {
   return filterVisibleGroups(navConfig, userStore.isLoggedIn)
 })
+
+// 脱敏手机号
+const maskedMobile = computed(() => {
+  const mobile = userStore.mobile
+  if (!mobile) return '未设置'
+  return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+})
+
+// 剩余额度百分比
+const remainingPercent = computed(() => {
+  const total = userStore.totalStorage
+  const remaining = userStore.remainingStorage
+  if (total === 0) return 0
+  return Math.min(100, Math.round((remaining / total) * 100))
+})
 </script>
 
 <template>
@@ -43,6 +58,17 @@ const visibleNavConfig = computed(() => {
         </router-link>
       </div>
     </nav>
+    <!-- 底部用户信息卡片 -->
+    <router-link
+      v-if="userStore.isLoggedIn"
+      to="/user/profile"
+      class="sidebar__footer"
+    >
+      <div class="user-card">
+        <div class="user-card__mobile">{{ maskedMobile }}</div>
+        <div class="user-card__quota">剩余额度 {{ remainingPercent }}%</div>
+      </div>
+    </router-link>
   </aside>
 </template>
 
@@ -54,10 +80,13 @@ const visibleNavConfig = computed(() => {
   width: 220px;
   border-right: 1px solid var(--color-border);
   background: var(--color-surface);
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   padding: 12px;
@@ -125,4 +154,37 @@ const visibleNavConfig = computed(() => {
 .nav-item__label {
   font-size: 14px;
 }
+
+/* 底部用户信息卡片 */
+.sidebar__footer {
+  flex-shrink: 0;
+  padding: 12px;
+  border-top: 1px solid var(--color-border);
+  text-decoration: none;
+}
+
+.user-card {
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--color-slate-50);
+  cursor: pointer;
+  transition: background .2s ease, transform .12s ease;
+}
+
+.user-card:hover {
+  background: var(--color-slate-100);
+  transform: translateY(-1px);
+}
+
+.user-card__mobile {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-slate-700);
+  margin-bottom: 6px;
+}
+
+.user-card__quota {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
 </style>
diff --git a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
index d62210de52..83f4d8391d 100644
--- a/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
+++ b/frontend/app/web-gold/src/components/agents/HistoryPanel.vue
@@ -1,104 +1,147 @@
 <template>
-  <transition name="history-slide">
-    <div v-if="visible" class="history-panel">
-      <!-- Header -->
-      <header class="panel-header">
-        <div class="header-left">
-          <button v-if="selectedConversation" class="back-btn" @click="backToList">
-            <LeftOutlined />
-          </button>
-          <h3 class="header-title">{{ selectedConversation ? '对话详情' : '历史记录' }}</h3>
-        </div>
-        <button class="close-btn" @click="handleClose">
-          <CloseOutlined />
-        </button>
-      </header>
+  <teleport to="body">
+    <transition name="history-modal">
+      <div v-if="visible" class="history-overlay" @click.self="handleClose">
+        <!-- Modal Container -->
+        <div class="history-modal">
+          <!-- Decorative Elements -->
+          <div class="modal-glow"></div>
 
-      <!-- Content -->
-      <div class="panel-content">
-        <!-- Conversation List -->
-        <div v-if="!selectedConversation" class="conversation-view">
-          <a-spin :spinning="loading">
-            <!-- Empty State -->
-            <div v-if="groupedConversations.length === 0 && !loading" class="empty-state">
-              <div class="empty-visual">
-                <div class="visual-ring"></div>
-                <HistoryOutlined class="empty-icon" />
+          <!-- Header -->
+          <header class="modal-header">
+            <div class="header-content">
+              <div v-if="selectedConversation" class="header-nav">
+                <button class="nav-back" @click="backToList">
+                  <LeftOutlined />
+                  <span>返回列表</span>
+                </button>
+              </div>
+              <div class="header-title-group">
+                <h2 class="modal-title">
+                  <HistoryOutlined class="title-icon" />
+                  {{ selectedConversation ? '对话详情' : '历史记录' }}
+                </h2>
+                <p v-if="!selectedConversation" class="modal-subtitle">
+                  查看你与 AI 的所有对话
+                </p>
               </div>
-              <p class="empty-text">暂无历史记录</p>
-              <p class="empty-hint">开始对话后，记录将保存在这里</p>
             </div>
+            <button class="close-btn" @click="handleClose">
+              <CloseOutlined />
+            </button>
+          </header>
 
-            <!-- Grouped List -->
-            <div v-else class="conversation-groups">
-              <div
-                v-for="group in groupedConversations"
-                :key="group.label"
-                class="conversation-group"
-              >
-                <div class="group-header">
-                  <span class="group-label">{{ group.label }}</span>
-                  <span class="group-count">{{ group.items.length }}</span>
+          <!-- Content -->
+          <div class="modal-body">
+            <!-- Conversation List View -->
+            <div v-if="!selectedConversation" class="list-view">
+              <a-spin :spinning="loading">
+                <!-- Empty State -->
+                <div v-if="groupedConversations.length === 0 && !loading" class="empty-state">
+                  <div class="empty-illustration">
+                    <div class="illustration-ring"></div>
+                    <div class="illustration-ring delay-1"></div>
+                    <HistoryOutlined class="illustration-icon" />
+                  </div>
+                  <h3 class="empty-title">暂无历史记录</h3>
+                  <p class="empty-desc">开始对话后，记录将保存在这里</p>
                 </div>
-                <div class="group-list">
-                  <button
-                    v-for="item in group.items"
-                    :key="item.id"
-                    class="conversation-card"
-                    @click="selectConversation(item)"
+
+                <!-- Grouped Conversations -->
+                <div v-else class="conversation-groups">
+                  <div
+                    v-for="(group, groupIndex) in groupedConversations"
+                    :key="group.label"
+                    class="conversation-group"
+                    :style="{ '--group-index': groupIndex }"
                   >
-                    <div class="card-main">
-                      <h4 class="card-title">{{ item.name || '未命名会话' }}</h4>
-                      <p class="card-preview">{{ item.preview || '暂无预览' }}</p>
+                    <div class="group-header">
+                      <span class="group-dot"></span>
+                      <span class="group-label">{{ group.label }}</span>
+                      <span class="group-count">{{ group.items.length }}</span>
                     </div>
-                    <div class="card-meta">
-                      <span class="meta-time">
-                        <ClockCircleOutlined />
-                        {{ formatTime(item.updatedAt || item.createdAt) }}
-                      </span>
-                      <RightOutlined class="meta-arrow" />
+                    <div class="group-items">
+                      <button
+                        v-for="(item, itemIndex) in group.items"
+                        :key="item.id"
+                        class="conversation-item"
+                        :style="{ '--item-index': itemIndex }"
+                        @click="selectConversation(item)"
+                      >
+                        <div class="item-indicator"></div>
+                        <div class="item-content">
+                          <h4 class="item-title">{{ item.name || '未命名会话' }}</h4>
+                          <p class="item-preview">{{ item.preview || '暂无预览内容' }}</p>
+                        </div>
+                        <div class="item-meta">
+                          <span class="meta-time">
+                            <ClockCircleOutlined />
+                            {{ formatTime(item.updatedAt || item.createdAt) }}
+                          </span>
+                          <div class="meta-arrow">
+                            <RightOutlined />
+                          </div>
+                        </div>
+                      </button>
                     </div>
-                  </button>
+                  </div>
                 </div>
-              </div>
+              </a-spin>
             </div>
-          </a-spin>
-        </div>
 
-        <!-- Message Detail -->
-        <div v-else class="message-view">
-          <a-spin :spinning="messageLoading">
-            <div v-if="messageList.length === 0 && !messageLoading" class="empty-state">
-              <CommentOutlined class="empty-icon" />
-              <p>暂无消息</p>
-            </div>
-            <div v-else class="message-list">
-              <div v-for="(msg, index) in messageList" :key="msg.id" class="message-item">
-                <div class="message-bubble message-bubble--user">
-                  <div class="bubble-header">
-                    <UserOutlined class="bubble-avatar" />
-                    <span class="bubble-label">你的问题</span>
-                    <span class="bubble-time">{{ formatTime(msg.createdAt) }}</span>
-                  </div>
-                  <p class="bubble-content">{{ msg.query }}</p>
+            <!-- Message Detail View -->
+            <div v-else class="detail-view">
+              <a-spin :spinning="messageLoading">
+                <div v-if="messageList.length === 0 && !messageLoading" class="empty-state">
+                  <CommentOutlined class="empty-icon-single" />
+                  <p>暂无消息记录</p>
                 </div>
-                <div class="message-bubble message-bubble--ai">
-                  <div class="bubble-header">
-                    <RobotOutlined class="bubble-avatar" />
-                    <span class="bubble-label">AI 回答</span>
-                    <button class="bubble-copy" @click="copyContent(msg.answer)">
-                      <CopyOutlined />
-                    </button>
+
+                <div v-else class="message-timeline">
+                  <div
+                    v-for="(msg, index) in messageList"
+                    :key="msg.id"
+                    class="timeline-item"
+                    :style="{ '--msg-index': index }"
+                  >
+                    <!-- User Message -->
+                    <div class="message-block message-block--user">
+                      <div class="message-avatar">
+                        <UserOutlined />
+                      </div>
+                      <div class="message-body">
+                        <div class="message-header">
+                          <span class="message-author">你</span>
+                          <span class="message-time">{{ formatTime(msg.createdAt) }}</span>
+                        </div>
+                        <div class="message-content">{{ msg.query }}</div>
+                      </div>
+                    </div>
+
+                    <!-- AI Response -->
+                    <div class="message-block message-block--ai">
+                      <div class="message-avatar">
+                        <RobotOutlined />
+                      </div>
+                      <div class="message-body">
+                        <div class="message-header">
+                          <span class="message-author">AI 助手</span>
+                          <button class="copy-btn" @click="copyContent(msg.answer)" title="复制">
+                            <CopyOutlined />
+                          </button>
+                        </div>
+                        <div class="message-content">{{ msg.answer }}</div>
+                      </div>
+                    </div>
                   </div>
-                  <p class="bubble-content">{{ msg.answer }}</p>
                 </div>
-              </div>
+              </a-spin>
             </div>
-          </a-spin>
+          </div>
         </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </teleport>
 </template>
 
 <script setup>
@@ -210,7 +253,7 @@ const handleClose = () => {
 
 const copyContent = async (content) => {
   const success = await copyToClipboard(content)
-  success ? message.success('已复制') : message.error('复制失败')
+  success ? message.success('已复制到剪贴板') : message.error('复制失败')
 }
 
 const formatTime = (timestamp) => {
@@ -239,212 +282,367 @@ watch(() => props.visible, (val) => {
 </script>
 
 <style scoped lang="less">
-// 使用设计系统变量
-
-.history-panel {
-  position: absolute;
+// ========================================
+// Overlay & Modal Container
+// ========================================
+.history-overlay {
+  position: fixed;
   inset: 0;
-  background: var(--color-bg-page);
-  z-index: 20;
-  display: flex;
-  flex-direction: column;
-}
-
-// Header
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px 20px;
-  background: rgba(255, 255, 255, 0.95);
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--color-gray-200);
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
-
-.back-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
-  border: none;
-  background: transparent;
-  color: var(--color-gray-600);
-  cursor: pointer;
+  background: rgba(15, 23, 42, 0.4);
+  backdrop-filter: blur(8px);
+  z-index: 2000;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--duration-fast);
+  padding: 40px;
+}
+
+.history-modal {
+  position: relative;
+  width: 100%;
+  max-width: 720px;
+  max-height: calc(100vh - 80px);
+  background: var(--color-bg-page);
+  border-radius: 20px;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    0 20px 50px -12px rgba(0, 0, 0, 0.25),
+    0 8px 20px -8px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at 30% 20%,
+    rgba(59, 130, 246, 0.08) 0%,
+    transparent 40%
+  );
+  pointer-events: none;
+}
+
+// ========================================
+// Header
+// ========================================
+.modal-header {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 24px 28px 20px;
+  border-bottom: 1px solid var(--color-gray-200);
+  background: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0));
+}
+
+.header-content {
+  flex: 1;
+}
+
+.header-nav {
+  margin-bottom: 12px;
+}
+
+.nav-back {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  border: none;
+  background: var(--color-gray-100);
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-gray-600);
+  cursor: pointer;
+  transition: all 0.2s ease;
 
   &:hover {
-    background: var(--color-gray-100);
+    background: var(--color-gray-200);
     color: var(--color-gray-900);
   }
 }
 
-.header-title {
-  font-size: 15px;
-  font-weight: 600;
+.header-title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.modal-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 20px;
+  font-weight: 700;
   color: var(--color-gray-900);
   margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.title-icon {
+  font-size: 18px;
+  color: var(--color-primary-500);
+}
+
+.modal-subtitle {
+  font-size: 14px;
+  color: var(--color-gray-500);
+  margin: 0;
+  padding-left: 28px;
 }
 
 .close-btn {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-sm);
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
   border: none;
-  background: transparent;
-  color: var(--color-gray-600);
+  background: var(--color-gray-100);
+  border-radius: 10px;
+  color: var(--color-gray-500);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--duration-fast);
+  transition: all 0.2s ease;
 
   &:hover {
     background: var(--color-error-100);
     color: var(--color-error-500);
+    transform: scale(1.05);
   }
 }
 
-// Content
-.panel-content {
+// ========================================
+// Modal Body
+// ========================================
+.modal-body {
   flex: 1;
   overflow-y: auto;
-  padding: 16px;
+  padding: 20px 28px 28px;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-gray-300);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--color-gray-400);
+    }
+  }
 }
 
+// ========================================
 // Empty State
+// ========================================
 .empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 80px 20px;
+  padding: 60px 20px;
   text-align: center;
 }
 
-.empty-visual {
+.empty-illustration {
   position: relative;
   width: 80px;
   height: 80px;
   margin-bottom: 24px;
 }
 
-.visual-ring {
+.illustration-ring {
   position: absolute;
   inset: 0;
   border-radius: 50%;
-  border: 2px dashed var(--color-gray-300);
-  animation: ringRotate 20s linear infinite;
+  border: 2px solid var(--color-gray-200);
+  animation: ringPulse 3s ease-in-out infinite;
+
+  &.delay-1 {
+    inset: 8px;
+    animation-delay: 0.5s;
+  }
 }
 
-@keyframes ringRotate {
-  to { transform: rotate(360deg); }
+@keyframes ringPulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 1;
+  }
 }
 
-.empty-icon {
+.illustration-icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  font-size: 32px;
-  color: var(--color-gray-500);
+  font-size: 28px;
+  color: var(--color-gray-400);
 }
 
-.empty-text {
-  font-size: 15px;
-  font-weight: 500;
+.empty-title {
+  font-size: 16px;
+  font-weight: 600;
   color: var(--color-gray-900);
   margin: 0 0 6px;
 }
 
-.empty-hint {
-  font-size: 13px;
+.empty-desc {
+  font-size: 14px;
   color: var(--color-gray-500);
   margin: 0;
 }
 
+.empty-icon-single {
+  font-size: 40px;
+  color: var(--color-gray-300);
+  margin-bottom: 16px;
+}
+
+// ========================================
 // Conversation Groups
+// ========================================
 .conversation-groups {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 24px;
 }
 
 .conversation-group {
-  // Group styling
+  animation: groupFadeIn 0.4s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.1s);
+}
+
+@keyframes groupFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .group-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
+  gap: 10px;
+  margin-bottom: 12px;
   padding: 0 4px;
 }
 
+.group-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-primary-500);
+}
+
 .group-label {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
-  color: var(--color-gray-600);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: var(--color-gray-700);
+  letter-spacing: 0.02em;
 }
 
 .group-count {
   font-size: 11px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--color-gray-500);
   background: var(--color-gray-100);
   padding: 2px 8px;
   border-radius: 10px;
 }
 
-.group-list {
+.group-items {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
 
-// Conversation Card
-.conversation-card {
+// ========================================
+// Conversation Item
+// ========================================
+.conversation-item {
   width: 100%;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 14px 16px;
+  gap: 16px;
+  padding: 16px 18px;
   background: var(--color-bg-card);
   border: 1px solid var(--color-gray-200);
-  border-radius: var(--radius-lg);
+  border-radius: 14px;
   cursor: pointer;
-  transition: all var(--duration-fast);
   text-align: left;
+  transition: all 0.25s ease;
+  animation: itemFadeIn 0.3s ease-out backwards;
+  animation-delay: calc(var(--group-index) * 0.1s + var(--item-index) * 0.05s);
 
   &:hover {
-    border-color: var(--color-primary-500);
-    box-shadow: var(--shadow-primary);
-    transform: translateY(-1px);
+    border-color: var(--color-primary-300);
+    background: rgba(59, 130, 246, 0.02);
+    box-shadow:
+      0 4px 12px rgba(59, 130, 246, 0.08),
+      0 0 0 1px rgba(59, 130, 246, 0.1);
+    transform: translateY(-2px);
+
+    .item-indicator {
+      background: var(--color-primary-500);
+      transform: scaleY(1);
+    }
 
     .meta-arrow {
       color: var(--color-primary-500);
-      transform: translateX(2px);
+      transform: translateX(3px);
     }
   }
 }
 
-.card-main {
+@keyframes itemFadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.item-indicator {
+  width: 4px;
+  height: 32px;
+  border-radius: 2px;
+  background: var(--color-gray-200);
+  flex-shrink: 0;
+  transition: all 0.25s ease;
+  transform: scaleY(0.6);
+}
+
+.item-content {
   flex: 1;
   min-width: 0;
 }
 
-.card-title {
-  font-size: 14px;
+.item-title {
+  font-size: 15px;
   font-weight: 600;
   color: var(--color-gray-900);
   margin: 0 0 4px;
@@ -453,135 +651,262 @@ watch(() => props.visible, (val) => {
   white-space: nowrap;
 }
 
-.card-preview {
-  font-size: 12px;
+.item-preview {
+  font-size: 13px;
   color: var(--color-gray-500);
   margin: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  line-height: 1.4;
 }
 
-.card-meta {
+.item-meta {
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
+  align-items: center;
+  gap: 12px;
   flex-shrink: 0;
-  margin-left: 12px;
 }
 
 .meta-time {
   display: flex;
   align-items: center;
-  gap: 4px;
-  font-size: 11px;
-  color: var(--color-gray-500);
+  gap: 5px;
+  font-size: 12px;
+  color: var(--color-gray-400);
+  white-space: nowrap;
 }
 
 .meta-arrow {
-  font-size: 10px;
-  color: var(--color-gray-500);
-  transition: all var(--duration-fast);
-}
-
-// Message View
-.message-view {
-  // Message view container
-}
-
-.message-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.message-item {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.message-bubble {
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-
-  &--user {
-    background: linear-gradient(135deg, var(--color-bg-page), var(--color-gray-100));
-    border: 1px solid var(--color-gray-200);
-  }
-
-  &--ai {
-    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.04));
-    border: 1px solid rgba(59, 130, 246, 0.2);
-  }
-}
-
-.bubble-header {
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-}
-
-.bubble-avatar {
-  font-size: 14px;
-  color: var(--color-gray-600);
-}
-
-.bubble-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--color-gray-600);
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-.bubble-time {
+  justify-content: center;
+  color: var(--color-gray-300);
   font-size: 10px;
-  color: var(--color-gray-500);
-  margin-left: auto;
+  transition: all 0.25s ease;
 }
 
-.bubble-copy {
+// ========================================
+// Message Detail View
+// ========================================
+.detail-view {
+  min-height: 200px;
+}
+
+.message-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.timeline-item {
+  animation: msgFadeIn 0.35s ease-out backwards;
+  animation-delay: calc(var(--msg-index) * 0.08s);
+}
+
+@keyframes msgFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.message-block {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.message-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 14px;
+
+  .message-block--user & {
+    background: linear-gradient(135deg, var(--color-gray-100), var(--color-gray-200));
+    color: var(--color-gray-600);
+  }
+
+  .message-block--ai & {
+    background: linear-gradient(135deg, var(--color-primary-500), #8b5cf6);
+    color: white;
+  }
+}
+
+.message-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.message-author {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-gray-700);
+}
+
+.message-time {
+  font-size: 11px;
+  color: var(--color-gray-400);
+}
+
+.copy-btn {
   margin-left: auto;
   width: 24px;
   height: 24px;
   border: none;
   background: transparent;
-  color: var(--color-gray-500);
-  border-radius: var(--radius-sm);
+  color: var(--color-gray-400);
+  border-radius: 6px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--duration-fast);
+  font-size: 12px;
+  transition: all 0.2s ease;
 
   &:hover {
-    background: rgba(59, 130, 246, 0.1);
+    background: var(--color-primary-100);
     color: var(--color-primary-500);
   }
 }
 
-.bubble-content {
-  margin: 0;
-  padding: 12px 14px;
-  font-size: 13px;
+.message-content {
+  padding: 14px 16px;
+  border-radius: 12px;
+  font-size: 14px;
   line-height: 1.7;
-  color: var(--color-gray-900);
+  color: var(--color-gray-800);
   white-space: pre-wrap;
   word-break: break-word;
+
+  .message-block--user & {
+    background: var(--color-gray-100);
+    border: 1px solid var(--color-gray-200);
+  }
+
+  .message-block--ai & {
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.06), rgba(139, 92, 246, 0.04));
+    border: 1px solid rgba(59, 130, 246, 0.15);
+  }
 }
 
-// Transition
-.history-slide-enter-active,
-.history-slide-leave-active {
-  transition: transform var(--duration-base) cubic-bezier(0.32, 0.72, 0, 1);
+// ========================================
+// Transitions
+// ========================================
+.history-modal-enter-active {
+  animation: modalIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-.history-slide-enter-from,
-.history-slide-leave-to {
-  transform: translateX(100%);
+.history-modal-leave-active {
+  animation: modalOut 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@keyframes modalIn {
+  from {
+    opacity: 0;
+
+    .history-modal {
+      transform: scale(0.95) translateY(10px);
+    }
+  }
+  to {
+    opacity: 1;
+
+    .history-modal {
+      transform: scale(1) translateY(0);
+    }
+  }
+}
+
+@keyframes modalOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+.history-modal-enter-active .history-modal {
+  animation: modalScaleIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.history-modal-leave-active .history-modal {
+  animation: modalScaleOut 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+@keyframes modalScaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes modalScaleOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.98) translateY(5px);
+  }
+}
+
+// ========================================
+// Responsive
+// ========================================
+@media (max-width: 768px) {
+  .history-overlay {
+    padding: 20px;
+    align-items: flex-end;
+  }
+
+  .history-modal {
+    max-height: calc(100vh - 40px);
+    border-radius: 20px 20px 12px 12px;
+  }
+
+  .modal-header {
+    padding: 20px 20px 16px;
+  }
+
+  .modal-body {
+    padding: 16px 20px 24px;
+  }
+
+  .conversation-item {
+    padding: 14px 16px;
+  }
+
+  .item-indicator {
+    display: none;
+  }
 }
 </style>