From a511beaa34b5ce07126d3de3749af23232fefae3 Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Wed, 10 Jun 2026 17:44:23 +0800
Subject: [PATCH] style(chat): align header and input styles with Dart
 implementation

Update chat-header and chat-input-text-field CSS to match the
Dart counterparts (chat_header.dart, chat_input_text_field.dart):
- Header: remove outer padding/background, use transparent base
- Guest banner: switch to --spacing-sm/md tokens
- Header row: add margin-left and symmetric padding
- Menu button: use 32px radius and #0d0b14 @ 0.7 background
- Input field: add white background, 32px radius, accent caret
  color, and flex centering for vertical text alignment
---
 .../chat/components/chat-header.module.css    | 24 +++++++++++--------
 .../chat-input-text-field.module.css          | 11 ++++++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/app/chat/components/chat-header.module.css b/src/app/chat/components/chat-header.module.css
index 8701f63f..971080f6 100644
--- a/src/app/chat/components/chat-header.module.css
+++ b/src/app/chat/components/chat-header.module.css
@@ -1,21 +1,22 @@
-/* ChatHeader 顶部栏样式 */
+/* ChatHeader 顶部栏样式（与 Dart chat_header.dart 对齐） */
 
+/* 外层：等价于 Dart `Column(mainAxisSize: MainAxisSize.min)` — 无 padding/背景 */
 .header {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
-  background: var(--color-header-background, rgba(0, 0, 0, 0.3));
+  padding: 0;
+  background: transparent;
 }
 
+/* 游客模式横幅（Dart: Container(color: accent, padding: vertical 8 / horizontal 12)） */
 .guestBanner {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-2, 8px);
-  padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
+  gap: var(--spacing-sm, 8px);
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
   background: var(--color-accent, #f84d96);
   color: #fff;
   font-size: var(--font-size-sm, 12px);
@@ -30,21 +31,24 @@
   height: var(--icon-size-sm, 16px);
 }
 
+/* 登录模式行容器（Dart: Container(margin-left 12, padding: vertical 8 / horizontal 12)） */
 .headerRow {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 var(--spacing-4, 16px);
+  margin-left: var(--spacing-md, 12px);
+  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
 }
 
+/* 菜单按钮（Dart: Container(padding 8, bg #0d0b14 @ 70%, radius 32)） */
 .menuButton {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-2, 8px);
-  background: var(--color-dark-background, #111)cc;
-  border-radius: 9999px;
+  padding: var(--spacing-sm, 8px);
+  background: rgba(13, 11, 20, 0.7); /* AppColors.darkBackground #0d0b14 @ alpha 0.7 */
+  border-radius: 32px; /* AppSpacing.xxxl */
   border: 0;
   cursor: pointer;
   color: var(--color-text-primary, #fff);
diff --git a/src/app/chat/components/chat-input-text-field.module.css b/src/app/chat/components/chat-input-text-field.module.css
index 4c0bf8bc..61c0f6b4 100644
--- a/src/app/chat/components/chat-input-text-field.module.css
+++ b/src/app/chat/components/chat-input-text-field.module.css
@@ -6,10 +6,12 @@
   min-width: 0;
   display: flex;
   align-items: center;
-  background: transparent; /* 容器透明，背景由 .row 提供 */
+  padding: 0 var(--spacing-lg, 16px); /* Dart: horizontal AppSpacing.lg */
+  background: #fff; /* Dart: Colors.white */
+  border-radius: 32px; /* Dart: AppRadius.xxxl */
 }
 
-/* textarea 本身（裸元素，背景透明让父容器透出） */
+/* textarea 本身（裸元素，背景透明让外层白底透出） */
 .textField {
   flex: 1 1 auto;
   min-width: 0;
@@ -20,11 +22,14 @@
   border: 0;
   outline: none;
   background: transparent;
-  color: var(--color-text-foreground, #000);
+  color: var(--color-text-foreground, #000); /* Dart: Colors.black */
+  caret-color: var(--color-accent, #f84d96); /* Dart: AppColors.accentColor */
   font-size: var(--font-size-base, 14px);
   line-height: 24px;
   resize: none;
   font-family: inherit;
+  display: flex; /* 让 textarea 成为 flex 容器，让文字竖直居中 */
+  align-items: center; /* 沿 cross axis 居中 = 文字竖直居中于 40px 高度内 */
 }
 
 .textField::placeholder {