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