style(responsive): migrate fixed UI sizes to tokens

src/app/chat/components/voice-bubble.module.css

@@ -37,8 +37,8 @@
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 34px;
-  height: 34px;
+  width: clamp(32px, 6.296vw, 34px);
+  height: clamp(32px, 6.296vw, 34px);
   border: 0;
   border-radius: 50%;
   background: rgba(246, 87, 160, 0.14);
@@ -71,14 +71,14 @@
   min-width: 0;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: 8px;
+  gap: var(--spacing-sm, 8px);
 }
 
 .wave {
   display: flex;
   align-items: center;
   gap: 4px;
-  height: 34px;
+  height: clamp(32px, 6.296vw, 34px);
 }
 
 .wave span {
@@ -90,29 +90,29 @@
 }
 
 .wave span:nth-child(1) {
-  height: 12px;
+  height: clamp(10px, 2.222vw, 12px);
 }
 
 .wave span:nth-child(2) {
-  height: 22px;
+  height: clamp(18px, 4.074vw, 22px);
 }
 
 .wave span:nth-child(3) {
-  height: 30px;
+  height: clamp(24px, 5.556vw, 30px);
 }
 
 .wave span:nth-child(4) {
-  height: 18px;
+  height: clamp(15px, 3.333vw, 18px);
 }
 
 .wave span:nth-child(5) {
-  height: 26px;
+  height: clamp(21px, 4.815vw, 26px);
 }
 
 .error {
   margin: 0;
   color: var(--color-error, #ff4d4f);
-  font-size: var(--font-size-sm, 12px);
+  font-size: var(--responsive-micro, var(--font-size-sm, 12px));
   line-height: 1.4;
 }
 
@@ -130,7 +130,9 @@
 .unlockButton {
   align-self: flex-start;
   margin-top: 2px;
-  padding: 9px clamp(12px, 2.593vw, 14px);
+  padding:
+    clamp(8px, 1.667vw, 9px)
+    clamp(12px, 2.593vw, 14px);
   border: 0;
   border-radius: 999px;
   background: linear-gradient(90deg, #ff67e0, #ff52a2);