diff --git a/mini-program/src/pages/main/RecordView.vue b/mini-program/src/pages/main/RecordView.vue
index 529cb87..dfa7a11 100644
--- a/mini-program/src/pages/main/RecordView.vue
+++ b/mini-program/src/pages/main/RecordView.vue
@@ -238,12 +238,23 @@ onMounted(() => {
 }
 
 .ai-reply {
-  background: rgba(168, 85, 247, 0.08);
-  border: 1px solid rgba(168, 85, 247, 0.25);
+  background: rgba(168, 85, 247, 0.05);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(168, 85, 247, 0.15);
+  border-left: 4rpx solid #C084FC;
+  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1),
+              inset 0 0 15rpx rgba(168, 85, 247, 0.03);
   border-radius: 20rpx;
-  padding: 24rpx;
-  box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
-  margin-top: 16rpx;
+  padding: 28rpx;
+  margin-top: 24rpx;
+  transition: all 0.3s ease;
+}
+
+.ai-reply:active {
+  transform: scale(0.98);
+  box-shadow: 0 0 12px rgba(168, 85, 247, 0.08),
+              inset 0 0 10rpx rgba(168, 85, 247, 0.02);
 }
 
 .ai-header {
@@ -270,14 +281,33 @@ onMounted(() => {
   color: rgba(243, 232, 255, 0.8);
   font-style: italic;
   line-height: 1.5;
+  overflow: hidden;
 }
 
 .ai-content.typing {
-  animation: typing 2s ease-out;
+  animation: typing-reveal 2.5s cubic-bezier(0.4, 0, 0.2, 1),
+             glow-pulse 2s ease-in-out infinite 1s;
 }
 
-@keyframes typing {
-  from { opacity: 0; transform: translateY(10rpx); }
-  to { opacity: 1; transform: translateY(0); }
+@keyframes typing-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(8rpx);
+    filter: blur(4rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+    filter: blur(0);
+  }
+}
+
+@keyframes glow-pulse {
+  0%, 100% {
+    text-shadow: 0 0 4rpx rgba(192, 132, 252, 0.3);
+  }
+  50% {
+    text-shadow: 0 0 8rpx rgba(192, 132, 252, 0.6);
+  }
 }
 </style>