fix(chat): render locked voice messages correctly

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

@@ -24,6 +24,14 @@
   color: #ffffff;
 }
 
+.locked {
+  border: 1px solid rgba(246, 87, 160, 0.2);
+  background:
+    linear-gradient(180deg, rgba(255, 244, 248, 0.95), rgba(255, 255, 255, 0.95)),
+    #ffffff;
+  color: #3c3b3b;
+}
+
 .playButton {
   display: inline-flex;
   flex: 0 0 auto;
@@ -43,6 +51,11 @@
   color: #ffffff;
 }
 
+.locked .playButton {
+  background: linear-gradient(135deg, #ff8fc7 0%, #f657a0 100%);
+  color: #ffffff;
+}
+
 .playButton:disabled {
   cursor: not-allowed;
   opacity: 0.6;
@@ -106,3 +119,33 @@
 .bubbleUser .error {
   color: #ffffff;
 }
+
+.hint {
+  margin: 0;
+  color: #3c3b3b;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.unlockButton {
+  align-self: flex-start;
+  margin-top: 2px;
+  padding: 9px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #ff67e0, #ff52a2);
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.unlockButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.65;
+}
+
+.unlockButton:focus-visible {
+  outline: 2px solid #f657a0;
+  outline-offset: 3px;
+}