<template>
    <div class="pc-quickreply-button">
        <BaseIconButton :icon="icon" :title="t('快捷回复')" :disabled="!sessionId" @click="handleToggle" />

        <div v-if="visible" ref="popoverRef" class="pc-quickreply-popover" @click.stop>
            <div class="pc-quickreply-search">
                <img class="pc-quickreply-search-icon" :src="searchIcon" :alt="t('搜索')" />
                <input v-model="searchKeyword" class="pc-quickreply-search-input" type="text" :placeholder="t('搜索')"
                    autocomplete="off" />
            </div>

            <div v-if="loading" class="pc-quickreply-loading">{{ t('加载中') }}</div>

            <template v-else>
                <div v-if="searchEmpty" class="pc-quickreply-empty pc-quickreply-empty--search">
                    <div class="pc-quickreply-empty-text">{{ t('无搜索结果') }}</div>
                </div>

                <template v-else>
                    <div class="pc-quickreply-tabs">
                        <button v-for="(group, index) in displayGroupList" :key="group.groupId" type="button"
                            :class="['pc-quickreply-tab', { 'is-active': activeIndex === index }]"
                            @click="handleTabClick(index)">
                            <span class="pc-quickreply-tab-label" :title="group.groupName">{{ group.groupName }}</span>
                        </button>
                    </div>

                    <div class="pc-quickreply-content">
                        <div v-if="isPersonalTab" class="pc-quickreply-actionbar">
                            <button type="button" class="pc-quickreply-add-btn" @click="handleOpenAddDialog">
                                <span>{{ t('添加快捷回复') }}</span>
                            </button>
                        </div>

                        <div v-if="currentQuickReplyList.length" class="pc-quickreply-list">
                            <div v-for="item in currentQuickReplyList" :key="item.quickReplyId"
                                class="pc-quickreply-item">
                                <div class="pc-quickreply-item-title" :title="item.title">{{ item.title }}</div>

                                <div v-if="item.format === 'text' || !item.format" class="pc-quickreply-item-content"
                                    :title="item.content" @click="handleSelectText(item)">
                                    {{ item.content }}
                                </div>
                                <div v-else-if="item.format === 'image'" class="pc-quickreply-item-content"
                                    @click="handleSelectMedia(item, 'image')">
                                    <img class="pc-quickreply-item-thumb" :src="item.thumbImage || item.content"
                                        :alt="t('图片快捷回复')" />
                                </div>
                                <div v-else-if="item.format === 'video'" class="pc-quickreply-item-content"
                                    @click="handleSelectMedia(item, 'video')">
                                    <img class="pc-quickreply-item-thumb"
                                        :src="item.thumbImage || videoThumbnailFallback" :alt="t('视频快捷回复')" />
                                </div>
                                <div v-else class="pc-quickreply-item-content"></div>

                                <div v-if="isPersonalTab" class="pc-quickreply-item-actions">
                                    <button v-if="item.format === 'text' || !item.format" type="button"
                                        class="pc-quickreply-item-action" @click.stop="handleOpenEditDialog(item)">
                                        {{ t('编辑') }}
                                    </button>
                                    <button type="button"
                                        class="pc-quickreply-item-action pc-quickreply-item-action--danger"
                                        @click.stop="handleOpenDeleteDialog(item)">
                                        {{ t('删除') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div v-else class="pc-quickreply-empty">
                            <div class="pc-quickreply-empty-title">{{ t('暂无数据') }}</div>
                        </div>
                    </div>
                </template>
            </template>
        </div>

        <t-dialog class="pc-quickreply-form-dialog" v-model:visible="formDialogVisible" :close-on-overlay-click="false"
            :header="formDialogTitle" :footer="true" width="640px" @close="closeFormDialog">
            <template #body>
                <div class="pc-quickreply-form-body">
                    <div class="pc-quickreply-form-row pc-quickreply-form-row--inline">
                        <div class="pc-quickreply-form-label">{{ t('使用范围') }}</div>
                        <div class="pc-quickreply-form-scope">{{ t('个人') }}</div>
                    </div>

                    <div class="pc-quickreply-form-row">
                        <div class="pc-quickreply-form-label">
                            {{ t('标题') }}<span class="pc-quickreply-form-required">*</span>
                        </div>
                        <input v-model="formDraft.title" type="text" class="pc-quickreply-form-input"
                            :placeholder="t('请输入')" maxlength="50" />
                    </div>

                    <div class="pc-quickreply-form-row">
                        <div class="pc-quickreply-form-label">
                            {{ t('内容') }}<span class="pc-quickreply-form-required">*</span>
                        </div>
                        <textarea v-model="formDraft.content" class="pc-quickreply-form-textarea"
                            :placeholder="t('请输入')" />
                    </div>
                </div>
            </template>

            <template #footer>
                <div class="pc-quickreply-form-footer">
                    <button type="button" class="pc-quickreply-form-submit" :disabled="formSubmitting"
                        @click="handleSubmitForm">
                        {{ t('完成') }}
                    </button>
                </div>
            </template>
        </t-dialog>

        <t-dialog class="pc-quickreply-delete-dialog" v-model:visible="deleteDialogVisible"
            :close-on-overlay-click="true" :header="t('删除快捷回复')" :footer="true" width="480px"
            @close="closeDeleteDialog">
            <template #body>
                <div class="pc-quickreply-delete-body">{{ t('确认要删除该条快捷回复吗？') }}</div>
            </template>
            <template #footer>
                <div class="pc-quickreply-delete-footer">
                    <button type="button" class="pc-quickreply-form-btn pc-quickreply-form-btn--confirm"
                        :disabled="deleteSubmitting" @click="handleConfirmDelete">
                        {{ t('确定') }}
                    </button>
                    <button type="button" class="pc-quickreply-form-btn pc-quickreply-form-btn--cancel"
                        @click="closeDeleteDialog">
                        {{ t('取消') }}
                    </button>
                </div>
            </template>
        </t-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance from '@tencentcloud/ai-desk-core';
import BaseIconButton from './BaseIconButton.vue';
import quickReplyIcon from '../../../../Mobile/Chat/ChatInput/inputTools/quickReply/quickReplyIcon.svg';
import videoThumbnailFallback from '../QuickReply/videoThumbnail.png';
import searchIcon from '../../../../../assets/icons/sessionListSearch.svg';
import toast from '../../../../../utils/toast';

type QuickReplyItem = {
    quickReplyId: string;
    groupId?: string;
    title: string;
    content: string;
    format?: string;
    thumbImage?: string;
    replyOrder?: number;
};

type QuickReplyGroup = {
    groupId: string;
    groupName: string;
    quickReplyList: QuickReplyItem[] | null;
};

type QuickReplyFormat = 'text';

const props = defineProps<{ sessionId: string }>();
const emit = defineEmits<{
    (e: 'append-text', text: string): void;
    (e: 'insert-media', payload: { type: 'image' | 'video'; content: string; thumbImage: string }): void;
    (e: 'open'): void;
}>();

const { t } = useI18n();
const icon = quickReplyIcon;
const visible = ref(false);
const loading = ref(false);
const loaded = ref(false);
const searchKeyword = ref('');
const activeIndex = ref(0);
const popoverRef = ref<HTMLDivElement | null>(null);

const originGroupList = ref<QuickReplyGroup[]>([]);

// ====== 新增/编辑/删除相关 state ======
const formDialogVisible = ref(false);
const formMode = ref<'add' | 'edit'>('add');
const editingItem = ref<QuickReplyItem | null>(null);
const formSubmitting = ref(false);

const formDraft = reactive<{
    title: string;
    content: string;
    format: QuickReplyFormat;
}>({
    title: '',
    content: '',
    format: 'text',
});

const deleteDialogVisible = ref(false);
const deletingItem = ref<QuickReplyItem | null>(null);
const deleteSubmitting = ref(false);

const formDialogTitle = computed(() =>
    formMode.value === 'add' ? t('添加快捷回复') : t('编辑快捷回复'),
);

const handleToggle = async () => {
    visible.value = !visible.value;
    if (visible.value) {
        emit('open');
        searchKeyword.value = '';
        activeIndex.value = 0;
        await ensureLoaded();
        await nextTick();
        bindOutsideClick();
    } else {
        unbindOutsideClick();
    }
};

const close = () => {
    if (!visible.value) return;
    visible.value = false;
    unbindOutsideClick();
};

const ensureLoaded = async () => {
    if (loading.value || loaded.value) return;
    loading.value = true;
    try {
        const res = await AIDeskCoreInstance.chatService.getAllAvailableQuickReply();
        originGroupList.value = Array.isArray(res) ? (res as QuickReplyGroup[]) : [];
        loaded.value = true;
    } catch (error) {
        console.error(error);
        toast.error(t('获取快捷回复失败'));
    } finally {
        loading.value = false;
    }
};

// 强制刷新（增删改后调用）
const reloadQuickReply = async () => {
    loading.value = true;
    try {
        const res = await AIDeskCoreInstance.chatService.getAllAvailableQuickReply();
        originGroupList.value = Array.isArray(res) ? (res as QuickReplyGroup[]) : [];
        loaded.value = true;
    } catch (error) {
        console.error(error);
        toast.error(t('获取快捷回复失败'));
    } finally {
        loading.value = false;
    }
};

const rawKeyword = computed(() => searchKeyword.value.trim());
const normalizedKeyword = computed(() => rawKeyword.value.toLowerCase());

const filteredGroups = computed<QuickReplyGroup[]>(() => {
    const keyword = normalizedKeyword.value;
    if (!keyword) {
        return originGroupList.value;
    }
    const groups: QuickReplyGroup[] = [];
    originGroupList.value.forEach((group) => {
        const matchesGroupName = group.groupName?.toLowerCase().includes(keyword);
        const filteredList = (group.quickReplyList || []).filter((item) => {
            const matchesTitle = item.title?.toLowerCase().includes(keyword);
            const matchesContent = (item.format === 'text' || !item.format)
                ? item.content?.toLowerCase().includes(keyword)
                : false;
            return matchesTitle || matchesContent || matchesGroupName;
        });
        if (matchesGroupName || filteredList.length > 0) {
            groups.push({
                ...group,
                quickReplyList: filteredList,
            });
        }
    });
    return groups;
});

const searchEmpty = computed(() => {
    if (!normalizedKeyword.value) return false;
    const total = filteredGroups.value.reduce((sum, g) => sum + (g.quickReplyList?.length ?? 0), 0);
    return total === 0;
});

const displayGroupList = computed<QuickReplyGroup[]>(() => {
    if (!normalizedKeyword.value) {
        return filteredGroups.value;
    }
    const allItems: QuickReplyItem[] = filteredGroups.value.flatMap((g) => g.quickReplyList || []);
    const summary: QuickReplyGroup = {
        groupId: 'all-results',
        groupName: t('全部'),
        quickReplyList: allItems,
    };
    return [summary, ...filteredGroups.value];
});

const currentGroup = computed<QuickReplyGroup | undefined>(() => displayGroupList.value[activeIndex.value]);

const currentQuickReplyList = computed<QuickReplyItem[]>(() => {
    const list = currentGroup.value?.quickReplyList ?? [];
    return [...list].sort((a, b) => (a.replyOrder ?? 0) - (b.replyOrder ?? 0));
});

// 个人 tab：未搜索 && 处于第一个 tab
const isPersonalTab = computed(() => !normalizedKeyword.value && activeIndex.value === 0);

watch(searchKeyword, () => {
    activeIndex.value = 0;
});

const handleTabClick = (index: number) => {
    activeIndex.value = index;
};

const handleSelectText = (item: QuickReplyItem) => {
    if (!props.sessionId || !item.content) return;
    emit('append-text', item.content);
    close();
};

const handleSelectMedia = (item: QuickReplyItem, type: 'image' | 'video') => {
    if (!props.sessionId || !item.content) return;
    emit('insert-media', {
        type,
        content: item.content,
        thumbImage: item.thumbImage || '',
    });
    close();
};

// ====== 新增/编辑 ======
const resetFormDraft = () => {
    formDraft.title = '';
    formDraft.content = '';
    formDraft.format = 'text';
};

const handleOpenAddDialog = () => {
    formMode.value = 'add';
    editingItem.value = null;
    resetFormDraft();
    formDialogVisible.value = true;
};

const handleOpenEditDialog = (item: QuickReplyItem) => {
    formMode.value = 'edit';
    editingItem.value = item;
    formDraft.title = item.title || '';
    formDraft.content = item.content || '';
    formDraft.format = 'text';
    formDialogVisible.value = true;
};

const closeFormDialog = () => {
    if (formSubmitting.value) return;
    formDialogVisible.value = false;
};

const handleSubmitForm = async () => {
    if (formSubmitting.value) return;
    const title = formDraft.title.trim();
    const content = formDraft.content.trim();
    if (!title) {
        toast.error(t('请输入标题'));
        return;
    }
    if (!content) {
        toast.error(t('请输入内容'));
        return;
    }

    formSubmitting.value = true;
    try {
        if (formMode.value === 'add') {
            await AIDeskCoreInstance.userInfoService.addPersonalQuickReply({
                title,
                content,
                format: formDraft.format,
            });
            toast.success(t('添加成功'));
        } else if (editingItem.value) {
            await AIDeskCoreInstance.userInfoService.modifyPersonalQuickReply({
                quickReplyId: editingItem.value.quickReplyId,
                title,
                content,
                format: formDraft.format,
            });
            toast.success(t('编辑成功'));
        }
        formDialogVisible.value = false;
        activeIndex.value = 0;
        await reloadQuickReply();
    } catch (error) {
        console.error(error);
        toast.error(formMode.value === 'add' ? t('添加失败') : t('编辑失败'));
    } finally {
        formSubmitting.value = false;
    }
};

// ====== 删除 ======
const handleOpenDeleteDialog = (item: QuickReplyItem) => {
    deletingItem.value = item;
    deleteDialogVisible.value = true;
};

const closeDeleteDialog = () => {
    if (deleteSubmitting.value) return;
    deleteDialogVisible.value = false;
    deletingItem.value = null;
};

const handleConfirmDelete = async () => {
    if (!deletingItem.value || deleteSubmitting.value) return;
    deleteSubmitting.value = true;
    try {
        await AIDeskCoreInstance.userInfoService.deletePersonalQuickReply({
            quickReplyId: deletingItem.value.quickReplyId,
        });
        toast.success(t('删除成功'));
        deleteDialogVisible.value = false;
        deletingItem.value = null;
        activeIndex.value = 0;
        await reloadQuickReply();
    } catch (error) {
        console.error(error);
        toast.error(t('删除失败'));
    } finally {
        deleteSubmitting.value = false;
    }
};

// 点击外部关闭
const onDocumentClick = (event: MouseEvent) => {
    if (!popoverRef.value) return;
    const target = event.target as Node;
    if (popoverRef.value.contains(target)) return;
    // 点击到触发按钮时由 handleToggle 处理，不重复关闭
    const rootEl = (popoverRef.value.parentElement as HTMLElement | null);
    if (rootEl && rootEl.contains(target)) return;
    // 弹窗打开时不因为点击浮层外而关闭 popover
    if (formDialogVisible.value || deleteDialogVisible.value) return;
    // 点击到 TDesign Dialog（teleport 到 body）时，不关闭 popover
    if (target instanceof Element && target.closest('.t-dialog__ctx, .t-dialog, .t-portal-wrapper')) {
        return;
    }
    close();
};

const bindOutsideClick = () => {
    document.addEventListener('mousedown', onDocumentClick, true);
};

const unbindOutsideClick = () => {
    document.removeEventListener('mousedown', onDocumentClick, true);
};

onBeforeUnmount(() => {
    unbindOutsideClick();
});

defineExpose({ close });
</script>

<style scoped>
.pc-quickreply-button {
    position: relative;
    display: inline-flex;
}

.pc-quickreply-popover {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 12px);
    z-index: 10;
    width: 800px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: visible;
    transform: translateX(-50%);
    box-sizing: border-box;
}

.pc-quickreply-popover::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.04);
}

.pc-quickreply-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 10px 0;
    padding: 0 12px;
    height: 32px;
    border: 1px solid #E7ECF6;
    border-radius: 16px;
    background: #fff;
    transition: border-color 0.2s;
}

.pc-quickreply-search:focus-within {
    border-color: #1C66E5;
}

.pc-quickreply-search-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.6;
}

.pc-quickreply-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
    color: #1D2129;
}

.pc-quickreply-search-input::placeholder {
    color: #86909C;
}

.pc-quickreply-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 0 4px;
    border-bottom: 1px solid #F0F2F7;
    overflow-x: auto;
    scrollbar-width: none;
}

.pc-quickreply-tabs::-webkit-scrollbar {
    display: none;
}

.pc-quickreply-tab {
    position: relative;
    flex-shrink: 0;
    min-width: 60px;
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: #99A2B2;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    white-space: nowrap;
}

.pc-quickreply-tab.is-active {
    color: #1C66E5;
}

.pc-quickreply-tab.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: #1C66E5;
    border-radius: 999px;
}

.pc-quickreply-tab-label {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

.pc-quickreply-content {
    height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.pc-quickreply-content::-webkit-scrollbar {
    width: 4px;
}

.pc-quickreply-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.pc-quickreply-list {
    display: flex;
    flex-direction: column;
}

.pc-quickreply-item {
    display: flex;
    align-items: center;
}

.pc-quickreply-item-title {
    width: 140px;
    flex-shrink: 0;
    padding: 10px;
    border-right: 1px solid #F0F2F7;
    font-size: 14px;
    color: #1D2129;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.pc-quickreply-item-content {
    flex: 1;
    min-width: 0;
    margin: 5px 15px 5px 5px;
    padding: 0 10px;
    font-size: 14px;
    line-height: 31px;
    color: #1D2129;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    border-radius: 4px;
}

.pc-quickreply-item-content:hover {
    background: #F2F7FF;
}

.pc-quickreply-item-thumb {
    display: inline-block;
    max-width: 80px;
    max-height: 60px;
    vertical-align: middle;
    border-radius: 6px;
    object-fit: cover;
    background: #E7EAF0;
}

.pc-quickreply-item-actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
}

.pc-quickreply-item-action {
    border: none;
    background: transparent;
    color: #1C66E5;
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}

.pc-quickreply-item-action:hover {
    background: #F2F7FF;
}

.pc-quickreply-item-action--danger {
    color: #E34D59;
}

.pc-quickreply-item-action--danger:hover {
    background: #FDECEE;
}

.pc-quickreply-actionbar {
    display: flex;
    align-items: center;
    padding: 8px 12px 4px;
}

.pc-quickreply-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 14px;
    border: 1px solid #1C66E5;
    border-radius: 999px;
    background: #fff;
    color: #1C66E5;
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.pc-quickreply-add-btn:hover {
    background: #F2F7FF;
}

.pc-quickreply-add-icon {
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
}

/* ====== 表单弹窗内部样式 ====== */
.pc-quickreply-form-body {
    padding: 0 4px;
}

.pc-quickreply-form-row+.pc-quickreply-form-row {
    margin-top: 20px;
}

.pc-quickreply-form-row--inline {
    display: flex;
    align-items: center;
    gap: 24px;
}

.pc-quickreply-form-label {
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
    margin-bottom: 8px;
}

.pc-quickreply-form-row--inline .pc-quickreply-form-label {
    margin-bottom: 0;
    color: #86909C;
}

.pc-quickreply-form-required {
    color: #E34D59;
    margin-left: 2px;
}

.pc-quickreply-form-scope {
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
}

.pc-quickreply-form-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
    background: #F7F8FA;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.pc-quickreply-form-input:focus {
    border-color: #316EF5;
    background: #fff;
}

.pc-quickreply-form-input::placeholder {
    color: #B0B6BF;
}

.pc-quickreply-form-radio-group {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 12px;
}

.pc-quickreply-form-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
    user-select: none;
}

.pc-quickreply-form-radio-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.pc-quickreply-form-radio-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #C9CDD4;
    background: #fff;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s, background 0.15s;
}

.pc-quickreply-form-radio-input:checked+.pc-quickreply-form-radio-dot {
    border-color: #316EF5;
    background: #316EF5;
}

.pc-quickreply-form-radio-input:checked+.pc-quickreply-form-radio-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}

.pc-quickreply-form-textarea {
    width: 100%;
    min-height: 140px;
    padding: 10px 12px;
    border: 1px solid #DCDFE6;
    border-radius: 6px;
    background: #F7F8FA;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.pc-quickreply-form-textarea:focus {
    border-color: #316EF5;
    background: #fff;
}

.pc-quickreply-form-textarea::placeholder {
    color: #B0B6BF;
}

.pc-quickreply-form-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 4px;
}

.pc-quickreply-form-submit {
    min-width: 120px;
    height: 40px;
    padding: 0 32px;
    border-radius: 999px;
    background: #316EF5;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    border: 1px solid #316EF5;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}

.pc-quickreply-form-submit:hover {
    background: #2A5FDB;
    border-color: #2A5FDB;
}

.pc-quickreply-form-submit:disabled {
    background: #A3BAF3;
    border-color: #A3BAF3;
    cursor: not-allowed;
}

/* ====== 删除确认弹窗 ====== */
.pc-quickreply-delete-body {
    padding: 4px 0 8px;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
}

.pc-quickreply-delete-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 0 4px;
}

.pc-quickreply-form-btn {
    min-width: 120px;
    height: 40px;
    padding: 0 32px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pc-quickreply-form-btn--cancel {
    background: #fff;
    color: #1D2129;
    border-color: #D9D9D9;
}

.pc-quickreply-form-btn--cancel:hover {
    border-color: #316EF5;
    color: #316EF5;
}

.pc-quickreply-form-btn--confirm {
    background: #316EF5;
    color: #fff;
    border-color: #316EF5;
}

.pc-quickreply-form-btn--confirm:hover {
    background: #2A5FDB;
    border-color: #2A5FDB;
}

.pc-quickreply-form-btn--confirm:disabled {
    background: #A3BAF3;
    border-color: #A3BAF3;
    cursor: not-allowed;
}

.pc-quickreply-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.pc-quickreply-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #1D2129;
}

.pc-quickreply-empty-text {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.4);
    margin-top: 10px;
}

.pc-quickreply-loading {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #86909C;
    border-top: 1px solid #F0F2F7;
    margin-top: 10px;
}
</style>

<style>
/* 非 scoped：覆盖 TDesign Dialog teleport 出去的样式 */
.pc-quickreply-form-dialog .t-dialog__header,
.pc-quickreply-form-dialog .t-dialog__body,
.pc-quickreply-delete-dialog .t-dialog__header,
.pc-quickreply-delete-dialog .t-dialog__body {
    text-align: left !important;
}

.pc-quickreply-form-dialog .t-dialog__footer,
.pc-quickreply-delete-dialog .t-dialog__footer {
    text-align: center !important;
    padding: 0 0 16px !important;
}

.pc-quickreply-form-dialog .t-dialog__footer .t-button+.t-button,
.pc-quickreply-delete-dialog .t-dialog__footer .t-button+.t-button {
    margin-left: 0 !important;
}
</style>
