refactor(app): migrate shared styles to tailwind

src/app/chat/chat-screen.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, type CSSProperties } from "react";
 import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 
@@ -35,7 +35,11 @@ import { useChatUnlockNavigationFlow } from "./hooks/use-chat-unlock-navigation-
 import { useChatGuestLogin } from "./hooks/use-chat-guest-login";
 import { useChatMessageLimitBanner } from "./hooks/use-chat-message-limit-banner";
 import { useChatPromotionBootstrap } from "./hooks/use-chat-promotion-bootstrap";
-import styles from "./components/chat-screen.module.css";
+
+const chatShellStyle = {
+  "--chat-message-font-size": "clamp(16px, 3.333vw, 18px)",
+  "--chat-message-line-height": "1.5",
+} as CSSProperties;
 
 export function ChatScreen() {
   const router = useRouter();
@@ -188,8 +192,11 @@ export function ChatScreen() {
 
   return (
     <MobileShell>
-      <div className={styles.shell}>
-        <div className={styles.background}>
+      <div
+        className="relative flex h-(--app-viewport-height,100dvh) flex-col overflow-hidden bg-(--color-dark-background,#111) text-(--color-text-primary,#fff)"
+        style={chatShellStyle}
+      >
+        <div className="pointer-events-none absolute inset-0 z-0">
           <Image
             src="/images/chat/bg-chatpage.png"
             alt=""
@@ -199,7 +206,7 @@ export function ChatScreen() {
           />
         </div>
 
-        <div className={styles.layout}>
+        <div className="relative z-[1] flex min-h-0 flex-[1_1_auto] flex-col">
           {/* isGuest 派生自 auth.loginStatus */}
           <ChatHeader
             isGuest={isGuest}

src/app/chat/components/chat-screen.module.css

@@ -1,30 +0,0 @@
-/* ChatScreen 编排层样式（仅 shell 容器 + 背景） */
-
-.shell {
-  --chat-message-font-size: clamp(16px, 3.333vw, 18px);
-  --chat-message-line-height: 1.5;
-
-  display: flex;
-  flex-direction: column;
-  height: var(--app-viewport-height, 100dvh);
-  background: var(--color-dark-background, #111);
-  color: var(--color-text-primary, #fff);
-  position: relative;
-  overflow: hidden;
-}
-
-.background {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  pointer-events: none;
-}
-
-.layout {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-}