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}