style(order): apply proto2 surfaces

app/(order)/chat/[id]/page.tsx

@@ -7,6 +7,7 @@ import { use, useMemo, useRef, useState } from "react"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { sendImageMessage, sendTextMessage } from "@/lib/api/chat"
@@ -60,11 +61,12 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
   const other = session.participants.find((p) => p.id !== userId) ?? session.participants[0]
 
   return (
-    <div className="flex flex-col h-[calc(100vh-3.5rem)]">
-      <div className="border-b px-4 py-3 flex items-center gap-3">
-        <Link href="/chat" className="text-muted-foreground hover:text-foreground">
-          <ArrowLeft className="h-5 w-5" />
-        </Link>
+    <div className="container mx-auto max-w-3xl px-4 py-8 h-[calc(100vh-3.5rem)] flex flex-col">
+      <Card className="flex-1 flex flex-col overflow-hidden hover:shadow-[var(--shadow-card)]">
+        <div className="border-b px-4 py-3 flex items-center gap-3 bg-muted/30">
+          <Link href="/chat" className="text-muted-foreground hover:text-foreground">
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
         <Avatar className="h-8 w-8">
           <AvatarImage src={other.avatar} />
           <AvatarFallback>{other.name[0]}</AvatarFallback>
@@ -86,7 +88,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
       </div>
 
       <ScrollArea className="flex-1 p-4">
-        <div className="space-y-4 max-w-2xl mx-auto">
+        <div className="space-y-4">
           {messages.map((msg) => {
             if (msg.type === "system") {
               return (
@@ -138,7 +140,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
       </ScrollArea>
 
       {!session.readonly ? (
-        <div className="border-t p-4">
+        <div className="border-t p-4 bg-muted/30">
           <input
             ref={imageInputRef}
             type="file"
@@ -153,7 +155,7 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
             }}
           />
           <form
-            className="flex gap-2 max-w-2xl mx-auto"
+            className="flex gap-2"
             onSubmit={(e) => {
               e.preventDefault()
               const text = input.trim()
@@ -187,11 +189,12 @@ export default function ChatDetailPage({ params }: { params: Promise<{ id: strin
           </form>
         </div>
       ) : (
-        <div className="border-t p-4 text-center text-sm text-muted-foreground">
+        <div className="border-t p-4 text-center text-sm text-muted-foreground bg-muted/30">
           <Lock className="h-4 w-4 inline mr-1" />
           订单已关闭，会话为只读状态
         </div>
       )}
+      </Card>
     </div>
   )
 }