diff --git a/src/views/chat/ChatInterface.vue b/src/views/chat/ChatInterface.vue
index f1bd866..ad9fadc 100644
--- a/src/views/chat/ChatInterface.vue
+++ b/src/views/chat/ChatInterface.vue
@@ -72,10 +72,27 @@
         <el-tag size="large" type="info" class="end-tag">会话已结束</el-tag>
       </div>
     </div>
-    <ChatInput 
-      :is-input-disabled="isInputDisabled"
-      @send="sendMessage"
-    />
+    <!-- Input Area Wrapper -->
+    <div class="input-area-wrapper">
+      <el-button 
+        class="mode-switch-btn" 
+        :icon="isVoiceInputMode ? ChatDotSquare : Microphone" 
+        circle 
+        @click="switchInputMode"
+        :disabled="isInputDisabled" 
+      />
+      <ChatInput 
+        v-if="!isVoiceInputMode"
+        :is-disabled="isInputDisabled"
+        @send="handleSendMessage" 
+        ref="chatInputRef" 
+      />
+      <VoiceInput 
+        v-else 
+        :is-disabled="isInputDisabled" 
+        @sendText="handleSendMessage"
+      />
+    </div>
     <!-- 总结弹窗 -->
     <div v-if="lastMessageWithDafen" class="summary-panel" :class="{ 'summary-panel-collapsed': isSummaryCollapsed }">
       <div class="summary-header" @click="toggleSummary">
@@ -97,8 +114,9 @@ import * as echarts from 'echarts'
 import { useChatStore } from '@/store/chat'
 import ChatHeader from '@/views/chat/components/ChatHeader.vue'
 import ChatInput from '@/views/chat/components/ChatInput.vue'
-import { ElTag, ElButton, ElInput, ElAvatar } from 'element-plus'
-import { Plus, CaretBottom, CaretRight } from '@element-plus/icons-vue'
+import VoiceInput from '@/views/chat/components/VoiceInput.vue'
+import { ElTag, ElButton, ElInput, ElAvatar, ElIcon } from 'element-plus'
+import { Plus, CaretBottom, CaretRight, Microphone, ChatDotSquare } from '@element-plus/icons-vue'
 import userAvatarUrl from '@/assets/user.png';
 import customAvatarUrl from '@/assets/custom.png';
 
@@ -109,6 +127,7 @@ defineOptions({
 const chatStore = useChatStore()
 const messageInput = ref('')
 const messageInputRef = ref(null)
+const chatInputRef = ref(null)
 const chatContainer = ref(null)
 const scoreChart = ref(null)
 const maxRows = 6
@@ -119,6 +138,7 @@ const lastScrollHeight = ref(0)
 const isSummaryCollapsed = ref(false)
 const showBackgroundDialog = ref(false)
 const showBackground = ref(false)
+const isVoiceInputMode = ref(false)
 
 // 使用计算属性获取当前会话的消息
 const currentMessages = computed(() => {
@@ -224,13 +244,22 @@ watch(() => currentMessages.value?.map(msg => msg.respondingType), (newTypes, ol
   }
 }, { deep: true })
 
-// 发送消息时滚动到底部
-const sendMessage = (message) => {
-  if (!message.trim() && !sendButtonsDisabled.value) return
-  chatStore.sendMessage(message)
-  shouldAutoScroll.value = true // 发送消息时恢复自动滚动
-  scrollToBottom(true)
-}
+// Unified message sending function
+const handleSendMessage = (message) => {
+  if (!message || !message.trim() || isInputDisabled.value) return;
+  console.log("ChatInterface sending message:", message);
+  chatStore.sendMessage(message);
+  shouldAutoScroll.value = true; // 发送消息时恢复自动滚动
+  scrollToBottom(true);
+  
+  // If coming from voice input, switch back to text mode and focus
+  if (isVoiceInputMode.value) {
+    isVoiceInputMode.value = false;
+    nextTick(() => {
+      chatInputRef.value?.focus();
+    });
+  }
+};
 
 // 格式化聊天内容
 const formatMarkdown = (text, tagType) => {
@@ -272,6 +301,17 @@ const toggleBackground = () => {
   showBackground.value = !showBackground.value
 }
 
+// Method to switch input mode
+const switchInputMode = () => {
+  isVoiceInputMode.value = !isVoiceInputMode.value;
+  // Focus the text input when switching back
+  if (!isVoiceInputMode.value) {
+    nextTick(() => {
+      chatInputRef.value?.focus();
+    });
+  }
+};
+
 onMounted(() => {
   if (chatContainer.value) {
     chatContainer.value.addEventListener('scroll', handleScroll)
@@ -279,7 +319,6 @@ onMounted(() => {
     scrollToBottom(true)
     shouldAutoScroll.value = true
   }
-
 })
 
 onUnmounted(() => {
@@ -303,7 +342,7 @@ onUnmounted(() => {
 
 // Dark mode override for chat container
 html.dark .chat-container {
-  background-color: var(--el-color-primary-dark-1); // Use the new lighter dark shade
+  background-color: var(--el-color-primary-dark-1);
 }
 
 .chat-background {
@@ -652,258 +691,27 @@ html.dark .background-section .background-content {
   }
 }
 
-.input-area {
+.input-area-wrapper {
   display: flex;
   align-items: flex-end;
+  & > :deep(.chat-input-area),
+  & > :deep(div > .voice-trigger-btn) {
+    flex: 1;
+    min-width: 0;
+  }
   gap: 8px;
   padding: 16px 20px;
   border-top: 1px solid var(--el-border-color-light);
   background-color: var(--el-bg-color);
   position: relative;
   z-index: 1;
-
-  .el-textarea {
-    flex: 1;
-    
-    :deep(.el-textarea__inner) {
-      border-radius: 8px;
-      resize: none;
-      padding: 8px 12px;
-      min-height: 40px !important;
-      max-height: 120px;
-      line-height: 24px;
-      font-size: 14px;
-      
-      &:disabled {
-        background-color: var(--el-input-disabled-bg);
-        cursor: not-allowed;
-      }
-    }
-  }
-
-  .send-btn {
-    height: 40px;
-    padding: 0 20px;
-    border-radius: 8px;
-    font-size: 14px;
-  }
 }
 
-// Dark mode override for input area
-html.dark .input-area {
-  background: var(--el-color-primary-dark-1); // Dark 1 (Lighter dark)
-  border-top-color: var(--el-border-color-dark); // Use standard dark border
-}
-
-:deep(.el-button) {
+.mode-switch-btn {
+  width: 40px;
   height: 40px;
-  padding: 0 20px;
-  font-size: 14px;
-  border-radius: 4px;
-  font-weight: 500;
-  
-  &.is-disabled {
-    background-color: var(--el-fill-color-light) !important;
-    border-color: var(--el-border-color) !important;
-    color: var(--el-text-color-placeholder) !important;
-    cursor: not-allowed;
-  }
-
-  &.new-chat-btn {
-    --el-button-bg-color: var(--el-fill-color-light);
-    --el-button-border-color: var(--el-border-color);
-    --el-button-text-color: var(--el-text-color-regular);
-    --el-button-hover-bg-color: var(--el-fill-color);
-    --el-button-hover-border-color: var(--el-border-color-hover);
-    --el-button-hover-text-color: var(--el-text-color-primary);
-    --el-button-active-bg-color: var(--el-fill-color);
-    --el-button-active-border-color: var(--el-border-color-hover);
-    --el-button-active-text-color: var(--el-text-color-primary);
-    padding: 0 16px;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    height: 40px;
-    transition: all 0.3s;
-    
-    &:hover {
-      background-color: var(--el-button-hover-bg-color);
-      border-color: var(--el-button-hover-border-color);
-      color: var(--el-button-hover-text-color);
-    }
-    
-    &:active {
-      background-color: var(--el-button-active-bg-color);
-      border-color: var(--el-button-active-border-color);
-      color: var(--el-button-active-text-color);
-    }
-    
-    &.is-disabled {
-      background-color: var(--el-fill-color-light) !important;
-      border-color: var(--el-border-color) !important;
-      color: var(--el-text-color-placeholder) !important;
-      cursor: not-allowed;
-    }
-  }
-}
-
-:deep(.el-button.new-chat-btn > span) {
-  margin-left: 0 !important;
-}
-
-:deep(.el-button--primary) {
-  --el-button-bg-color: var(--el-color-primary);
-  --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
-  --el-button-active-bg-color: var(--el-color-primary-light-3);
-  --el-button-active-border-color: var(--el-color-primary-light-3);
-}
-
-.new-chat-btn {
-  display: flex;
-  align-items: center;
-  padding: 0 16px;
-  white-space: nowrap;
-}
-
-.send-btn {
-  min-width: 80px;
-}
-
-/* 移动端适配 */
-@media screen and (max-width: 768px) {
-  .input-area {
-    padding: 12px;
-    gap: 8px;
-    
-    .new-chat-btn {
-      padding: 0 12px;
-      min-width: 70px;
-    }
-  }
-
-  :deep(.el-button) {
-    padding: 0 12px;
-
-    &.new-chat-btn {
-      .el-icon {
-        display: none;
-      }
-    }
-  }
-
-  .new-chat-btn {
-    padding: 0 12px;
-  }
-
-  .send-btn {
-    min-width: 60px;
-  }
-}
-
-/* 统一的滚动条样式 */
-.chat-messages,
-.summary-content,
-.evaluation-content,
-.background-content {
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-    display: block;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-    margin: 4px 0;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--el-border-color-darker);
-    border-radius: 4px;
-    border: 2px solid transparent;
-    background-clip: padding-box;
-
-    &:hover {
-      background: var(--el-border-color);
-    }
-  }
-}
-
-/* 添加媒体查询以适应不同屏幕 */
-@media screen and (max-width: 768px) {
-  .message-content {
-    max-width: 85%;
-  }
-  
-  .message .message-wrapper.user {
-    padding-left: 10%;
-  }
-}
-
-@media screen and (max-width: 480px) {
-  .message-content {
-    max-width: 90%;
-  }
-  
-  .message .message-wrapper.user {
-    padding-left: 5%;
-  }
-}
-
-.user {
-  .message-text {
-    border-color: transparent;
-
-    &::before {
-      border-right-color: var(--el-color-primary);
-      right: 100%;
-      transform: scaleX(-1);
-    }
-  }
-}
-
-.assistant {
-  .message-text {
-    background-color: var(--el-bg-color);
-    border-color: var(--el-border-color-lighter);
-
-    &::before {
-      border-right-color: var(--el-bg-color);
-      right: 100%;
-    }
-  }
-}
-
-.typing {
-  &::after {
-    display: none;
-  }
-}
-
-.typing-indicator {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
-  height: 20px;
-  
-  span {
-    width: 4px;
-    height: 4px;
-    background: var(--el-text-color-placeholder);
-    border-radius: 50%;
-    animation: bounce 1.4s infinite ease-in-out;
-    
-    &:nth-child(1) { animation-delay: -0.32s; }
-    &:nth-child(2) { animation-delay: -0.16s; }
-  }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% { transform: scale(0); }
-  40% { transform: scale(1); }
+  font-size: 20px;
+  flex-shrink: 0; // Prevent shrinking
 }
 
 .summary-panel {
diff --git a/src/views/chat/components/ChatInput.vue b/src/views/chat/components/ChatInput.vue
index 9b405da..24eafe3 100644
--- a/src/views/chat/components/ChatInput.vue
+++ b/src/views/chat/components/ChatInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="input-area">
+  <div class="chat-input-area">
     <el-input
       v-model="messageInput"
       type="textarea"
@@ -23,7 +23,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 import { ElInput, ElButton } from 'element-plus'
 
 const props = defineProps({
@@ -40,14 +40,19 @@ const messageInputRef = ref(null)
 const maxRows = 6
 
 const handleSend = () => {
-  if (!messageInput.value.trim() && !props.isInputDisabled) return
+  if (!messageInput.value.trim() || props.isInputDisabled) return
   emit('send', messageInput.value)
   messageInput.value = ''
   messageInputRef.value.style.height = 'auto'
 }
 
+// Expose focus method
+defineExpose({
+  focus: () => messageInputRef.value?.focus()
+})
+
 const adjustTextareaHeight = () => {
-  const textarea = messageInputRef.value
+  const textarea = messageInputRef.value?.$el?.querySelector('textarea')
   textarea.style.height = 'auto'
   const newHeight = Math.min(textarea.scrollHeight, maxRows * 24)
   textarea.style.height = newHeight + 'px'
@@ -55,12 +60,11 @@ const adjustTextareaHeight = () => {
 </script>
 
 <style lang="scss" scoped>
-.input-area {
+.chat-input-area {
   display: flex;
+  flex: 1;
   align-items: flex-end;
   gap: 8px;
-  padding: 16px 20px;
-  border-top: 1px solid var(--el-border-color-light);
   background-color: var(--el-bg-color);
   position: relative;
   z-index: 1;
@@ -90,24 +94,15 @@ const adjustTextareaHeight = () => {
     border-radius: 8px;
     font-size: 14px;
     min-width: 80px;
+    flex-shrink: 0;
   }
 }
 
-// Dark mode override for input area
-html.dark .input-area {
-  background: var(--el-color-primary-dark-1);
-  border-top-color: var(--el-border-color-dark);
-}
-
-/* 移动端适配 */
+/* Mobile adjustments */
 @media screen and (max-width: 768px) {
-  .input-area {
-    padding: 12px;
-    gap: 8px;
-  }
-
   .send-btn {
     min-width: 60px;
+    padding: 0 12px;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/src/views/chat/components/VoiceInput.vue b/src/views/chat/components/VoiceInput.vue
new file mode 100644
index 0000000..ef1aef2
--- /dev/null
+++ b/src/views/chat/components/VoiceInput.vue
@@ -0,0 +1,398 @@
+<template>
+  <div class="voice-input-container">
+    <!-- Voice Mode Trigger Button -->
+    <el-button 
+      class="voice-trigger-btn"
+      @click="openVoiceModal"
+      v-if="!showVoiceModal" 
+      :disabled="isDisabled"
+    >
+      点击 说话
+    </el-button>
+
+    <!-- Teleport the modal and overlay to the body -->
+    <Teleport to="body">
+      <!-- Voice Input Modal -->
+      <div class="voice-input-modal-overlay" v-if="showVoiceModal">
+        <div class="voice-bubble">
+          <!-- TODO: Add voice visualizer here -->
+          <div class="voice-wave-placeholder">语音波形区域</div>
+        </div>
+        <div class="voice-modal-controls">
+          <div class="modal-control-item">
+            <span class="modal-btn-label">取消</span>
+            <el-button class="modal-btn cancel-btn" circle @click="cancelVoiceInputFromModal">
+              <el-icon><Close /></el-icon>
+            </el-button>
+          </div>
+          <div class="modal-control-item">
+             <span class="modal-btn-label record-label">{{ isRecording ? '完成' : ' ' }}</span>
+             <el-button 
+                class="modal-btn confirm-btn" 
+                :type="isRecording ? 'danger' : 'primary'" 
+                circle 
+                @click="confirmVoiceInput"
+                :icon="isRecording ? ChatDotSquare : Microphone" 
+              >
+              </el-button>
+          </div>
+          <div class="modal-control-item">
+            <span class="modal-btn-label">转文字</span>
+            <el-button class="modal-btn text-send-btn" circle @click="sendAsText">
+               <el-icon><ChatDotSquare /></el-icon>
+            </el-button>
+          </div>
+        </div>
+        <div class="voice-modal-tip">{{ isRecording ? '正在录音...' : '点击麦克风开始录音' }}</div>
+      </div>
+
+      <!-- Voice-to-Text Conversion Overlay -->
+      <div class="voice-to-text-overlay" v-if="isVoiceToTextConverting">
+        <div class="voice-to-text-content">
+          <div class="converting-indicator"></div>
+          <div class="converting-text">转文字发送</div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElButton, ElMessage, ElIcon } from 'element-plus'
+import { Microphone, ChatDotSquare, Close } from '@element-plus/icons-vue'
+
+// Props definition
+const props = defineProps({
+  isDisabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// Emits definition
+const emit = defineEmits(['sendText'])
+
+// Refs related to voice input
+const isRecording = ref(false)
+const isVoiceToTextConverting = ref(false)
+const showVoiceModal = ref(false)
+let mediaRecorder = null
+let audioChunks = []
+
+// --- Voice Input Logic ---
+
+const openVoiceModal = () => {
+  if (props.isDisabled) return;
+  showVoiceModal.value = true;
+  // Reset state in case modal was closed unexpectedly before
+  isRecording.value = false; 
+  audioChunks = [];
+}
+
+const closeVoiceModal = () => {
+  showVoiceModal.value = false;
+  if (isRecording.value) {
+    stopRecording(); // Stop recording if modal is closed while recording
+    isRecording.value = false;
+  }
+}
+
+const cancelVoiceInputFromModal = () => {
+  closeVoiceModal();
+}
+
+const confirmVoiceInput = async () => {
+  if (!isRecording.value) {
+    // Start recording
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      startRecording(stream);
+      isRecording.value = true;
+    } catch (err) {
+      ElMessage.error('无法访问麦克风，请检查权限设置');
+      console.error('获取麦克风权限失败:', err);
+      closeVoiceModal(); // Close modal on error
+    }
+  } else {
+    // Stop recording and process
+    stopRecording();
+    isRecording.value = false;
+    
+    if (audioChunks.length === 0) {
+        ElMessage.warning('录音时间太短');
+        closeVoiceModal();
+        return;
+    }
+
+    isVoiceToTextConverting.value = true; // Show converting overlay
+    closeVoiceModal(); // Close the modal after stopping
+    
+    // Simulate conversion & emit result
+    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+    console.log('录音完成，模拟转换，音频大小:', audioBlob.size); 
+    setTimeout(() => {
+        const simulatedText = "模拟语音识别结果" + Date.now(); // Example text
+        emit('sendText', simulatedText);
+        isVoiceToTextConverting.value = false;
+        audioChunks = []; // Clear chunks after processing
+    }, 1500);
+  }
+}
+
+const sendAsText = () => {
+  // Currently, just acts like confirm/stop
+  if (isRecording.value) {
+    confirmVoiceInput(); 
+  } else {
+    // If not recording, maybe do nothing or just close?
+    closeVoiceModal();
+  }
+}
+
+const startRecording = (stream) => {
+  audioChunks = []; // Clear previous chunks
+  mediaRecorder = new MediaRecorder(stream);
+  
+  mediaRecorder.ondataavailable = (event) => {
+    if (event.data.size > 0) {
+        audioChunks.push(event.data);
+    }
+  };
+  
+  mediaRecorder.onstop = () => {
+    // Stop associated media stream tracks
+    mediaRecorder.stream.getTracks().forEach(track => track.stop());
+    // Note: Actual processing is now triggered in confirmVoiceInput after calling stopRecording
+  };
+
+  mediaRecorder.onerror = (event) => {
+      console.error('MediaRecorder error:', event.error);
+      ElMessage.error('录音出错');
+      isRecording.value = false; // Reset state on error
+      closeVoiceModal();
+  };
+  
+  mediaRecorder.start();
+}
+
+const stopRecording = () => {
+  if (mediaRecorder && mediaRecorder.state === 'recording') {
+    try {
+        mediaRecorder.stop();
+    } catch (error) {
+        console.error("Error stopping MediaRecorder:", error);
+        // Attempt to stop tracks directly as a fallback
+        if (mediaRecorder.stream) {
+            mediaRecorder.stream.getTracks().forEach(track => track.stop());
+        }
+    }
+  }
+   // Reset recorder instance
+  mediaRecorder = null; 
+}
+
+// --- Lifecycle hooks ---
+onMounted(() => {
+  if (!('MediaRecorder' in window) || !navigator.mediaDevices) {
+    console.warn('浏览器不支持语音录制功能');
+    // Optionally disable voice functionality entirely
+  }
+})
+
+onUnmounted(() => {
+  stopRecording(); // Ensure recording is stopped on component unmount
+})
+
+</script>
+
+<style lang="scss" scoped>
+.voice-input-container {
+    width: 100%;
+}
+.voice-trigger-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  min-height: 40px;
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+}
+
+// Styles for the Voice Input Modal
+.voice-input-modal-overlay {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0; 
+  background-color: rgba(0, 0, 0, 0.7); 
+  z-index: 3000;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end; 
+  align-items: center;
+  padding-bottom: 30px; 
+}
+
+.voice-bubble {
+  background-color: #4CAF50; 
+  color: white;
+  padding: 15px 25px;
+  border-radius: 15px;
+  margin-bottom: 40px; 
+  min-width: 150px;
+  text-align: center;
+  position: relative; 
+
+  .voice-wave-placeholder {
+    font-size: 14px;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 0;
+    height: 0;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid #4CAF50;
+  }
+}
+
+.voice-modal-controls {
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-start; 
+  width: 100%;
+  max-width: 350px; 
+  margin-bottom: 15px; 
+}
+
+.modal-control-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.modal-btn-label {
+  font-size: 12px;
+  color: #b0b0b0; 
+  margin-bottom: 8px; 
+  min-height: 18px; 
+}
+
+.record-label {
+    color: white; 
+}
+
+.modal-btn {
+  width: 60px; 
+  height: 60px;
+  font-size: 24px;
+}
+
+.confirm-btn .el-icon {
+    font-size: 28px; 
+}
+
+.cancel-btn,
+.text-send-btn {
+  background-color: rgba(255, 255, 255, 0.2);
+  border: none;
+  color: white;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.voice-modal-tip {
+  color: #a0a0a0;
+  font-size: 13px;
+  min-height: 20px; 
+}
+
+// Styles for Voice-to-Text Conversion Overlay
+.voice-to-text-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 2001; // Ensure it's above the voice modal if somehow both appear
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.voice-to-text-content {
+  background-color: white;
+  border-radius: 12px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.converting-indicator {
+  width: 40px;
+  height: 40px;
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid var(--el-color-primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+.converting-text {
+  font-size: 16px;
+  color: #333;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// Dark mode styles for VoiceInput elements
+html.dark .voice-bubble {
+    // Adjust bubble color for dark mode if needed
+}
+
+html.dark .modal-btn-label {
+    color: #707070;
+}
+
+html.dark .record-label {
+    color: #d0d0d0;
+}
+
+html.dark .cancel-btn,
+html.dark .text-send-btn {
+    background-color: rgba(0, 0, 0, 0.3);
+    color: #ccc;
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.4);
+    }
+}
+
+html.dark .voice-modal-tip {
+    color: #707070;
+}
+
+html.dark .voice-to-text-content {
+  background-color: #333;
+}
+
+html.dark .converting-text {
+  color: #eee;
+}
+</style> 
\ No newline at end of file