From a3dc9c24b098f5582bbf96a32cfb0094f5346d8e Mon Sep 17 00:00:00 2001
From: RainbowBird <git@luoling.moe>
Date: Sat, 6 Jun 2026 00:58:27 +0800
Subject: [PATCH] style(stage): refine mobile TTS stop button

Match the mobile manual TTS stop control to the subtler Web chat button treatment by removing the bright filled circle and using neutral icon styling with primary hover feedback.

Signed-off-by: RainbowBird <git@luoling.moe>

Commit-Message-Assisted-by: Codex
---
 .../src/components/Layouts/MobileInteractiveArea.vue  | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
index 3440524fc..09ced3276 100644
--- a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
+++ b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
@@ -258,15 +258,16 @@ onMounted(() => {
         <button
           v-if="showStopSpeakingButton"
           data-testid="stop-speaking-button"
-          w="[calc(1lh+4px+4px)]" h="[calc(1lh+4px+4px)]" aspect-square flex items-center self-end justify-center rounded-full outline-none backdrop-blur-md
-          text="neutral-500 hover:primary-600 dark:neutral-900 dark:hover:primary-700"
-          bg="primary-50/80 dark:neutral-100/80 hover:neutral-50"
-          transition="all duration-250 ease-in-out"
+          :class="[
+            'h-[calc(1lh+4px+4px)] w-[calc(1lh+4px+4px)] flex items-center justify-center self-end rounded-md outline-none',
+            'text-lg text-neutral-500 transition-all duration-200 active:scale-95 dark:text-neutral-400',
+            'hover:bg-primary-100/60 hover:text-primary-600 dark:hover:bg-primary-900/40 dark:hover:text-primary-300',
+          ]"
           title="Stop speaking"
           aria-label="Stop speaking"
           @click="stopSpeakingFromChat"
         >
-          <div i-solar:stop-circle-bold-duotone />
+          <div class="i-solar:stop-circle-bold-duotone h-5 w-5" />
         </button>
         <button
           v-if="messageInput.trim() || isComposing"