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>