Refactor chat component styles for responsiveness and consistency

- Updated padding and margin properties across various chat components to utilize responsive design tokens, ensuring better adaptability to different screen sizes.
- Replaced fixed sizes with responsive variables for buttons, avatars, and bubbles to enhance UI flexibility.
- Adjusted font sizes to use responsive tokens, improving text readability on various devices.
- Standardized border-radius and other dimensions using CSS variables for a cohesive design language.
- Enhanced dialog and screen components with safe area insets for better compatibility with modern devices.

src/app/_components/back-button.module.css

@@ -16,8 +16,8 @@
 
 .floating {
   position: absolute;
-  top: var(--spacing-xl);
-  left: var(--spacing-xl);
+  top: calc(var(--spacing-xl, 20px) + var(--app-safe-top, 0px));
+  left: calc(var(--spacing-xl, 20px) + var(--app-safe-left, 0px));
   z-index: 2;
   width: var(--back-button-size);
   height: var(--back-button-size);
@@ -27,8 +27,8 @@
 }
 
 .soft {
-  width: 42px;
-  height: 42px;
+  width: var(--responsive-icon-button-size, 42px);
+  height: var(--responsive-icon-button-size, 42px);
   color: #21191d;
   border: 1px solid rgba(25, 19, 22, 0.08);
   background: rgba(255, 255, 255, 0.82);

src/app/_components/core/bottom-sheet.module.css

@@ -15,12 +15,12 @@
 .panel {
   position: relative;
   width: 100%;
-  max-width: 500px;
+  max-width: var(--app-max-width, 540px);
   background: var(--color-auth-surface);
   color: var(--color-auth-text-primary);
   border-radius: var(--radius-bottom-sheet) var(--radius-bottom-sheet) 0 0;
   box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
-  padding-bottom: env(safe-area-inset-bottom);
+  padding-bottom: var(--app-safe-bottom, env(safe-area-inset-bottom));
   animation: slideUp 0.18s ease-out;
 }
 

src/app/_components/core/bottom-sheet.tsx

@@ -6,7 +6,7 @@
  *
  * 设计目标：
  *   - portal 渲染到 body
- *   - 固定底部、最大宽度 500px、顶部圆角 `--radius-bottom-sheet`
+ *   - 固定底部、最大宽度跟随 `--app-max-width`、顶部圆角 `--radius-bottom-sheet`
  *   - ESC 关闭 / 点击 scrim 关闭 / 打开时锁定 body 滚动
  *   - 简单 slide-up 动画（与原 Dart 行为接近）
  *   - 调用方只关心内容布局

src/app/_components/core/dialog.module.css

@@ -5,15 +5,20 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md);
+  padding:
+    calc(var(--spacing-md, 12px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-left, 0px));
 }
 
 .panel {
   position: relative;
   width: 100%;
+  max-width: var(--dialog-max-width, 380px);
   background: var(--color-dialog-background);
   border: var(--border-light) solid var(--color-dialog-border);
-  border-radius: var(--radius-xl);
+  border-radius: var(--responsive-card-radius, var(--radius-xl));
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
   color: var(--color-text-primary);
   overflow: hidden;