<script setup lang="ts">
import {onMounted, ref, computed} from "vue";
import { IconPlus, IconPlayArrow, IconCheck, IconPen, IconEdit, IconDelete } from "@arco-design/web-vue/es/icon";
import {StorageRecord, StorageService} from "../../../service/StorageService";
import SoundPromptEditDialog from "./SoundPromptEditDialog.vue";
import InputInlineEditor from "../../../components/common/InputInlineEditor.vue";
import AudioPlayer from "../../../components/common/AudioPlayer.vue";
import {Dialog} from "../../../lib/dialog";
import {t} from "../../../lang";
import {useModelStore} from "../../../module/Model/store/model";
import { getSystemConfigSync } from "../../../service/systemConfig";
import {GlobalEvent} from "../../../lib/event";

const visible = ref(false);
const modelStore = useModelStore();

const resolveAliyunTtsModelByVoiceId = (voiceId?: string) => {
    if (!voiceId || voiceId === 'Cherry') {
        return 'qwen3-tts-flash';
    }

    if (voiceId.startsWith('qwen-tts-vc-')) {
        return 'qwen3-tts-vc-2026-01-22';
    }

    if (voiceId.startsWith('cosyvoice-v3-flash-')) {
        return 'qwen3-tts-flash';
    }

    return 'qwen3-tts-flash';
};

const editDialog = ref<InstanceType<typeof SoundPromptEditDialog>>();
const records = ref<StorageRecord[]>([]);
const loading = ref(true);

// 🎯 系统默认音色列表（千问 TTS）
interface SystemVoice {
    id: string;
    title: string;
    desc: string;
    aliyunVoiceId: string;
    isSystem: boolean;
}

const systemVoices = ref<SystemVoice[]>([
    { id: 'sys_Cherry', title: '芊悦（普通话女声）', desc: '阳光积极、亲切自然小姐姐｜适合：普通话', aliyunVoiceId: 'Cherry', isSystem: true },
    { id: 'sys_Serena', title: '苏瑶（普通话女声）', desc: '温柔小姐姐｜适合：普通话', aliyunVoiceId: 'Serena', isSystem: true },
    { id: 'sys_Ethan', title: '晨煦（普通话男声）', desc: '阳光温暖、活力朝气｜适合：普通话', aliyunVoiceId: 'Ethan', isSystem: true },
    { id: 'sys_Chelsie', title: '千雪（二次元女声）', desc: '二次元虚拟女友｜适合：普通话', aliyunVoiceId: 'Chelsie', isSystem: true },
    { id: 'sys_Momo', title: '茉兔（活泼女声）', desc: '撒娇搞怪，逗你开心｜适合：普通话', aliyunVoiceId: 'Momo', isSystem: true },
    { id: 'sys_Vivian', title: '十三（个性女声）', desc: '拽拽的、可爱的小暴躁｜适合：普通话', aliyunVoiceId: 'Vivian', isSystem: true },
    { id: 'sys_Moon', title: '月白（率性男声）', desc: '率性帅气的月白｜适合：普通话', aliyunVoiceId: 'Moon', isSystem: true },
    { id: 'sys_Maia', title: '四月（知性女声）', desc: '知性与温柔的碰撞｜适合：普通话', aliyunVoiceId: 'Maia', isSystem: true },
    { id: 'sys_Kai', title: '凯（沉浸男声）', desc: '耳朵的一场SPA｜适合：普通话', aliyunVoiceId: 'Kai', isSystem: true },
    { id: 'sys_Nofish', title: '不吃鱼（特色男声）', desc: '不会翘舌音的设计师｜适合：普通话', aliyunVoiceId: 'Nofish', isSystem: true },
    { id: 'sys_Bella', title: '萌宝（萝莉女声）', desc: '喝酒不打醉拳的小萝莉｜适合：普通话', aliyunVoiceId: 'Bella', isSystem: true },
    { id: 'sys_Jennifer', title: '詹妮弗（美语女声）', desc: '品牌级、电影质感般美语女声｜适合：英语', aliyunVoiceId: 'Jennifer', isSystem: true },
    { id: 'sys_Ryan', title: '甜茶（张力男声）', desc: '节奏拉满，戏感炸裂｜适合：普通话', aliyunVoiceId: 'Ryan', isSystem: true },
    { id: 'sys_Katerina', title: '卡捷琳娜（御姐女声）', desc: '御姐音色，韵律回味十足｜适合：普通话', aliyunVoiceId: 'Katerina', isSystem: true },
    { id: 'sys_Aiden', title: '艾登（美语男声）', desc: '精通厨艺的美语大男孩｜适合：英语', aliyunVoiceId: 'Aiden', isSystem: true },
    { id: 'sys_Arthur', title: '徐大爷（故事男声）', desc: '被岁月浸泡过的质朴嗓音｜适合：普通话', aliyunVoiceId: 'Arthur', isSystem: true },
    { id: 'sys_Bellona', title: '燕铮莺（洪亮女声）', desc: '声音洪亮，热血沸腾｜适合：普通话', aliyunVoiceId: 'Bellona', isSystem: true },
    { id: 'sys_Bunny', title: '萌小姬（萌系女声）', desc: '萌属性爆棚的小萝莉｜适合：普通话', aliyunVoiceId: 'Bunny', isSystem: true },
    { id: 'sys_Mia', title: '乖小妹（温顺女声）', desc: '温顺如春水，乖巧如初雪｜适合：普通话', aliyunVoiceId: 'Mia', isSystem: true },
    { id: 'sys_Mochi', title: '沙小弥（早慧童声）', desc: '聪明伶俐的小大人｜适合：普通话', aliyunVoiceId: 'Mochi', isSystem: true },
    { id: 'sys_Neil', title: '阿闻（新闻男声）', desc: '字正腔圆的新闻主持人｜适合：普通话', aliyunVoiceId: 'Neil', isSystem: true },
    { id: 'sys_Nini', title: '邻家妹妹（甜美女声）', desc: '糯米糍一样又软又黏｜适合：普通话', aliyunVoiceId: 'Nini', isSystem: true },
    { id: 'sys_Ebona', title: '诡婆婆（惊悚女声）', desc: '低语般的惊悚氛围｜适合：普通话', aliyunVoiceId: 'Ebona', isSystem: true },
    { id: 'sys_Seren', title: '小婉（助眠女声）', desc: '温和舒缓，助你入眠｜适合：普通话', aliyunVoiceId: 'Seren', isSystem: true },
    { id: 'sys_Pip', title: '顽屁小孩（淘气童声）', desc: '调皮捣蛋却充满童真｜适合：普通话', aliyunVoiceId: 'Pip', isSystem: true },
    { id: 'sys_Stella', title: '少女阿月（元气女声）', desc: '甜系元气少女｜适合：普通话', aliyunVoiceId: 'Stella', isSystem: true },
    { id: 'sys_Vincent', title: '田叔（烟嗓男声）', desc: '独特沙哑烟嗓｜适合：普通话', aliyunVoiceId: 'Vincent', isSystem: true },
    { id: 'sys_Radio_Gol', title: '拉迪奥·戈尔（足球解说）', desc: '足球诗人解说风格｜适合：普通话', aliyunVoiceId: 'Radio Gol', isSystem: true },
    { id: 'sys_Jada', title: '上海-阿珍（上海话女声）', desc: '风风火火的沪上阿姐｜适合：上海话', aliyunVoiceId: 'Jada', isSystem: true },
    { id: 'sys_Dylan', title: '北京-晓东（北京话男声）', desc: '北京胡同里长大的少年｜适合：北京话', aliyunVoiceId: 'Dylan', isSystem: true },
    { id: 'sys_Li', title: '南京-老李（南京话男声）', desc: '耐心的瑜伽老师｜适合：南京话', aliyunVoiceId: 'Li', isSystem: true },
    { id: 'sys_Marcus', title: '陕西-秦川（陕西话男声）', desc: '老陕的味道｜适合：陕西话', aliyunVoiceId: 'Marcus', isSystem: true },
    { id: 'sys_Roy', title: '闽南-阿杰（闽南语男声）', desc: '诙谐直爽、市井活泼｜适合：闽南语', aliyunVoiceId: 'Roy', isSystem: true },
    { id: 'sys_Peter', title: '天津-李彼得（天津话男声）', desc: '天津相声，专业捧哏｜适合：天津话', aliyunVoiceId: 'Peter', isSystem: true },
    { id: 'sys_Sunny', title: '四川-晴儿（四川话女声）', desc: '甜到心里的川妹子｜适合：四川话', aliyunVoiceId: 'Sunny', isSystem: true },
    { id: 'sys_Eric', title: '四川-程川（四川话男声）', desc: '跳脱市井的成都男子｜适合：四川话', aliyunVoiceId: 'Eric', isSystem: true },
    { id: 'sys_Rocky', title: '粤语-阿强（粤语男声）', desc: '幽默风趣，在线陪聊｜适合：粤语', aliyunVoiceId: 'Rocky', isSystem: true },
    { id: 'sys_Kiki', title: '粤语-阿清（粤语女声）', desc: '甜美的港妹闺蜜｜适合：粤语', aliyunVoiceId: 'Kiki', isSystem: true },
    { id: 'sys_Bodega', title: '博德加（西语男声）', desc: '热情的西班牙大叔｜适合：西班牙语', aliyunVoiceId: 'Bodega', isSystem: true },
    { id: 'sys_Sonrisa', title: '索尼莎（西语女声）', desc: '热情开朗的拉美大姐｜适合：西班牙语', aliyunVoiceId: 'Sonrisa', isSystem: true },
    { id: 'sys_Alek', title: '阿列克（俄语男声）', desc: '战斗民族的冷与暖｜适合：俄语', aliyunVoiceId: 'Alek', isSystem: true },
    { id: 'sys_Dolce', title: '多尔切（意语男声）', desc: '慵懒的意大利大叔｜适合：意大利语', aliyunVoiceId: 'Dolce', isSystem: true },
    { id: 'sys_Sohee', title: '素熙（韩语女声）', desc: '温柔开朗，情绪丰富｜适合：韩语', aliyunVoiceId: 'Sohee', isSystem: true },
    { id: 'sys_Ono_Anna', title: '小野杏（日语女声）', desc: '鬼灵精怪的青梅竹马｜适合：日语', aliyunVoiceId: 'Ono Anna', isSystem: true },
    { id: 'sys_Lenn', title: '莱恩（德语男声）', desc: '理性底色，叛逆细节｜适合：德语', aliyunVoiceId: 'Lenn', isSystem: true },
    { id: 'sys_Emilien', title: '埃米尔安（法语男声）', desc: '浪漫的法国大哥哥｜适合：法语', aliyunVoiceId: 'Emilien', isSystem: true },
    { id: 'sys_Andre', title: '安德雷（磁性男声）', desc: '自然舒服、沉稳男声｜适合：普通话', aliyunVoiceId: 'Andre', isSystem: true },
]);

const mainTab = ref('system');
const systemSubTab = ref('putonghua');

const SYSTEM_SUB_TABS = [
    { key: 'putonghua', label: '普通话' },
    { key: 'waiwen', label: '外文' },
    { key: 'fangyan', label: '方言' },
];

const DIALECT_IDS = new Set(['sys_Jada', 'sys_Dylan', 'sys_Li', 'sys_Marcus', 'sys_Roy', 'sys_Peter', 'sys_Sunny', 'sys_Eric', 'sys_Rocky', 'sys_Kiki']);
const FOREIGN_IDS = new Set(['sys_Jennifer', 'sys_Aiden', 'sys_Bodega', 'sys_Sonrisa', 'sys_Alek', 'sys_Dolce', 'sys_Sohee', 'sys_Ono_Anna', 'sys_Lenn', 'sys_Emilien', 'sys_Katerina', 'sys_Andre', 'sys_Radio_Gol']);

const filteredSystemVoices = computed(() => {
    if (systemSubTab.value === 'putonghua') {
        return systemVoices.value.filter(v => !DIALECT_IDS.has(v.id) && !FOREIGN_IDS.has(v.id));
    } else if (systemSubTab.value === 'waiwen') {
        return systemVoices.value.filter(v => FOREIGN_IDS.has(v.id));
    } else {
        return systemVoices.value.filter(v => DIALECT_IDS.has(v.id));
    }
});

const playingVoiceId = ref<string | null>(null);
const generatingVoiceId = ref<string | null>(null);
const previewAudioUrl = ref<string>('');

// 🔊 试听音频缓存 - 避免重复生成
const voicePreviewCache = ref<Map<string, string>>(new Map());

// 🔧 处理音色ID显示 - 隐藏前缀
const formatVoiceId = (voiceId: string): string => {
    if (!voiceId) return '';
    // 移除 cosyvoice-v3-flash- 前缀
    return voiceId.replace(/^cosyvoice-v3-flash-/, '');
};

const doRefresh = async () => {
    loading.value = true;
    records.value = await StorageService.list("SoundPrompt");
    loading.value = false;
    emit("update");
    // 🔧 发布全局事件,通知所有音色选择器刷新
    GlobalEvent.emit('soundPromptUpdated');
};

const onChangeTitle = async (record: StorageRecord, value: string) => {
    await StorageService.update(record.id as any, {
        title: value,
    });
    await doRefresh();
};

const doDelete = async (record: StorageRecord) => {
    await Dialog.confirm(t("确认删除？"));
    await StorageService.delete(record);
    await doRefresh();
    // 🔧 删除后也需要发布事件(doRefresh已发布,这里可选)
};

const doEdit = (record: StorageRecord) => {
    editDialog.value?.edit(record);
};

const doSelect = (record: StorageRecord | SystemVoice) => {
    if ('isSystem' in record && record.isSystem) {
        // 系统音色：返回特殊ID格式
        emit("select", record.id as string);
    } else {
        // 用户自定义音色
        emit("select", (record as StorageRecord).id as number);
    }
    visible.value = false;
};

// 🔊 试听系统音色 - 优先使用预缓存，避免重复生成
const playSystemVoice = async (voice: SystemVoice) => {
    try {
        // 🎯 步骤1：检查内存缓存，如果已在内存中则直接使用
        const memoryCached = voicePreviewCache.value.get(voice.id);
        if (memoryCached) {
            previewAudioUrl.value = memoryCached;
            playingVoiceId.value = voice.id;
            console.log('[SoundPromptDialog] 使用内存缓存的试听音频:', voice.id);
            return;
        }

        // 🎯 步骤2：检查预缓存文件，如果存在则直接使用
        const preCacheResult = await window.$mapi.aliyun.cosyvoice.getPreCachedVoicePath(voice.id);
        if (preCacheResult.success && preCacheResult.path) {
            const audioUrl = 'file://' + preCacheResult.path;
            previewAudioUrl.value = audioUrl;
            voicePreviewCache.value.set(voice.id, audioUrl); // 同时保存到内存缓存
            playingVoiceId.value = voice.id;
            console.log('[SoundPromptDialog] 使用预缓存的试听音频:', voice.id, preCacheResult.path);
            return;
        }

        // 🎯 步骤3：预缓存不存在，需要生成
        generatingVoiceId.value = voice.id;
        Dialog.loadingOn(t("正在生成试听音频..."));

        // 获取阿里云API Key，如果用户没配置则使用内置的硬编码 Key
        let apiKey = "";
        await modelStore.refreshBuildIn();
        const dashscopeProvider = modelStore.providers.find(p => p.id === 'dashscope');
        // 🔧 使用硬编码兜底
        apiKey = dashscopeProvider?.data?.apiKey || getSystemConfigSync().aliyun_bailian_api_key;

        // 生成示例音频并保存到预缓存目录
        const result = await window.$mapi.aliyun.cosyvoice.synthesize({
            text: `你好，我是${voice.title.split('（')[0]}，很高兴为您服务。`,
            config: {
                apiKey: apiKey,
                model: resolveAliyunTtsModelByVoiceId(voice.aliyunVoiceId),
                voice: voice.aliyunVoiceId,
                format: 'wav',
                sampleRate: 24000,
                instruction: '请用自然、清晰、适合短视频配音的风格朗读。',
                saveToPreCache: voice.id
            }
        });

        Dialog.loadingOff();

        if (result.success && result.audioPath) {
            const audioUrl = 'file://' + result.audioPath;
            previewAudioUrl.value = audioUrl;
            // 💾 保存到内存缓存，下次直接使用
            voicePreviewCache.value.set(voice.id, audioUrl);
            playingVoiceId.value = voice.id;
            console.log('[SoundPromptDialog] 试听音频已生成并保存到本地缓存:', voice.id);
        } else {
            Dialog.tipError(t("试听失败") + ": " + (result.error || "未知错误"));
        }
    } catch (error: any) {
        Dialog.loadingOff();
        Dialog.tipError(t("试听失败") + ": " + error.message);
    } finally {
        generatingVoiceId.value = null; // 只重置loading状态
    }
};

const show = () => {
    visible.value = true;
};
defineExpose({
    show,
});

const emit = defineEmits({
    update: () => true,
    select: (id: number | string) => true,
});
onMounted(async () => {
    await doRefresh();
});
</script>

<template>
    <a-modal 
        v-model:visible="visible" 
        width="900px" 
        :footer="false" 
        title-align="start"
        :body-style="{ backgroundColor: '#1e1e2e', color: '#e2e8f0' }"
        :mask-style="{ backgroundColor: 'rgba(0, 0, 0, 0.6)' }"
        modal-class="sound-prompt-modal-dark"
    >
        <template #title>
            <div class="flex items-center">
                <div class="font-bold mr-2">
                    {{ $t("音色管理") }}
                </div>
            </div>
        </template>
        <div style="height: calc(100vh - 15rem)">
            <a-tabs v-model:active-key="mainTab" type="rounded" class="mb-3">
                <a-tab-pane key="system" :title="$t('系统音色')" />
                <a-tab-pane key="clone" :title="$t('克隆音色')" />
            </a-tabs>

            <!-- 系统音色 -->
            <div v-if="mainTab === 'system'">
                <div class="mb-3 flex gap-2">
                    <a-radio-group v-model="systemSubTab" type="button" size="small">
                        <a-radio v-for="tab in SYSTEM_SUB_TABS" :key="tab.key" :value="tab.key">{{ tab.label }}</a-radio>
                    </a-radio-group>
                </div>
                <div style="height: calc(100vh - 24rem); overflow-y: auto;">
                    <div v-for="v in filteredSystemVoices" :key="v.id">
                        <div class="rounded-xl border border-[#333] p-2 mb-2 bg-[#262638] hover:border-purple-500/50 transition-colors">
                            <div class="flex mb-3">
                                <div class="flex-grow w-0 mr-2">
                                    <div class="inline-flex max-w-full items-center bg-white/5 rounded-full px-2 leading-8 h-8">
                                        <div class="truncate overflow-hidden flex-grow text-gray-200">
                                            {{ v.title }}
                                        </div>
                                        <div class="ml-2 text-xs text-gray-400">{{ v.desc }}</div>
                                    </div>
                                </div>
                                <div class="flex gap-2">
                                    <a-button @click="playSystemVoice(v)" :loading="generatingVoiceId === v.id" size="small">
                                        <template #icon>
                                            <icon-play-arrow />
                                        </template>
                                        试听
                                    </a-button>
                                    <a-button @click="doSelect(v)" type="primary">
                                        <template #icon>
                                            <icon-check />
                                        </template>
                                        选择
                                    </a-button>
                                </div>
                            </div>
                            <div v-if="previewAudioUrl && playingVoiceId === v.id" class="mb-2">
                                <AudioPlayer show-wave :url="previewAudioUrl" />
                            </div>
                            <div class="text-sm text-gray-400">
                                音色ID: {{ v.aliyunVoiceId }}
                            </div>
                        </div>
                    </div>
                    <m-empty v-if="filteredSystemVoices.length === 0" />
                </div>
            </div>

            <!-- 克隆音色 -->
            <div v-if="mainTab === 'clone'">
                <div class="flex justify-end mb-3">
                    <a-button @click="editDialog?.add()">
                        <template #icon>
                            <icon-plus />
                        </template>
                        {{ $t("添加克隆音色") }}
                    </a-button>
                </div>
                <div style="height: calc(100vh - 22rem); overflow-y: auto;">
                    <m-empty v-if="!records.length && !loading" />
                    <m-loading v-else-if="!records.length && loading" page />
                    <div v-for="r in records" :key="r.id">
                        <div class="rounded-xl border border-[#333] p-2 mb-2 bg-[#262638] hover:border-purple-500/50 transition-colors">
                            <div class="flex mb-3">
                                <div class="flex-grow w-0 mr-2">
                                    <div class="inline-flex max-w-full items-center bg-white/5 rounded-full px-2 leading-8 h-8">
                                        <div class="truncate overflow-hidden flex-grow cursor-pointer text-gray-200">
                                            {{ r.title }}
                                        </div>
                                        <InputInlineEditor :value="r.title" @change="onChangeTitle(r, $event)">
                                            <a class="ml-1 text-gray-400" href="javascript:;">
                                                <icon-pen />
                                            </a>
                                        </InputInlineEditor>
                                    </div>
                                </div>
                                <div>
                                    <a-button @click="doSelect(r)" class="mr-2">
                                        <template #icon>
                                            <icon-check />
                                        </template>
                                    </a-button>
                                    <a-button @click="doEdit(r)" class="mr-2">
                                        <template #icon>
                                            <icon-edit />
                                        </template>
                                    </a-button>
                                    <a-button @click="doDelete(r)" class="mr-2">
                                        <template #icon>
                                            <icon-delete />
                                        </template>
                                    </a-button>
                                </div>
                            </div>
                            <div class="mb-3">
                                <AudioPlayer show-wave :url="'file://' + r.content.url" />
                            </div>
                            <div class="text-sm text-gray-400 mb-1">
                                {{ r.content.promptText }}
                            </div>
                            <div class="text-xs text-blue-400" v-if="r.content.aliyunVoiceId">
                                音色ID: {{ formatVoiceId(r.content.aliyunVoiceId) }}
                            </div>
                            <div class="text-xs text-red-500 flex items-center" v-else>
                                <span>未配置音色ID (将使用默认音色)</span>
                                <a-link @click="doEdit(r)" size="mini" status="warning" class="ml-2">
                                    {{ $t("[去配置]") }}
                                </a-link>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </a-modal>
    <SoundPromptEditDialog ref="editDialog" @update="doRefresh" />
</template>

<style>
.sound-prompt-modal-dark .arco-modal-header {
    background-color: #1e1e2e !important;
    border-bottom: 1px solid #333 !important;
}
.sound-prompt-modal-dark .arco-modal-title {
    color: #fff !important;
}
.sound-prompt-modal-dark .arco-modal-close-btn {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 16px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}
.sound-prompt-modal-dark .arco-modal-close-btn:hover {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
}
.sound-prompt-modal-dark .arco-modal-close-btn .arco-icon-hover {
    color: inherit !important;
}
.sound-prompt-modal-dark .arco-modal-close-btn svg {
    color: currentColor !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    width: 16px !important;
    height: 16px !important;
}

.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab {
    color: rgba(255, 255, 255, 0.55) !important;
    background-color: #1e1e30 !important;
    border-radius: 32px !important;
    font-size: 13px !important;
    padding: 5px 16px !important;
    margin: 0 4px !important;
    transition: all 0.2s ease !important;
}
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: #2a2a42 !important;
}
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab-active,
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab-active:hover {
    color: #fff !important;
    background-color: #7c3aed !important;
}
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab-active .arco-tabs-tab-title,
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab-active:hover .arco-tabs-tab-title {
    color: #fff !important;
}
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab .arco-tabs-tab-title {
    color: rgba(255, 255, 255, 0.55) !important;
}
.sound-prompt-modal-dark .arco-tabs-nav-type-rounded .arco-tabs-tab:hover .arco-tabs-tab-title {
    color: rgba(255, 255, 255, 0.75) !important;
}
.sound-prompt-modal-dark .arco-tabs-content {
    padding-top: 0 !important;
}
.sound-prompt-modal-dark .arco-tabs-nav {
    border-bottom: none !important;
}

.sound-prompt-modal-dark .arco-radio-group-button .arco-radio-button {
    color: rgba(255, 255, 255, 0.55) !important;
    background-color: #1e1e30 !important;
    border-color: transparent !important;
    font-size: 12px !important;
}
.sound-prompt-modal-dark .arco-radio-group-button .arco-radio-button:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background-color: #2a2a42 !important;
}
.sound-prompt-modal-dark .arco-radio-group-button .arco-radio-button.arco-radio-checked {
    color: #fff !important;
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
}
</style>
