From 603fb707158f4e23c5dc689eb219a794a800dd15 Mon Sep 17 00:00:00 2001
From: Nelson <1475262689@qq.com>
Date: Sat, 11 Jul 2026 16:40:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E7=94=A8=E6=88=B7=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../apps/user-client/src/App.vue              | 352 ++++++----
 .../src/components/ChatComposer.vue           |  39 +-
 .../user-client/src/components/ChatHeader.vue |  35 +
 .../src/components/ChatMessage.vue            |  83 +--
 .../src/components/MessageList.vue            |  65 ++
 .../src/components/SessionDrawer.vue          | 145 ++--
 .../src/components/SessionQuota.vue           |  18 +
 .../apps/user-client/src/styles.css           | 641 ++++++++++++++++++
 8 files changed, 1157 insertions(+), 221 deletions(-)
 create mode 100644 ai_knowledge_base_v2/apps/user-client/src/components/ChatHeader.vue
 create mode 100644 ai_knowledge_base_v2/apps/user-client/src/components/MessageList.vue
 create mode 100644 ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue

diff --git a/ai_knowledge_base_v2/apps/user-client/src/App.vue b/ai_knowledge_base_v2/apps/user-client/src/App.vue
index 83464ca..d6aaf5d 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/App.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/App.vue
@@ -1,29 +1,33 @@
 <script setup lang="ts">
-import { nextTick, onMounted, ref } from "vue";
-import ChatComposer from "./components/ChatComposer.vue";
-import ChatMessage from "./components/ChatMessage.vue";
-import LoginPanel from "./components/LoginPanel.vue";
-import SessionDrawer from "./components/SessionDrawer.vue";
-import { api, clearToken, getToken, streamChat } from "./services/api";
-import type { ChatMessage as ApiMessage, ChatSession, UserProfile } from "./types/api";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 
-interface UiMessage {
-  id: string;
-  role: "user" | "assistant";
-  content: string;
-  streaming?: boolean;
-}
+import AppDialog from "./components/AppDialog.vue";
+import ChatComposer from "./components/ChatComposer.vue";
+import ChatHeader from "./components/ChatHeader.vue";
+import LoginPanel from "./components/LoginPanel.vue";
+import MessageList, { type DisplayMessage } from "./components/MessageList.vue";
+import SessionDrawer from "./components/SessionDrawer.vue";
+import SessionQuota from "./components/SessionQuota.vue";
+import { ApiError, api, clearToken, getToken, streamChat } from "./services/api";
+import type { ChatMessage as ApiMessage, ChatSession, UserProfile } from "./types/api";
 
 const user = ref<UserProfile | null>(null);
 const sessions = ref<ChatSession[]>([]);
 const activeSessionId = ref<number | null>(null);
-const messages = ref<UiMessage[]>([]);
+const messages = ref<DisplayMessage[]>([]);
 const drawerOpen = ref(false);
-const loading = ref(false);
+const sending = ref(false);
 const booting = ref(true);
+const loadingSession = ref(false);
+const loadingSessions = ref(false);
+const sessionOperationPending = ref(false);
+const logoutDialogOpen = ref(false);
 const statusText = ref("连接后端中");
-const bottomRef = ref<HTMLElement | null>(null);
+const toastText = ref("");
+const followingOutput = ref(true);
+const messageList = ref<InstanceType<typeof MessageList> | null>(null);
 const activeAbortController = ref<AbortController | null>(null);
+let toastTimer: number | null = null;
 
 onMounted(async () => {
   if (!getToken()) {
@@ -35,187 +39,277 @@ onMounted(async () => {
     user.value = await api.profile();
     await loadSessions();
     statusText.value = "已连接大本营答疑服务";
-  } catch {
-    clearToken();
-    statusText.value = "登录已失效";
+  } catch (error) {
+    handleError(error, "页面初始化失败");
   } finally {
     booting.value = false;
   }
 });
 
+onBeforeUnmount(() => {
+  activeAbortController.value?.abort();
+  if (toastTimer) window.clearTimeout(toastTimer);
+  document.body.classList.remove("drawer-open");
+});
+
 async function onLoggedIn(profile: UserProfile) {
   user.value = profile;
   statusText.value = "已连接大本营答疑服务";
-  await loadSessions();
+  try {
+    await loadSessions();
+  } catch (error) {
+    handleError(error, "会话加载失败");
+  }
 }
 
 async function loadSessions() {
-  sessions.value = await api.listSessions();
-  if (sessions.value.length === 0) {
-    await createSession();
-    return;
+  loadingSessions.value = true;
+  try {
+    sessions.value = await api.listSessions();
+    if (sessions.value.length === 0) {
+      await createSession();
+      return;
+    }
+    await selectSession(sessions.value[0].id, true);
+  } finally {
+    loadingSessions.value = false;
   }
-  await selectSession(sessions.value[0].id);
 }
 
 async function createSession() {
-  const result = await api.createSession();
-  await refreshSessions(result.sessionId);
-  drawerOpen.value = false;
+  if (sessionOperationPending.value) return;
+  const existingBlank = sessions.value.find((session) => session.messageCount === 0);
+  if (existingBlank) {
+    await selectSession(existingBlank.id);
+    return;
+  }
+  sessionOperationPending.value = true;
+  try {
+    const result = await api.createSession();
+    sessions.value = await api.listSessions();
+    await selectSession(result.sessionId, true);
+  } catch (error) {
+    handleError(error, "新建会话失败");
+  } finally {
+    sessionOperationPending.value = false;
+  }
 }
 
-async function refreshSessions(selectId = activeSessionId.value) {
-  sessions.value = await api.listSessions();
-  if (selectId) await selectSession(selectId);
+async function selectSession(sessionId: number, force = false) {
+  if (!force && activeSessionId.value === sessionId && !loadingSession.value) {
+    drawerOpen.value = false;
+    return;
+  }
+  loadingSession.value = true;
+  try {
+    const history = await api.history(sessionId);
+    activeSessionId.value = sessionId;
+    messages.value = history.map(toUiMessage);
+    followingOutput.value = true;
+    drawerOpen.value = false;
+    await messageList.value?.scrollToBottom("auto");
+    await refreshProfile();
+  } catch (error) {
+    handleError(error, "会话加载失败");
+  } finally {
+    loadingSession.value = false;
+  }
 }
 
-async function selectSession(sessionId: number) {
-  activeSessionId.value = sessionId;
-  const history = await api.history(sessionId);
-  messages.value = history.map(toUiMessage);
-  drawerOpen.value = false;
-  await scrollToBottom();
-}
-
-async function send(message: string) {
-  if (!activeSessionId.value || loading.value) return;
-  const userMessage: UiMessage = { id: `user-${Date.now()}`, role: "user", content: message };
-  const assistantMessage: UiMessage = { id: `assistant-${Date.now()}`, role: "assistant", content: "", streaming: true };
+async function send(message: string, complete: (success: boolean) => void) {
+  if (!activeSessionId.value || sending.value) {
+    complete(false);
+    return;
+  }
+  const now = new Date().toISOString();
+  const userMessage: DisplayMessage = { id: `user-${Date.now()}`, role: "user", content: message, createdAt: now };
+  const assistantMessage: DisplayMessage = {
+    id: `assistant-${Date.now()}`,
+    role: "assistant",
+    content: "",
+    createdAt: now,
+    streaming: true,
+  };
   messages.value.push(userMessage, assistantMessage);
-  loading.value = true;
+  const assistantIndex = messages.value.length - 1;
+  const currentAssistant = () => messages.value[assistantIndex];
+  sending.value = true;
+  followingOutput.value = true;
   activeAbortController.value = new AbortController();
   let hasContent = false;
-  await scrollToBottom();
+  await messageList.value?.scrollToMessage(userMessage.id);
   try {
     await streamChat(
       activeSessionId.value,
       message,
       async (chunk) => {
         if (!hasContent) {
-          assistantMessage.content = "";
+          currentAssistant().content = "";
           hasContent = true;
         }
-        assistantMessage.content += chunk;
-        await scrollToBottom();
+        currentAssistant().content += chunk;
+        if (followingOutput.value) await messageList.value?.scrollToBottom();
       },
       async (statusMessage, statusType) => {
-        if (statusType === "queued") {
-          assistantMessage.content = statusMessage || "当前请求较多，正在排队中。";
-        } else if (statusType === "generating" && !hasContent) {
-          assistantMessage.content = "";
-        }
-        await scrollToBottom();
+        if (statusType === "queued") currentAssistant().content = statusMessage || "当前请求较多，正在排队中。";
+        if (statusType === "generating" && !hasContent) currentAssistant().content = "";
+        if (followingOutput.value) await messageList.value?.scrollToBottom();
       },
       activeAbortController.value.signal,
     );
-    assistantMessage.streaming = false;
-    await refreshSessions(activeSessionId.value);
-    user.value = await api.profile();
+    currentAssistant().streaming = false;
+    currentAssistant().createdAt = new Date().toISOString();
+    complete(true);
+    await refreshSessionList();
+    await refreshProfile();
   } catch (error) {
-    assistantMessage.streaming = false;
+    currentAssistant().streaming = false;
     if (error instanceof DOMException && error.name === "AbortError") {
-      assistantMessage.content = assistantMessage.content || "已停止生成";
+      currentAssistant().content = currentAssistant().content || "已停止生成";
+      complete(true);
     } else {
-      assistantMessage.content = error instanceof Error ? error.message : "AI 回复失败";
+      currentAssistant().content = currentAssistant().content || "回答生成失败，请稍后重试。";
+      complete(false);
+      handleError(error, "AI 回复失败");
     }
   } finally {
-    loading.value = false;
+    sending.value = false;
     activeAbortController.value = null;
   }
 }
 
 async function stop() {
-  if (!activeSessionId.value) return;
+  if (!activeSessionId.value || !sending.value) return;
   activeAbortController.value?.abort();
-  await api.stop(activeSessionId.value);
-  loading.value = false;
-}
-
-async function renameSession(sessionId: number, title: string) {
-  await api.renameSession(sessionId, title);
-  await refreshSessions(sessionId);
-}
-
-async function deleteSession(sessionId: number) {
-  await api.deleteSession(sessionId);
-  sessions.value = await api.listSessions();
-  if (activeSessionId.value === sessionId) {
-    messages.value = [];
-    activeSessionId.value = null;
-    if (sessions.value.length > 0) {
-      await selectSession(sessions.value[0].id);
-    }
+  try {
+    await api.stop(activeSessionId.value);
+  } catch (error) {
+    handleError(error, "停止生成失败");
   }
 }
 
-async function logout() {
+async function renameSession(sessionId: number, title: string, done: (success: boolean) => void) {
+  if (sessionOperationPending.value) return;
+  sessionOperationPending.value = true;
+  try {
+    await api.renameSession(sessionId, title);
+    await refreshSessionList();
+    showToast("会话名称已更新");
+    done(true);
+  } catch (error) {
+    done(false);
+    handleError(error, "会话改名失败");
+  } finally {
+    sessionOperationPending.value = false;
+  }
+}
+
+async function deleteSession(sessionId: number, done: (success: boolean) => void) {
+  if (sessionOperationPending.value) return;
+  sessionOperationPending.value = true;
+  try {
+    await api.deleteSession(sessionId);
+    sessions.value = await api.listSessions();
+    done(true);
+    showToast("会话已删除");
+    if (activeSessionId.value === sessionId) {
+      activeSessionId.value = null;
+      messages.value = [];
+      const nextSession = sessions.value[0];
+      if (nextSession) await selectSession(nextSession.id, true);
+      else {
+        sessionOperationPending.value = false;
+        await createSession();
+      }
+    }
+  } catch (error) {
+    done(false);
+    handleError(error, "会话删除失败");
+  } finally {
+    sessionOperationPending.value = false;
+  }
+}
+
+async function confirmLogout() {
+  sessionOperationPending.value = true;
   try {
     await api.logout();
+  } catch {
+    // 本地登录态必须可退出，服务端失败不阻塞用户操作。
   } finally {
-    clearToken();
-    user.value = null;
-    sessions.value = [];
-    messages.value = [];
-    activeSessionId.value = null;
-    statusText.value = "请先登录";
+    sessionOperationPending.value = false;
+    logoutDialogOpen.value = false;
+    clearUserState();
   }
 }
 
-function toUiMessage(message: ApiMessage): UiMessage {
+async function refreshSessionList() {
+  sessions.value = await api.listSessions();
+}
+
+async function refreshProfile() {
+  user.value = await api.profile();
+}
+
+function toUiMessage(message: ApiMessage): DisplayMessage {
   return {
     id: String(message.id),
     role: message.role,
     content: message.content,
+    createdAt: message.created_at,
     streaming: message.message_status === "GENERATING",
   };
 }
 
-async function scrollToBottom() {
-  await nextTick();
-  bottomRef.value?.scrollIntoView({ behavior: "smooth", block: "end" });
+function handleError(error: unknown, fallback: string) {
+  if (error instanceof ApiError && error.status === 401) {
+    clearUserState();
+    showToast("登录状态已失效，请重新登录");
+    return;
+  }
+  showToast(error instanceof Error ? error.message : fallback);
+}
+
+function clearUserState() {
+  clearToken();
+  user.value = null;
+  sessions.value = [];
+  messages.value = [];
+  activeSessionId.value = null;
+  statusText.value = "请先登录";
+}
+
+function showToast(message: string) {
+  toastText.value = message;
+  if (toastTimer) window.clearTimeout(toastTimer);
+  toastTimer = window.setTimeout(() => {
+    toastText.value = "";
+    toastTimer = null;
+  }, 3200);
 }
 </script>
 
 <template>
   <main class="app-shell">
-    <section class="phone-frame" :class="{ 'login-mode': !user && !booting }">
+    <section class="phone-frame" :class="{ 'login-mode': !user && !booting, 'chat-mode': Boolean(user) }">
       <div v-if="booting" class="booting">正在启动...</div>
       <LoginPanel v-else-if="!user" @logged-in="onLoggedIn" />
       <template v-else>
-        <header class="topbar">
-          <button type="button" class="icon-btn" @click="drawerOpen = true">☰</button>
-          <div>
-            <h1>大本营答疑助手</h1>
-            <p>{{ statusText }}</p>
-          </div>
-          <button type="button" class="plain-btn" @click="logout">退出</button>
-        </header>
-
-        <section class="quota-strip">
-          <span>{{ user.name }}</span>
-          <strong>{{ user.todayUsed }}/{{ user.dailyLimit }}</strong>
-        </section>
-
-        <section class="chat-area">
-          <div v-if="messages.length === 0" class="empty-state">
-            <strong>可以开始提问了</strong>
-            <p>输入问题，我会尽力为你解答。</p>
-          </div>
-          <ChatMessage
-            v-for="message in messages"
-            :key="message.id"
-            :role="message.role"
-            :content="message.content"
-            :streaming="message.streaming"
-          />
-          <div ref="bottomRef"></div>
-        </section>
-
-        <ChatComposer :loading="loading" :disabled="!activeSessionId" @send="send" @stop="stop" />
+        <ChatHeader :user="user" :status-text="statusText" @open-history="drawerOpen = true" @logout="logoutDialogOpen = true" />
+        <SessionQuota :used="user.todayUsed" :limit="user.dailyLimit" />
+        <MessageList
+          ref="messageList"
+          :messages="messages"
+          :loading-session="loadingSession"
+          @follow-change="followingOutput = $event"
+        />
+        <ChatComposer :loading="sending" :disabled="!activeSessionId || loadingSession" @send="send" @stop="stop" />
         <SessionDrawer
           :open="drawerOpen"
           :sessions="sessions"
           :active-session-id="activeSessionId"
+          :loading="loadingSessions"
+          :operation-pending="sessionOperationPending"
           @close="drawerOpen = false"
           @select="selectSession"
           @create="createSession"
@@ -224,5 +318,19 @@ async function scrollToBottom() {
         />
       </template>
     </section>
+
+    <div v-if="toastText" class="chat-toast" role="status">{{ toastText }}</div>
+
+    <AppDialog v-if="logoutDialogOpen" title="退出登录" labelled-by="logout-dialog-title" @close="logoutDialogOpen = false">
+      <p class="confirm-copy">确定退出当前账号吗？</p>
+      <template #footer>
+        <div class="dialog-actions">
+          <button type="button" class="dialog-secondary" :disabled="sessionOperationPending" @click="logoutDialogOpen = false">取消</button>
+          <button type="button" class="dialog-primary" :disabled="sessionOperationPending" @click="confirmLogout">
+            {{ sessionOperationPending ? "退出中..." : "退出" }}
+          </button>
+        </div>
+      </template>
+    </AppDialog>
   </main>
 </template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue b/ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue
index 247bb10..e819310 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/ChatComposer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { Send, Square } from "@lucide/vue";
+import { nextTick, ref } from "vue";
 
 defineProps<{
   loading: boolean;
@@ -7,21 +8,34 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  send: [message: string];
+  send: [message: string, complete: (success: boolean) => void];
   stop: [];
 }>();
 
 const input = ref("");
+const textarea = ref<HTMLTextAreaElement | null>(null);
+
+function resize() {
+  const element = textarea.value;
+  if (!element) return;
+  element.style.height = "auto";
+  element.style.height = `${Math.min(element.scrollHeight, 108)}px`;
+  element.style.overflowY = element.scrollHeight > 108 ? "auto" : "hidden";
+}
 
 function send() {
   const text = input.value.trim();
   if (!text) return;
-  emit("send", text);
-  input.value = "";
+  emit("send", text, async (success) => {
+    if (!success) return;
+    input.value = "";
+    await nextTick();
+    resize();
+  });
 }
 
 function onKeydown(event: KeyboardEvent) {
-  if (event.key === "Enter" && !event.shiftKey) {
+  if (event.key === "Enter" && !event.shiftKey && !event.isComposing) {
     event.preventDefault();
     send();
   }
@@ -29,15 +43,24 @@ function onKeydown(event: KeyboardEvent) {
 </script>
 
 <template>
-  <form class="composer" @submit.prevent="send">
+  <form class="chat-composer" @submit.prevent="send">
     <textarea
+      ref="textarea"
       v-model="input"
       rows="1"
       placeholder="请输入你的问题"
+      aria-label="请输入你的问题"
       :disabled="disabled"
+      @input="resize"
       @keydown="onKeydown"
     />
-    <button v-if="loading" type="button" class="stop-btn" @click="emit('stop')">停止</button>
-    <button v-else type="submit" class="send-btn" :disabled="disabled || !input.trim()">发送</button>
+    <button v-if="loading" type="button" class="composer-stop" aria-label="停止生成" @click="emit('stop')">
+      <Square :size="17" fill="currentColor" aria-hidden="true" />
+      <span>停止</span>
+    </button>
+    <button v-else type="submit" class="composer-send" :disabled="disabled || !input.trim()">
+      <Send :size="18" aria-hidden="true" />
+      <span>发送</span>
+    </button>
   </form>
 </template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/ChatHeader.vue b/ai_knowledge_base_v2/apps/user-client/src/components/ChatHeader.vue
new file mode 100644
index 0000000..7eb8e63
--- /dev/null
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/ChatHeader.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Menu } from "@lucide/vue";
+
+import type { UserProfile } from "../types/api";
+
+defineProps<{
+  user: UserProfile;
+  statusText: string;
+}>();
+
+defineEmits<{
+  openHistory: [];
+  logout: [];
+}>();
+</script>
+
+<template>
+  <header class="chat-header">
+    <button type="button" class="header-menu-button" aria-label="打开历史会话" @click="$emit('openHistory')">
+      <Menu :size="21" aria-hidden="true" />
+    </button>
+
+    <div class="assistant-summary">
+      <h1>大本营答疑助手</h1>
+      <p>{{ statusText }}</p>
+    </div>
+
+    <div class="user-summary">
+      <span v-if="user.nickname">昵称：{{ user.nickname }}</span>
+      <span>用户名：{{ user.name }}</span>
+    </div>
+
+    <button type="button" class="header-logout-button" @click="$emit('logout')">退出</button>
+  </header>
+</template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue b/ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue
index f2fd795..53c1416 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/ChatMessage.vue
@@ -1,72 +1,55 @@
 <script setup lang="ts">
+import { Bot } from "@lucide/vue";
 import MarkdownIt from "markdown-it";
 import { computed } from "vue";
 
 const props = defineProps<{
+  messageId: string;
   role: "user" | "assistant";
   content: string;
+  createdAt: string;
   streaming?: boolean;
 }>();
 
-const markdown = new MarkdownIt({
-  breaks: true,
-  html: false,
-  linkify: true,
-});
+const markdown = new MarkdownIt({ breaks: true, html: false, linkify: true });
 
-const assistantParts = computed(() => {
-  if (props.role === "user") {
-    return { reasoning: "", answer: props.content };
-  }
-
-  const content = props.content;
-  let reasoning = "";
-  let answer = content;
-
-  // 匹配所有完整的 <think>...</think>（全局匹配，支持多个）
-  const thinkRegex = /<think>([\s\S]*?)<\/think>/gi;
-  const matches = Array.from(answer.matchAll(thinkRegex));
-
-  if (matches.length > 0) {
-    reasoning = matches.map((m) => m[1].trim()).join("\n\n");
-    answer = answer.replace(thinkRegex, "").trim();
-  }
-
-  // 处理未闭合的 <think>（流式输出时可能还没收到 </think>）
-  const openThink = answer.match(/<think>([\s\S]*)$/i);
-  if (openThink) {
-    reasoning += (reasoning ? "\n\n" : "") + openThink[1].trim();
-    answer = answer.slice(0, openThink.index).trim();
-  }
-
-  // 兜底：如果 answer 为空但 reasoning 有内容，说明模型可能把全部内容放在 think 里了
-  // 此时把 reasoning 当 answer 显示，不显示 thinking 面板
-  if (!answer && reasoning) {
-    answer = reasoning;
-    reasoning = "";
-  }
-
-  return { reasoning, answer };
-});
-
-const renderedContent = computed(() => {
+const answer = computed(() => {
   if (props.role === "user") return props.content;
-  return markdown.render(assistantParts.value.answer || "");
+  // 部分模型会产生嵌套 think 标签，使用贪婪匹配移除完整思考区，再清理流式残留标签。
+  let content = props.content.replace(/<think>[\s\S]*<\/think>/gi, "");
+  content = content.replace(/<think>[\s\S]*$/i, "");
+  content = content.replace(/<\/?think>/gi, "");
+  return content.trim();
+});
+
+const renderedContent = computed(() =>
+  props.role === "assistant" ? markdown.render(answer.value) : answer.value,
+);
+
+const displayTime = computed(() => {
+  // 消息服务返回的是 UTC 无时区字符串，补齐时区后再按用户本地时间展示。
+  const normalized = /(?:Z|[+-]\d{2}:?\d{2})$/i.test(props.createdAt) ? props.createdAt : `${props.createdAt}Z`;
+  const date = new Date(normalized);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
 });
 </script>
 
 <template>
-  <article class="message" :class="role">
-    <div class="avatar">{{ role === "assistant" ? "答" : "我" }}</div>
-    <div class="bubble">
+  <article class="chat-message" :class="role" :data-message-id="messageId">
+    <div v-if="role === 'assistant'" class="assistant-icon" aria-hidden="true">
+      <Bot :size="19" />
+    </div>
+    <div class="message-bubble">
       <template v-if="role === 'assistant'">
-        <div v-if="streaming && assistantParts.reasoning" class="thinking-indicator">
-          <span class="thinking-dots">思考中</span>
+        <div v-if="renderedContent" class="message-content markdown-content" v-html="renderedContent"></div>
+        <div v-if="streaming && !renderedContent" class="generation-state">
+          <span></span><span></span><span></span>
+          正在生成回答...
         </div>
-        <div class="content markdown-content" v-html="renderedContent"></div>
       </template>
-      <div v-else class="content">{{ renderedContent }}</div>
-      <span v-if="streaming" class="typing">正在生成</span>
+      <div v-else class="message-content">{{ renderedContent }}</div>
+      <time v-if="displayTime" :datetime="createdAt">{{ displayTime }}</time>
     </div>
   </article>
 </template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/MessageList.vue b/ai_knowledge_base_v2/apps/user-client/src/components/MessageList.vue
new file mode 100644
index 0000000..3dca2e1
--- /dev/null
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/MessageList.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { nextTick, ref } from "vue";
+
+import ChatMessage from "./ChatMessage.vue";
+
+export interface DisplayMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  createdAt: string;
+  streaming?: boolean;
+}
+
+defineProps<{
+  messages: DisplayMessage[];
+  loadingSession: boolean;
+}>();
+
+const emit = defineEmits<{
+  followChange: [following: boolean];
+}>();
+
+const scroller = ref<HTMLElement | null>(null);
+
+function onScroll() {
+  const element = scroller.value;
+  if (!element) return;
+  const distance = element.scrollHeight - element.scrollTop - element.clientHeight;
+  emit("followChange", distance < 96);
+}
+
+async function scrollToBottom(behavior: ScrollBehavior = "smooth") {
+  await nextTick();
+  scroller.value?.scrollTo({ top: scroller.value.scrollHeight, behavior });
+}
+
+async function scrollToMessage(messageId: string) {
+  await nextTick();
+  const element = scroller.value?.querySelector<HTMLElement>(`[data-message-id="${messageId}"]`);
+  element?.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+defineExpose({ scrollToBottom, scrollToMessage });
+</script>
+
+<template>
+  <section ref="scroller" class="message-list" aria-live="polite" @scroll.passive="onScroll">
+    <div v-if="loadingSession" class="chat-loading-state">正在加载会话...</div>
+    <div v-else-if="messages.length === 0" class="chat-empty-state">
+      <strong>可以开始提问了</strong>
+      <p>输入问题，我会尽力为你解答。</p>
+    </div>
+    <template v-else>
+      <ChatMessage
+        v-for="message in messages"
+        :key="message.id"
+        :message-id="message.id"
+        :role="message.role"
+        :content="message.content"
+        :created-at="message.createdAt"
+        :streaming="message.streaming"
+      />
+    </template>
+  </section>
+</template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue b/ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue
index 0eac435..10c47cb 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/SessionDrawer.vue
@@ -1,73 +1,136 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { Pencil, Plus, Trash2, X } from "@lucide/vue";
+import { computed, ref, watch } from "vue";
 
 import type { ChatSession } from "../types/api";
+import AppDialog from "./AppDialog.vue";
 
-defineProps<{
+const props = defineProps<{
   open: boolean;
   sessions: ChatSession[];
   activeSessionId: number | null;
+  loading: boolean;
+  operationPending: boolean;
 }>();
 
 const emit = defineEmits<{
   close: [];
   select: [sessionId: number];
   create: [];
-  rename: [sessionId: number, title: string];
-  delete: [sessionId: number];
+  rename: [sessionId: number, title: string, done: (success: boolean) => void];
+  delete: [sessionId: number, done: (success: boolean) => void];
 }>();
 
-const editingId = ref<number | null>(null);
-const editingTitle = ref("");
+const renaming = ref<ChatSession | null>(null);
+const renameTitle = ref("");
+const deleting = ref<ChatSession | null>(null);
 
-function startEdit(session: ChatSession) {
-  editingId.value = session.id;
-  editingTitle.value = session.title;
+watch(() => props.open, (open) => {
+  document.body.classList.toggle("drawer-open", open);
+}, { immediate: true });
+
+const validRename = computed(() => renameTitle.value.trim().length > 0);
+
+function openRename(session: ChatSession) {
+  renaming.value = session;
+  renameTitle.value = session.title;
 }
 
-function submitEdit(sessionId: number) {
-  const title = editingTitle.value.trim();
-  if (title) emit("rename", sessionId, title);
-  editingId.value = null;
-  editingTitle.value = "";
+function submitRename() {
+  if (!renaming.value || !validRename.value || props.operationPending) return;
+  emit("rename", renaming.value.id, renameTitle.value.trim(), (success) => {
+    if (success) renaming.value = null;
+  });
 }
 
-function confirmDelete(session: ChatSession) {
-  const ok = window.confirm(`确定删除会话「${session.title}」吗？`);
-  if (ok) emit("delete", session.id);
+function submitDelete() {
+  if (!deleting.value || props.operationPending) return;
+  emit("delete", deleting.value.id, (success) => {
+    if (success) deleting.value = null;
+  });
+}
+
+function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const target = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  const days = Math.round((today.getTime() - target.getTime()) / 86_400_000);
+  const time = new Intl.DateTimeFormat("zh-CN", { hour: "2-digit", minute: "2-digit", hour12: false }).format(date);
+  if (days === 0) return time;
+  if (days === 1) return `昨天 ${time}`;
+  return `${String(date.getMonth() + 1).padStart(2, "0")}/${String(date.getDate()).padStart(2, "0")} ${time}`;
 }
 </script>
 
 <template>
-  <div class="drawer-mask" :class="{ show: open }" @click="emit('close')"></div>
-  <aside class="session-drawer" :class="{ open }">
-    <div class="drawer-head">
-      <strong>历史会话</strong>
-      <button type="button" class="icon-btn" @click="emit('close')">×</button>
-    </div>
-    <button type="button" class="new-session-btn" @click="emit('create')">＋ 新聊天</button>
-    <div class="session-list">
-      <div
+  <div class="history-mask" :class="{ visible: open }" @click="emit('close')"></div>
+  <aside class="history-drawer" :class="{ open }" :aria-hidden="!open">
+    <header class="history-header">
+      <h2>历史会话</h2>
+      <button type="button" aria-label="关闭历史会话" @click="emit('close')">
+        <X :size="22" aria-hidden="true" />
+      </button>
+    </header>
+
+    <button type="button" class="new-chat-button" :disabled="operationPending" @click="emit('create')">
+      <Plus :size="20" aria-hidden="true" />
+      新聊天
+    </button>
+
+    <div class="history-list">
+      <div v-if="loading" class="history-state">正在加载历史会话...</div>
+      <div v-else-if="sessions.length === 0" class="history-state">暂无历史会话</div>
+      <article
         v-for="session in sessions"
+        v-else
         :key="session.id"
-        class="session-item"
+        class="history-item"
         :class="{ active: session.id === activeSessionId }"
       >
-        <form v-if="editingId === session.id" class="session-edit" @submit.prevent="submitEdit(session.id)">
-          <input v-model="editingTitle" maxlength="100" @keydown.escape="editingId = null" />
-          <button type="submit">保存</button>
-        </form>
-        <template v-else>
-          <button type="button" class="session-main" @click="emit('select', session.id)">
-            <span>{{ session.title }}</span>
-            <small>{{ session.messageCount }} 条消息</small>
+        <button type="button" class="history-main" @click="emit('select', session.id)">
+          <strong>{{ session.title }}</strong>
+          <time :datetime="session.updatedAt">{{ formatTime(session.updatedAt) }}</time>
+          <span>{{ session.messageCount }} 条消息</span>
+        </button>
+        <div class="history-actions">
+          <button type="button" @click="openRename(session)">
+            <Pencil :size="15" aria-hidden="true" />改名
           </button>
-          <div class="session-actions">
-            <button type="button" @click="startEdit(session)">改名</button>
-            <button type="button" @click="confirmDelete(session)">删除</button>
-          </div>
-        </template>
-      </div>
+          <button type="button" class="danger" @click="deleting = session">
+            <Trash2 :size="15" aria-hidden="true" />删除
+          </button>
+        </div>
+      </article>
     </div>
   </aside>
+
+  <AppDialog v-if="renaming" title="修改会话名称" labelled-by="rename-session-title" @close="renaming = null">
+    <form class="session-dialog-form" @submit.prevent="submitRename">
+      <label for="session-title-input">会话名称</label>
+      <input id="session-title-input" v-model="renameTitle" maxlength="50" autocomplete="off" autofocus />
+      <p>{{ renameTitle.trim().length }}/50</p>
+    </form>
+    <template #footer>
+      <div class="dialog-actions">
+        <button type="button" class="dialog-secondary" :disabled="operationPending" @click="renaming = null">取消</button>
+        <button type="button" class="dialog-primary" :disabled="!validRename || operationPending" @click="submitRename">
+          {{ operationPending ? "保存中..." : "保存" }}
+        </button>
+      </div>
+    </template>
+  </AppDialog>
+
+  <AppDialog v-if="deleting" title="删除会话" labelled-by="delete-session-title" @close="deleting = null">
+    <p class="confirm-copy">确定删除这个会话吗？删除后无法恢复。</p>
+    <template #footer>
+      <div class="dialog-actions">
+        <button type="button" class="dialog-secondary" :disabled="operationPending" @click="deleting = null">取消</button>
+        <button type="button" class="dialog-danger" :disabled="operationPending" @click="submitDelete">
+          {{ operationPending ? "删除中..." : "删除" }}
+        </button>
+      </div>
+    </template>
+  </AppDialog>
 </template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue b/ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue
new file mode 100644
index 0000000..f63f4f7
--- /dev/null
+++ b/ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { Layers3 } from "@lucide/vue";
+
+defineProps<{
+  used: number;
+  limit: number;
+}>();
+</script>
+
+<template>
+  <section class="session-quota" :class="{ exhausted: limit > 0 && used >= limit }" aria-label="当前会话额度">
+    <div>
+      <Layers3 :size="18" aria-hidden="true" />
+      <span>当前会话额度</span>
+    </div>
+    <strong>{{ used }}/{{ limit }}</strong>
+  </section>
+</template>
diff --git a/ai_knowledge_base_v2/apps/user-client/src/styles.css b/ai_knowledge_base_v2/apps/user-client/src/styles.css
index 1304ec8..d80a36f 100644
--- a/ai_knowledge_base_v2/apps/user-client/src/styles.css
+++ b/ai_knowledge_base_v2/apps/user-client/src/styles.css
@@ -1098,3 +1098,644 @@ textarea:focus-visible {
     box-shadow: none;
   }
 }
+
+/* 登录后的手机端问答界面 */
+:root {
+  --chat-bg: #f6faf8;
+  --chat-surface: #ffffff;
+  --chat-text: #17231f;
+  --chat-muted: #6f7f79;
+  --chat-weak: #98a49f;
+  --chat-brand: #149477;
+  --chat-brand-dark: #0f705d;
+  --chat-brand-soft: #eff7f4;
+  --chat-border: #dfe9e5;
+  --chat-control-border: #d9e6e1;
+  --chat-danger: #c65353;
+  --chat-radius-control: 13px;
+  --chat-radius-card: 15px;
+  --chat-shadow: 0 8px 24px rgba(28, 60, 50, 0.055);
+}
+
+.phone-frame.chat-mode {
+  display: grid;
+  grid-template-rows: auto auto minmax(0, 1fr) auto;
+  background: var(--chat-bg);
+}
+
+.chat-header {
+  position: relative;
+  z-index: 5;
+  min-height: 82px;
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr) auto 52px;
+  align-items: center;
+  gap: 10px;
+  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
+  border-bottom: 1px solid var(--chat-border);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.header-menu-button,
+.header-logout-button,
+.history-header button {
+  min-width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 12px;
+  background: var(--chat-brand-soft);
+  color: var(--chat-brand-dark);
+}
+
+.assistant-summary {
+  min-width: 0;
+}
+
+.assistant-summary h1 {
+  overflow: hidden;
+  margin: 0;
+  color: var(--chat-text);
+  font-size: 17px;
+  line-height: 1.35;
+  font-weight: 720;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistant-summary p {
+  overflow: hidden;
+  margin: 3px 0 0;
+  color: var(--chat-muted);
+  font-size: 11px;
+  line-height: 1.45;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-summary {
+  max-width: 92px;
+  display: grid;
+  gap: 2px;
+  color: var(--chat-muted);
+  font-size: 10px;
+  line-height: 1.45;
+}
+
+.user-summary span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-logout-button {
+  min-width: 52px;
+  padding: 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.session-quota {
+  min-height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 12px 16px 0;
+  padding: 0 14px;
+  border: 1px solid rgba(217, 230, 225, 0.75);
+  border-radius: 13px;
+  background: var(--chat-brand-soft);
+  color: #365c51;
+  font-size: 13px;
+}
+
+.session-quota > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.session-quota svg,
+.session-quota strong {
+  color: var(--chat-brand-dark);
+}
+
+.session-quota strong {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.session-quota.exhausted {
+  border-color: rgba(198, 83, 83, 0.25);
+  background: #fff5f4;
+}
+
+.session-quota.exhausted strong {
+  color: var(--chat-danger);
+}
+
+.message-list {
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 18px 16px 28px;
+  scroll-behavior: smooth;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: #cfddd8 transparent;
+}
+
+.chat-empty-state,
+.chat-loading-state {
+  min-height: 48%;
+  display: grid;
+  place-content: center;
+  text-align: center;
+}
+
+.chat-empty-state strong {
+  color: var(--chat-text);
+  font-size: 18px;
+  font-weight: 680;
+}
+
+.chat-empty-state p,
+.chat-loading-state {
+  margin: 8px 0 0;
+  color: var(--chat-muted);
+  font-size: 14px;
+  line-height: 1.65;
+}
+
+.chat-message {
+  display: grid;
+  grid-template-columns: 36px minmax(0, 1fr);
+  align-items: start;
+  gap: 10px;
+  margin-bottom: 18px;
+  scroll-margin-top: 12px;
+}
+
+.chat-message.user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.assistant-icon {
+  width: 36px;
+  height: 36px;
+  display: grid;
+  place-items: center;
+  border-radius: 11px;
+  background: #e4f1ed;
+  color: var(--chat-brand-dark);
+}
+
+.message-bubble {
+  min-width: 0;
+  width: fit-content;
+  max-width: 100%;
+  padding: 13px 15px 10px;
+  border: 1px solid var(--chat-border);
+  border-radius: var(--chat-radius-card);
+  background: var(--chat-surface);
+  box-shadow: var(--chat-shadow);
+}
+
+.chat-message.user .message-bubble {
+  max-width: 82%;
+  border-color: var(--chat-brand);
+  border-bottom-right-radius: 5px;
+  background: var(--chat-brand);
+  color: #ffffff;
+  box-shadow: 0 8px 20px rgba(20, 148, 119, 0.15);
+}
+
+.message-content {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+  color: inherit;
+  font-size: 15px;
+  line-height: 1.78;
+  letter-spacing: 0;
+}
+
+.chat-message time {
+  display: block;
+  margin-top: 6px;
+  color: var(--chat-weak);
+  font-size: 11px;
+  line-height: 1.3;
+}
+
+.chat-message.user time {
+  color: rgba(255, 255, 255, 0.72);
+  text-align: right;
+}
+
+.generation-state {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 28px;
+  color: var(--chat-muted);
+  font-size: 13px;
+}
+
+.generation-state span {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--chat-brand);
+  animation: generation-pulse 1.2s ease-in-out infinite;
+}
+
+.generation-state span:nth-child(2) { animation-delay: 0.14s; }
+.generation-state span:nth-child(3) { animation-delay: 0.28s; margin-right: 4px; }
+
+@keyframes generation-pulse {
+  0%, 70%, 100% { opacity: 0.25; transform: translateY(0); }
+  35% { opacity: 1; transform: translateY(-2px); }
+}
+
+.markdown-content {
+  white-space: normal;
+}
+
+.markdown-content > :first-child { margin-top: 0; }
+.markdown-content > :last-child { margin-bottom: 0; }
+.markdown-content p { margin: 0 0 12px; }
+
+.markdown-content h1,
+.markdown-content h2,
+.markdown-content h3,
+.markdown-content h4 {
+  margin: 20px 0 9px;
+  color: var(--chat-text);
+  line-height: 1.45;
+  font-weight: 700;
+}
+
+.markdown-content h1 { font-size: 20px; }
+.markdown-content h2 { font-size: 18px; }
+.markdown-content h3,
+.markdown-content h4 { font-size: 16px; }
+
+.markdown-content ul,
+.markdown-content ol {
+  margin: 8px 0 13px;
+  padding-left: 22px;
+}
+
+.markdown-content li + li { margin-top: 6px; }
+.markdown-content strong { color: var(--chat-text); font-weight: 700; }
+
+.markdown-content blockquote {
+  margin: 12px 0;
+  padding: 8px 12px;
+  border-left: 3px solid #8cc7b6;
+  background: var(--chat-brand-soft);
+  color: #526b63;
+}
+
+.markdown-content blockquote p { margin: 0; }
+
+.chat-composer {
+  position: relative;
+  z-index: 6;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 10px;
+  padding: 12px 14px max(12px, env(safe-area-inset-bottom));
+  border-top: 1px solid var(--chat-border);
+  background: rgba(255, 255, 255, 0.98);
+}
+
+.chat-composer textarea {
+  width: 100%;
+  min-height: 50px;
+  max-height: 108px;
+  resize: none;
+  overflow-y: hidden;
+  padding: 13px 15px;
+  border: 1px solid var(--chat-control-border);
+  border-radius: var(--chat-radius-control);
+  outline: 0;
+  background: #ffffff;
+  color: var(--chat-text);
+  font-size: 16px;
+  line-height: 1.45;
+  transition: border-color 0.18s ease, box-shadow 0.18s ease;
+}
+
+.chat-composer textarea:focus {
+  border-color: var(--chat-brand);
+  box-shadow: 0 0 0 3px rgba(20, 148, 119, 0.1);
+}
+
+.chat-composer textarea::placeholder { color: var(--chat-weak); }
+
+.composer-send,
+.composer-stop {
+  min-width: 78px;
+  min-height: 50px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: var(--chat-radius-control);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.composer-send { background: var(--chat-brand); }
+.composer-stop { background: var(--chat-danger); }
+
+.composer-send:disabled {
+  cursor: not-allowed;
+  background: #dbe8e3;
+  color: #93a39d;
+}
+
+.history-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  background: rgba(20, 36, 31, 0);
+  transition: background 0.22s ease;
+}
+
+.history-mask.visible {
+  pointer-events: auto;
+  background: rgba(20, 36, 31, 0.32);
+}
+
+.history-drawer {
+  position: absolute;
+  inset: 0 auto 0 0;
+  z-index: 45;
+  width: 84%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  padding: max(14px, env(safe-area-inset-top)) 15px max(16px, env(safe-area-inset-bottom));
+  background: #fbfdfc;
+  transform: translateX(-102%);
+  transition: transform 0.22s ease;
+  box-shadow: 18px 0 50px rgba(20, 36, 31, 0.15);
+}
+
+.history-drawer.open { transform: translateX(0); }
+
+.history-header {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 14px;
+}
+
+.history-header h2 {
+  margin: 0;
+  color: var(--chat-text);
+  font-size: 19px;
+}
+
+.new-chat-button {
+  width: 100%;
+  min-height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  border: 0;
+  border-radius: 13px;
+  background: var(--chat-brand);
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 680;
+}
+
+.history-list {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  overflow-y: auto;
+  padding: 1px 2px 8px;
+  overscroll-behavior: contain;
+}
+
+.history-state {
+  padding: 48px 10px;
+  color: var(--chat-muted);
+  font-size: 14px;
+  text-align: center;
+}
+
+.history-item {
+  padding: 13px 14px 10px;
+  border: 1px solid var(--chat-border);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.history-item.active {
+  border-color: var(--chat-brand);
+  background: #f3faf7;
+}
+
+.history-main {
+  width: 100%;
+  min-width: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 7px 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+
+.history-main strong {
+  display: -webkit-box;
+  overflow: hidden;
+  color: var(--chat-text);
+  font-size: 15px;
+  line-height: 1.45;
+  font-weight: 680;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.history-main time,
+.history-main span {
+  color: var(--chat-muted);
+  font-size: 11px;
+  line-height: 1.45;
+}
+
+.history-main time { white-space: nowrap; }
+.history-main span { grid-column: 1 / -1; }
+
+.history-actions {
+  display: flex;
+  gap: 18px;
+  margin-top: 8px;
+}
+
+.history-actions button {
+  min-height: 36px;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 0 2px;
+  border: 0;
+  background: transparent;
+  color: var(--chat-brand-dark);
+  font-size: 13px;
+  font-weight: 620;
+}
+
+.history-actions button.danger { color: var(--chat-danger); }
+
+.session-dialog-form {
+  display: grid;
+  gap: 9px;
+}
+
+.session-dialog-form label {
+  color: var(--chat-text);
+  font-size: 14px;
+  font-weight: 650;
+}
+
+.session-dialog-form input {
+  width: 100%;
+  min-height: 48px;
+  padding: 0 13px;
+  border: 1px solid var(--chat-control-border);
+  border-radius: 12px;
+  outline: 0;
+  color: var(--chat-text);
+  font-size: 16px;
+}
+
+.session-dialog-form input:focus {
+  border-color: var(--chat-brand);
+  box-shadow: 0 0 0 3px rgba(20, 148, 119, 0.1);
+}
+
+.session-dialog-form p {
+  margin: 0;
+  color: var(--chat-weak);
+  font-size: 12px;
+  text-align: right;
+}
+
+.confirm-copy {
+  margin: 0;
+  color: var(--chat-muted);
+  font-size: 15px;
+  line-height: 1.75;
+}
+
+.dialog-actions {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.dialog-actions button {
+  min-height: 46px;
+  border: 0;
+  border-radius: 12px;
+  font-size: 15px;
+  font-weight: 650;
+}
+
+.dialog-secondary { background: #edf3f1; color: var(--chat-muted); }
+.dialog-primary { background: var(--chat-brand); color: #ffffff; }
+.dialog-danger { background: var(--chat-danger); color: #ffffff; }
+
+.dialog-actions button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.chat-toast {
+  position: fixed;
+  z-index: 100;
+  left: 50%;
+  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
+  max-width: calc(100vw - 40px);
+  padding: 11px 16px;
+  border-radius: 10px;
+  background: rgba(23, 35, 31, 0.92);
+  color: #ffffff;
+  font-size: 14px;
+  line-height: 1.5;
+  text-align: center;
+  transform: translateX(-50%);
+  box-shadow: 0 10px 30px rgba(20, 34, 29, 0.18);
+}
+
+body.drawer-open { overflow: hidden; }
+
+@media (max-width: 390px) {
+  .chat-header {
+    grid-template-columns: 44px minmax(0, 1fr) auto 48px;
+    gap: 7px;
+    padding-right: 10px;
+    padding-left: 10px;
+  }
+
+  .assistant-summary h1 { font-size: 15px; }
+  .assistant-summary p { font-size: 10px; }
+  .user-summary { max-width: 72px; font-size: 9px; }
+  .header-logout-button { min-width: 48px; padding: 0 5px; }
+  .session-quota { margin-right: 12px; margin-left: 12px; }
+  .message-list { padding-right: 12px; padding-left: 12px; }
+  .chat-composer { padding-right: 10px; padding-left: 10px; }
+  .composer-send,
+  .composer-stop { min-width: 72px; padding: 0 11px; }
+}
+
+@media (max-width: 350px) {
+  .user-summary { display: none; }
+  .chat-header { grid-template-columns: 44px minmax(0, 1fr) 48px; }
+}
+
+@media (max-height: 680px) {
+  .chat-header { min-height: 70px; }
+  .session-quota { min-height: 42px; margin-top: 8px; }
+  .message-list { padding-top: 12px; padding-bottom: 16px; }
+  .chat-composer { padding-top: 9px; }
+}
+
+@media (min-width: 521px) {
+  .phone-frame.chat-mode {
+    height: min(860px, calc(100dvh - 48px));
+  }
+
+  .modal-backdrop {
+    position: absolute;
+    border-radius: 28px;
+  }
+}
+
+@media (max-width: 520px) {
+  .phone-frame.chat-mode {
+    height: 100dvh;
+    min-height: 0;
+  }
+}