<template>
  <transition name="ai-panel-fade">
    <div 
      v-if="visible" 
      class="ask-ai-panel"
      :class="{ 'is-generating': state === 'generating' }"
      :style="{ top: position.top + 'px', left: position.left + 'px' }"
      @mousedown.stop
    >
      <!-- 1. Input State -->
      <template v-if="state === 'input'">
        <div class="ai-input-container">
          <div class="ai-star-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M19 11L20.25 13.75L23 15L20.25 16.25L19 19L17.75 16.25L15 15L17.75 13.75L19 11Z" fill="currentColor"/>
              <path d="M9 3L11.25 7.75L16 10L11.25 12.25L9 17L6.75 12.25L2 10L6.75 7.75L9 3Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="textarea-wrapper">
            <el-input
              v-model="inputValue"
              type="textarea"
              :autosize="{ minRows: 1, maxRows: 6 }"
              :placeholder="t('affine.askAi.placeholder')"
              resize="none"
              ref="inputRef"
              :maxlength="4000"
              @keydown.enter.exact.prevent="handleSubmit"
              class="ai-el-textarea"
            />
            <el-button 
              class="send-btn-v4" 
              :disabled="!inputValue.trim()"
              @click="handleSubmit"
              circle
            >
              <template #icon>
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none">
                  <path fill="currentColor" d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
                </svg>
              </template>
            </el-button>
          </div>
        </div>

        <!-- 字数限制提示 -->
        <transition name="ai-panel-fade">
          <div v-if="inputValue.length >= 3600" class="limit-tip-v2" :class="{ 'at-limit': inputValue.length >= 4000 }">
            <el-icon><Warning /></el-icon>
            <span v-if="inputValue.length >= 4000">字数已达上限 4000</span>
            <span v-else>接近限制: {{ inputValue.length }}/4000</span>
          </div>
        </transition>

        <el-divider class="ai-el-divider" />

        <el-scrollbar max-height="320px">
          <!-- 默认菜单列表 -->
          <div v-if="!currentSubmenu" class="ai-menu-list">
            <div v-for="(group, gIndex) in menuGroups" :key="gIndex" class="menu-group">
              <div class="group-title">{{ group.title }}</div>
              <div 
                v-for="(item, iIndex) in group.items" 
                :key="iIndex" 
                class="menu-item-v3"
                :class="{ 'discard': item.action === 'discard' }"
                @click="handleAction(item)"
              >
                <span class="item-icon" v-html="icons[item.icon] || item.icon"></span>
                <span class="item-label">{{ item.label }}</span>
                <span v-if="item.hasSubmenu" class="item-arrow">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M8.47 6.47a.75.75 0 0 0 0 1.06L12.94 12l-4.47 4.47a.75.75 0 1 0 1.06 1.06l5-5a.75.75 0 0 0 0-1.06l-5-5a.75.75 0 0 0-1.06 0" fill="currentColor"/></svg>
                </span>
                <span v-else class="item-enter">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg>
                </span>
              </div>
            </div>
          </div>

          <!-- 子菜单列表 -->
          <div v-else class="ai-menu-list submenu-list">
            <div class="menu-item-v3 back-item" @click="handleBack">
              <span class="item-icon">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z" fill="currentColor"/></svg>
              </span>
              <span class="item-label back-label">{{ currentSubmenu.title }}</span>
            </div>
            <div class="submenu-items">
            <div 
              v-for="(subItem, subIndex) in currentSubmenu.items" 
              :key="subIndex" 
              class="menu-item-v3"
              @click="handleAction(subItem)"
            >
              <span class="item-icon" v-html="icons[subItem.icon] || subItem.icon"></span>
              <span class="item-label">{{ subItem.label }}</span>
              <span class="item-enter">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg>
              </span>
            </div>
            </div>
          </div>
        </el-scrollbar>
      </template>

      <!-- 2. Generating State (Minimalist Bar) -->
      <template v-else-if="state === 'generating'">
        <div class="ai-generating-bar">
          <div class="ai-star-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="spin-slow">
              <path d="M19 11L20.25 13.75L23 15L20.25 16.25L19 19L17.75 16.25L15 15L17.75 13.75L19 11Z" fill="currentColor"/>
              <path d="M9 3L11.25 7.75L16 10L11.25 12.25L9 17L6.75 12.25L2 10L6.75 7.75L9 3Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="generating-text">{{ t('affine.askAi.status.thinking') }}</div>
          <div class="generating-right">
            <el-button link class="stop-icon-btn" @click="$emit('stop')">
              <template #icon>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2"/>
                  <rect x="9" y="9" width="6" height="6" fill="currentColor"/>
                </svg>
              </template>
            </el-button>
            <span class="esc-hint">{{ t('affine.askAi.status.esc') }}</span>
          </div>
        </div>
      </template>

      <!-- 3. Finished State -->
      <template v-else-if="state === 'finished' || state === 'error'">
        <div class="ai-result-container">
          <el-scrollbar max-height="400px">
            <div class="answer-section">
              <div class="answer-title">{{ t('affine.askAi.dialog.answerTitle') }}</div>
              <div class="answer-content">
                {{ answer }}
              </div>
            </div>
          </el-scrollbar>

          <div class="finish-tip">
            <el-icon color="#f59e0b" :size="16"><Warning /></el-icon>
            <span class="tip-text">{{ t('affine.askAi.dialog.warning') }}</span>
            <el-button link class="copy-action-el" @click="handleCopy">
              <template #icon>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M16 4H4V16H16V4ZM16 2C17.1 2 18 2.9 18 4V16C18 17.1 17.1 18 16 18H4C2.9 18 2 17.1 2 16V4C2 2.9 2.9 2 4 2H16ZM20 8V20H8V22H20C21.1 22 22 21.1 22 20V8H20Z" fill="currentColor"/></svg>
              </template>
            </el-button>
          </div>
          <el-divider class="ai-el-divider" />
          <div class="action-buttons-groups">
            <div class="action-group">
              <div class="menu-item-v3" @click="$emit('replace', answer)">
                <span class="item-icon" v-html="icons.Replace"></span>
                <span class="item-label">{{ t('affine.askAi.dialog.replace') }}</span>
                <span class="item-enter"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg></span>
              </div>
              <div class="menu-item-v3" @click="$emit('insert', answer)">
                <span class="item-icon" v-html="icons.Insert"></span>
                <span class="item-label">{{ t('affine.askAi.dialog.insert') }}</span>
                <span class="item-enter"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg></span>
              </div>
            </div>
            <el-divider class="ai-el-divider" />
            <div class="action-group">
              <div class="menu-item-v3" @click="$emit('retry')">
                <span class="item-icon" v-html="icons.Retry"></span>
                <span class="item-label">{{ t('affine.askAi.dialog.retry') }}</span>
                <span class="item-enter"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg></span>
              </div>
              <div class="menu-item-v3 discard" @click="$emit('close')">
                <span class="item-icon" v-html="icons.Discard"></span>
                <span class="item-label">{{ t('affine.askAi.dialog.discard') }}</span>
                <span class="item-enter"><svg width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M21 18V11C21 9.34315 19.6569 8 18 8H6.41421L11.7071 2.70711L10.2929 1.29289L2.58579 9L10.2929 16.7071L11.7071 15.2929L6.41421 10H18C18.5523 10 19 10.4477 19 11V18H21Z" fill="currentColor"/></svg></span>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, onUnmounted, nextTick, watch, computed } from 'vue';
import { useI18n } from "vue-i18n";
import { Warning } from '@element-plus/icons-vue';

const { t } = useI18n();

const props = withDefaults(defineProps<{
  visible: boolean;
  position: { top: number; left: number };
  state?: 'input' | 'generating' | 'finished' | 'error';
  answer?: string;
}>(), {
  state: 'input',
  answer: ''
});

const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'action', action: string): void;
  (e: 'stop'): void;
  (e: 'retry'): void;
  (e: 'replace', text: string): void;
  (e: 'insert', text: string): void;
}>();

const inputValue = ref('');
const inputRef = ref<any>(null);
const currentSubmenu = ref<any>(null);

const submenus = computed<Record<string, any[]>>(() => ({
  'translate': [
    { label: t('affine.askAi.languages.english'), icon: 'Translate', action: 'translate:english' },
    { label: t('affine.askAi.languages.chinese'), icon: 'Translate', action: 'translate:chinese' },
    { label: t('affine.askAi.languages.japanese'), icon: 'Translate', action: 'translate:japanese' },
    { label: t('affine.askAi.languages.korean'), icon: 'Translate', action: 'translate:korean' },
    { label: t('affine.askAi.languages.french'), icon: 'Translate', action: 'translate:french' },
    { label: t('affine.askAi.languages.german'), icon: 'Translate', action: 'translate:german' },
    { label: t('affine.askAi.languages.spanish'), icon: 'Translate', action: 'translate:spanish' }
  ],
  'change-tone': [
    { label: t('affine.askAi.tones.professional'), icon: 'Tone', action: 'change-tone:professional' },
    { label: t('affine.askAi.tones.casual'), icon: 'Tone', action: 'change-tone:casual' },
    { label: t('affine.askAi.tones.friendly'), icon: 'Tone', action: 'change-tone:friendly' },
    { label: t('affine.askAi.tones.direct'), icon: 'Tone', action: 'change-tone:direct' },
    { label: t('affine.askAi.tones.confident'), icon: 'Tone', action: 'change-tone:confident' }
  ]
}));

// Official Icons
const icons: Record<string, string> = {
  Text: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4 6V4H20V6H13V18H15V20H9V18H11V6H4Z" fill="currentColor"/></svg>`,
  Check: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M9 16.17L4.83 12L3.41 13.41L9 19L21 7L19.59 5.59L9 16.17Z" fill="currentColor"/></svg>`,
  Ai: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M19 11L20.25 13.75L23 15L20.25 16.25L19 19L17.75 16.25L15 15L17.75 13.75L19 11Z" fill="currentColor"/><path d="M9 3L11.25 7.75L16 10L11.25 12.25L9 17L6.75 12.25L2 10L6.75 7.75L9 3Z" fill="currentColor"/></svg>`,
  Pen: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z" fill="currentColor"/></svg>`,
  Convert: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12.87 15.07L10.33 19H8.1L10.64 15.07H12.87ZM12.13 13.93H9.87L7.33 10H9.56L12.13 13.93ZM14.1 13H11.87L9.33 9.07H11.56L14.1 13ZM12.87 11.07L10.33 15H8.1L10.64 11.07H12.87Z" fill="currentColor"/><path d="M12.89 3L14.85 3.4L11.11 21L9.15 20.6L12.89 3ZM19.59 12L16 8.41V11H12V13H16V15.59L19.59 12ZM4.41 12L8 15.59V13H12V11H8V8.41L4.41 12Z" fill="currentColor"/></svg>`,
  Replace: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M7 10H17V12H7V10ZM7 14H12V16H7V14ZM19 3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.11 21 21 20.1 21 19V5C21 3.9 20.11 3 19 3ZM19 19H5V5H19V19Z" fill="currentColor"/></svg>`,
  Insert: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/></svg>`,
  Retry: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4C7.58 4 4.01 7.58 4.01 12C4.01 16.42 7.58 20 12 20C15.73 20 18.84 17.45 19.73 14H17.65C16.83 16.33 14.61 18 12 18C8.69 18 6 15.31 6 12C6 8.69 8.69 6 12 6C13.66 6 15.14 6.69 16.22 7.78L13 11H20V4L17.65 6.35Z" fill="currentColor"/></svg>`,
  Discard: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/></svg>`,
  Translate: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12.87 15.07L10.33 19H8.1L10.64 15.07H12.87ZM12.13 13.93H9.87L7.33 10H9.56L12.13 13.93ZM14.1 13H11.87L9.33 9.07H11.56L14.1 13ZM12.87 11.07L10.33 15H8.1L10.64 11.07H12.87Z" fill="currentColor"/><path d="M12.89 3L14.85 3.4L11.11 21L9.15 20.6L12.89 3ZM19.59 12L16 8.41V11H12V13H16V15.59L19.59 12ZM4.41 12L8 15.59V13H12V11H8V8.41L4.41 12Z" fill="currentColor"/></svg>`,
  Tone: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 17.25V21H6.75L17.81 9.94L14.06 6.19L3 17.25ZM20.71 7.04C21.1 6.65 21.1 6.02 20.71 5.63L18.37 3.29C17.98 2.9 17.35 2.9 16.96 3.29L15.13 5.12L18.88 8.87L20.71 7.04Z" fill="currentColor"/></svg>`,
  Explain: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M21 5H3V19H21V5ZM19 17H5V7H19V17ZM7 9H17V11H7V9ZM7 13H12V15H7V13Z" fill="currentColor"/></svg>`,
  Action: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/></svg>`,
  Outline: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z" fill="currentColor"/></svg>`,
  Social: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z" fill="currentColor"/></svg>`,
  Poem: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" fill="currentColor"/></svg>`,
  Essay: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" fill="currentColor"/></svg>`,
};

// Official Category Names
const menuGroups = computed(() => [
  {
    title: t('affine.askAi.groups.review'),
    items: [
      { label: t('affine.askAi.items.improve'), icon: 'Ai', action: 'improve' },
      { label: t('affine.askAi.items.fixSpelling'), icon: 'Check', action: 'fix-spelling' },
      { label: t('affine.askAi.items.fixGrammar'), icon: 'Check', action: 'fix-grammar' },
      { label: t('affine.askAi.items.explain'), icon: 'Explain', action: 'explain' }
    ]
  },
  {
    title: t('affine.askAi.groups.edit'),
    items: [
      { label: t('affine.askAi.items.translate'), icon: 'Translate', hasSubmenu: true, action: 'translate' },
      { label: t('affine.askAi.items.changeTone'), icon: 'Tone', hasSubmenu: true, action: 'change-tone' },
      { label: t('affine.askAi.items.simplify'), icon: 'Text', action: 'simplify' },
      { label: t('affine.askAi.items.longer'), icon: 'Text', action: 'longer' },
      { label: t('affine.askAi.items.shorter'), icon: 'Text', action: 'shorter' },
      { label: t('affine.askAi.items.continue'), icon: 'Pen', action: 'continue' }
    ]
  },
  {
    title: t('affine.askAi.groups.draft'),
    items: [
      { label: t('affine.askAi.items.summarize'), icon: 'Pen', action: 'summarize' },
      { label: t('affine.askAi.items.findActionItems'), icon: 'Action', action: 'find-action-items' },
      { label: t('affine.askAi.items.writeArticle'), icon: 'Pen', action: 'write-article' },
      { label: t('affine.askAi.items.brainstorm'), icon: 'Ai', action: 'brainstorm' },
      { label: t('affine.askAi.items.writeOutline'), icon: 'Outline', action: 'write-outline' },
      { label: t('affine.askAi.items.writeSocialMediaPost'), icon: 'Social', action: 'write-social-media-post' },
      { label: t('affine.askAi.items.writePoem'), icon: 'Poem', action: 'write-poem' },
      { label: t('affine.askAi.items.writeEssay'), icon: 'Essay', action: 'write-essay' }
    ]
  }
]);

const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(props.answer || '');
  } catch (err) {
    console.error('Failed to copy:', err);
  }
};

const handleSubmit = () => {
  const val = inputValue.value.trim();
  if (!val) return;
  emit('action', 'submit:' + val);
  inputValue.value = '';
};

const handleAction = (item: any) => {
  if (item.hasSubmenu) {
    currentSubmenu.value = {
      title: item.label,
      items: submenus.value[item.action] || []
    };
    return;
  }
  emit('action', item.action);
  currentSubmenu.value = null; // 执行完后关闭子菜单
};

const handleBack = () => {
  currentSubmenu.value = null;
};

const handleClickOutside = (e: MouseEvent) => {
  // 生成过程中禁止通过点击外部关闭，防止意外丢失进度
  if (props.state === 'generating') return;

  // @ts-ignore
  const path = e.composedPath();
  const isInsidePanel = path.some((el: any) => el.classList?.contains('ask-ai-panel'));
  const isTriggerButton = path.some((el: any) => 
    el.getAttribute && (el.getAttribute('aria-label') === t('affine.askAi.title') || el.classList?.contains('ask-ai-btn-wrapper'))
  );
  
  if (!isInsidePanel && !isTriggerButton) {
    emit('close');
  }
};

const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Escape') {
    if (props.state === 'generating') {
      emit('stop');
    } else {
      emit('close');
    }
  }
};

watch(() => props.visible, (val) => {
  if (val) {
    nextTick(() => {
      inputRef.value?.focus();
      document.addEventListener('mousedown', handleClickOutside);
      document.addEventListener('keydown', handleKeyDown);
    });
  } else {
    document.removeEventListener('mousedown', handleClickOutside);
    document.removeEventListener('keydown', handleKeyDown);
  }
});

onUnmounted(() => {
  document.removeEventListener('mousedown', handleClickOutside);
  document.removeEventListener('keydown', handleKeyDown);
});
</script>

<style scoped>
.ask-ai-panel {
  position: fixed;
  z-index: 10001;
  width: 400px;
  background: var(--affine-background-overlay-panel-color, rgba(255, 255, 255, 0.8));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 12px;
  border: 1px solid var(--affine-border-color, rgba(0, 0, 0, 0.08));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  overflow: hidden;
  font-family: var(--affine-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  transition: width 0.3s ease, height 0.3s ease;
}

.ask-ai-panel.is-generating {
  width: 420px;
  padding: 0;
  border-radius: 8px;
}

.ai-generating-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 10px;
  height: 44px;
  box-sizing: border-box;
}

.generating-text {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--affine-primary-color, #1e96eb);
}

.generating-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stop-icon-btn {
  padding: 0 !important;
  height: 24px !important;
  width: 24px !important;
  color: var(--affine-primary-color, #1e96eb) !important;
}

.stop-icon-btn:hover {
  background: rgba(30, 150, 235, 0.1) !important;
}

.esc-hint {
  font-size: 12px;
  font-weight: 600;
  color: var(--affine-primary-color, #1e96eb);
  opacity: 0.8;
  padding-left: 4px;
}

.spin-slow {
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.ai-input-container {
  display: flex;
  padding: 8px 12px;
  gap: 12px;
  align-items: center;
  background: white;
  margin: 0 8px 8px 8px;
  border: 1px solid var(--affine-border-color, #e0e0e0);
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.ai-star-icon {
  display: flex;
  padding: 0;
  align-items: center;
  color: var(--affine-primary-color, #1e96eb);
}

.textarea-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Element Plus 重置样式 */
:deep(.ai-el-textarea .el-textarea__inner) {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: var(--affine-text-primary-color, #1d1d1f) !important;
  font-family: inherit !important;
  min-height: 28px !important;
}

:deep(.ai-el-textarea .el-textarea__inner::placeholder) {
  color: #b0b0b0 !important;
}

.send-btn-v4 {
  padding: 4px !important;
  height: 28px !important;
  width: 28px !important;
  border: none !important;
  background: #dbdbdb !important;
  color: white !important;
}

.send-btn-v4:not(:disabled) {
  background: var(--affine-primary-color, #1e96eb) !important;
}

.limit-tip-v2 {
  position: absolute;
  top: 12px;
  right: 50px;
  background: rgba(30, 150, 235, 0.9);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  pointer-events: none;
  white-space: nowrap;
}

.limit-tip-v2.at-limit {
  background: rgba(244, 67, 54, 0.9);
}

.ai-el-divider {
  margin: 4px 0 !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}

.ai-menu-list {
  padding: 4px 0;
}

.menu-group {
  margin-top: 4px;
}

.menu-group:first-child {
  margin-top: 0;
}

.group-title {
  font-size: 11px;
  font-weight: 600;
  color: #a0a0a0;
  padding: 8px 16px 4px 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-item-v3 {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8px 16px;
  gap: 12px;
  cursor: pointer;
  transition: background 0.1s;
  box-sizing: border-box;
}

.menu-item-v3:hover {
  background: #f5f5f7;
}

.item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1e96eb;
  width: 20px;
  height: 20px;
}

.item-label {
  flex: 1;
  padding: 0;
  font-size: 14px;
  line-height: 20px;
  color: #1d1d1f;
  white-space: nowrap;
}

.item-arrow, .item-enter {
  display: flex;
  align-items: center;
  color: #c0c0c0;
}

.item-enter {
  opacity: 0;
}

.menu-item-v3:hover .item-enter {
  opacity: 1;
}

.menu-item-v3.discard:hover {
  background: #fff1f0;
}

.menu-item-v3.discard:hover .item-label,
.menu-item-v3.discard:hover .item-icon,
.menu-item-v3.discard:hover .item-enter {
  color: var(--affine-error-color, #ff4d4f);
}

.back-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding: 10px 16px;
}

.back-label {
  font-weight: 600;
  color: var(--affine-text-secondary-color, #86868b);
}

.submenu-items {
  padding-top: 4px;
}

.answer-section {
  padding: 12px 16px;
}

.answer-title {
  font-size: 11px;
  font-weight: 600;
  color: #a0a0a0;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.answer-content {
  font-size: 14px;
  line-height: 22px;
  color: #1d1d1f;
  white-space: pre-wrap;
  word-break: break-word;
}

.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background-color: var(--affine-primary-color);
  margin-left: 2px;
  vertical-align: middle;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.finish-tip {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  color: #a0a0a0;
}

.tip-text {
  flex: 1;
  font-size: 11px;
}

.action-buttons-groups {
  padding: 4px 0;
}

/* Animations */
.ai-panel-fade-enter-active, .ai-panel-fade-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}
.ai-panel-fade-enter-from, .ai-panel-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* Dark Mode Support */
:global([data-theme='dark']) .ask-ai-panel {
  background: #252526;
  border-color: rgba(255, 255, 255, 0.1);
}
:global([data-theme='dark']) .ai-input-container {
  background: #2d2d2d;
  border-color: #444;
}
</style>