// ==UserScript==
// @name         饺子 AI 网页摘要 + 连续对话
// @namespace    https://space.bilibili.com/38389107
// @version      2.0.0
// @description  指定网站自动弹出 AI 网页摘要，支持全局配置、网址规则管理、提示词模板、停止/重试、正文预览、模型拉取。
// @author       次元饺子
// @icon         https://img.icons8.com/?size=100&id=90385&format=png&color=000000
// @match        *://*/*
// @grant        GM_registerMenuCommand
// @grant        GM_setClipboard
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_xmlhttpRequest
// @connect      *
// @run-at       document-idle
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function () {
  'use strict';

  /******************************************************************
   * 固定配置 Key
   ******************************************************************/

  const STORAGE_KEY = 'tabbit_ai_summary_config';

  const LEGACY_STORAGE_KEYS = [
    'tabbit_ai_summary_config_v24',
    'tabbit_ai_summary_config_v23',
    'tabbit_ai_summary_config_v22',
    'tabbit_ai_summary_config_v21',
    'tabbit_ai_summary_config_v2'
  ];

  const DEFAULT_PROMPT_TEXT =
    '我是一个有轻微理解障碍的人，没有耐心，不想动脑子。请你用很短、很直白的话解释这个网页到底在说什么。' +
    '\n\n请输出：' +
    '\n1. 这个网页一句话总结' +
    '\n2. 关键点' +
    '\n3. 对我有什么用' +
    '\n4. 原始链接';

  const DEFAULT_CONFIG = {
    apiUrl: 'https://api.xiaomimimo.com/v1/chat/completions',
    apiKey: '',

    currentModel: 'mimo-v2-flash',
    temperature: 0.7,
    maxTokens: 2000,

    models: [
      {
        name: 'mimo-v2-flash',
        value: 'mimo-v2-flash',
        temperature: '',
        maxTokens: ''
      }
    ],

    promptTemplates: [
      {
        id: 'default',
        name: '默认总结',
        text: DEFAULT_PROMPT_TEXT
      },
      {
        id: 'plain',
        name: '大白话解释',
        text:
          '请用非常简单、直白、短句的方式解释这个网页。不要绕弯子，不要讲废话。' +
          '\n\n请输出：' +
          '\n1. 一句话说明它在说什么' +
          '\n2. 三个最重要的点' +
          '\n3. 普通人应该怎么理解'
      },
      {
        id: 'forum',
        name: '论坛讨论总结',
        text:
          '请总结这个帖子或讨论页面。重点提炼楼主观点、主要争议、支持方观点、反对方观点，以及最后值得关注的结论。'
      },
      {
        id: 'investment',
        name: '投资视角',
        text:
          '请从投资和商业角度总结这个网页。重点关注公司、行业、数据、增长、风险、市场预期，以及对普通投资者有什么参考价值。'
      }
    ],

    defaultPromptTemplateId: 'default',

    urlRules: [
      'https://mp.weixin.qq.com/*',
      'https://nga.178.com/read.php*',
      'https://www.jisilu.cn/*',
      'https://www.gelonghui.com/*',
      'https://bbs.nga.cn/read.php*',
      'https://www.youxituoluo.com/*',
      'https://www.vrtuoluo.cn/*',
      'https://sspai.com/post/*',
      'https://www.ifanr.com/*',
      'http://www.gamelook.com.cn/*'
    ],

    rulePromptBindings: [],

    autoRun: true,

    floatButton: {
      side: 'right',
      y: null,
      opacity: 0.55
    },

    panel: {
      width: 460,
      heightRatio: 0.82
    },

    extractMaxChars: 16000
  };

  let config = loadConfig();

  let panelEl = null;
  let floatBtnEl = null;
  let settingsEl = null;
  let addRuleModalEl = null;
  let previewModalEl = null;

  let chatMessages = [];
  let summaryStarted = false;
  let currentPageUrl = location.href;
  let lastUrl = location.href;

  let isRequesting = false;
  let currentRequest = null;
  let currentReject = null;
  let lastRequestPayload = null;
  let lastExtractedText = '';

  init();

  /******************************************************************
   * 初始化
   ******************************************************************/

  function init() {
    createStyles();
    createFloatButton();
    registerMenus();

    if (config.autoRun && isUrlMatched(location.href, config.urlRules)) {
      openPanel(true);
    }

    watchUrlChange();
  }

  function registerMenus() {
    if (typeof GM_registerMenuCommand !== 'function') return;

    GM_registerMenuCommand('饺子 AI：打开面板', () => openPanel(false));
    GM_registerMenuCommand('饺子 AI：设置', openSettings);
    GM_registerMenuCommand('饺子 AI：加入当前网址', () => openAddUrlRuleModal());
    GM_registerMenuCommand('饺子 AI：导出配置文件', exportConfigToFile);
    GM_registerMenuCommand('饺子 AI：导入配置文件', importConfigFromFile);
    GM_registerMenuCommand('饺子 AI：重置配置', resetConfig);
  }

  function watchUrlChange() {
    setInterval(() => {
      if (location.href === lastUrl) return;

      lastUrl = location.href;
      currentPageUrl = location.href;
      summaryStarted = false;
      chatMessages = [];
      lastRequestPayload = null;
      lastExtractedText = '';

      if (panelEl) {
        const list = panelEl.querySelector('#tabbit-chat-list');
        if (list) list.innerHTML = '';
        setStatus('');
      }

      if (config.autoRun && isUrlMatched(location.href, config.urlRules)) {
        openPanel(true);
      }
    }, 1000);
  }

  /******************************************************************
   * 配置读写：只使用 GM_getValue / GM_setValue
   ******************************************************************/

  function loadConfig() {
    try {
      if (typeof GM_getValue !== 'function') {
        console.warn('[饺子 AI] 当前环境不支持 GM_getValue。');
        return clone(DEFAULT_CONFIG);
      }

      let raw = GM_getValue(STORAGE_KEY, '');

      if (!raw) {
        for (const key of LEGACY_STORAGE_KEYS) {
          const legacyRaw = GM_getValue(key, '');
          if (legacyRaw) {
            raw = legacyRaw;
            GM_setValue(STORAGE_KEY, legacyRaw);
            console.log('[饺子 AI] 已迁移旧配置：', key);
            break;
          }
        }
      }

      if (!raw) return clone(DEFAULT_CONFIG);

      const saved = JSON.parse(raw);
      return mergeConfig(clone(DEFAULT_CONFIG), saved);
    } catch (err) {
      console.warn('[饺子 AI] 配置读取失败：', err);
      return clone(DEFAULT_CONFIG);
    }
  }

  function saveConfig() {
    try {
      if (typeof GM_setValue !== 'function') {
        alert('当前环境不支持 GM_setValue，配置无法保存。');
        return;
      }

      config.urlRules = normalizeUrlRules(config.urlRules);
      config.rulePromptBindings = normalizeRulePromptBindings(config.rulePromptBindings);
      config.promptTemplates = normalizePromptTemplates(config.promptTemplates);
      config.models = normalizeModels(config.models);

      GM_setValue(STORAGE_KEY, JSON.stringify(config));
    } catch (err) {
      console.warn('[饺子 AI] 配置保存失败：', err);
      alert('配置保存失败：' + err.message);
    }
  }

  function resetConfig() {
    if (!confirm('确定要重置 饺子 AI 的所有配置吗？')) return;

    try {
      if (typeof GM_deleteValue === 'function') {
        GM_deleteValue(STORAGE_KEY);
      }

      config = clone(DEFAULT_CONFIG);
      saveConfig();

      alert('配置已重置。');
      location.reload();
    } catch (err) {
      alert('重置失败：' + err.message);
    }
  }

  function mergeConfig(base, saved) {
    const result = {
      ...base,
      ...saved
    };

    if (!Array.isArray(result.models)) result.models = base.models;
    if (!Array.isArray(result.urlRules)) result.urlRules = base.urlRules;
    if (!Array.isArray(result.promptTemplates)) result.promptTemplates = base.promptTemplates;
    if (!Array.isArray(result.rulePromptBindings)) result.rulePromptBindings = [];

    // 兼容旧 promptText。
    if (saved.promptText && !saved.promptTemplates) {
      result.promptTemplates = [
        {
          id: 'default',
          name: '默认总结',
          text: saved.promptText
        },
        ...base.promptTemplates.filter(t => t.id !== 'default')
      ];
    }

    result.models = normalizeModels(result.models);
    result.urlRules = normalizeUrlRules(result.urlRules);
    result.promptTemplates = normalizePromptTemplates(result.promptTemplates);
    result.rulePromptBindings = normalizeRulePromptBindings(result.rulePromptBindings);

    result.floatButton = {
      ...base.floatButton,
      ...(saved.floatButton || {})
    };

    result.panel = {
      ...base.panel,
      ...(saved.panel || {})
    };

    if (!result.defaultPromptTemplateId) {
      result.defaultPromptTemplateId = result.promptTemplates[0]?.id || 'default';
    }

    if (!result.promptTemplates.some(t => t.id === result.defaultPromptTemplateId)) {
      result.defaultPromptTemplateId = result.promptTemplates[0]?.id || 'default';
    }

    if (!result.currentModel && result.models.length) {
      result.currentModel = result.models[0].value;
    }

    if (!result.models.some(m => m.value === result.currentModel)) {
      result.currentModel = result.models[0]?.value || '';
    }

    result.extractMaxChars = Number(result.extractMaxChars || 16000);

    return result;
  }

  function clone(obj) {
    return JSON.parse(JSON.stringify(obj));
  }

  /******************************************************************
   * URL 规则
   ******************************************************************/

  function normalizeUrlRules(rules) {
    if (!Array.isArray(rules)) return [];

    const result = [];

    rules
      .map(rule => String(rule || '').trim())
      .filter(Boolean)
      .forEach(rule => {
        if (!result.includes(rule)) result.push(rule);
      });

    return result;
  }

  function normalizeRulePromptBindings(bindings) {
    if (!Array.isArray(bindings)) return [];

    const result = [];

    bindings.forEach(item => {
      const rule = String(item?.rule || '').trim();
      const templateId = String(item?.templateId || '').trim();

      if (!rule || !templateId) return;

      const old = result.find(x => x.rule === rule);
      if (old) {
        old.templateId = templateId;
      } else {
        result.push({ rule, templateId });
      }
    });

    return result;
  }

  function isUrlMatched(url, rules) {
    return findMatchedUrlRules(url, rules).length > 0;
  }

  function findMatchedUrlRules(url, rules = config.urlRules) {
    return normalizeUrlRules(rules).filter(rule => testUrlRule(url, rule));
  }

  function testUrlRule(url, rule) {
    rule = String(rule || '').trim();
    if (!rule) return false;

    if (rule.includes('*')) {
      const escaped = rule
        .replace(/[.+?^${}()|[\]\\]/g, '\\$&')
        .replace(/\*/g, '.*');

      return new RegExp('^' + escaped).test(url);
    }

    return url.startsWith(rule);
  }

  function getMatchedRuleForCurrentPage() {
    return findMatchedUrlRules(location.href)[0] || '';
  }

  function buildUrlRuleCandidates(rawUrl) {
    let url;

    try {
      url = new URL(rawUrl);
    } catch (err) {
      return [rawUrl.split('#')[0].split('?')[0]];
    }

    const origin = url.origin;
    const fullNoHash = rawUrl.split('#')[0];
    const path = url.pathname || '/';
    const pathNoSlash = path.replace(/\/+$/, '') || '/';
    const segments = pathNoSlash.split('/').filter(Boolean);
    const last = segments[segments.length - 1] || '';

    const candidates = [];

    const recommended = buildSmartUrlRule(rawUrl);
    pushUnique(candidates, recommended);

    pushUnique(candidates, fullNoHash);

    if (path !== '/') {
      pushUnique(candidates, origin + pathNoSlash + '*');
    }

    if (segments.length > 1) {
      pushUnique(candidates, origin + '/' + segments.slice(0, -1).join('/') + '/*');
    }

    pushUnique(candidates, origin + '/*');
    pushUnique(candidates, origin + '/');

    if (/\.(php|asp|aspx|jsp|html|htm)$/i.test(last)) {
      pushUnique(candidates, origin + pathNoSlash + '*');
    }

    return candidates;
  }

  function buildSmartUrlRule(rawUrl) {
    let url;

    try {
      url = new URL(rawUrl);
    } catch (err) {
      return rawUrl.split('#')[0].split('?')[0];
    }

    const origin = url.origin;
    let pathname = url.pathname || '/';

    pathname = pathname.replace(/\/{2,}/g, '/');

    if (!pathname || pathname === '/') {
      return origin + '/';
    }

    const pathWithoutTrailingSlash = pathname.replace(/\/+$/, '');
    const segments = pathWithoutTrailingSlash.split('/').filter(Boolean);
    const last = segments[segments.length - 1] || '';

    const hasQuery = !!url.search;
    const isFileLike = /\.[a-z0-9]{2,8}$/i.test(last);
    const isPhpLike = /\.(php|asp|aspx|jsp|html|htm)$/i.test(last);

    const isNumericId = /^\d+$/.test(last);
    const isHexId = /^[a-f0-9]{8,}$/i.test(last);
    const isSlugWithId = /(^|[-_])\d{3,}($|[-_])/i.test(last);
    const isLongToken = last.length >= 24 && /^[a-z0-9_-]+$/i.test(last);
    const isIdLike = isNumericId || isHexId || isSlugWithId || isLongToken;

    if (isPhpLike || isFileLike) {
      return origin + pathWithoutTrailingSlash + '*';
    }

    if (isIdLike) {
      if (segments.length <= 1) return origin + '/*';
      return origin + '/' + segments.slice(0, -1).join('/') + '/*';
    }

    if (hasQuery) {
      return origin + pathWithoutTrailingSlash + '*';
    }

    if (pathname.endsWith('/')) {
      return origin + pathname;
    }

    return origin + pathWithoutTrailingSlash + '*';
  }

  function pushUnique(arr, value) {
    value = String(value || '').trim();
    if (value && !arr.includes(value)) arr.push(value);
  }

  function addUrlRule(rule, templateId = '') {
    rule = String(rule || '').trim();
    if (!rule) return false;

    config.urlRules = normalizeUrlRules([...config.urlRules, rule]);

    if (templateId) {
      setRuleTemplateBinding(rule, templateId);
    }

    saveConfig();

    if (settingsEl && !settingsEl.classList.contains('tabbit-hidden')) {
      renderSettingsUrlRules();
    }

    setStatus('已加入网址规则', 'ok', 1800);
    return true;
  }

  function setRuleTemplateBinding(rule, templateId) {
    rule = String(rule || '').trim();
    templateId = String(templateId || '').trim();

    config.rulePromptBindings = normalizeRulePromptBindings(config.rulePromptBindings);

    config.rulePromptBindings = config.rulePromptBindings.filter(x => x.rule !== rule);

    if (templateId) {
      config.rulePromptBindings.push({
        rule,
        templateId
      });
    }
  }

  function getTemplateIdForRule(rule) {
    const binding = config.rulePromptBindings.find(x => x.rule === rule);
    return binding?.templateId || '';
  }

  /******************************************************************
   * 提示词模板
   ******************************************************************/

  function normalizePromptTemplates(templates) {
    if (!Array.isArray(templates)) templates = [];

    const result = [];

    templates.forEach(item => {
      const id = String(item?.id || '').trim() || makeId('tpl');
      const name = String(item?.name || '').trim() || '未命名模板';
      const text = String(item?.text || '').trim();

      if (!text) return;

      if (!result.some(t => t.id === id)) {
        result.push({ id, name, text });
      }
    });

    if (!result.length) {
      result.push({
        id: 'default',
        name: '默认总结',
        text: DEFAULT_PROMPT_TEXT
      });
    }

    return result;
  }

  function getPromptTemplateById(id) {
    return config.promptTemplates.find(t => t.id === id) || config.promptTemplates[0];
  }

  function getPromptForCurrentPage() {
    const matchedRule = getMatchedRuleForCurrentPage();
    const boundTemplateId = matchedRule ? getTemplateIdForRule(matchedRule) : '';
    const templateId = boundTemplateId || config.defaultPromptTemplateId;
    return getPromptTemplateById(templateId)?.text || DEFAULT_PROMPT_TEXT;
  }

  function makeId(prefix) {
    return `${prefix}_${Date.now()}_${Math.random().toString(16).slice(2)}`;
  }

  /******************************************************************
   * 模型
   ******************************************************************/

  function normalizeModels(models) {
    if (!Array.isArray(models)) models = [];

    const result = [];

    models.forEach(model => {
      const value = String(model?.value || '').trim();
      if (!value) return;

      const item = {
        name: String(model?.name || value).trim(),
        value,
        temperature: model?.temperature ?? '',
        maxTokens: model?.maxTokens ?? ''
      };

      if (!result.some(m => m.value === value)) {
        result.push(item);
      }
    });

    if (!result.length) {
      result.push({
        name: 'mimo-v2-flash',
        value: 'mimo-v2-flash',
        temperature: '',
        maxTokens: ''
      });
    }

    return result;
  }

  function getCurrentModelConfig() {
    return config.models.find(m => m.value === config.currentModel) || config.models[0] || {};
  }

  function getCurrentModelDisplayName() {
    const model = getCurrentModelConfig();
    return model?.name || model?.value || config.currentModel || '未知模型';
  }

  function getCurrentTemperature() {
    const model = getCurrentModelConfig();
    const value = model?.temperature !== '' && model?.temperature !== undefined
      ? model.temperature
      : config.temperature;

    return Number(value || 0.7);
  }

  function getCurrentMaxTokens() {
    const model = getCurrentModelConfig();
    const value = model?.maxTokens !== '' && model?.maxTokens !== undefined
      ? model.maxTokens
      : config.maxTokens;

    return Number(value || 2000);
  }

  /******************************************************************
   * 悬浮按钮
   ******************************************************************/

  function createFloatButton() {
    const old = document.querySelector('#tabbit-ai-float-btn');
    if (old) old.remove();

    floatBtnEl = document.createElement('button');
    floatBtnEl.id = 'tabbit-ai-float-btn';
    floatBtnEl.innerHTML = '<span>AI</span>';
    floatBtnEl.title = '打开 饺子 AI。可拖拽，右键恢复默认位置。';

    document.body.appendChild(floatBtnEl);

    applyFloatButtonPosition();

    let dragging = false;
    let moved = false;
    let startX = 0;
    let startY = 0;
    let startLeft = 0;
    let startTop = 0;

    floatBtnEl.addEventListener('mousedown', e => {
      if (e.button !== 0) return;

      dragging = true;
      moved = false;

      const rect = floatBtnEl.getBoundingClientRect();

      startX = e.clientX;
      startY = e.clientY;
      startLeft = rect.left;
      startTop = rect.top;

      document.body.classList.add('tabbit-dragging');
      e.preventDefault();
    });

    document.addEventListener('mousemove', e => {
      if (!dragging) return;

      const dx = e.clientX - startX;
      const dy = e.clientY - startY;

      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) moved = true;

      let left = startLeft + dx;
      let top = startTop + dy;

      const rect = floatBtnEl.getBoundingClientRect();
      const maxLeft = window.innerWidth - rect.width;
      const maxTop = window.innerHeight - rect.height;

      left = Math.max(0, Math.min(maxLeft, left));
      top = Math.max(0, Math.min(maxTop, top));

      floatBtnEl.style.left = left + 'px';
      floatBtnEl.style.top = top + 'px';
      floatBtnEl.style.right = 'auto';
      floatBtnEl.style.bottom = 'auto';
      floatBtnEl.style.transform = 'none';
    });

    document.addEventListener('mouseup', () => {
      if (!dragging) return;

      dragging = false;
      document.body.classList.remove('tabbit-dragging');

      const rect = floatBtnEl.getBoundingClientRect();
      const stickToRight = rect.left + rect.width / 2 > window.innerWidth / 2;

      config.floatButton.side = stickToRight ? 'right' : 'left';
      config.floatButton.y = Math.round(rect.top);

      saveConfig();
      applyFloatButtonPosition();
    });

    floatBtnEl.addEventListener('click', e => {
      if (moved) {
        e.preventDefault();
        e.stopPropagation();
        return;
      }

      openPanel(false);
    });

    floatBtnEl.addEventListener('contextmenu', e => {
      e.preventDefault();

      config.floatButton = {
        side: 'right',
        y: null,
        opacity: 0.55
      };

      saveConfig();
      applyFloatButtonPosition();
    });

    window.addEventListener('resize', applyFloatButtonPosition);
  }

  function applyFloatButtonPosition() {
    if (!floatBtnEl) return;

    const fb = config.floatButton || {};

    floatBtnEl.style.left = 'auto';
    floatBtnEl.style.right = 'auto';
    floatBtnEl.style.top = 'auto';
    floatBtnEl.style.bottom = 'auto';
    floatBtnEl.style.transform = 'none';

    if (typeof fb.y === 'number') {
      const btnHeight = 72;
      const safeY = Math.max(10, Math.min(window.innerHeight - btnHeight - 10, fb.y));

      floatBtnEl.style.top = safeY + 'px';

      if (fb.side === 'left') {
        floatBtnEl.style.left = '0px';
        floatBtnEl.classList.add('tabbit-float-left');
        floatBtnEl.classList.remove('tabbit-float-right');
      } else {
        floatBtnEl.style.right = '0px';
        floatBtnEl.classList.add('tabbit-float-right');
        floatBtnEl.classList.remove('tabbit-float-left');
      }
    } else {
      floatBtnEl.style.top = '50%';
      floatBtnEl.style.right = '0px';
      floatBtnEl.style.transform = 'translateY(-50%)';
      floatBtnEl.classList.add('tabbit-float-right');
      floatBtnEl.classList.remove('tabbit-float-left');
    }

    floatBtnEl.style.opacity = String(fb.opacity ?? 0.55);
  }

  /******************************************************************
   * 主面板
   ******************************************************************/

  function openPanel(autoRun) {
    if (!panelEl) {
      panelEl = createPanel();
      document.body.appendChild(panelEl);
    }

    panelEl.classList.remove('tabbit-hidden');
    renderModelSelect();

    if (autoRun && !summaryStarted) {
      runSummary();
    }
  }

  function closePanel() {
    if (panelEl) {
      panelEl.classList.add('tabbit-hidden');
    }
  }

  function createPanel() {
    const panel = document.createElement('div');
    panel.id = 'tabbit-ai-panel';

    const width = Number(config.panel?.width || 460);
    const heightRatio = Number(config.panel?.heightRatio || 0.82);

    panel.style.width = width + 'px';
    panel.style.height = Math.round(window.innerHeight * heightRatio) + 'px';

    panel.innerHTML = `
      <div class="tabbit-header">
        <div class="tabbit-title">📖 饺子 AI</div>

        <div class="tabbit-header-actions">
          <select id="tabbit-model-select" class="tabbit-model-select"></select>
          <button id="tabbit-settings-btn" class="tabbit-icon-btn" title="设置">⚙️</button>
          <button id="tabbit-close-btn" class="tabbit-icon-btn" title="关闭">×</button>
        </div>
      </div>

      <div class="tabbit-toolbar">
        <button id="tabbit-summary-btn" class="tabbit-primary-btn">总结</button>
        <button id="tabbit-stop-btn" class="tabbit-secondary-btn" disabled>停止</button>
        <button id="tabbit-retry-btn" class="tabbit-secondary-btn" disabled>重试</button>
        <button id="tabbit-preview-btn" class="tabbit-secondary-btn">正文</button>
        <button id="tabbit-add-url-rule-btn" class="tabbit-secondary-btn">加入网址</button>
        <button id="tabbit-clear-btn" class="tabbit-secondary-btn">清空</button>
        <button id="tabbit-copy-btn" class="tabbit-secondary-btn">复制</button>
      </div>

      <div id="tabbit-status-bar" class="tabbit-status-bar tabbit-hidden"></div>

      <div id="tabbit-chat-list" class="tabbit-chat-list"></div>

      <div class="tabbit-input-area">
        <textarea id="tabbit-user-input" placeholder="继续追问。Enter 发送，Shift + Enter 换行"></textarea>
        <button id="tabbit-send-btn">发送</button>
      </div>
    `;

    panel.querySelector('#tabbit-close-btn').addEventListener('click', closePanel);
    panel.querySelector('#tabbit-settings-btn').addEventListener('click', openSettings);
    panel.querySelector('#tabbit-summary-btn').addEventListener('click', runSummary);
    panel.querySelector('#tabbit-stop-btn').addEventListener('click', stopCurrentRequest);
    panel.querySelector('#tabbit-retry-btn').addEventListener('click', retryLastRequest);
    panel.querySelector('#tabbit-preview-btn').addEventListener('click', openPreviewModal);
    panel.querySelector('#tabbit-add-url-rule-btn').addEventListener('click', () => openAddUrlRuleModal());
    panel.querySelector('#tabbit-clear-btn').addEventListener('click', clearChat);
    panel.querySelector('#tabbit-copy-btn').addEventListener('click', copyChat);
    panel.querySelector('#tabbit-send-btn').addEventListener('click', sendUserMessage);

    const input = panel.querySelector('#tabbit-user-input');

    input.addEventListener('keydown', e => {
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendUserMessage();
      }
    });

    return panel;
  }

  function renderModelSelect() {
    if (!panelEl) return;

    const select = panelEl.querySelector('#tabbit-model-select');
    if (!select) return;

    select.innerHTML = '';

    normalizeModels(config.models).forEach(model => {
      const option = document.createElement('option');
      option.value = model.value;
      option.textContent = model.name || model.value;

      if (model.value === config.currentModel) {
        option.selected = true;
      }

      select.appendChild(option);
    });

    select.onchange = function () {
      config.currentModel = this.value;
      saveConfig();
    };
  }

  function setStatus(text, type = '', autoHideMs = 0) {
    if (!panelEl) return;

    const bar = panelEl.querySelector('#tabbit-status-bar');
    if (!bar) return;

    if (!text) {
      bar.textContent = '';
      bar.className = 'tabbit-status-bar tabbit-hidden';
      return;
    }

    bar.textContent = text;
    bar.className = `tabbit-status-bar tabbit-status-${type || 'normal'}`;

    if (autoHideMs) {
      setTimeout(() => {
        if (bar.textContent === text) setStatus('');
      }, autoHideMs);
    }
  }

  /******************************************************************
   * 总结与对话
   ******************************************************************/

  async function runSummary() {
    if (isRequesting) return;

    summaryStarted = true;
    currentPageUrl = location.href;

    if (!checkApiConfig()) return;

    const pageContent = extractPageContent();
    lastExtractedText = pageContent;

    if (!pageContent || pageContent.length < 80) {
      appendErrorMessage('没有提取到足够的网页正文。');
      setStatus('正文过短', 'error', 2500);
      return;
    }

    const modelLabel = getCurrentModelDisplayName();

    const fullPrompt = `${getPromptForCurrentPage()}

网页标题：
${document.title || ''}

网页 URL：
${currentPageUrl}

网页正文：
${pageContent}`;

    const userMsg = {
      role: 'user',
      content: fullPrompt
    };

    const payloadMessages = [...chatMessages, userMsg];

    lastRequestPayload = {
      messages: payloadMessages,
      modelLabel
    };

    try {
      setInputLoading(true);
      setStatus(`分析中 · ${pageContent.length} 字 · ${modelLabel}`, 'loading');

      const answer = await callChatApi(payloadMessages);

      chatMessages.push(userMsg);
      chatMessages.push({
        role: 'assistant',
        content: answer
      });

      appendAssistantMessage(answer, modelLabel);
      setStatus('完成', 'ok', 1200);
    } catch (err) {
      if (String(err?.message || '').includes('请求已取消')) {
        setStatus('已停止', 'normal', 1600);
      } else {
        appendErrorMessage(err.message || String(err));
        setStatus('请求失败，可重试', 'error');
      }
    } finally {
      setInputLoading(false);
    }
  }

  async function sendUserMessage() {
    if (isRequesting) return;
    if (!checkApiConfig()) return;
    if (!panelEl) return;

    const input = panelEl.querySelector('#tabbit-user-input');
    const text = input.value.trim();

    if (!text) return;

    input.value = '';
    appendUserMessage(text);

    const userMsg = {
      role: 'user',
      content: text
    };

    const modelLabel = getCurrentModelDisplayName();
    const payloadMessages = [...chatMessages, userMsg];

    lastRequestPayload = {
      messages: payloadMessages,
      modelLabel
    };

    try {
      setInputLoading(true);
      setStatus(`请求中 · ${modelLabel}`, 'loading');

      const answer = await callChatApi(payloadMessages);

      chatMessages.push(userMsg);
      chatMessages.push({
        role: 'assistant',
        content: answer
      });

      appendAssistantMessage(answer, modelLabel);
      setStatus('完成', 'ok', 1200);
    } catch (err) {
      if (String(err?.message || '').includes('请求已取消')) {
        setStatus('已停止', 'normal', 1600);
      } else {
        appendErrorMessage(err.message || String(err));
        setStatus('请求失败，可重试', 'error');
      }
    } finally {
      setInputLoading(false);
    }
  }

  async function retryLastRequest() {
    if (isRequesting) return;
    if (!lastRequestPayload) return;
    if (!checkApiConfig()) return;

    try {
      setInputLoading(true);
      setStatus(`重试中 · ${lastRequestPayload.modelLabel || getCurrentModelDisplayName()}`, 'loading');

      const answer = await callChatApi(lastRequestPayload.messages);

      const lastUser = [...lastRequestPayload.messages].reverse().find(m => m.role === 'user');

      if (lastUser && !chatMessages.includes(lastUser)) {
        chatMessages.push(lastUser);
      }

      chatMessages.push({
        role: 'assistant',
        content: answer
      });

      appendAssistantMessage(answer, lastRequestPayload.modelLabel || getCurrentModelDisplayName());
      setStatus('重试完成', 'ok', 1200);
    } catch (err) {
      if (String(err?.message || '').includes('请求已取消')) {
        setStatus('已停止', 'normal', 1600);
      } else {
        appendErrorMessage(err.message || String(err));
        setStatus('重试失败', 'error');
      }
    } finally {
      setInputLoading(false);
    }
  }

  function stopCurrentRequest() {
    if (!isRequesting) return;

    try {
      if (currentRequest && typeof currentRequest.abort === 'function') {
        currentRequest.abort();
      }

      if (typeof currentReject === 'function') {
        currentReject(new Error('请求已取消'));
      }
    } catch (err) {
      console.warn('[饺子 AI] 停止请求失败：', err);
    } finally {
      currentRequest = null;
      currentReject = null;
      setInputLoading(false);
      setStatus('已停止', 'normal', 1600);
    }
  }

  function checkApiConfig() {
    if (!config.apiUrl || !config.apiKey || !config.currentModel) {
      openSettings();
      setStatus('请先配置 API', 'error', 2500);
      return false;
    }

    return true;
  }

  function callChatApi(messages) {
    const body = {
      model: config.currentModel,
      messages,
      temperature: getCurrentTemperature(),
      max_tokens: getCurrentMaxTokens()
    };

    return new Promise((resolve, reject) => {
      currentReject = reject;

      currentRequest = GM_xmlhttpRequest({
        method: 'POST',
        url: config.apiUrl,
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${config.apiKey}`
        },
        data: JSON.stringify(body),
        timeout: 120000,

        onload(res) {
          currentRequest = null;
          currentReject = null;

          try {
            if (res.status < 200 || res.status >= 300) {
              reject(new Error(formatApiError(res.status, res.responseText)));
              return;
            }

            const data = JSON.parse(res.responseText);
            const content = data?.choices?.[0]?.message?.content;

            if (!content) {
              reject(new Error('API 响应格式异常：没有找到 choices[0].message.content。'));
              return;
            }

            resolve(content);
          } catch (err) {
            reject(err);
          }
        },

        onerror(err) {
          currentRequest = null;
          currentReject = null;
          reject(new Error('网络请求失败：' + JSON.stringify(err)));
        },

        ontimeout() {
          currentRequest = null;
          currentReject = null;
          reject(new Error('API 请求超时。'));
        }
      });
    });
  }

  function formatApiError(status, text) {
    const map = {
      400: '400：请求参数可能有误。',
      401: '401：API Key 可能不正确。',
      403: '403：当前 API Key 可能没有权限。',
      404: '404：API 地址或模型名可能错误。',
      429: '429：请求过于频繁或额度不足。',
      500: '500：服务商内部错误。',
      502: '502：服务商网关错误。',
      503: '503：服务暂不可用。'
    };

    return `${map[status] || `API 请求失败：${status}`}\n${text || ''}`;
  }

  function extractPageContent() {
    const clonedBody = document.body.cloneNode(true);

    const removeSelectors = [
      'script',
      'style',
      'noscript',
      'iframe',
      'svg',
      'canvas',
      'video',
      'audio',
      'nav',
      'header',
      'footer',
      'form',
      'button',
      'input',
      'textarea',
      'select',
      '#tabbit-ai-panel',
      '#tabbit-ai-float-btn',
      '#tabbit-settings-modal',
      '#tabbit-add-rule-modal',
      '#tabbit-preview-modal'
    ];

    removeSelectors.forEach(selector => {
      clonedBody.querySelectorAll(selector).forEach(el => el.remove());
    });

    const candidates = [
      'article',
      'main',
      '.rich_media_content',
      '#js_content',
      '.post-content',
      '.article-content',
      '.entry-content',
      '.content',
      '#content',
      '.post',
      '.article',
      '.articleBody',
      '.article-body'
    ];

    let bestText = '';

    for (const selector of candidates) {
      const nodes = clonedBody.querySelectorAll(selector);

      nodes.forEach(node => {
        const text = cleanText(node.innerText || node.textContent || '');
        if (text.length > bestText.length) bestText = text;
      });
    }

    if (!bestText || bestText.length < 200) {
      bestText = cleanText(clonedBody.innerText || clonedBody.textContent || '');
    }

    return bestText.substring(0, Number(config.extractMaxChars || 16000));
  }

  function cleanText(text) {
    return String(text || '')
      .replace(/\r/g, '')
      .replace(/[ \t]{2,}/g, ' ')
      .replace(/\n[ \t]+/g, '\n')
      .replace(/\n{3,}/g, '\n\n')
      .trim();
  }

  /******************************************************************
   * 消息展示
   ******************************************************************/

  function appendUserMessage(text) {
    appendMessage({
      type: 'user',
      label: '我',
      text
    });
  }

  function appendAssistantMessage(text, modelLabel) {
    appendMessage({
      type: 'assistant',
      label: modelLabel || getCurrentModelDisplayName(),
      text
    });
  }

  function appendErrorMessage(text) {
    appendMessage({
      type: 'error',
      label: '错误',
      text: `⚠️ ${text}`
    });
  }

  function appendMessage({ type, label, text }) {
    if (!panelEl) openPanel(false);

    const list = panelEl.querySelector('#tabbit-chat-list');
    if (!list) return;

    const item = document.createElement('div');
    item.className = `tabbit-msg tabbit-msg-${type}`;
    item.dataset.msgType = type;
    item.dataset.msgLabel = label || '';

    item.innerHTML = `
      <div class="tabbit-msg-label">${escapeHtml(label || '')}</div>
      <div class="tabbit-msg-body">${renderMarkdown(text)}</div>
    `;

    list.appendChild(item);
    list.scrollTop = list.scrollHeight;
  }

  function clearChat() {
    chatMessages = [];
    summaryStarted = false;
    lastRequestPayload = null;

    const list = panelEl?.querySelector('#tabbit-chat-list');
    if (list) list.innerHTML = '';

    setStatus('');
    updateRetryButton();
  }

  function copyChat() {
    if (!panelEl) return;

    const nodes = [
      ...panelEl.querySelectorAll('.tabbit-msg-user, .tabbit-msg-assistant')
    ];

    const text = nodes
      .map(el => {
        const label = el.dataset.msgLabel || '';
        const body = el.querySelector('.tabbit-msg-body')?.innerText?.trim() || '';
        return `${label}：\n${body}`;
      })
      .filter(Boolean)
      .join('\n\n');

    copyText(text || '');
    setStatus('已复制', 'ok', 1200);
  }

  function setInputLoading(loading) {
    isRequesting = loading;

    if (!panelEl) return;

    const sendBtn = panelEl.querySelector('#tabbit-send-btn');
    const summaryBtn = panelEl.querySelector('#tabbit-summary-btn');
    const stopBtn = panelEl.querySelector('#tabbit-stop-btn');
    const retryBtn = panelEl.querySelector('#tabbit-retry-btn');
    const input = panelEl.querySelector('#tabbit-user-input');

    if (sendBtn) {
      sendBtn.disabled = loading;
      sendBtn.textContent = loading ? '等待' : '发送';
    }

    if (summaryBtn) summaryBtn.disabled = loading;
    if (stopBtn) stopBtn.disabled = !loading;
    if (retryBtn) retryBtn.disabled = loading || !lastRequestPayload;
    if (input) input.disabled = loading;
  }

  function updateRetryButton() {
    if (!panelEl) return;
    const retryBtn = panelEl.querySelector('#tabbit-retry-btn');
    if (retryBtn) retryBtn.disabled = isRequesting || !lastRequestPayload;
  }

  /******************************************************************
   * 加入网址规则弹窗
   ******************************************************************/

  function openAddUrlRuleModal() {
    if (!addRuleModalEl) {
      addRuleModalEl = createAddRuleModal();
      document.body.appendChild(addRuleModalEl);
    }

    renderAddRuleModal();
    addRuleModalEl.classList.remove('tabbit-hidden');
  }

  function closeAddRuleModal() {
    if (addRuleModalEl) addRuleModalEl.classList.add('tabbit-hidden');
  }

  function createAddRuleModal() {
    const modal = document.createElement('div');
    modal.id = 'tabbit-add-rule-modal';

    modal.innerHTML = `
      <div class="tabbit-small-card">
        <div class="tabbit-settings-header">
          <div class="tabbit-settings-title">加入当前网址</div>
          <button id="tabbit-add-rule-close" class="tabbit-icon-btn">×</button>
        </div>

        <div class="tabbit-settings-body">
          <div class="tabbit-field">
            <span>选择规则</span>
            <div id="tabbit-rule-candidates" class="tabbit-rule-candidates"></div>
          </div>

          <label class="tabbit-field">
            <span>自定义规则</span>
            <input id="tabbit-custom-rule-input" type="text">
            <small>不带 * 时按前缀匹配；带 * 时按通配符匹配。</small>
          </label>

          <label class="tabbit-field">
            <span>绑定提示词模板，可选</span>
            <select id="tabbit-add-rule-template"></select>
          </label>
        </div>

        <div class="tabbit-settings-footer">
          <button id="tabbit-confirm-add-rule" class="tabbit-primary-btn">添加</button>
          <button id="tabbit-cancel-add-rule" class="tabbit-secondary-btn">取消</button>
        </div>
      </div>
    `;

    modal.querySelector('#tabbit-add-rule-close').addEventListener('click', closeAddRuleModal);
    modal.querySelector('#tabbit-cancel-add-rule').addEventListener('click', closeAddRuleModal);

    modal.querySelector('#tabbit-confirm-add-rule').addEventListener('click', () => {
      const input = modal.querySelector('#tabbit-custom-rule-input');
      const templateSelect = modal.querySelector('#tabbit-add-rule-template');
      const rule = input.value.trim();
      const templateId = templateSelect.value;

      if (!rule) return;

      addUrlRule(rule, templateId);
      closeAddRuleModal();
    });

    modal.addEventListener('click', e => {
      if (e.target === modal) closeAddRuleModal();
    });

    return modal;
  }

  function renderAddRuleModal() {
    const candidates = buildUrlRuleCandidates(location.href);
    const box = addRuleModalEl.querySelector('#tabbit-rule-candidates');
    const input = addRuleModalEl.querySelector('#tabbit-custom-rule-input');
    const templateSelect = addRuleModalEl.querySelector('#tabbit-add-rule-template');

    box.innerHTML = '';

    candidates.forEach((rule, index) => {
      const item = document.createElement('label');
      item.className = 'tabbit-rule-candidate';

      item.innerHTML = `
        <input type="radio" name="tabbit-rule-candidate" ${index === 0 ? 'checked' : ''}>
        <span>${escapeHtml(rule)}</span>
      `;

      item.querySelector('input').addEventListener('change', () => {
        input.value = rule;
      });

      box.appendChild(item);
    });

    input.value = candidates[0] || '';

    templateSelect.innerHTML = `<option value="">使用默认提示词</option>`;
    config.promptTemplates.forEach(t => {
      const option = document.createElement('option');
      option.value = t.id;
      option.textContent = t.name;
      templateSelect.appendChild(option);
    });
  }

  /******************************************************************
   * 正文预览
   ******************************************************************/

  function openPreviewModal() {
    if (!previewModalEl) {
      previewModalEl = createPreviewModal();
      document.body.appendChild(previewModalEl);
    }

    const text = lastExtractedText || extractPageContent();
    lastExtractedText = text;

    previewModalEl.querySelector('#tabbit-preview-count').textContent = `${text.length} 字符`;
    previewModalEl.querySelector('#tabbit-preview-text').value = text;

    previewModalEl.classList.remove('tabbit-hidden');
  }

  function closePreviewModal() {
    if (previewModalEl) previewModalEl.classList.add('tabbit-hidden');
  }

  function createPreviewModal() {
    const modal = document.createElement('div');
    modal.id = 'tabbit-preview-modal';

    modal.innerHTML = `
      <div class="tabbit-preview-card">
        <div class="tabbit-settings-header">
          <div class="tabbit-settings-title">正文预览 <span id="tabbit-preview-count"></span></div>
          <button id="tabbit-preview-close" class="tabbit-icon-btn">×</button>
        </div>

        <div class="tabbit-settings-body">
          <textarea id="tabbit-preview-text" readonly></textarea>
        </div>

        <div class="tabbit-settings-footer">
          <button id="tabbit-copy-preview" class="tabbit-secondary-btn">复制正文</button>
          <button id="tabbit-close-preview" class="tabbit-primary-btn">关闭</button>
        </div>
      </div>
    `;

    modal.querySelector('#tabbit-preview-close').addEventListener('click', closePreviewModal);
    modal.querySelector('#tabbit-close-preview').addEventListener('click', closePreviewModal);
    modal.querySelector('#tabbit-copy-preview').addEventListener('click', () => {
      copyText(modal.querySelector('#tabbit-preview-text').value || '');
      setStatus('正文已复制', 'ok', 1200);
    });

    modal.addEventListener('click', e => {
      if (e.target === modal) closePreviewModal();
    });

    return modal;
  }

  /******************************************************************
   * 设置页面
   ******************************************************************/

  function openSettings() {
    if (!settingsEl) {
      settingsEl = createSettingsModal();
      document.body.appendChild(settingsEl);
    }

    fillSettingsForm();
    settingsEl.classList.remove('tabbit-hidden');
  }

  function closeSettings() {
    if (settingsEl) settingsEl.classList.add('tabbit-hidden');
  }

  function createSettingsModal() {
    const modal = document.createElement('div');
    modal.id = 'tabbit-settings-modal';

    modal.innerHTML = `
      <div class="tabbit-settings-card">
        <div class="tabbit-settings-header">
          <div class="tabbit-settings-title">⚙️ 饺子 AI 设置</div>
          <button id="tabbit-settings-close" class="tabbit-icon-btn">×</button>
        </div>

        <div class="tabbit-settings-body">
          <label class="tabbit-field">
            <span>API 地址</span>
            <input id="tabbit-set-api-url" type="text" placeholder="https://api.openai.com/v1/chat/completions">
          </label>

          <label class="tabbit-field">
            <span>API Key</span>
            <input id="tabbit-set-api-key" type="password" placeholder="sk-xxxx">
            <small>配置只保存到油猴全局存储 GM_getValue / GM_setValue。</small>
          </label>

          <div class="tabbit-settings-actions">
            <button id="tabbit-test-api" class="tabbit-secondary-btn" type="button">测试 API</button>
            <button id="tabbit-fetch-models" class="tabbit-secondary-btn" type="button">获取模型列表</button>
          </div>

          <div class="tabbit-row-2">
            <label class="tabbit-field">
              <span>默认 temperature</span>
              <input id="tabbit-set-temperature" type="number" step="0.1" min="0" max="2">
            </label>

            <label class="tabbit-field">
              <span>默认 max_tokens</span>
              <input id="tabbit-set-max-tokens" type="number" min="100">
            </label>
          </div>

          <div class="tabbit-row-2">
            <label class="tabbit-field">
              <span>面板宽度 px</span>
              <input id="tabbit-set-panel-width" type="number" min="320" max="900">
            </label>

            <label class="tabbit-field">
              <span>发送正文最大字符数</span>
              <input id="tabbit-set-extract-max" type="number" min="1000" max="80000">
            </label>
          </div>

          <label class="tabbit-field tabbit-checkbox-field">
            <input id="tabbit-set-auto-run" type="checkbox">
            <span>打开匹配网址时自动弹出并总结</span>
          </label>

          <div class="tabbit-section-title">模型预设</div>
          <div id="tabbit-model-list" class="tabbit-model-list"></div>
          <div class="tabbit-settings-actions">
            <button id="tabbit-add-model" class="tabbit-secondary-btn" type="button">+ 添加模型</button>
          </div>

          <div class="tabbit-section-title">提示词模板</div>
          <label class="tabbit-field">
            <span>默认模板</span>
            <select id="tabbit-default-template"></select>
          </label>
          <div id="tabbit-template-list" class="tabbit-template-list"></div>
          <div class="tabbit-settings-actions">
            <button id="tabbit-add-template" class="tabbit-secondary-btn" type="button">+ 添加模板</button>
          </div>

          <div class="tabbit-section-title">指定网址</div>
          <small class="tabbit-help">一行一条规则。不带 * 时按前缀匹配；带 * 时按通配符匹配。每条规则可绑定提示词模板。</small>
          <div id="tabbit-url-rule-list" class="tabbit-url-rule-list"></div>
          <div class="tabbit-settings-actions">
            <button id="tabbit-settings-add-current-url" class="tabbit-secondary-btn" type="button">加入当前网址</button>
            <button id="tabbit-settings-add-empty-url" class="tabbit-secondary-btn" type="button">+ 添加空规则</button>
            <button id="tabbit-settings-dedupe-url" class="tabbit-secondary-btn" type="button">去重整理</button>
          </div>

          <div class="tabbit-section-title">配置文件</div>
          <div class="tabbit-settings-actions">
            <button id="tabbit-export-file" class="tabbit-secondary-btn" type="button">导出配置文件</button>
            <button id="tabbit-import-file" class="tabbit-secondary-btn" type="button">导入配置文件</button>
            <button id="tabbit-reset-config" class="tabbit-danger-btn" type="button">重置配置</button>
          </div>
        </div>

        <div class="tabbit-settings-footer">
          <button id="tabbit-save-settings" class="tabbit-primary-btn">保存设置</button>
          <button id="tabbit-cancel-settings" class="tabbit-secondary-btn">取消</button>
        </div>
      </div>
    `;

    modal.querySelector('#tabbit-settings-close').addEventListener('click', closeSettings);
    modal.querySelector('#tabbit-cancel-settings').addEventListener('click', closeSettings);
    modal.querySelector('#tabbit-save-settings').addEventListener('click', saveSettingsFromForm);

    modal.querySelector('#tabbit-add-model').addEventListener('click', () => {
      syncModelsFromSettings();
      config.models.push({
        name: '新模型',
        value: '',
        temperature: '',
        maxTokens: ''
      });
      renderSettingsModels();
    });

    modal.querySelector('#tabbit-add-template').addEventListener('click', () => {
      syncTemplatesFromSettings();
      config.promptTemplates.push({
        id: makeId('tpl'),
        name: '新模板',
        text: '请总结这个网页的核心内容。'
      });
      renderSettingsTemplates();
      renderSettingsUrlRules();
    });

    modal.querySelector('#tabbit-settings-add-current-url').addEventListener('click', () => {
      openAddUrlRuleModal();
    });

    modal.querySelector('#tabbit-settings-add-empty-url').addEventListener('click', () => {
      syncUrlRulesFromSettings();
      config.urlRules.push('');
      renderSettingsUrlRules();
    });

    modal.querySelector('#tabbit-settings-dedupe-url').addEventListener('click', () => {
      syncUrlRulesFromSettings();
      config.urlRules = normalizeUrlRules(config.urlRules);
      config.rulePromptBindings = config.rulePromptBindings.filter(b => config.urlRules.includes(b.rule));
      renderSettingsUrlRules();
    });

    modal.querySelector('#tabbit-test-api').addEventListener('click', testApiConnection);
    modal.querySelector('#tabbit-fetch-models').addEventListener('click', fetchModelsFromApi);

    modal.querySelector('#tabbit-export-file').addEventListener('click', exportConfigToFile);
    modal.querySelector('#tabbit-import-file').addEventListener('click', importConfigFromFile);
    modal.querySelector('#tabbit-reset-config').addEventListener('click', resetConfig);

    modal.addEventListener('click', e => {
      if (e.target === modal) closeSettings();
    });

    return modal;
  }

  function fillSettingsForm() {
    if (!settingsEl) return;

    settingsEl.querySelector('#tabbit-set-api-url').value = config.apiUrl || '';
    settingsEl.querySelector('#tabbit-set-api-key').value = config.apiKey || '';
    settingsEl.querySelector('#tabbit-set-temperature').value = config.temperature ?? 0.7;
    settingsEl.querySelector('#tabbit-set-max-tokens').value = config.maxTokens ?? 2000;
    settingsEl.querySelector('#tabbit-set-panel-width').value = config.panel?.width || 460;
    settingsEl.querySelector('#tabbit-set-extract-max').value = config.extractMaxChars || 16000;
    settingsEl.querySelector('#tabbit-set-auto-run').checked = !!config.autoRun;

    renderSettingsModels();
    renderSettingsTemplates();
    renderSettingsUrlRules();
  }

  function renderSettingsModels() {
    if (!settingsEl) return;

    const box = settingsEl.querySelector('#tabbit-model-list');
    box.innerHTML = '';

    config.models.forEach((model, index) => {
      const row = document.createElement('div');
      row.className = 'tabbit-model-row';

      row.innerHTML = `
        <input class="tabbit-model-name" type="text" placeholder="显示名称" value="${escapeAttr(model.name || '')}">
        <input class="tabbit-model-value" type="text" placeholder="模型名" value="${escapeAttr(model.value || '')}">
        <input class="tabbit-model-temp" type="number" step="0.1" placeholder="temp" value="${escapeAttr(model.temperature ?? '')}">
        <input class="tabbit-model-tokens" type="number" placeholder="tokens" value="${escapeAttr(model.maxTokens ?? '')}">
        <label class="tabbit-current-model">
          <input type="radio" name="tabbit-current-model" ${model.value === config.currentModel ? 'checked' : ''}>
          当前
        </label>
        <button class="tabbit-remove-model" type="button">×</button>
      `;

      row.querySelector('.tabbit-remove-model').addEventListener('click', () => {
        syncModelsFromSettings();

        config.models.splice(index, 1);

        if (!config.models.length) {
          config.models.push({
            name: 'mimo-v2-flash',
            value: 'mimo-v2-flash',
            temperature: '',
            maxTokens: ''
          });
        }

        if (!config.models.some(m => m.value === config.currentModel)) {
          config.currentModel = config.models[0].value;
        }

        renderSettingsModels();
      });

      box.appendChild(row);
    });
  }

  function syncModelsFromSettings() {
    if (!settingsEl) return;

    const rows = [...settingsEl.querySelectorAll('.tabbit-model-row')];
    let nextCurrent = config.currentModel;

    const models = rows
      .map(row => {
        const name = row.querySelector('.tabbit-model-name').value.trim();
        const value = row.querySelector('.tabbit-model-value').value.trim();
        const temperature = row.querySelector('.tabbit-model-temp').value.trim();
        const maxTokens = row.querySelector('.tabbit-model-tokens').value.trim();
        const checked = row.querySelector('input[type="radio"]').checked;

        if (checked && value) nextCurrent = value;

        return {
          name: name || value,
          value,
          temperature,
          maxTokens
        };
      })
      .filter(model => model.value);

    config.models = normalizeModels(models);

    if (!config.models.some(m => m.value === nextCurrent)) {
      nextCurrent = config.models[0]?.value || '';
    }

    config.currentModel = nextCurrent;
  }

  function renderSettingsTemplates() {
    if (!settingsEl) return;

    const select = settingsEl.querySelector('#tabbit-default-template');
    const box = settingsEl.querySelector('#tabbit-template-list');

    select.innerHTML = '';
    box.innerHTML = '';

    config.promptTemplates.forEach(t => {
      const option = document.createElement('option');
      option.value = t.id;
      option.textContent = t.name;
      option.selected = t.id === config.defaultPromptTemplateId;
      select.appendChild(option);
    });

    config.promptTemplates.forEach((tpl, index) => {
      const row = document.createElement('div');
      row.className = 'tabbit-template-row';
      row.dataset.templateId = tpl.id;

      row.innerHTML = `
        <div class="tabbit-template-head">
          <input class="tabbit-template-name" type="text" placeholder="模板名称" value="${escapeAttr(tpl.name)}">
          <button class="tabbit-remove-template" type="button">×</button>
        </div>
        <textarea class="tabbit-template-text" rows="5">${escapeHtml(tpl.text)}</textarea>
      `;

      row.querySelector('.tabbit-remove-template').addEventListener('click', () => {
        syncTemplatesFromSettings();

        if (config.promptTemplates.length <= 1) {
          alert('至少保留一个提示词模板。');
          return;
        }

        const removed = config.promptTemplates[index];
        config.promptTemplates.splice(index, 1);

        if (removed?.id === config.defaultPromptTemplateId) {
          config.defaultPromptTemplateId = config.promptTemplates[0]?.id || 'default';
        }

        config.rulePromptBindings = config.rulePromptBindings.filter(b => b.templateId !== removed?.id);

        renderSettingsTemplates();
        renderSettingsUrlRules();
      });

      box.appendChild(row);
    });

    select.onchange = () => {
      config.defaultPromptTemplateId = select.value;
    };
  }

  function syncTemplatesFromSettings() {
    if (!settingsEl) return;

    const rows = [...settingsEl.querySelectorAll('.tabbit-template-row')];

    config.promptTemplates = normalizePromptTemplates(
      rows.map(row => ({
        id: row.dataset.templateId || makeId('tpl'),
        name: row.querySelector('.tabbit-template-name').value.trim(),
        text: row.querySelector('.tabbit-template-text').value.trim()
      }))
    );

    const defaultSelect = settingsEl.querySelector('#tabbit-default-template');
    if (defaultSelect?.value) {
      config.defaultPromptTemplateId = defaultSelect.value;
    }

    if (!config.promptTemplates.some(t => t.id === config.defaultPromptTemplateId)) {
      config.defaultPromptTemplateId = config.promptTemplates[0]?.id || 'default';
    }
  }

  function renderSettingsUrlRules() {
    if (!settingsEl) return;

    const box = settingsEl.querySelector('#tabbit-url-rule-list');
    box.innerHTML = '';

    config.urlRules.forEach((rule, index) => {
      const row = document.createElement('div');
      row.className = 'tabbit-url-rule-row';

      const matched = rule && testUrlRule(location.href, rule);

      row.innerHTML = `
        <input class="tabbit-url-rule-input" type="text" placeholder="https://example.com/path/*" value="${escapeAttr(rule)}">
        <select class="tabbit-url-rule-template">
          <option value="">默认模板</option>
        </select>
        <span class="tabbit-rule-match ${matched ? 'matched' : ''}">${matched ? '匹配当前页' : ''}</span>
        <button class="tabbit-remove-url-rule" type="button">×</button>
      `;

      const select = row.querySelector('.tabbit-url-rule-template');
      const currentTemplateId = getTemplateIdForRule(rule);

      config.promptTemplates.forEach(t => {
        const option = document.createElement('option');
        option.value = t.id;
        option.textContent = t.name;
        option.selected = t.id === currentTemplateId;
        select.appendChild(option);
      });

      row.querySelector('.tabbit-remove-url-rule').addEventListener('click', () => {
        syncUrlRulesFromSettings();

        const removedRule = config.urlRules[index];
        config.urlRules.splice(index, 1);
        config.rulePromptBindings = config.rulePromptBindings.filter(b => b.rule !== removedRule);

        renderSettingsUrlRules();
      });

      box.appendChild(row);
    });
  }

  function syncUrlRulesFromSettings() {
    if (!settingsEl) return;

    const rows = [...settingsEl.querySelectorAll('.tabbit-url-rule-row')];
    const rules = [];
    const bindings = [];

    rows.forEach(row => {
      const rule = row.querySelector('.tabbit-url-rule-input').value.trim();
      const templateId = row.querySelector('.tabbit-url-rule-template').value;

      if (!rule) return;

      rules.push(rule);

      if (templateId) {
        bindings.push({
          rule,
          templateId
        });
      }
    });

    config.urlRules = normalizeUrlRules(rules);
    config.rulePromptBindings = normalizeRulePromptBindings(bindings);
  }

  function saveSettingsFromForm() {
    syncModelsFromSettings();
    syncTemplatesFromSettings();
    syncUrlRulesFromSettings();

    config.apiUrl = settingsEl.querySelector('#tabbit-set-api-url').value.trim();
    config.apiKey = settingsEl.querySelector('#tabbit-set-api-key').value.trim();
    config.temperature = Number(settingsEl.querySelector('#tabbit-set-temperature').value || 0.7);
    config.maxTokens = Number(settingsEl.querySelector('#tabbit-set-max-tokens').value || 2000);
    config.autoRun = settingsEl.querySelector('#tabbit-set-auto-run').checked;
    config.extractMaxChars = Number(settingsEl.querySelector('#tabbit-set-extract-max').value || 16000);

    config.panel = {
      ...config.panel,
      width: Math.max(320, Number(settingsEl.querySelector('#tabbit-set-panel-width').value || 460))
    };

    if (!config.currentModel && config.models.length) {
      config.currentModel = config.models[0].value;
    }

    saveConfig();

    renderModelSelect();
    applyFloatButtonPosition();

    if (panelEl) {
      panelEl.style.width = config.panel.width + 'px';
    }

    closeSettings();
    setStatus('设置已保存', 'ok', 1200);
  }

  /******************************************************************
   * API 测试与模型拉取
   ******************************************************************/

  async function testApiConnection() {
    syncModelsFromSettings();

    config.apiUrl = settingsEl.querySelector('#tabbit-set-api-url').value.trim();
    config.apiKey = settingsEl.querySelector('#tabbit-set-api-key').value.trim();
    config.temperature = Number(settingsEl.querySelector('#tabbit-set-temperature').value || 0.7);
    config.maxTokens = Number(settingsEl.querySelector('#tabbit-set-max-tokens').value || 2000);

    if (!config.apiUrl || !config.apiKey || !config.currentModel) {
      alert('请先填写 API 地址、API Key，并设置当前模型。');
      return;
    }

    try {
      const btn = settingsEl.querySelector('#tabbit-test-api');
      btn.disabled = true;
      btn.textContent = '测试中…';

      await callChatApi([
        {
          role: 'user',
          content: '请只回复 OK'
        }
      ]);

      alert('API 测试成功。');
    } catch (err) {
      alert('API 测试失败：\n\n' + (err.message || String(err)));
    } finally {
      const btn = settingsEl.querySelector('#tabbit-test-api');
      btn.disabled = false;
      btn.textContent = '测试 API';
      setInputLoading(false);
    }
  }

  function buildModelsUrl(apiUrl) {
    const url = new URL(apiUrl);

    if (/\/chat\/completions\/?$/i.test(url.pathname)) {
      url.pathname = url.pathname.replace(/\/chat\/completions\/?$/i, '/models');
      return url.toString();
    }

    if (/\/completions\/?$/i.test(url.pathname)) {
      url.pathname = url.pathname.replace(/\/completions\/?$/i, '/models');
      return url.toString();
    }

    url.pathname = url.pathname.replace(/\/+$/, '') + '/models';
    return url.toString();
  }

  function fetchModelsFromApi() {
    config.apiUrl = settingsEl.querySelector('#tabbit-set-api-url').value.trim();
    config.apiKey = settingsEl.querySelector('#tabbit-set-api-key').value.trim();

    if (!config.apiUrl || !config.apiKey) {
      alert('请先填写 API 地址和 API Key。');
      return;
    }

    let modelsUrl = '';

    try {
      modelsUrl = buildModelsUrl(config.apiUrl);
    } catch (err) {
      alert('API 地址格式不正确。');
      return;
    }

    const btn = settingsEl.querySelector('#tabbit-fetch-models');
    btn.disabled = true;
    btn.textContent = '获取中…';

    GM_xmlhttpRequest({
      method: 'GET',
      url: modelsUrl,
      headers: {
        Authorization: `Bearer ${config.apiKey}`
      },
      timeout: 60000,

      onload(res) {
        btn.disabled = false;
        btn.textContent = '获取模型列表';

        try {
          if (res.status < 200 || res.status >= 300) {
            alert(`获取失败：${res.status}\n${res.responseText || ''}`);
            return;
          }

          const data = JSON.parse(res.responseText);
          const ids = Array.isArray(data?.data)
            ? data.data.map(x => x.id || x.name || x.model).filter(Boolean)
            : [];

          if (!ids.length) {
            alert('没有从响应中识别到模型列表。');
            return;
          }

          syncModelsFromSettings();

          ids.forEach(id => {
            if (!config.models.some(m => m.value === id)) {
              config.models.push({
                name: id,
                value: id,
                temperature: '',
                maxTokens: ''
              });
            }
          });

          if (!config.currentModel) {
            config.currentModel = config.models[0]?.value || '';
          }

          renderSettingsModels();
          alert(`已获取 ${ids.length} 个模型。`);
        } catch (err) {
          alert('解析模型列表失败：' + err.message);
        }
      },

      onerror(err) {
        btn.disabled = false;
        btn.textContent = '获取模型列表';
        alert('获取模型列表失败：' + JSON.stringify(err));
      },

      ontimeout() {
        btn.disabled = false;
        btn.textContent = '获取模型列表';
        alert('获取模型列表超时。');
      }
    });
  }

  /******************************************************************
   * 文件导入导出
   ******************************************************************/

  function exportConfigToFile() {
    try {
      saveConfig();

      const data = JSON.stringify(config, null, 2);

      const blob = new Blob([data], {
        type: 'application/json;charset=utf-8'
      });

      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');

      const date = new Date();
      const pad = n => String(n).padStart(2, '0');

      const fileName =
        `tabbit-ai-config-${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(date.getDate())}-${pad(date.getHours())}${pad(date.getMinutes())}.json`;

      a.href = url;
      a.download = fileName;

      document.body.appendChild(a);
      a.click();

      document.body.removeChild(a);
      URL.revokeObjectURL(url);
    } catch (err) {
      alert('导出失败：' + err.message);
    }
  }

  function importConfigFromFile() {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.json,application/json';
    input.style.cssText = 'position:fixed;left:-9999px;top:-9999px;';

    document.body.appendChild(input);

    input.addEventListener('change', () => {
      const file = input.files && input.files[0];

      if (!file) {
        input.remove();
        return;
      }

      const reader = new FileReader();

      reader.onload = e => {
        try {
          const imported = JSON.parse(e.target.result);

          config = mergeConfig(clone(DEFAULT_CONFIG), imported);
          saveConfig();

          if (settingsEl) fillSettingsForm();
          if (panelEl) renderModelSelect();

          applyFloatButtonPosition();

          alert('配置导入成功。');
        } catch (err) {
          alert('导入失败：JSON 格式错误。\n\n' + err.message);
        } finally {
          input.remove();
        }
      };

      reader.onerror = () => {
        alert('读取文件失败。');
        input.remove();
      };

      reader.readAsText(file, 'utf-8');
    });

    input.click();
  }

  /******************************************************************
   * 工具函数
   ******************************************************************/

  function copyText(text) {
    if (typeof GM_setClipboard === 'function') {
      GM_setClipboard(text);
      return;
    }

    if (navigator.clipboard) {
      navigator.clipboard.writeText(text);
      return;
    }

    const ta = document.createElement('textarea');
    ta.value = text;
    ta.style.cssText = 'position:fixed;left:-9999px;top:-9999px;';
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    ta.remove();
  }

  function renderMarkdown(text) {
    let html = escapeHtml(text || '');

    html = html.replace(/^###### (.+)$/gm, '<h6>$1</h6>');
    html = html.replace(/^##### (.+)$/gm, '<h5>$1</h5>');
    html = html.replace(/^#### (.+)$/gm, '<h4>$1</h4>');
    html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
    html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
    html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');

    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
    html = html.replace(/`([^`]+)`/g, '<code>$1</code>');

    html = html.replace(
      /\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g,
      '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
    );

    html = html
      .split('\n')
      .map(line => {
        if (/^<h\d/.test(line)) return line;

        if (/^\s*[-*]\s+/.test(line)) {
          return `<div class="tabbit-list-item">• ${line.replace(/^\s*[-*]\s+/, '')}</div>`;
        }

        if (!line.trim()) return '<br>';

        return `<p>${line}</p>`;
      })
      .join('');

    return html;
  }

  function escapeHtml(str) {
    return String(str)
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;');
  }

  function escapeAttr(str) {
    return escapeHtml(str).replace(/`/g, '&#096;');
  }

  /******************************************************************
   * 样式
   ******************************************************************/

  function createStyles() {
    if (document.querySelector('#tabbit-ai-style')) return;

    const style = document.createElement('style');
    style.id = 'tabbit-ai-style';

    style.textContent = `
      #tabbit-ai-float-btn {
        position: fixed;
        z-index: 2147483645;
        width: 28px;
        height: 72px;
        border: none;
        padding: 0;
        margin: 0;
        cursor: pointer;
        background: linear-gradient(160deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
        transition: opacity .2s ease, width .2s ease, filter .2s ease, box-shadow .2s ease;
        user-select: none;
        writing-mode: vertical-rl;
        letter-spacing: 2px;
      }

      #tabbit-ai-float-btn.tabbit-float-right {
        border-radius: 10px 0 0 10px;
      }

      #tabbit-ai-float-btn.tabbit-float-left {
        border-radius: 0 10px 10px 0;
      }

      #tabbit-ai-float-btn:hover {
        opacity: 1 !important;
        width: 38px;
        filter: brightness(1.05);
        box-shadow: 0 6px 22px rgba(0, 0, 0, .25);
      }

      #tabbit-ai-float-btn span {
        pointer-events: none;
      }

      body.tabbit-dragging,
      body.tabbit-dragging * {
        cursor: grabbing !important;
      }

      #tabbit-ai-panel {
        position: fixed;
        top: 20px;
        right: 20px;
        max-width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
        background: #fff;
        color: #222;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,.18);
        z-index: 2147483646;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      .tabbit-hidden {
        display: none !important;
      }

      .tabbit-header,
      .tabbit-settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
      }

      .tabbit-title,
      .tabbit-settings-title {
        font-weight: 700;
        font-size: 16px;
      }

      .tabbit-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .tabbit-model-select {
        max-width: 150px;
        border: none;
        border-radius: 8px;
        padding: 5px 8px;
        font-size: 12px;
      }

      .tabbit-icon-btn {
        border: none;
        border-radius: 8px;
        background: rgba(255,255,255,.18);
        color: inherit;
        cursor: pointer;
        font-size: 16px;
        line-height: 1;
        padding: 6px 9px;
      }

      .tabbit-icon-btn:hover {
        background: rgba(255,255,255,.28);
      }

      .tabbit-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        padding: 9px 10px;
        border-bottom: 1px solid #eee;
        background: #fafafa;
      }

      .tabbit-primary-btn,
      .tabbit-secondary-btn,
      .tabbit-danger-btn {
        border: none;
        border-radius: 8px;
        padding: 7px 10px;
        cursor: pointer;
        font-size: 13px;
      }

      .tabbit-primary-btn {
        background: #667eea;
        color: #fff;
      }

      .tabbit-primary-btn:hover {
        background: #5a6fd6;
      }

      .tabbit-secondary-btn {
        background: #f0f0f5;
        color: #444;
      }

      .tabbit-secondary-btn:hover {
        background: #e6e6ef;
      }

      .tabbit-danger-btn {
        background: #fff1f1;
        color: #c00000;
        border: 1px solid #ffcaca;
      }

      .tabbit-danger-btn:hover {
        background: #ffe1e1;
      }

      .tabbit-primary-btn:disabled,
      .tabbit-secondary-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
      }

      .tabbit-status-bar {
        padding: 6px 12px;
        font-size: 12px;
        border-bottom: 1px solid #eee;
        background: #f8f8fc;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .tabbit-status-loading {
        color: #5a43c8;
        background: #f4f1ff;
      }

      .tabbit-status-ok {
        color: #0d7a3a;
        background: #effaf3;
      }

      .tabbit-status-error {
        color: #b00000;
        background: #fff1f1;
      }

      .tabbit-chat-list {
        flex: 1;
        overflow-y: auto;
        padding: 14px;
        background: #f7f8fb;
      }

      .tabbit-msg {
        margin-bottom: 12px;
      }

      .tabbit-msg-label {
        font-size: 12px;
        color: #777;
        margin-bottom: 4px;
      }

      .tabbit-msg-body {
        border-radius: 12px;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.65;
        word-break: break-word;
      }

      .tabbit-msg-body p {
        margin: 6px 0;
      }

      .tabbit-msg-body h1,
      .tabbit-msg-body h2,
      .tabbit-msg-body h3,
      .tabbit-msg-body h4 {
        margin: 10px 0 6px;
        line-height: 1.4;
      }

      .tabbit-msg-body code {
        background: #ececf4;
        padding: 2px 5px;
        border-radius: 4px;
        color: #c7254e;
      }

      .tabbit-msg-body a {
        color: #667eea;
      }

      .tabbit-list-item {
        margin: 4px 0;
      }

      .tabbit-msg-user .tabbit-msg-body {
        background: #e8f0ff;
        border: 1px solid #d8e4ff;
      }

      .tabbit-msg-assistant .tabbit-msg-body {
        background: #fff;
        border: 1px solid #e9e9ef;
      }

      .tabbit-msg-error .tabbit-msg-body {
        background: #fff1f1;
        border: 1px solid #ffc9c9;
        color: #b00000;
      }

      .tabbit-input-area {
        display: flex;
        gap: 8px;
        padding: 12px;
        background: #fff;
        border-top: 1px solid #eee;
      }

      #tabbit-user-input {
        flex: 1;
        resize: none;
        min-height: 42px;
        max-height: 120px;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 9px 10px;
        font-size: 14px;
        line-height: 1.5;
        outline: none;
      }

      #tabbit-user-input:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102,126,234,.12);
      }

      #tabbit-send-btn {
        width: 72px;
        border: none;
        border-radius: 10px;
        background: #667eea;
        color: #fff;
        cursor: pointer;
      }

      #tabbit-send-btn:disabled {
        opacity: .65;
        cursor: not-allowed;
      }

      #tabbit-settings-modal,
      #tabbit-add-rule-modal,
      #tabbit-preview-modal {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.35);
        z-index: 2147483647;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      }

      .tabbit-settings-card {
        width: 860px;
        max-width: calc(100vw - 36px);
        max-height: 88vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0,0,0,.28);
      }

      .tabbit-small-card {
        width: 620px;
        max-width: calc(100vw - 36px);
        max-height: 86vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0,0,0,.28);
      }

      .tabbit-preview-card {
        width: 820px;
        max-width: calc(100vw - 36px);
        height: 80vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 12px 40px rgba(0,0,0,.28);
      }

      .tabbit-settings-body {
        padding: 16px 18px;
        overflow-y: auto;
      }

      .tabbit-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 14px;
        font-size: 13px;
        color: #444;
      }

      .tabbit-field small,
      .tabbit-help {
        color: #888;
        line-height: 1.5;
        font-size: 12px;
      }

      .tabbit-checkbox-field {
        flex-direction: row;
        align-items: center;
      }

      .tabbit-checkbox-field input {
        width: auto !important;
      }

      .tabbit-field input,
      .tabbit-field textarea,
      .tabbit-field select,
      .tabbit-url-rule-row input,
      .tabbit-url-rule-row select,
      .tabbit-model-row input,
      .tabbit-template-row input,
      .tabbit-template-row textarea {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 8px 9px;
        font-size: 13px;
        outline: none;
        font-family: inherit;
      }

      .tabbit-field textarea,
      .tabbit-template-row textarea {
        resize: vertical;
      }

      .tabbit-field input:focus,
      .tabbit-field textarea:focus,
      .tabbit-field select:focus,
      .tabbit-url-rule-row input:focus,
      .tabbit-url-rule-row select:focus,
      .tabbit-model-row input:focus,
      .tabbit-template-row input:focus,
      .tabbit-template-row textarea:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102,126,234,.12);
      }

      .tabbit-row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
      }

      .tabbit-section-title {
        margin: 18px 0 10px;
        font-weight: 700;
        font-size: 14px;
        color: #333;
      }

      .tabbit-model-list,
      .tabbit-template-list,
      .tabbit-url-rule-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .tabbit-model-row {
        display: grid;
        grid-template-columns: 1fr 1.3fr 90px 100px auto 34px;
        gap: 8px;
        align-items: center;
      }

      .tabbit-current-model {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 12px;
      }

      .tabbit-remove-model,
      .tabbit-remove-url-rule,
      .tabbit-remove-template {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 8px;
        background: #f2f2f2;
        cursor: pointer;
        font-size: 18px;
        color: #666;
      }

      .tabbit-remove-model:hover,
      .tabbit-remove-url-rule:hover,
      .tabbit-remove-template:hover {
        background: #ffe8e8;
        color: #c00;
      }

      .tabbit-template-row {
        padding: 10px;
        border: 1px solid #eee;
        border-radius: 12px;
        background: #fafafa;
      }

      .tabbit-template-head {
        display: grid;
        grid-template-columns: 1fr 34px;
        gap: 8px;
        margin-bottom: 8px;
      }

      .tabbit-url-rule-row {
        display: grid;
        grid-template-columns: 1.6fr 150px 84px 34px;
        gap: 8px;
        align-items: center;
        padding: 8px;
        border: 1px solid #eee;
        border-radius: 12px;
        background: #fafafa;
      }

      .tabbit-rule-match {
        font-size: 12px;
        color: #aaa;
        white-space: nowrap;
      }

      .tabbit-rule-match.matched {
        color: #0d7a3a;
      }

      .tabbit-settings-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 8px 0 14px;
      }

      .tabbit-settings-footer {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 12px 18px;
        border-top: 1px solid #eee;
        background: #fafafa;
      }

      .tabbit-rule-candidates {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .tabbit-rule-candidate {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        padding: 8px 10px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fafafa;
        font-size: 13px;
        word-break: break-all;
        cursor: pointer;
      }

      #tabbit-preview-text {
        width: 100%;
        height: calc(80vh - 150px);
        box-sizing: border-box;
        resize: none;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 12px;
        font-size: 13px;
        line-height: 1.6;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      }

      #tabbit-preview-count {
        font-size: 12px;
        opacity: .85;
        margin-left: 8px;
      }

      @media (max-width: 640px) {
        #tabbit-ai-panel {
          top: 10px;
          right: 10px;
          left: 10px;
          width: auto !important;
          max-width: none;
          height: 82vh !important;
        }

        .tabbit-row-2,
        .tabbit-model-row,
        .tabbit-url-rule-row {
          grid-template-columns: 1fr;
        }

        .tabbit-settings-card,
        .tabbit-small-card,
        .tabbit-preview-card {
          max-width: calc(100vw - 20px);
          max-height: 92vh;
        }
      }
    `;

    document.head.appendChild(style);
  }
})();