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/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;
-  height: 40px;
+  width: var(--chat-send-button-size, 40px);
+  height: var(--chat-send-button-size, 40px);
   aspect-ratio: 1 / 1;
   border: 0;
   border-radius: 50%;
@@ -37,8 +37,8 @@
 }
 
 .icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
+  width: var(--icon-size-xl, 24px);
+  height: var(--icon-size-xl, 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;
-  left: 18px;
+  top: calc(var(--page-padding-y, 22px) + var(--app-safe-top, 0px));
+  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;
-  height: 54px;
+  width: clamp(48px, 10vw, 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;
-  bottom: max(24px, env(safe-area-inset-bottom));
-  left: 18px;
+  right: calc(var(--chat-inline-padding, 18px) + var(--app-safe-right, 0px));
+  bottom: calc(var(--page-section-gap-lg, 24px) + var(--app-safe-bottom, 0px));
+  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-height: 220px;
+  max-width: var(--chat-media-size, 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;
-  height: 220px;
+  width: var(--chat-media-size, 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);
-  max-width: 360px;
+  width: 100%;
+  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;
-  height: 43px;
+  width: var(--chat-avatar-size, 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%);
-  padding: 14px;
+  max-width: min(72vw, 280px);
+  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;
-  width: min(280px, 100%);
-  padding: 12px 14px;
-  border-radius: 20px;
+  gap: var(--spacing-sm, 10px);
+  width: min(72vw, 280px);
+  padding: var(--spacing-md, 12px) clamp(12px, 2.593vw, 14px);
+  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;
-  padding: 24px;
+  gap: var(--page-section-gap, 18px);
+  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;
 }