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