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/auth/components/auth-screen.module.css

@@ -1,6 +1,6 @@
 /* auth-screen.module.css
  * 与 splash-screen.module.css 同款结构（MobileShell 顶层 + .wrapper + .content）
- * 删：.fullBleed（mobile 宽度约束改由 MobileShell.content 的 max-width: 500px 提供）
+ * 移动端宽度约束由 ResponsiveMobileShell / MobileShell 统一提供。
  */
 
 .wrapper {
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   background: #fbf1f2;
   overflow: hidden;
 }
@@ -21,5 +21,9 @@
   flex: 1 1 auto;
   flex-direction: column;
   justify-content: center;
-  padding: var(--spacing-lg);
+  padding:
+    calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-top, 0px))
+    calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-right, 0px))
+    calc(var(--page-padding-y, var(--spacing-lg)) + var(--app-safe-bottom, 0px))
+    calc(var(--page-padding-x, var(--spacing-lg)) + var(--app-safe-left, 0px));
 }