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/splash/components/splash-background.tsx

@@ -7,9 +7,9 @@
  *       原名: pic_bg_home.png (snake_case)
  *
  * sizes 属性说明：
- *   图片在 MobileShell 内（max-width: 500px）。
- *   - 视口 ≤ 500px：MobileShell = 100vw，图片 = 100vw
- *   - 视口 > 500px：MobileShell = 500px，图片 = 500px
+ *   图片在 MobileShell 内（max-width: 540px）。
+ *   - 视口 ≤ 540px：MobileShell = 100vw，图片 = 100vw
+ *   - 视口 > 540px：MobileShell = 540px，图片 = 540px
  */
 import Image from "next/image";
 import styles from "./splash-background.module.css";
@@ -22,7 +22,7 @@ export function SplashBackground() {
         alt=""
         fill
         priority
-        sizes="(max-width: 500px) 100vw, 500px"
+        sizes="(max-width: 540px) 100vw, 540px"
         className={styles.image}
       />
     </div>

src/app/splash/components/splash-button.module.css

@@ -3,13 +3,13 @@
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-26);
+  gap: clamp(var(--spacing-md, 12px), 4.815vw, var(--spacing-26, 26px));
   width: 100%;
   z-index: 2;
 }
 
 .skip {
-  font-size: var(--font-size-xxl);
+  font-size: var(--responsive-section-title, var(--font-size-xxl));
   font-weight: 700;
   font-style: italic;
   color: #ffffff;
@@ -25,15 +25,15 @@
 }
 
 .separator {
-  width: var(--spacing-26);
+  width: clamp(var(--spacing-md, 12px), 4.815vw, var(--spacing-26, 26px));
   height: 1px;
 }
 
 .facebookButton {
-  height: 48px;
-  padding: 0 30px;
+  min-height: var(--responsive-control-height, 48px);
+  padding: 0 clamp(var(--spacing-lg, 16px), 5.556vw, 30px);
   border: 0;
-  border-radius: 24px;
+  border-radius: var(--radius-full, 999px);
   /* 渐变色引用 tokens/colors.css 中定义的 token */
   background: linear-gradient(
     to right,
@@ -57,22 +57,8 @@
 }
 
 .facebookLabel {
-  font-size: var(--font-size-xxl);
+  font-size: var(--responsive-section-title, var(--font-size-xxl));
   font-weight: 700;
   color: #ffffff;
   white-space: nowrap;
 }
-
-@media (max-width: 360px) {
-  .wrapper {
-    gap: var(--spacing-md);
-  }
-
-  .separator {
-    width: var(--spacing-md);
-  }
-
-  .facebookButton {
-    padding: 0 var(--spacing-lg);
-  }
-}

src/app/splash/components/splash-content.module.css

@@ -7,7 +7,7 @@
 
 .title {
   font-family: var(--font-athelas);
-  font-size: var(--font-size-title);
+  font-size: var(--responsive-page-title, var(--font-size-title));
   font-weight: 700;
   font-style: italic;
   line-height: 1.4;

src/app/splash/components/splash-screen.module.css

@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   overflow: hidden;
 }
 
@@ -28,7 +28,11 @@
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: var(--spacing-26) var(--spacing-26) var(--spacing-md);
+  padding:
+    calc(var(--page-padding-y, 20px) + var(--app-safe-top, 0px))
+    calc(var(--page-padding-x, 26px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-md, 12px) + var(--app-safe-bottom, 0px))
+    calc(var(--page-padding-x, 26px) + var(--app-safe-left, 0px));
 }
 
 .spacer {
@@ -36,12 +40,12 @@
 }
 
 .buttonArea {
-  margin-top: var(--spacing-26);
+  margin-top: var(--page-section-gap-lg, 26px);
 }
 
 .bottom {
-  margin: var(--spacing-xxxl) 0 0 0;
-  font-size: var(--font-size-md);
+  margin: var(--page-section-gap-lg, 32px) 0 0 0;
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 400;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.9);