diff --git a/src/renderer/src/components/ChatPanel.vue b/src/renderer/src/components/ChatPanel.vue
index 30676b9..0261da1 100644
--- a/src/renderer/src/components/ChatPanel.vue
+++ b/src/renderer/src/components/ChatPanel.vue
@@ -960,8 +960,19 @@ onUnmounted(() => {
   font-weight: 700;
   font-family: inherit;
   transition: all .15s;
+  /* 这三个按钮之前没有 :active 态，点下去没有任何即时反馈。加上即时反馈的同时顺手
+     关掉原生 outline（这是纯触屏界面，不依赖 Tab 键盘导航，不需要保留原生焦点框）。*/
+  outline: none;
 }
-.voice-btn:not(:disabled):hover { background: var(--panel-3); }
+/* 真正的"绿框"根因不在 outline/focus，而是 CSS 优先级：.voice-btn:not(:disabled):hover
+   （3 个选择器）比 .voice-btn.on（2 个选择器）优先级更高。触屏点击后没有鼠标可以"移开"，
+   :hover 状态会一直粘在刚点过的按钮上不消失（触屏设备的通病），于是 hover 规则的浅灰
+   background 把 .on 本该铺满的纯绿色背景盖掉了，只剩下没被 hover 碰到的绿色边框还在——
+   看起来就像按钮周围凭空多出一个绿框。真机用 CDP 直接读取点击后的计算样式实锤：
+   className 带 "on"，但 background 实际渲染出的是 --panel-3 的浅灰色，不是 --green。
+   加 :not(.on) 让 hover 规则在"已开启"状态下让位，背景就能正常显示成绿色。 */
+.voice-btn:not(:disabled):not(.on):hover { background: var(--panel-3); }
+.voice-btn:not(:disabled):active { filter: brightness(.92); }
 .voice-btn.on {
   background: var(--green);
   border-color: var(--green);