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