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