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);
+  top: calc(var(--spacing-xl, 20px) + var(--app-safe-top, 0px));
-  left: var(--spacing-xl);
+  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;
+  width: var(--responsive-icon-button-size, 42px);
-  height: 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;

src/app/auth/components/auth-background.tsx

@@ -1,7 +1,7 @@
 /**
  * Auth 背景图片
  *
- * 与 splash-background.tsx 同款模式（next/image fill + 500px sizes）。
+ * 与 splash-background.tsx 同款模式（next/image fill + 540px sizes）。
  * 资源: /public/images/auth/bg-login.png
  */
 import Image from "next/image";
@@ -15,7 +15,7 @@ export function AuthBackground() {
         alt=""
         fill
         priority
-        sizes="(max-width: 500px) 100vw, 500px"
+        sizes="(max-width: 540px) 100vw, 540px"
         className={styles.image}
       />
     </div>

src/app/auth/components/auth-email-panel.module.css

@@ -28,16 +28,16 @@
 
 .logo {
   display: block;
-  height: var(--auth-logo-height);
+  height: clamp(92px, 22.222vw, var(--auth-logo-height));
   width: auto;
-  max-width: 220px;
+  max-width: min(56vw, 220px);
   margin: 0 auto;
   object-fit: contain;
 }
 
 .spacer {
   flex: 1 1 0;
-  min-height: var(--spacing-lg);
+  min-height: var(--page-section-gap, var(--spacing-lg));
 }
 
 .toggleButton {
@@ -45,7 +45,7 @@
   background: none;
   border: none;
   padding: var(--spacing-md) 0 0;
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   color: var(--color-auth-text-primary);
   text-decoration: underline;
   text-underline-offset: 3px;
@@ -62,7 +62,7 @@
   background: none;
   border: none;
   padding: var(--spacing-md) 0 var(--spacing-md);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   color: var(--color-auth-text-primary);
   text-decoration: underline;
   text-underline-offset: 3px;

src/app/auth/components/auth-error-message.module.css

@@ -10,7 +10,7 @@
   background: transparent;
   border: none;
   color: var(--color-error);
-  font-size: var(--font-size-sm);
+  font-size: var(--responsive-caption, var(--font-size-sm));
   line-height: 1.4;
   text-align: center;
 }

src/app/auth/components/auth-facebook-panel.module.css

@@ -16,14 +16,14 @@
 
 .spacer {
   flex: 1 1 0;
-  min-height: var(--spacing-lg);
+  min-height: var(--page-section-gap, var(--spacing-lg));
 }
 
 .logo {
   display: block;
-  height: var(--auth-logo-height);
+  height: clamp(92px, 22.222vw, var(--auth-logo-height));
   width: auto;
-  max-width: 220px;
+  max-width: min(56vw, 220px);
   margin: 0 auto;
   object-fit: contain;
 }
@@ -34,13 +34,13 @@
   justify-content: center;
   gap: var(--spacing-md);
   width: 100%;
-  height: var(--auth-field-height);
+  min-height: var(--auth-field-height);
   padding: 0 var(--spacing-lg);
   border: none;
-  border-radius: var(--radius-xxxl);
+  border-radius: var(--radius-full, 999px);
   background: var(--color-auth-surface);
   color: var(--color-auth-text-primary);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 600;
   cursor: pointer;
   margin-top: var(--spacing-md);
@@ -92,7 +92,7 @@
   background: none;
   border: none;
   padding: var(--spacing-md) 0;
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   color: var(--color-auth-text-primary);
   text-decoration: underline;
   text-underline-offset: 3px;

src/app/auth/components/auth-legal-text.module.css

@@ -38,7 +38,7 @@
 
 .text {
   margin: 0;
-  font-size: var(--font-size-sm);
+  font-size: var(--responsive-caption, var(--font-size-sm));
   line-height: 1.4;
   color: var(--color-auth-text-primary);
   text-align: left;

src/app/auth/components/auth-other-options-dialog.module.css

@@ -12,7 +12,7 @@
   align-items: stretch;
   gap: var(--spacing-md);
   padding: var(--spacing-md) var(--spacing-xxl)
-    calc(var(--spacing-xxl) + env(safe-area-inset-bottom));
+    calc(var(--spacing-xxl) + var(--app-safe-bottom, 0px));
 }
 
 .handle {
@@ -26,7 +26,7 @@
 
 .title {
   margin: var(--spacing-sm) 0;
-  font-size: var(--font-size-bottom-sheet-title);
+  font-size: var(--responsive-page-title, var(--font-size-bottom-sheet-title));
   font-weight: 700;
   color: var(--color-auth-text-primary);
   text-align: center;
@@ -42,7 +42,7 @@
   border: none;
   padding: var(--spacing-md) 0;
   color: var(--color-auth-text-primary);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 500;
   cursor: pointer;
   text-decoration: none;

src/app/auth/components/auth-primary-button.module.css

@@ -13,10 +13,10 @@
   justify-content: center;
   gap: var(--spacing-sm);
   width: 100%;
-  height: var(--auth-field-height);
+  min-height: var(--auth-field-height);
   padding: 0 var(--spacing-lg);
   border: none;
-  border-radius: var(--radius-xxxl);
+  border-radius: var(--radius-full, 999px);
   background: linear-gradient(
     90deg,
     var(--color-auth-primary-gradient-start),
@@ -24,7 +24,7 @@
   );
   box-shadow: 0 3px 5px var(--color-auth-primary-button-shadow);
   color: #ffffff;
-  font-size: var(--font-size-lg);
+  font-size: var(--responsive-body, var(--font-size-lg));
   font-weight: 700;
   cursor: pointer;
   transition: filter 0.15s ease, transform 0.05s ease, opacity 0.15s ease;

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));
 }

src/app/auth/components/auth-social-button.module.css

@@ -14,13 +14,13 @@
   justify-content: center;
   gap: var(--spacing-md);
   width: 100%;
-  height: var(--auth-social-button-height);
+  min-height: var(--auth-social-button-height);
   padding: 0 var(--spacing-lg);
   border: 1px solid var(--color-auth-border);
-  border-radius: var(--radius-xxl);
+  border-radius: var(--radius-full, 999px);
   background: var(--color-auth-surface);
   color: var(--color-auth-text-primary);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s ease, opacity 0.15s ease;

src/app/auth/components/auth-social-buttons.module.css

@@ -11,13 +11,13 @@
   justify-content: center;
   gap: var(--spacing-sm);
   width: 100%;
-  height: var(--button-height);
+  min-height: var(--button-height);
   padding: 0 var(--spacing-lg);
   border: var(--border-light) solid var(--color-chat-input-border);
   border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.04);
   color: var(--color-text-primary);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 500;
   cursor: pointer;
   transition: background 0.15s ease;

src/app/auth/components/auth-text-field.module.css

@@ -16,19 +16,19 @@
 }
 
 .label {
-  font-size: var(--font-size-sm);
+  font-size: var(--responsive-caption, var(--font-size-sm));
   color: var(--color-text-secondary);
 }
 
 .input {
   width: 100%;
-  height: var(--auth-field-height);
+  min-height: var(--auth-field-height);
   padding: 0 var(--spacing-lg) 0 var(--spacing-xxl);
   border: none;
-  border-radius: var(--radius-xxxl);
+  border-radius: var(--radius-full, 999px);
   background: var(--color-auth-surface);
   color: var(--color-auth-text-primary);
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   box-shadow: 0 3px 5px var(--color-auth-input-shadow);
   outline: none;
   transition: box-shadow 0.15s ease;
@@ -54,6 +54,6 @@
 }
 
 .error {
-  font-size: var(--font-size-sm);
+  font-size: var(--responsive-caption, var(--font-size-sm));
   color: var(--color-error);
 }

src/app/chat/chat-screen.tsx

@@ -147,7 +147,7 @@ export function ChatScreen() {
             alt=""
             fill
             priority
-            sizes="(max-width: 500px) 100vw, 500px"
+            sizes="(max-width: 540px) 100vw, 540px"
           />
         </div>
 

src/app/chat/components/chat-area.module.css

@@ -4,7 +4,11 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
-  padding: var(--spacing-4, 16px) var(--spacing-5, 20px);
+  padding:
+    var(--spacing-lg, 16px)
+    calc(var(--chat-inline-padding, 20px) + var(--app-safe-right, 0px))
+    var(--spacing-lg, 16px)
+    calc(var(--chat-inline-padding, 20px) + var(--app-safe-left, 0px));
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3, 12px);
@@ -21,7 +25,7 @@
   background: var(--color-surface-muted, rgba(255, 255, 255, 0.06));
   border-radius: var(--radius-md, 8px);
   padding: var(--spacing-1, 4px) var(--spacing-3, 12px);
-  font-size: var(--font-size-xs, 11px);
+  font-size: var(--responsive-micro, var(--font-size-xs, 11px));
   color: #000;
   opacity: 0.75;
 }
@@ -31,7 +35,7 @@
   background: var(--color-surface-muted, rgba(255, 255, 255, 0.06));
   border-radius: var(--radius-md, 8px);
   padding: var(--spacing-2, 8px) var(--spacing-4, 16px);
-  font-size: var(--font-size-sm, 12px);
+  font-size: var(--responsive-caption, var(--font-size-sm, 12px));
   color: #8c8b8b;
   text-align: center;
 }
@@ -56,22 +60,22 @@
 }
 
 .bubbleAi {
-  max-width: 75%;
+  max-width: var(--chat-bubble-max-width, 75%);
   background: var(--color-bubble-ai, rgba(255, 255, 255, 0.08));
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
   border-radius: var(--radius-lg, 12px);
-  font-size: var(--font-size-base, 14px);
+  font-size: var(--responsive-body, var(--font-size-base, 14px));
   line-height: 1.45;
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .bubbleUser {
-  max-width: 75%;
+  max-width: var(--chat-bubble-max-width, 75%);
   background: var(--color-bubble-user, #4f46e5);
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
   border-radius: var(--radius-lg, 12px);
-  font-size: var(--font-size-base, 14px);
+  font-size: var(--responsive-body, var(--font-size-base, 14px));
   line-height: 1.45;
   white-space: pre-wrap;
   word-break: break-word;
@@ -79,7 +83,7 @@
 }
 
 .bubbleTime {
-  font-size: var(--font-size-xs, 11px);
+  font-size: var(--responsive-micro, var(--font-size-xs, 11px));
   opacity: 0.5;
 }
 

src/app/chat/components/chat-header.module.css

@@ -20,7 +20,7 @@
   padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
   background: var(--color-accent, #f84d96);
   color: #fff;
-  font-size: var(--font-size-sm, 12px);
+  font-size: var(--responsive-caption, var(--font-size-sm, 12px));
   font-weight: 500;
   cursor: pointer;
   border: 0;
@@ -48,7 +48,7 @@
   justify-content: center;
   padding: var(--spacing-sm, 8px);
   background: rgba(13, 11, 20, 0.7); /* AppColors.darkBackground #0d0b14 @ alpha 0.7 */
-  border-radius: 32px; /* AppSpacing.xxxl */
+  border-radius: var(--radius-full, 999px);
   border: 0;
   cursor: pointer;
   color: var(--color-text-primary, #fff);

src/app/chat/components/chat-input-bar.module.css

@@ -2,16 +2,17 @@
 
 /* 键盘适配：
  *   --chat-input-lift 是小米 Android + Facebook IAB 的专用抬升值。
- *   env(safe-area-inset-bottom) 处理小米全面屏手势条 / iPhone home indicator。
+ *   --app-safe-bottom 处理小米全面屏手势条 / iPhone home indicator。
  *   正常浏览器中 --chat-input-lift 为 0，因此无视觉副作用。 */
 .bar {
   flex: 0 0 auto;
   padding: 0
-    var(--spacing-lg, 16px)
+    calc(var(--chat-inline-padding, 16px) + var(--app-safe-right, 0px))
     calc(
       var(--spacing-lg, 16px) + var(--chat-input-lift, 0px) +
-        env(safe-area-inset-bottom, 0px)
+        var(--app-safe-bottom, 0px)
-    );
+    )
+    calc(var(--chat-inline-padding, 16px) + var(--app-safe-left, 0px));
   background: transparent;
   transition: padding-top 0.2s ease, padding-bottom 0.2s ease,
     background-color 0.2s ease, box-shadow 0.2s ease;
@@ -30,7 +31,7 @@
   gap: var(--spacing-sm, 8px);
   padding: var(--spacing-sm, 8px);
   background: #fff;
-  border-radius: 32px;
+  border-radius: var(--radius-full, 999px);
   border: 1px solid transparent;
   transition: border-color 0.2s ease;
 }

src/app/chat/components/chat-input-text-field.module.css

@@ -8,7 +8,7 @@
   align-items: center;
   padding: 0 var(--spacing-lg, 16px); /* Dart: horizontal AppSpacing.lg */
   background: #fff; /* Dart: Colors.white */
-  border-radius: 32px; /* Dart: AppRadius.xxxl */
+  border-radius: var(--radius-full, 999px);
 }
 
 /* textarea 本身（裸元素，背景透明让外层白底透出） */
@@ -16,7 +16,7 @@
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
-  min-height: 40px;
+  min-height: var(--chat-send-button-size, 40px);
   max-height: 120px; /* 约 5 行 × 24px line-height */
   padding: 6px 0 0 0; /* 上 6px：让文字视觉下移，避开正中位置 */
   border: 0;

src/app/chat/components/chat-send-button.module.css

@@ -2,8 +2,8 @@
 
 .button {
   flex: 0 0 auto;
-  width: 40px;
+  width: var(--chat-send-button-size, 40px);
-  height: 40px;
+  height: var(--chat-send-button-size, 40px);
   aspect-ratio: 1 / 1;
   border: 0;
   border-radius: 50%;
@@ -37,8 +37,8 @@
 }
 
 .icon {
-  width: 24px;
+  width: var(--icon-size-xl, 24px);
-  height: 24px;
+  height: var(--icon-size-xl, 24px);
-  font-size: 24px;
+  font-size: var(--icon-size-xl, 24px);
   line-height: 1;
 }

src/app/chat/components/external-browser-dialog.module.css

@@ -6,10 +6,15 @@
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
 }
 
 .dialog {
-  width: calc(100% - 40px);
+  width: 100%;
   max-width: var(--pwa-install-dialog-max-width, 360px);
   padding: 24px 16px 16px;
   text-align: center;
@@ -20,7 +25,7 @@
 
 .title {
   margin: 0 0 10px;
-  font-size: var(--font-size-22, 22px);
+  font-size: var(--responsive-page-title, var(--font-size-22, 22px));
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-text-foreground, #171717);
@@ -28,7 +33,7 @@
 
 .content {
   margin: 0 24px var(--spacing-xxl, 24px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   line-height: 1.5;
   text-align: left;
   color: #393939;
@@ -43,10 +48,10 @@
 
 .button {
   flex: 1 1 auto;
-  height: var(--pwa-button-height, 44px);
+  min-height: var(--pwa-button-height, 44px);
   border: 0;
   border-radius: var(--radius-bottom-sheet, 28px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 600;
   cursor: pointer;
   display: flex;

src/app/chat/components/fullscreen-image-viewer.module.css

@@ -52,14 +52,14 @@
 
 .backButton {
   position: absolute;
-  top: 22px;
+  top: calc(var(--page-padding-y, 22px) + var(--app-safe-top, 0px));
-  left: 18px;
+  left: calc(var(--chat-inline-padding, 18px) + var(--app-safe-left, 0px));
   z-index: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 54px;
+  width: clamp(48px, 10vw, 54px);
-  height: 54px;
+  height: clamp(48px, 10vw, 54px);
   border: 0;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.94);
@@ -70,11 +70,11 @@
 
 .unlockButton {
   position: absolute;
-  right: 18px;
+  right: calc(var(--chat-inline-padding, 18px) + var(--app-safe-right, 0px));
-  bottom: max(24px, env(safe-area-inset-bottom));
+  bottom: calc(var(--page-section-gap-lg, 24px) + var(--app-safe-bottom, 0px));
-  left: 18px;
+  left: calc(var(--chat-inline-padding, 18px) + var(--app-safe-left, 0px));
   z-index: 1;
-  min-height: 64px;
+  min-height: clamp(56px, 11.852vw, 64px);
   border: 0;
   border-radius: 999px;
   background: linear-gradient(90deg, #e05ad7 0%, #ef66b0 100%);
@@ -82,7 +82,7 @@
   color: #ffffff;
   cursor: pointer;
   font-family: var(--font-athelas), Athelas, serif;
-  font-size: 22px;
+  font-size: var(--responsive-page-title, 22px);
   font-weight: 700;
   letter-spacing: 0.01em;
 }
@@ -107,7 +107,7 @@
 
 .error {
   color: var(--color-text-secondary, #9e9e9e);
-  font-size: 48px;
+  font-size: clamp(36px, 8.889vw, 48px);
 }
 
 @keyframes spin {

src/app/chat/components/history-unlock-dialog.module.css

@@ -6,10 +6,15 @@
   align-items: center;
   justify-content: center;
   background: rgba(0, 0, 0, 0.5);
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
 }
 
 .dialog {
-  width: calc(100% - 40px);
+  width: 100%;
   max-width: var(--pwa-install-dialog-max-width, 360px);
   padding: 24px 16px 16px;
   text-align: center;
@@ -20,7 +25,7 @@
 
 .title {
   margin: 0 0 10px;
-  font-size: var(--font-size-22, 22px);
+  font-size: var(--responsive-page-title, var(--font-size-22, 22px));
   font-weight: 700;
   line-height: 1.2;
   color: var(--color-text-foreground, #171717);
@@ -28,7 +33,7 @@
 
 .content {
   margin: 0 24px var(--spacing-lg, 16px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   line-height: 1.5;
   text-align: left;
   color: #393939;
@@ -36,7 +41,7 @@
 
 .error {
   margin: 0 24px var(--spacing-lg, 16px);
-  font-size: var(--font-size-md, 14px);
+  font-size: var(--responsive-caption, var(--font-size-md, 14px));
   line-height: 1.4;
   text-align: left;
   color: #c0364c;
@@ -50,10 +55,10 @@
 
 .button {
   flex: 1 1 auto;
-  height: var(--pwa-button-height, 44px);
+  min-height: var(--pwa-button-height, 44px);
   border: 0;
   border-radius: var(--radius-bottom-sheet, 28px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 600;
   cursor: pointer;
   display: flex;

src/app/chat/components/image-bubble.module.css

@@ -2,8 +2,8 @@
 
 .bubble {
   position: relative;
-  max-width: 220px;
+  max-width: var(--chat-media-size, 220px);
-  max-height: 220px;
+  max-height: var(--chat-media-size, 220px);
   border-radius: var(--radius-lg, 12px);
   border-top-left-radius: 0;
   overflow: hidden;
@@ -39,9 +39,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 220px;
+  width: var(--chat-media-size, 220px);
-  height: 220px;
+  height: var(--chat-media-size, 220px);
   background: var(--color-bubble-background, #fff);
   color: var(--color-text-secondary, #9e9e9e);
-  font-size: 24px;
+  font-size: var(--icon-size-xl, 24px);
 }

src/app/chat/components/insufficient-credits-dialog.module.css

@@ -5,7 +5,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
   background: rgba(0, 0, 0, 0.52);
 }
 
@@ -23,7 +27,7 @@
 .title {
   margin: 0 0 10px;
   color: var(--color-text-foreground, #171717);
-  font-size: var(--font-size-22, 22px);
+  font-size: var(--responsive-page-title, var(--font-size-22, 22px));
   font-weight: 700;
   line-height: 1.2;
 }
@@ -31,7 +35,7 @@
 .content {
   margin: 0 12px 18px;
   color: #393939;
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   line-height: 1.5;
 }
 
@@ -50,7 +54,7 @@
   justify-content: space-between;
   gap: 12px;
   color: #4a3b43;
-  font-size: var(--font-size-md, 14px);
+  font-size: var(--responsive-caption, var(--font-size-md, 14px));
   line-height: 1.3;
 }
 
@@ -62,7 +66,7 @@
 .creditItem dd {
   margin: 0;
   color: #f657a0;
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 800;
 }
 
@@ -74,10 +78,10 @@
 
 .button {
   flex: 1 1 auto;
-  height: var(--pwa-button-height, 44px);
+  min-height: var(--pwa-button-height, 44px);
   border: 0;
   border-radius: var(--radius-bottom-sheet, 28px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 700;
   cursor: pointer;
   display: flex;

src/app/chat/components/language-dialog.module.css

@@ -8,22 +8,27 @@
   align-items: center;
   justify-content: center;
   z-index: 50;
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
 }
 
 .dialog {
-  width: calc(100% - 40px);
+  width: 100%;
-  max-width: 360px;
+  max-width: var(--dialog-max-width, 360px);
   background: var(--color-surface, #1f1a2e);
   border-radius: var(--radius-lg, 12px);
   padding: var(--spacing-5, 20px);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-3, 12px);
-  max-height: 80vh;
+  max-height: min(80vh, calc(var(--app-visible-height, 100dvh) - 32px));
 }
 
 .title {
-  font-size: var(--font-size-lg, 18px);
+  font-size: var(--responsive-section-title, var(--font-size-lg, 18px));
   font-weight: 600;
   margin: 0;
   color: var(--color-text-primary, #fff);
@@ -34,7 +39,7 @@
   flex-direction: column;
   gap: var(--spacing-1, 4px);
   overflow-y: auto;
-  max-height: 60vh;
+  max-height: min(60vh, calc(var(--app-visible-height, 100dvh) - 120px));
 }
 
 .item {
@@ -46,7 +51,7 @@
   border: 0;
   border-radius: var(--radius-md, 8px);
   color: var(--color-text-primary, #fff);
-  font-size: var(--font-size-base, 14px);
+  font-size: var(--responsive-body, var(--font-size-base, 14px));
   text-align: left;
   cursor: pointer;
 }

src/app/chat/components/message-avatar.module.css

@@ -2,8 +2,8 @@
 
 .avatar {
   flex: 0 0 auto;
-  width: 43px;
+  width: var(--chat-avatar-size, 43px);
-  height: 43px;
+  height: var(--chat-avatar-size, 43px);
   border-radius: 9999px;
   overflow: hidden;
   border: 2px solid var(--color-avatar-border, #fbf3f5);
@@ -26,5 +26,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 24px;
+  font-size: var(--icon-size-xl, 24px);
 }

src/app/chat/components/private-message-card.module.css

@@ -1,8 +1,8 @@
 .card {
-  max-width: min(280px, 100%);
+  max-width: min(72vw, 280px);
-  padding: 14px;
+  padding: var(--responsive-card-padding, 14px);
   border: 1px solid rgba(246, 87, 160, 0.2);
-  border-radius: 18px;
+  border-radius: var(--responsive-card-radius-sm, 18px);
   border-top-left-radius: 0;
   background:
     linear-gradient(180deg, rgba(255, 244, 248, 0.95), rgba(255, 255, 255, 0.95)),
@@ -30,7 +30,7 @@
 .hint {
   margin: 0;
   color: #3c3b3b;
-  font-size: 14px;
+  font-size: var(--responsive-body, 14px);
   line-height: 1.4;
 }
 
@@ -43,7 +43,7 @@
   background: linear-gradient(90deg, #ff67e0, #ff52a2);
   color: #ffffff;
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--responsive-body, 14px);
   font-weight: 700;
 }
 

src/app/chat/components/pwa-install-dialog.module.css

@@ -11,10 +11,15 @@
   align-items: center;
   justify-content: center;
   z-index: 60;
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
 }
 
 .dialog {
-  width: calc(100% - 40px);
+  width: 100%;
   max-width: var(--pwa-install-dialog-max-width, 360px);
   background: var(--color-page-background, #ffffff);
   border-radius: 40px;
@@ -34,7 +39,7 @@
 }
 
 .title {
-  font-size: var(--font-size-22, 22px);
+  font-size: var(--responsive-page-title, var(--font-size-22, 22px));
   font-weight: 700;
   margin: 0 0 var(--spacing-sm, 8px);
   color: var(--color-text-foreground, #171717);
@@ -42,7 +47,7 @@
 }
 
 .content {
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   line-height: 1.5;
   color: #393939;
   margin: 0 36px var(--spacing-xxl, 24px);
@@ -56,10 +61,10 @@
 
 .btn {
   flex: 1 1 auto;
-  height: var(--pwa-button-height, 44px);
+  min-height: var(--pwa-button-height, 44px);
   border: 0;
   border-radius: var(--radius-bottom-sheet, 28px);
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 600;
   cursor: pointer;
   color: var(--color-page-background, #ffffff);

src/app/chat/components/text-bubble.module.css

@@ -6,7 +6,7 @@
   align-self: stretch;
   padding: var(--spacing-3, 12px) var(--spacing-4, 16px);
   border-radius: var(--radius-xxl, 24px);
-  font-size: var(--font-size-body-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-body-lg, 16px));
   line-height: 1.45;
   white-space: pre-wrap;
   word-break: break-word;

src/app/chat/components/voice-bubble.module.css

@@ -1,10 +1,10 @@
 .bubble {
   display: flex;
   align-items: flex-start;
-  gap: 10px;
+  gap: var(--spacing-sm, 10px);
-  width: min(280px, 100%);
+  width: min(72vw, 280px);
-  padding: 12px 14px;
+  padding: var(--spacing-md, 12px) clamp(12px, 2.593vw, 14px);
-  border-radius: 20px;
+  border-radius: var(--responsive-card-radius-sm, 20px);
   box-shadow: var(--shadow-input-box, 0 1px 2px rgba(0, 0, 0, 0.1));
 }
 
@@ -123,20 +123,20 @@
 .hint {
   margin: 0;
   color: #3c3b3b;
-  font-size: 14px;
+  font-size: var(--responsive-body, 14px);
   line-height: 1.4;
 }
 
 .unlockButton {
   align-self: flex-start;
   margin-top: 2px;
-  padding: 9px 14px;
+  padding: 9px clamp(12px, 2.593vw, 14px);
   border: 0;
   border-radius: 999px;
   background: linear-gradient(90deg, #ff67e0, #ff52a2);
   color: #ffffff;
   cursor: pointer;
-  font-size: 14px;
+  font-size: var(--responsive-body, 14px);
   font-weight: 700;
 }
 

src/app/chat/components/voice-unlock-options-dialog.module.css

@@ -5,13 +5,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding:
+    calc(var(--spacing-lg, 16px) + var(--app-safe-top, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-right, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-bottom, 0px))
+    calc(var(--spacing-lg, 16px) + var(--app-safe-left, 0px));
   background: rgba(0, 0, 0, 0.5);
 }
 
 .dialog {
   width: 100%;
-  max-width: 380px;
+  max-width: var(--dialog-max-width, 380px);
   padding: 24px 18px 18px;
   border-radius: 36px;
   background: var(--color-page-background, #ffffff);
@@ -21,7 +25,7 @@
 .title {
   margin: 0 0 8px;
   color: var(--color-text-foreground, #171717);
-  font-size: var(--font-size-22, 22px);
+  font-size: var(--responsive-page-title, var(--font-size-22, 22px));
   font-weight: 700;
   line-height: 1.2;
   text-align: center;
@@ -30,7 +34,7 @@
 .content {
   margin: 0 12px 20px;
   color: #393939;
-  font-size: var(--font-size-md, 14px);
+  font-size: var(--responsive-body, var(--font-size-md, 14px));
   line-height: 1.5;
   text-align: center;
 }
@@ -48,7 +52,7 @@
   border: 0;
   border-radius: 28px;
   cursor: pointer;
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--responsive-body, var(--font-size-lg, 16px));
   font-weight: 700;
 }
 
@@ -81,7 +85,7 @@
 
 .optionDescription {
   color: #3c3b3b;
-  font-size: 13px;
+  font-size: var(--responsive-caption, 13px);
   font-weight: 500;
   line-height: 1.25;
 }

src/app/chat/image/[messageId]/chat-image-viewer-screen.module.css

@@ -1,18 +1,22 @@
 .emptyScreen {
   display: flex;
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   box-sizing: border-box;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 18px;
+  gap: var(--page-section-gap, 18px);
-  padding: 24px;
+  padding:
+    calc(var(--page-padding-y, 24px) + var(--app-safe-top, 0px))
+    calc(var(--page-padding-x, 24px) + var(--app-safe-right, 0px))
+    calc(var(--page-padding-y, 24px) + var(--app-safe-bottom, 0px))
+    calc(var(--page-padding-x, 24px) + var(--app-safe-left, 0px));
   background: #0d0b14;
   color: #ffffff;
 }
 
 .backButton {
-  min-height: 44px;
+  min-height: var(--responsive-control-height, 44px);
   padding: 0 18px;
   border: 0;
   border-radius: 999px;
@@ -20,13 +24,13 @@
   color: #191316;
   cursor: pointer;
   font: inherit;
-  font-size: 15px;
+  font-size: var(--responsive-body, 15px);
   font-weight: 800;
 }
 
 .emptyText {
   margin: 0;
   color: rgba(255, 255, 255, 0.78);
-  font-size: 16px;
+  font-size: var(--responsive-body, 16px);
   font-weight: 700;
 }

src/app/coins-rules/coins-rules-screen.module.css

@@ -1,5 +1,5 @@
 .screen {
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   box-sizing: border-box;
   padding:
     calc(var(--page-padding-y, 18px) + var(--app-safe-top, 0px))

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

@@ -4,7 +4,7 @@
   flex-direction: column;
   gap: 14px;
   overflow: hidden;
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   box-sizing: border-box;
   padding:
     var(--app-safe-top, 0px)

src/app/splash/components/splash-background.tsx

@@ -7,9 +7,9 @@
  *       原名: pic_bg_home.png (snake_case)
  *
  * sizes 属性说明：
- *   图片在 MobileShell 内（max-width: 500px）。
+ *   图片在 MobileShell 内（max-width: 540px）。
- *   - 视口 ≤ 500px：MobileShell = 100vw，图片 = 100vw
+ *   - 视口 ≤ 540px：MobileShell = 100vw，图片 = 100vw
- *   - 视口 > 500px：MobileShell = 500px，图片 = 500px
+ *   - 视口 > 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;
+  min-height: var(--responsive-control-height, 48px);
-  padding: 0 30px;
+  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;
+  margin: var(--page-section-gap-lg, 32px) 0 0 0;
-  font-size: var(--font-size-md);
+  font-size: var(--responsive-body, var(--font-size-md));
   font-weight: 400;
   line-height: 1.5;
   color: rgba(255, 255, 255, 0.9);

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

@@ -1,7 +1,7 @@
 .shell {
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;
+  min-height: var(--app-viewport-height, 100dvh);
   background:
     radial-gradient(circle at 8% 4%, rgba(255, 255, 255, 0.95) 0 90px, transparent 160px),
     linear-gradient(180deg, #fff9fb 0%, #fcf3f4 52%, #fffefe 100%);

src/tokens/dimensions.css

@@ -51,7 +51,7 @@
   --auth-legal-checkbox-inner-size: 10px;
 
   /* 悬浮返回按钮（40×40 圆形） */
-  --back-button-size: 40px;
+  --back-button-size: var(--responsive-icon-button-size, 40px);
 
   /* 底部弹层圆角（28px = Dart AppRadius.radius28） */
   --auth-bottom-sheet-radius: 28px;

src/tokens/responsive.css

@@ -40,6 +40,13 @@
   --responsive-control-height: clamp(44px, 8.889vw, 48px);
   --responsive-icon-button-size: clamp(38px, 8.148vw, 44px);
 
+  /* Chat 专用响应式尺寸 */
+  --chat-inline-padding: clamp(14px, 3.704vw, 20px);
+  --chat-bubble-max-width: min(75%, 280px);
+  --chat-media-size: min(64vw, 240px);
+  --chat-avatar-size: clamp(38px, 7.963vw, 43px);
+  --chat-send-button-size: clamp(40px, 8.148vw, 44px);
+
   /* Sidebar 专用响应式尺寸 */
   --sidebar-user-padding-y: clamp(18px, 3.704vw, 20px);
   --sidebar-card-gap-y: clamp(6px, 1.481vw, 8px);