<template>
    <div class="quick-reply-tool">
        <button class="input-tool-item" type="button" :disabled="loading || !props.sessionId" @click="handleOpenPopup">
            <img :src="quickReplyIcon" class="input-tool-icon" :alt="t('快捷回复')" />
            <span class="input-tool-label">{{ t('快捷回复') }}</span>
        </button>

        <t-popup v-model="popupVisible" placement="bottom">
            <div class="quick-reply-popup-panel">
                <div class="quick-reply-popup-header">
                    <div class="quick-reply-popup-title">{{ t('快捷回复') }}</div>
                    <button class="quick-reply-popup-close" type="button" :aria-label="t('关闭快捷回复')"
                        @click="handleClosePopup">
                        <svg class="quick-reply-popup-close-icon" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M6 6L14 14M14 6L6 14" stroke="#A9ADB6" stroke-width="1.8" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>

                <div class="quick-reply-popup-body">
                    <div v-if="quickReplyGroupList.length" class="quick-reply-tabs" role="tablist"
                        :aria-label="t('快捷回复分组')">
                        <button v-for="group in quickReplyGroupList" :key="group.groupId" class="quick-reply-tab"
                            type="button" :class="{ 'is-active': activeGroupId === group.groupId }"
                            :aria-selected="activeGroupId === group.groupId" @click="setActiveGroup(group.groupId)">
                            {{ group.groupName }}
                        </button>
                    </div>

                    <div class="search-row" :class="{ 'has-create': isPersonalTab }">
                        <div class="search-box">
                            <svg class="search-icon" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
                                aria-hidden="true">
                                <path
                                    d="M8.75 3.75a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0-1.5a6.5 6.5 0 1 1 0 13 6.5 6.5 0 0 1 0-13Zm5.209 11.148 3.02 3.02a.75.75 0 1 1-1.06 1.061l-3.02-3.02a.75.75 0 0 1 1.06-1.06Z"
                                    fill="#86909C" />
                            </svg>
                            <input v-model="searchKeyword" class="search-input" type="text"
                                :placeholder="isPersonalTab ? t('搜索') : t('搜索标题或内容')" autocomplete="off" />
                        </div>
                        <button v-if="isPersonalTab" class="create-btn" type="button" @click="handleOpenCreatePopup">
                            {{ t('创建') }}
                        </button>
                    </div>

                    <div v-if="loading" class="quick-reply-empty-state">{{ t('加载中...') }}</div>
                    <div v-else-if="filteredQuickReplyList.length" class="quick-reply-list">
                        <div v-for="item in filteredQuickReplyList" :key="item.quickReplyId" class="quick-reply-swipe">
                            <div v-if="isPersonalTab" class="swipe-actions">
                                <button v-if="canEditItem(item)" class="action-btn action-edit" type="button"
                                    @click.stop="handleOpenEditPopup(item)">
                                    {{ t('编辑') }}
                                </button>
                                <button class="action-btn action-delete" type="button"
                                    @click.stop="handleDeleteQuickReply(item)">
                                    {{ t('删除') }}
                                </button>
                            </div>
                            <div class="quick-reply-item"
                                :class="{ 'is-clickable': item.format === 'text' || !item.format, 'is-dragging': draggingId === item.quickReplyId }"
                                :style="getItemStyle(item)" @click="handleItemClick(item)"
                                @touchstart="handleTouchStart($event, item)" @touchmove="handleTouchMove($event, item)"
                                @touchend="handleTouchEnd(item)" @touchcancel="handleTouchEnd(item)">
                                <div class="quick-reply-item-title" v-html="getHighlightedText(item.title)"></div>
                                <div class="quick-reply-item-content">
                                    <template v-if="item.format === 'text' || !item.format">
                                        <div class="quick-reply-item-text" v-html="getHighlightedText(item.content)">
                                        </div>
                                    </template>
                                    <template v-else-if="item.format === 'image'">
                                        <img v-if="item.thumbImage || item.content" class="quick-reply-item-thumb"
                                            :src="item.thumbImage || item.content" :alt="t('图片快捷回复')" />
                                        <div v-else class="quick-reply-item-media-placeholder">
                                            {{ t('暂无图片预览') }}
                                        </div>
                                    </template>
                                    <template v-else-if="item.format === 'video'">
                                        <img class="quick-reply-item-thumb"
                                            :src="item.thumbImage || videoThumbnailFallback" :alt="t('视频快捷回复')" />
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else class="quick-reply-empty-state">{{ t('暂无任何快捷信息') }}</div>
                </div>
            </div>
        </t-popup>

        <t-popup v-model="createPopupVisible" placement="bottom">
            <div class="quick-reply-popup-panel create-popup-panel">
                <div class="quick-reply-popup-header">
                    <div class="quick-reply-popup-title">{{ formDialogTitle }}</div>
                    <button class="quick-reply-popup-close" type="button" :aria-label="t('关闭')"
                        :disabled="createSubmitting" @click="handleCloseCreatePopup">
                        <svg class="quick-reply-popup-close-icon" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                            <path d="M6 6L14 14M14 6L6 14" stroke="#A9ADB6" stroke-width="1.8" stroke-linecap="round"
                                stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>

                <div class="create-popup-body">
                    <div class="create-form-row create-form-row--inline">
                        <div class="create-form-label">{{ t('使用范围') }}</div>
                        <div class="create-form-scope">{{ t('个人') }}</div>
                    </div>

                    <div class="create-form-row">
                        <div class="create-form-label">
                            {{ t('标题') }}<span class="create-form-required">*</span>
                        </div>
                        <div class="create-form-field">
                            <textarea v-model="createForm.title" class="create-form-textarea" :placeholder="t('请输入')"
                                maxlength="300" rows="3" />
                            <div class="create-form-counter">{{ createForm.title.length }} / 300</div>
                        </div>
                    </div>

                    <div class="create-form-row">
                        <div class="create-form-label">
                            {{ t('内容') }}<span class="create-form-required">*</span>
                        </div>
                        <div class="create-format-tabs">
                            <button type="button" class="create-format-tab is-active">{{ t('文本') }}</button>
                        </div>
                        <div class="create-form-field">
                            <textarea v-model="createForm.content" class="create-form-textarea" :placeholder="t('请输入')"
                                maxlength="300" rows="4" />
                            <div class="create-form-counter">{{ createForm.content.length }} / 300</div>
                        </div>
                    </div>
                </div>

                <div class="create-popup-footer">
                    <button type="button" class="create-footer-btn create-footer-btn--cancel"
                        :disabled="createSubmitting" @click="handleCloseCreatePopup">
                        {{ t('取消') }}
                    </button>
                    <button type="button" class="create-footer-btn create-footer-btn--confirm"
                        :disabled="createSubmitting" @click="handleSubmitForm">
                        {{ t('确定') }}
                    </button>
                </div>
            </div>
        </t-popup>
    </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import AIDeskCoreInstance, { CUSTOM_MESSAGE_SRC } from '@tencentcloud/ai-desk-core';
import toast from '../../../../../../utils/toast';
import quickReplyIcon from './quickReplyIcon.svg';
import videoThumbnailFallback from './videoThumbnail.png';

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

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

const ACTION_WIDTH = 80;

const props = defineProps<{
    sessionId: string;
}>();

const emit = defineEmits<{
    (event: 'append-text', text: string): void;
    (event: 'sent'): void;
}>();

const { t } = useI18n();
const popupVisible = ref(false);
const loading = ref(false);
const loaded = ref(false);
const activeGroupId = ref('');
const searchKeyword = ref('');
const quickReplyGroupList = ref<QuickReplyGroup[]>([]);
const createPopupVisible = ref(false);
const createSubmitting = ref(false);
const formMode = ref<'add' | 'edit'>('add');
const editingItem = ref<QuickReplyItem | null>(null);
const createForm = ref({
    title: '',
    content: '',
});
const deleteSubmitting = ref(false);

const openedSwipeId = ref<string | null>(null);
const draggingId = ref<string | null>(null);
const translateX = ref(0);
const startX = ref(0);
const startY = ref(0);
const startTranslateX = ref(0);
const isHorizontalSwipe = ref(false);
const suppressClick = ref(false);

const rawKeyword = computed(() => searchKeyword.value.trim());
const normalizedKeyword = computed(() => rawKeyword.value.toLowerCase());
const formDialogTitle = computed(() =>
    formMode.value === 'add' ? t('创建快捷回复') : t('编辑快捷回复'),
);

const activeGroup = computed(() => {
    if (!quickReplyGroupList.value.length) {
        return undefined;
    }

    return quickReplyGroupList.value.find((group) => group.groupId === activeGroupId.value) ?? quickReplyGroupList.value[0];
});

// 与 PC 一致：未搜索时第一个分组视为「个人」
const isPersonalTab = computed(() => {
    if (normalizedKeyword.value || !quickReplyGroupList.value.length) {
        return false;
    }
    return activeGroup.value?.groupId === quickReplyGroupList.value[0]?.groupId;
});

const currentGroupQuickReplyList = computed(() => {
    const list = activeGroup.value?.quickReplyList ?? [];
    return [...list].sort((prev, next) => (prev.replyOrder ?? 0) - (next.replyOrder ?? 0));
});

const filteredQuickReplyList = computed(() => {
    if (!normalizedKeyword.value) {
        return currentGroupQuickReplyList.value;
    }

    return currentGroupQuickReplyList.value.filter((item) => {
        const title = item.title?.toLowerCase() ?? '';
        const content = item.content?.toLowerCase() ?? '';
        return title.includes(normalizedKeyword.value) || content.includes(normalizedKeyword.value);
    });
});

const canEditItem = (item: QuickReplyItem) => item.format === 'text' || !item.format;

const getMaxSwipeDistance = (item: QuickReplyItem) => {
    return ACTION_WIDTH * (canEditItem(item) ? 2 : 1);
};

const getItemStyle = (item: QuickReplyItem) => {
    if (!isPersonalTab.value) {
        return undefined;
    }

    const offset = openedSwipeId.value === item.quickReplyId || draggingId.value === item.quickReplyId
        ? translateX.value
        : 0;

    return {
        transform: `translate3d(${offset}px, 0, 0)`,
        transition: draggingId.value === item.quickReplyId ? 'none' : 'transform 0.2s ease',
    };
};

const closeSwipe = () => {
    draggingId.value = null;
    isHorizontalSwipe.value = false;
    translateX.value = 0;
    openedSwipeId.value = null;
};

const openSwipe = (item: QuickReplyItem) => {
    draggingId.value = null;
    isHorizontalSwipe.value = false;
    openedSwipeId.value = item.quickReplyId;
    translateX.value = -getMaxSwipeDistance(item);
};

watch([isPersonalTab, activeGroupId, searchKeyword], () => {
    closeSwipe();
});

const escapeHtml = (value: string) => {
    return value
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
};

const escapeRegExp = (value: string) => {
    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
};

const getHighlightedText = (value: string) => {
    const safeValue = escapeHtml(value ?? '');

    if (!rawKeyword.value) {
        return safeValue;
    }

    const pattern = new RegExp(`(${escapeRegExp(rawKeyword.value)})`, 'ig');
    return safeValue.replace(pattern, '<span class="keyword-highlight">$1</span>');
};

const ensureQuickReplyLoaded = async () => {
    if (loading.value || loaded.value) {
        return;
    }

    loading.value = true;
    try {
        const quickReplies = await AIDeskCoreInstance.chatService.getAllAvailableQuickReply();
        quickReplyGroupList.value = Array.isArray(quickReplies) ? quickReplies : [];
        activeGroupId.value = quickReplyGroupList.value[0]?.groupId ?? '';
        loaded.value = true;
    } catch (error) {
        console.error(error);
        toast.error(t('获取快捷回复失败'));
    } finally {
        loading.value = false;
    }
};

const reloadQuickReply = async () => {
    loading.value = true;
    try {
        const quickReplies = await AIDeskCoreInstance.chatService.getAllAvailableQuickReply();
        quickReplyGroupList.value = Array.isArray(quickReplies) ? quickReplies : [];
        if (!quickReplyGroupList.value.some((group) => group.groupId === activeGroupId.value)) {
            activeGroupId.value = quickReplyGroupList.value[0]?.groupId ?? '';
        }
        loaded.value = true;
    } catch (error) {
        console.error(error);
        toast.error(t('获取快捷回复失败'));
    } finally {
        loading.value = false;
    }
};

const handleOpenPopup = async () => {
    if (!props.sessionId || loading.value) {
        return;
    }

    popupVisible.value = true;
    searchKeyword.value = '';
    closeSwipe();
    await ensureQuickReplyLoaded();
};

const handleClosePopup = () => {
    popupVisible.value = false;
    searchKeyword.value = '';
    closeSwipe();
};

defineExpose({
    open: handleOpenPopup,
});

const resetCreateForm = () => {
    createForm.value = {
        title: '',
        content: '',
    };
    editingItem.value = null;
    formMode.value = 'add';
};

const handleOpenCreatePopup = () => {
    closeSwipe();
    formMode.value = 'add';
    editingItem.value = null;
    createForm.value = {
        title: '',
        content: '',
    };
    createPopupVisible.value = true;
};

const handleOpenEditPopup = (item: QuickReplyItem) => {
    if (!canEditItem(item)) {
        return;
    }

    closeSwipe();
    formMode.value = 'edit';
    editingItem.value = item;
    createForm.value = {
        title: item.title || '',
        content: item.content || '',
    };
    createPopupVisible.value = true;
};

const handleCloseCreatePopup = () => {
    if (createSubmitting.value) {
        return;
    }
    createPopupVisible.value = false;
    resetCreateForm();
};

const handleSubmitForm = async () => {
    if (createSubmitting.value) {
        return;
    }

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

    createSubmitting.value = true;
    try {
        if (formMode.value === 'add') {
            await AIDeskCoreInstance.userInfoService.addPersonalQuickReply({
                title,
                content,
                format: 'text',
            });
            toast.success(t('添加成功'));
        } else if (editingItem.value) {
            await AIDeskCoreInstance.userInfoService.modifyPersonalQuickReply({
                quickReplyId: editingItem.value.quickReplyId,
                title,
                content,
                format: 'text',
            });
            toast.success(t('编辑成功'));
        }
        createPopupVisible.value = false;
        resetCreateForm();
        if (quickReplyGroupList.value[0]?.groupId) {
            activeGroupId.value = quickReplyGroupList.value[0].groupId;
        }
        await reloadQuickReply();
    } catch (error) {
        console.error(error);
        toast.error(formMode.value === 'add' ? t('添加失败') : t('编辑失败'));
    } finally {
        createSubmitting.value = false;
    }
};

const handleDeleteQuickReply = async (item: QuickReplyItem) => {
    if (deleteSubmitting.value) {
        return;
    }

    closeSwipe();
    deleteSubmitting.value = true;
    try {
        await AIDeskCoreInstance.userInfoService.deletePersonalQuickReply({
            quickReplyId: item.quickReplyId,
        });
        toast.success(t('删除成功'));
        await reloadQuickReply();
    } catch (error) {
        console.error(error);
        toast.error(t('删除失败'));
    } finally {
        deleteSubmitting.value = false;
    }
};

const handleTouchStart = (event: TouchEvent, item: QuickReplyItem) => {
    if (!isPersonalTab.value) {
        return;
    }

    const touch = event.touches[0];
    if (!touch) {
        return;
    }

    if (openedSwipeId.value && openedSwipeId.value !== item.quickReplyId) {
        closeSwipe();
    }

    startX.value = touch.clientX;
    startY.value = touch.clientY;
    startTranslateX.value = openedSwipeId.value === item.quickReplyId ? translateX.value : 0;
    draggingId.value = item.quickReplyId;
    isHorizontalSwipe.value = false;
    suppressClick.value = false;
};

const handleTouchMove = (event: TouchEvent, item: QuickReplyItem) => {
    const touch = event.touches[0];
    if (!touch || draggingId.value !== item.quickReplyId || !isPersonalTab.value) {
        return;
    }

    const deltaX = touch.clientX - startX.value;
    const deltaY = touch.clientY - startY.value;

    if (!isHorizontalSwipe.value) {
        if (Math.abs(deltaX) < 8) {
            return;
        }

        if (Math.abs(deltaX) <= Math.abs(deltaY)) {
            draggingId.value = null;
            return;
        }

        isHorizontalSwipe.value = true;
    }

    event.preventDefault();
    suppressClick.value = true;
    const maxDistance = getMaxSwipeDistance(item);
    translateX.value = Math.min(0, Math.max(-maxDistance, startTranslateX.value + deltaX));
};

const handleTouchEnd = (item: QuickReplyItem) => {
    if (draggingId.value !== item.quickReplyId && !isHorizontalSwipe.value) {
        return;
    }

    if (!isPersonalTab.value) {
        closeSwipe();
        return;
    }

    const maxDistance = getMaxSwipeDistance(item);
    const shouldOpen = Math.abs(translateX.value) > Math.min(ACTION_WIDTH, maxDistance / 2);

    if (shouldOpen) {
        openSwipe(item);
        return;
    }

    closeSwipe();
};

const buildRichTextContent = (item: QuickReplyItem) => {
    if (!item.content) {
        return '';
    }

    if (item.format === 'image') {
        return `![](${item.content})`;
    }

    if (item.format === 'video') {
        return `<video src="${item.content}" controls></video>`;
    }

    return '';
};

const handleItemClick = (item: QuickReplyItem) => {
    if (suppressClick.value) {
        suppressClick.value = false;
        return;
    }

    if (openedSwipeId.value === item.quickReplyId) {
        closeSwipe();
        return;
    }

    if (openedSwipeId.value) {
        closeSwipe();
    }

    void handleSelectQuickReply(item);
};

const handleSelectQuickReply = async (item: QuickReplyItem) => {
    if (item.format !== 'text' && item.format) {
        const richTextContent = buildRichTextContent(item);

        if (!richTextContent || !props.sessionId) {
            return;
        }

        try {
            await AIDeskCoreInstance.chatService.sendCustomMessage({
                payload: {
                    data: JSON.stringify({
                        src: CUSTOM_MESSAGE_SRC.RICH_TEXT,
                        content: richTextContent,
                        customerServicePlugin: 0,
                    }),
                },
            });
            emit('sent');
            handleClosePopup();
        } catch (error) {
            console.error(error);
            toast.error(t('发送快捷回复失败'));
        }
        return;
    }

    if (!item.content) {
        return;
    }

    emit('append-text', item.content);
    handleClosePopup();
};

const setActiveGroup = (groupId: string) => {
    activeGroupId.value = groupId;
};
</script>

<style scoped>
.quick-reply-tool {
    flex: 0 0 70px;
}

.input-tool-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    padding: 0;
    border: 1px solid #E6E9F0;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}

.input-tool-item:disabled {
    opacity: 0.4;
}

.input-tool-icon {
    display: block;
    width: 28px;
    height: 28px;
}

.input-tool-label {
    margin-top: 10px;
    color: #222;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    white-space: nowrap;
}

.quick-reply-popup-panel {
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
    max-height: min(78vh, 640px);
    display: flex;
    flex-direction: column;
}

.quick-reply-popup-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    flex-shrink: 0;
}

.quick-reply-popup-title {
    font-size: 17px;
    line-height: 24px;
    color: #1D2129;
}

.quick-reply-popup-close {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.quick-reply-popup-close-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.quick-reply-popup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 20px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

.quick-reply-tabs {
    position: relative;
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 6px;
}

.quick-reply-tabs::-webkit-scrollbar {
    display: none;
}

.quick-reply-tab {
    position: relative;
    flex-shrink: 0;
    min-width: auto;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #1D2129;
    font-size: 16px;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.quick-reply-tab::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 52px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%);
}

.quick-reply-tab+.quick-reply-tab {
    margin-left: 32px;
}

.quick-reply-tab.is-active::after {
    background: #000000;
}

.search-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
}

.search-row.has-create .search-box {
    flex: 1;
    min-width: 0;
}

.search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 36px;
    border-radius: 18px;
    background: #F2F3F5;
    width: 100%;
    box-sizing: border-box;
}

.search-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

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

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

.create-btn {
    flex-shrink: 0;
    height: 36px;
    padding: 0 16px;
    border: 0.5px solid #E6E9F0;
    border-radius: 18px;
    background: transparent;
    color: #1D2129;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    box-sizing: border-box;
}

.create-popup-panel {
    max-height: min(86vh, 720px);
}

.create-popup-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin-top: 20px;
    -webkit-overflow-scrolling: touch;
}

.create-form-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.create-form-row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.create-form-label {
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
}

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

.create-form-scope {
    font-size: 14px;
    line-height: 22px;
    color: #4E5969;
}

.create-format-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.create-format-tab {
    width: 100px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 14px;
    background: #F2F3F5;
    color: #4E5969;
    font-size: 13px;
    line-height: 20px;
}

.create-format-tab.is-active {
    background: #E8F8EF;
    color: #00A870;
}

.create-form-field {
    position: relative;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E6E9F0;
    padding: 12px 12px 28px;
    box-sizing: border-box;
}

.create-form-textarea {
    display: block;
    width: 100%;
    min-height: 72px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-size: 14px;
    line-height: 22px;
    color: #1D2129;
    box-sizing: border-box;
}

.create-form-textarea::placeholder {
    color: #86909C;
}

.create-form-counter {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #A9ADB6;
}

.create-popup-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    flex-shrink: 0;
}

.create-footer-btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 22px;
    font-size: 16px;
    line-height: 24px;
}

.create-footer-btn:disabled {
    opacity: 0.5;
}

.create-footer-btn--cancel {
    background: #F2F3F5;
    color: #1D2129;
}

.create-footer-btn--confirm {
    background: #1D2129;
    color: #FFFFFF;
}

.quick-reply-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
}

.quick-reply-swipe {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.quick-reply-swipe + .quick-reply-swipe {
    border-top: 1px solid #F0F2F7;
}

.swipe-actions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.action-btn {
    width: 80px;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-edit {
    background: #1677FF;
}

.action-delete {
    background: #E54545;
}

.quick-reply-item {
    position: relative;
    z-index: 1;
    padding: 12px 0;
    background: #fff;
    touch-action: pan-y;
}

.quick-reply-item.is-clickable {
    cursor: pointer;
}

.quick-reply-item-title {
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    color: #676A70;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-reply-item-content {
    margin-top: 4px;
}

.quick-reply-item-text {
    font-size: 14px;
    line-height: 22px;
    color: #4E5969;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quick-reply-item-thumb {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    background: #E7EAF0;
}

.quick-reply-item-media-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background: #E7EAF0;
    color: #86909C;
    font-size: 10px;
    line-height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 4px;
}

.quick-reply-empty-state {
    margin-top: 48px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    color: #86909C;
}

:deep(.keyword-highlight) {
    color: #165DFF;
}
</style>